/* ==========================================================================
   Gepa storefront theme
   Visual layer on top of style.css / skin-demo-14.css / demo-14.css.
   One definition per component. No markup or behaviour depends on this file.

   1. Tokens            9. Product box
   2. Base & type      10. Home sections
   3. Buttons          11. Product list & filters
   4. Forms            12. Product details
   5. Small components 13. Cart & checkout
   6. Header           14. Account area
   7. Mobile menu      15. Content pages
   8. Footer           16. Bottom nav, responsive, motion
   ========================================================================== */

/* 1. Tokens ================================================================ */
:root {
  --brand: #B30101;
  --brand-hover: #8f0101;
  --brand-soft: #fdf0f0;
  --brand-ring: rgba(179, 1, 1, .18);
  --bg: #ffffff;
  --surface: #ffffff;
  --tint: #faf8f7;
  --tint-2: #f4f2f1;
  --text: #1f2328;
  --text-muted: #6b7280;
  --border: #ece8e6;
  --hairline: #f1eeec;
  --success-bg: #ecfdf3;
  --success: #067647;
  --danger-bg: #fef3f2;
  --danger: #b42318;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-xs: 0 1px 2px rgba(31, 35, 40, .05);
  --shadow-sm: 0 2px 8px rgba(31, 35, 40, .06);
  --shadow-md: 0 8px 24px rgba(31, 35, 40, .08);
  --shadow-lg: 0 16px 40px rgba(31, 35, 40, .12);
  --shadow-brand: 0 6px 14px rgba(179, 1, 1, .25);
  --ease: .22s cubic-bezier(.4, 0, .2, 1);
  --icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM1 2v2h2l3.6 7.6-1.4 2.4c-.1.3-.2.6-.2.9 0 1.1.9 2 2 2h12v-2H7.4c-.1 0-.2-.1-.2-.2v-.1l.9-1.7h7.5c.8 0 1.4-.4 1.7-1l3.6-6.5A1 1 0 0 0 20 4H5.2l-.9-2H1z'/%3E%3C/svg%3E");
}

/* 2. Base & type =========================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page-wrapper { background: var(--bg); }
.main { background: transparent; }
a { transition: color var(--ease), background-color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
::selection { background: var(--brand-ring); }
img { border-radius: 0; }
img, video, iframe, svg { max-width: 100%; }
p { line-height: 1.7; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 2vw + 1.4rem, 3.6rem); font-weight: 600; }
h2, .title { font-size: clamp(2.1rem, 1.2vw + 1.5rem, 2.8rem); font-weight: 600; line-height: 1.25; }
h3 { font-size: 1.8rem; font-weight: 600; }
.title, .heading-title { letter-spacing: -.015em; }
.title-sm { font-size: 1.9rem; font-weight: 600; }
.widget-title, .widget-title a { font-size: 1.5rem; font-weight: 600; letter-spacing: 0; }

.mb-5 { margin-bottom: 3rem !important; }
.main .mb-5 { margin-bottom: 0 !important; height: 2.4rem; }
.page-content { padding-bottom: 4rem; }

/* 3. Buttons =============================================================== */
.btn { border-radius: 999px; font-weight: 500; transition: all var(--ease); }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(179, 1, 1, .22);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  box-shadow: 0 6px 16px rgba(179, 1, 1, .28);
  transform: translateY(-1px);
}
.btn-outline-primary, .btn-outline-primary-2, .btn-outline-dark, .btn-outline-darker,
.btn-outline-white, .btn-dark, .btn-secondary { border-radius: 999px; }
.btn-outline-primary:hover, .btn-outline-primary-2:hover { transform: translateY(-1px); }
.btn-link, .btn-link:hover { box-shadow: none; transform: none; }
.btn:disabled, .btn.disabled { opacity: .55; box-shadow: none; transform: none; }

/* 4. Forms ================================================================= */
.form-control, select.form-control, textarea.form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control, .custom-control-label { font-size: 1.45rem; }
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
  background-color: var(--surface);
}
.form-control::placeholder { color: #9aa0a6; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.select-custom select { border-radius: var(--radius-sm); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--brand); border-color: var(--brand); }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #fff inset !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* 5. Small components ====================================================== */
/* tabs / pills */
.nav-pills .nav-link { border-radius: 999px; transition: all var(--ease); }
.nav-pills .nav-link.active { background: var(--brand); color: #fff; }
.nav.nav-pills .nav-link.active,
.nav.nav-pills .nav-item.show .nav-link {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* breadcrumbs & page header */
.breadcrumb-nav { background: transparent; border-bottom: 0; }
.breadcrumb { background: transparent; font-size: 1.3rem; }
.breadcrumb a:hover { color: var(--brand); }
.page-header { padding: 3rem 0; }
.page-title { font-size: clamp(2.2rem, 1.6vw + 1.4rem, 3.2rem); }
.page-header .page-title { text-wrap: balance; }

/* pagination */
.pagination { flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pagination .page-item { margin: 0; }
.pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4rem; min-height: 4rem;
  margin: 0; padding: .4rem 1rem;
  border: 0; border-radius: 999px;
  transition: all var(--ease);
}
.pagination .page-item.active .page-link { background: var(--brand); color: #fff; box-shadow: 0 4px 10px rgba(179, 1, 1, .25); }
.pagination .page-link:hover { background: var(--brand-soft); color: var(--brand); }

/* carousels (owl) */
.owl-theme .owl-dots .owl-dot span { transition: all var(--ease); }
.owl-theme .owl-dots .owl-dot.active span { background: var(--brand); border-color: var(--brand); }
.carousel-equal-height .owl-stage { display: flex; }
.carousel-equal-height .owl-item { display: flex; }
.carousel-equal-height .owl-item > .product { width: 100%; }
.owl-carousel.carousel-with-shadow .owl-stage-outer { padding: 1rem .4rem 2rem; margin: -1rem -.4rem -2rem; }
/* arrows: round, only on hover, only when there is more to scroll */
.owl-carousel.owl-simple .owl-nav [class*='owl-'],
.carousel-with-shadow.owl-simple .owl-nav [class*='owl-'] {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  margin-top: -2rem;
  border: 0; border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  font-size: 1.8rem; line-height: 1;
  opacity: 0; pointer-events: none;
  transition: all var(--ease);
}
.owl-carousel.owl-simple .owl-nav .owl-prev { left: -1.2rem; }
.owl-carousel.owl-simple .owl-nav .owl-next { right: -1.2rem; }
.owl-carousel.owl-simple:hover .owl-nav [class*='owl-']:not(.disabled),
.owl-carousel.owl-simple .owl-nav [class*='owl-']:not(.disabled):focus-visible { opacity: 1; pointer-events: auto; }
.owl-carousel.owl-simple .owl-nav [class*='owl-']:not(.disabled):hover { background: var(--brand); color: #fff; transform: scale(1.06); }
.owl-carousel.owl-simple .owl-nav [class*='owl-'].disabled { opacity: 0; pointer-events: none; }
.owl-carousel.owl-simple .owl-nav [class*='owl-'] i { margin: 0; line-height: 1; }
.owl-carousel.owl-simple .owl-nav.disabled { display: none; }

/* floating layers: shadow only */
.dropdown-menu { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* modals */
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-backdrop.show { opacity: .45; }
.modal-body { padding: 3rem 3.2rem 3.2rem; }
.modal .close { transition: color var(--ease), transform var(--ease); }
.modal .close:hover { color: var(--brand); transform: rotate(90deg); }
.modal .form-control, .modal input:-webkit-autofill { background-color: #fff; }
.modal .custom-control-label::before { border-radius: 6px; }

/* sign-in / register form (modal + page) */
.form-box { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.modal .form-box { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.form-tab .nav.nav-pills { padding: .4rem; border: 0; border-radius: 999px; background: #f4f4f5; color: var(--text); }
.form-tab .nav.nav-pills .nav-item { margin: 0; }
.form-tab .nav.nav-pills .nav-link {
  padding: 1rem 1.6rem;
  border: 0; border-radius: 999px;
  color: var(--text);
  font-size: 1.6rem; font-weight: 500; letter-spacing: 0;
}
.form-tab .nav.nav-pills .nav-link:not(.active):hover { color: var(--brand); }
.form-tab .nav.nav-pills .nav-link::before, .form-tab .nav.nav-pills .nav-link::after { display: none; }
.form-tab .tab-content .tab-pane { padding-top: 2.2rem; }
.form-tab .form-footer { align-items: center; }

/* toast, scroll-top, cookie banner */
.notification__content { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
#scroll-top { border-radius: 999px; background: var(--brand); box-shadow: 0 6px 16px rgba(179, 1, 1, .3); transition: all var(--ease); }
#scroll-top:hover { background: var(--brand-hover); transform: translateY(-2px); }
.cookie-banner, #cookieConsent, .cookie-consent { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* generic cards & tables */
.card, .widget-filter, .sidebar .widget { border-radius: var(--radius); border-color: var(--border); }
.table { color: var(--text); }
.table thead th { border-bottom-color: var(--border); color: var(--text-muted); font-weight: 500; }
.table td { border-color: var(--border); }
.social-icon { border-radius: 999px; transition: all var(--ease); }
.social-icon:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* 6. Header ================================================================ */
.header, .header-14 { background: var(--surface); box-shadow: var(--shadow-sm); }
.header-middle { background: var(--surface); }

/* top bar (black) */
.header-top { padding: 0; border-bottom: 0; background: #111; font-size: 1.3rem; }
.header-top .container, .header-top .container-fluid {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.4rem;
}
.header-top a, .header-top .header-dropdown > span { color: rgba(255, 255, 255, .78); font-weight: 400; }
.header-top a:hover, .header-top a:focus { color: #fff; }
.header-top .header-left a { display: inline-flex; align-items: center; gap: .8rem; letter-spacing: .02em; }
.header-top .header-left a i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; margin: 0;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 1.2rem;
}
.header-top .top-menu, .header-top .menus { margin: 0; padding: 0; }
.header-top .menus { display: flex; align-items: center; gap: 1.2rem; }
.header-top .menus > li { margin: 0; display: flex; align-items: center; }
.header-top .menus .header-dropdown { margin: 0; }
.header-top .menus .header-dropdown > a,
.header-top .menus a.lang-switch {
  display: inline-flex; align-items: center;
  padding: .45rem 1.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 1.25rem;
  transition: background-color var(--ease);
}
.header-top .menus .header-dropdown:hover > a { background: rgba(255, 255, 255, .2); }
.header-top .menus a.lang-switch:hover { background: rgba(255, 255, 255, .22); }
.header-top .login > a {
  display: inline-flex; align-items: center;
  padding: .55rem 1.6rem;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 1.25rem; font-weight: 500;
  transition: background-color var(--ease), transform var(--ease);
}
.header-top .login > a:hover { background: #d10202; color: #fff; transform: translateY(-1px); }
.header-top a.visible-xs.mr-20 {
  padding: .35rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff; font-weight: 600;
}
.header-menu, .header-dropdown .header-menu { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.header-top .menus .header-dropdown .header-menu {
  min-width: 12rem; margin-top: .6rem; padding: .6rem;
  background: #fff; box-shadow: var(--shadow-lg);
}
.header-top .menus .header-dropdown .header-menu a {
  display: block; padding: .7rem 1.2rem;
  border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
}
.header-top .menus .header-dropdown .header-menu a:hover { background: var(--brand-soft); color: var(--brand); }

/* search */
.header-14 .header-search .header-search-wrapper,
.header-search-extended .header-search-wrapper {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.header-14 .header-search .header-search-wrapper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.header-search-wrapper .form-control,
.header-search-wrapper select { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.header-search-wrapper { display: flex; align-items: stretch; height: 4.8rem; }
.header-search-wrapper .select-custom,
.header-search-wrapper .form-control,
.header-search-wrapper select { height: 100%; min-height: 0; margin: 0; }
.header-search-wrapper .select-custom { flex: 0 0 auto; display: flex; align-items: center; }
.header-search-wrapper .form-control { flex: 1 1 auto; min-width: 0; }
.header-search-wrapper .btn {
  flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  height: auto; min-height: 0; margin: 0; padding: 0 3.6rem;
  border: 0; border-radius: 0; box-shadow: none; transform: none;
  font-size: 1.8rem;
}
.header-search-wrapper .btn i { font-size: 1.8rem; }

/* compare & cart icons */
.header-dropdown-link a, .cart-dropdown > a, .compare > a { transition: color var(--ease); }
.header-dropdown-link a:hover { color: var(--brand); }
.cart-count { border-radius: 999px; background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(179, 1, 1, .35); }

/* bottom bar (black): categories + main nav */
.header-bottom.sticky-header.fixed { box-shadow: var(--shadow-md); }
.header-14 .dropdown.category-dropdown .dropdown-toggle { background: var(--brand); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.category-dropdown .dropdown-menu { border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md); overflow: visible; }
.menu-vertical > li > a { font-size: 1.4rem; transition: background-color var(--ease), color var(--ease), padding var(--ease); }
.menu-vertical > li:hover > a { color: var(--brand); background: var(--brand-soft); }
.megamenu { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.main-nav .menu > li > a { font-size: 1.4rem; font-weight: 500; transition: color var(--ease); }
.main-nav .menu > li.active > a, .main-nav .menu > li:hover > a { color: var(--brand); }

/* 7. Mobile menu (light panel) ============================================= */
.mobile-menu-toggler { min-width: 44px; min-height: 44px; }
.mobile-menu-container {
  left: -32rem;
  max-width: 32rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 20px 20px 0;
  background: #fff;
  color: var(--text);
  font-size: 1.4rem;
  box-shadow: var(--shadow-lg);
}
.mmenu-active .mobile-menu-container { transform: translateX(32rem); }
.mobile-menu-wrapper { padding: 1.6rem 0 2.4rem; }
.mobile-menu-overlay { background: rgba(17, 17, 17, .5); backdrop-filter: blur(2px); }
.mobile-menu-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: #f4f4f5;
  color: var(--text) !important;
  font-size: 1.6rem;
  transition: background-color var(--ease), color var(--ease);
}
.mobile-menu-close:hover { background: var(--brand-soft); color: var(--brand) !important; }
.mobile-search { margin: 5.6rem 0 1.6rem; padding: 0 1.6rem; }
.mobile-search .form-control {
  flex: 1 1 auto;
  height: 4.4rem; max-width: none;
  padding: 0 1.6rem;
  border: 1.5px solid var(--border); border-right: 0;
  border-radius: 999px 0 0 999px;
  background: #fff; color: var(--text);
  font-size: 1.3rem;
}
.mobile-search .form-control::placeholder { color: #9aa0a6; }
.mobile-search .form-control:focus { border-color: var(--brand); background: #fff; color: var(--text); box-shadow: none; }
.mobile-search .btn {
  height: 4.4rem; min-width: 4.8rem; padding: 0 1rem;
  border-radius: 0 999px 999px 0;
  box-shadow: none; transform: none;
  font-size: 1.5rem;
}
.nav.nav-pills-mobile { margin: 0 1.6rem 1.2rem; padding: .4rem; border: 0; border-radius: 999px; background: #f4f4f5; }
.nav.nav-pills-mobile .nav-link {
  padding: 1rem 1.2rem;
  border: 0; border-radius: 999px;
  color: var(--text);
  font-size: 1.2rem; text-align: center;
}
.nav.nav-pills-mobile .nav-link:hover { color: var(--brand); }
.nav.nav-pills-mobile .nav-link.active { background: var(--brand); color: #fff; }
.mobile-menu li a {
  display: block;
  min-height: 4.8rem;
  padding: 1.4rem 5.2rem 1.4rem 2rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-size: 1.35rem; font-weight: 500; line-height: 1.35;
  text-transform: none;
  transition: color var(--ease);
}
.mobile-menu li a:hover, .mobile-menu li a:focus,
.mobile-menu li.open > a, .mobile-menu li.active > a { color: var(--brand); background: var(--brand-soft); }
.mobile-menu li ul { padding: .4rem 0; border-bottom: 1px solid var(--hairline); background: var(--tint); }
.mobile-menu li ul li a { min-height: 4.2rem; padding: 1.1rem 2rem 1.1rem 3.4rem; border: 0; font-size: 1.25rem; font-weight: 400; }
.mobile-menu li ul li a:not(:hover):not(:focus) { color: var(--text-muted); }
.mmenu-btn { right: .6rem; width: 4.4rem; height: 4.4rem; margin-top: -2.2rem; color: var(--text-muted); }
.mmenu-btn:hover, .mmenu-btn:focus, .open > a > .mmenu-btn { color: var(--brand); }
.mobile-menu-container .social-icons { display: flex; justify-content: center; gap: .8rem; margin-top: 1.6rem; padding: 0 1.6rem; }
.mobile-menu-container .social-icon { border: 1px solid var(--border); background: #fff; color: var(--text); }
.mobile-menu-container .social-icon:hover { border-color: var(--brand); background: var(--brand); color: #fff; }

/* 8. Footer ================================================================ */
.footer { background: #fff; border-top: 1px solid var(--border); font-size: 1.4rem; }
.footer-dark, .footer.footer-dark { background: #1f2024; }
.footer .widget-title { letter-spacing: .02em; }
.footer a { transition: color var(--ease); }
.footer .widget-list a { line-height: 2.1; }
.footer-bottom { border-top: 1px solid var(--border); }
.footer .widget-newsletter .form-control { border-radius: 999px 0 0 999px; }
.footer .widget-newsletter .btn { border-radius: 0 999px 999px 0; }
.cta, .cta-horizontal-box { border-radius: var(--radius-lg); }
.cta-horizontal-box { padding: 3rem; }
.cta.cta-horizontal.bg-dark { overflow: hidden; }
/* footer: its newsletter strip has all content commented out in the markup, so hide the empty dark bar */
.footer > .cta.cta-horizontal.bg-dark { display: none; }
.footer { border-top: 0; background: var(--tint); }
.footer-middle { padding: 4.8rem 0 3.2rem; }
.footer .widget-title { margin-bottom: 1.4rem; color: var(--text); font-size: 1.4rem; font-weight: 700; }
.footer .widget-list a, .footer .widget-about a { color: var(--text-muted); }
.footer .widget-list a:hover { color: var(--brand); }
.footer .widget-about-title { color: var(--text); font-size: 1.3rem; font-weight: 600; }
.footer .widget-about-info a[href^='tel'] { color: var(--brand); font-size: 2rem; font-weight: 700; }
.footer-bottom { border-top: 1px solid var(--border); background: var(--tint); }
.footer-copyright, .footer .social-label { color: var(--text-muted); font-size: 1.3rem; }
.footer-bottom .social-icon { border: 0; background: #fff; color: var(--text-muted); box-shadow: var(--shadow-xs); }
.footer-bottom .social-icon:hover { background: var(--brand); color: #fff; }

/* text pages (about, terms, policies): readable measure */
.page-content > .container > p, .page-content > .container > h1, .page-content > .container > h2,
.page-content > .container > h3, .page-content > .container > ul, .page-content > .container > ol {
  max-width: 82rem;
}
.page-content > .container > p, .page-content > .container > ul li, .page-content > .container > ol li {
  color: #3a3f45; font-size: 1.5rem; line-height: 1.85;
}
.cta-title { font-size: 2.4rem; }

/* 9. Product box =========================================================== */
.product, .product-7 {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.product:hover, .product-7:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 1.4rem;
  background: #fff;
  overflow: hidden;
}
.product-media > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-media img.product-image, .product-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.product:hover .product-media img { transform: scale(1.04); }
.product-body { padding: 1.2rem 1.6rem 1.8rem; }
.product-title, .product-title a { color: var(--text); font-weight: 500; line-height: 1.45; }
.product-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 4.2rem; margin-bottom: .8rem;
  font-size: 1.45rem;
}
.product-title a:hover { color: var(--brand); }
.product-price { margin-bottom: .6rem; color: var(--brand); font-size: 1.8rem; font-weight: 700; }
.product-price .new-price { color: var(--brand); font-weight: 600; }
.product-price .old-price { margin-left: .6rem; color: #a0a6ad; font-size: 1.35rem; font-weight: 400; }
.product-label {
  padding: .3rem 1rem;
  border-radius: 999px;
  font-size: 1.15rem; font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.product-label.label-out { background: #4b5563; color: #fff; }
.product-action .btn-product, .btn-product { border-radius: 0; transition: all var(--ease); }
.product-action .btn-product { padding: 1rem 1.2rem; background: var(--brand); color: #fff; font-size: 1.35rem; }
.product-action .btn-product:hover { background: var(--brand-hover); color: #fff; }
.btn-product-icon { border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.btn-product-icon:hover { color: var(--brand); }

/* the storefront card (.product-7): image, then title / price / rating */
.product.product-7 { display: flex; flex-direction: column; border-radius: 16px; text-align: left !important; }
.product-7 .product-media { position: relative; flex: 0 0 auto; padding: 1.6rem; background: #fff; }
.product-7 .product-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 1.4rem 1.8rem 1.8rem;
  border-top: 1px solid #f3efed;
}
.product-7 .product-title { order: 1; min-height: 3.7rem; margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 500; line-height: 1.4; }
.product-7 .product-price { order: 2; margin: auto 0 .4rem; font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.product-7 .product-price .old-price { margin-left: .8rem; color: #9aa0a6; font-size: 1.15rem; font-weight: 400; text-decoration: line-through; }
.product-7 .ratings-container { order: 3; margin: 0; }
.product-7 .ratings-container .ratings { margin: 0; font-size: 1.1rem; }
.product-7 .product-label { top: 1.2rem !important; left: 1.2rem; right: auto; padding: .35rem 1rem; border-radius: 999px; font-size: 1rem; font-weight: 600; }
.product-7 .product-label.label-out { background: #6b7280; color: #fff; }

/* add to cart: red pill that rises over the image on hover */
.product-7 .product-action {
  left: 0; right: 0; bottom: 1.4rem;
  display: flex; justify-content: center;
  width: auto; height: auto;
  background: transparent;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.product-7 .product-action::before, .product-7 .product-action::after { display: none !important; content: none !important; }
.product-7:hover .product-action,
.product-7:focus-within .product-action { opacity: 1; visibility: visible; transform: translateY(0); }
.product-7 .product-action .btn-product {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  flex: 0 0 auto;
  width: auto; min-width: 17rem; min-height: 4.2rem;
  padding: .9rem 2.4rem;
  border: 0; border-radius: 999px;
  background: var(--brand);
  color: #fff !important;
  font-size: 1.25rem; font-weight: 600; line-height: 1; text-align: center;
  box-shadow: var(--shadow-brand);
}
.product-7 .product-action .btn-product:hover { background: var(--brand-hover); color: #fff; }
.product-7 .product-action .btn-product > span {
  position: static; display: inline;
  width: auto; height: auto; margin: 0; padding: 0;
  background: none;
  color: #fff !important;
  font-size: 1.25rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
  opacity: 1; visibility: visible;
  transform: translateY(-.5px);
}
.product-7 .product-action .btn-product::before {
  content: "" !important;
  position: static;
  flex: 0 0 1.7rem;
  width: 1.7rem; height: 1.7rem;
  margin: 0;
  background: currentColor;
  color: #fff;
  font-family: inherit;
  -webkit-mask: var(--icon-cart) center / contain no-repeat;
          mask: var(--icon-cart) center / contain no-repeat;
  transform: none;
}
.product-7 .product-action .btn-product::after { display: none !important; content: none !important; }

/* compare: small round button, top right, on hover */
.product-7 .product-action-vertical {
  top: 1.2rem; right: 1.2rem; bottom: auto; left: auto;
  width: 3.4rem; height: 3.4rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}
.product-7:hover .product-action-vertical, .product-7:focus-within .product-action-vertical { opacity: 1; visibility: visible; }
.product-7 .btn-product-icon {
  width: 3.4rem; height: 3.4rem;
  border: 0 !important; border-radius: 50%;
  background: #fff; color: var(--text);
  box-shadow: 0 2px 8px rgba(31, 35, 40, .14);
  transition: background-color var(--ease), color var(--ease), transform var(--ease);
}
.product-7 .btn-product-icon:hover { background: var(--brand); color: #fff; transform: scale(1.06); }
.product-7 .btn-product-icon::before { color: inherit; }
.product-7 .btn-product-icon > span { display: none; }

/* sale countdown: white glass bar on the image — clock, d : h : m : s, live red seconds */
.product-7 .product-media .product-countdown {
  left: 1.2rem; right: 1.2rem; bottom: 1.4rem;
  width: auto; padding: .6rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(31, 35, 40, .14);
  color: var(--text);
  transition: opacity var(--ease);
}
.product-7:hover .product-countdown { opacity: 0; pointer-events: none; }
.product-7 .product-countdown .countdown-row {
  display: flex; align-items: center; justify-content: center; gap: .2rem;
  width: auto; text-align: center;
}
.product-7 .product-countdown .countdown-section { min-width: 3.2rem; }
.product-7 .product-countdown .countdown-row::after { display: none; }
.product-7 .product-countdown .countdown-section,
.product-7 .product-countdown .countdown-show4 .countdown-section {
  position: relative; float: none;
  display: flex; flex-direction: column; align-items: center;
  width: auto; min-width: 2.8rem;
  margin: 0; padding: 0 1.2rem 0 0;
  background: transparent;
}
.product-7 .product-countdown .countdown-section:last-child { padding-right: 0; }
.product-7 .product-countdown .countdown-section:not(:last-child)::after {
  content: ":";
  position: absolute; left: auto; right: 0; top: .1rem; width: 1.2rem; text-align: center;
  margin: 0; transform: none;
  color: #9a948f; font-size: 1.4rem; font-weight: 700; line-height: 1.6rem;
}
.product-7 .product-countdown .countdown-amount {
  margin: 0;
  color: var(--text);
  font-size: 1.5rem; font-weight: 700; line-height: 1.6rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.product-7 .product-countdown .countdown-period {
  position: static; display: block;
  margin-top: .2rem;
  color: var(--text-muted);
  font-size: .9rem; font-weight: 500; line-height: 1; letter-spacing: .02em;
}
.product-7 .product-countdown .countdown-section:last-child .countdown-amount { color: var(--brand); animation: cd-pulse 1s ease-in-out infinite; }
@keyframes cd-pulse { 50% { opacity: .45; } }

/* 10. Home sections ======================================================== */
/* slider & banners */
.intro-slider-container { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.intro-slide { border-radius: var(--radius-lg); }
.intro-title { font-size: clamp(2.2rem, 2.4vw, 4rem); letter-spacing: -.01em; }
.banner, .banner img, .entry, .entry-media { border-radius: var(--radius); }
.banner { margin-bottom: 2rem; overflow: hidden; box-shadow: var(--shadow-xs); transition: transform var(--ease), box-shadow var(--ease); }
.banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.banner-overlay, .banner-overlay img { border-radius: var(--radius-lg); }

/* brands strip */
.brands-carousel {
  margin-bottom: 1.6rem;
  padding: 1.6rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* generic section heading (red bar) */
.heading.heading-flex { align-items: center; margin-bottom: 1.8rem; }
.heading .title { position: relative; margin: 0; padding-left: 1.4rem; }
.heading .title::before {
  content: "";
  position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 4px; border-radius: 4px;
  background: var(--brand);
}
.heading-right a {
  padding: .6rem 1.4rem;
  border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 1.35rem; font-weight: 500;
}
.heading-right a:hover { background: var(--brand); color: #fff; }

/* product rows: tinted panel, title + fading hairline + "see all" pill */
.trending-products, .bg-lighter, .bg-lighter.trending-products {
  position: relative;
  margin: 0;
  padding: 2.6rem 2.8rem 2.2rem;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, #f6f2f1 0%, var(--tint) 100%) !important;
  box-shadow: none;
  overflow: hidden;
}
.trending-products .heading.heading-flex {
  display: flex; flex-direction: row !important; flex-wrap: nowrap;
  align-items: center; justify-content: space-between;
  width: 100%;
  margin: 0 0 2.2rem; padding: 0;
  text-align: left;
}
.trending-products .heading-left {
  display: flex; align-items: center;
  flex: 1 1 auto; min-width: 0;
  width: auto; max-width: none; padding: 0;
  text-align: left;
}
.trending-products .heading-left::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin: .2rem 0 0 2rem;
  background: linear-gradient(90deg, #ddd3cf, rgba(221, 211, 207, 0));
}
.trending-products .heading-right {
  flex: 0 0 auto;
  width: auto; max-width: none;
  margin: 0 0 0 1.6rem; padding: 0;
  white-space: nowrap;
}
.trending-products .heading .title {
  position: relative; display: inline-block;
  margin: 0; padding: 0;
  font-size: clamp(2.2rem, 1vw + 1.7rem, 2.8rem); font-weight: 700;
  line-height: 1.2; letter-spacing: -.01em;
}
.trending-products .heading .title::before, .trending-products .heading .title::after { display: none; }
.trending-products .heading-right a {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .9rem 1.8rem;
  border-radius: 999px;
  background: #fff; color: var(--text);
  font-size: 1.35rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(31, 35, 40, .08);
}
.trending-products .heading-right a::after {
  content: "";
  width: .8rem; height: .8rem;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--ease);
}
.trending-products .heading-right a:hover { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.trending-products .heading-right a:hover::after { transform: translateX(3px) rotate(45deg); }
.trending-products .tab-content-carousel { margin: 0; }
.trending-products .owl-carousel .owl-stage-outer { padding: .6rem .4rem 1rem; margin: -.6rem -.4rem -1rem; }
.trending-products .owl-dots { margin-top: 1.6rem; }
.trending-products .owl-dots .owl-dot span { width: .8rem; height: .8rem; margin: 0 .3rem; border: 0; background: #d9d3d0; transition: all var(--ease); }
.trending-products .owl-dots .owl-dot.active span { width: 2.4rem; border-radius: 999px; background: var(--brand); }

/* service highlights: 4 white cards, pink circle icons */
.icon-boxes-container { margin: 1rem 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.icon-boxes-container .container-fluid { padding-left: 0; padding-right: 0; }
.icon-boxes-container .row { margin: 0 -.8rem; }
.icon-boxes-container .row > [class*='col-'] { position: relative; margin-bottom: 1.6rem; padding: 0 .8rem; }
.icon-boxes-container .icon-box {
  display: flex; align-items: center; gap: 1.6rem;
  height: 100%; margin: 0; padding: 2rem 2.2rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none; transform: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.icon-boxes-container .icon-box:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.icon-box-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand) !important;
}
.icon-box-title { margin-bottom: .2rem; font-size: 1.5rem; font-weight: 600; }
.icon-boxes-container .icon-box-icon {
  position: relative; display: flex;
  flex: 0 0 5.4rem; width: 5.4rem; height: 5.4rem; margin: 0;
  box-shadow: none;
  font-size: 2.2rem;
  transition: background-color var(--ease), color var(--ease);
}
.icon-boxes-container .icon-box-icon i {
  position: static !important; display: block;
  width: auto; height: auto; margin: 0; padding: 0;
  color: inherit; font-size: 2.2rem; line-height: 1;
  transform: none;
}
.icon-boxes-container .icon-box:hover .icon-box-icon { background: var(--brand); color: #fff !important; }
.icon-boxes-container .icon-box-content { flex: 1; min-width: 0; padding: 0; }
.icon-boxes-container .icon-box-title { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 600; }
.icon-boxes-container .icon-box-content p { margin: 0; color: var(--text-muted); font-size: 1.3rem; }

/* news / blog cards: equal height, date badge on the image, whole card clickable */
.entry { transition: box-shadow var(--ease), transform var(--ease); }
.entry-title { font-size: 1.7rem; line-height: 1.4; }
.entry-media { overflow: hidden; }
.entry-media img { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.entry:hover .entry-media img { transform: scale(1.04); }
.read-more { color: var(--brand); font-weight: 500; }
.entry.entry-grid {
  position: relative;
  display: flex; flex-direction: column;
  height: calc(100% - 3rem);
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
.entry.entry-grid:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-4px); }
.entry-grid .entry-media {
  position: relative; flex: 0 0 auto;
  aspect-ratio: 16 / 11;
  margin: 0; border-radius: 0;
  background: #f4f4f5;
  overflow: hidden;
}
.entry-grid .entry-media a { display: block; width: 100%; height: 100%; }
.entry-grid .entry-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.entry-grid:hover .entry-media img { transform: scale(1.06); }
.entry-grid .entry-meta {
  position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2;
  display: flex; justify-content: flex-start;
  margin: 0; text-align: left;
}
.entry-grid .entry-meta a {
  display: inline-block;
  margin: 0; padding: .5rem 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--text);
  font-size: 1.2rem; font-weight: 600;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.entry-grid .entry-meta a:hover { background: var(--brand); color: #fff; box-shadow: none; }
.entry-grid .entry-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 2rem 2.4rem 2.2rem;
  text-align: left !important;
}
.entry-grid .entry-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 5.2rem; margin-bottom: 1rem;
  font-size: 1.9rem; font-weight: 600; line-height: 1.35;
}
.entry-grid .entry-title a { color: var(--text); }
.entry-grid .entry-title a:hover { color: var(--brand); }
.entry-grid .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.entry-grid .entry-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.entry-grid .entry-content p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
  color: var(--text-muted); font-size: 1.4rem; line-height: 1.65;
}
.entry-grid .entry-content .read-more { display: none; }

/* news section title: centred, short red underline */
hr.mb-5 { display: none; }
hr.mb-5 + h2.title {
  position: relative;
  margin: 5.5rem 0 3rem !important;
  padding: 0 0 1.8rem;
  font-size: clamp(2.4rem, 1.6vw + 1.6rem, 3.4rem);
  line-height: 1.25;
  text-align: center !important;
}
hr.mb-5 + h2.title::before {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 5.6rem; height: 4px;
  border-radius: 4px;
  background: var(--brand);
  transform: translateX(-50%);
}
hr.mb-5 + h2.title::after { display: none; }

/* 11. Product list & filters =============================================== */
.toolbox {
  margin-bottom: 2rem; padding: 1rem 1.6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
.toolbox-info { color: var(--text-muted); font-size: 1.35rem; }
.toolbox-sort label { color: var(--text-muted); font-size: 1.35rem; }
.toolbox .select-custom select,
.toolbox .select-custom .form-control { height: 3.8rem; padding: 0 3.2rem 0 1.4rem; border: 0; border-radius: 999px; background-color: var(--tint-2); font-size: 1.35rem; }

/* filter sidebar: one quiet panel, sections split by hairlines */
.sidebar-shop {
  padding: .4rem 1.8rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--tint);
}
.sidebar-shop .widget, .sidebar-filter .widget {
  margin: 0; padding: 1.4rem 0;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar-shop .widget:last-child { border-bottom: 0; }
.sidebar-shop .widget-clean {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 0;
}
.sidebar-shop .widget-clean label { margin: 0; color: var(--text); font-size: 1.5rem; font-weight: 600; }
.sidebar-shop .widget-clean a { color: var(--brand); font-size: 1.3rem; font-weight: 500; }
.sidebar-shop .widget-clean a:hover { text-decoration: underline; }
.sidebar-shop .widget-title { margin: 0; }
.sidebar-shop .widget-title a { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0; color: var(--text); font-size: 1.45rem; font-weight: 600; }
.sidebar-shop .widget-title a:hover { color: var(--brand); }
.sidebar-shop .widget-body { padding-top: 1rem; }
.sidebar-shop .js-filter {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; min-height: 4.4rem; margin: 1.2rem 0 .4rem !important;
  border: 0;
  background: var(--brand); color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.sidebar-shop .js-filter:hover { background: var(--brand-hover); color: #fff; }
.filter-item { margin-bottom: .6rem; }
.filter-items .custom-control-label { padding: .2rem 0; color: var(--text); font-size: 1.4rem; }
.filter-items .custom-control-label::before { border: 1.5px solid #cfc7c3; border-radius: 5px; background: #fff; }
.filter-items-count .filter-item a { color: var(--text); font-size: 1.4rem; }
.filter-items-count .filter-item a:hover, .filter-items-count .filter-item.active a { color: var(--brand); }
/* price range */
.noUi-target { border: 0; border-radius: 999px; background: #e7e1de; box-shadow: none; }
.noUi-horizontal { height: 4px; }
.noUi-connect { background: var(--brand); }
.noUi-horizontal .noUi-handle { top: -8px; width: 20px; height: 20px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); }
.noUi-handle::before, .noUi-handle::after { display: none; }
.price-slider-input-group .form-control, .filter-price .form-control { height: 3.8rem; border-radius: var(--radius-sm); text-align: center; }

/* filter checkboxes: box sits left of the label, never on top of it */
.sidebar-shop .filter-item .custom-control { position: relative; min-height: 2.4rem; padding: 0 0 0 3rem; }
.sidebar-shop .filter-item .custom-control-label { display: block; margin: 0; padding: .2rem 0; cursor: pointer; line-height: 1.5; }
.sidebar-shop .filter-item .custom-control-label::before,
.sidebar-shop .filter-item .custom-control-label::after { left: 0; top: .2rem; width: 1.9rem; height: 1.9rem; }
.sidebar-shop .filter-item .custom-control-input { left: 0; top: .2rem; width: 1.9rem; height: 1.9rem; }
.sidebar-shop .filter-item .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--brand); background: var(--brand); }
.sidebar-shop .filter-items-count .filter-item a { display: block; padding: .5rem 0 .5rem .2rem; }
.sidebar-shop .widget-body { padding-left: 0; padding-right: 0; }

/* price range: slim track, round handles, two compact number fields */
.filter-price { padding: 1rem .8rem 0; }
.noUi-target { height: 4px; border: 0; background: #e7e1de !important; box-shadow: none; }
.noUi-connects { height: 4px; border-radius: 999px; background: #e7e1de; }
.noUi-connect, .noUi-target .noUi-connect { height: 4px; background: var(--brand) !important; }
.noUi-horizontal .noUi-handle { top: -8px; right: -10px; width: 20px; height: 20px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); cursor: grab; }
.filter-price .noUi-value, .filter-price .noUi-marker { display: none; }
/* the number fields already show both values; the floating labels only collided with the title and edges */
.filter-price .noUi-tooltip { display: none; }
.filter-price { padding: .6rem 1.2rem 0; }
.filter-price .noUi-touch-area { position: absolute; inset: -12px; }
.price-slider-input-group { margin-top: 2rem; }
.price-slider-input-group .input-spinner { align-items: center; height: 4rem; padding: .3rem; border-radius: 999px; background: var(--tint-2); }
.price-slider-input-group .input-spinner .form-control {
  flex: 1 1 auto; width: 100%; min-width: 0;
  height: 3.4rem; min-height: 0 !important; padding: 0;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  font-size: 1.3rem; line-height: 3.4rem; font-weight: 600; text-align: center;
}
.price-slider-input-group .input-spinner .btn-spinner {
  flex: 0 0 2.6rem; width: 2.6rem; min-width: 2.6rem !important; height: 2.6rem; min-height: 0;
  padding: 0; border-radius: 50% !important;
  background: #fff; color: var(--text);
}
.price-slider-input-group .input-spinner .btn-spinner i { font-size: 1rem; }
.price-slider-input-group .input-spinner { position: relative; padding: .3rem 3.1rem; }
.price-slider-input-group .input-spinner .input-group-prepend,
.price-slider-input-group .input-spinner .input-group-append { position: absolute; top: 50%; margin-top: -1.3rem; z-index: 2; }
.price-slider-input-group .input-spinner .input-group-prepend { left: .4rem; }
.price-slider-input-group .input-spinner .input-group-append { right: .4rem; }
.price-slider-input-group .input-spinner .btn-spinner:hover { background: var(--brand); color: #fff; }
.filter-price .filter-price-text, .filter-price > span, .filter-price-text { display: flex; justify-content: space-between; margin: 1.4rem 0 1rem; color: var(--text-muted); font-size: 1.3rem; }
.price-slider-input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.price-slider-input-group .input-group.input-spinner { width: 100%; max-width: none; min-width: 0; padding: .25rem; }
/* sizes for the − / + buttons live in the next block */
.price-slider-input-group .input-spinner .input-group-prepend,
.price-slider-input-group .input-spinner .input-group-append { flex: 0 0 auto; width: auto; }

/* the markup repeats "Filter:" + "Clear" at the bottom; one is enough */
.sidebar-shop .widget-clean.mt-2 { display: none; }
.sidebar-shop .js-filter + .widget-clean { display: none; }

.products .product { margin-bottom: 2rem; }

/* 12. Product details ====================================================== */
.product-details-top .product-gallery-item, .product-gallery img { border-radius: var(--radius); }
.product-details .product-title { font-size: clamp(2rem, 1vw + 1.5rem, 2.6rem); font-weight: 600; line-height: 1.3; }
.product-details .product-price { margin: 1.4rem 0 1.6rem; font-size: 2.8rem; font-weight: 700; letter-spacing: -.01em; }
.product-details .product-price .old-price { font-size: 1.6rem; }
.product-details .product-code p { margin-bottom: .2rem; color: var(--text-muted); font-size: 1.35rem; }
.product-details .product-code p a, .product-details .product-code p span { color: var(--text); font-weight: 600; }
/* stock-by-location select: soft pill with pin + chevron (the open list is drawn by the browser) */
.product-details .product-code select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: block;
  width: auto !important; min-width: 26rem; max-width: 100%;
  height: 4.4rem; min-height: 0 !important; margin-top: 1.2rem;
  padding: 0 4rem 0 4.2rem !important;
  border: 1.5px solid transparent; border-radius: 999px;
  background-color: var(--tint-2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B30101'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left 1.5rem center, right 1.5rem center;
  background-size: 1.8rem 1.8rem, 1.6rem 1.6rem;
  color: var(--text);
  font-size: 1.4rem; font-weight: 500; line-height: 4.1rem;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.product-details .product-code select.form-control:hover { background-color: #ece8e6; }
.product-details .product-code select.form-control:focus { border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 4px var(--brand-ring); outline: none; }
.product-details .product-code select.form-control option { padding: 1rem; background: #fff; color: var(--text); font-size: 1.4rem; }
@media (max-width: 575.98px) { .product-details .product-code select.form-control { width: 100% !important; min-width: 0; } }
.product-details .ratings-text { color: var(--text-muted); }

/* buy box: quantity stepper + big add-to-cart, secondary links underneath */
.details-filter-row { align-items: center; margin-bottom: 1.6rem; }
.details-filter-row > label { color: var(--text-muted); font-size: 1.35rem; }
.input-spinner {
  position: relative;
  display: flex; flex-wrap: nowrap; align-items: center;
  width: 14.4rem; max-width: 100%; height: 4.4rem;
  padding: 0 4.4rem;
  border-radius: 999px;
  background: var(--tint-2);
}
.input-spinner .form-control {
  flex: 1 1 auto; width: 100%; min-width: 0;
  height: 4.4rem; min-height: 0 !important; padding: 0;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  font-size: 1.6rem; font-weight: 600; line-height: 4.4rem; text-align: center;
}
.input-spinner .input-group-prepend, .input-spinner .input-group-append {
  position: absolute; top: 50%; z-index: 2;
  width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0;
}
.input-spinner .input-group-prepend { left: .5rem; }
.input-spinner .input-group-append { right: .5rem; }
.input-spinner .btn-spinner {
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; min-width: 3.4rem !important; height: 3.4rem; min-height: 0; padding: 0;
  border: 0; border-radius: 50% !important;
  background: #fff; color: var(--text);
  box-shadow: var(--shadow-xs);
  transform: none;
}
.input-spinner .btn-spinner i { font-size: 1.2rem; }
.input-spinner .btn-spinner:hover { background: var(--brand); color: #fff; }
.product-details-action { flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.product-details-action .btn-product { border-radius: 999px; }
.product-details-action .btn-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  min-width: 24rem; min-height: 5rem; padding: 0 3rem;
  border: 0;
  background: var(--brand); color: #fff;
  font-size: 1.5rem; font-weight: 600;
  box-shadow: var(--shadow-brand);
  transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.product-details-action .btn-cart.white-bg { background-color: var(--brand) !important; } /* base theme forces white with !important */
.product-details-action .btn-cart span, .product-details-action .btn-cart::before { color: #fff; }
.product-details-action .btn-cart:hover { background: var(--brand-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(179, 1, 1, .3); }
.product-details-action .btn-cart.white-bg:hover { background-color: var(--brand-hover) !important; }
.product-details-action .details-action-wrapper .btn-product.white-bg { background-color: transparent !important; }
.product-details-action .details-action-wrapper .brand-color,
.product-details-action .details-action-wrapper .brand-color span { color: var(--text-muted) !important; }
.product-details-action .details-action-wrapper .brand-color:hover,
.product-details-action .details-action-wrapper .brand-color:hover span { color: var(--brand) !important; }
.product-details-action .details-action-wrapper { margin: 0; }
.product-details-action .details-action-wrapper .btn-product {
  min-height: 0; padding: .6rem 0;
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem; font-weight: 500;
}
.product-details-action .details-action-wrapper .btn-product:hover,
.product-details-action .details-action-wrapper .btn-product:hover span { color: var(--brand); }
.product-details-footer { padding-top: 1.6rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 1.3rem; }

/* deal countdown on the product page: same language as on the cards */
.product-details .product-countdown {
  display: inline-block; margin: 0 0 2rem; padding: 1rem 1.6rem;
  border-radius: var(--radius);
  background: var(--tint);
}
.product-details .product-countdown .countdown-row { display: flex; align-items: center; width: auto; }
.product-details .product-countdown .countdown-row::after { display: none; }
.product-details .product-countdown .countdown-section,
.product-details .product-countdown .countdown-show4 .countdown-section {
  position: relative; float: none;
  display: flex; flex-direction: column; align-items: center;
  width: auto; min-width: 4.4rem; margin: 0; padding: 0 2.2rem 0 0;
  background: transparent;
}
.product-details .product-countdown .countdown-section:last-child { padding-right: 0; }
.product-details .product-countdown .countdown-section:not(:last-child)::after {
  content: ":";
  position: absolute; left: auto; right: 0; top: .1rem; width: 2.2rem; text-align: center;
  margin: 0; transform: none;
  color: #b9b2ae; font-size: 2rem; font-weight: 700; line-height: 2.8rem;
}
.product-details .product-countdown .countdown-amount { color: var(--text); font-size: 2.4rem; font-weight: 700; line-height: 2.8rem; font-variant-numeric: tabular-nums; }
.product-details .product-countdown .countdown-period { overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; width: auto; position: static; margin-top: .3rem; color: var(--text-muted); font-size: 1.1rem; font-weight: 500; line-height: 1; }
.product-details .product-countdown .countdown-section:last-child .countdown-amount { color: var(--brand); animation: cd-pulse 1s ease-in-out infinite; }

/* main image */
.product-gallery .product-main-image { border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.product-gallery .btn-product-gallery { border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); }
.product-image-gallery .product-gallery-item {
  border: 2px solid transparent; border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--ease);
}
.product-image-gallery .product-gallery-item.active,
.product-image-gallery .product-gallery-item:hover { border-color: var(--brand); }
.product-gallery-item img { border-radius: 0; }
/* thumbnails: small square chips, wrapping in a tidy row */
.product-image-gallery { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0 0; padding: 0; }
.product-image-gallery .product-gallery-item {
  flex: 0 0 7.2rem; width: 7.2rem; height: 7.2rem;
  margin: 0; padding: .4rem;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.product-image-gallery .product-gallery-item img { width: 100%; height: 100%; object-fit: contain; }
/* the base theme draws its own active-state lines with ::before/::after; ours is the single border above */
.product-image-gallery .product-gallery-item::before, .product-image-gallery .product-gallery-item::after { display: none !important; content: none !important; }
.product-image-gallery .product-gallery-item.active,
.product-image-gallery .product-gallery-item:hover { border-color: var(--brand); }
@media (max-width: 575.98px) {
  .product-image-gallery { gap: .6rem; }
  .product-image-gallery .product-gallery-item { flex-basis: 6rem; width: 6rem; height: 6rem; }
}
/* accordion cards (description, specifications) */
.card-box, .product-details-accordion .card {
  margin-bottom: 1.4rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
/* each accordion item is its own complete rounded card (the base theme joins them and drops the bottom border) */
.accordion.product-details-accordion .card.card-box,
.accordion.product-details-accordion .card.card-box:first-child,
.accordion.product-details-accordion .card.card-box:last-child {
  margin: 0 0 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
.accordion.product-details-accordion .card.card-box:last-child { margin-bottom: 0; }
.accordion.product-details-accordion .card.card-box:has(.collapse.show) { border-color: #e2dcd9; }
.card-box .collapse, .card-box .collapsing { background: var(--surface); }
.card-box .card-header { padding: 0; border-bottom: 0; background: var(--surface); }
.card-box .card-title a { cursor: pointer; }
.card-box .card-title { margin: 0; font-size: 1.6rem; }
.card-box .card-title a {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 1.8rem 2.2rem;
  color: var(--text); font-size: 1.6rem; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.card-box .card-title a:hover { color: var(--brand); }
.card-box .card-title a:not(.collapsed) { color: var(--text); }
/* replace the +/− marks with one chevron that turns when open */
.card-box .card-title a::before { display: none !important; }
.card-box .card-title a::after {
  content: "" !important; display: block !important;
  position: static !important;
  flex: 0 0 .9rem; width: .9rem; height: .9rem; margin: -.3rem .4rem 0 1rem;
  border: 0 !important;
  border-right: 2px solid var(--text-muted) !important; border-bottom: 2px solid var(--text-muted) !important;
  background: none !important;
  transform: rotate(45deg) !important;
  transition: transform var(--ease), border-color var(--ease);
}
.card-box .card-title a:not(.collapsed)::after { transform: rotate(-135deg) !important; margin-top: .4rem; border-color: var(--brand) !important; }
.card-box .card-title a:hover::after { border-color: var(--brand) !important; }
.card-box .collapse.show, .card-box .collapsing { border-top: 1px solid var(--hairline); }
.card-box .card-body { padding: 1.2rem 1.4rem 1.8rem; color: #3a3f45; font-size: 1.45rem; line-height: 1.8; }
.card-box .card-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.card-box .card-body table { width: 100%; }
.card-box .card-body p:last-child { margin-bottom: 0; }
/* specifications: label column + value column, zebra rows */
.product-desc-content p {
  display: grid; grid-template-columns: minmax(14rem, 38%) 1fr; gap: 1.6rem;
  margin: 0; padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500;
}
.product-desc-content p:nth-child(odd) { background: var(--tint); }
.product-desc-content p > span { display: block; width: auto; margin: 0; color: var(--text-muted); font-weight: 400; }
/* sticky add-to-cart bar */
.sticky-bar, .sticky-bar.sticky-bar-bottom {
  border-top: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -6px 24px rgba(31, 35, 40, .08);
}
/* hidden until the main add-to-cart button scrolls away (script in ProductDetails.cshtml adds .is-visible) */
.sticky-bar {
  transform: translateY(110%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility 0s linear .3s;
}
.sticky-bar.is-visible {
  transform: none;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility 0s;
}
.sticky-bar .product-title { font-size: 1.35rem; font-weight: 500; }
.sticky-bar .product-price { margin: 0 1.6rem 0 0; font-size: 1.8rem; font-weight: 700; }
.sticky-bar .product-details-action .btn-cart { min-width: 0; min-height: 4.4rem; padding: 0 2.2rem; font-size: 1.35rem; white-space: nowrap; }
.sticky-bar .product-details-action .btn-cart span { white-space: nowrap; }
.sticky-bar .product-media img { border-radius: var(--radius-sm); }

/* shipping-terms popup */
.shipping-modal-container { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.shipping-modal-title { font-size: 2rem; }

/* 13. Cart & checkout ====================================================== */
.table-wishlist, .table-cart, .table-summary {
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.summary {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
.cart-product-quantity .form-control { border-radius: 999px; }

/* cart page */
/* "print version" link: secondary pill button with a printer icon */
.cart > .container > a[href*='print'] {
  display: inline-flex; align-items: center; gap: .9rem;
  margin: 0 0 2rem; padding: 0 1.8rem;
  min-height: 4rem;
  border-radius: 999px;
  background: var(--tint-2); color: var(--text);
  font-size: 1.3rem; font-weight: 600; line-height: 1;
  transition: background-color var(--ease), color var(--ease);
}
.cart > .container > a[href*='print']::before {
  content: "";
  flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v4H7zM5 9h14a2 2 0 0 1 2 2v6h-4v4H7v-4H3v-6a2 2 0 0 1 2-2zm4 6v4h6v-4zm9-3.2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v4H7zM5 9h14a2 2 0 0 1 2 2v6h-4v4H7v-4H3v-6a2 2 0 0 1 2-2zm4 6v4h6v-4zm9-3.2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cart > .container > a[href*='print']:hover { background: #e9e5e3; color: var(--text); }
@media (max-width: 575.98px) { .cart > .container > a[href*='print'] { width: 100%; justify-content: center; } }
.cart .order-list__noentry {
  width: 100%; margin: 1rem 1.5rem 3rem; padding: 6rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--tint);
  color: var(--text-muted);
  font-size: 1.6rem; text-align: center;
}
.cart .order-list__noentry::before {
  content: "";
  display: block;
  width: 6.4rem; height: 6.4rem; margin: 0 auto 1.6rem;
  background: #d9d3d0;
  -webkit-mask: var(--icon-cart) center / contain no-repeat; mask: var(--icon-cart) center / contain no-repeat;
}
.cart .table-cart { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.cart .table-cart thead th {
  padding: 1.1rem 1.4rem;
  border: 0 !important;
  background: var(--tint);
  color: var(--text-muted);
  font-size: 1.2rem; font-weight: 500;
}
.cart .table-cart thead th:first-child { border-radius: 12px 0 0 12px; }
.cart .table-cart thead th:last-child { border-radius: 0 12px 12px 0; }
.cart .table-cart td { padding: 1.8rem 1.4rem; border: 0 !important; vertical-align: middle; }
.cart .table-cart tbody tr + tr td { border-top: 1px solid var(--hairline) !important; }
.cart .table-cart .product, .cart .table-cart .product:hover {
  display: flex; align-items: center; gap: 1.6rem;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  transform: none; overflow: visible;
}
.cart .table-cart .product-media {
  flex: 0 0 8rem; width: 8rem; height: 8rem;
  aspect-ratio: auto; margin: 0; padding: .6rem;
  border-radius: var(--radius); background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.cart .table-cart .product-media img { width: 100%; height: 100%; object-fit: contain; }
.cart .table-cart .product-title { display: block; -webkit-line-clamp: unset; min-height: 0; margin: 0; font-size: 1.45rem; font-weight: 500; line-height: 1.45; }
.cart .table-cart .price-col { color: var(--text-muted); font-size: 1.45rem; white-space: nowrap; }
.cart .table-cart .total-col { color: var(--text); font-size: 1.6rem; font-weight: 700; white-space: nowrap; }
/* cart quantity: one gray pill, flat gray buttons (no white discs), number in the middle */
.cart .cart-product-quantity { width: 12.8rem; max-width: 100%; }
.cart .cart-product-quantity .input-spinner {
  width: 100%; height: 4rem; padding: 0 3.8rem;
  border-radius: 999px; background: var(--tint-2);
}
.cart .cart-product-quantity .input-spinner .form-control,
.cart .cart-product-quantity .input-spinner .form-control:disabled {
  height: 4rem; padding: 0; border: 0; background: transparent !important; opacity: 1;
  font-size: 1.5rem; font-weight: 700; line-height: 4rem; color: var(--text);
}
.cart .cart-product-quantity .input-spinner .input-group-prepend,
.cart .cart-product-quantity .input-spinner .input-group-append { width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; }
.cart .cart-product-quantity .input-spinner .btn-spinner {
  width: 3.2rem; min-width: 3.2rem !important; height: 3.2rem;
  background: transparent; box-shadow: none; color: var(--text-muted);
}
.cart .cart-product-quantity .input-spinner .btn-spinner:hover { background: #e4dfdc; color: var(--text); }
.cart .cart-product-quantity .input-spinner .btn-spinner:active { background: #d9d3d0; }
.cart .table-cart .btn-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  transition: background-color var(--ease), color var(--ease);
}
.cart .table-cart .btn-remove:hover { background: var(--danger-bg); color: var(--danger); }
.cart .cart-bottom { border: 0; }

/* order summary: tinted card, delivery & payment as quiet option rows */
.summary.summary-cart {
  padding: 2.4rem;
  border: 0; border-radius: var(--radius-lg);
  background: var(--tint);
}
.summary-cart .summary-title {
  margin: 2.4rem 0 1.4rem; padding: 0;
  border: 0;
  color: var(--text);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0;
}
/* base theme sets .summary.summary-cart .summary-title { margin-bottom: 0 } — match its specificity so the gap below titles applies */
.summary.summary-cart .summary-title { margin: 2.8rem 0 1.6rem; line-height: 1.4; }
.summary.summary-cart .summary-title:first-child { margin-top: 0; }
.summary-cart .summary-title + .accordion-summary { margin-bottom: 0; }
.accordion-summary .card {
  margin-bottom: .8rem;
  border: 1.5px solid transparent; border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--ease);
}
.accordion-summary .card:has(.collapse.show) { border-color: transparent; background: #fff; box-shadow: 0 0 0 1.5px var(--text), var(--shadow-sm); }
.accordion-summary .card-header { padding: 0; border: 0; background: transparent; }
.accordion-summary .card-title a {
  display: block;
  padding: 1.3rem 1.6rem;
  color: var(--text);
  font-size: 1.4rem; font-weight: 600;
}
.accordion-summary .card-title a:not(.collapsed) { color: var(--text); }
.accordion-summary .card-title a { position: relative; padding-left: 4.6rem; }
.accordion-summary .card-title a::before {
  left: 1.6rem; top: 50%;
  width: 1.8rem; height: 1.8rem;
  border: 1.5px solid #cfc7c3;
  transform: translateY(-50%);
}
.accordion-summary .card-title a::after { left: 2.15rem; top: 50%; width: .7rem; height: .7rem; background-color: var(--text); transform: translateY(-50%); }
.accordion-summary .card-title a:not(.collapsed)::before { border-color: var(--text); }
.accordion-summary .card-body { padding: 0 1.6rem 1.4rem 4.6rem; }
.accordion-summary .card-body { color: var(--text-muted); font-size: 1.35rem; }
.accordion-summary .card-body .btn { min-height: 4.2rem; border-radius: var(--radius-sm); }
.accordion-summary .hint { margin-top: .8rem; color: var(--text-muted); font-size: 1.25rem; }
.summary-cart .table-summary { margin: 2.8rem 0 1.6rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.summary-cart .table-summary td,
.summary-cart .table-summary .summary-subtotal td { height: auto; padding: .7rem 0; border: 0 !important; color: var(--text-muted); font-size: 1.4rem; font-weight: 400; text-transform: none; }
.summary-cart .table-summary td:last-child { color: var(--text); text-align: right; white-space: nowrap; }
.summary-cart .table-summary tr:last-child td { padding-top: 1.4rem; border-top: 1px solid var(--border) !important; color: var(--text); font-size: 1.7rem; font-weight: 700; }
.summary-cart .table-summary tr:last-child td strong { color: var(--brand); font-size: 2rem; }
.summary-cart .btn-order {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 5rem; margin-top: .8rem;
  border: 0;
  background: var(--brand); color: #fff;
  font-size: 1.5rem; font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.summary-cart .btn-order:hover { background: var(--brand-hover); color: #fff; }
/* controls inside the selected option: calm fields instead of red outlines (red outlines read as errors) */
.summary-cart .accordion-summary .card-body .btn,
.summary-cart .accordion-summary .btn-order {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 4.4rem; margin-top: .8rem; padding: 0 1.4rem;
  border: 0; border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
  font-size: 1.35rem; font-weight: 500; text-align: left; text-transform: none;
  box-shadow: 0 0 0 1px rgba(31, 35, 40, .08);
}
.summary-cart .accordion-summary .card-body .dropdown > .btn::after {
  content: ""; flex: 0 0 .8rem; width: .8rem; height: .8rem; margin-left: 1rem;
  border: 0; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); margin-top: -.3rem;
}
.summary-cart .accordion-summary .card-body .btn:hover { background: #fff; color: var(--text); box-shadow: 0 0 0 1.5px var(--text); }
.summary-cart .accordion-summary a.btn-order { justify-content: center; color: var(--text); font-weight: 600; background: var(--tint-2); box-shadow: none; }
.summary-cart .accordion-summary a.btn-order:hover { background: #e9e5e3; box-shadow: none; }
.accordion-summary .dropdown-menu { width: 100%; padding: .6rem; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.accordion-summary .dropdown-item { padding: .9rem 1.2rem; border-radius: var(--radius-sm); font-size: 1.35rem; white-space: normal; }
.accordion-summary .dropdown-item:hover { background: var(--tint-2); color: var(--text); }
.cart aside .btn-outline-dark-2 {
  min-height: 4.6rem;
  border: 0;
  background: transparent; color: var(--text-muted);
  font-weight: 500;
}
.cart aside .btn-outline-dark-2:hover { background: var(--tint-2); color: var(--text); }
.summary-cart .alert { border: 0; border-radius: var(--radius); }
.summary-cart .alert:empty { display: none; }
.summary-cart .alert-success { background: var(--success-bg); color: var(--success); }
.summary-cart .alert-danger { background: var(--danger-bg); color: var(--danger); }

/* 14. Account area ========================================================= */
.page-content:has(.dashboard) { margin-bottom: 0; padding-top: 2.4rem; background: #f7f5f4; }
.dashboard .tab-content { max-width: 100%; padding: 0; border: 0; }
.dashboard > .container > .row > [class*='col-md-8'] > .tab-content { border: 0; background: #fff; box-shadow: none; }
.dashboard .tab-content hr { display: none; }

/* side menu */
.nav-dashboard {
  flex-wrap: nowrap;
  margin: 0 !important;
  border: 0; box-shadow: none;
  background: #fff;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-dashboard::-webkit-scrollbar { display: none; }
.nav-dashboard .nav-item { margin: 0 !important; }
.nav-dashboard .nav-link {
  display: flex; align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}
.nav-dashboard .nav-link.active { color: var(--brand); font-weight: 600; }
.nav-dashboard .nav-link.fwb { color: var(--danger); }
.nav-dashboard .nav-link[href$='/profile'] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E"); }
.nav-dashboard .nav-link[href$='/cart'] { --ic: var(--icon-cart); }
.nav-dashboard .nav-link[href$='/change-password'] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 1 1 6 0v3z'/%3E%3C/svg%3E"); }
.nav-dashboard .nav-link[href$='/my-orders'] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm7 1.5L18.5 9H13zM8 13h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E"); }
.nav-dashboard .nav-link[href$='/logout'] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5zm6.6 4.6L15.2 9l2 2H9v2h8.2l-2 2 1.4 1.4L21 12z'/%3E%3C/svg%3E"); }

/* forms (profile, change password) */
.dashboard .form .row { margin-left: -.8rem; margin-right: -.8rem; }
.dashboard .form .row > [class*='col-'] { margin-bottom: 2rem; padding: 0 .8rem; }
.dashboard .form .row.mt-2 { margin-top: 0 !important; }
.dashboard .form label:not(.custom-control-label) { display: block; margin: 0 0 .7rem; color: var(--text-muted); font-size: 1.3rem; font-weight: 500; }
.dashboard .form .form-control {
  height: 4.8rem; padding: 0 1.6rem;
  border: 1.5px solid transparent; border-radius: var(--radius);
  background: var(--tint-2); color: var(--text);
  font-size: 1.5rem;
}
.dashboard .form .form-control:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-ring); }
.dashboard .form .form-control:disabled, .dashboard .form .form-control[disabled] {
  border-color: transparent;
  background: var(--tint-2); color: var(--text-muted);
  opacity: .75; cursor: not-allowed;
}
.dashboard .form .form-control.has-error { border-color: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); }
.dashboard .form .custom-control { position: relative; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: #f7f5f4; }
.dashboard .form .custom-control .custom-control-label { display: block; margin-left: 0; padding-left: 3.4rem; color: var(--text); font-size: 1.4rem; }
.dashboard .form .custom-control-label::before, .dashboard .form .custom-control-label::after { left: 1.6rem; top: 1.45rem; width: 2rem; height: 2rem; }
.dashboard .form .custom-control-label::before { border: 1.5px solid #cfc7c3; border-radius: 6px; background: #fff; }
.dashboard .form .custom-control-input { left: 1.6rem; top: 1.45rem; }
.dashboard .form .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--brand); background: var(--brand); }
/* result message: hidden until it has a state */
.dashboard .form .alert { height: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius); font-size: 1.4rem; overflow: hidden; }
.dashboard .form .alert.alert-success, .dashboard .form .alert.alert-danger { height: auto; margin: 2rem 0 0; padding: 1.2rem 1.6rem; }
.dashboard .form .alert-success { background: var(--success-bg); color: var(--success); }
.dashboard .form .alert-danger { background: var(--danger-bg); color: var(--danger); }
.dashboard .form > .btn, .dashboard .form button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  min-width: 20rem; min-height: 4.8rem;
  margin: 2.6rem 0 0; padding: 0 3rem;
  border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 1.5rem; font-weight: 600;
  box-shadow: 0 8px 18px rgba(179, 1, 1, .25);
}
.dashboard .form > .btn:hover, .dashboard .form button[type=submit]:hover { background: var(--brand-hover); color: #fff; transform: translateY(-1px); }

/* orders list: flat zebra rows */
.dashboard .table-orders {
  width: 100%; margin-top: 0;
  border: 0 !important; border-collapse: separate; border-spacing: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  overflow: hidden;
}
.table-orders thead th {
  padding: 0 1.4rem 1rem;
  border: 0;
  background: transparent; color: var(--text-muted);
  font-size: 1.2rem; font-weight: 500; letter-spacing: .03em;
}
.order-list__row { border: 0; transition: background-color var(--ease); }
.order-list__row:nth-child(even) { background: transparent; }
.order-list__row:nth-child(odd) { background: var(--tint); }
.order-list__row:hover { background: var(--brand-soft); }
.order-list__row td { padding: 1.5rem 1.4rem; border: 0 !important; vertical-align: middle; }
.order-list__row td:first-child { border-radius: 12px 0 0 12px; }
.order-list__row td:last-child { border-radius: 0 12px 12px 0; text-align: right; }
.table-orders td:nth-child(3) { white-space: nowrap; }
.order-list__row .btn-details {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-weight: 500;
}
.order-list__row .btn-details:hover { background: var(--brand); color: #fff; }

/* order details */
.dashboard .tab-content h5 { margin: 0 0 1.2rem; font-size: 1.8rem; }
.dashboard .tab-content > .row { margin-bottom: 2.4rem; }
.dashboard .tab-content > .row p, .dashboard .tab-content > .row li { margin-bottom: .6rem; line-height: 1.6; }
.dashboard .table-cart, .dashboard .table-summary { border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; }
.dashboard .table-cart thead th { padding: 1.1rem 1.4rem; border: 0 !important; background: var(--tint); color: var(--text-muted); font-size: 1.2rem; font-weight: 500; }
.dashboard .table-cart thead th:first-child { border-radius: 12px 0 0 12px; }
.dashboard .table-cart thead th:last-child { border-radius: 0 12px 12px 0; }
.dashboard .table-cart td { padding: 1.4rem; border: 0 !important; vertical-align: middle; }
.dashboard .table-cart tbody tr + tr td { border-top: 1px solid var(--hairline) !important; }
.dashboard .table-cart .product, .dashboard .table-cart .product:hover {
  display: flex; align-items: center; gap: 1.4rem;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  transform: none; overflow: visible;
}
.dashboard .table-cart .product-media {
  flex: 0 0 6.4rem; width: 6.4rem; height: 6.4rem;
  aspect-ratio: auto; padding: 0;
  border-radius: 10px; background: #fff;
  overflow: hidden;
}
.dashboard .table-cart .product-media img { width: 100%; height: 100%; object-fit: contain; }
.dashboard .table-cart .product-title { display: block; -webkit-line-clamp: unset; min-height: 0; margin: 0; font-size: 1.45rem; font-weight: 500; }
.dashboard .table-summary td, .dashboard .table-summary th { padding: .8rem 0; border: 0 !important; }
.dashboard .cart-bottom { padding-top: 1rem; border: 0; }
.dashboard .cart-bottom.order-buttons { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.6rem; }
.dashboard .cart-bottom .btn { border: 0; border-radius: 999px; background: var(--tint-2); color: var(--text); box-shadow: none; }
.dashboard .cart-bottom .btn:hover { background: var(--brand-soft); color: var(--brand); }
.dashboard .cart-bottom .js-cancel-order { color: var(--danger); }
.dashboard .cart-bottom .js-cancel-order:hover { background: var(--danger-bg); color: var(--danger); }

/* desktop & tablet: icon menu on the left, content card on the right */
@media (min-width: 768px) {
  .dashboard > .container > .row { display: grid; grid-template-columns: 27rem minmax(0, 1fr); gap: 2.4rem; align-items: start; margin: 0; }
  .dashboard > .container > .row > aside,
  .dashboard > .container > .row > [class*='col-md-8'] { flex: none; width: auto; max-width: none; margin: 0; padding: 0; }
  .dashboard > .container > .row > aside { position: sticky; top: 9rem; margin: 0; }
  .dashboard .tab-content aside { margin-bottom: 2.4rem; }
  .nav-dashboard { flex-direction: column !important; gap: .2rem; padding: 1rem; border-radius: var(--radius-lg); overflow: visible; }
  .nav-dashboard .nav-item { flex: none; width: 100%; min-width: 0; }
  .nav-dashboard .nav-link {
    position: relative;
    justify-content: flex-start; gap: 1.2rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius);
    box-shadow: none;
    font-size: 1.45rem; text-align: left;
  }
  .nav-dashboard .nav-link::before, .nav-dashboard .nav-link.active::before {
    content: "" !important;
    position: static; left: auto; top: auto;
    flex: 0 0 2rem; width: 2rem; height: 2rem;
    margin: 0;
    background: currentColor;
    opacity: .55;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
    transform: none;
    transition: opacity var(--ease);
  }
  .nav-dashboard .nav-link:hover { background: var(--tint); color: var(--brand); box-shadow: none; }
  .nav-dashboard .nav-link:hover::before, .nav-dashboard .nav-link.active::before { opacity: 1; }
  .nav-dashboard .nav-link.active { background: var(--brand-soft); box-shadow: none; }
  .nav-dashboard .nav-link.fwb:hover { background: var(--danger-bg); color: var(--danger); }
  .dashboard > .container > .row > [class*='col-md-8'] > .tab-content {
    padding: 3rem;
    border: 0; border-radius: var(--radius-lg);
    background: #fff; box-shadow: none;
  }
  .dashboard .tab-content .form { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .dashboard > .container > .row { grid-template-columns: 22rem minmax(0, 1fr); gap: 1.6rem; }
  .dashboard > .container > .row > [class*='col-md-8'] > .tab-content { padding: 2rem; }
}
/* phones: swipeable pill tabs on top, orders as cards */
@media (max-width: 767.98px) {
  .dashboard > .container > .row { display: block; margin: 0; }
  .dashboard > .container > .row > aside,
  .dashboard > .container > .row > [class*='col-md-8'] { flex: none; width: 100%; max-width: 100%; padding: 0; }
  .dashboard aside { margin: 0 0 2.4rem; }
  .dashboard .tab-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dashboard .tab-content .form {
    max-width: 82rem; margin: 0 auto; padding: 2rem 1.6rem 2.2rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: none;
  }
  .nav-dashboard { flex-direction: row !important; gap: .4rem; padding: .5rem; border-radius: 16px; background: #fff; overflow-x: auto; }
  .nav-dashboard .nav-item { flex: 0 0 auto; min-width: max-content; }
  .nav-dashboard .nav-link { justify-content: center; padding: 1rem 1.6rem; border: 0; border-radius: 999px; font-size: 1.35rem; text-align: center; }
  .nav-dashboard .nav-link:hover { background: rgba(255, 255, 255, .7); color: var(--brand); }
  .nav-dashboard .nav-link.active { border: 0; background: #fff; box-shadow: 0 1px 4px rgba(31, 35, 40, .14); }
  .nav-dashboard .nav-link::before { content: none; }
  .nav-dashboard .nav-link.fwb { color: var(--text-muted); }
  .nav-dashboard .nav-link.fwb:hover { color: #d92d20; }

  .dashboard .table-orders { display: block; }
  .table-orders thead { display: none; }
  .table-orders tbody { display: block; }
  .table-orders .order-list__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "num price" "date date" "st1 st2" "btn btn";
    gap: .4rem 1rem; align-items: center;
    margin: 0 0 1.2rem; padding: 1.6rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff !important;
  }
  .table-orders .order-list__row td { display: block; padding: 0; border: 0 !important; border-radius: 0; background: transparent; font-size: 1.4rem; text-align: left; white-space: normal; }
  .table-orders .order-list__row td::before { content: none !important; }
  .table-orders .order-list__row td:empty { display: none; }
  .table-orders .order-list__row td:nth-child(1) { grid-area: num; font-size: 1.6rem; font-weight: 700; }
  .table-orders .order-list__row td:nth-child(2) { grid-area: date; color: var(--text-muted); font-size: 1.3rem; }
  .table-orders .order-list__row td:nth-child(3) { grid-area: price; color: var(--brand); font-size: 1.6rem; font-weight: 700; text-align: right; }
  .table-orders .order-list__row td:nth-child(4) { grid-area: st1; margin-top: .8rem; }
  .table-orders .order-list__row td:nth-child(5) { grid-area: st2; margin-top: .8rem; color: var(--text-muted); text-align: right; }
  .table-orders .order-list__row td:nth-child(6) { grid-area: btn; margin-top: 1rem; text-align: left; }
  .table-orders .order-list__row .btn-details { justify-content: center; width: 100%; min-height: 4.4rem; }
}

/* 15. Content pages ======================================================== */
/* blog / news article: centred reading column */
.page-content article.entry:not(.entry-grid) { max-width: 82rem; margin: 0 auto; }
.page-content article.entry:not(.entry-grid) .entry-meta a {
  display: inline-block; padding: .4rem 1.2rem;
  border-radius: 999px;
  background: var(--tint-2); color: var(--text-muted);
  font-size: 1.25rem; box-shadow: none;
}
.page-content article.entry:not(.entry-grid) .entry-title { margin: 1.4rem 0 2.4rem; font-size: clamp(2.4rem, 1.6vw + 1.6rem, 3.4rem); font-weight: 700; line-height: 1.3; text-transform: none; }
.page-content article.entry:not(.entry-grid) .entry-content { color: #3a3f45; font-size: 1.6rem; line-height: 1.85; }
.page-content article.entry:not(.entry-grid) .entry-content h2 { margin: 3.2rem 0 1.2rem; font-size: 2.4rem; }
.page-content article.entry:not(.entry-grid) .entry-content h3 { margin: 2.8rem 0 1rem; font-size: 1.9rem; }
.page-content article.entry:not(.entry-grid) .entry-content hr { margin: 3.2rem 0; border-color: var(--border); }
.page-content article.entry:not(.entry-grid) .entry-content img { border-radius: var(--radius-lg); }
.page-content article.entry:not(.entry-grid) .entry-content ul { padding-left: 2rem; }
.page-content article.entry:not(.entry-grid) .entry-content li { margin-bottom: .8rem; }

/* contact form */
.page-content .contact-form, .page-content form.contact-form { max-width: 82rem; }
.page-content .form-control:not(.dashboard *) { min-height: 4.6rem; border-radius: var(--radius); }
.contact-box, .contact-info { border-radius: var(--radius); }
#map, .map, .contact-map { border-radius: var(--radius-lg); overflow: hidden; }

/* compare page: photo on top, add-to-cart pill underneath, calm table */
.table-comapre { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-comapre td { padding: 1.4rem 1.6rem; border: 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--text); font-size: 1.4rem; }
.table-comapre tr:last-child td { border-bottom: 0; }
.table-comapre tr > td:first-child { width: 16rem; min-width: 12rem; color: var(--text-muted); font-size: 1.3rem; font-weight: 500; }
.table-comapre tr:nth-child(even) > td { background: var(--tint); }
.table-comapre tr:nth-child(even) > td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.table-comapre tr:nth-child(even) > td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.table-comapre tr:first-child > td, .table-comapre tr:first-child > td:first-child { background: transparent; }
.table-comapre .product-price { color: var(--brand); font-size: 1.8rem; font-weight: 700; }
.table-comapre .img-center { text-align: center; }
.table-comapre .product-media {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.4rem;
  aspect-ratio: auto; height: auto;
  min-width: 20rem; max-width: 26rem; margin: 0 auto; padding: 1.2rem 1.2rem 1.6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
}
.table-comapre .product-media > a { width: 100%; height: 18rem; display: flex; align-items: center; justify-content: center; }
.table-comapre .product-media img { width: 100%; height: 100%; object-fit: contain; }
.table-comapre .product-media .btn-cart {
  position: static;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  flex: 0 0 auto; align-self: center;
  width: auto; min-width: 18rem; height: auto; min-height: 4.8rem; padding: 1.5rem 2.6rem;
  border: 0; border-radius: 999px;
  background: var(--brand); color: #fff !important;
  font-size: 1.3rem; font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: var(--shadow-brand);
  opacity: 1; visibility: visible; transform: none;
  transition: background-color var(--ease), transform var(--ease);
}
.table-comapre .product-media .btn-cart > span { position: static; display: inline; width: auto; height: auto; margin: 0; padding: 0; background: none; color: #fff !important; font-size: 1.3rem; font-weight: 600; line-height: 1; opacity: 1; visibility: visible; transform: none; white-space: nowrap; }
.table-comapre .product-media .btn-cart::before {
  content: ""; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; position: static; margin: 0;
  background: currentColor;
  -webkit-mask: var(--icon-cart) center / contain no-repeat; mask: var(--icon-cart) center / contain no-repeat;
}
.table-comapre .product-media .btn-cart::after { display: none; }
.table-comapre .product-media .btn-cart:hover { background: var(--brand-hover); transform: translateY(-1px); }
.table-comapre .product-media .product-label { top: 1.2rem; left: 1.2rem; }
.table-comapre .btn-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  transition: background-color var(--ease), color var(--ease);
}
.table-comapre .btn-remove:hover { background: var(--danger-bg); color: var(--danger); }

/* 16. Bottom nav (phones & tablets) ======================================== */
.bottom-nav { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (hover: none) {
  .owl-carousel.owl-simple .owl-nav { display: none; }
}

@media (max-width: 991.98px) {
  /* header: one row — menu, logo, compare, cart */
  .header-middle > .container-fluid > .row { flex-wrap: nowrap; align-items: center; }
  .header-middle .row > .col-auto { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
  .header-middle .header-middle-right { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
  .header-middle .header-middle-right > .row { flex-wrap: nowrap; margin: 0; }
  .header-middle .header-middle-right .col-lg-4 { flex: 1 1 auto; max-width: none; padding: 0; }
  .header-dropdown-link { gap: .2rem; }
  .header-dropdown-link .dropdown > a {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 4.4rem; min-height: 4.8rem; padding: 0 .4rem;
  }
  .compare-txt, .cart-txt { font-size: 1.2rem !important; }
  .header-top .header-left a { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0; }
  .header-top .menus a, .header-top a.lang-switch { display: inline-flex; align-items: center; min-height: 3.6rem; }

  /* touch targets */
  .breadcrumb-item a, .breadcrumb a { display: inline-block; padding: 1rem 0; }
  .footer .widget-list a, .footer .widget a { display: inline-block; padding: .9rem 0; }
  .footer .widget-list li { margin: 0; }
  .social-icon, .footer .social-icon, .social-icons .social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 4.2rem; width: 4.2rem !important; min-width: 4.2rem; height: 4.2rem !important;
    line-height: 4.2rem;
  }
  .owl-dots .owl-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; min-height: 2.4rem; }
  .btn-spinner, .btn-decrement, .btn-increment { flex: 0 0 4rem; width: 4rem; min-width: 4rem; min-height: 4.4rem; }
  .product-details-quantity .input-group, .details-filter-row .input-group { flex-wrap: nowrap; }
  .product-details-action a, .product-details-action .btn-product,
  .btn-product.btn-compare, .btn-product.white-bg { display: inline-flex; align-items: center; min-height: 4.4rem; }
  .ratings-text, .product-cat a, .product-details .product-cat a { display: inline-block; padding: .8rem 0; }
  .sidebar-toggler, .toolbox-left a { display: inline-flex; align-items: center; min-height: 4.4rem; }
  .heading-right a { display: inline-flex; align-items: center; min-height: 4rem; }
  .countdown-period { font-size: 1.05rem; }
  .product-countdown { font-size: 1.4rem; }
  .icon-boxes-container .icon-box { padding: 1.4rem 1.6rem; }

  /* filter drawer */
  .sidebar-filter { width: 32rem; left: -32rem; padding: 1.6rem 1.4rem 9rem; border-radius: 0 20px 20px 0; background: #fff; box-shadow: var(--shadow-lg); }
  .sidebar-filter-active .sidebar-filter { transform: translateX(32rem); }
  .sidebar-filter .sidebar-shop { padding: 0 .6rem; background: transparent; }
  .sidebar-filter .noUi-target { margin: 0 1.2rem; }
  .sidebar-filter .filter-price-text, .sidebar-filter .filter-price { padding: 0 .4rem; }
  .sidebar-filter-active .bottom-nav { display: none; }
  /* bottom navigation */
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(31, 35, 40, .1);
  }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-height: 5.4rem; padding: .4rem .2rem;
    border-radius: 14px;
    color: var(--text-muted);
    font-size: 1.05rem; font-weight: 500; line-height: 1.1; text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ease), background-color var(--ease);
  }
  .bottom-nav__item > span:not(.bottom-nav__icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav__item svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
  .bottom-nav__item:hover, .bottom-nav__item:focus { color: var(--brand); }
  .bottom-nav__item.is-active { background: var(--brand-soft); color: var(--brand); }
  .bottom-nav__item:active { background: var(--brand-soft); }
  .bottom-nav__icon { position: relative; display: inline-flex; }
  .bottom-nav__badge {
    position: absolute; top: -.6rem; right: -1rem;
    min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem;
    border-radius: 999px;
    background: var(--brand); color: #fff;
    font-size: 1rem; font-weight: 600; line-height: 1.7rem; text-align: center;
  }
  body { padding-bottom: calc(6.4rem + env(safe-area-inset-bottom)); }
  #scroll-top { bottom: calc(8rem + env(safe-area-inset-bottom)); }
  .sticky-bar.sticky-bar-bottom, .sticky-bar { bottom: calc(6.2rem + env(safe-area-inset-bottom)); }
  .mmenu-active .bottom-nav, .modal-open .bottom-nav { display: none; }
}

/* touch devices and phones: product card has no hover, so actions are always there */
@media (hover: none), (max-width: 767.98px) {
  .product-action { position: absolute; left: 0; right: 0; bottom: 0; opacity: 1; visibility: visible; transform: none; }
  .product-7 .product-action { left: auto; right: 1rem; bottom: 1rem; justify-content: flex-end; opacity: 1; visibility: visible; transform: none; }
  .product-7 .product-action .btn-product {
    flex: 0 0 4.4rem;
    width: 4.4rem; min-width: 0; height: 4.4rem; min-height: 0;
    padding: 0; gap: 0;
    font-size: 0;
    box-shadow: var(--shadow-brand);
  }
  .product-7 .product-action .btn-product > span { display: none; }
  .product-7 .product-action .btn-product::before { flex-basis: 2rem; width: 2rem; height: 2rem; margin: 0; font-size: 1.9rem; }
  .product-7 .product-action-vertical { opacity: 1; visibility: visible; transform: none; }
  .product-7 .btn-product-icon { border: 0; background: #f4f4f5; color: var(--text); box-shadow: none; }
  /* phones: the timer is a slim strip along the bottom edge of the photo area; the photo gets its own room above it */
  .product-7 .product-media:has(.product-countdown) { padding-bottom: 4.2rem; }
  .product-7 .product-media .product-countdown {
    left: 0; right: 0; bottom: 0 !important;
    height: 3.4rem; padding: 0 .8rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    background: var(--tint-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
  }
  .product-7 .product-media:has(.product-countdown) .product-action { bottom: 4.6rem; }
  .product-7 .product-countdown .countdown-row { gap: 0; }
  .product-7 .product-countdown .countdown-section,
  .product-7 .product-countdown .countdown-show4 .countdown-section { min-width: 2.4rem; padding-right: 1rem; }
  .product-7 .product-countdown .countdown-section:not(:last-child)::after { left: auto; right: 0; top: 0; width: 1rem; font-size: 1.3rem; line-height: 1.4rem; color: #8d8782; }
  .product-7 .product-countdown .countdown-amount { font-size: 1.3rem; line-height: 1.4rem; }
  .product-7 .product-countdown .countdown-period { display: none; }
  .product-7:hover .product-countdown { opacity: 1; }
}

@media (max-width: 767.98px) {
  body { font-size: 1.45rem; }
  .btn { min-height: 44px; }
  .form-control { min-height: 44px; }
  .modal-content { border-radius: var(--radius); }
  .product-body { padding: 1.1rem 1.1rem 1.4rem; }
  .product, .product-7 { border-radius: 10px; }
  .product-title { min-height: 3.9rem; font-size: 1.35rem; }
  .product-price { font-size: 1.6rem; }
  .intro-slider-container, .intro-slide, .banner-overlay, .banner-overlay img { border-radius: var(--radius); }
  .trending-products, .bg-lighter { padding: 1.8rem 1.2rem 1.4rem; border-radius: 18px; }
  .trending-products .heading.heading-flex { gap: 1rem; margin-bottom: 1.4rem; }
  .trending-products .heading .title { font-size: 2rem; }
  .trending-products .heading-right a { padding: .7rem 1.3rem; font-size: 1.25rem; }
  .main .mb-5 { height: 1.6rem; }
}

@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: 1.4rem; padding-right: 1.4rem; }
  .row { margin-left: -.7rem; margin-right: -.7rem; }
  .row > [class*='col'] { padding-left: .7rem; padding-right: .7rem; }
  .page-header { padding: 2.2rem 0; }
  .btn { white-space: normal; }
  .table-responsive, .dashboard .tab-content { -webkit-overflow-scrolling: touch; }
  .modal-dialog { margin: 1rem; }
  .modal-body { padding: 2.4rem 1.8rem; }
  .cta-horizontal-box { padding: 2rem 1.6rem; }
  .cookie-banner, #cookieConsent { left: 1rem; right: 1rem; bottom: 1rem; }
  #scroll-top { right: 1.2rem; }
  .header-middle .logo img { width: 11.5rem; height: auto; }
  .header-middle .mobile-menu-toggler { margin-right: .4rem; }
  .icon-boxes-container .row > [class*='col-'] { margin-bottom: 1rem; }

  /* product grid: two per row */
  .products > .row { margin-left: -.5rem; margin-right: -.5rem; }
  .products > .row > .col-12 { flex: 0 0 50%; max-width: 50%; padding-left: .5rem; padding-right: .5rem; }
  .products .product-price .old-price { display: block; margin: 0 0 0 .8rem; }
  .products .product-label { padding: .2rem .7rem; font-size: 1rem; }
  .products .product-countdown { font-size: 1.1rem; }
  .product-7 .product-media { padding: 1rem; }
  .product-7 .product-body { padding: 1rem 1.2rem 1.3rem; }
  .product-7 .product-title, .products .product-title { min-height: 3.4rem; margin-bottom: .8rem; font-size: 1.2rem; }
  .product-7 .product-price, .products .product-price { font-size: 1.45rem; }
  .product-7 .product-price .old-price, .products .product-price .old-price { font-size: 1.05rem; }
  .product-7 .product-action-vertical, .product-7 .btn-product-icon { width: 3.2rem; height: 3.2rem; }

  .trending-products .heading .title { font-size: 1.8rem; }
  .trending-products .heading-right a { padding: .6rem 1.1rem; font-size: 1.2rem; }
  .trending-products .heading-left::after { margin-left: 1rem; }
  .trending-products .heading-right { margin-left: 1rem; }

  .pagination { gap: .2rem; }
  .pagination .page-link { min-width: 3.4rem; min-height: 4rem; padding: .4rem .6rem; }
  .pagination .page-link-prev, .pagination .page-link-next { padding: .4rem .8rem; font-size: 0; }
  .pagination .page-link-prev i, .pagination .page-link-next i { margin: 0; font-size: 1.6rem; }

  /* specifications: label above value so long names never collide */
  .product-desc-content p { grid-template-columns: 1fr; gap: .2rem; padding: 1rem 1.2rem; }
  .product-desc-content p > span { font-size: 1.25rem; }
  /* product details buy box */
  .product-details-action { justify-content: center; gap: .4rem 2rem; }
  .product-details-action .btn-cart { width: 100%; }
  .input-spinner .btn-spinner { min-height: 0; }
  .input-spinner .input-group-prepend, .input-spinner .input-group-append { flex: 0 0 auto; width: auto; }
  .product-details .product-price { font-size: 2.4rem; }
  /* cart rows as compact cards */
  .cart .table-cart thead { display: none; }
  .cart .table-cart, .cart .table-cart tbody { display: block; }
  .cart .table-cart tbody tr,
  .cart .table-cart.table-mobile tbody tr {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "product product" "qty total";
    gap: 1.2rem 1rem; align-items: center;
    margin-bottom: 1.2rem; padding: 1.4rem;
    border-radius: var(--radius-lg);
    background: var(--tint);
  }
  .cart .table-cart tbody tr + tr td { border-top: 0 !important; }
  .cart .table-cart td { display: block; padding: 0; border: 0 !important; text-align: left; background: transparent; }
  .cart .table-cart td::before { content: none !important; }
  .cart .table-cart .product-col { grid-area: product; padding-right: 3.6rem; }
  .cart .table-cart .product-media { flex-basis: 6.4rem; width: 6.4rem; height: 6.4rem; }
  .cart .table-cart .product-title { font-size: 1.35rem; }
  .cart .table-cart tbody td.price-col { display: none !important; }
  .cart .table-cart .quantity-col { grid-area: qty; }
  .cart .table-cart .total-col { grid-area: total; text-align: right; font-size: 1.6rem; }
  .cart .table-cart .remove-col { position: absolute; top: .8rem; right: .8rem; }
  .cart .cart-product-quantity { margin: 0; }
  .summary.summary-cart { padding: 1.8rem 1.4rem; }
  /* product list toolbox: filter button + sort on one row, count underneath */
  .toolbox { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem 1rem; padding: 1rem 1.2rem; }
  .toolbox .toolbox-left.visible-xs { grid-column: 1; grid-row: 1; margin: 0; }
  .toolbox .toolbox-right { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; flex-direction: row; }
  .toolbox .toolbox-left:not(.visible-xs) { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .toolbox-sort { display: flex; align-items: center; gap: .6rem; margin: 0; }
  .toolbox-sort label { display: none; }
  .toolbox .select-custom { margin: 0; }
  .toolbox .select-custom select { max-width: 17rem; }
  .sidebar-toggler {
    gap: .6rem; padding: 0 1.4rem;
    border-radius: 999px;
    background: var(--text); color: #fff !important;
    font-weight: 600;
  }
  .sidebar-toggler i { color: #fff; }
  .toolbox-info { font-size: 1.25rem; }
  .dashboard .form > .btn, .dashboard .form button[type=submit] { width: 100%; }
  .dashboard .form .row > [class*='col-'] { margin-bottom: 1.6rem; }
}

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  .product-7 .product-countdown .countdown-section:last-child .countdown-amount { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .product:hover, .btn-primary:hover { transform: none; }
}