@charset "UTF-8";
/* ==============================================================
Version : v.2.0
============================================================== */

/*
 * Brand-kit palette safety net.
 *
 * Per-store CSS (generated by Store MS) sets these tokens to the
 * merchant's chosen colours via `:root { --fws-primary: ...; ... }`
 * and wins over these defaults via natural cascade order (it loads
 * AFTER style.css). But not every store's per-store CSS sets every
 * token — older stores or stores migrated mid-brandkit have empty
 * --fws-surface, --fws-text etc. Any rule that does
 * `background: var(--fws-surface)` with no inline fallback then
 * resolves to nothing → transparent. That's how FONS ended up with
 * a see-through sticky header, transparent search overlay, and
 * white-on-white sidebar categories simultaneously.
 *
 * These defaults guarantee a readable light-mode storefront for any
 * store missing the tokens. Stores that DO set them are unaffected.
 */
:root {
  --fws-surface: #ffffff;
  --fws-surface-alt: #f7f7f7;
  --fws-text: #333333;
  --fws-text-muted: #888888;
  --fws-border: #e6e6e6;
  --fws-primary-alt: #ffffff;
  --fws-secondary-alt: #ffffff;
}
/*================================================
1. Theme Default CSS
2. Top Bar CSS
3. Main Menu and Header CSS
4. Home Slider Area CSS
5. Section Title CSS
6. Product Slider CSS
7. Product Box Banner Area CSS
8. Arrival Product Area CSS
9. Single Product Area CSS
10. Vertical Banner Area CSS
11. Countdown Area CSS
12. Testimonial Area CSS
13. Blog Area CSS
14. Services Area CSS
15. Breadcrumbs Area CSS
16. Shop Area CSS
17. Product Details CSS
18. Faqs Area CSS
19. Cart Product Area CSS
20. Related Product CSS
21. Checkout Page CSS
22. Login and Register Page CSS
23. About Page CSS
24. Contact Page CSS
25. 404 Page CSS
26. Pagination CSS
27. Blog Standard Area CSS
28. Blog Details CSS
29. Top Scroll CSS
30. Footer Area CSS
31. Login, Register and My Account Page CSS
32. Blog View Page
33. Footer
34. Generic Content Placeholder "fws_content"
35. Promotions
36. Gift Cards
37. Special offers page
38. Order success page
39. Product Review Submit Form
40. Popup modals (framework)
41. Subcategories
42. Breadcrumbs
43. Category Header
44. Forms (dynamic)
45. Cart Icon
=================================================*/

/*=========  COLOUR OVERRIDES ====================*/

:root {
    --button-radius: 6px;
}

.btn-primary, .fwsapi-btn-primary
{
    background-color: var(--fws-primary);
    color: var(--fws-primary-alt);
}
.btn-primary:hover, .fwsapi-btn-primary:hover
{
    background-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
}

.btn-secondary, .fwsapi-btn-secondary
{
    background-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
}
.btn-secondary:hover, .fwsapi-btn-secondary:hover
{
    background-color: var(--fws-primary);
    color: var(--fws-primary-alt);
}

/*=========  SECTION SPACING RHYTHM  ==============
   Consistent vertical spacing between homepage sections.
   Overrides utility classes (mt-80, mb-80, pt-50, pb-35 etc.)
   applied by the basepage HTML so that sections have
   uniform 60px internal padding and 0 external margin.
   Visual gap = bottom-padding + next-section-top-padding = 120px.
===================================================*/

.slider-area,
.collection-area,
.arrival-area,
.product-box-area,
.new-product-area,
.best-seller-area,
.blog-area,
.product-slider,
.service-area,
.testimonial-area,
.counter-area,
.offer-area,
.brand-logo-area {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Slider hero keeps its larger padding for visual weight */
.slider-area {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Testimonials: charcoal background needs breathing room */
.testimonial-area {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* Footer: bottom clearance for loyalty bar is on .copy-right-area:last-child */
.fotter-widget-area {
  padding-top: 50px !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/********* 1. Theme Default CSS ********/

body {
  font-family: var(--fws-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
  font-weight: normal;
  font-style: normal;
  background-color: var(--fws-surface);
  color: var(--fws-text);
}

.img {
  max-width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.fix {
  overflow: hidden;
}

a,
.button {
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
button:focus {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

.btn:focus {
  box-shadow: none;
}

a:focus,
a:hover,
.portfolio-cat a:hover,
.footer-menu li a:hover {
  color: var(--fws-secondary);
  text-decoration: none;
}

a,
.button {
  color: var(--fws-text-muted);
  outline: medium none;
  box-shadow: none;
}

label {
  margin-bottom: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {

  font-weight: normal;
  color: var(--fws-text-muted);
  margin-top: 0;
  font-style: normal;
  text-transform: capitalize;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 40px;
  font-weight: 500;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p {
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  color: var(--fws-text-muted);
  margin-bottom: 15px;

}

.mt-100 {
  margin-top: 100px;
}

hr {
  border-bottom: 1px solid var(--fws-border);
  border-top: 0 none;
  margin: 30px 0;
  padding: 0;
}

label {
  color: var(--fws-text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

.checkout-area .billing-details select, .checkout-area .billing-details input {
  width: 100%;
  padding: 15px 30px;
  margin-bottom: 35px;
  color: var(--fws-text);
  font-size: 16px;
  font-weight: 600;

  border: 1px solid var(--fws-border);
}
.checkout-area .billing-details select:focus, .checkout-area .billing-details input:focus {
  border: 1px solid rgba(242, 152, 74, 0.5);
  outline: none !important;
}

.separator {
  border-top: 1px solid #f2f2f2;
}

[class^=fi-]:before {
  margin-left: 0;
}

button:focus {
  outline: none;
}

a:focus {
  color: var(--fws-text);
}

.mk-btn.btn,
.mk-btn-sm.btn {
  border: 0;
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  box-shadow: none !important;
  border-radius: var(--button-radius);
  transition: 0.3s;
  text-transform: uppercase;
}
.mk-btn.btn {
  font-size: 16px;
  padding: 15px 32px;
}
.mk-btn-sm.btn {
  font-size: 17px;
  padding: 10px 25px;
}
.mk-btn.btn:hover,
.mk-btn-sm.btn:hover {
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt);
}

select.vo-select.vo-variant.form-control,
.vo-select.vo-option.form-control
{
    padding-left:1em !important;
}

/* ===================
2. Top Bar CSS
=================== */
.top-bar {
  padding: 10px 0;
  border-bottom: 1px solid var(--fws-border);
}
.top-bar ul {
  margin: 0;
  padding: 0;
}
.top-bar ul li {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.top-bar ul li a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.top-bar ul li a:hover {
  color: var(--fws-primary);
}
.top-bar ul li i {
  vertical-align: middle;
  position: relative;
}

.top-bar ul li img {
  width: 16px;
  margin-right: 2px;
  margin-top: -2px;
}
.top-bar .top-bar-left {
  float: left;
}
.top-bar .top-bar-left ul li {
  margin-right: 15px;
}
.top-bar .top-bar-left ul li:hover {
  color:var(--fws-primary);
}
.top-bar .top-bar-left ul li a {
  text-transform: none;
}

.top-bar i:before{    
  font-size:14px;
  margin:2px;
}

.top-bar .top-bar-right {
  float: right;
}
.top-bar .top-bar-right ul li {
  margin-left: 15px;
}
.top-bar .language .dropdown-menu.show {
  border: 1px solid var(--fws-border);
  box-shadow: none;
  padding: 0;
  width: 150px;
  top: 14px !important;
  margin: 0;
  border-radius: 0;
}
.top-bar .language .dropdown-menu.show a {
  padding: 5px 10px;
  border-bottom: 1px solid var(--fws-border);
  font-size: 14px;
  text-transform: capitalize;
}
.top-bar .language .dropdown-menu.show a:last-child {
  border: none;
}
.top-bar .language .dropdown-menu.show a img {
  margin-right: 5px;
}

/* ===================
3. Main Menu and Header CSS
=================== */
.loader {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  z-index: 99999;
  background: var(--fws-surface);
  text-align: center;
}

.loader .spinner-grow {
  top: 50%;
  position: relative;
  margin: 0 10px;    
}

.loader > .spinner-grow.text-warning
{
    color:var(--fws-primary) !important;
}

a.logo_wrapper.main_logo img {
  margin: 14px 0;
  max-width:250px;
  max-height:65px;
}

.hamburger {
  position: relative;
  width: 40px;
  height: 30px;
  cursor: pointer;
  border: 5px solid transparent;
  float: right;
  margin-top: 15px;
  display: none;
}
.hamburger span {
  width: 100%;
  height: 2px;
  background: var(--fws-text);
  display: block;
  position: absolute;
  right: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger span.h-top {
  top: 0;
}
.hamburger span.h-bottom {
  bottom: 0;
  width: 27px;
}
.hamburger span.h-middle {
  top: 50%;
  margin-top: -1px;
  width: 25px;
}
.hamburger.h-active span {
  width: 100%;
}
.hamburger.h-active span.h-top {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  margin-top: -1px;
}
.hamburger.h-active span.h-middle {
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  transform: translateX(-30px);
  opacity: 0;
}
.hamburger.h-active span.h-bottom {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom: 50%;
  margin-bottom: -1px;
}

.bottombar {
  background-color: #08509e;
}

.main-nav {
  float: right;
}

.main-nav > ul {
  padding: 10px 16px 10px 10px;
  margin: 0;
  list-style: none;
}

.main-nav > ul > li {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}


.main-nav > ul > li.has-child-menu:after {
  position: absolute;
  right: -5px;
  top: 18px;
  font-family: uicons-regular-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e08d";
  font-size: 10px;
}

.main-nav > ul > li + li {
  padding: 0 20px;
}

.main-nav > ul > li > a {
  display: block;
  text-decoration: none;
  color: var(--fws-text);
  line-height: 45px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.main-nav > ul > li:hover > a {
  color: var(--fws-primary);
}

.main-nav > ul > li:hover > a:after {
  opacity: 1;
}

.main-nav ul li .megamenu-wrap {
  position: absolute;
  left: -250px;
  top: auto;
  right: 0;
  min-width: 700px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--fws-surface);
  box-shadow: 0 13px 42px 11px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
}
.main-nav ul li .megamenu-wrap .megamenu-wrap-item {
  width: 100%;
}

.main-nav > ul > li:hover > .megamenu-wrap {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

.main-nav ul li .megamenu-wrap ul li.megamenu-list-title {
  font-weight: bold;
  position: relative;
}

.main-nav ul li .megamenu-wrap ul li.megamenu-list-title a:before {
  position: absolute;
  content: "";
  width: 85px;
  height: 2px;
  background: var(--fws-primary-alt);
  bottom: 0;
}

.main-nav ul li .megamenu-wrap ul {
  margin: 10px 0;
}

.main-nav ul li .megamenu-wrap ul li a {
  padding: 10px 20px;
  display: block;
  color: var(--fws-text);
}

.main-nav ul li .megamenu-wrap ul li a:hover {
  color: var(--fws-primary);
}

.main-nav ul li .sub-menu {
  position: absolute;
  left: 0;
  top: auto;
  right: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--fws-surface);
  box-shadow: 0 13px 42px 11px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.main-nav ul li .sub-menu li .sub-menu {
  right: -200px;
  left: inherit;
  top: 0;
}

.main-nav ul li .sub-menu > li {
  display: block;
  margin: 0;
  position: relative;
}

.main-nav ul li .sub-menu > li a {
  display: block;
  padding: 14px 18px;
  color: var(--fws-text);
  line-height: 1;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--fws-border);
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.main-nav ul li .sub-menu > li a:last-child {
  border: none;
}

.main-nav ul li .sub-menu > li a:hover {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
}

.main-nav > ul > li + li > .sub-menu {
  left: 15px;
}

.main-nav > ul > li:hover > .sub-menu, .main-nav ul li .sub-menu li:hover > .sub-menu, .main-nav ul li .sub-menu li .sub-menu li:hover > .sub-menu {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

.main-nav .fl {
  font-size: 20px;
  text-align: right;
  color: #fff;
  font-style: normal;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  display: none;
  cursor: pointer;
}

.main-nav .fl:before {
  font-size: 14px;
  text-align: center;
  line-height: 35px;
}

.slideInUp {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translate3d(0, 30px, 0);
  -moz-transform: translate3d(0, 30px, 0);
  -ms-transform: translate3d(0, 30px, 0);
  -o-transform: translate3d(0, 30px, 0);
  transform: translate3d(0, 30px, 0);
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.is-active .slideInUp {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slideInUp2 {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

/*------------ Search icon Header -----------*/
.menu-right-icon {
  float: right;
  margin: 17px 0px 17px 0px;
}
.menu-right-icon i::before {
  font-size: 20px;
  vertical-align: middle;
  /*color: var(--fws-primary);*/
  margin-right: 5px;
  margin-left: 5px !important;
}
.menu-right-icon i:hover::before
{
  color: var(--fws-primary);
}

.menu-right-icon ul {
  text-align: center;
}
.menu-right-icon ul li {
  cursor: pointer;
  display: inline-block;
  transition: 0.3s;
  vertical-align: middle;
}
.menu-right-icon ul li .dropdown i {
  font-weight: 500;
}
.menu-right-icon ul li button i {
  font-weight: 500;
}
.menu-right-icon ul li:hover {
  color: var(--fws-primary);
}
.menu-right-icon ul li button.btn.btn-demo {
  background: none;
  margin: 0;
  padding: 0;
  color: var(--fws-primary-alt);
  font-weight: 400;
}
.menu-right-icon ul li button.btn.btn-demo:hover {
  color: var(--fws-primary);
}
/* --- Full-screen search overlay ---
   Replaces the old slide-in search bar with a centered overlay.
   Backdrop grays out the page, large input + prominent CTA button. */

.menu-right-icon ul li .searchbox {
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Full viewport overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2147483646;

  /* Dark backdrop */
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);

  /* Center contents */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;

  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-right-icon ul li .searchbox.searchbox-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Search input — large, chunky, centered */
.menu-right-icon ul li .searchbox .searchbox-input {
  width: min(700px, 85vw);
  height: 64px;
  border: 3px solid var(--fws-primary);
  border-right: none;
  border-radius: var(--button-radius) 0 0 var(--button-radius);
  outline: none;
  background: var(--fws-surface, #fff);
  margin: 0;
  padding: 12px 24px;
  font-size: 20px;
  color: var(--fws-text, #333);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.menu-right-icon ul li .searchbox .searchbox-input::placeholder {
  color: var(--fws-text-muted);
  font-weight: 400;
}

.menu-right-icon ul li .searchbox .searchbox-input:focus {
  border-color: var(--fws-primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(123, 45, 142, 0.15);
}

/* Submit button — prominent CTA */
.menu-right-icon ul li .searchbox .searchbox-icon,
.menu-right-icon ul li .searchbox .searchbox-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 64px;
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
  border: 3px solid var(--fws-primary);
  border-left: none;
  border-radius: 0 var(--button-radius) var(--button-radius) 0;
  cursor: pointer;
  font-size: 24px;
  margin: 0;
  outline: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: background 0.2s, transform 0.1s;
}

.menu-right-icon ul li .searchbox .searchbox-icon:hover,
.menu-right-icon ul li .searchbox .searchbox-submit:hover {
  background: var(--fws-secondary);
  border-color: var(--fws-secondary);
  color: var(--fws-secondary-alt);
  transform: scale(1.02);
}

/* Icon inside submit button */
.menu-right-icon ul li .searchbox .searchbox-icon i::before,
.menu-right-icon ul li .searchbox .searchbox-submit i::before {
  color: var(--fws-primary-alt);
}

.menu-right-icon ul li .searchbox .searchbox-icon:hover i::before,
.menu-right-icon ul li .searchbox .searchbox-submit:hover i::before {
  color: var(--fws-secondary-alt);
}
.menu-right-icon .wish-list {
  color: var(--fws-primary-alt);
}
.menu-right-icon .wish-list:hover {
  color: var(--fws-primary);
}

.bg-white {
  background-color: var(--fws-surface);
}

.static {
  position: static;
}

.owl-dots {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -80px;
  margin-bottom:40px;
}

.owl-dot {
  border: 1px solid var(--fws-primary-alt);
  height: 13px;
  width: 13px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  left: 0;
  right: 0;
  top: 0;
}

.owl-dot.active {
  background: var(--fws-primary-alt);
  border: 2px solid var(--fws-primary-alt);
}

.header_area {
  margin: 10px 0;
}
.header_area .modal-header .close {
  padding: 0rem 1rem;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select,
.form-control {
  outline: none !important;
  background-color: var(--fws-surface-alt) !important;
  color: var(--fws-text) !important;
  border: 1px solid var(--fws-border);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:focus, select:focus,
.form-control:focus {
  border: 1px solid rgba(242, 152, 74, 0.5) !important;
  background-color: var(--fws-surface-alt) !important;
  color: var(--fws-text) !important;
  box-shadow: none;
}
::placeholder {
  color: var(--fws-text-muted) !important;
  opacity: 1;
}
::file-selector-button {
  background-color: var(--fws-surface) !important;
  color: var(--fws-text) !important;
  border: 1px solid var(--fws-border) !important;
  padding: 6px 12px;
  cursor: pointer;
}
::file-selector-button:hover {
  background-color: var(--fws-surface-alt) !important;
}
.custom-file-label {
  background-color: var(--fws-surface-alt) !important;
  color: var(--fws-text) !important;
  border-color: var(--fws-border) !important;
}
.custom-file-label::after {
  background-color: var(--fws-surface) !important;
  color: var(--fws-text) !important;
  border-left: 1px solid var(--fws-border) !important;
}
.field-error {
  color: #ff6b6b !important;
}

.stickyHeader.sticky {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--fws-surface);
  z-index: 999;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.dropdown-menu.user-menu.dropdown-menu-right.show {
  width: 170px;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: 0 13px 42px 11px rgba(5, 4, 4, 0.05);
}
.dropdown-menu.user-menu.dropdown-menu-right.show a.dropdown-item {
  padding: 5px 10px;
  font-size: 14px;
}
.dropdown-menu.user-menu.dropdown-menu-right.show a.dropdown-item i {
  vertical-align: middle;
}
.dropdown-menu.user-menu.dropdown-menu-right.show a.dropdown-item i::before {
  font-size: 16px;
}

.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 340px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
  min-width: 100%;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

/* ----- MODAL STYLE ----- */
.modal-content {
  border-radius: 0;
  border: none;
}
.modal-content {
  background-color: var(--fws-surface);
}
.modal-content .modal-header {
  border-bottom-color: var(--fws-border);
  background-color: var(--fws-surface-alt);
  display: flex;
  align-items: center;
  padding: 14px 10px;
}
.modal-content .modal-header .modal-title {
  font-size: 14px;
  color:var(--fws-primary-alt);
}

.modal-header .close {
  margin: 0;
}

.modal.right.fade.show .modal-dialog {
  right: 0;
}

.dropdown-menu {
  background-color: var(--fws-surface);
  color: var(--fws-text);
  border-color: var(--fws-border);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.dropdown-menu a.dropdown-item {
  color: var(--fws-text);
}
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
  background-color: var(--fws-surface-alt);
  color: var(--fws-text);
}
.dropdown-menu a.dropdown-item:active {
  background: var(--fws-primary);
  color:  var(--fws-primary-alt);
}

.dropdown-menu.show {
  top: 27px !important;
  padding: 10px;
  width: 300px;
}

.minicart-product-info {
  position: relative;
}

.minicart-product-info .delete-btn {
  position: absolute;
  right: 10px;
  cursor: pointer !important;
}

.minicart-product-info .delete-btn i.flaticon-delete:before {
  content: "";
  color: var(--fws-text) !important;
  cursor: pointer !important;
  font-size: 15px;
}
.minicart-product-info .delete-btn i.flaticon-delete:hover:before {
  color: var(--fws-primary) !important;
}

i.flaticon-delete:hover {
  color: var(--fws-primary);
}

.minicart-product-info img.img-border {
  border: 1px solid var(--fws-border);
  padding: 5px;
  width: 80px;
}

.minicart-product-info a {
  margin: 0;
  padding: 0 !important;
}

.minicart-product-info .product-meta h5.product-title {
  font-size: 15px;
  margin-top: 0px;
  line-height: 20px;
}

.minicart-product-info .product-meta h5.product-title a {
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none;
}

.minicart-product-info .product-meta span.product-price {
  font-weight: 600;
  font-size: 14px;
  display: flex;
}

.minicart-product-calculation {
  margin-top: 30px;
}

.minicart-product-calculation p {
  margin-bottom: 13px;
  font-size: 18px;
  font-weight: normal;
  color: var(--fws-primary-alt);
}

.minicart-product-calculation .dcart-action {
  text-align: center;
  margin-top: 30px;
  justify-content: space-between;
}

.minicart-product-calculation .dcart-action a {
  color: #fff;
  margin: 3px;
  display: block;
  font-size: 12px;
  padding: 6px 25px;
}

.minicart-product-calculation .dcart-action a:last-child {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
}
.minicart-product-calculation .dcart-action a:last-child:hover {
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt);
}

.minicart-product-calculation .dcart-action .cart-btn {
  margin-bottom: 10px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  text-transform: capitalize;
}
.minicart-product-calculation .dcart-action .cart-btn:hover {
  color: var(--fws-primary-alt);
}

figure {
  margin-right: 15px;
}

span.item-delete {
  padding: 1.5rem 0;
  display: block;
}

/* Generic searchbox fallback (non-header contexts) */
.searchbox {
  width: 100%;
  display: block;
}

/*
 * Search input lives inside a dimmed overlay when the header search icon is clicked.
 * Without an explicit background the input is transparent, so the page-dim bleeds
 * through and the placeholder/text floats over the overlay. Use the brand palette's
 * --fws-surface so light-mode stores get white and dark-mode stores get their dark
 * surface automatically. !important is required because the input typically renders
 * outside the higher-specificity `.menu-right-icon ul li .searchbox` scope.
 */
input.searchbox-input {
  border: none;
  outline: none;
  width: 100%;
  background-color: var(--fws-surface, #fff) !important;
  color: var(--fws-text, #333) !important;
}
input.searchbox-input::placeholder {
  color: var(--fws-text-muted, #888);
}

button.searchbox-submit {
  position: absolute;
  background: var(--fws-primary);
  border: none;
  right: 0;
  outline: none;
  height: 100%;
  width: 10%;
  top: 0;
  color: var(--fws-primary-alt);
  font-weight: 600;
  cursor: pointer;
}

.dropdown-menu.dropdown-menu-right.large.show {
  width: 600px;
  border: 1px solid var(--fws-primary);
  transition: all 0.5s ease-in-out;
}

.nav-search ul li button i::before {
  align-items: normal;
  vertical-align: middle;
}

.nav-search ul li button i.bx-search-alt {
  margin: 0;
  vertical-align: middle;
  padding: 9px 13px;
}

.product-slider .owl-nav .owl-next {
  position: absolute;
  right: -30px;
  top: 20%;
}

.product-slider .owl-nav .owl-prev {
  position: absolute;
  top: 28%;
  left: -30px;
  -webkit-transform: translateY(-30%);
  transform: translateY(-30%);
}

.prodct-info p {
  margin-bottom: 0;
}

/* ===================
4. Home Slider Area CSS
=================== */

.slider-area {
  background: var(--fws-primary);
  /* padding controlled by section spacing rhythm block */
  min-height: 500px; /* Minimum height to prevent collapse */
}

.slider-area *
{
    color: var(--fws-primary-alt);
}

/* Fix slider height to prevent jumping */
.slider-wrapper.owl-carousel {
  min-height: 450px;
}

.slider-wrapper .owl-stage-outer {
  min-height: 450px;
}

.slider-area .slider-wrapper .slider-info {
  margin-top: 30px;
  margin-bottom: 30px;
  max-height: 450px; /* Prevent excessive height */
  overflow: hidden; /* Hide overflow content */
}

/* Limit and truncate heading text */
.slider-area .slider-wrapper .slider-info h2 {
  font-size: 65px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: capitalize;
  
  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 253px; /* 65px * 1.3 line-height * 3 lines */
  word-break: break-word; /* Break long words */
}

.slider-area .slider-wrapper .slider-info h4 {
  font-weight: bold;
  text-transform: uppercase;
  
  /* Limit to 1 line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Limit paragraph text */
.slider-area .slider-wrapper .slider-info p {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  margin-top: 12px;
  
  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 90px; /* 30px line-height * 3 lines */
  word-break: break-word;
}

.slider-area .slider-wrapper .slider-info .slider-btn {
  margin-top: 20px;
}

/* Fix image container to prevent size variations */
.slider-area .slider-wrapper .slide-imge {
  position: relative;
  width: 100%;
  max-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slider-area .slider-wrapper .slide-imge img {
  max-width: 100%;
  max-height: 450px;
  width: auto;
  height: auto;
  object-fit: contain; /* Keep full image visible */
  object-position: center;
}

/* Ensure both columns have equal height */
.slider-area .row {
  align-items: center;
  min-height: 450px;
}

/* Owl Carousel animations remain intact */
.slider-area .owl-item.active h2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
.slider-area .owl-item.active a {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.slider-area .owl-item.active h4 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.slider-area .owl-item.active h3 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.slider-area .owl-item.active p {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* ===================
5. Section Title CSS
=================== */
.section-title {
  margin: 10px 0px 50px 0;
}
.section-title h2 {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 30px;
}
.section-title h2::before {
  content: "";
  background: var(--fws-text);
  width: 50px;
  height: 5px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0px auto;
  z-index: 1;
  border-radius: 3px;
}
.section-title h2::after {
  content: "";
  width: 160px;
  height: 5px;
  background: var(--fws-primary);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0px auto;
  border-radius: 3px;
}

/* ===================
6. Product Slider CSS
=================== */
.product-slider {
  /* padding controlled by section spacing rhythm block */
}
.product-slider .product-wrapper .single-product {
  cursor: pointer;
  text-align: center;
}
.product-slider .product-wrapper .single-product:hover .prodct-info img {
  border: 1px solid var(--fws-primary);
  transition: all 0.5s ease-in-out;
}
.product-slider .product-wrapper .single-product:hover .prodct-info p {
  color: var(--fws-primary);
}
.product-slider .product-wrapper .single-product .prodct-info img {
  border-radius: 50%;
  border: 1px solid #fff;
  transition: 0.3s;
}
.product-slider .product-wrapper .single-product .prodct-info p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  color: var(--fws-text);
  transition: 0.3s;
}
.product-slider .owl-carousel .owl-item img {
  width: auto;
  display: inline-block;
}
.product-slider .owl-nav {
  display: block !important;
}
.product-slider .owl-nav .owl-prev i {
  color: var(--fws-text-muted);
  font-size: 50px;
}
.product-slider .owl-nav .owl-next i {
  color: var(--fws-text-muted);
  font-size: 50px;
}

/* ===================
7. Product Box Banner Area CSS
=================== */
.product-box-area {
  /* padding controlled by section spacing rhythm block */
}
.product-box-area .mk-banner-vertical {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/sb/6301/epic/boxbg-1.png);
  padding: 30px 0 20px 0;
}

/*
 * Bombproof vertical-banner image slot: the original design assumed square ~263×263
 * cut-out PNGs sitting on a pastel boxbg. AI-enriched images often arrive as
 * smaller rectangles with opaque backgrounds, which used to render as a tiny block
 * in the top-left. Lock the image slot to a square aspect ratio and cover-fit so
 * both cut-outs and rectangles fill the column consistently.
 */
.product-box-area .mk-banner-vertical-image,
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.product-box-area .mk-banner-vertical-image > img,
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  max-width: none;
}
.product-box-area .mk-banner-vertical:hover.mk-banner-vertical-image img {
  transform: scale(1.2);
  transition: all 0.5s ease-in-out;
}
.product-box-area .mk-banner-vertical-content {
  text-align: center;
  margin-top: 15px;
}
.product-box-area .mk-banner-vertical-content h2 {
  font-size: 55px;
  line-height: 55px;
  font-weight: 600;

}
.product-box-area .mk-banner-vertical-content h5 {
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;

  color: #FB763C;
  text-transform: capitalize;
}
.product-box-area .mk-banner-vertical-content p {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;

  margin-top: 18px;
}
.product-box-area .mk-banner-vertical-content .banner-btn {
  margin-top: 25px;
  margin-bottom: 30px;
}
.product-box-area .mk-banner-vertical-one {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/sb/6301/epic/boxbg-2.png);
  padding: 18px 0 0 0;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-image {
  /*background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/sb/6301/epic/boximg-2.png);
  background-repeat: no-repeat;*/
  height: 100%;
  width: 100%;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-image img {
  transition: all 0.5s ease-in-out;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-image .box-shape {
  background: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/sb/6301/epic/box-shape.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  background-position: bottom right;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-one-content {
  text-align: center;
  margin-top: 16px;
  padding-bottom: 24px;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-one-content h2 {
  font-size: 40px;
  line-height: 55px;
  font-weight: 600;

}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-one-content h5 {
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;

  color: #FB763C;
  text-transform: capitalize;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-one-content p {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;

  margin-top: 18px;
}
.product-box-area .mk-banner-vertical-one .mk-banner-vertical-one-content .banner-btn {
  margin-top: 32px;
  margin-bottom: 22px;
}

/* ===================
8. Arrival Product Area CSS
=================== */
.arrival-area {
  /* padding controlled by section spacing rhythm block */
}
.arrival-area .arrival-title {
  margin-bottom: 75px;
  margin-top: 50px;
}

.arrival-area-2 {
  padding-top: 43px;
}

/* ===================
9. Single Product Area CSS
=================== */


/* Fix product image aspect ratio and prevent distortion */
.mk-product-item .mk-product-item-info .mk-product-image {
  position: relative;
  overflow: hidden;
  background: var(--fws-surface);
  text-align: center;
  margin-bottom: 15px;
  width: 100%;
  padding-bottom: 100%; /* Creates square aspect ratio container */
}

.mk-product-item .mk-product-item-info .mk-product-image a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mk-product-item .mk-product-item-info .mk-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Use 'contain' instead of 'cover' to show full product */
  object-position: center;
  transition: all 0.5s ease-in-out;
}

.mk-product-item .mk-product-item-info .mk-product-image:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
  background: rgba(0, 0, 0, 0.2);
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  z-index: 1;
}

/* Equal height product cards */
.mk-product-item {
  border: 1px solid var(--fws-border);
  border-radius: 3px;
  margin-bottom: 30px;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mk-product-item:hover .mk-product-item-info .mk-product-image:before {
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.mk-product-item:hover .product-hover-action {
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.mk-product-item .product-hover-action {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;              /* fill the whole image/card area */
  z-index: 2;
  text-align: center;
  padding-top: 0;
  transition: all 0.5s ease-in-out;

  -moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);

  display: flex;
  flex-direction: column;
  justify-content: center;   /* keeps your <ul> centred vertically */
  align-items: center;
}


.mk-product-item .product-hover-action ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.mk-product-item .product-hover-action ul li {
  display: inline-block;
  margin: 3px;
}
.mk-product-item .product-hover-action ul li a {
  background: var(--fws-primary);
  padding: 10px;
  width: 50px;
  height: 40px;
  display: block;
  transition: all 0.3s;
}
.mk-product-item .product-hover-action ul li a i {
  font-size: 22px;
  color: var(--fws-primary-alt);
  position:relative;
  top:-3px;
}
.mk-product-item .product-hover-action ul li a:hover {
  background: var(--fws-secondary);
}
.mk-product-item .product-hover-action ul li a:hover i {
  color: var(--fws-secondary-alt);
}

/* RIBBON: absolutely position it at the bottom of the overlay */
.product-hover-action-variants {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15%;

  padding: 4px 8px;
  text-align: center;
  
  /*background: var(--fws-primary); if this fits your theme */
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  
  font-size: 12px;
  font-weight: 600;
}


.mk-product-item .mk-product-item-info {
  display: block;
  background: var(--fws-surface);
  flex-shrink: 0;
  position: relative;
}
.mk-product-item .mk-product-item-info .mk-product-image {
  position: relative;
  overflow: hidden;
  background: var(--fws-surface);
  padding: 0px 20px;
  text-align: center;
  margin-bottom: 15px;
}
.mk-product-item .mk-product-item-info .mk-product-image:before {
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.mk-product-item .mk-product-item-info .mk-product-image a img {
  transition: all 0.5s ease-in-out;
}

/* Base ribbon styles - shared by all ribbons */
.mk-product-item .mk-product-item-info [class*="-ribbon"] {
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  height: 60px;
  width: 60px;
  top: 10px;
  left: 10px;
  padding: 16px 10px;
  z-index: 1;
}

.mk-product-item .mk-product-item-info [class*="-ribbon"] span {
  text-align: center;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  color: #fff;
  margin: 5px 0;
}

/* Individual ribbon background images */
.mk-product-item .mk-product-item-info .discount-percent-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-1.png);
}

.mk-product-item .mk-product-item-info .discount-percent-ribbon span {
  margin: 0; /* Override for this specific one */
}

.mk-product-item .mk-product-item-info .new-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-2.png);
}

.mk-product-item .mk-product-item-info .sale-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3.png);
}

.mk-product-item .mk-product-item-info .hotpink-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/hot_pink.png);
}

.mk-product-item .mk-product-item-info .lime-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/lime.png);
}
.mk-product-item .mk-product-item-info .magenta-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/magenta.png);
}
.mk-product-item .mk-product-item-info .orange-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/orange.png);
}
.mk-product-item .mk-product-item-info .turquoise-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/turquoise.png);
}

.mk-product-item .mk-product-item-info .violet-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/violet.png);
}

.mk-product-item .mk-product-item-info .pink-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-pink.png);
}

.mk-product-item .mk-product-item-info .purple-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-purple.png);
}

.mk-product-item .mk-product-item-info .red-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-red.png);
}

.mk-product-item .mk-product-item-info .green-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-green.png);
}


.mk-product-item .mk-product-item-info .crimson-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-crimson.png);
}

.mk-product-item .mk-product-item-info .blue-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-blue.png);
}

.mk-product-item .mk-product-item-info .gold-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/starburst-gold.png);
}

.mk-product-item .mk-product-item-info .aqua-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/aqua.png);
}

.mk-product-item .mk-product-item-info .sky-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/sky.png);
}

/* Additional 10 ribbon colors - optimized for white text contrast */

.mk-product-item .mk-product-item-info .black-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-black.png);
}

.mk-product-item .mk-product-item-info .navy-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-navy.png);
}

.mk-product-item .mk-product-item-info .darkgreen-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-darkgreen.png);
}

.mk-product-item .mk-product-item-info .maroon-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-maroon.png);
}

.mk-product-item .mk-product-item-info .indigo-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-indigo.png);
}

.mk-product-item .mk-product-item-info .teal-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-teal.png);
}

.mk-product-item .mk-product-item-info .charcoal-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-charcoal.png);
}

.mk-product-item .mk-product-item-info .olive-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-olive.png);
}

.mk-product-item .mk-product-item-info .darkmagenta-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-darkmagenta.png);
}

.mk-product-item .mk-product-item-info .brown-ribbon {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/freewebstore/starbursts/start-3-brown.png);
}


.mk-product-item .mk-product-content {
  transition: 0.3s;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.mk-product-item .mk-product-content .mk-product-category {
  font-size: 15px;
  line-height: 22.25px;
  font-weight: 600;

  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-product-item .mk-product-content .mk-product-title {
  font-weight: 600;

  font-size: 15px;
  text-transform: capitalize;
  padding: 0 15px;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines - adjust this number as needed */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em; /* Ensures consistent spacing even for short titles */
}

.view-list .mk-product-item .mk-product-content .mk-product-title {
  font-weight: 600;
  font-size: 24px;
  padding: 10px 0px;
}

.mk-product-item .mk-product-content .mk-product-price {
  justify-content: center;
  /*margin-top: auto; Push price to bottom */
  margin-bottom: 10px;
}
.mk-product-item .mk-product-content .mk-product-price .sales-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--fws-primary);
}
.mk-product-item .mk-product-content .mk-product-price .discount-price {
  color: var(--fws-text-muted);
  margin: 0 10px;
  font-size: 14px;
  font-weight: 600;
}

/* Column spacing */
.arrival-area [class*="col-"] {
    margin-bottom: 30px;
}

#btn_add_to_cart
{
    width:100%;
    font-size:16px;
    font-weight:700;
}

/* ===================
10. Vertical Banner Area CSS
=================== */
.collection-area .single-collection {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
}
.collection-area .single-collection:hover .collection-imge img {
  transform: scale(1.035) rotate(0.05deg);
  transition: all 300ms linear;
}
.collection-area .single-collection p {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;

  color:var(--fws-secondary);
  letter-spacing: 3px;
}
.collection-area .single-collection .sub-title {
  color: #fff !important;
}
.collection-area .single-collection h3 {
  font-size: 40px;
  font-weight: 600;

  line-height: 50px;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.collection-area .single-collection .title {
  color: var(--fws-secondary) !important;
}
.collection-area .single-collection .collection-btn {
  margin-top: 15px;
  margin-bottom: 60px;
}
.collection-area .single-collection .collection-imge {
  padding-bottom: 20px;
  transition: 0.3s;
}
.collection-area .single-collection .collection-imge img {
  transition: all 300ms linear;
}

/* ===================
11. Countdown Area CSS
=================== */
.countdown {
  margin: 0px 0 100px 0;
}

.countdown .countdown-wrapper {
  background-repeat: no-repeat;
  background-size: cover;
}

.offer-countdown {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 100%;
}

.countdown .countdown-wrapper .overlay {
  background: rgba(9, 114, 101, 0.8);
  padding: 50px 30px;
}

.countdown .countdown-wrapper .offer-text {
  text-align: center;
}

.countdown .countdown-wrapper .offer-text h4 {
  color: #ffffff;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

.countdown .countdown-wrapper .offer-text h3 {
  color: #ffffff;
  font-weight: bold;
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 7px;
}

.countdown .countdown-wrapper .offer-text h5 {
  color: #ffffff;
}

.countdown .countdown-wrapper .offer-text .countdown-btn {
  margin-top: 15px;
}

.countdown .countdown-wrapper .offer-countdown #timer {
  display: flex;
}

.countdown .countdown-wrapper .offer-countdown #timer div {
  background: var(--fws-surface);
  padding: 10px;
  margin: 15px;
  text-align: center;
  border-radius: 8px;
  font-size: 30px;
  font-weight: bold;
  min-width: 100px;
  color: var(--fws-primary);
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
}

.countdown .countdown-wrapper .offer-countdown #timer div span {
  display: block;
  font-size: 18px;
  color: var(--fws-secondary);
  font-weight: 600;
}

.countdown .countdown-wrapper a.see-offer:hover {
  background: var(--fws-surface);
  color: var(--fws-primary-alt);
}

/* ===================
12. Testimonial Area CSS
=================== */
.testimonial-area {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/sb/6301/epic/ts-bg.png);
  background-color:var(--fws-text);
  background-repeat: no-repeat;
  display: block;
  background-position: center center;
  background-size: cover;
  /* padding/margin controlled by section spacing rhythm block */
}
.testimonial-area .testimonial-title {
  padding-top: 76px;
  display: block;
  overflow: hidden;
}
.testimonial-area .testimonial-title h2 {
  color: #fff;
}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info {
  margin-top: 15px;
  text-align: center;
}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  color: #fff;

}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info p {
  font-size: 20px;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.7);
}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info .rating i {
  margin-right: 0 !important;
}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info .rating i::before {
  margin: 0 3px;
  color: #f5b731;
}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info .description {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  color: #fff;
  position: relative;
  padding: 0px 115px;
  margin-top: 25px;
}
.testimonial-area .testimonial-wrapper .single-testimonial .testi-info .description i::before {
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
}
.testimonial-area .testimonial-wrapper .owl-dots {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
}

.testimanial-area .owl-dot.active
{
    border-color:var(--fws-primary);    
    background-color:var(--fws-primary) !important;
}
.testimonial-area .owl-dot
{
    border-color:var(--fws-primary);
}

div.testimonial-wrapper .rating i {
  display: inline-block;
}

/* Hide all stars by default */
div.testimonial-wrapper .rating i,
div.review .rating i,
div.product-information  .rating i
{
  opacity: 0;
}

/* Show stars based on class */
div.testimonial-wrapper .rating_1 i:nth-child(-n+1),
div.testimonial-wrapper .rating_2 i:nth-child(-n+2),
div.testimonial-wrapper .rating_3 i:nth-child(-n+3),
div.testimonial-wrapper .rating_4 i:nth-child(-n+4),
div.testimonial-wrapper .rating_5 i:nth-child(-n+5) {
  opacity: 1;
}

div.review .rating_1 i:nth-child(-n+1),
div.review .rating_2 i:nth-child(-n+2),
div.review .rating_3 i:nth-child(-n+3),
div.review .rating_4 i:nth-child(-n+4),
div.review .rating_5 i:nth-child(-n+5) {
  opacity: 1;
}


div.product-information .rating_1 i:nth-child(-n+1),
div.product-information .rating_2 i:nth-child(-n+2),
div.product-information .rating_3 i:nth-child(-n+3),
div.product-information .rating_4 i:nth-child(-n+4),
div.product-information .rating_5 i:nth-child(-n+5) {
  opacity: 1;
}

/* ===================
13. Blog Area CSS
=================== */

/* navigation links to blog articles */
.main-nav ul li .sub-menu > li a.blog_link
{
    line-height:2em;
     display: -webkit-box;
    -webkit-line-clamp: 3;          /* number of lines you want visible */
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 260px;               /* adjust for your menu layout */

    /* Fade-out mask */
 -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);

}

[class^=fi-]:before, [class*=" fi-"]:before, [class^=fi-]:after, [class*=" fi-"]:after {
  /*font-family: Flaticon;*/
  font-size: 20px;
  font-style: normal;
  margin-left: 0 !important;
}

.blog-area {
  /* padding controlled by section spacing rhythm block */
}

.bolg-area-grid {
  padding: 100px 0;
}
.bolg-area-grid .single-blog {
  margin-bottom: 30px;
}

.single-blog:hover .blog-thum img {
  transform: scale3d(1.1, 1.1, 1.1);
}
.single-blog .blog-wrapper {
  position: relative;
  overflow: hidden;
}
.single-blog .blog-wrapper .blog-thum img {
  width: 100%;
  transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
}
.single-blog .blog-wrapper .blog-content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.single-blog .blog-wrapper .blog-content a {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  margin-left: 20px;
  color: var(--fws-secondary-alt);
  background: var(--fws-secondary);
  padding: 10px 15px;
  border-radius: 3px 3px 0 0;
  display: block;
}
.single-blog .blog-wrapper .blog-content a i {
  margin-right: 0 !important;
}
.single-blog .blog-wrapper .blog-content a i::before {
 
  font-size: 15px;
  margin-right: 5px;
}
.single-blog .card {
  padding: 15px 15px 15px 15px;
  border-radius: 0 0 0 3px;
  border: none;
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.15);
  min-height: 180px;
  background-color: var(--fws-surface);
  border-top: 1px solid var(--fws-border);
}
.single-blog .card .title h4 a {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}
.single-blog .card .title h4 a:hover {
  color: var(--fws-primary);
}
.single-blog .card .title a.category {
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
}
.single-blog .card .title a.read-more {
  border: 0;
  background: var(--fws-primary);
  color: var(--fws-primary-alt) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 12px 28px;
  text-align: center;
  white-space: nowrap;
  outline: none;
  box-shadow: none !important;
  border-radius: var(--button-radius);
  transition: 0.3s;
  text-transform: uppercase;
  display: inline-block;
  float: right;
}
.single-blog .card .title a.read-more:hover {
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt) !important;
}
.single-blog .card .title a.read-more i {
  position: relative;
  top: 2px;
}
.single-blog .blog-wrapper .blog-content a i.fi-rr-calendar::before
{
    color:#fff;
}

/* Fix image container aspect ratio and prevent distortion */
.blog-thum {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
    background-color: var(--fws-surface-alt);
}

.blog-thum a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blog-thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Equal height cards */
.single-blog {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-wrapper {
    flex-shrink: 0;
}

.single-blog .card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.single-blog .card .title {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


/* Alternative: Use line-clamp for cleaner cutoff (better browser support now) */
.single-blog .card .title h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Handle long author names */
.single-blog .card .title .category {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 10px;
}

/* Push Read More button to bottom */
.single-blog .card .title .read-more {
    margin-top: auto;
}

/* Column spacing */
.blog-area [class*="col-"] {
    margin-bottom: 30px;
}

/* ===================
14. Services Area CSS
=================== */
.service-area {
  /* padding controlled by section spacing rhythm block */
}
/* Framework service icons strip uses Bootstrap bg-white */
.service-icons-ctrl {
  background-color: var(--fws-surface) !important;
  border-color: var(--fws-border) !important;
}

/*
 * Duotone service icons: the SVG defaults use --fws-primary-alt / --fws-secondary-alt for
 * the secondary stroke, but those tokens are the high-contrast text-on-color pair (often
 * pure white or near-white) and so vanish on a light card background. Redefine the *-alt
 * vars *only* inside the icon containers so the duotone pairs primary + secondary instead.
 */
.service-icons-ctrl .icon-wrapper svg,
.services-slideshow-highlights .icon-wrapper svg {
  --fws-primary-alt: var(--fws-secondary);
  --fws-secondary-alt: var(--fws-primary);
}
.service-area .single-service {
  box-shadow: -1.90476px 1.90476px 14.2857px rgba(0, 0, 0, 0.15);
  padding: 10px;
  transition: 0.3s;
}
.service-area .single-service:hover {
  transform: translateY(-15px);
}
.service-area .single-service i::before {
  font-size: 80px;
  color: var(--fws-primary);
}
.service-area .single-service:hover i::before {
  color: var(--fws-secondary);
}
.service-area .single-service p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 700;

  color: var(--fws-text);
  min-height: 60px;
  margin: 0;
  display: block;
}

/* ===================
15. Breadcrumbs Area CSS
=================== */
.breadcrumbs-area {
  background-image: url(//d3l66gvjdr7rqw.cloudfront.net/design_media/sb/6301/epic/sub-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; 
}
.breadcrumbs-area .breadcrumbs-wrapper {
  background: #000000b5;
}
.breadcrumbs-area .breadcrumbs-wrapper .mk-page-title h2 {
  font-size: 48px;
  font-weight: 700;

  color: #fff;
  max-width:1200px;
  margin:0 auto;
  padding-left:2em;
  padding-right:2em;
}
.breadcrumbs-area .breadcrumbs-wrapper .breadcrumb-link ul {
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.breadcrumbs-area .breadcrumbs-wrapper .breadcrumb-link ul li {
  font-size: 17px;
  font-weight: 500;
  display: inline-block;
  margin: 0px 5px;
}
.breadcrumbs-area .breadcrumbs-wrapper .breadcrumb-link ul li a {
  color: #fff;
  font-weight:bold;
  font-size:revert;
}
.breadcrumbs-area .breadcrumbs-wrapper .breadcrumb-link ul li i {
  position: relative;
  top: 3px;
  left: 6px;
  opacity:0.5;
}
.breadcrumbs-area .breadcrumbs-wrapper .breadcrumb-link ul li i:before{
    font-size:16px;
    color:#fff;
}
.breadcrumbs-area .breadcrumbs-wrapper .breadcrumb-link ul li.active {
  color: #ddd;
}

/* ===================
16. Shop Area CSS
=================== */
.shop-area {
  padding: 50px 0;
}
.shop-area .sidebar-widget .widget-area-title h5 {

  font-size: 20px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
}
.shop-area .sidebar-widget .widget-area-title h5::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: var(--fws-border);
  right: 0;
  left: 0;
  bottom: -10px;
}
.shop-area .sidebar-widget .product-category {
  margin-top: 30px;
  margin-bottom: 48px;
}
.shop-area .sidebar-widget .product-category .accordian {
  margin: 0;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item {
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item .accordian-item-header {
  padding: 0;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item .accordian-item-header .active {
  border: none;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item .accordian-item-body .accordian-item-body-content {
  border: none;
  padding: 0 15px;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item .accordian-item-body .accordian-item-body-content li {
  margin-bottom: 0;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item .accordian-item-body .accordian-item-body-content li a:focus {
  color: var(--fws-primary-alt);
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item {
  background-color: var(--fws-surface);
  color: var(--fws-primary-alt);
  border-bottom: 1px solid var(--fws-border);
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item:last-child {
  border-bottom: none;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item-header {
  padding: 0 3rem 0 0.75rem;
  min-height: 44px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item-header:hover {
  background: var(--fws-surface-alt);
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item-header h5 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.accordian-item-header.active h5 a {
    color:var(--fws-secondary);
}

.shop-area .sidebar-widget .product-category .accordian .accordian-item-header::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  position: absolute;
  color: var(--fws-secondary);
  right: 0;
  top: 0;
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-area .sidebar-widget .product-category .accordian .accordian-item-header.active + .accordian-item-body {
    max-height: 500px;
}

.shop-area .sidebar-widget .product-category .accordian .accordian-item-header.active::after {
  content: "−";
  color: var(--fws-secondary);
}

.shop-area .sidebar-widget .product-category .accordian .accordian-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.shop-area .sidebar-widget .product-category .accordian .accordian-item-body a.active {
    font-weight: 600;
    color: var(--fws-primary);
}

.shop-area .sidebar-widget .product-category .accordian .accordian-item-body-content {
  padding: 4px 0 8px 0;
  line-height: 1.5;
  border-top: 1px solid var(--fws-border);
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item-body-content li a {
  font-size: 14px;
  display: block;
  padding: 8px 12px 8px 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.shop-area .sidebar-widget .product-category .accordian .accordian-item-body-content li a:hover {
  background: var(--fws-surface-alt);
  border-left-color: var(--fws-primary);
  color: var(--fws-primary) !important;
}
.shop-area .sidebar-widget .widget-area-title {
  margin-top: 20px;
}
.shop-area .sidebar-widget .brands {
  margin-top: 14px;
  margin-bottom: 30px;
}
.shop-area .sidebar-widget .brands .brand-image {
  margin-top: 30px;
  margin-bottom: 10px;
}
.shop-area .sidebar-widget .brands .brand-image .brand {
  display: flex;
  justify-content: space-between;
}
.shop-area .sidebar-widget .brands .brand-image .brand img {
  border: 1px solid #E5E5E5;
  padding: 15px;
  margin-bottom: 15px;
}
.shop-area .sidebar-widget .checkout-option {
  margin-top: 30px;
}
.shop-area .sidebar-widget .checkout-option *, .shop-area .sidebar-widget .checkout-option *:before, .shop-area .sidebar-widget .checkout-option *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.shop-area .sidebar-widget .checkout-option .form-group {
  display: block;
  margin-bottom: 15px;
}
.shop-area .sidebar-widget .checkout-option .form-group input[type=checkbox], .shop-area .sidebar-widget .checkout-option .form-group input[type=radio] {
  box-sizing: border-box;
  padding: 0;
  display: none !important;
}
.shop-area .sidebar-widget .checkout-option .form-group span {
  float: right;
  color: #CCCCCC;

}
.shop-area .sidebar-widget .checkout-option .form-group label {
  position: relative;
  cursor: pointer;
  color: var(--fws-primary-alt);
  font-weight: 600;
}
.shop-area .sidebar-widget .checkout-option .form-group label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid var(--fws-primary);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}
.shop-area .sidebar-widget .checkout-option .form-group input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid var(--fws-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.shop-area .prouduct-view-area [data-tab-content] {
  display: none;
}
.shop-area .prouduct-view-area .active[data-tab-content] {
  display: block;
}

.shop-area .prouduct-view-area .form-group {
  margin-bottom: 0;
  margin-left: 30px;
}
.shop-area .prouduct-view-area .form-group select.form-control:not([size]):not([multiple]) {
  height: calc(1.85rem + 2px);
}
.shop-area .prouduct-view-area .form-control {
  border: 1px solid var(--fws-primary);
  padding: 2px 14px;
  box-shadow: none;
}
.shop-area .prouduct-view-area .main {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  width:100%;
}
.shop-area .prouduct-view-area .tabs {
  border: 1px solid var(--fws-primary);
  border-radius: 3px;
  display: inline-flex;
}
.shop-area .prouduct-view-area .tabs li {
  display: inline-block;
}
.shop-area .prouduct-view-area .tabs li i::before {
  font-size: 15px;
  color: #C4C4C4;
}
.shop-area .prouduct-view-area .tab {
  cursor: pointer;
  padding: 2px 16px;
}
.shop-area .prouduct-view-area .tab.active {
  background-color: unset;
}
.shop-area .prouduct-view-area .tab.active i::before {
  color: var(--fws-text) !important;
}

/* ===================
17. Product Details CSS
=================== */

#main_product_image_placeholder
{
    margin:20px auto 20px;
}

.product-details {
  padding: 50px 0;
}

.wishlist-btn
{
    margin-right:2em;
}
.product-status-info
{
    color:var(--fws-primary);
    font-weight:bold;
    text-align:center;
    
}

/* gallery main image large full screen */
.mfp-img { max-width: 95vw; max-height: 95vh; }
.mfp-figure { max-width: 95vw; }


/* too greedy - needs reigning in*/
#product-description {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fws-text-muted);
}

#product-description p,
#product-description span,
#product-description div:not(.rating),
#product-description li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--fws-text-muted) !important;
}

#product-description p {
  margin-bottom: 1em;
}

a.review-count-link
{
    position:relative;
    top:-5px;
}

/* =============================================
   Product Page - Category & Brand Ribbons
   ============================================= */

.product-ribbons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.product-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius:var(--button-radius);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.product-ribbon i {
    font-size: 0.75rem;
}

/* Category ribbon - uses primary colors */
.product-ribbon-category {
    background-color: var(--fws-primary);
    color: var(--fws-primary-alt);
    border: 1px solid var(--fws-primary);
}

.product-ribbon-category:hover {
    background-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
    border-color: var(--fws-secondary);
    text-decoration: none;
}

/* Brand ribbon - uses secondary colors */
.product-ribbon-brand {
    background-color: transparent;
    color: var(--fws-secondary);
    border: 1px solid var(--fws-secondary);
}

.product-ribbon-brand:hover {
    background-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
    text-decoration: none;
}

/* =============================================
   Sold Out / Notify Button
   ============================================= */

.btn-soldout {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    cursor: pointer;
}

.btn-soldout:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
}

.btn-soldout i {
    margin-right: 0.4rem;
}

/* Animation for the bell icon on hover */
.btn-soldout:hover i {
    animation: ring 0.5s ease-in-out;
}

@keyframes ring {
    0% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
    100% { transform: rotate(0); }
}

/* =============================================
   Stock Display - Enhanced Visibility
   ============================================= */

/* Hide quantity row when out of stock via JS if needed */
[data-fws-stock-required].hidden {
    display: none;
}

/* Out of stock indicator in the stock cell */
#ui_stock_qty[data-stock="0"],
#ui_stock_qty:empty::after {
    color: #dc3545;
    font-weight: 700;
}

/* =============================================
   Responsive Adjustments for Ribbons
   ============================================= */

.product-details .container ul,
.product-details .container ol,
.product-details .container li {
  list-style: none;
}
.product-details .container a {
  text-decoration: inherit;
  transition: ease-out 200ms;
}
.product-details .container button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: ease-out 200ms;
}
.product-details .container img {
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
.product-details .container .product-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.product-details .container .product-main .product-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.product-details .container .product-main .product-content .product-media .product-image {
  display: flex;
  border: 1px solid var(--fws-border);
  margin-bottom: 15px;
}
.product-details .container .product-main .product-content .product-media .product-image img {
  cursor: pointer;
}
.product-details .container .product-main .product-content .product-media .product-image img.active {
  display: block;
  margin-bottom: 20px;
}
.product-details .container .product-main .product-content .product-media .product-thumb 
{
    display: flex;          /* or keep whatever you already have */
    flex-wrap: wrap;        /* <-- allow multiple rows */
    gap: 8px;               /* space between thumbs (or use margin) */
    justify-content: center;
    margin-top: 10px;
}
.product-details .container .product-main .product-content .product-media .product-thumb .thumb-item {
  flex: 0 0 100px;         /* fixed width – tweak 72px as you like */
  max-width: 100px;  
  border: 1px solid var(--fws-border);
}
.product-details .container .product-main .product-content .product-media .product-thumb .thumb-item:not(:last-child) {
  margin-right: 20px;
}
.product-details .container .product-main .product-content .product-media .product-thumb .thumb-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;      /* optional: keeps them uniform if ratios vary */
  cursor: pointer;
}
.product-details .container .product-information h4 {
  font-size: 20px;
  font-weight: 700;

  margin-bottom: 20px;
}
.product-details .container .product-information h5 {
  font-size: 20px;
  font-weight: 700;

  margin-top: 22px;
}
.product-details .container .product-information .rating i {
  margin-right: 0 !important;
}
.product-details .container .product-information .rating i::before {
  color: var(--fws-primary);
}
.product-details .container .product-information .psku {
  border: 1px solid var(--fws-border);
  padding: 2px 10px;
  color: var(--fws-secondary-alt);
  background-color:var(--fws-secondary);
  display:inline-block;
}
/* --- User-generated description containment ---
   Product descriptions come from shopkeeper rich-text editors.
   Reset inherited Bootstrap styles, constrain layout-breaking HTML,
   and apply readable typography matching #fws_content quality.       */

.product-details .description,
.product-details .description * {
  all: revert !important;
  box-sizing: border-box !important;
}

.product-details .description {
  font-family: var(--fws-font-family, system-ui, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--fws-text-muted) !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  /* Prevent user content from breaking page layout */
  overflow: hidden !important;
  max-width: 100% !important;
}

.product-details .description h1,
.product-details .description h2,
.product-details .description h3,
.product-details .description h4,
.product-details .description h5,
.product-details .description h6 {
  font-weight: 600 !important;
  color: var(--fws-text) !important;
  margin: 1em 0 0.5em !important;
  line-height: 1.3 !important;
}

.product-details .description h1 { font-size: 28px !important; }
.product-details .description h2 { font-size: 22px !important; }
.product-details .description h3 { font-size: 18px !important; }

.product-details .description p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--fws-text-muted) !important;
  margin: 0 0 1.25em !important;
}

.product-details .description ul,
.product-details .description ol {
  margin: 0.75em 0 1.25em 1.5em !important;
  padding: 0 !important;
}

.product-details .description ul { list-style: disc !important; }
.product-details .description ol { list-style: decimal !important; }
.product-details .description li { margin-bottom: 0.3em !important; }

.product-details .description a {
  color: var(--fws-primary-alt) !important;
  text-decoration: underline !important;
}

.product-details .description img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.product-details .description table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1em 0 !important;
}

.product-details .description th,
.product-details .description td {
  padding: 0.5em !important;
  border: 1px solid var(--fws-border) !important;
  text-align: left !important;
}

.product-details .description blockquote {
  margin: 1em 0 !important;
  padding-left: 1em !important;
  border-left: 4px solid var(--fws-border) !important;
  color: var(--fws-text-muted) !important;
}

.product-details .description pre,
.product-details .description code {
  font-family: Consolas, monospace !important;
  background: var(--fws-surface-alt) !important;
  padding: 0.25em 0.5em !important;
  border-radius: var(--button-radius) !important;
}

/* Strip dangerous user-injected positioning and overflow */
.product-details .description * {
  position: static !important;
  float: none !important;
  z-index: auto !important;
  max-width: 100% !important;
}

/* Allow relative positioning only for specific safe elements */
.product-details .description table,
.product-details .description img {
  position: relative !important;
}
.product-details .container .product-information h6 {
  font-size: 20px;
  font-weight: 600;

  color: var(--fws-primary);
}
.product-details .container .product-information h6 span {
  font-size: 30px;
  font-weight: 700;
}
.product-details .container .product-information h4 {
  margin-top: 0;
  font-size: 25px;
  font-weight: 600;

  margin-bottom: 15px;
}
i.flaticon-musical-sign-of-two-dots:before
{
    color:var(--fws-secondary);
}
a.qty-count, a.form-btn
{
  background: var(--fws-primary);
  color:var(--fws-primary-alt);
  text-align:center !important;
  line-height:2em !important;
  cursor:pointer;
  min-width:35px;
}
a.qty-count:hover, a.form-btn:hover
{
    background: var(--fws-secondary) !important;
    color:var(--fws-secondary-alt) !important;
}
.product-size-option
{
    width:100%;
}

.product-details .container .product-information .share-option {
  margin-top: 2em;
  margin-bottom:2em;
  display: flex;
}
.product-details .container .product-information .share-option p {
  font-size: 15px;
  font-weight: 500;

  color: var(--fws-text);
  margin-top: 8px;
}
.product-details .container .product-information .share-option span {
  font-size: 15px;
  font-weight: 500;

  color: var(--fws-text);
  margin: 9px 10px 0px;
}
.social-widget li {
  display: inline-block;
  margin: 0 10px;
}
.social-widget li svg
{
    height:32px;
    width:32px;
    margin:5px 0;
    color:var(--fws-secondary);
}

.product-details .container .product-information .alignment-area {
  margin-bottom: 25px;
}
.product-details .container .product-information .alignment-area #customers {
  border-collapse: collapse;
  width: 100%;
}
.product-details .container .product-information .alignment-area #customers .color-info .product-color-area .product-color-option {
  float: left;
  margin-right: 10px;
}
.product-details .container .product-information .alignment-area #customers .color-info .product-color-area .product-color-option label {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.product-details .container .product-information .alignment-area #customers .color-info .product-color-area .product-color-option input {
  position: absolute;
  left: -999px;
}
.product-details .container .product-information .alignment-area #customers .color-info .product-color-area .product-color-option i {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-style: normal;
  border-radius: 0;
  font-size: 14px;
  text-transform: uppercase;
  border: 1px solid var(--fws-border);
}
.product-details .container .product-information .alignment-area #customers .color-info .product-color-area .product-color-option input:checked + i {
  border-color:var(--fws-primary-alt);
}
.product-details .container .product-information .alignment-area #customers .size-info .product-size-area .product-size-option {
  float: left;
  margin-right: 22px;
}
.product-details .container .product-information .alignment-area #customers .size-info .product-size-area .product-size-option label {
  display: block;
  width: 35px;
  height: 30px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.product-details .container .product-information .alignment-area #customers .size-info .product-size-area .product-size-option input {
  position: absolute;
  left: -999px;
}
.product-details .container .product-information .alignment-area #customers .size-info .product-size-area .product-size-option i {
  position: absolute;
  left: 0;
  top: 0;
  width: 35px;
  height: 30px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-style: normal;
  border-radius: 0;
  font-size: 14px;
  text-transform: uppercase;
  border: 1px solid var(--fws-border);
}
.product-details .container .product-information .alignment-area #customers .size-info .product-size-area .product-size-option input:checked + i {
  border-color: var(--fws-primary-alt);
}
.product-details .container .product-information .alignment-area #customers .info-title {
  font-size: 17px;
  font-weight: 500;

  padding-left: 0;
  padding-right: 0;
}
.product-details .container .product-information .alignment-area #customers .sub-title {
  font-size: 16px;

}
.product-details .container .product-information .alignment-area #customers .dots i::before {
  font-size: 10px;
  color: var(--fws-primary);
}
.product-details .container .product-information .alignment-area #customers .product-quantity .quantity .qty-input {
  display: flex;
}
.product-details .container .product-information .alignment-area #customers .product-quantity .quantity .qty-input a.qty-count {
  /*background: none;*/
  border: 1px solid var(--fws-border);
  color: var(--fws-text-muted);

  width: 30px;
}
.product-details .container .product-information .alignment-area #customers .product-quantity .quantity .qty-input .product-qty {
  /*background: none;*/
  border: 1px solid var(--fws-border);
  text-align: center;
  outline: none;
  background: var(--fws-primary);
  color: var(--fws-primary-alt); 
  width: 50px;
  height: 35px;
}
.product-details .container .product-information .alignment-area #customers td, .product-details .container .product-information .alignment-area #customers th {
  padding: 8px;
}
input.product-qty
{
    background:none !important;
}

/* Hide number input spinners (Chrome, Safari, Edge, Opera) */

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Optional: keep consistent height & alignment */
input[type="number"].form-control {
  appearance: textfield;
}

/*number to look more like a “label” and less like a form field:*/
input[type="number"].form-control {
  text-align: center;
  font-weight: 600;
}

.rating .rating_0 {
    display:none;
}
.clear_bs_styles h3
{
    margin-bottom:2em;
}


.reviews-area{
    margin-top:2em;
}

#reviews_none_h4
{
    margin-bottom:2em;
}

.product-details .reviews-area .write_review_link  {
    
    border: 0;
    background: var(--fws-secondary);
    color: var(--fws-secondary-alt);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding: 15px 32px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    outline: none;
    box-shadow: none !important;
    border-radius: var(--button-radius);
    transition: 0.3s;
    text-transform: uppercase;
}
.product-details .reviews-area .write_review_link:hover{
    background: var(--fws-primary);
    color:var(--fws-secondary);
}

 
  /* New Bulk Rules CSS */
  
#bulk-buying-widget {
    /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;*/
    line-height: 1.6;
    margin: 1em;
}

#bulk-buying-widget * {
    box-sizing: border-box;
}

#bulk-buying-widget .bbw-title {
    color: var(--fws-text);
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 600;
}

#bulk-buying-widget .bbw-subtitle {
    color: var(--fws-text-muted);
    margin-bottom: 25px;
    font-size: 14px;
}

#bulk-buying-widget .bulk-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 2px solid var(--fws-border);
    border-radius:var(--button-radius);
    margin-bottom: 12px;
    transition: all 0.2s;
    background: var(--fws-surface-alt);
}

#bulk-buying-widget .bulk-option:hover {
    border-color: var(--fws-secondary);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

#bulk-buying-widget .bbw-option-info {
    flex: 1;
    min-width: 0;
}

#bulk-buying-widget .bbw-option-name {
    font-weight: 600;
    color: var(--fws-text);
    font-size: 16px;
    text-transform: capitalize;
}

#bulk-buying-widget .bbw-option-quantity {
    color: var(--fws-text-muted);
    font-size: 13px;
}

#bulk-buying-widget .bbw-price-section {
    text-align: right;
    min-width: 120px;
}

#bulk-buying-widget .bbw-price {
    font-size: 20px;
    font-weight: 700;
    color: #2e7d32;
}

#bulk-buying-widget .bbw-price-label {
    font-size: 12px;
    color: var(--fws-text-muted);
}

#bulk-buying-widget .bbw-savings {
    font-size: 12px;
    color: #f44336;
    font-weight: 600;
    margin-top: 2px;
}

#bulk-buying-widget .bbw-quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fws-surface);
    border: 1px solid var(--fws-border);
    border-radius: var(--button-radius);
    padding: 4px;
}

#bulk-buying-widget .bbw-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--fws-surface-alt);
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--fws-text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}

#bulk-buying-widget .bbw-qty-btn:hover {
    background:var(--fws-secondary);
    color: white;
}

#bulk-buying-widget .bbw-qty-btn:active {
    transform: scale(0.95);
}

#bulk-buying-widget .bbw-qty-input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--fws-text);
    margin-bottom: 0px;
}

#bulk-buying-widget .bbw-add-btn {
    padding: 10px 24px;
    background: var(--fws-primary);
    color: var(--fws-primary-alt);    
    border: none;
    border-radius:var(--button-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    white-space: nowrap;
    margin-bottom: 0px;
}

#bulk-buying-widget .bbw-add-btn:hover {
    background: var(--fws-secondary);
    color: var(--fws-secondary-alt);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

#bulk-buying-widget .bbw-add-btn:active {
    transform: translateY(0);
}

#bulk-buying-widget .bulk-option.bbw-best-value {
    position: relative;
}

#bulk-buying-widget .bulk-option.bbw-best-value::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--fws-secondary);
    color: var(--fws-secondary-alt);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius:var(--button-radius);
    letter-spacing: 0.5px;
}

/* Hide browser default number input spinner buttons */
#bulk-buying-widget .bbw-qty-input::-webkit-outer-spin-button, #bulk-buying-widget .bbw-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#bulk-buying-widget .bbw-qty-input[type=number] {
    -moz-appearance: textfield;
}

  
  /* start of product details PayPal Buy Now Buttons */
  
                            #fws_paypal_button_container_milan{
                                display: flex;
                                justify-content: center;
                                width: 100%;
                            }
                            
                         
                        
                            #fws_paypal_button_container {
                                width: 100%;
                                margin-top: 20px;
                            }
                            
                            #paypal-error-message-container {
                                background-color: #EA1636;
                                color: #EEE;
                                width: 100%;  
                                display: none;
                                border-radius:var(--button-radius);
                                padding: 10px;
                                text-align: left;
                                margin-bottom: 10px;
                            }
                            
                            #paypal-error-message-container.visible {
                                display: block;
                            }
                            
                            #paypal-error-message {
                                font-size: 14px;
                            }
                            
                            #paypal-button-container.paypal-button-container-notchecked{
                                pointer-events: none !important;
                            }

/* end of paypal product details */


/* Reset ALL Bootstrap influence */
.clear_bs_styles, 
.clear_bs_styles * {
    all: revert !important;
    box-sizing: border-box;
}

/* Typography */
.clear_bs_styles {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: var(--fws-text);
    font-size: 1rem;
}

/* Headings */
.clear_bs_styles h1,
.clear_bs_styles h2,
.clear_bs_styles h3,
.clear_bs_styles h4,
.clear_bs_styles h5,
.clear_bs_styles h6 {
    font-weight: revert;
    margin: 1em 0 0.5em;
}

/* Paragraphs */
.clear_bs_styles p {
    margin: 0 0 1em;
}

/* Lists */
.clear_bs_styles ul,
.clear_bs_styles ol {
    margin: 1em 0 1em 1.5em;
    padding: 0;
}

.clear_bs_styles li {
    margin-bottom: 0.3em;
}

/* Links */
.clear_bs_styles a {
    color: #0a58ca;
    text-decoration: underline;
}

/* Images */
.clear_bs_styles img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tables */
.clear_bs_styles table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.clear_bs_styles th,
.clear_bs_styles td {
    padding: 0.5em;
    border: 1px solid var(--fws-border);
    text-align: left;
}

/* Blockquotes */
.clear_bs_styles blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 4px solid var(--fws-border);
    color: var(--fws-text-muted);
}

/* Code blocks */
.clear_bs_styles pre,
.clear_bs_styles code {
    font-family: Consolas, monospace;
    background: var(--fws-surface-alt);
    padding: 0.25em 0.5em;
    border-radius: var(--button-radius);
}

/* Horizontal rules */
.clear_bs_styles hr {
    border: 0;
    border-top: 1px solid var(--fws-border);
    margin: 2em 0;
}

/* Migrated legacy page content (Phase 3 / legacy_page_content schema).
   The wrapper sits inside .clear_bs_styles which applies `all: revert !important`
   to descendants - that wipes the .clear_bs_styles table/th/td rules above
   because the revert is !important and those rules are not. Mirror the
   intended typography here with !important so it actually lands. */
.fws-html-block table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 1em 0 !important;
}

.fws-html-block th,
.fws-html-block td {
    padding: 0.5em !important;
    border: 1px solid var(--fws-border) !important;
    text-align: left !important;
    vertical-align: top !important;
}

.fws-html-block th {
    background: var(--fws-surface-alt, #f5f5f5) !important;
    font-weight: 600 !important;
}

.fws-html-block ul,
.fws-html-block ol {
    margin: 1em 0 1em 1.5em !important;
    padding: 0 !important;
}

.fws-html-block li { margin-bottom: 0.3em !important; }

.fws-html-block blockquote {
    margin: 1em 0 !important;
    padding-left: 1em !important;
    border-left: 4px solid var(--fws-border) !important;
    color: var(--fws-text-muted) !important;
}

.fws-html-block hr {
    border: 0 !important;
    border-top: 1px solid var(--fws-border) !important;
    margin: 2em 0 !important;
}

    /* Variant Buttons Styling */
.variant-buttons-container {
    margin: 20px 0;
}

.variant-dimension {
    margin-bottom: 20px;
}

.variant-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--fws-text);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Size buttons - slightly different styling */
.variant-dimension[data-dimension="Size"] .variant-btn {
    min-width: 50px;
    padding: 10px 16px;
    font-weight: 600;
}
/* Variant buttons within table */
.variant-buttons-cell {
    padding: 8px 0;
}

/* Ensure horizontal flow for variant buttons */
.variant-button-group {
    display: flex;
    flex-direction: row;  /* Explicit horizontal */
    flex-wrap: wrap;      /* Wrap to next line when needed */
    gap: 8px;
    align-items: center;
}

.variant-btn {
    display: inline-flex;  /* Not block */
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 8px 16px;
    border: 2px solid var(--fws-border);
    
    background: var(--fws-surface);
    color: var(--fws-text);
    
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--button-radius);
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;  /* Prevent text wrapping inside button */
}

.variant-btn:hover:not(.disabled) {

    border-color: var(--fws-primary);
    background: var(--fws-primary);
    color: var(--fws-primary-alt);
}

.variant-btn.active {
    border-color: var(--fws-secondary);
    background: var(--fws-secondary);
    color: var(--fws-secondary-alt);
}

.variant-btn.disabled {
    /*opacity: 0.4;*/
    cursor: not-allowed;
    text-decoration: line-through;
    background: gray !important;
    color: var(--fws-text) !important;
    border-color:darkgray !important;
}
.variant-button-group {
    display: flex !important;
    flex-direction: row !important;
}


/* add to cart / add to wishlist button row */
.product-action-buttons {
  display: flex;
  flex-direction: column;     /* stacked by default (mobile) */
  gap: 12px;
}


/* ===================
18. Faqs Area CSS
=================== */
.faqs-area .nav-tabs .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px !important;

}

.faqs-area .tab-content .accordion-item a i::before {
  font-size: 14px !important;
  position: relative;
  top: 0px !important;
}

.faqs-area .nav-tabs {
  justify-content: center;
  border: 0;
}
.faqs-area .nav-tabs .nav-item .nav-link {
  font-size: 25px;
  font-weight: 600;

  border-radius: 0;
}
.faqs-area .nav-tabs .nav-item .nav-link.active.show {
  color: var(--fws-primary);
}
.faqs-area .tab-content {
  border: 1px solid var(--fws-border);
  padding: 40px;
}
.faqs-area .tab-content .clear_bs_styles p {
  font-size: 16px;
  margin-bottom: 1.25em;
}
.faqs-area .tab-content .clear_bs_styles .common-quote {
  margin-bottom: 15px;
}
.faqs-area .tab-content .clear_bs_styles .common-quote i::before {
  color: var(--fws-primary);
  font-size: 20px;
  vertical-align: middle;
  font-weight: 600;
  margin-right: 15px;
}
.faqs-area .tab-content .clear_bs_styles .common-quote span {
  font-size: 14px;
  font-weight: 700;

}
.faqs-area .tab-content #specification #specification-info {

  border-collapse: collapse;
  width: 100%;
}
.faqs-area .tab-content #specification #specification-info td, .faqs-area .tab-content #specification #customers th {
  border: 1px solid var(--fws-border);
  padding: 8px;
}
.faqs-area .tab-content #specification #specification-info .table-heading {
  padding: 10px 30px;
  font-size: 18px;
  font-weight: 600;
  color: var(--fws-text);
}
.faqs-area .tab-content #specification #specification-info .table-data {
  padding: 10px 30px;
  font-size: 18px;
}
.reviews-area .tab-content #reviews h3, 
.faqs-area .tab-content #reviews h3, 
.faqs-area .tab-content .clear_bs_styles h3 {
  font-size: 20px;
  font-weight: 700;

  position: relative;
}
.reviews-area .tab-content #reviews h3::before, 
.faqs-area .tab-content #reviews h3::before, 
.faqs-area .tab-content .clear_bs_styles h3:before 
{
  position: absolute;
  content: "";
  height: 2px;
  width: 200px;
  background: var(--fws-text);
  left: 0;
  right: 0;
  top: 30px;
}
.faqs-area .tab-content #reviews .review,
.reviews-area .tab-content #reviews .review
{
  display: flex;
}

.review.reviewreply
{
    padding-left:65px;
}

.faqs-area .tab-content #reviews .review + .reviewreply i
{
    margin-top:35px;
}

.faqs-area .tab-content #reviews .review i,
.reviews-area .tab-content #reviews .review i
{
  margin-top: 80px;
}

.faqs-area .tab-content #reviews .review i::before,
.reviews-area .tab-content #reviews .review i::before 
{
  font-size: 40px;
  vertical-align: middle;
  margin-right: 14px;
  color: var(--fws-text);
  font-weight: 600;
}

.reviews-area .tab-content #reviews .review .review-information,
.faqs-area .tab-content #reviews .review .review-information {
  margin-top: 30px;
}
.reviews-area .tab-content #reviews .review .review-information h5,
.faqs-area .tab-content #reviews .review .review-information h5 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fws-text);

}
.reviews-area .tab-content #reviews .review .review-information .rating,
.faqs-area .tab-content #reviews .review .review-information .rating {
  display: inline-block;
}
.reviews-area .tab-content #reviews .review .review-information .rating i ,
.faqs-area .tab-content #reviews .review .review-information .rating i 
{
  margin-right: 0 !important;
}

.reviews-area .tab-content #reviews .review .review-information .rating i::before,
.faqs-area .tab-content #reviews .review .review-information .rating i::before {
  font-size: 18px;
  color: var(--fws-primary);
}

.reviews-area .tab-content #reviews .review .review-information span,
.faqs-area .tab-content #reviews .review .review-information span {
  font-size: 14px;
  font-weight: 600;

}
.reviews-area .tab-content #reviews .review .review-information p,
.faqs-area .tab-content #reviews .review .review-information p {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-right: 35px;
}
.reviews-area .tab-content #reviews .review .review-information a,
.faqs-area .tab-content #reviews .review .review-information a {
  font-size: 16px;
  font-weight: 700;
  color: var(--fws-primary);
  text-decoration: underline;
}
.reviews-area .tab-content #reviews h4,
.faqs-area .tab-content #reviews h4 {
  font-size: 20px;
  font-weight: 700;  

  margin-top:1em;
}
.reviews-area .tab-content #reviews span,
.faqs-area .tab-content #reviews span {
  font-size: 18px;

  color: var(--fws-text-muted);
}
.faqs-area .tab-content #reviews .was_a_form {
  margin-top: 30px;
  padding-right: 0px;
}
.faqs-area .tab-content #reviews  .was_a_form .form-group {
  margin-bottom: 30px;
}
.faqs-area .tab-content #reviews  .was_a_form .form-group label {
  font-size: 20px;

  color:var(--fws-primary-alt);
  margin-bottom: 15px;
}
.faqs-area .tab-content #reviews  .was_a_form .form-group input {
  padding: 20px 20px;
  border: 1px solid var(--fws-border);
  display: block;
  width: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: calc(2.7em + .75rem + 2px);
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.faqs-area .tab-content #reviews  .was_a_form .form-group textarea {
  padding: 8px 10px;
  border: 1px solid var(--fws-border);
  display: block;
  width: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.faqs-area {
  margin: 50px 0;
}

.faqs-area .faq-title {
  font-size: 30px;
  font-weight: 600;

  text-align: center;
  margin-bottom: 40px;
}

.faqs-area .nav-tabs .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fws-text-muted);
}
.faqs-area .nav-tabs .nav-link:hover {
  border-color: var(--fws-border);
}

.faqs-area .nav-tabs .nav-link.active {
  color: var(--fws-secondary);
  background-color: var(--fws-surface);
  border-color: var(--fws-border);
  border-bottom-color: var(--fws-surface);
}

.faqs-area .nav-tabs .nav-link.active.show {
  color:var(--fws-secondary);
}

.faqs-area .tab-content {
  padding: 30px 20px;
  border: 1px solid var(--fws-border);
  margin-top: -1px;
}

.faqs-area .tab-content .accordion-item {
  margin-bottom: 20px;
}

.faqs-area .tab-content .accordion-item a.collapsed {
  font-size: 15px;
  text-transform: uppercase;
  margin: 6px 0;
  display: block;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: var(--fws-secondary);
}

.faqs-area .tab-content .accordion-item a {
  color: var(--fws-secondary);
  font-size: 15px;
  text-transform: uppercase;
  margin: 6px 0;
  display: block;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.faqs-area .tab-content .accordion-item a:hover {
  color: var(--fws-secondary);
}

.faqs-area .tab-content .accordion-item a i {
  transform: rotate(180deg);
}
.faqs-area .tab-content .accordion-item a i::before {
  font-size: 20px;
  position: relative;
  top: 3px;
}

.faqs-area .tab-content .accordion-item a.collapsed i {
  transform: rotate(0deg);
}

.faqs-area .tab-content .accordion-item p {
  padding: 0px 28px;
}

/* ===================
19. Cart Product Area CSS
=================== */
.cart-product-area #customers {
  border-collapse: collapse;
  width: 100%;

}
.cart-product-area p.cart-btn, .cart-product-area p.cart-stock {
  text-align: center;
  margin: 0;
}
.cart-product-area #customers td, .cart-product-area #customers th {
  border: 1px solid var(--fws-border);
  text-align: center;
  padding: 5px 20px;
}
.cart-product-area #customers th {
  padding-top: 14px;
  padding-bottom: 14px;
  text-align: center;
}
.cart-product-area #customers th span {
  float: left;
}
.cart-product-area img {
  width: 100px;
  margin: 0px auto;
  display: block;
}
.cart-product-area .cart-product {
  display: flex;
  align-items: center;
}
.cart-product-area .cart-product i {
  margin-right: 34px;
}
.cart-product-area .cart-product i::before {
  font-size: 25px;
  color: var(--fws-primary);
  cursor: pointer;
}
.cart-product-area .cart-product p a {
  font-size: 14px;
  font-weight: 600;
  color: var(--fws-secondary);

  margin-top: 15px;
}
.cart-product-area .price {
  font-size: 16px;
  font-weight: 600;

  color: var(--fws-text);
}
.cart-product-area .quantity .qty-input {
  display: flex;
  justify-content: center;
}
.cart-product-area .quantity .qty-input a.qty-count {
  background: none;
  border: 1px solid var(--fws-border);
  color: var(--fws-text-muted);
  font-size: 30px;
  padding: 0 20px;
  /*font-weight: 500;*/

  cursor: pointer;
}
.cart-product-area .quantity .qty-input .product-qty {
  background: none;
  border: 1px solid var(--fws-border);
  text-align: center;
  outline: none;
  color: var(--fws-text);
  font-weight: 600;
  border-left: 0;
  border-right: 0;
  width: 80px;
}
.cart-product-area .coupon-all .coupon label {
  font-size: 14px;
  font-weight: 700;

  color:var(--fws-primary-alt);
  margin-bottom: 10px;
}
.cart-product-area .coupon-all .coupon .coupon-input-area {
  display: flex;
}
.cart-product-area .coupon-all .coupon input {
  padding: 12px 10px;
  color: #ABABAB;
  border-radius: 0;
  border: 1px solid var(--fws-border);
}
.cart-product-area .coupon-all .coupon input:focus {
  outline: none !important;
}
.cart-product-area .coupon-all .coupon .cupon-btn {
  margin-left: 30px;
  font-size: 14px;
}
.cart-product-area .coupon-all .coupon .cupon-btn:hover {
  background: var(--fws-primary);
}
.cart-product-area .cart-page-total table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--fws-border);
  overflow-x: auto;
}
.cart-product-area .cart-page-total table .table-heading {
  border: 1px solid var(--fws-border);
}
.cart-product-area .cart-page-total table .table-heading th {
  font-size: 16px;
  font-weight: 600;

}
.cart-product-area .cart-page-total table th, .cart-product-area .cart-page-total table td {
  padding: 20px 40px;
}
.cart-product-area .cart-page-total table td p {
  font-size: 14px;
  font-weight: 600;
  color: var(--fws-text);

}
.cart-product-area .cart-page-total table .table-sub-heading {
  font-size: 16px;
  font-weight: 600;

  padding: 14px 40px;
}
.cart-product-area .cart-page-total table span {
  float: right;
}
.cart-product-area .cart-page-total .proceed-btn {
  margin-top: 20px;
  float: right;
}
.cart-product-area .cart-page-total .proceed-btn:hover {
  background: var(--fws-primary);
}
.cart-product-area .cart-page-total .proceed-btn a {
  color: #fff;
}

/* ===================
20. Related Product CSS
=================== */
.related-product h2 {
  margin-bottom: 45px;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 600;

}

/* ===================
21. Checkout Page CSS
=================== */
.checkout-area p {

  font-size: 16px;
}
.checkout-area p span {
  color: var(--fws-primary-alt);
}
.checkout-area p a {
  color: var(--fws-primary);
}
.checkout-area .billing-details h4 {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 45px;
  margin-top: 35px;
}
.checkout-area .billing-details select, .checkout-area .billing-details input {
  width: 100%;
  padding: 15px 30px;
  margin-bottom: 35px;
  color: #B8B8B8;
  font-size: 16px;
  font-weight: 600;

  border: 1px solid #E5E5E5;
}
.checkout-area .billing-details label {
  font-size: 16px;
  font-weight: 600;

  color: var(--fws-primary-alt);
  margin-bottom: 10px;
}
.checkout-area .billing-details .name-area {
  display: flex;
}
.checkout-area .shiping-details h4 {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 45px;
  margin-top: 35px;
}
.checkout-area .shiping-details h4 input {
  width: auto;
}
.checkout-area .shiping-details .ship-box-info select, .checkout-area .shiping-details .ship-box-info input {
  width: 100%;
  padding: 15px 30px;
  margin-bottom: 35px;
  color: #B8B8B8;
  font-size: 16px;
  font-weight: 600;

  border: 1px solid var(--fws-border);
}
.checkout-area .shiping-details .ship-box-info textarea {
  width: 100%;
  color: #B8B8B8;
  font-size: 16px;
  font-weight: 600;

  border: 1px solid var(--fws-border);
  padding: 15px 30px;
}
.checkout-area .shiping-details .ship-box-info label {
  font-size: 16px;
  font-weight: 600;

  color: var(--fws-primary-alt);
  margin-bottom: 10px;
}
.checkout-area .shiping-details .ship-box-info .name-area {
  display: flex;
}
.checkout-area .shiping-details .checkbox label {
  display: flex;
  align-items: center;
}
.checkout-area .shiping-details .checkbox label .checkme {
  margin-right: 10px;
}
.checkout-area .order-area h4 {
  font-size: 20px;
  font-weight: 700;

  margin-bottom: 45px;
}
.checkout-area .order-area .order-details {
  border-bottom: 1px solid #CCCCCC;
}
.checkout-area .order-area .order-details .sub-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CCCCCC;
  margin-bottom: 25px;
}
.checkout-area .order-area .order-details .sub-title h5 {
  font-size: 16px;
  font-weight: 600;

}
.checkout-area .order-area .order-details .order-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.checkout-area .order-area .order-details .order-info .product-name {
  display: flex;
}
.checkout-area .order-area .order-details .order-info .product-name p {
  font-size: 14px;
  font-weight: 600;

  color: var(--fws-text);
  margin-bottom: 0;
}
.checkout-area .order-area .order-details .order-info .product-name span {
  font-size: 14px;
  font-weight: 600;

  color: var(--fws-text);
}
.checkout-area .order-area .order-details .order-info .product-name span i {
  color: var(--fws-primary);
  margin: 10px;
}
.checkout-area .order-area .order-details .order-info span {
  font-size: 14px;
  font-weight: 600;

  color: var(--fws-text);
}
.checkout-area .order-area .order-details .middle-title {
  border-top: 1px solid #CCCCCC;
}
.checkout-area .order-area .order-details .middle-title h5 {
  margin-top: 10px;
}
.checkout-area .order-area .total-price {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}
.checkout-area .order-area .total-price h5 {
  font-size: 16px;

  font-weight: 600;
  color: var(--fws-text);
}
.checkout-area .order-area .total-price h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--fws-text);

}
.checkout-area .payment-system .pay-method {
  display: flex;
  margin-bottom: 20px;
}
.checkout-area .payment-system .pay-method input {
  margin-right: 10px;
  margin-top: 3px;
}
.checkout-area .payment-system .pay-method .pay-info h5 {
  font-size: 16px;
  font-weight: 600;

  color:var(--fws-primary-alt);
}
.checkout-area .payment-system .pay-method .pay-info p {
  font-size: 14px;

  color: #A7A7A7;
}
.checkout-area .pay-btn {
  width: 100%;
}

.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content h5 {
  font-size: 16px;
  font-weight: 600;

  margin-bottom: 20px;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content h5 a {
  color: var(--fws-primary);
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content h4.title-2 {
  margin-bottom: 2rem;
  font-weight: 600;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info {
  margin-bottom: 30px;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item input[type=text], .mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item input[type=password], .mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item input[type=email] {
  background: var(--fws-surface-alt);
  height: 50px;
  font-size: 14px;
  padding-left: 1rem;
  border: 1px solid var(--fws-border) !important;
  width: 100%;
  margin-bottom: 1rem;
  padding-right: 1rem;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item input[type=text]:focus, .mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item input[type=password]:focus, .mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item input[type=email]:focus {
  border: 1px solid rgba(242, 152, 74, 0.5) !important;
  outline: none !important;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item textarea {
  background: var(--fws-surface-alt);
  font-size: 14px;
  padding-left: 1rem;
  border: 1px solid var(--fws-border) !important;
  width: 100%;
  margin-bottom: 1rem;
  padding-right: 1rem;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item textarea:focus {
  border: 1px solid rgba(242, 152, 74, 0.5) !important;
  outline: none !important;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item i.bxs-user {
  position: absolute;
  top: 10%;
  right: 0;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .input-item i.bxs-lock {
  position: absolute;
  top: 10%;
  right: 0;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info  .was_a_form .nice_selection {
  max-width: 100%;
  border: 1px solid var(--fws-border);
  min-width: 100%;
  padding: 10px 10px;
  margin-bottom: 30px;
  background: var(--fws-surface-alt);
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info p {
  font-size: 14px;
  font-weight: 500;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info p a {
  color: var(--fws-primary-alt);
  transition: all ease-in-out 0.5s;
}
.mk_checkout-area .mk_checkout-inner .mk_checkout-single-content .mk_checkout-single-content-info p a:hover {
  color: var(--fws-secondary);
  transition: all ease-in-out 0.5s;
}
.mk_checkout-area .shoping-cart-total {
  margin-top: 1rem;
}
.mk_checkout-area .shoping-cart-total h4.title-2 {
  padding-bottom: 12px;
  font-weight: 600;
  margin-bottom: 1rem;
}
.mk_checkout-area .shoping-cart-total .shoping-cart-table {
  width: 100%;
}
.mk_checkout-area .shoping-cart-total .shoping-cart-table tbody tr td {
  padding: 1rem 0;
  vertical-align: top;
  border-top: 1px solid var(--fws-border);
}

.mk_checkout-payment-method {
  margin-top: 1rem;
}
.mk_checkout-payment-method h4.title-2 {
  padding-bottom: 12px;
  font-weight: 600;
  margin-bottom: 0rem;
  margin-top: 20px;
}
.mk_checkout-payment-method .mk-btn.btn:hover {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
}
.mk_checkout-payment-method .card {
  padding: 1rem 0;
  border-radius: 0;
  border: none;
}
.mk_checkout-payment-method .card h5.mk_card-title {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 0;
  font-size: 16px;
}
.mk_checkout-payment-method .card h5.mk_card-title img {
  margin-left: 15px;
  max-width: 190px;
}
.mk_checkout-payment-method .card h5.mk_card-title::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  transform: translateY(-50%);
  border: 0.1rem solid var(--fws-border);
  border-radius: 50%;
}
.mk_checkout-payment-method .card h5.mk_card-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.32rem;
  width: 1rem;
  height: 1rem;
  transition: all 0.5s ease 0s;
  transform: translateY(-50%);
  opacity: 0;
  border-radius: 50%;
  background-color: var(--fws-primary);
}
.mk_checkout-payment-method .card h5.mk_card-title[aria-expanded=true]::after {
  opacity: 1;
}
.mk_checkout-payment-method .card .card-body {
  padding: 5px 35px;
  margin-top: 10px;
  position: relative;
}
.mk_checkout-payment-method .card .card-body::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 25px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background-color: var(--fws-surface);
}
.mk_checkout-payment-method .mk_payment-note {
  margin: 1rem 0;
}

/* ===================
22. Login and Register Page CSS
=================== */
.my-account-area {
  margin: 100px 0;
}
.my-account-area .my-account-wrapper {
  padding: 20px;
  box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.15);
}
.my-account-area .my-account-wrapper h4 {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.my-account-area .my-account-wrapper  .was_a_form input {
  border-radius: 0;
  padding: 5px 12px;
}
.my-account-area .my-account-wrapper  .was_a_form button.btn.btn-primary {
  display: block;
  width: 100%;
  font-size: 20px;
  text-transform: uppercase;
  padding: 10px;
  letter-spacing: 1px;
  font-weight: normal;
  margin-top: 20px;
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt);
  border: none;
}
.my-account-area .my-account-wrapper  .was_a_form button.btn.btn-primary:hover {
  background: var(--fws-primary);
}
.my-account-area .my-account-wrapper .login-or-with {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fws-text);
  margin-top: 35px;
  margin-bottom: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.my-account-area .my-account-wrapper .login-or-with:after {
  content: "";
  flex: 1 0 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #E2E2E2;
  margin-right: -20px;
  margin-left: 10px;
}
.my-account-area .my-account-wrapper .login-or-with:before {
  content: "";
  flex: 1 0 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #E2E2E2;
  margin-left: -20px;
  margin-right: 10px;
}
.my-account-area .my-account-wrapper .social-button {
  margin-top: 20px;
}
.my-account-area .my-account-wrapper .social-button a {
  color: #fff;
  padding: 10px 15px;
  display: inline-block;
  border-radius: var(--button-radius);
  font-size: 16px;
  margin: 10px;
  text-transform: uppercase;
  text-decoration: none;
}
.my-account-area .my-account-wrapper .social-button a.facebook-btn {
  background: #4267B2;
}
.my-account-area .my-account-wrapper .social-button a.facebook-btn:hover {
  background: #4267b2eb;
}
.my-account-area .my-account-wrapper .social-button a.google-btn {
  background: #D44730;
}
.my-account-area .my-account-wrapper .social-button a.google-btn:hover {
  background: #d44730e6;
  transition: all 0.4s ease;
}

/* ===================
23. About Page CSS
=================== */
.why-shopping-us .why-shopping-us-item {
  text-align: center;
  border: 1px solid var(--fws-border);
  padding: 10px 15px;
}
.why-shopping-us .why-shopping-us-item i:before {
  font-size: 70px;
  color: var(--fws-primary);
}
.why-shopping-us .why-shopping-us-item h4 {
  font-weight: 600;
  min-height: 54px;
  margin-top: 5px;
  font-size: 24px;
}
.why-shopping-us .why-shopping-us-item p {
  margin-bottom: 5px;
}

.about-us h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
.about-us h5 {
  font-weight: 600;
  line-height: 30px;
}
.about-us img {
  margin-bottom: 20px;
}
.about-us ul {
  margin-bottom: 20px;
}
.about-us ul li {
  position: relative;
  padding-left: 24px;
  margin: 10px 0px;
  color: var(--fws-text-muted);
}
.about-us ul li:before {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  top: 4px;
  background: var(--fws-primary);
  border-radius: 90%;
}

/* ===================
24. Contact Page CSS
=================== */
.contact-area {
  margin: 100px 0;
}

.contact-area .contact_notify h3, .contact-area .contact_notify header {
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
}

.contact-area .contact_notify img.contact-right-image {
  position: absolute;
  bottom: 60px;
  max-width: 95%;
}

.contact-area .contact-address {
  margin: 0px 0 80px 0;
}

.contact-area .contact-address .contact-address-item {
  text-align: center;
  box-shadow: none;
  padding: 40px 20px 20px;
  transition: all 0.4s ease;
  border: none;
  margin-bottom: 25px;
}

.contact-area .contact-address .contact-address-item:hover {
  box-shadow: none;
  border: none;
}

.contact-area .contact-address .contact-address-item i::before {
  font-size: 36px;
  color: var(--fws-primary);
  padding: 16px;
  border: 1px solid;
  border-radius: 50%;
}

p.form-message.error {
  color: red;
}

p.form-message.success {
  color: green;
}

.contact-area .contact-address .contact-address-item h4 {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 600;
}

.contact-area .contact-address .contact-address-item p {
  font-size: 18px;
  color: var(--fws-text);
  margin-top: 12px;
  line-height: 30px;
}

.contact-area .contact_notify .was_a_form .form-wrap input, .contact_notify input {
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 20px;
  border: 1px solid var(--fws-border);
}
.contact-area .contact_notify  .was_a_form .form-wrap textarea, .contact_notify textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--fws-border);
  min-height:300px;
}
.contact_notify_submit
{
    background-color:var(--fws-primary);
    color:var(--fws-primary-alt);
}
.contact_notify_submit:hover
{
    background-color:var(--fws-secondary);
    color:var(--fws-secondary-alt);
}
.contact_notify_cancel { display:none;}

.contact-area .contact_notify  .was_a_form .form-button .form-btn, .contact_notify_submit {
  font-size: 20px;
  border-radius: var(--button-radius);
  margin-top: 20px;
  padding: 18px 52px;
  text-transform: capitalize;
}
.contact-area .contact_notify  .was_a_form .form-button .form-btn:hover, .contact_notify_submit:hover {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
}
.contact-area .contact_notify .contact-left-image {
  top: 60px;
  position: relative;
  /* max-width: 95%;*/
}

.contact-post-message
{
    display:none;
    text-align:center;
}
.contact-post-message h3
{
    font-size:16px;
}

/* ===================
25. 404 Page CSS
=================== */
.error-area .error-area-wrapper img {
  max-width: 600px;
}
.error-area .error-area-wrapper h3 {
  font-size: 30px;
  font-weight: 600;

  text-transform: uppercase;
  color: var(--fws-text);
  margin-top: 15px;
}
.error-area .error-area-wrapper p {
  font-size: 22px;

  text-transform: capitalize;
  margin-top: 20px;
  color: var(--fws-text);
  line-height: 35px;
}
.error-area .error-area-wrapper a.error-btn {
  margin-top: 35px;
  color: #fff;
}
.error-area .error-area-wrapper a.error-btn:hover {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
}
.error-area .error-area-wrapper a.error-btn i::before {
  font-size: 15px;
  margin-right: 8px;
}

/* ===================
26. Pagination CSS
=================== */

#pager_sort_by
{
    padding:5px;
    min-width:250px;
}
.results_pager_container
{
    width:100%;
    margin-bottom:1em;
}
.results_sortby_container
{
    width:100%;
    margin-bottom:2em;
    text-align:right !important;
}
.pagination {
  text-align: center;
  padding: 20px 0 0 0;
  justify-content: center;
  width:100%;
}
.pagination a {
  font-size: 16px;
  width: 45px;
  height: 45px;
  background-color: var(--fws-primary);
  color: var(--fws-primary-alt);
  border: 1px solid var(--fws-primary);
  display: inline-block;
  vertical-align: middle;
  line-height: 45px;
  text-decoration: none;
  border-radius: 50%;
  font-weight: 700;
  margin: 4px;
}
.pagination a:hover, .pagination a.selected, .pagination li.current a {
  color: var(--fws-secondary-alt);
  background-color: var(--fws-secondary);
  border-color: var(--fws-secondary);
}
.pagination-info
{
    width:100%;
    text-align:center;
    font-size:1.2em;
    margin-bottom:2em;
    margin-top:2em;
    color:var(--fws-primary);
    font-weight:500;
}

/* ===================
27. Blog Standard Area CSS
=================== */
.blog-standards-area {
  padding: 50px 0;
}
.blog-standards-area .blog-standards-item {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    max-width: 1200px;
    margin: 0 auto 3em;
    border-radius: 8px;
    background: var(--fws-surface);
    overflow: hidden;
  }
  .blog-standards-area .blog-standards-item .blog-information {
    padding: 25px 30px;
  }
.blog-standards-area .blog-standards-item .blog-information .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.blog-standards-area .blog-standards-item .blog-information .entry-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fws-primary-alt) !important;
  background: var(--fws-primary);
  border-radius: var(--button-radius);
  text-decoration: none;
  transition: 0.3s;
  white-space: nowrap;
}
.blog-standards-area .blog-standards-item .blog-information .entry-meta a:hover {
  background: var(--fws-secondary) !important;
  color: var(--fws-secondary-alt) !important;
}
.blog-standards-area .blog-standards-item .blog-information .entry-meta a i::before {
  font-size: 13px;
  color: inherit;
  margin-right: 0;
  vertical-align: middle;
}
.blog-standards-area .blog-standards-item .blog-information .blog-post-title h3 {
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
    transition: color 0.3s;
    font-weight: 700;
    text-transform: none;
    color: var(--fws-text);
  }
  .blog-standards-area .blog-standards-item .blog-information .blog-post-title h3:hover {
    color: var(--fws-primary);
  }
  .blog-standards-area .blog-standards-item .blog-information .blog-post-title p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--fws-text-muted);
    margin-bottom: 15px;
  }
/*
.blog-standards-area .blog-standards-item .blog-information a.category {
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: var(--fws-primary-alt);
  text-decoration:underline;
}*/
.blog-standards-area .blog-standards-item .blog-information a.read-more {
     border: 0;
      background: var(--fws-primary);
      color: var(--fws-primary-alt) !important;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      padding: 12px 28px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      outline: none;
      box-shadow: none !important;
      border-radius: var(--button-radius);
      transition: 0.3s;
      text-transform: uppercase;
      display: inline-block;
}
.blog-standards-area .blog-standards-item .blog-information a.read-more:hover {
    background: var(--fws-secondary);
    color: var(--fws-secondary-alt) !important;
}

 .blog-post-img {
      max-width: 100%;
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      position: relative;
  }
  .blog-post-img a {
      display: block;
      position: relative;
  }
  .blog-post-img img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      max-height: 450px;
      transition: transform 0.6s ease;
  }
  
  
   .blog-hero-wrapper {
      position: relative;
      overflow: hidden;
  }
  .blog-hero-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      max-height: 450px;
  }
  .blog-hero-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px 30px 25px;
      background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  }
  .blog-hero-title {
      color: #fff !important;
      font-size: 30px;
      font-weight: 700;
      line-height: 1.3;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
      text-transform: none;
      margin: 0;
  }

  
  
  
  .blog-standards-item:hover .blog-post-img img {
      transform: scale(1.05);
  }
  .blog-post-img a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
      pointer-events: none;
  }
  .blog-overlay-title {
      position: absolute;
      bottom: 18px;
      left: 25px;
      right: 25px;
      z-index: 2;
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.3;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
      text-transform: none;
  }


 .blog-tag-container {
      padding: 15px 30px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      border-top: 1px solid #f0f0f0;
  }
  .blog-tag-container a {
      margin: 0;
      padding: 5px 14px 5px 12px;
      color: var(--fws-primary-alt);
      border-radius: var(--button-radius);
      background: var(--fws-primary);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      transition: 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
  }
  .blog-tag-container a::before {
      content: "\ead8";
      font-family: uicons-regular-rounded !important;
      font-style: normal;
      font-weight: normal !important;
      font-size: 11px;
  }
  .blog-tag-container a:hover {
      background: var(--fws-secondary);
      color: var(--fws-secondary-alt) !important;
  }

 .blog-information .entry-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin: 0 0 12px;
  }
  .blog-standards-area .blog-information .entry-meta a {
      font-size: 12px;
      font-weight: 500;
      padding: 4px 10px;
  }

/* ===================
28. Blog Details CSS
=================== */
.blog-details-area .blog-details {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: var(--fws-surface);
    overflow: hidden;
}
  
.blog-details-area .blog-details .full-blog .blog-information {
    padding: 25px 30px;
  }
 .blog-details-area .blog-details .full-blog .blog-information .entry-meta {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--fws-border);
    margin-bottom: 15px;
  }
.blog-details-area .blog-details .full-blog .blog-information .entry-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fws-primary-alt) !important;
  background: var(--fws-primary);
  border-radius: var(--button-radius);
  text-decoration: none;
  transition: 0.3s;
  white-space: nowrap;
}
.blog-details-area .blog-details .full-blog .blog-information .entry-meta a:hover {
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt) !important;
}
.blog-details-area .blog-details .full-blog .blog-information .entry-meta a i::before {
  font-size: 13px;
  color: inherit;
  margin-right: 0;
  vertical-align: middle;
}
.blog-details-area .blog-details .full-blog .blog-information .blog-post-title h3 {
  font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
    text-transform: none;
    color: var(--fws-text);
}
.blog-details-area .blog-details .full-blog .blog-information .blog-catagory {
   margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.blog-details-area .blog-details .full-blog .blog-information .blog-catagory span {
  font-size: 20px;
  font-weight: 400;

  color: var(--fws-text);
}
.blog-details-area .blog-details .blog-content p {
  font-size: 14px;
  font-weight: 400;

  color: var(--fws-text-muted);
  line-height: 27px;
}
.blog-details-area .blog-details .blog-quote blockquote {
  padding-left: 30px;
}
.blog-details-area .blog-details .blog-quote blockquote p i::before {
  margin: 10px;
  color: var(--fws-primary);
}
.blog-details-area .blog-details .blog-quote blockquote p span {
  font-size: 16px;
  font-weight: 600;
  color: var(--fws-text);
}
.blog-details-area .blog-details .blog-quote p {
  font-size: 14px;
  font-weight: 400;

  color: var(--fws-text-muted);
  line-height: 27px;
}
.blog-details-area .comment-area .comment-title h3 {
  font-size: 20px;
  font-weight: 700;

  position: relative;
  color: var(--fws-primary);
}
.blog-details-area .comment-area .comment-title h3::before {
  position: absolute;
  width: 135px;
  height: 2px;
  content: "";
  background:var(--fws-primary);
  top: 30px;
}
.blog-details-area .comment-area .comment-list {
  margin-top: 35px;
  display: flex;
}
.blog-details-area .comment-area .comment-list .author-imge {
  margin-right: 15px;
}
.blog-details-area .comment-area .comment-list .author-imge img {
  border-radius: 50%;
}
.blog-details-area .comment-area .comment-list .author-comment h5 {
   font-size: 17px;
    font-weight: 700;
  color: var(--fws-primary);
}
.blog-details-area .comment-area .comment-list .author-comment span {
   font-size: 14px;
    font-weight: 500;
  color: var(--fws-text-muted);
}
.blog-details-area .comment-area .comment-list .author-comment p {
 margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
    color: var(--fws-text-muted);
    line-height: 1.75;
    margin-bottom: 10px;
}
.blog-details-area .comment-area .comment-list .author-comment a {
  font-size: 16px;
  font-weight: 700;
  color: var(--fws-primary) !important;
  text-decoration: underline;
}
.blog-details-area .comment-area .middle-comment {
  margin-left: 0;
  flex-direction: row-reverse;
  border-left: 3px solid var(--fws-primary);
  padding-left: 15px;
  background: var(--fws-surface-alt);
  border-radius: 0 8px 8px 0;
  padding: 15px 15px 15px 18px;
}
.blog-details-area .comment-area .middle-comment .author-imge {
  margin-right: 0;
  margin-left: 15px;
}
.blog-details-area .comment-area .middle-comment .author-comment {
  text-align: right;
}
.blog-details-area .comment-area .middle-comment .author-comment p {
  text-align: right;
}
.middle-comment
{
    margin-bottom:2em;
}
.blog-details-area .comment-form  .was_a_form .form-meta {
  margin-bottom: 25px;
}
.blog-details-area .comment-form  .was_a_form .form-meta h3 {
  font-size: 20px;
  font-weight: 700;

  color: var(--fws-primary-alt);
}
.blog-details-area .comment-form  .was_a_form .form-meta span {
  font-size: 18px;
  font-weight: 400;

  color: var(--fws-text-muted);
  margin-bottom: 30px;
}
.blog-details-area .comment-form  .was_a_form .form-group input {
  padding: 8px 10px;
  border: 1px solid var(--fws-border);
  display: block;
  width: 100%;
  transition: 0.4s;
  height: calc(2em + .75rem + 2px);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 20px;
}
.blog-details-area .comment-form  .was_a_form .form-group textarea {
  padding: 8px 10px;
  border: 1px solid var(--fws-border);
  display: block;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}
.blog-details-area .comment-form  .was_a_form .form-group label {
  font-size: 18px;
  font-weight: 400;

  color: var(--fws-primary-alt);
  margin-bottom: 8px;
}
.blog-details-area .comment-form  .was_a_form .comment-btn {
  padding: 10px 45px;
  font-weight: 500;

  margin-top: 15px;
}
.blog-details-area .comment-form  .was_a_form .comment-btn:hover {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
}

.blog-sidebar-widget-area {
  border: 1px solid #E5E5E5;
  padding: 20px 15px;
  margin-bottom: 40px;
}
.blog-sidebar-widget-area .widget-title {
  font-size: 22px;
  font-weight: 700;

  margin-bottom: 18px;
}
.blog-sidebar-widget-area .small-post-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.blog-sidebar-widget-area .small-post-wrapper .small-post-item-image {
  margin-right: 15px;
}
.blog-sidebar-widget-area .small-post-wrapper .small-post-item-content .small-post-item-title {
  font-size: 15px;
  line-height: 20px;
  text-transform: capitalize;
  font-weight: 700;

  color: var(--fws-primary-alt);
  transition: all 0.3s;
}
.blog-sidebar-widget-area .small-post-wrapper .small-post-item-content .small-post-item-title:hover {
  color: var(--fws-primary);
}
.blog-sidebar-widget-area .small-post-wrapper .small-post-item-content .post-date {
  font-size: 14px;
  font-weight: 600;

  color: var(--fws-primary);
}
.blog-sidebar-widget-area .categories li {
  margin-top: 15px;
}
.blog-sidebar-widget-area .categories li a {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;

  color:var(--fws-primary-alt);
  transition: all 0.3s;
}
.blog-sidebar-widget-area .categories li a:hover {
  color: var(--fws-primary);
}
.blog-sidebar-widget-area .categories li a i::before {
  font-size: 10px;
  vertical-align: middle;
  margin-right: 5px;
}
.blog-sidebar-widget-area .categories li a .total-categorie {
  color: #BABABA;
}
.blog-sidebar-widget-area .tag a {
  background: var(--fws-surface);
  box-shadow: none;
  border: 1px solid #0000001a;
  border-radius: 0;
  padding: 5px 8px;
  color: var(--fws-primary-alt);
  margin: 5px;
  font-size: 14px;
  font-weight: 600;

  transition: all 0.3s;
}
.blog-sidebar-widget-area .tag a:hover {
  background: var(--fws-primary);
}

.nice_selection {
  max-width: 100%;
  border: 1px solid var(--fws-border);
  min-width: 80%;
  padding: 10px 0;
  margin-bottom: 30px;
}
.nice_selection:focus {
  outline: none !important;
}

.contact-area .contact-form  .was_a_form .form-button .form-btn {
  font-size: 15px;
  border-radius: var(--button-radius);
  margin-top: 20px;
  padding: 12px 42px;
  text-transform: capitalize;
}

.left-slide-blog {
  margin-bottom: 40px;
}
.left-slide-blog .blog-left-side {
  padding: 25px 30px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.15);
  border-radius: 0px 0px 3px 3px;
}
.left-slide-blog .blog-left-side a {
  font-size: 16px;
  font-weight: 600;

  color: var(--fws-primary);
}

/* ===================
29. Top Scroll CSS
=================== */
.top-bottom-scroll {
  display: none;
}

.top-bottom-scroll.fixed {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: block;
}
.top-bottom-scroll.fixed i {
  font-size: 13px !important;
}
.top-bottom-scroll.fixed i::before {
  background: var(--fws-primary);
  font-size: 13px !important;
  width: 40px;
  height: 40px;
  padding: 12px;
  border-radius: 90%;
  color: var(--fws-primary-alt);
  border: 2px solid #ffffff;
  cursor: pointer;
  text-align: center;
}
.top-bottom-scroll.fixed i:hover::before {
  background: var(--fws-secondary);
  color:var(--fws-secondary-alt);
}


[class^=fi-]:before, [class*=" fi-"]:before, [class^=fi-]:after, [class*=" fi-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

/* ===================
30. Footer Area CSS
=================== */
.fotter-widget-area {
  background: var(--fws-surface);
}
.fotter-widget-area .widget-clearfix img {
  margin-bottom: 34px;
  margin-top: 9px;
}
.fotter-widget-area .widget-clearfix p {
 font-size: 14px;
    line-height: 1.6;
    margin: 0 0 0.5em;
    font-weight: 400;
}
.fotter-widget-area .widget-clearfix p span {
  font-size: 14px;
  font-weight: 700;
}
.fotter-widget-area .widget-fotter-menu .widget-fotter-link {
  margin-top: 25px;
}
.fotter-widget-area .widget-fotter-menu .widget-fotter-link ul li {
  margin-bottom: 14px;
}
.fotter-widget-area .widget-fotter-menu .widget-fotter-link ul li a {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;

  transition: 0.3s;
  text-transform: capitalize;
}
.fotter-widget-area .widget-fotter-menu .widget-fotter-link ul li a i::before {
  font-size: 10px;
  vertical-align: middle;
  margin-right: 5px;
  font-weight: 400;
}
.fotter-widget-area .widget-fotter-menu .widget-fotter-link ul li a:hover {
  margin-left: 10px;
  color: var(--fws-primary);
}
.fotter-widget-area .contact-info {
  margin-top: 25px;
}
.fotter-widget-area .contact-info p {
  font-size: 14px;
  line-height: 21px;
}
.fotter-widget-area .contact-info p span {
  text-transform: uppercase;
}
.fotter-widget-area .subscribe-area {
  margin: 20px 0;
}
.fotter-widget-area .subscribe-area  .was_a_form {
  position: relative;
}
.fotter-widget-area .subscribe-area  .was_a_form input {
  width: 100%;
  height: 45px;
  background: var(--fws-surface);
  padding: 0 15px;
  color: var(--fws-text);
  outline: none;
  border-color:var(--fws-primary);
  border-radius: var(--button-radius);
}
.fotter-widget-area .subscribe-area  .was_a_form button {
  position: absolute;
  right: -1px;
  border:0;
  top: 0;
  height: 100%;
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
  font-size: 13px;
  padding: 0 22px;
  text-transform: uppercase;
  outline: none;
  border-radius: var(--button-radius);
  font-weight: 600;
  transition: all 0.4s;
}
.fotter-widget-area .subscribe-area  .was_a_form button:hover {
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt);
}
.fotter-widget-area {
  display: flex;
  flex-direction: column;
}

.fotter-widget-area .copy-right-area {
  margin-top: 20px;
}

/* Bottom bar: copyright + legal links, sits below payment/social icons */
.fotter-widget-area .copy-right-area:last-child {
  order: 99;
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid var(--fws-border);
  padding-bottom: 80px; /* clearance for fixed loyalty bar */
}

.fotter-widget-area .copy-right-area:last-child p {
  font-size: 13px;
  line-height: 20px;
  text-transform: none;
  color: var(--fws-text-muted);
  margin: 0 0 10px;
}

.fotter-widget-area .copy-right-area:last-child::after {
  content: '';
  display: block;
  margin-top: 8px;
}

.copy-right-legal-links {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  font-size: 13px;
}

.copy-right-legal-links a {
  color: var(--fws-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.copy-right-legal-links a:hover {
  color: var(--fws-primary);
  text-decoration: underline;
}

.copy-right-legal-links span {
  color: #ccc;
}

.fotter-widget-area .copy-right-area p {
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  margin: 0;
}
.fotter-widget-area .widget-fotter-title h4 {
       color:var(--fws-primary);
  font-size: 20px;
  line-height: 50px;
  font-weight: 600;
  position: relative;
}
.fotter-widget-area .widget-fotter-title h4::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 70px;
  background: var(--fws-primary);
  bottom: 0;
}

.arrival-title-2 {
  margin-bottom: 50px !important;
}

.testimonial-wrapper {
  margin-top: -34px;
}

a.mk-btn.btn.slider-btn.slider-btn-1
{
    background-color:var(--fws-secondary);
    color:var(--fws-secondary-alt);
}

.slider-btn-1:hover {
  background: var(--fws-surface) !important;
  color: var(--fws-text) !important;
}

.about-us-2 {
  margin-bottom: 70px;
}

.about-us-3 {
  margin-bottom: 26px;
}

.mk_checkout-area {
  margin-bottom: 77px;
}

.accepts_logos{
    max-width:70px;
    max-height:50px;
    margin-top:5px;
    opacity:0.7;
}
.accepts_logos:hover
{
    opacity:1;
}
.payment-img img
{
    opacity:0.7;
}
.payment-img img:hover
{
    opacity:1;
}
/* ===================
31. Login, Register and My Account Page CSS
=================== */
.login-register-area {
  margin-top: 100px;
}
.login-register-area .my-account-wrapper {
  padding: 20px;
  border: 1px solid var(--fws-border);
}
.login-register-area .my-account-wrapper h4 {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.login-register-area .my-account-wrapper  .was_a_form input {
  border-radius: 0;
}
.login-register-area .my-account-wrapper  .was_a_form button.btn.btn-primary {
  display: block;
  width: 100%;
  font-size: 20px;
  text-transform: uppercase;
  padding: 10px;
  letter-spacing: 1px;
  font-weight: normal;
  margin-top: 20px;
  background: var(--fws-primary);
  color: #ffffff;
  border: none;
}
.login-register-area .my-account-wrapper  .was_a_form button.btn.btn-primary:hover {
  background: var(--fws-primary);
}
.login-register-area .my-account-wrapper .lost-password a {
  text-decoration: none;
}
.login-register-area .my-account-wrapper .lost-password a:hover {
  color: red;
  transition: all 0.3s;
}
.login-register-area .my-account-wrapper .login-or-with {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fws-text);
  margin-top: 35px;
  margin-bottom: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.login-register-area .my-account-wrapper .login-or-with:after {
  content: "";
  flex: 1 0 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #E2E2E2;
  margin-right: -20px;
  margin-left: 10px;
}
.login-register-area .my-account-wrapper .login-or-with:before {
  content: "";
  flex: 1 0 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #E2E2E2;
  margin-left: -20px;
  margin-right: 10px;
}
.login-register-area .my-account-wrapper .social-button {
  margin-top: 20px;
}
.login-register-area .my-account-wrapper .social-button a {
  color: #fff;
  padding: 10px 15px;
  display: inline-block;
  border-radius: var(--button-radius);
  font-size: 16px;
  margin: 10px;
  text-transform: uppercase;
  text-decoration: none;
}
.login-register-area .my-account-wrapper .social-button a.facebook-btn {
  background: #4267B2;
}
.login-register-area .my-account-wrapper .social-button a.facebook-btn:hover {
  background: #4267b2eb;
}
.login-register-area .my-account-wrapper .social-button a.google-btn {
  background: #D44730;
}
.login-register-area .my-account-wrapper .social-button a.google-btn:hover {
  background: #d44730e6;
  transition: all 0.4s ease;
}

.my-account-area {
  margin-top: 100px;
}
.my-account-area .my-account-menu ul {
  margin: 0;
  padding: 0;
}
.my-account-area .my-account-menu ul li {
  margin-bottom: 8px;
}
.my-account-area .my-account-menu ul li a {
  background: var(--fws-surface-alt);
  display: block;
  padding: 10px 15px;
  color: var(--fws-text);
  text-decoration: none;
}
.my-account-area .my-account-menu ul li a.active {
  background: #000;
  color: #fff;
}
.my-account-area .my-account-menu ul li a.active:hover {
  background: #000;
  color: #fff;
}
.my-account-area .my-account-menu ul li a:hover {
  background: var(--fws-primary);
  color: var(--fws-text);
  transition: all 0.4s;
}
.my-account-area .my-account-menu ul li a i {
  position: relative;
  top: 1px;
}
.my-account-area input {
  border-radius: 0;
  padding: 5px 15px;
}
.my-account-area select {
  border-radius: 0;
  padding: 5px 15px;
}
.my-account-area .mc-order a.view-btn {
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  padding: 2px 5px;
  text-decoration: none;
}
.my-account-area .mc-order a.view-btn:hover {
  background: var(--fws-surface-alt);
  transition: all 0.4s;
}
.my-account-area .mc-setting table tr td {
  padding: 10px 10px 10px 0px;
}
.my-account-area .mc-dashboard h3 {
  margin-bottom: 25px;
  text-align: center;
}
.my-account-area .mc-dashboard .order-status {
  border: 2px solid var(--fws-primary);
  text-align: center;
  padding: 25px 20px;
  border-radius: 90%;
  width: 165px;
  height: 165px;
  margin: 20px auto;
}
.my-account-area .mc-dashboard .order-status span {
  font-size: 46px;
  font-weight: bold;
}
.my-account-area .mc-dashboard .order-status h4 {
  font-size: 22px;
}

.button-primary-pf:hover {
  background: var(--fws-primary) !important;
  color: var(--fws-text) !important;
}

.button-primary-pf {
  margin-top: 25px;
  transition: 0.6s !important;
}

/*
==========================================
====== 24. Newsletter Popup=====
*/
.nlmbgOverlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000000;
  opacity: 0.85;
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  z-index: 999;
  display: none;
}

.nlmPopupWindow {
  display: none;
  position: fixed;
  width: auto;
  max-width: 800px;
  top: 25%;
  left: 0;
  right: 0;
  margin: 0px auto;
  background-color: var(--fws-surface);
  z-index: 99999;
  padding: 0 20px;
  transform: translateY(0);
}

.newsletter-img-wrap {
  height: 100%;
  width: 100%;
}

.newsletter-img-box {
  vertical-align: middle;
}

a#btnClose {
  display: block;
  position: absolute;
  left: auto;
  right: -15px;
  top: -15px;
  z-index: 9999999;
}

a#btnClose:hover {
  color: var(--fws-primary);
  transition: all 0.3s;
}

a#btnClose i {
  font-size: 30px;
  border: 3px solid;
  border-radius: 90%;
  background: var(--fws-surface);
}

.newsletterPopup .was_a_form {
  margin: 36px 0;
}

.newsletterPopup .was_a_form h3 {
  font-size: 32px;
  margin-bottom: 0;
  text-transform: capitalize;
  font-weight: 700;
}

.newsletterPopup .was_a_form button.button-primary {
  margin: 20px 0;
  cursor: pointer;
  border: none;
  background: var(--fws-primary);
  color: var(--fws-primary-alt);
  padding: 10px 20px;
  border-radius: var(--button-radius);
  transition: 0.5s;
}
.newsletterPopup .was_a_form button.button-primary:hover {
  background: var(--fws-primary);
  color: var(--fws-text);
}

.newsletterPopup .was_a_form p a {
  color: #e33e50e0;
}

.newsletterPopup p {
  color: var(--fws-text);
  margin-top: 10px;
  font-weight: 400;
}

.news-terms {
  margin-top: 3px !important;
  margin-bottom: 0;
}

.newsletterPopup input {
  border: 1px solid var(--fws-primary);
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: var(--button-radius);
}


/* ===================
32. Blog View Page
=================== */

/* Blog detail + blog roll link defaults — NOT white; inline links use primary */
  #fws_content .blog-details-area a,
  #fws_content .blog-standards-area a {
      color: var(--fws-primary);
      text-decoration: none;
  }

.blog-post-title
{
    margin-bottom:2em;
}
.blog-post-read-more
{    
    width:100%;
    text-align:right;
    margin-top:50px;
    margin-bottom:50px;
}
.blog-post-read-more i
{
    position:relative;
    top:5px;
    left:10px;    
}

.blog-catagory{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:8px;
      margin:10px 0;
      align-content:center;
      align-items:center;     
  }
  .blog-catagory a
  {
      padding:5px 14px 5px 12px;
      color:var(--fws-primary-alt) !important;
      border-radius:var(--button-radius);
      background:var(--fws-primary);
      text-decoration:none;
      font-size:13px;
      font-weight:500;
      transition:0.3s;
      display:inline-flex;
      align-items:center;
      gap:5px;
  }
  .blog-catagory a::before {
      content:"\ead8";
      font-family:uicons-regular-rounded !important;
      font-style:normal;
      font-weight:normal !important;
      font-size:11px;
  }

.blog-catagory a:hover
{
    color:var(--fws-secondary-alt) !important;
    background:var(--fws-secondary);
}


  .blog-content{
      padding:30px;
      /*max-width:760px;*/
  }
  .blog-content p {
      font-size:16px;
      line-height:1.75;
      color: var(--fws-text-muted);
      margin-bottom:1.25em;
  }
  .blog-content h1 {
      font-size:32px;
      font-weight:700;
      color:var(--fws-text);
      margin-bottom:0.75em;
      text-transform:none;
      line-height:1.3;
  }
  .blog-content h2 {
      font-size:24px;
      font-weight:600;
      color:var(--fws-text);
      margin-top:1.75em;
      margin-bottom:0.5em;
      text-transform:none;
      line-height:1.4;
  }
  .blog-content h3 {
      font-size:20px;
      font-weight:600;
      color: var(--fws-text-muted);
      margin-top:1.5em;
      margin-bottom:0.5em;
      text-transform:none;
  }
  .blog-content a {
      color:var(--fws-primary);
      text-decoration:underline;
  }
  .blog-content a:hover {
      color:var(--fws-secondary);
  }

#comments_section{
    margin-top: 3em;
    padding: 25px;
    background: var(--fws-surface-alt);
    border-radius: 8px;
  }

  #comments_section header
  {
      font-size: 22px;
      font-weight: 700;
      color: var(--fws-text);
      margin-bottom: 1em;
  }

 #comment_content, #comment_reply_content
  {
      min-height:150px;
      padding: 12px 15px;
      border: 1px solid var(--fws-border);
      display: block;
      width: 100%;
      border-radius: var(--button-radius);
      box-shadow: none;
      margin-bottom:1.5em;
      font-size:15px;
      transition: border-color 0.3s;
  }
  #comment_content:focus, #comment_reply_content:focus
  {
      border-color: var(--fws-primary);
      outline: none;
  }

.blog_comments_author, .blog_comments_email, .blog_comments__reply_email, .blog_comments_reply_author
{
    padding: 8px 10px;
    border: 1px solid var(--fws-border);
    display: block;
    width: 100%;
    transition: 0.4s;
    height: calc(2em + .75rem + 2px);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 20px;
}
#comment_email_label{    
    font-size: 18px;
    font-weight: 400;
    color: var(--fws-text-muted);
    margin-bottom: 30px;
}
.blog_comments_submit, .blog_comments_reply_submit, .blog_comments_reply_reply  {

    border: 0;
    background: var(--fws-primary);
    color: var(--fws-primary-alt) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding: 15px 32px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    outline: none;
    box-shadow: none !important;
    border-radius:var(--button-radius);
    transition: 0.3s;
    text-transform: uppercase;
}
.blog_comments_submit:hover, .blog_comments_reply_submit:hover, .blog_comments_reply_reply:hover{
    color:var(--fws-secondary-alt) !important;
    background:var(--fws-secondary);
}

#comments_thanks, #comments_none {
    width:90%;
    margin:0 auto;
    text-align:center;
}

.author-comment
{
    width:100%;
}

.blog_comments_reply_reply
{
   margin-top:1em;    
}

#comments_reply_section
{
    margin-top:2em;
    width:100%;
}
/* ===================
33. Footer
=================== */

.social_link
{
    height:38px;
    width:38px;
    display:inline-flex;
    color:var(--fws-primary);
    margin: 0em 0.2em;
}

.social_link:hover
{
    color:var(--fws-secondary);
}

.social_link svg
{
    height:38px;
    width:38px;    
    color:var(--fws-primary);
    /*color:#a5a5a5;*/
}
.social_link svg:hover
{    
    color:var(--fws-secondary);
}

/* ===================
34. Generic Content Placeholder "fws_content"
=================== */
#fws_content
  {
      padding:50px 0;
      max-width: 1280px;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
  }
  #fws_content h1 {
      font-size: 32px;
      font-weight: 700;
      color: var(--fws-text);
      margin-bottom: 0.5em;
      text-transform: none;
      line-height: 1.3;
  }
  #fws_content h2 {
      font-size: 24px;
      font-weight: 600;
      color: var(--fws-text);
      margin-top: 1.75em;
      margin-bottom: 0.5em;
      text-transform: none;
      line-height: 1.4;
  }
  #fws_content h3 {
      font-size: 20px;
      font-weight: 600;
      color: var(--fws-text-muted);
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      text-transform: none;
  }
  #fws_content p {
      font-size: 16px;
      line-height: 1.75;
      color: var(--fws-text-muted);
      margin-bottom: 1.25em;
  }
  #fws_content ul, #fws_content ol {
      margin: 0.75em 0 1.25em 1.5em;
      padding: 0;
  }
  #fws_content ul {
      list-style: disc;
  }
  #fws_content ol {
      list-style: decimal;
  }
  #fws_content li {
      font-size: 16px;
      line-height: 1.75;
      color: var(--fws-text-muted);
      margin-bottom: 0.4em;
  }
  #fws_content a {
      color: var(--fws-primary);
      text-decoration: underline;
  }
  #fws_content a:hover {
      color: var(--fws-secondary);
  }
  #fws_content table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.25em 0;
  }
  #fws_content th, #fws_content td {
      padding: 10px 14px;
      border: 1px solid var(--fws-border);
      font-size: 15px;
      line-height: 1.6;
      color: var(--fws-text-muted);
      text-align: left;
  }
  #fws_content th {
      background: var(--fws-surface-alt);
      font-weight: 600;
      color: var(--fws-text);
  }
  #fws_content strong {
      font-weight: 600;
      color: var(--fws-text);
  }

/* ===================
35. Promotions
=================== */

.promo_header_link
{
    background-color:var(--fws-primary) !important;
}
.promo_header_link a
{
    
    color:var(--fws-primary-alt) !important;
}
#fws_content .auto_discount_item
{
    display:inline-block !important;
}
#fws_content .auto_discount_info
{
    display:flex !important;
}

#fws_content .auto_discount_header_container
{
    border-top: solid 1px var(--fws-primary);
    border-bottom: solid 1px var(--fws-primary);
    color:var(--fws-primary-alt);
}
#fws_content .auto_discount_header_active
{
    background-color:var(--fws-primary);
    color:var(--fws-primary-alt);
}
#fws_content .auto_discount_header_container
{
    color:var(--fws-primary-alt);
    background-color:var(--fws-primary);
    border-top: solid 1px var(--fws-primary);
    border-bottom: solid 1px var(--fws-primary);
}
#fws_content .auto_discount_icon i
{
    color:var(--fws-primary);
}
#fws_content .auto_discount_browse_products a
{    
    color:var(--fws-primary-alt);
}
/* ===================
36. Gift Cards
=================== */
#gift_card_container h2
{
    font-size: 1.5em;
}
#gift_card_container .product-options
{
    margin-top:2em;
}
#gift_card_container .recipient-name input, #gift_card_container .recipient-email input
{
    padding:0.5em;
}

#gift_card_container .value-options div, #gift_card_container .add-to-cart {
  border: 0;
  background: var(--fws-primary);
  color:var(--fws-primary-alt);
  font-size: 13px;
  padding: 0 22px;
  text-transform: uppercase;
  outline: none;
  border-radius: var(--button-radius);
  font-weight: 600;
  transition: all 0.4s;
  min-height:30px;
}
#gift_card_container .value-options div:hover,
#gift_card_container .add-to-cart:hover,
#gift_card_container .value-options .selected {
  background: var(--fws-secondary);
  color: var(--fws-secondary-alt);
}
#gift_card_container #error-feedback
{
    background-color:var(--fws-secondary);
    margin-top:1em;
    transition: all 0.4s;
}

/* Gift card framework overrides */
#gift_card_container .product-card {
  background-color: var(--fws-surface);
  border: 1px solid var(--fws-border);
}
#gift_card_container .product-card h2 {
  color: var(--fws-text-muted);
}
#giftcardStart.popup {
  background-color: var(--fws-surface);
  border: 1px solid var(--fws-border);
  color: var(--fws-text);
}
#giftcardStart.popup .close-btn {
  color: var(--fws-text-muted);
}
#giftcardStart.popup svg path {
  stroke: var(--fws-text);
}
#fws-giftcard-busywait {
  background-color: var(--fws-surface) !important;
  border: 1px solid var(--fws-border) !important;
  border-radius: 8px;
}

/* ===================
37. Special offers page
=================== */

#nooffers
{
    width:100%;
    text-align:center;
}
#nooffers h1
{
    font-size:1.5em;
}
#nooffers h3
{
    font-size:1.2em;
}

/* ===================
38. Order success page
=================== */

.order_success_card
{
    margin-top:2em;
}
.order_success_card a
{
    color: var(--fws-secondary);
}
.order_success_card h2
{
    font-size:1.8em;
    color: var(--fws-secondary);
}
.order_success_card .order_span_title
{
    font-weight:bold;
}
.order_success_card .order_span_value
{
    font-weight:normal;
}
.order_success_card .order_success_points
{
    font-weight:normal;
}
.order_success_points
{    
    color:var(--fws-secondary);
}
.order_success_points_claim
{
   color: var(--fws-primary);
}

/* =======================
39. Product Review Submit Form
=========================== */

#review_form label {
  font-size: 20px;

  color: var(--fws-primary-alt);
  margin-top: 10px;
  margin-bottom: 10px;
}
#review_form input, #review_form select {
  padding: 0px 20px;
  border: 1px solid var(--fws-border);
  display: block;
  width: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: calc(2.7em + .75rem + 2px);
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#review_form textarea {
  padding: 8px 10px;
  border: 1px solid var(--fws-border);
  display: block;
  width: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-height:250px;
}

#review_form {
    
    padding:50px 0;    
    max-width: 1280px;  
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin: 100px auto;
}

#review_form .shop_review_form_cancel,
#review_form .shop_review_form_submit
{    
    display:block;
    height: 40px;
    border: 0;
    background: var(--fws-primary);
    color: var(--fws-primary-alt);
    font-size: 13px;
    padding: 0 22px;
    text-transform: uppercase;
    outline: none;
    border-radius: var(--button-radius);
    font-weight: 600;
    transition: all 0.4s;
    text-align:center;
    min-width:100px;
    line-height:3em;
}
#review_form .shop_review_form_cancel:hover,
#review_form .shop_review_form_submit:hover
{
    background: var(--fws-secondary);
    color:var(--fws-secondary-alt);
}

/* ========================
  40. Popup modals (framework)
  ========================== */
  
#softadd-container
{
  top:5% !important;
}
#softadd-container .close a
{
    display:none !important;
    text-shadow:none !important;
}
#softadd-modal-title
{
 background-color:var(--fws-secondary) !important;
 color:var(--fws-secondary-alt) !important;
 text-shadow:none !important;
}
a.simplemodal-close{
    color:#fff;
}

button.simplemodal-close,
button.success
{
 background-color:var(--fws-primary);
 color: var(--fws-text);
 outline:none;
 border-radius:var(--button-radius);
 border-style:none;
 line-height:20px;
 padding: 10px 25px;
 text-align:center;
 vertical-align:middle;
}

button.simplemodal-close:hover,
button.success:hover
{
 background-color:var(--fws-secondary);
 color:var(--fws-secondary-alt);
}


/* ========================
  41. Subcategories
  ========================== */
  
  
  .subcategories-wrapper
  {
      margin-bottom:50px;
  }
  
  .subcategories-wrapper .prodct-info
  {
      cursor:pointer;
      text-align:center;
  }
  
  .subcategories-wrapper .prodct-info img
  {
      margin:0 auto;
  }
  .subcategories-wrapper .single-product .prodct-info img
  {
      border-radius: 50%;
    border: 1px solid #fff;
    transition: 0.3s;
  }
  .subcategories-wrapper .single-product:hover .prodct-info img {
  border: 1px solid var(--fws-primary);
  transition: all 0.5s ease-in-out;
}
.subcategories-wrapper .single-product:hover .prodct-info p {
  color: var(--fws-primary);
}

.subcategories-wrapper .single-product .prodct-info img {
  border-radius: 50%;
  border: 1px solid #fff;
  transition: 0.3s;
}
  
  
  
/* ========================
  42. Breadcrumbs
  ========================== */
  
  .breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* wrap on small screens */
  margin-bottom:2em;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  margin-right:0.5em;
}

.breadcrumbs li a {
  display: inline-block;
  padding: 6px 14px;
  background-color: var(--fws-primary);
  color: var(--fws-primary-alt);
  text-decoration: none;
  border-radius: var(--button-radius);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.breadcrumbs li a:hover {
  background-color: var(--fws-secondary);
  color: var(--fws-secondary-alt);
}

.breadcrumbs li:last-child a {
  background-color: var(--fws-secondary);
  color: var(--fws-secondary-alt);
}
.breadcrumbs li:last-child a:hover {
  background-color: var(--fws-primary);
  color: var(--fws-primary-alt);
}

  
  
/* ========================
  43. Category Header
  ========================== */
  .category-header-info {
      width:100%;
  } 
  .category-header-info img
  {
    float: left;
    margin-right: 2em;
    margin-bottom: 2em;
    border-radius: 50%;
    border: 1px solid var(--fws-primary);
    transition: 0.3s;
  }
  
  
/* ===========================
Theme Editor Fixes and Helpers
============================ */

/* drag and drop mode */
/*override for when in drag mode*/ 
.body_blocks_moving .fws-section-block-group-container, .body_blocks_moving .fws_section_block_container_move_active
{
    display:block;
    z-index: 9999;
    width:100%;
}
    
.body_blocks_moving .fotter-widget-area
{
    position:relative;
    z-index: 9999;
}

/* ================================ 
       44. Forms (dynamic)
   ================================
*/
.fws-contact-form
{
    max-width:850px;
    margin:0 auto;
}
.fws-contact-form .form-check
{
    max-width:300px;
    margin:0 auto;
}

/* =================================
  45. Cart Icon
  ==================================
*/

.cart-icon-wrapper {
    position: relative;
    display: inline-block;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--fws-primary);
    color:  var(--fws-primary-alt);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius:var(--button-radius);
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    display: none; /* Hidden by default */
}

/* Show the badge when cart has items */
.cart-count.has-items {
    display: block;
}

/* Optional: Adjust for larger numbers (10+) */
.cart-count.double-digit {
    padding: 2px 5px;
    font-size: 10px;
}

.recaptcha-container
{
    margin-top:1.2em;
    margin-bottom:1.2em;
}
  
/* semi transparent breadcrumbs / page titles */
.breadcrumbs-area {
  position: relative;
  background-size: cover;
  background-position: center;
}

.breadcrumbs-wrapper {
  position: relative;
  z-index: 1; /* keep content above overlay */
}

/* The actual overlay */
.breadcrumbs-wrapper::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left: 0; */
  background-color: var(--breadcrumb-overlay-color, #000000); /* fallback if not set */
  opacity: 0.5; /* your desired transparency */
  z-index: -1; /* sit behind the text but inside wrapper */
}

/* same trick with the countdown timer */
.countdown .countdown-wrapper {
  position: relative;
  background-size: cover;
  background-position: center;
}

/* The content wrapper */
.countdown .overlay {
  position: relative;
  z-index: 1;       /* keep text above the overlay layer */
  padding: 50px 30px;  /* your existing padding from .overlay */
}

/* The actual colored overlay */
.countdown .overlay::before {
  content: "";
  position: absolute;
  inset: 0;                           /* top/right/bottom/left: 0 */
  background-color: var(--countdown-overlay-color, #cccccc); /* fallback */
  opacity: 0.5;                       /* control transparency here */
  z-index: -1;                        /* sit behind the text */
}

/* new flat ribbon overlays */
.label-list
{
    position:absolute;
    left:0px;
    top:10px;
}
.flat-label
{
    border-radius: 0 3px 3px 0;
    margin-bottom: 5px;
    display: block;
    padding: 4px 16px 4px 10px; /* extra right padding */
    background-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
    font-size: 13px;
    width: max-content;

    /* Creates angled right edge */
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.flat-label.sale {
    background-color: #cf0e0e;
    color: #fff;
}

.flat-label.percentage
{
    background-color: var(--fws-text);
    color:#fff;
}

.flat-label.popular
{
    background-color: var(--fws-secondary);
    color:var(--fws-secondary-alt);
}

.flat-label.new
{
    background-color: var(--fws-primary);
    color:var(--fws-primary-alt);
}

/* Review stars */
.star-rating {
  --star-size: 100px;
  --star-color: #f5a623;
  --star-empty: var(--fws-border);
  
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin:0 auto;
}

.star-rating::before,
.star-rating::after {
  content: '';
  width: var(--star-size);
  height: calc(var(--star-size) / 5);
  flex-shrink: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 1l3.09 6.26L22 8.27l-5 4.87 1.18 6.88L12 16.77l-6.18 3.25L7 13.14 2 8.27l6.91-1.01L12 1z'/%3E%3Cpath d='M36 1l3.09 6.26L46 8.27l-5 4.87 1.18 6.88L36 16.77l-6.18 3.25L31 13.14l-5-4.87 6.91-1.01L36 1z'/%3E%3Cpath d='M60 1l3.09 6.26L70 8.27l-5 4.87 1.18 6.88L60 16.77l-6.18 3.25L55 13.14l-5-4.87 6.91-1.01L60 1z'/%3E%3Cpath d='M84 1l3.09 6.26L94 8.27l-5 4.87 1.18 6.88L84 16.77l-6.18 3.25L79 13.14l-5-4.87 6.91-1.01L84 1z'/%3E%3Cpath d='M108 1l3.09 6.26 6.91 1.01-5 4.87 1.18 6.88-6.18-3.26-6.18 3.25L103 13.14l-5-4.87 6.91-1.01L108 1z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M12 1l3.09 6.26L22 8.27l-5 4.87 1.18 6.88L12 16.77l-6.18 3.25L7 13.14 2 8.27l6.91-1.01L12 1z'/%3E%3Cpath d='M36 1l3.09 6.26L46 8.27l-5 4.87 1.18 6.88L36 16.77l-6.18 3.25L31 13.14l-5-4.87 6.91-1.01L36 1z'/%3E%3Cpath d='M60 1l3.09 6.26L70 8.27l-5 4.87 1.18 6.88L60 16.77l-6.18 3.25L55 13.14l-5-4.87 6.91-1.01L60 1z'/%3E%3Cpath d='M84 1l3.09 6.26L94 8.27l-5 4.87 1.18 6.88L84 16.77l-6.18 3.25L79 13.14l-5-4.87 6.91-1.01L84 1z'/%3E%3Cpath d='M108 1l3.09 6.26 6.91 1.01-5 4.87 1.18 6.88-6.18-3.26-6.18 3.25L103 13.14l-5-4.87 6.91-1.01L108 1z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
}

.star-rating::before {
  background: var(--star-empty);
}

.star-rating::after {
  position: absolute;
  left: 0;
  background: var(--star-color);
  clip-path: inset(0 calc((5 - var(--rating)) / 5 * 100%) 0 0);
}

.star-rating__count {
  font-size: 0.875em;
  color: var(--fws-text-muted);
}

/* Show stock levels */
.stock-level-info
{
    /*margin-top:10px;*/
    font-weight:600;
    font-size:small;
    padding:0.5em;
}
.stock-level-info.instock
{
    color: #28a745;
}
.stock-level-info.lowstock
{
    color: darkorange;
}
.stock-level-info.nostock
{
    color: var(--fws-primary-alt);
    background-color:var(--fws-primary);
    margin: 10px 0px;
    cursor:pointer;
}

.stock-level-info i
{
    position:absolute;
    left:10%;
}


/* =============================================
   Product Toolbar
   ============================================= */

.product-toolbar {
    background: var(--fws-surface);
    border-bottom: 1px solid var(--fws-border);
    padding: 0.75rem 0;
}

.product-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-toolbar-results {
    font-size: 0.875rem;
    color: var(--fws-text-muted);
}

.product-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* =============================================
   Toolbar Buttons
   ============================================= */

.toolbar-btn {
    color: var(--fws-text);
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.toolbar-btn:hover,
.toolbar-btn:focus {
    color: var(--fws-text);
    text-decoration: none;
}

.toolbar-btn .sort-by-current,
.toolbar-btn .per-page-current {
    font-weight: 500;
}

.toolbar-chevron {
    margin-left: 0.125rem;
    opacity: 0.6;
}

/* =============================================
   Toolbar Divider
   ============================================= */

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--fws-border);
    margin: 0 0.5rem;
}

/* =============================================
   Dropdown Menus
   ============================================= */

.toolbar-dropdown {
    min-width: 180px;
    padding: 0.5rem 0;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0.375rem;
}

.toolbar-dropdown .dropdown-item {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--fws-text);
}

.toolbar-dropdown .dropdown-item:hover,
.toolbar-dropdown .dropdown-item:focus {
    background-color: var(--fws-surface-alt);
}

.toolbar-dropdown .dropdown-item.active {
    background-color: transparent;
    color: var(--fws-secondary, #c41230);
    font-weight: 500;
}

/* =============================================
   View Toggle Buttons
   ============================================= */

.view-toggle {
    display: flex;
    gap: 0.25rem;
}

.view-toggle-btn {
    padding: 0.5rem;
    border: 1px solid var(--fws-border);
    background: var(--fws-surface);
    color: var(--fws-text-muted);
    border-radius: 0.25rem;
    transition: all 0.15s ease;
    line-height: 1;
}

.view-toggle-btn:hover {
    border-color: #bbb;
    color: var(--fws-primary-alt);
    background: var(--fws-primary);
}

.view-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.view-toggle-btn.active {
    border-color: var(--fws-secondary, #c41230);
    color: var(--fws-secondary, #c41230);
    background: var(--fws-surface);
}

.view-toggle-btn svg {
    display: block;
}

/* =============================================
   Mobile Modals
   ============================================= */

.toolbar-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
}

.toolbar-modal .modal-content {
    border: none;
    border-radius: 1rem 1rem 0 0;
    max-height: 80vh;
}

.toolbar-modal .modal-header {
    border-bottom: 1px solid var(--fws-border);
    padding: 1rem 1.25rem;
}

.toolbar-modal .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.toolbar-modal .close {
    font-size: 1.5rem;
    opacity: 0.5;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

/* Modal slide-up animation */
.toolbar-modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.toolbar-modal.show .modal-dialog {
    transform: translateY(0);
}

/* =============================================
   Modal Options List
   ============================================= */

.toolbar-options .list-group-item {
    border: none;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: var(--fws-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.toolbar-options .list-group-item:last-child {
    border-bottom: none;
}

.toolbar-options .list-group-item:hover,
.toolbar-options .list-group-item:focus {
    background-color: var(--fws-surface-alt);
}

.toolbar-options .list-group-item.active {
    background-color: transparent;
    color: var(--fws-secondary, #c41230);
}

.toolbar-options .check-icon {
    display: none;
    color: var(--fws-secondary, #c41230);
    flex-shrink: 0;
}

.toolbar-options .list-group-item.active .check-icon {
    display: block;
}

/* =============================================
   Responsive Adjustments
   ============================================= */

/* =================  Product Grid v Product List =========================*/
/* =============================================
   List View Only Elements (hidden in grid)
   ============================================= */

.mk-product-description,
.mk-product-variants,
.mk-product-actions {
    display: none;
}

/* =============================================
   List View Styling
   ============================================= */

/* When list view is active, make columns full width */
.view-list .col-6,
.view-list .col-xl-4,
.view-list .col-lg-4,
.view-list .col-md-6,
.view-list .col-sm-6,
.view-list [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Transform product card to horizontal layout */
.view-list .mk-product-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    border: 1px solid var(--fws-border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--fws-surface);
    transition: box-shadow 0.2s ease;
}

.view-list .mk-product-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Image container - fixed width on left */
.view-list .mk-product-item-info {
    flex: 0 0 200px;
    max-width: 200px;
    position: relative;
}

.view-list .mk-product-image {
    height: 100%;
    min-height: 200px;
}

.view-list .mk-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Labels - position in top left of image */
.view-list .label-list {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Content area - expand to fill remaining space */
.view-list .mk-product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    text-align: left !important;
}

/* Category styling */
.view-list .mk-product-category {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    order: 1;
}

/* Title styling */
.view-list .mk-product-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: block;
    order: 2;
}

/* Description - list view only */
.view-list .mk-product-description {
    display: block;
    font-size: 0.9rem;
    color: var(--fws-text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    order: 3;
    
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Left-align price container */
.view-list .mk-product-price {
    justify-content: flex-start;
    order: 4;
    margin-bottom: 0.25rem;
}

/* Star rating left align */
.view-list .star-rating {
    justify-content: flex-start;
    margin-bottom: 0.5rem;
    order: 5;
}

/* Variants badge - list view only */
.view-list .mk-product-variants {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--fws-text-muted);
    margin-bottom: 0.5rem;
    order: 6;
}

.view-list .mk-product-variants .variants-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fws-surface-alt);
    color: var(--fws-text);
    font-weight: 600;
    font-size: 0.8rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 0.25rem;
}

/* Stock info */
.view-list .stock-level-info {
    order: 7;
    margin-bottom: 1rem;
    position:relative;
    text-align:center;
    font-size:initial;
    font-weight:initial;
}

/* Action buttons - list view only */
.view-list .mk-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    order: 8;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.view-list .mk-product-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
}

.view-list .mk-product-actions .btn i {
    font-size: 1.1rem;
    position:relative;
    top:4px;
    left:-2px;
}

.view-list .btn-add-to-cart {
    
    background-color: var(--fws-primary, #a30f28);
    border-color: var(--fws-primary-alt, #a30f28);
    color: var(--fws-primary-alt, #a30f28);
}

.view-list .btn-add-to-cart:hover {
    background-color: var(--fws-secondary, #a30f28);
    border-color: var(--fws-secondary-alt, #a30f28);
    color: var(--fws-secondary-alt, #a30f28);
}

.view-list .btn-view-product {    
    background-color: var(--fws-secondary, #a30f28);
    border-color: var(--fws-secondary-alt, #a30f28);
    color: var(--fws-secondary-alt, #a30f28);
}

.view-list .btn-view-product:hover {
    
    background-color: var(--fws-primary, #a30f28);
    border-color: var(--fws-primary-alt, #a30f28);
    color: var(--fws-primary-alt, #a30f28);
}

.view-list .btn-wishlist {
    padding: 0.5rem 0.65rem;
    color: var(--fws-text-muted);
    border-color: var(--fws-border);
}

.view-list .btn-wishlist:hover {
    background-color: #fff0f3;
    border-color: var(--fws-secondary, #c41230);
    color: var(--fws-secondary, #c41230);
}

.view-list .btn-notify
{
    display:none;
}

/* (Optional) ensure grid hover overlay is hidden in list view */
.view-list .mk-product-item .product-hover-action {
    display: none !important;
}

/* Optional: distinct wishlist styling */
.view-list .wishlist-btn {
    border-color: #e74c3c;
    color: #e74c3c;
}

.view-list .wishlist-btn:hover {
    background: #e74c3c;
    color: #fff;
}

/*== wishlist icons/states --*/
[data-wishlist-state="false"] .heart-empty { display: block; }
[data-wishlist-state="false"] .heart-filled { display: none; }
[data-wishlist-state="true"] .heart-empty { display: none; }
[data-wishlist-state="true"] .heart-filled { display: block; }


/* ---------------------------------------------
   List view CTAs – 2-column layout, bottom of card
   --------------------------------------------- */

/* Hide actions by default (grid view) – already in file but safe to repeat */
.mk-product-actions {
    display: none;
}

.btn-notify
{
    margin: 0 10%;
}

/* Show and position in list view */
.view-list .mk-product-content {
    display: flex;
    flex-direction: column;
}

.view-list .mk-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    order: 8;          /* after stock info etc. */
    margin-top: auto;  /* push to bottom of the content column */
    padding-top: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

/* Base button layout */
.view-list .mk-product-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* Desktop/tablet: 2-column grid (Add/Customise + View on first row, Wishlist full width) */
/* =============================================
   List View - Tablet Adjustments
   ============================================= */

/* =============================================
   List View - Desktop Layout
   ============================================= */

/* =============================================
   List View - Mobile (stacked but wider)
   ============================================= */

/* =============================================
   Grid View - Reset all list view styles
   ============================================= */

.view-grid .mk-product-item,
.tab-content:not(.view-list) .mk-product-item {
    display: block;
    flex-direction: unset;
    border: 1px solid var(--fws-border);
    border-radius:var(--button-radius);
    background: var(--fws-surface);
    overflow: hidden;
}

/* Reset image container - restore aspect ratio trick */
.view-grid .mk-product-item-info,
.tab-content:not(.view-list) .mk-product-item-info {
    flex: unset;
    max-width: 100%;
    position: relative;
    display: block;
    background: var(--fws-surface);
}

/* Reset image wrapper - restore padding-bottom aspect ratio */
.view-grid .mk-product-image,
.tab-content:not(.view-list) .mk-product-image {
    position: relative;
    overflow: hidden;
    background: var(--fws-surface);
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
    padding-bottom: 100%; /* Restore square aspect ratio */
    height: auto;
    min-height: 0;
}

/* Reset image link - restore absolute positioning */
.view-grid .mk-product-image a,
.tab-content:not(.view-list) .mk-product-image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Reset image */
.view-grid .mk-product-image img,
.tab-content:not(.view-list) .mk-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Reset content area */
.view-grid .mk-product-content,
.tab-content:not(.view-list) .mk-product-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center !important;
}

/* Show hover overlay in grid */
.view-grid .product-hover-action,
.tab-content:not(.view-list) .product-hover-action {
    /*display: block;*/
}


/* Hide hover overlay in list view */
.view-list .product-hover-action {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.view-list .mk-product-item:hover .product-hover-action {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
}

/* Turn off the image overlay in list view */
.view-list .mk-product-item .mk-product-item-info .mk-product-image:before,
.view-list .mk-product-item:hover .mk-product-item-info .mk-product-image:before {
    content: none !important;      /* removes the pseudo-element */
    background: none !important;   /* just in case */
    transform: none !important;
}

/* Hide hover action buttons in list view */
.view-list .mk-product-item .product-hover-action,
.view-list .mk-product-item:hover .product-hover-action {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
}

/* Hide list-only elements in grid */
.view-grid .mk-product-description,
.view-grid .mk-product-variants,
.view-grid .mk-product-actions,
.tab-content:not(.view-list) .mk-product-description,
.tab-content:not(.view-list) .mk-product-variants,
.tab-content:not(.view-list) .mk-product-actions {
    display: none !important;
}

/* Reset price alignment */
.view-grid .mk-product-price,
.tab-content:not(.view-list) .mk-product-price {
    justify-content: center;
}

/* Reset star rating */
.view-grid .star-rating,
.tab-content:not(.view-list) .star-rating {
    justify-content: center;
    margin: 0 auto;
}

/* Reset stock info */
.view-grid .stock-level-info,
.tab-content:not(.view-list) .stock-level-info {
    order: unset;
    margin-bottom: 0;
}

/* Select Options button (for products with variants) */
.view-list .btn-select-options {
    background-color: var(--fws-primary, #c41230);
    border-color: var(--fws-primary-alt, #c41230);
    color:  var(--fws-primary-alt, #c41230);
}

.view-list .btn-select-options:hover {
    background-color: var(--fws-secondary, #a30f28);
    border-color: var(--fws-secondary-alt, #a30f28);
    color: var(--fws-secondary-alt, #a30f28);
}

/* Notify Me button (out of stock) */
.view-list .btn-notify {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    margin:0;
}

.view-list .btn-notify:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* == Sort by and Page Count on mobiles ====*/
/* Mobile “bottom sheet” style for product toolbar dropdowns */
/* ==== services slideshow highlights =====*/

.services-text-tile
{
    padding: 10px 30px;
    max-width:300px;
}

.icon-wrapper svg {  
    width: 32px;
   height: 32px;
   display: block;
   color:var(--fws-primary);
}

.services-slideshow-highlights .icon-wrapper svg {
  width: 32px;
  height: 32px;
  display: block;
}

.services-slideshow-highlights .icon-strip-item { 
  height: 100%;
}
.services-slideshow-highlights .services-text-tile
{
  padding: 10px 25px;
}

.services-slideshow-highlights .owl-dots
{
    /*bottom:-20px;*/
}

.gray-img {
  filter: grayscale(100%);
}

/* === loyalty bar overrides == */

/* Loyalty bar expanded panel overrides */
.fws-info-bar2-list-item {
  background-color: var(--fws-surface) !important;
}

/* Rewards/loyalty page framework overrides */
.loyalty_intro .earn_action {
  background-color: var(--fws-surface-alt);
  color: var(--fws-text);
  border: 1px solid var(--fws-border);
}
.loyalty_intro .earn_action span.info {
  color: var(--fws-text-muted);
}
.loyalty_redeem .redeem_action {
  background-color: var(--fws-surface-alt);
  color: var(--fws-text);
  border: 1px solid var(--fws-border);
}
.loyalty_redeem .redeem_action span.info {
  color: var(--fws-text-muted);
}

/*== auto hide when any fws modal active == */

/* Hide during modal */
body.fwsapi-modal-active #fws-info-bar-container {
    display: none;
}

/* Hide during busy overlay */
body.fwsapi-busy-active #fws-info-bar-container {
    display: none;
}

/* Or combine them */
body.fwsapi-modal-active #fws-info-bar-container,
body.fwsapi-busy-active #fws-info-bar-container {
    display: none;
}

#fws-info-bar-container #fws-info-bar1 #fws-info-bar1-inner .fws-info-bar1-inner-item #fws-info-bar1-inner-item-readmore svg
{
    top:-3px !important;
}


/* ========== EXPERIMENTAL FEATURED PRODUCTS GRID ======*/
.mk-featured-grid-v2 .mk-product-item {
    background: var(--fws-surface);
    border: 1px solid var(--fws-border);
    border-radius: var(--button-radius);
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.mk-featured-grid-v2 .mk-product-item:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.mk-featured-grid-v2 .mk-product-item-info {
    position: relative;
}

.mk-featured-grid-v2 .mk-product-image-link {
    display: block;
}

.mk-featured-grid-v2 .mk-product-image {
    position: relative;
    overflow: hidden;
    background: var(--fws-surface-alt);
}

.mk-featured-grid-v2 .mk-product-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease-in-out;
}

/* Sticker Stack */
.mk-featured-grid-v2 .mk-sticker-stack {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.mk-featured-grid-v2 .mk-sticker {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-radius:var(--button-radius);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Sticker Types */
.mk-featured-grid-v2 .mk-sticker--sale,
.mk-featured-grid-v2 .mk-sticker--discount {
    background: #dc2626;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--new {
    background: #16a34a;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--popular {
    background: #dc143c;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--hot {
    background: #3498db;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--black,
.mk-featured-grid-v2 .mk-sticker--event {
    background: #1a1a1a;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--olive,
.mk-featured-grid-v2 .mk-sticker--info {
    background: #78716c;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--gold {
    background: #ca8a04;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--purple {
    background: #7c3aed;
    color: #fff;
}

.mk-featured-grid-v2 .mk-sticker--default {
    background: #6b7280;
    color: #fff;
}

/* Product Content */
.mk-featured-grid-v2 .mk-product-content {
    padding: 20px;
}

.mk-featured-grid-v2 .mk-product-category {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.mk-featured-grid-v2 .mk-product-category a {
    color: var(--fws-text-muted);
    text-decoration: none;
}

.mk-featured-grid-v2 .mk-product-category a:hover {
    color: var(--fws-text);
}

.mk-featured-grid-v2 .mk-product-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--fws-text);
    text-decoration: none;
    margin-bottom: 10px;
    line-height: 1.4;
}

.mk-featured-grid-v2 .mk-product-title:hover {
    color: var(--fws-primary);
}

.mk-featured-grid-v2 .mk-product-price-link {
    text-decoration: none;
    display: block;
}

.mk-featured-grid-v2 .mk-product-price {
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mk-featured-grid-v2 .mk-product-price .sales-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--fws-text);
}

.mk-featured-grid-v2 .mk-product-price .discount-price {
    font-size: 14px;
    color: var(--fws-text-muted);
}

/* Rating and Reviews */
.mk-featured-grid-v2 .mk-product-rating-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 10px;
}

.mk-featured-grid-v2 .star-rating {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.mk-featured-grid-v2 .star-rating::before {
    content: '★★★★★';
    background: linear-gradient(90deg, #ffc107 var(--percent), var(--fws-border) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mk-featured-grid-v2 .mk-review-count {
    font-size: 13px;
    color: var(--fws-text-muted);
}

.mk-featured-grid-v2 .mk-review-count:hover {
    color:var(--fws-primary);
}

/* Variants */
.mk-featured-grid-v2 .mk-product-variants {
    font-size: 13px;
    color:  var(--fws-primary);
    margin-bottom: 10px;
}

/* Stock Info */
.mk-featured-grid-v2 .stock-level-info {
    font-size: 13px;
    margin-bottom: 15px;
}

.mk-featured-grid-v2 .stock-level-info.instock {
    color: #28a745;
}

.mk-featured-grid-v2 .stock-level-info.lowstock {
    color: darkorange;
}

/* Action Buttons */
.mk-featured-grid-v2 .mk-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid var(--fws-border);
}

.mk-featured-grid-v2 .mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--fws-border);
    border-radius:var(--button-radius);
    background: var(--fws-primary);
    color: var(--fws-primary-alt);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mk-featured-grid-v2 .mk-btn:hover {
    background:var(--fws-secondary);
    border-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
}

.mk-featured-grid-v2 .mk-btn i {
    font-size: 14px;
}

.mk-featured-grid-v2 .mk-btn-cart {
    background: var(--fws-secondary);
    border-color: var(--fws-secondary);
    color: var(--fws-secondary-alt);
}

.mk-featured-grid-v2 .mk-btn-cart:hover {
    background: #218838;
    border-color: #218838;
}

.mk-featured-grid-v2 .mk-btn-notify {
    background: #d4913a;
    border-color: #d4913a;
    color: #fff;
}

.mk-featured-grid-v2 .mk-btn-notify:hover {
    background: #b87a2e;
    border-color: #b87a2e;
}

/* Wishlist Button States */
.mk-featured-grid-v2 .mk-btn-wishlist .heart-filled,
.mk-featured-grid-v2 .mk-btn-wishlist .wishlist-text-remove {
    display: none;
}

.mk-featured-grid-v2 .mk-btn-wishlist[data-wishlist-state="true"] .heart-empty,
.mk-featured-grid-v2 .mk-btn-wishlist[data-wishlist-state="true"] .wishlist-text-add {
    display: none;
}

.mk-featured-grid-v2 .mk-btn-wishlist[data-wishlist-state="true"] .heart-filled,
.mk-featured-grid-v2 .mk-btn-wishlist[data-wishlist-state="true"] .wishlist-text-remove {
    display: inline;
}

.mk-featured-grid-v2 .mk-btn-wishlist[data-wishlist-state="true"] {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* ========== END OF EXPERIMENTAL FEATURED PRODUCTS GRID ========= */


/*# sourceMappingURL=style.css.map */