/* ============================
   Fonts (self-hosted)
   ============================ */
@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-500.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-600.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-700.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Romanian diacritics (ă, â, î, ș, ț) live in the latin-ext subset, which
   the latin-only files above don't cover — without this the browser fell
   back to a different font for just those glyphs, misaligning them (see
   the mangled "Economisește" rendering this fixes). */
@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-ext-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-ext-500.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-ext-600.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
   font-family: "Poppins";
   src: url("/core/fonts/poppins-v24-latin-ext-700.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================
   Variables
   ============================ */
:root {
   /* ---- Colors ---- */
   --color-primary: #12a488;
   --color-primary-dark: #0d7d68;
   --color-text: #1c1c1c;
   --color-muted: #767676;
   --color-border: #e6e6e6;
   --color-surface: #ffffff;
   --color-topbar-bg: #eaf7ef;
   --color-highlight-bg: #eaf3fe;
   --color-accent-terracotta: #e0836b;
   --color-accent-pink: #fbdfe4;
   --color-accent-pink-text: #c05c82;
   --color-accent-peach: #f3d9c8;
   --color-accent-blue: #dceefc;
   --color-accent-blue-text: #2f7dbd;
   --color-accent-indigo: #e3e2fb;
   --color-accent-indigo-text: #6a63c9;
   --color-accent-purple: #f0e2fb;
   --color-accent-purple-text: #9b5ec9;
   --color-card-border: #d2ecdf;
   --color-badge-pink: #ef5f86;
   --color-badge-dark: #3b4a52;
   --color-badge-orange: #f2994a;
   --color-badge-blue: #5b9bd5;
   --color-badge-yellow: #e8b923;
   --color-badge-red: #e5484d;
   --color-tab-inactive-bg: #ececec;
   --color-tab-active-bg: #fbead0;
   --color-star: #f5b301;
   --color-banner-pink-bg: #f7e9f0;
   --color-banner-blue-bg: #e7eef8;
   --color-banner-peach-bg: #faf1e3;
   --color-section-mint: #f3fbf5;
   --color-newsletter-bg: #b3c7bb;
   --color-page-hero-bg: #d7e7e0;

   /* ---- Typography ---- */
   --font-family-base: "Poppins", "Questrial", sans-serif;
   --font-size-xs: 12px;
   --font-size-sm: 13px;
   --font-size-base: 15px;
   --font-size-md: 16px;
   --font-size-lg: 17px;
   --font-size-xl: 28px;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* ---- Radius & shadows ---- */
   --radius: 8px;
   --shadow-sm: 0 2px 10px rgba(17, 17, 17, 0.06);
   --shadow-md: 0 12px 30px rgba(17, 17, 17, 0.12);
}

/* ============================
   Base
   ============================ */
html {
   /* Belt-and-suspenders with body's overflow-x below: some browsers still
      allow a small wheel/trackpad nudge past body's clip alone.
      `clip`, not `hidden`: setting overflow-x alone to anything but
      `visible` forces the browser to compute the untouched overflow-y as
      `auto` instead of `visible` (per spec, a visible/non-visible pairing
      isn't allowed), which would make html/body a scroll container in
      their own right instead of just following the viewport. `clip` is
      exempt from that pairing rule. */
   overflow-x: clip;
}

body {
   font-family: var(--font-family-base);
   color: var(--color-text);
   background: var(--color-surface);
   /* Safety net: off-screen decoration (tooltips positioned past a card's
      edge, etc.) should never produce a page-level horizontal scrollbar.
      Components that need their own horizontal scroll (sliders, wide
      tables) use overflow-x on their own container, which this doesn't
      affect. See the html rule above for why this is `clip`, not `hidden`. */
   overflow-x: clip;
}

a {
   color: inherit;
   text-decoration: none;
}

button {
   font-family: inherit;
   background: none;
   cursor: pointer;
}

img {
   max-width: 100%;
   display: block;
}

/* Native checkbox/radio tick color - browser default is a UA blue that
   doesn't track this site's own accent, most visibly on plain Bootstrap
   .form-check-input checkboxes (register.html's terms checkbox, etc.)
   sitting right next to green buttons/links everywhere else. */
input[type="checkbox"],
input[type="radio"] {
   accent-color: var(--color-primary);
}

/* ============================
   Site Header
   ============================ */
.site-header {
   background: var(--color-surface);
   box-shadow: var(--shadow-sm);
   position: relative;
   /* No z-index here on purpose: giving this a stacking context would trap
      every descendant behind it as one unit, including the topbar/logo
      rows that .drawer-overlay below needs to dim. .header-nav carries its
      own z-index instead, so just that row (Catalog toggle, nav links,
      hamburger) stays above the overlay while a drawer is open. */
}

/* ---- Topbar ---- */
.topbar {
   /* Light gray, not the shared --color-topbar-bg mint tint - that
      variable is reused all over (icon circles, badges, inputs...) so
      changing it here would recolor those too. */
   background: #f2f2f2;
   border-bottom: 1px solid var(--color-border);
}

.topbar-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   min-height: 42px;
}

.topbar-left,
.topbar-right {
   display: flex;
   align-items: center;
   gap: 24px;
   flex-shrink: 0;
}

.topbar-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: none;
   padding: 0;
   font-size: 13px;
   color: var(--color-muted);
   white-space: nowrap;
}

.topbar-link:hover {
   color: var(--color-primary);
}

.topbar-message {
   font-size: 13px;
   color: var(--color-text);
   text-align: center;
   flex: 1;
   min-width: 0;
}

.topbar-message-link {
   color: var(--color-primary);
   font-weight: 600;
   text-decoration: underline;
   margin-left: 4px;
}

.topbar-lang .dropdown-menu {
   min-width: 128px;
   font-size: 13px;
}

/* ---- Header main (logo / search / actions) ---- */
.header-main {
   padding: 20px 0;
}

.header-main-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 40px;
}

.brand-logo {
   display: inline-flex;
   flex-shrink: 0;
}

.brand-logo img {
   height: 32px;
   width: auto;
}

.header-search {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 12px;
   max-width: 720px;
   padding-bottom: 10px;
   border-bottom: 1.5px solid var(--color-text);
}

.header-search-categories .dropdown-toggle {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 0;
   border: none;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   white-space: nowrap;
}

.header-search-categories .dropdown-menu {
   font-size: var(--font-size-sm);
}

.header-search-divider {
   width: 1px;
   height: 18px;
   flex-shrink: 0;
   background: var(--color-border);
}

.header-search-btn {
   flex-shrink: 0;
   border: none;
   padding: 0;
   color: var(--color-muted);
   font-size: var(--font-size-lg);
   display: flex;
   align-items: center;
   justify-content: center;
}

.header-search-btn:hover {
   color: var(--color-primary);
}

.header-search-input {
   flex: 1;
   min-width: 0;
   border: none;
   padding: 0;
   font-size: var(--font-size-base);
   color: var(--color-text);
   background: var(--color-surface);
}

.header-search-input::placeholder {
   color: var(--color-muted);
}

.header-search-input:focus {
   outline: none;
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-shrink: 0;
}

.header-action {
   position: relative;
   display: inline-flex;
   font-size: 22px;
   color: var(--color-text);
}

.header-action:hover {
   color: var(--color-primary);
}

.header-action-count {
   position: absolute;
   top: -8px;
   right: -10px;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   border-radius: 999px;
   background: var(--color-primary);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
   line-height: 18px;
   text-align: center;
}

.header-action-tooltip {
   position: absolute;
   top: calc(100% + 10px);
   left: 50%;
   z-index: 3;
   padding: 4px 10px;
   border-radius: 4px;
   background: var(--color-text);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -4px);
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-action-tooltip::after {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 50%;
   border: 4px solid transparent;
   border-bottom-color: var(--color-text);
   transform: translateX(-50%);
}

.header-action:hover .header-action-tooltip,
.header-action:focus-visible .header-action-tooltip {
   opacity: 1;
   transform: translate(-50%, 0);
}

/* ---- Header nav ---- */
.header-nav {
   position: relative;
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
}

.header-nav.is-fixed {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   /* Swiper's own CSS gives .swiper/.swiper-wrapper `position: relative;
      z-index: 1`, and nothing between them and <body> forms a stacking
      context to contain that - so without an explicit z-index here, that
      z-index: 1 (an explicit value) outranks this fixed bar's implicit one
      (position: fixed alone paints above plain static content, but not
      above another element that has *any* explicit z-index), and carousel
      slides scroll on top of the header instead of correctly disappearing
      behind it. Also above .drawer-overlay (responsive.css, z-index: 150)
      on purpose: pinned to the top like this, it's the only header state
      where the Catalog toggle and hamburger button - the drawers' own
      open/close controls - would otherwise get dimmed along with the rest
      of the page, so it stays visible and tappable. Still well under
      .main-nav / .category-dropdown's own z-index: 300, so an open drawer
      still draws over this bar rather than the other way around. In the
      non-fixed state above, .header-nav sits mid-page between the topbar
      and the hero slider - z-index: 150+ there would float it as a
      disconnected white strip over whatever's dimmed below it, so it
      intentionally has no z-index and just dims with everything else. */
   z-index: 160;
   box-shadow: var(--shadow-md);
}

.header-nav-spacer {
   display: none;
}

.header-nav-spacer.is-active {
   display: block;
}

.header-nav-inner {
   display: flex;
   align-items: center;
   gap: 40px;
}

.browse-categories {
   position: relative;
}

.browse-categories-toggle {
   display: flex;
   align-items: center;
   gap: 8px;
   border: none;
   padding: 14px 0;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary);
   white-space: nowrap;
}

.browse-categories-toggle i {
   font-size: 18px;
}

.category-dropdown {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 50;
   width: 280px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
}

.browse-categories:hover>.category-dropdown,
.browse-categories.is-open>.category-dropdown {
   display: block;
}

.main-nav-toggle {
   display: none;
   margin-left: auto;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 6px 10px;
   font-size: 20px;
   color: var(--color-text);
}

.main-nav > ul {
   display: flex;
   align-items: center;
   gap: 32px;
}

.main-nav li {
   position: relative;
}

.main-nav a {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 15px 0;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
}

.main-nav a i {
   font-size: 10px;
   color: var(--color-muted);
}

.main-nav li:hover>a,
.main-nav li.is-active>a {
   color: var(--color-primary);
}

.main-nav li:hover>a i,
.main-nav li.is-active>a i {
   color: inherit;
}

.main-nav li.is-active::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 2px;
   background: var(--color-primary);
}

/* ---- Simple single-column nav dropdown ---- */
.nav-dropdown {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 60;
   min-width: 230px;
   /* Most .nav-dropdown menus are short, but the "Pagini" one lists every
      page in the project - caps it to a scrollable panel instead of
      spilling off the bottom of the screen. */
   max-height: 70vh;
   overflow-y: auto;
   padding: 8px 0;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
}

.main-nav li.has-dropdown:hover>.nav-dropdown,
.main-nav li.has-dropdown.is-open>.nav-dropdown {
   display: block;
}

.nav-dropdown li {
   position: relative;
}

.nav-dropdown a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 10px 20px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
   white-space: nowrap;
}

.nav-dropdown a i {
   font-size: 11px;
   color: var(--color-muted);
}

.nav-dropdown a:hover {
   background: var(--color-highlight-bg);
   color: var(--color-primary);
}

.nav-dropdown a:hover i {
   color: inherit;
}

/* ---- Mobile off-canvas drawer chrome ----
   Hidden here; shown once .main-nav / .category-dropdown / .shop-sidebar
   become slide-in drawers below the 991.98px breakpoint (see
   responsive.css). .main-nav-drawer-head and .category-dropdown-head are
   injected at runtime by initOffCanvasDrawers() in core/js/index.js;
   .shop-sidebar-drawer-head is static markup already in shop.html (it has
   no dynamic label to fill in), just hidden here the same way. */
.drawer-overlay,
.main-nav-drawer-head,
.category-dropdown-head,
.nav-dropdown-back,
.category-flyout-back,
.shop-sidebar-drawer-head {
   display: none;
}

.header-hotline {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-left: auto;
   flex-shrink: 0;
}

.header-hotline>i {
   font-size: 26px;
   color: var(--color-text);
}

.header-hotline-text {
   display: flex;
   flex-direction: column;
   line-height: 1.25;
}

.header-hotline-label {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
}

.header-hotline-number {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-primary);
}

/* ============================
   Breadcrumb (inner pages)
   ============================ */
.breadcrumb-bar {
   padding: 16px 0;
   background: var(--color-section-mint);
   border-bottom: 1px solid var(--color-border);
}

.breadcrumb-bar .breadcrumb {
   --bs-breadcrumb-divider: '\203A';
   --bs-breadcrumb-divider-color: var(--color-muted);
   --bs-breadcrumb-item-active-color: var(--color-muted);
   row-gap: 4px;
   margin-bottom: 0;
   font-size: var(--font-size-sm);
   color: var(--color-primary-dark);
}

.breadcrumb-bar .breadcrumb-item a:hover,
.breadcrumb-bar .breadcrumb-item a:focus-visible {
   text-decoration: underline;
}

/* ============================
   Compare (empty state)
   ============================ */
.compare-empty {
   padding: 40px 0 64px;
}

.compare-empty-title {
   margin-bottom: 20px;
   font-size: 28px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.compare-empty-box {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 220px;
   margin-bottom: 24px;
   padding: 24px;
   border-radius: var(--radius);
   background: var(--color-topbar-bg);
}

.compare-empty-box-icon {
   font-size: 22px;
   color: var(--color-muted);
}

.compare-empty-box-text {
   font-size: var(--font-size-md);
   color: var(--color-muted);
}

.compare-empty-btn {
   display: flex;
   width: fit-content;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   padding: 14px 32px;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   text-align: center;
   transition: background 0.2s ease;
}

.compare-empty-btn:hover,
.compare-empty-btn:focus-visible {
   background: var(--color-primary-dark);
   color: #fff;
}

/* ============================
   Compare (table state)
   ============================ */
.compare-table-section {
   padding: 24px 0 64px;
}

.compare-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin-bottom: 32px;
}

.compare-toolbar-tab {
   padding: 10px 20px;
   border: none;
   border-radius: 999px;
   background: transparent;
   color: var(--color-muted);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease, color 0.2s ease;
}

.compare-toolbar-tab:hover {
   color: var(--color-primary-dark);
}

.compare-toolbar-tab.is-active {
   background: var(--color-primary);
   color: #fff;
}

.compare-products {
   display: grid;
   grid-template-columns: 220px repeat(2, 1fr);
   gap: 24px;
   margin-bottom: 24px;
}

/* Prev/next navigation for the phone-width slider (see the XS breakpoint in
   responsive.css) - hidden by default since there's nothing to page through
   on the desktop grid, and JS hides it too when a section only has one
   card. Styled after .new-arrivals-swiper-btn. */
.compare-products-nav {
   display: none;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 32px;
}

.compare-products-nav-btn {
   width: 36px;
   height: 36px;
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease;
}

.compare-products-nav-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.compare-products-nav-btn:disabled {
   opacity: 0.4;
   pointer-events: none;
}

/* Three-item variant: one more product column than the default two-item grid,
   so both the product cards and the table body below need an extra column. */
.compare-table-section--triple .compare-products {
   grid-template-columns: 220px repeat(3, 1fr);
}

.compare-table-section--triple .compare-table td {
   width: calc((100% - 220px) / 3);
}

/* These cards only ever share the row with one other card (vs. 3-4 on the
   shop grid), so the media's usual 1:1 aspect-ratio makes it - and the whole
   card - way taller than it needs to be here. Cap it to a fixed height
   instead; object-fit: cover on the image already handles the crop. */
.compare-products .product-card-media {
   aspect-ratio: auto;
   height: 220px;
}

/* Remove-from-compare cross, mirrored off the product-card badge's top-left
   position (see .product-card-badge) so it sits in the opposite corner. */
.product-card-remove {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 2;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
   font-size: 14px;
   box-shadow: var(--shadow-sm);
   transition: background 0.2s ease, color 0.2s ease;
}

.product-card-remove:hover,
.product-card-remove:focus-visible {
   background: var(--color-badge-pink);
   color: #fff;
}

/* .product-card-media clips to its rounded corners (overflow: hidden), and
   this button sits right at its top-right corner - the tooltip's normal
   pop-up-above-and-centered behavior would have nowhere to go either way, so
   flip it to pop down (over the image) and right-align it to the button
   (extending left, over the image, instead of centering and getting half
   sliced off past the right edge). */
.product-card-remove .product-card-tooltip {
   top: calc(100% + 8px);
   bottom: auto;
   left: auto;
   right: 0;
   transform: translateY(-4px);
}

.product-card-remove .product-card-tooltip::after {
   top: auto;
   bottom: 100%;
   left: auto;
   right: 10px;
   transform: none;
   border-top-color: transparent;
   border-bottom-color: var(--color-text);
}

.product-card-remove:hover .product-card-tooltip,
.product-card-remove:focus-visible .product-card-tooltip {
   opacity: 1;
   transform: translateY(0);
}

.compare-table-wrap {
   overflow-x: auto;
   margin-bottom: 32px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
}

.compare-table {
   width: 100%;
   border-collapse: collapse;
}

.compare-table tr:nth-child(even) td {
   background: var(--color-section-mint);
}

.compare-table th,
.compare-table td {
   padding: 14px 16px;
   border-bottom: 1px solid var(--color-border);
   text-align: left;
   font-size: var(--font-size-sm);
   vertical-align: top;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
   border-bottom: none;
}

.compare-table th {
   width: 220px;
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.compare-table td {
   width: calc((100% - 220px) / 2);
   color: var(--color-text);
}

.compare-table td.is-empty {
   color: var(--color-muted);
}

.compare-check-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.compare-check-list li {
   display: flex;
   align-items: center;
   gap: 6px;
}

.compare-check-list i {
   color: var(--color-primary);
}

.compare-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
}

.compare-actions-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 28px;
   border: 1px solid var(--color-primary);
   border-radius: var(--radius);
   color: var(--color-primary-dark);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease;
}

.compare-actions-close:hover,
.compare-actions-close:focus-visible {
   background: var(--color-primary);
   color: #fff;
}

.compare-actions-clear {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 28px;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease;
}

.compare-actions-clear:hover,
.compare-actions-clear:focus-visible {
   background: var(--color-primary-dark);
}

/* ============================
   "Added to compare" modal (see initCompareToggle)
   ============================ */
.compare-added-modal .modal-content {
   border: none;
   border-radius: var(--radius);
}

.compare-added-modal .modal-header,
.compare-added-modal .modal-footer {
   border-color: var(--color-border);
}

.compare-added-modal .modal-title {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

/* The modal shows every item currently in the compare list, not just the
   one that was just clicked (see the getCompareList()/renderCompareModal()
   pair in initCompareToggle) - list-reset the <ul> and scroll it past a
   handful of rows instead of letting the modal grow indefinitely. */
.compare-added-modal-list {
   display: flex;
   flex-direction: column;
   max-height: 260px;
   margin: 0;
   padding: 0;
   overflow-y: auto;
   list-style: none;
}

.compare-added-modal-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid var(--color-border);
}

.compare-added-modal-item:last-child {
   border-bottom: none;
}

.compare-added-modal-item-img {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: var(--radius);
   object-fit: cover;
   background: #f2f2f2;
}

.compare-added-modal-item-name {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   color: var(--color-primary-dark);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   text-overflow: ellipsis;
}

.compare-added-modal-item-name:hover,
.compare-added-modal-item-name:focus-visible {
   text-decoration: underline;
}

.compare-added-modal-item-price {
   flex-shrink: 0;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   white-space: nowrap;
}

.compare-added-modal-item-remove {
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 50%;
   background: transparent;
   color: var(--color-muted);
   font-size: 12px;
   transition: background 0.2s ease, color 0.2s ease;
}

.compare-added-modal-item-remove:hover,
.compare-added-modal-item-remove:focus-visible {
   background: var(--color-badge-pink);
   color: #fff;
}

.compare-added-modal-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 24px;
   border: 1px solid var(--color-primary);
   border-radius: var(--radius);
   color: var(--color-primary-dark);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease;
}

.compare-added-modal-btn:hover,
.compare-added-modal-btn:focus-visible {
   background: var(--color-primary);
   color: #fff;
}

/* ============================
   Page hero (Contact, etc.)
   ============================ */
.page-hero {
   padding: 96px 0;
   background: var(--color-page-hero-bg);
   text-align: center;
}

.page-hero-inner {
   max-width: 700px;
   margin: 0 auto;
}

.page-hero-eyebrow {
   display: block;
   margin-bottom: 12px;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary-dark);
}

.page-hero-title {
   margin-bottom: 20px;
   font-size: 52px;
   font-weight: var(--font-weight-bold);
   line-height: 1.15;
   color: var(--color-text);
}

.page-hero-highlight {
   background-image: linear-gradient(var(--color-accent-peach) 0 0);
   background-repeat: no-repeat;
   background-size: 100% 0.3em;
   background-position: 0 88%;
}

.page-hero-text {
   margin-bottom: 32px;
   font-size: var(--font-size-base);
   line-height: 1.7;
   color: var(--color-muted);
}

.page-hero-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
}

.page-hero-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 32px;
   border: 1.5px solid var(--color-primary-dark);
   border-radius: var(--radius);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease;
}

.page-hero-btn--solid {
   background: var(--color-primary-dark);
   color: #fff;
}

.page-hero-btn--solid:hover,
.page-hero-btn--solid:focus-visible {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

.page-hero-btn--outline {
   background: transparent;
   color: var(--color-primary-dark);
}

.page-hero-btn--outline:hover,
.page-hero-btn--outline:focus-visible {
   background: var(--color-primary-dark);
   color: #fff;
}

/* ============================
   Contact map + locations
   ============================ */
.contact-map-section {
   padding: 40px 0 0;
}

.contact-map {
   width: 100%;
   height: 420px;
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-section-mint);
}

.contact-map iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
}

.contact-locations {
   padding: 56px 0 64px;
}

.contact-locations-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
}

.contact-location-title {
   margin-bottom: 16px;
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
}

.contact-location-address {
   margin-bottom: 12px;
   color: var(--color-text);
   line-height: 1.6;
}

.contact-location-line {
   margin-bottom: 6px;
   color: var(--color-text);
}

.contact-location-line a {
   color: var(--color-text);
}

.contact-location-line a:hover,
.contact-location-line a:focus-visible {
   color: var(--color-primary-dark);
}

.contact-location-label {
   font-weight: var(--font-weight-semibold);
   text-decoration: underline;
}

.contact-location-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-top: 16px;
   padding: 10px 24px;
   border: 1.5px solid var(--color-primary-dark);
   border-radius: var(--radius);
   color: var(--color-primary-dark);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease;
}

.contact-location-btn:hover,
.contact-location-btn:focus-visible {
   background: var(--color-primary-dark);
   color: #fff;
}

/* ============================
   Contact form
   ============================ */
.contact-form-section {
   padding: 64px 0 96px;
}

.contact-form-inner {
   max-width: 820px;
   margin: 0 auto;
}

.contact-form-title {
   margin-bottom: 8px;
   font-size: 36px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   text-align: center;
}

.contact-form-subtitle {
   margin-bottom: 40px;
   font-size: var(--font-size-base);
   color: var(--color-muted);
   text-align: center;
}

.contact-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-bottom: 20px;
}

.contact-form-row--full {
   grid-template-columns: 1fr;
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   padding: 14px 20px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   font-family: inherit;
   font-size: var(--font-size-base);
   color: var(--color-text);
   background: var(--color-surface);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
   color: var(--color-muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
   outline: none;
   border-color: var(--color-primary);
}

.contact-form textarea {
   min-height: 180px;
   resize: vertical;
}

.contact-form-actions {
   display: flex;
   justify-content: center;
   margin-top: 8px;
}

.contact-form-submit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 16px 44px;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary-dark);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease;
}

.contact-form-submit:hover,
.contact-form-submit:focus-visible {
   background: var(--color-primary);
}

/* ============================
   About: company intro
   ============================ */
.about-intro {
   padding: 64px 0;
}

.about-intro-inner {
   display: flex;
   align-items: center;
   gap: 48px;
}

.about-intro-content {
   flex: 1;
   min-width: 0;
}

.about-intro-eyebrow {
   display: block;
   margin-bottom: 12px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--color-primary-dark);
}

.about-intro-title {
   margin-bottom: 24px;
   font-size: 40px;
   font-weight: var(--font-weight-bold);
   line-height: 1.25;
   color: var(--color-text);
}

.about-intro-text {
   margin-bottom: 16px;
   font-size: var(--font-size-base);
   line-height: 1.7;
   color: var(--color-muted);
}

.about-intro-text:last-child {
   margin-bottom: 0;
}

.about-intro-media {
   display: flex;
   align-items: flex-start;
   gap: 24px;
   flex-shrink: 0;
}

.about-intro-photo {
   width: 270px;
   height: 300px;
   object-fit: cover;
   border-radius: var(--radius);
}

.about-intro-photo--offset {
   margin-top: 40px;
}

/* ============================
   About: branches
   ============================ */
.branches {
   padding: 24px 0 64px;
}

.branches-head {
   max-width: 620px;
   margin: 0 auto 40px;
   text-align: center;
}

.branches-eyebrow {
   display: block;
   margin-bottom: 12px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--color-primary-dark);
}

.branches-title {
   margin-bottom: 16px;
   font-size: 32px;
   font-weight: var(--font-weight-bold);
   line-height: 1.3;
   color: var(--color-text);
}

.branches-subtitle {
   font-size: var(--font-size-base);
   line-height: 1.7;
   color: var(--color-muted);
}

.branches-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
}

.branch-card-media {
   margin-bottom: 20px;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   border-radius: var(--radius);
   background: #f2f2f2;
}

.branch-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.branch-card-name {
   margin-bottom: 8px;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   text-align: center;
   color: var(--color-text);
}

.branch-card-address {
   font-size: var(--font-size-base);
   line-height: 1.6;
   text-align: center;
   color: var(--color-muted);
}

/* ============================
   About: partners strip
   ============================ */
.partners {
   padding: 8px 0 64px;
}

.partners-title {
   margin-bottom: 40px;
   font-size: 28px;
   font-weight: var(--font-weight-bold);
   text-align: center;
   color: var(--color-text);
}

.partners-title span {
   color: var(--color-primary);
}

.partner-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 70px;
}

.partner-logo img {
   height: 32px;
   width: auto;
   max-width: 100%;
   filter: grayscale(1);
   opacity: 0.6;
   transition: opacity 0.2s ease, filter 0.2s ease;
}

.partner-logo:hover img {
   filter: grayscale(0);
   opacity: 1;
}

/* ============================
   Shop grid (shop.html toolbar + listing)
   ============================ */
.shop-content {
   padding-top: 40px;
   padding-bottom: 64px;
}

.shop-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 24px;
}

.shop-toolbar-count {
   font-size: var(--font-size-base);
   color: var(--color-text);
}

.shop-toolbar-count strong {
   color: var(--color-primary-dark);
}

.shop-toolbar-controls {
   display: flex;
   align-items: center;
   gap: 12px;
}

.shop-toolbar-dropdown .dropdown-toggle {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   border: 1px solid var(--color-border);
   border-radius: 999px;
   background: var(--color-surface);
   color: var(--color-text);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
}

.shop-toolbar-dropdown .dropdown-toggle i {
   color: var(--color-muted);
}

.shop-toolbar-dropdown .dropdown-toggle:hover,
.shop-toolbar-dropdown .dropdown-toggle:focus-visible {
   border-color: var(--color-primary);
}

.shop-toolbar-dropdown .dropdown-menu {
   min-width: 190px;
   font-size: var(--font-size-sm);
}

/* Opens .shop-sidebar as an off-canvas drawer below 991.98px (see
   responsive.css) - hidden here since the sidebar sits inline on desktop
   and doesn't need a trigger. */
.shop-filter-toggle {
   display: none;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   margin-bottom: 24px;
   padding: 12px;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary-dark);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease;
}

.shop-filter-toggle:hover,
.shop-filter-toggle:focus-visible {
   background: var(--color-primary);
}

.shop-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.shop-layout {
   display: flex;
   align-items: flex-start;
   gap: 24px;
}

.shop-main {
   flex: 1;
   min-width: 0;
}

.shop-sidebar {
   display: flex;
   flex: 0 0 260px;
   flex-direction: column;
   gap: 24px;
}

.shop-sidebar-card {
   padding: 24px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
}

/* Filter accordion (Category / Brand / Price / Tags) */
.filter-section {
   padding: 16px 0;
}

.filter-section + .filter-section {
   border-top: 1px solid var(--color-border);
}

.filter-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   border: none;
   background: none;
   padding: 0;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   cursor: pointer;
}

.filter-toggle i {
   color: var(--color-muted);
   transition: transform 0.25s ease;
}

.filter-section._collapsed .filter-toggle i {
   transform: rotate(-90deg);
}

.filter-content {
   display: flex;
   flex-direction: column;
   gap: 14px;
   max-height: 600px;
   margin-top: 16px;
   opacity: 1;
   overflow: hidden;
   transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.filter-section._collapsed .filter-content {
   max-height: 0;
   margin-top: 0;
   opacity: 0;
}

.filter-search {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   font-size: var(--font-size-sm);
   color: var(--color-text);
   outline: none;
   transition: border-color 0.2s ease;
}

.filter-search:focus-visible {
   border-color: var(--color-primary);
}

.filter-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
   max-height: 220px;
   margin: 0;
   padding: 2px 4px 2px 0;
   overflow-y: auto;
   list-style: none;
   scrollbar-width: thin;
   scrollbar-color: var(--color-primary) var(--color-topbar-bg);
}

.filter-list::-webkit-scrollbar {
   width: 6px;
}

.filter-list::-webkit-scrollbar-track {
   background: var(--color-topbar-bg);
   border-radius: 999px;
}

.filter-list::-webkit-scrollbar-thumb {
   background: var(--color-primary);
   border-radius: 999px;
}

/* Custom checkbox: the native input stays for state/a11y but is visually
   hidden, and the label's ::before/::after draw the box + checkmark. */
.filter-list input[type="checkbox"] {
   position: absolute;
   width: 0;
   height: 0;
   opacity: 0;
}

.filter-list label {
   position: relative;
   display: inline-flex;
   align-items: center;
   min-height: 18px;
   padding-left: 28px;
   font-size: var(--font-size-sm);
   color: var(--color-text);
   cursor: pointer;
}

.filter-list label::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 18px;
   height: 18px;
   transform: translateY(-50%);
   border: 2px solid var(--color-border);
   border-radius: 5px;
   background: var(--color-surface);
   transition: border-color 0.2s ease, background 0.2s ease;
}

.filter-list label:hover::before {
   border-color: var(--color-primary);
}

.filter-list input[type="checkbox"]:checked + label::before {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

.filter-list input[type="checkbox"]:checked + label::after {
   content: "";
   position: absolute;
   left: 6px;
   top: 45%;
   width: 5px;
   height: 9px;
   border: solid #fff;
   border-width: 0 2px 2px 0;
   transform: translateY(-60%) rotate(45deg);
}

.filter-list input[type="checkbox"]:focus-visible + label::before {
   box-shadow: 0 0 0 3px rgba(18, 164, 136, 0.25);
}

/* Dual-handle price range: two native range inputs stacked on one
   track; only their thumbs are clickable (pointer-events: none on
   the input itself), so both stay independently draggable. */
.price-range {
   margin-bottom: 4px;
}

.price-range-track {
   position: relative;
   height: 4px;
   margin: 10px 2px 16px;
   background: var(--color-border);
   border-radius: 999px;
}

.price-range-fill {
   position: absolute;
   top: 0;
   height: 100%;
   background: var(--color-primary);
   border-radius: 999px;
}

.price-range-input {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   margin: 0;
   background: transparent;
   pointer-events: none;
   appearance: none;
   -webkit-appearance: none;
   transform: translateY(-50%);
}

.price-range-input::-webkit-slider-runnable-track {
   background: transparent;
}

.price-range-input::-moz-range-track {
   background: transparent;
   border: none;
}

.price-range-input::-webkit-slider-thumb {
   appearance: none;
   -webkit-appearance: none;
   width: 16px;
   height: 16px;
   border: 2px solid #fff;
   border-radius: 50%;
   background: var(--color-primary);
   box-shadow: 0 0 0 1px var(--color-primary);
   pointer-events: auto;
   cursor: pointer;
}

.price-range-input::-moz-range-thumb {
   width: 16px;
   height: 16px;
   border: 2px solid #fff;
   border-radius: 50%;
   background: var(--color-primary);
   box-shadow: 0 0 0 1px var(--color-primary);
   pointer-events: auto;
   cursor: pointer;
}

.price-range-value {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.price-range-value strong {
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.shop-filter-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 20px;
}

.shop-filter-btn {
   display: inline-flex;
   flex: 1;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary-dark);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.shop-filter-btn:hover,
.shop-filter-btn:focus-visible {
   background: var(--color-primary);
}

.shop-filter-btn--reset {
   background: transparent;
   border: 1px solid var(--color-border);
   color: var(--color-muted);
}

.shop-filter-btn--reset:hover,
.shop-filter-btn--reset:focus-visible {
   background: var(--color-topbar-bg);
   border-color: var(--color-primary);
   color: var(--color-primary-dark);
}

.shop-filter-btn--reset:disabled {
   cursor: not-allowed;
   opacity: 0.55;
}

.shop-filter-btn--reset:disabled:hover {
   background: transparent;
   border-color: var(--color-border);
   color: var(--color-muted);
}

/* ============================
   Shop pagination
   ============================ */
.shop-pagination {
   display: flex;
   justify-content: center;
   margin-top: 40px;
}

.pagination-list {
   display: flex;
   align-items: center;
   gap: 8px;
   list-style: none;
}

.pagination-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding: 0 4px;
   border-radius: var(--radius);
   background: transparent;
   color: var(--color-text);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease, color 0.2s ease;
}

.pagination-link:hover,
.pagination-link:focus-visible {
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
}

.pagination-link.is-active {
   background: var(--color-primary);
   color: #fff;
}

.pagination-ellipsis {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 40px;
   color: var(--color-muted);
}

.pagination-link--next {
   color: var(--color-muted);
}

.pagination-link--next:hover,
.pagination-link--next:focus-visible {
   background: transparent;
   color: var(--color-primary-dark);
}

/* ============================
   Hero slider
   ============================ */
.hero-slider {
   position: relative;
   padding: 0;
   background: var(--color-section-mint);
}

.hero-swiper {
   position: relative;
   /* Full viewport width - the swiper sits outside .hero-slider's
      .container on purpose, so it isn't capped at the container's
      max-width like the rest of the page's sections. */
   width: 100%;
   /* 80% of the viewport's height, with a floor so it doesn't collapse to
      almost nothing on short/landscape phone screens and a ceiling so it
      doesn't turn into a wall of image on very tall desktop monitors. */
   height: 80vh;
   min-height: 420px;
   max-height: 760px;
   overflow: hidden;
}

.hero-slide {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
}

.hero-slide-photo {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero-slide-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 12px;
   max-width: 780px;
   padding: 40px 5%;
   background: linear-gradient(90deg, rgba(15, 20, 18, 0.72) 0%, rgba(15, 20, 18, 0.38) 65%, rgba(15, 20, 18, 0) 100%);
   color: #fff;
}

.hero-slide-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   width: fit-content;
   padding: 6px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.16);
   font-size: 12px;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.hero-slide-title {
   margin: 0;
   font-size: clamp(28px, 4vw, 48px);
   font-weight: var(--font-weight-bold);
   line-height: 1.15;
}

.hero-slide-subtitle {
   margin: 0;
   line-height: 1.2;
   max-width: 58ch;
   font-size: var(--font-size-base);
   color: rgba(255, 255, 255, 0.85);
}

.hero-slide-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   width: fit-content;
   margin-top: 12px;
   padding: 13px 26px;
   border-radius: 999px;
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease;
}

.hero-slide:hover .hero-slide-cta,
.hero-slide:focus-visible .hero-slide-cta {
   background: var(--color-primary-dark);
}

.hero-swiper-btn {
   position: absolute;
   top: 50%;
   z-index: 5;
   width: 44px;
   height: 44px;
   transform: translateY(-50%);
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.hero-slider:hover .hero-swiper-btn,
.hero-swiper-btn:focus-visible {
   opacity: 1;
   pointer-events: auto;
}

.hero-swiper-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.hero-swiper-btn.swiper-button-disabled {
   opacity: 0.4;
   pointer-events: none;
}

.hero-swiper-btn--prev {
   left: 20px;
}

.hero-swiper-btn--next {
   right: 20px;
}

.hero-swiper-pagination-row {
   display: flex;
   justify-content: center;
   margin-top: 32px;
}

.hero-swiper-pagination {
   position: static !important;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero-swiper-pagination .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   margin: 0 4px !important;
   background: transparent;
   border: 1.5px solid var(--color-border);
   opacity: 1;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
   background: var(--color-primary);
   border-color: var(--color-primary);
}

/* Main hero banner only (its pagination row is a direct child of
   .hero-swiper - the promo/top-rated sliders that share these same
   .hero-swiper-pagination* classes keep their row in normal flow below
   the swiper): overlay the dots on the image's bottom edge instead of a
   separate row underneath it, and switch them to white so they read
   against a photo instead of the page background. */
.hero-swiper > .hero-swiper-pagination-row {
   position: absolute;
   right: 0;
   bottom: 24px;
   left: 0;
   z-index: 5;
   margin-top: 0;
}

.hero-swiper > .hero-swiper-pagination-row .swiper-pagination-bullet {
   border-color: rgba(255, 255, 255, 0.6);
}

.hero-swiper > .hero-swiper-pagination-row .swiper-pagination-bullet-active {
   background: #fff;
   border-color: #fff;
}

.hero-banner {
   padding: 0 0 56px;
   background: var(--color-section-mint);
}

.hero-banner-link {
   display: block;
   border-radius: var(--radius);
   overflow: hidden;
   transition: opacity 0.2s ease;
}

.hero-banner-link:hover,
.hero-banner-link:focus-visible {
   opacity: 0.9;
}

.hero-banner-photo {
   display: block;
   width: 100%;
   height: 280px;
   object-fit: cover;
}

/* ============================
   Features (trust badges) strip
   ============================ */
.features {
   padding: 40px 0;
}

.features-swiper-pagination {
   position: static !important;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin-bottom: 24px;
}

.features-swiper-pagination .swiper-pagination-bullet {
   width: 6px;
   height: 6px;
   margin: 0 !important;
   background: var(--color-border);
   opacity: 1;
}

.features-swiper-pagination .swiper-pagination-bullet-active {
   background: var(--color-primary);
}

.feature-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: auto;
   padding: 36px 28px 32px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 4px;
   text-align: center;
}

.feature-card-media {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 96px;
   height: 96px;
   margin-bottom: 20px;
   border-radius: 50%;
   font-size: 40px;
}

.feature-card-media--pink {
   background: var(--color-accent-pink);
   color: var(--color-accent-pink-text);
}

.feature-card-media--blue {
   background: var(--color-accent-blue);
   color: var(--color-accent-blue-text);
}

.feature-card-media--green {
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
}

.feature-card-media--indigo {
   background: var(--color-accent-indigo);
   color: var(--color-accent-indigo-text);
}

.feature-card-media--purple {
   background: var(--color-accent-purple);
   color: var(--color-accent-purple-text);
}

.feature-card-media--peach {
   background: var(--color-accent-peach);
   color: var(--color-accent-terracotta);
}

.feature-card-label {
   display: inline-flex;
   padding: 10px;
   border-radius: 5px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
}

.feature-card-label--pink {
   background: var(--color-accent-pink);
   color: var(--color-accent-pink-text);
}

.feature-card-label--blue {
   background: var(--color-accent-blue);
   color: var(--color-accent-blue-text);
}

.feature-card-label--green {
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
}

.feature-card-label--indigo {
   background: var(--color-accent-indigo);
   color: var(--color-accent-indigo-text);
}

.feature-card-label--purple {
   background: var(--color-accent-purple);
   color: var(--color-accent-purple-text);
}

.feature-card-label--peach {
   background: var(--color-accent-peach);
   color: var(--color-accent-terracotta);
}

/* ============================
   Products (tabbed grid)
   ============================ */
.products {
   padding: 40px 0;
   background: var(--color-section-mint);
}

.products-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 24px;
}

.products-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.products-tabs .nav-link {
   padding: 10px 20px;
   border: none;
   border-radius: 999px;
   background: var(--color-tab-inactive-bg);
   color: var(--color-text);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
}

.products-tabs .nav-link.active {
   background: var(--color-tab-active-bg);
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-bold);
}

.products-view-more {
   flex-shrink: 0;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
}

.products-view-more:hover {
   text-decoration: underline;
}

.products-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
}

.product-card {
   display: flex;
   flex-direction: column;
   background: var(--color-surface);
   border: 1px solid var(--color-card-border);
   border-radius: var(--radius);
   transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover,
.product-card:focus-within {
   border-color: var(--color-primary, #999);
}

.product-card-media {
   position: relative;
   aspect-ratio: 1 / 1;
   margin: 10px 10px 0;
   overflow: hidden;
   border-radius: var(--radius);
   background: #f2f2f2;
}

.product-card-media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.product-card-action {
   position: relative;
   flex-shrink: 0;
   width: 38px;
   height: 38px;
   border: 1px solid var(--color-card-border);
   border-radius: var(--radius);
   background: #fff;
   color: var(--color-text);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-card-action:hover,
.product-card-action:focus-visible {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}

.product-card-action-label {
   display: none;
}

.product-card-tooltip {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   z-index: 3;
   padding: 4px 10px;
   border-radius: 4px;
   background: var(--color-text);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, 4px);
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card-tooltip::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   border: 4px solid transparent;
   border-top-color: var(--color-text);
   transform: translateX(-50%);
}

.product-card-action:hover .product-card-tooltip,
.product-card-action:focus-visible .product-card-tooltip {
   opacity: 1;
   transform: translate(-50%, 0);
}

/* Same container approach as .arrival-card-badges. */
.product-card-badges {
   position: absolute;
   top: 12px;
   left: 12px;
   right: 12px;
   z-index: 1;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 6px;
}

.product-card-badge {
   min-width: 74px;
   padding: 4px 10px;
   border-radius: 999px;
   color: #fff;
   font-size: 12px;
   font-weight: var(--font-weight-bold);
   text-align: center;
}

.product-card-badge--pink {
   background: var(--color-badge-pink);
}

.product-card-badge--dark {
   background: var(--color-badge-dark);
}

.product-card-badge--orange {
   background: var(--color-badge-orange);
}

.product-card-badge--blue {
   background: var(--color-badge-blue);
}

.product-card-badge--yellow {
   background: var(--color-badge-yellow);
}

.product-card-badge--red {
   background: var(--color-badge-red);
}

/* Live countdown badge (product-card / arrival-card media): sits opposite
   the static discount badge, driven by initDealCountdowns via the same
   [data-deadline]/[data-unit] pattern the deal banners use - it never runs
   independently, so a card that includes this must sit somewhere on a
   page that also calls that init. A dark, semi-transparent pill rather
   than one of the solid badge colors so it stays legible over any photo. */
.image-countdown-badge {
   position: absolute;
   right: 12px;
   bottom: 12px;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   /* Keeps the pill a consistent width regardless of the digits/icon it's
      showing, instead of sizing to fit its content exactly. */
   min-width: 92px;
   padding: 5px 10px;
   border-radius: 999px;
   background: rgba(20, 20, 20, 0.78);
   color: #fff;
   font-size: 12px;
   font-weight: var(--font-weight-bold);
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.02em;
}

.image-countdown-badge i {
   font-size: 11px;
   color: var(--color-badge-pink);
}

.product-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 12px 16px 16px;
}

.product-card-price {
   display: flex;
   order: 3;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   /* Reserves space for the old-price line even when a card has no
      discount, so cards in the same row still line up (title, meta,
      buttons) whether or not their price block is one line or two. */
   min-height: 37px;
   margin-bottom: 4px;
}

.product-card-price-current {
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
   letter-spacing: -0.01em;
}

.product-card-price-old {
   font-size: 13px;
   color: var(--color-muted);
   text-decoration: line-through;
}

.product-card-title {
   display: -webkit-box;
   order: 2;
   overflow: hidden;
   margin-bottom: 6px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: 1.35;
   /* Reserves 2 lines' height always (matches .arrival-card-title) - without
      it, a 1-line title left less content above the footer's margin-top:
      auto than a 2-line title did, so the same auto margin absorbed more
      space in the shorter card and pushed its price further from the
      button instead of sitting right on top of it. */
   min-height: calc(1.35em * 2);
   color: var(--color-text);
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
}

.product-card-meta {
   display: flex;
   order: 1;
   align-items: center;
   gap: 6px;
   margin-bottom: 8px;
   font-size: 12px;
   color: var(--color-muted);
}

.product-card-meta-sep {
   color: var(--color-card-border);
}

.product-card-rating {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.product-card-rating i {
   color: var(--color-star);
   font-size: 11px;
}

.product-card-footer-actions {
   display: flex;
   order: 4;
   align-items: center;
   gap: 6px;
   margin-top: auto;
   padding-top: 4px;
}

.product-card-cart {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
   gap: 5px;
   height: 40px;
   min-width: 0;
   padding: 0 6px;
   overflow: hidden;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary-dark);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
   transition: background 0.2s ease;
}

.product-card-cart:hover,
.product-card-cart:focus-visible {
   background: var(--color-primary);
}

/* Mint card variant (shop grid + related-items swipers): same treatment as
   .arrival-card--mint - pastel frame, floating white image tile, and a
   full-width cart button with labeled compare/favorite pills. */
.product-card--mint {
   border-radius: 24px;
   padding: 16px;
}


.product-card--mint .product-card-media {
   margin: 0;
   border-radius: 18px;
   background: var(--color-surface);
}

/* Only the default discount-pink badge gets muted to the mint card's own
   teal - matches .arrival-card--mint's badge behavior. The other colors
   (including the two newer ones) carry real information (new/limited
   stock/etc.) that a uniform color would erase, and multiple badges on
   one card need to read as distinct from each other besides. */
.product-card--mint .product-card-badge--pink {
   background: var(--color-primary-dark);
}

.product-card--mint .product-card-body {
   padding: 16px 0 0;
}

.product-card--mint .product-card-meta {
   justify-content: space-between;
   margin-bottom: 8px;
}

.product-card--mint .product-card-meta-sep {
   display: none;
}

.product-card--mint .product-card-category {
   min-width: 0;
   overflow: hidden;
   font-size: 11px;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: var(--color-primary-dark);
}

.product-card--mint .product-card-rating {
   display: none;
}

.product-card--mint .product-card-title {
   font-size: 14px;
   font-weight: var(--font-weight-bold);
}

.product-card--mint .product-card-price {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 8px;
   min-height: 0;
}

.product-card--mint .product-card-price-current {
   font-size: 24px;
   white-space: nowrap;
}

.product-card--mint .product-card-price-old {
   white-space: nowrap;
}

.product-card--mint .product-card-footer-actions {
   flex-wrap: wrap;
   gap: 8px;
}

.product-card--mint .product-card-cart {
   flex: 1 1 100%;
   order: 1;
   height: 38px;
   border-radius: 999px;
   font-size: 13px;
}

.product-card--mint .product-card-action {
   flex: 1 1 calc(50% - 4px);
   order: 2;
   width: auto;
   min-width: 0;
   height: 38px;
   gap: 5px;
   padding: 0 8px;
   border-radius: 999px;
   border-color: rgba(13, 125, 104, 0.25);
   color: var(--color-primary-dark);
   font-size: 12px;
   font-weight: var(--font-weight-semibold);
}

.product-card--mint .product-card-action i {
   flex-shrink: 0;
}

.product-card--mint .product-card-action-label {
   display: inline;
   overflow: hidden;
   min-width: 0;
   flex-shrink: 1;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* .product-card-action's own :hover rule (color: #fff) ties in specificity
   with the plain-color rule above and loses to it on source order - restate
   it here at higher specificity so hover actually turns white (same fix as
   .arrival-card--mint's). */
.product-card--mint .product-card-action:hover,
.product-card--mint .product-card-action:focus-visible {
   color: #fff;
}

/* ============================
   Popular categories
   ============================ */
.categories {
   padding: 40px 0;
   background: var(--color-surface);
}

.categories-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.categories-title {
   font-size: 24px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.categories-title span {
   color: var(--color-primary);
}

.categories-swiper-nav {
   display: flex;
   flex-shrink: 0;
   gap: 8px;
}

.categories-swiper-btn {
   width: 36px;
   height: 36px;
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease;
}

.categories-swiper-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.categories-swiper-btn.swiper-button-disabled {
   opacity: 0.4;
   pointer-events: none;
}

.category-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16px;
   background: var(--color-surface);
   border: 1px solid var(--color-card-border);
   border-radius: var(--radius);
   text-align: center;
   text-decoration: none;
   color: inherit;
   transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.category-card:hover,
.category-card:focus-visible {
   border-color: var(--color-primary, #999);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   color: inherit;
}

.category-card-media {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   aspect-ratio: 1 / 1;
   margin-bottom: 16px;
   border-radius: 4px;
   overflow: hidden;
}

.category-card-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.category-card-label {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 2.6em;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: 1.3;
   color: var(--color-text);
}

/* ============================
   Deal countdown
   ============================ */
.deal-banners {
   padding: 40px 0;
}

.deal-banner {
   display: flex;
   align-items: stretch;
   min-height: 420px;
   border-radius: var(--radius);
   overflow: hidden;
}

/* "See more" button shown below a slider (categories, new arrivals, related items) */
.section-more {
   display: flex;
   justify-content: center;
   margin-top: 32px;
}

.section-more-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 32px;
   border: 1.5px solid var(--color-primary-dark);
   border-radius: var(--radius);
   color: var(--color-primary-dark);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease;
}

.section-more-btn:hover,
.section-more-btn:focus-visible {
   background: var(--color-primary-dark);
   color: #fff;
}

/* ============================
   Deal banners — overlay card
   (used inside .deal-banners; the .deal-banner class above still
   drives the "Hurry Up!" JS countdown via [data-deadline]/[data-unit])
   ============================ */
.deal-overlay-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

.deal-overlay-card {
   position: relative;
   min-height: 380px;
   flex-direction: column;
   /* No justify-content: flex-end here - the badge and scrim used to be
      pushed to the bottom as one flex group, so a card with a longer
      wrapping title (taller scrim) shoved its badge down with it,
      misaligning it against neighboring cards whose title fit on one
      line. The badge now stays in normal top-of-flow position; .deal-
      overlay-scrim's own margin-top: auto pins IT to the bottom instead,
      so the badge (top) and the price/countdown/button row (bottom) both
      land at the same height across every card regardless of title
      length. */
}

.deal-overlay-card--mint { background: var(--color-primary-dark); }
.deal-overlay-card--blue { background: var(--color-accent-blue-text); }

.deal-overlay-media {
   position: absolute;
   inset: 0;
}

.deal-overlay-media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.deal-overlay-media::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0.68) 100%);
}

.deal-overlay-badge {
   position: relative;
   align-self: flex-start;
   margin: 24px 24px 10px;
   padding: 5px 14px;
   border-radius: 999px;
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.deal-overlay-card--mint .deal-overlay-badge {
   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.deal-overlay-card--blue .deal-overlay-badge {
   background: linear-gradient(135deg, var(--color-badge-blue), var(--color-accent-blue-text));
}

.deal-overlay-scrim {
   position: relative;
   margin-top: auto;
   padding: 24px 28px 28px;
}

.deal-overlay-title {
   margin: 0 0 8px;
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   color: #fff;
}

.deal-overlay-price { margin: 0 0 14px; font-size: var(--font-size-lg); }
.deal-overlay-price-current { font-weight: var(--font-weight-bold); color: #fff; white-space: nowrap; }
.deal-overlay-price-old { margin-left: 8px; color: rgba(255, 255, 255, 0.7); text-decoration: line-through; white-space: nowrap; }

.deal-overlay-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
}

.deal-overlay-cd {
   font-size: 18px;
   font-weight: var(--font-weight-bold);
   color: #fff;
   white-space: nowrap;
}

.deal-overlay-cd-label {
   font-size: 12px;
   font-weight: var(--font-weight-regular, normal);
   color: rgba(255, 255, 255, 0.85);
}

.deal-overlay-btn {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 10px 20px;
   border: 1.5px solid #fff;
   border-radius: var(--radius);
   color: #fff;
   font-size: 13px;
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease, color 0.2s ease;
}

.deal-overlay-card--mint .deal-overlay-btn:hover { background: #fff; color: var(--color-primary-dark); }
.deal-overlay-card--blue .deal-overlay-btn:hover { background: #fff; color: var(--color-accent-blue-text); }

.deal-overlay-card--terracotta { background: var(--color-accent-terracotta); }
.deal-overlay-card--indigo { background: var(--color-accent-indigo-text); }
.deal-overlay-card--purple { background: var(--color-accent-purple-text); }
.deal-overlay-card--pink { background: var(--color-badge-pink); }

.deal-overlay-card--terracotta .deal-overlay-badge { background: linear-gradient(135deg, #eda791, var(--color-accent-terracotta)); }
.deal-overlay-card--indigo .deal-overlay-badge { background: linear-gradient(135deg, #928ce8, var(--color-accent-indigo-text)); }
.deal-overlay-card--purple .deal-overlay-badge { background: linear-gradient(135deg, #c197e0, var(--color-accent-purple-text)); }
.deal-overlay-card--pink .deal-overlay-badge { background: linear-gradient(135deg, #f492ac, var(--color-badge-pink)); }

.deal-overlay-card--terracotta .deal-overlay-btn:hover { background: #fff; color: var(--color-accent-terracotta); }
.deal-overlay-card--indigo .deal-overlay-btn:hover { background: #fff; color: var(--color-accent-indigo-text); }
.deal-overlay-card--purple .deal-overlay-btn:hover { background: #fff; color: var(--color-accent-purple-text); }
.deal-overlay-card--pink .deal-overlay-btn:hover { background: #fff; color: var(--color-badge-pink); }

/* Deal banners rendered as a slider: cards keep .deal-overlay-card's look,
   Swiper controls slide width via slidesPerView/breakpoints in JS. */
.deal-banners-swiper .swiper-slide {
   height: auto;
}

.deal-banners-swiper .deal-overlay-card {
   height: 100%;
}

/* Featured single deal banner (the one-card, no-slider section): the same
   .deal-overlay-card component scaled up, since it now has the whole row
   to itself instead of sharing it with a slider's other slides. */
.deal-overlay-card--featured {
   min-height: 620px;
   border-radius: 20px;
}

.deal-overlay-card--featured .deal-overlay-badge {
   margin: 40px 40px 0;
   padding: 8px 20px;
   font-size: 14px;
}

.deal-overlay-card--featured .deal-overlay-scrim {
   padding: 12px 48px 48px;
}

.deal-overlay-card--featured .deal-overlay-title {
   margin-bottom: 16px;
   font-size: 44px;
}

.deal-overlay-card--featured .deal-overlay-price {
   margin-bottom: 24px;
   font-size: 26px;
}

.deal-overlay-card--featured .deal-overlay-cd {
   font-size: 26px;
}

.deal-overlay-card--featured .deal-overlay-cd-label {
   font-size: 15px;
}

.deal-overlay-card--featured .deal-overlay-btn {
   padding: 16px 32px;
   font-size: 16px;
}

@media (max-width: 575.98px) {
   .deal-overlay-card--featured {
      min-height: 440px;
   }

   .deal-overlay-card--featured .deal-overlay-title {
      font-size: 28px;
   }

   .deal-overlay-card--featured .deal-overlay-cd {
      font-size: 18px;
   }
}

/* ============================
   New Arrivals
   ============================ */
.new-arrivals {
   padding: 40px 0;
   background: var(--color-surface);
}

.new-arrivals-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.new-arrivals-title {
   font-size: 24px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.new-arrivals-title span {
   color: var(--color-primary);
}

.new-arrivals-swiper-nav {
   display: flex;
   flex-shrink: 0;
   gap: 8px;
}

.new-arrivals-swiper-btn {
   width: 36px;
   height: 36px;
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease;
}

.new-arrivals-swiper-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.new-arrivals-swiper-btn.swiper-button-disabled {
   opacity: 0.4;
   pointer-events: none;
}

/* ============================
   Related Items
   ============================ */
.related-items {
   padding: 40px 0;
   background: var(--color-surface);
}

.related-items-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.related-items-title {
   font-size: 24px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.related-items-title span {
   color: var(--color-primary);
}

.related-items-swiper-nav {
   display: flex;
   flex-shrink: 0;
   gap: 8px;
}

.related-items-swiper-btn {
   width: 36px;
   height: 36px;
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease;
}

.related-items-swiper-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.related-items-swiper-btn.swiper-button-disabled {
   opacity: 0.4;
   pointer-events: none;
}

.discounts {
   padding: 40px 0;
   background: var(--color-surface);
}

.discounts-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.discounts-title {
   font-size: 24px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.discounts-title span {
   color: var(--color-primary);
}

.discounts-swiper-nav {
   display: flex;
   flex-shrink: 0;
   gap: 8px;
}

.discounts-swiper-btn {
   width: 36px;
   height: 36px;
   border: none;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease;
}.search-results-group

.discounts-swiper-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.discounts-swiper-btn.swiper-button-disabled {
   opacity: 0.4;
   pointer-events: none;
}

.arrival-card {
   display: flex;
   flex-direction: column;
   height: 100% ;
   background: var(--color-surface);
   border: 1px solid var(--color-card-border);
   border-radius: var(--radius);
   transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.arrival-card:hover,
.arrival-card:focus-within {
   border-color: var(--color-primary, #999);
}

.arrival-card-media {
   position: relative;
   aspect-ratio: 1 / 1;
   margin: 10px 10px 0;
   background: #f2f2f2;
   overflow: hidden;
   border-radius: var(--radius);
}

.arrival-card-media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Positions the whole stack once; individual badges just lay out inside
   it (flex column) instead of each anchoring itself to the same top-left
   spot and needing sibling-selector offsets to avoid overlapping. */
.arrival-card-badges {
   position: absolute;
   top: 12px;
   left: 12px;
   right: 12px;
   z-index: 1;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 6px;
}

.arrival-card-badge {
   min-width: 74px;
   padding: 4px 10px;
   border-radius: 999px;
   color: #fff;
   font-size: 12px;
   font-weight: var(--font-weight-bold);
   text-align: center;
}

.arrival-card-badge--pink {
   background: var(--color-badge-pink);
}

.arrival-card-badge--dark {
   background: var(--color-badge-dark);
}

.arrival-card-badge--blue {
   background: var(--color-badge-blue);
}

.arrival-card-badge--yellow {
   background: var(--color-badge-yellow);
}

.arrival-card-badge--red {
   background: var(--color-badge-red);
}

.arrival-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 12px 16px 16px;
}

.arrival-card-price {
   display: flex;
   order: 3;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   /* Reserves space for the old-price line even when a card has no
      discount, so cards in the same row still line up (title, meta,
      buttons) whether or not their price block is one line or two. */
   min-height: 37px;
   margin-bottom: 4px;
}

.arrival-card-price-current {
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
   letter-spacing: -0.01em;
}

.arrival-card-price-old {
   font-size: 13px;
   color: var(--color-muted);
   text-decoration: line-through;
}

.arrival-card-title {
   display: -webkit-box;
   order: 2;
   overflow: hidden;
   margin-bottom: 6px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: 1.35;
   min-height: calc(1.35em * 2);
   color: var(--color-text);
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
}

.arrival-card-meta {
   display: flex;
   order: 1;
   align-items: center;
   gap: 6px;
   margin-bottom: 5px;
   font-size: 12px;
   color: var(--color-muted);
}

.arrival-card-meta-sep {
   color: var(--color-card-border);
}

.arrival-card-rating {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.arrival-card-rating i {
   color: var(--color-star);
   font-size: 11px;
}

.arrival-card-bottom-actions {
   display: flex;
   order: 4;
   align-items: center;
   gap: 6px;
   margin-top: auto;
   padding-top: 4px;
}

.arrival-card-cart-btn {
   display: flex;
   flex: 1;
   align-items: center;
   justify-content: center;
   gap: 5px;
   height: 40px;
   min-width: 0;
   padding: 0 6px;
   overflow: hidden;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary-dark);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
   transition: background 0.2s ease;
}

.arrival-card-category{
   font-size: 11px;
}

.arrival-card-cart-btn:hover,
.arrival-card-cart-btn:focus-visible {
   background: var(--color-primary);
}

.arrival-card-action {
   position: relative;
   flex-shrink: 0;
   width: 38px;
   height: 38px;
   border: 1px solid var(--color-card-border);
   border-radius: var(--radius);
   background: #fff;
   color: var(--color-text);
   font-size: var(--font-size-base);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.arrival-card-action:hover,
.arrival-card-action:focus-visible {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}

.arrival-card-action-label {
   display: none;
}

.arrival-card-tooltip {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   z-index: 3;
   padding: 4px 10px;
   border-radius: 4px;
   background: var(--color-text);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, 4px);
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.arrival-card-tooltip::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   border: 4px solid transparent;
   border-top-color: var(--color-text);
   transform: translateX(-50%);
}

.arrival-card-action:hover .arrival-card-tooltip,
.arrival-card-action:focus-visible .arrival-card-tooltip {
   opacity: 1;
   transform: translate(-50%, 0);
}

/* Mint card variant ("Cele mai apreciate"): pastel frame, floating white
   image tile, and a full-width cart button with labeled compare/favorite
   pills underneath instead of the default icon-only row. */
.arrival-card--mint {
   border-radius: 24px;
   padding: 16px;
}

.arrival-card--mint:hover,
.arrival-card--mint:focus-within {
   box-shadow: none;
}

.arrival-card--mint .arrival-card-media {
   margin: 0;
   border-radius: 18px;
   background: var(--color-surface);
}

.arrival-card--mint .arrival-card-badge--pink {
   background: var(--color-primary-dark);
}

.arrival-card--mint .arrival-card-body {
   padding: 16px 0 0;
}

.arrival-card--mint .arrival-card-meta {
   justify-content: space-between;
   margin-bottom: 8px;
}

.arrival-card--mint .arrival-card-meta-sep {
   display: none;
}

.arrival-card--mint .arrival-card-category {
   min-width: 0;
   overflow: hidden;
   font-size: 11px;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: var(--color-primary-dark);
}

.arrival-card--mint .arrival-card-rating {
   display: none;
}

.arrival-card--mint .arrival-card-title {
   font-size: 14px;
   font-weight: var(--font-weight-bold);
}

.arrival-card--mint .arrival-card-price {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 8px;
   min-height: 0;
}

.arrival-card--mint .arrival-card-price-current {
   font-size: 24px;
   white-space: nowrap;
}

.arrival-card--mint .arrival-card-price-old {
   white-space: nowrap;
}

.arrival-card--mint .arrival-card-bottom-actions {
   flex-wrap: wrap;
   gap: 8px;
}

.arrival-card--mint .arrival-card-cart-btn {
   flex: 1 1 100%;
   order: 1;
   height: 38px;
   border-radius: 999px;
   font-size: 13px;
}

.arrival-card--mint .arrival-card-action {
   flex: 1 1 calc(50% - 4px);
   order: 2;
   width: auto;
   min-width: 0;
   height: 38px;
   gap: 5px;
   padding: 0 8px;
   border-radius: 999px;
   border-color: rgba(13, 125, 104, 0.25);
   color: var(--color-primary-dark);
   font-size: 12px;
   font-weight: var(--font-weight-semibold);
}

.arrival-card--mint .arrival-card-action i {
   flex-shrink: 0;
}

.arrival-card--mint .arrival-card-action-label {
   display: inline;
   overflow: hidden;
   min-width: 0;
   flex-shrink: 1;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* .arrival-card-action's own :hover rule (color: #fff) ties in specificity
   with the plain-color rule above and loses to it on source order, leaving
   the icon/label teal-on-teal while hovered - restate it here at higher
   specificity so hover actually turns white. */
.arrival-card--mint .arrival-card-action:hover,
.arrival-card--mint .arrival-card-action:focus-visible {
   color: #fff;
}

/* ============================
   Home hero (category sidebar + banner)
   ============================ */
.home-hero {
   padding: 24px 0 48px;
}

.home-hero-inner {
   display: flex;
   align-items: flex-start;
   gap: 24px;
}

/* ---- Category sidebar ---- */
.category-sidebar {
   position: relative;
   z-index: 20;
   flex-shrink: 0;
   width: 280px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
}

.category-list {
   padding: 8px 0;
}

.category-item {
   position: relative;
}

.category-item>a,
.category-item>span {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 36px 10px 20px;
   font-size: 15px;
   color: var(--color-text);
}

/* .category-item > span: the has-flyout top-level items (Cleaning
   Supplies/Personal Care/Laundry Care) - these only ever open their
   flyout, so they're not links, unlike the plain .category-item entries
   and the flyout's own contents, which still are */
.category-item>span {
   cursor: default;
}

.category-item>a .category-icon,
.category-item>span .category-icon {
   width: 20px;
   flex-shrink: 0;
   font-size: 17px;
   color: var(--color-muted);
   text-align: center;
}

.category-item>a svg.category-icon,
.category-item>span svg.category-icon {
   width: 17px;
   height: 17px;
   fill: currentColor;
}

.category-item>.category-arrow {
   position: absolute;
   top: 50%;
   right: 18px;
   transform: translateY(-50%);
   font-size: 11px;
   color: var(--color-muted);
   pointer-events: none;
}

.category-item:hover,
.category-item.is-open,
.category-item.is-active {
   background: var(--color-highlight-bg);
   box-shadow: inset 3px 0 0 var(--color-primary);
}

.category-item:hover>a,
.category-item.is-open>a,
.category-item.is-active>a,
.category-item:hover>span,
.category-item.is-open>span,
.category-item.is-active>span,
.category-item:hover>a .category-icon,
.category-item.is-open>a .category-icon,
.category-item.is-active>a .category-icon,
.category-item:hover>span .category-icon,
.category-item.is-open>span .category-icon,
.category-item.is-active>span .category-icon,
.category-item:hover>.category-arrow,
.category-item.is-open>.category-arrow,
.category-item.is-active>.category-arrow {
   color: var(--color-primary);
}

.category-show-more {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 12px 20px;
   border: none;
   border-top: 1px solid var(--color-border);
   font-size: 14px;
   color: var(--color-primary);
}

/* ---- Category flyout (mega menu) ---- */
.category-flyout {
   display: none;
   position: absolute;
   top: 0;
   left: calc(100% + 1px);
   width: 620px;
   min-height: 100%;
   gap: 32px;
   padding: 28px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   
}

.category-item.has-flyout:hover>.category-flyout,
.category-item.has-flyout.is-open>.category-flyout {
   display: flex;
}

.flyout-columns {
   display: flex;
   flex: 1;
   gap: 50px;
}

.flyout-col {
   flex: 1;
   min-width: 0;
}

.flyout-col h3 {
   margin-bottom: 14px;
   font-size: 16px;
   font-weight: 600;
   color: var(--color-primary);
}

.flyout-col ul {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 14px;
}

.flyout-col a {
   font-size: 16px;
   color: var(--color-text);
}

.flyout-col a:hover {
   color: var(--color-primary);
   text-decoration: underline;
}

.hero-banner {
   position: relative;
   overflow: hidden;
   background: linear-gradient(160deg, #fdf1e8 0%, #f6d9c4 55%, #eab98a 100%);
   flex: 1;
   min-height: 420px;
   display: flex;
   align-items: flex-end;
   padding: 40px;
   border-radius: var(--radius);
}

.hero-banner::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 75% 15%, rgba(255, 255, 255, 0.55), transparent 60%);
}

.hero-banner-content {
   position: relative;
   z-index: 1;
}

.hero-banner-badge {
   display: inline-block;
   margin-bottom: 12px;
   padding: 5px 12px;
   border-radius: 999px;
   background: var(--color-primary);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
}

.hero-banner-title {
   margin-bottom: 8px;
   font-size: 28px;
   font-weight: 700;
}

.hero-banner-link {
   display: inline-block;
   font-size: 15px;
   font-weight: 600;
   text-decoration: underline;
}

/* ============================
   Newsletter
   ============================ */
.newsletter {
   background: var(--color-newsletter-bg);
}

.newsletter-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 20px;
   padding: 28px 0;
}

.newsletter-heading {
   display: flex;
   align-items: center;
   gap: 12px;
}

.newsletter-icon {
   flex-shrink: 0;
   font-size: 26px;
   color: var(--color-text);
}

.newsletter-title {
   margin: 0;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   white-space: nowrap;
}

.newsletter-text {
   flex: 1;
   min-width: 200px;
   margin: 0;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
}

.newsletter-form {
   display: flex;
   align-items: stretch;
   flex-shrink: 0;
   width: 100%;
   max-width: 480px;
}

.newsletter-input {
   flex: 1;
   min-width: 0;
   padding: 14px 20px;
   border: none;
   border-radius: var(--radius) 0 0 var(--radius);
   background: var(--color-surface);
   font-size: var(--font-size-base);
   color: var(--color-text);
}

.newsletter-input::placeholder {
   color: var(--color-muted);
}

.newsletter-input:focus {
   outline: none;
}

.newsletter-btn {
   flex-shrink: 0;
   padding: 14px 28px;
   border: none;
   border-radius: 0 var(--radius) var(--radius) 0;
   background: var(--color-text);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   transition: background 0.2s ease;
}

.newsletter-btn:hover,
.newsletter-btn:focus-visible {
   background: var(--color-primary-dark);
}

/* ============================
   Site Footer
   ============================ */
.site-footer {
   background: var(--color-surface);
   border-top: 1px solid var(--color-border);
}

.footer-main {
   padding: 56px 0 40px;
}

.footer-main-inner {
   display: grid;
   grid-template-columns: 1.3fr 1fr 1fr;
   gap: 32px;
}

.footer-logo {
   display: inline-flex;
   margin-bottom: 20px;
}

.footer-logo img {
   height: 32px;
   width: auto;
}

.footer-contact {
   margin-bottom: 24px;
}

.footer-contact-label,
.footer-social-label {
   display: block;
   margin-bottom: 12px;
   font-size: 13px;
   color: var(--color-muted);
}

.footer-contact p {
   margin-bottom: 8px;
   font-size: var(--font-size-sm);
   color: var(--color-text);
   line-height: 1.5;
}

.footer-contact p strong {
   font-weight: var(--font-weight-semibold);
}

.footer-social-links {
   display: flex;
   gap: 10px;
}

.footer-social-links a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   font-size: var(--font-size-base);
   transition: background 0.2s ease, color 0.2s ease;
}

.footer-social-links a:hover {
   background: var(--color-primary);
   color: #fff;
}

.footer-col-title {
   margin-bottom: 20px;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.footer-links li {
   margin-bottom: 14px;
}

.footer-links a {
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

.footer-links a:hover {
   color: var(--color-primary);
   text-decoration: underline;
}

.footer-bottom {
   border-top: 1px solid var(--color-border);
   padding: 20px 0;
}

.footer-bottom-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
}

.footer-copy,
.footer-credit {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.footer-copy strong {
   color: var(--color-text);
   font-weight: var(--font-weight-semibold);
}

.footer-credit a {
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.footer-credit a:hover {
   text-decoration: underline;
}

/* ============================
   Wishlist toggle (product-card + arrival-card share this state)
   ============================ */
.wishlist-toggle.is-active {
   background: var(--color-badge-pink);
   color: #fff;
}

.wishlist-toggle.is-active:hover,
.wishlist-toggle.is-active:focus-visible {
   background: var(--color-badge-pink);
   color: #fff;
}

/* ============================
   Compare toggle (product-card + arrival-card share this state)
   ============================ */
.compare-toggle.is-active {
   background: var(--color-badge-blue);
   color: #fff;
}

.compare-toggle.is-active:hover,
.compare-toggle.is-active:focus-visible {
   background: var(--color-badge-blue);
   color: #fff;
}

/* The compare/wishlist footer-action tooltips pop up centered above their
   button by default, which can spill past whichever edge is closest - the
   page's own overflow-x: clip safety net (see the body rule near the top
   of this file) for a first/last-column grid card, or a swiper's own
   overflow: hidden for a card at the edge of the visible slides. Since
   that depends on where the card actually lands on the page (not just
   which button it is), it's measured live in JS - see
   initCardActionTooltipFlip in index.js - which toggles one of these two
   classes instead of centering. Same idea as .product-card-remove's
   always-flush-right tooltip above, just picked dynamically instead of
   being fixed to one corner. */
.arrival-card-tooltip.tooltip-flip-start,
.product-card-tooltip.tooltip-flip-start {
   left: auto;
   right: 0;
   transform: translateY(4px);
}

.arrival-card-tooltip.tooltip-flip-start::after,
.product-card-tooltip.tooltip-flip-start::after {
   left: auto;
   right: 10px;
   transform: none;
}

.arrival-card-tooltip.tooltip-flip-end,
.product-card-tooltip.tooltip-flip-end {
   left: 0;
   transform: translateY(4px);
}

.arrival-card-tooltip.tooltip-flip-end::after,
.product-card-tooltip.tooltip-flip-end::after {
   left: 14px;
   transform: none;
}

.arrival-card-action:hover .arrival-card-tooltip.tooltip-flip-start,
.arrival-card-action:hover .arrival-card-tooltip.tooltip-flip-end,
.arrival-card-action:focus-visible .arrival-card-tooltip.tooltip-flip-start,
.arrival-card-action:focus-visible .arrival-card-tooltip.tooltip-flip-end,
.product-card-action:hover .product-card-tooltip.tooltip-flip-start,
.product-card-action:hover .product-card-tooltip.tooltip-flip-end,
.product-card-action:focus-visible .product-card-tooltip.tooltip-flip-start,
.product-card-action:focus-visible .product-card-tooltip.tooltip-flip-end {
   transform: translateY(0);
}

/* ============================
   Toast notifications
   ============================ */
.toast-stack {
   position: fixed;
   left: 50%;
   bottom: 24px;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   transform: translateX(-50%);
   pointer-events: none;
}

/* Named "site-toast", not "toast" -- Bootstrap already owns .toast
   (display: none until its own .show class is added). */
.site-toast {
   padding: 10px 20px;
   border-radius: 999px;
   background: var(--color-text);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   box-shadow: var(--shadow-md);
   white-space: nowrap;
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-toast.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* ============================
   Product single (gallery + info)
   ============================ */
.product-detail {
   padding: 48px 0 64px;
}

.product-detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: start;
}

/* Without this, the gallery column defaults to min-width: auto as a grid
   item; its Swiper (a flex row of 100%-wide, aspect-ratio slides) creates a
   circular sizing dependency that blows the column out to a huge intrinsic
   size and collapses the info column next to it. */
.product-gallery {
   min-width: 0;
}

/* -- Gallery -- */
/* Swiper root: one image per slide, synced with the thumbs swiper below */
.product-gallery-main {
   position: relative;
   aspect-ratio: 1 / 1;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
   background: #f2f2f2;
}

.product-gallery-main .swiper-slide {
   width: 100%;
   height: 100%;
}

.product-gallery-main .product-gallery-lg-item {
   display: block;
   width: 100%;
   height: 100%;
   cursor: zoom-in;
}

.product-gallery-main img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Zoom hint icon, bottom corner of the main image, mirrors the prev/next
   reveal-on-hover behavior */
.product-gallery-zoom-hint {
   position: absolute;
   right: 14px;
   bottom: 14px;
   z-index: 2;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--color-surface);
   color: var(--color-text);
   font-size: 15px;
   box-shadow: var(--shadow-sm);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.product-gallery-main:hover .product-gallery-zoom-hint {
   opacity: 1;
}

/* Prev/next controls live on the main image and only appear on hover/focus */
.product-gallery-nav-btn {
   position: absolute;
   top: 50%;
   z-index: 2;
   width: 40px;
   height: 40px;
   transform: translateY(-50%);
   border: none;
   border-radius: 50%;
   background: var(--color-surface);
   color: var(--color-text);
   font-size: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-sm);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.product-gallery-main:hover .product-gallery-nav-btn,
.product-gallery-nav-btn:focus-visible {
   opacity: 1;
   pointer-events: auto;
}

.product-gallery-nav-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.product-gallery-nav-btn--prev {
   left: 14px;
}

.product-gallery-nav-btn--next {
   right: 14px;
}

/* Swiper root: slidesPerView "auto" reads each slide's own width below,
   so it behaves like the old horizontally-scrollable strip but with touch
   drag + the active thumb auto-scrolled into view for free */
.product-gallery-thumbs {
   margin-top: 16px;
}

.product-gallery-thumb {
   flex-shrink: 0;
   width: 64px;
   height: 64px;
   padding: 0;
   border: 2px solid transparent;
   border-radius: var(--radius);
   overflow: hidden;
   background: #f2f2f2;
   transition: border-color 0.2s ease;
}

.product-gallery-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* .swiper-slide-thumb-active is set by Swiper's thumbs module to mark
   whichever thumb matches the main swiper's current slide */
.product-gallery-thumb:hover,
.product-gallery-thumb.swiper-slide-thumb-active {
   border-color: var(--color-primary);
}

.product-share {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 22px;
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.product-share a {
   display: inline-flex;
   width: 32px;
   height: 32px;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-border);
   border-radius: 50%;
   color: var(--color-text);
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-share a:hover {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}

/* -- Info -- */
.product-info-title {
   font-size: 26px;
   font-weight: var(--font-weight-bold);
   line-height: 1.3;
   margin-bottom: 10px;
}

.product-info-brand {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
   margin-bottom: 14px;
}

.product-info-brand a {
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.product-info-brand a:hover {
   text-decoration: underline;
}

.product-info-rating {
   display: flex;
   align-items: center;
   gap: 8px;
   padding-bottom: 16px;
   margin-bottom: 18px;
   border-bottom: 1px solid var(--color-border);
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.product-info-stars {
   display: inline-flex;
   gap: 2px;
   color: var(--color-star);
   font-size: 14px;
}

.product-info-rating a:hover {
   color: var(--color-primary-dark);
   text-decoration: underline;
}

.product-info-price {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 18px;
}

.product-info-price-current {
   font-size: 28px;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
}

.product-info-price-old {
   font-size: var(--font-size-base);
   color: var(--color-muted);
   text-decoration: line-through;
}

.product-info-price-off {
   padding: 3px 10px;
   border-radius: 999px;
   background: var(--color-accent-pink);
   color: var(--color-accent-pink-text);
   font-size: 12px;
   font-weight: var(--font-weight-semibold);
}

.product-info-desc {
   color: var(--color-muted);
   line-height: 1.7;
   margin-bottom: 22px;
}

.product-info-perks {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 26px;
}

.product-info-perks li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

.product-info-perks i {
   color: var(--color-primary);
   font-size: var(--font-size-md);
}

.product-info-variant {
   margin-bottom: 22px;
}

.product-info-variant-label {
   display: block;
   margin-bottom: 10px;
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-sm);
}

.product-info-sizes {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.product-info-size {
   min-width: 46px;
   height: 38px;
   padding: 0 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-info-size:hover {
   border-color: var(--color-primary);
}

.product-info-size.is-active {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}

.product-info-colors {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

/* Each swatch reads its color from the --swatch-color custom property set
   inline in the markup, rather than a modifier class per color, so adding
   a new option is just another button instead of a new CSS rule too. The
   white border plus a separate box-shadow ring (instead of one colored
   border) keeps the true swatch color unobscured, with a visible gap
   between the color and the active-state ring around it. */
.product-info-color {
   width: 32px;
   height: 32px;
   padding: 0;
   border: 2px solid var(--color-surface);
   border-radius: 50%;
   background: var(--swatch-color);
   box-shadow: 0 0 0 1px var(--color-border);
   transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-info-color:hover {
   transform: scale(1.08);
}

.product-info-color.is-active {
   box-shadow: 0 0 0 2px var(--color-primary);
}

.product-info-actions {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 22px;
}

.product-qty {
   display: flex;
   align-items: center;
   gap: 2px;
   height: 48px;
   padding: 0 6px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
}

.product-qty-btn {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   border: 1px solid var(--color-primary);
   border-radius: 50%;
   background: transparent;
   color: var(--color-primary-dark);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease;
}

.product-qty-btn:hover {
   background: var(--color-primary);
   color: #fff;
}

.product-qty-input {
   width: 34px;
   border: none;
   background: transparent;
   text-align: center;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   -moz-appearance: textfield;
}

.product-qty-input::-webkit-outer-spin-button,
.product-qty-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.product-add-to-cart {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 1 1 200px;
   height: 48px;
   padding: 0 28px;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease;
   border: 1px solid var(--color-border);
}

.product-add-to-cart:hover,
.product-add-to-cart:focus-visible {
   background: var(--color-primary-dark);
}

.product-icon-btn {
   position: relative;
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
   color: var(--color-text);
   font-size: var(--font-size-md);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-icon-btn:hover .product-card-tooltip,
.product-icon-btn:focus-visible .product-card-tooltip {
   opacity: 1;
   transform: translate(-50%, 0);
}

.product-icon-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.product-info-meta {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding-top: 20px;
   border-top: 1px solid var(--color-border);
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.product-info-meta-label {
   margin-right: 4px;
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.product-info-meta a {
   color: var(--color-primary-dark);
}

.product-info-meta a:hover {
   text-decoration: underline;
}

.product-info-stock {
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary-dark);
}

/* -- Tabs: description / additional info / reviews -- */
.product-tabs-section {
   padding: 0 0 64px;
}

.product-tabs {
   display: flex;
   gap: 32px;
   border-bottom: 1px solid var(--color-border);
   overflow-x: auto;
}

.product-tabs-btn {
   flex-shrink: 0;
   padding: 0 0 16px;
   border: none;
   border-bottom: 2px solid transparent;
   background: none;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   letter-spacing: 0.4px;
   text-transform: uppercase;
   color: var(--color-muted);
   cursor: pointer;
   transition: color 0.2s ease;
}

.product-tabs-btn:hover {
   color: var(--color-text);
}

.product-tabs-btn.is-active {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.product-tabs-panels {
   padding-top: 32px;
   max-width: 900px;
}

.product-tabs-panel p {
   color: var(--color-muted);
   line-height: 1.8;
   margin-bottom: 18px;
}

.product-tabs-heading {
   margin: 28px 0 16px;
   font-size: 19px;
   font-weight: var(--font-weight-bold);
}

.product-tabs-spec-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0 0 22px;
   padding: 18px 0;
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
}

.product-tabs-spec-list li {
   display: flex;
   gap: 16px;
   font-size: var(--font-size-sm);
}

.product-tabs-spec-list li span:first-child {
   flex: 0 0 180px;
   color: var(--color-muted);
}

.product-tabs-spec-list li span:last-child {
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary-dark);
}

/* Additional info table */
.product-tabs-table-wrap {
   overflow-x: auto;
}

.product-tabs-table {
   width: 100%;
   max-width: 700px;
   border-collapse: collapse;
}

.product-tabs-table tr {
   border-bottom: 1px solid var(--color-border);
}

.product-tabs-table th,
.product-tabs-table td {
   padding: 14px 16px;
   text-align: left;
   font-size: var(--font-size-sm);
}

.product-tabs-table th {
   width: 45%;
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.product-tabs-table td {
   color: var(--color-muted);
}

/* Reviews: Q&A list + rating summary */
.product-reviews-grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr;
   gap: 48px;
   max-width: none;
   align-items: start;
}

.qa-item {
   display: flex;
   gap: 18px;
   padding: 22px 0;
   border-bottom: 1px solid var(--color-border);
}

.qa-item:first-of-type {
   padding-top: 0;
}

.qa-author {
   flex: 0 0 88px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 4px;
}

.qa-avatar {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 4px;
}

.qa-author-name {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.qa-author-since {
   font-size: 12px;
   color: var(--color-muted);
}

.qa-content {
   flex: 1;
   min-width: 0;
}

.qa-stars {
   display: inline-flex;
   gap: 2px;
   margin-bottom: 8px;
   color: var(--color-star);
   font-size: 13px;
}

.qa-text {
   margin-bottom: 10px;
   color: var(--color-text);
   line-height: 1.7;
}

.qa-footer {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   font-size: var(--font-size-xs);
   color: var(--color-muted);
}

.qa-reply {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: none;
   background: none;
   padding: 0;
   font-family: inherit;
   font-size: inherit;
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary-dark);
   cursor: pointer;
}

.qa-reply:hover {
   text-decoration: underline;
}

.qa-reply[aria-expanded="true"] i {
   transform: rotate(90deg);
}

.qa-reply i {
   transition: transform 0.15s ease;
}

/* Reply box: hidden until "Reply" is clicked */
.qa-reply-form {
   margin-top: 14px;
}

.qa-reply-form textarea {
   width: 100%;
   min-height: 90px;
   padding: 12px 16px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   font-family: inherit;
   font-size: var(--font-size-sm);
   color: var(--color-text);
   background: var(--color-surface);
   resize: vertical;
}

.qa-reply-form textarea::placeholder {
   color: var(--color-muted);
}

.qa-reply-form textarea:focus {
   outline: none;
   border-color: var(--color-primary);
}

.qa-reply-submit {
   display: block;
   margin-top: 10px;
   padding: 10px 24px;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   cursor: pointer;
   transition: background 0.2s ease;
}

.qa-reply-submit:hover,
.qa-reply-submit:focus-visible {
   background: var(--color-primary-dark);
}

/* Existing replies (e.g. a store reply) nested under a comment */
.qa-reply-thread {
   margin: 14px 0;
   padding-left: 18px;
   border-left: 2px solid var(--color-card-border);
}

.qa-reply-item {
   display: flex;
   gap: 12px;
}

.qa-reply-item + .qa-reply-item {
   margin-top: 16px;
}

.qa-reply-item-avatar {
   flex-shrink: 0;
   width: 34px;
   height: 34px;
   border-radius: 50%;
}

/* Store reply: icon badge in an <span> */
span.qa-reply-item-avatar {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary);
   color: #fff;
   font-size: 14px;
}

/* Customer reply: a real photo in an <img> */
img.qa-reply-item-avatar {
   object-fit: cover;
}

.qa-reply-item-body {
   flex: 1;
   min-width: 0;
}

.qa-reply-item-meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 6px;
}

.qa-reply-item-name {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.qa-reply-item-badge {
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--color-section-mint);
   color: var(--color-primary-dark);
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.3px;
}

.qa-reply-item-date {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
}

.qa-reply-item-text {
   color: var(--color-muted);
   line-height: 1.7;
}

/* Reviews (Guest): shown instead of the "Add a review" form when a visitor
   isn't logged in, since they can't comment or reply */
.reviews-guest-notice {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-top: 40px;
   padding: 32px 24px;
   border: 1px dashed var(--color-border);
   border-radius: var(--radius);
   text-align: center;
   background: var(--color-section-mint);
}

.reviews-guest-notice i {
   font-size: 22px;
   color: var(--color-primary);
}

.reviews-guest-notice p {
   color: var(--color-muted);
   font-size: var(--font-size-sm);
}

.reviews-guest-notice-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 28px;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease;
}

.reviews-guest-notice-btn:hover,
.reviews-guest-notice-btn:focus-visible {
   background: var(--color-primary-dark);
}

.product-reviews-summary {
   padding: 24px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-section-mint);
}

.reviews-summary-score {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
}

.reviews-summary-stars {
   display: inline-flex;
   gap: 3px;
   color: var(--color-star);
   font-size: 18px;
}

.reviews-summary-value {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.reviews-summary-bars {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 20px;
}

.reviews-summary-bars li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: var(--font-size-xs);
   color: var(--color-muted);
}

.reviews-summary-bar-label {
   flex: 0 0 40px;
}

.reviews-summary-bar-track {
   flex: 1;
   height: 8px;
   border-radius: 999px;
   background: var(--color-tab-inactive-bg);
   overflow: hidden;
}

.reviews-summary-bar-fill {
   display: block;
   height: 100%;
   border-radius: 999px;
   background: var(--color-primary);
}

.reviews-summary-link {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   text-decoration: underline;
}

.reviews-summary-link:hover {
   color: var(--color-primary-dark);
}

/* Reviews: "Add a review" form */
.review-form {
   max-width: 900px;
   margin-top: 40px;
   padding-top: 32px;
   border-top: 1px solid var(--color-border);
}

.review-form-rating {
   display: inline-flex;
   gap: 4px;
   margin-bottom: 20px;
}

.review-form-star {
   border: none;
   background: none;
   padding: 0;
   font-size: 16px;
   color: var(--color-border);
   cursor: pointer;
   transition: color 0.15s ease;
}

.review-form-star.is-active {
   color: var(--color-star);
}

.review-form-fields {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.review-form-fields input,
.review-form-fields textarea {
   width: 100%;
   padding: 14px 20px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   font-family: inherit;
   font-size: var(--font-size-base);
   color: var(--color-text);
   background: var(--color-surface);
}

.review-form-fields input::placeholder,
.review-form-fields textarea::placeholder {
   color: var(--color-muted);
}

.review-form-fields input:focus,
.review-form-fields textarea:focus {
   outline: none;
   border-color: var(--color-primary);
}

.review-form-fields textarea {
   min-height: 160px;
   resize: vertical;
}

.review-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

.review-form-submit {
   align-self: flex-start;
   padding: 16px 36px;
   border: none;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   transition: background 0.2s ease;
}

.review-form-submit:hover,
.review-form-submit:focus-visible {
   background: var(--color-primary-dark);
}

/* ============================
   Search modal
   ============================ */
.search-modal {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: none;
   padding: 72px 16px;
   overflow-y: auto;
}

.search-modal.is-open {
   display: block;
}

.search-modal-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(20, 24, 22, 0.6);
}

.search-modal-panel {
   position: relative;
   z-index: 1;
   max-width: 720px;
   margin: 0 auto;
   border-radius: var(--radius);
   background: var(--color-surface);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
   overflow: hidden;
}

.search-modal-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px;
   border-bottom: 1px solid var(--color-border);
}

.search-modal-icon {
   flex-shrink: 0;
   color: var(--color-muted);
   font-size: var(--font-size-lg);
}

.search-modal-input {
   flex: 1;
   min-width: 0;
   border: none;
   font-family: inherit;
   font-size: var(--font-size-base);
   color: var(--color-text);
}

.search-modal-input:focus {
   outline: none;
}

.search-modal-close {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border: none;
   background: none;
   color: var(--color-muted);
   font-size: 22px;
   transition: color 0.2s ease;
}

.search-modal-close:hover,
.search-modal-close:focus-visible {
   color: var(--color-text);
}

.search-modal-results {
   max-height: 70vh;
   overflow-y: auto;
}

.search-results-summary {
   padding: 16px 20px 4px;
   color: var(--color-muted);
   font-size: var(--font-size-sm);
}

.search-results-summary strong {
   color: var(--color-text);
}

.search-results-group {
   padding: 12px 20px 30px;
}

.search-results-group + .search-results-group {
   border-top: 1px solid var(--color-border);
}

.search-results-group-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 10px;
}

.search-results-group-title {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.search-results-group-count {
   margin-left: 6px;
   font-weight: var(--font-weight-medium);
   color: var(--color-muted);
}

.search-results-goto {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border: 1.5px solid var(--color-primary-dark);
   border-radius: 999px;
   color: var(--color-primary-dark);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease, color 0.2s ease;
}

.search-results-goto:hover,
.search-results-goto:focus-visible {
   background: var(--color-primary-dark);
   color: #fff;
}

.search-results-list {
   display: flex;
   flex-direction: column;
}

.search-result-item + .search-result-item {
   border-top: 1px solid var(--color-border);
}

.search-result-link {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 10px 4px;
   color: inherit;
   text-decoration: none;
   border-radius: 6px;
   transition: background 0.15s ease;
}

.search-result-link:hover,
.search-result-link:focus-visible {
   background: var(--color-topbar-bg);
}

.search-result-thumb {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   border-radius: 6px;
   overflow: hidden;
   background: #f2f2f2;
}

.search-result-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.search-result-info {
   flex: 1;
   min-width: 0;
}

.search-result-title {
   display: block;
   overflow: hidden;
   color: var(--color-text);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
}

.search-result-sku {
   display: block;
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   margin-top: 5px;
}

.search-result-price {
   flex-shrink: 0;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.search-no-results {
   padding: 32px 20px 40px;
   text-align: center;
}

.search-no-results-icon {
   font-size: 40px;
   color: var(--color-border);
}

.search-no-results-title {
   margin: 12px 0 16px;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.search-no-results-title em {
   color: var(--color-primary-dark);
   font-style: normal;
}

.search-no-results-tips {
   max-width: 380px;
   margin: 0 auto;
   text-align: left;
   color: var(--color-muted);
   font-size: var(--font-size-sm);
   line-height: 1.7;
}

.search-suggestions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin-top: 20px;
}

.search-suggestion-chip {
   padding: 6px 16px;
   border: 1px solid var(--color-border);
   border-radius: 999px;
   background: var(--color-surface);
   color: var(--color-primary-dark);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   transition: background 0.15s ease, border-color 0.15s ease;
}

.search-suggestion-chip:hover,
.search-suggestion-chip:focus-visible {
   background: var(--color-topbar-bg);
   border-color: var(--color-primary-dark);
}

/* ============================
   Aside drawer (right-edge slide-in)
   Shared component behind the imported pages' "Added to cart" and
   order-detail popups (.cart-aside-overlay, .history-aside-overlay, etc. -
   see account.html, error.html and friends), opened by initCartAside in
   index.js. Structural classes below are load-bearing: initCartAside
   looks for .close-cart-aside specifically, and every drawer instance
   already on those pages uses this exact markup - renaming anything here
   means updating that markup too. Colors/spacing adapted to this site's
   own tokens rather than the generic palette the component shipped with.
   ============================ */
._lock {
   overflow: hidden;
}

.modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 1002;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.7);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay._active {
   opacity: 1;
   visibility: visible;
}

.modal-body-right {
   position: relative;
   right: -100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: right 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
   transition-delay: 0.2s;
}

.modal-overlay._active .modal-body-right {
   right: 0;
   opacity: 1;
   visibility: visible;
}

.add-cart-modal-body {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 450px;
   height: 100%;
   background: var(--color-surface);
   border-radius: var(--radius);
   overflow-y: scroll;
}

.add-cart-modal-body::-webkit-scrollbar {
   width: 5px;
}

.add-cart-modal-body::-webkit-scrollbar-track {
   margin-top: 70px;
   background: var(--color-topbar-bg);
}

.add-cart-modal-body::-webkit-scrollbar-thumb {
   background: var(--color-muted);
}

.add-cart-modal-body::-webkit-scrollbar-thumb:hover {
   background: var(--color-text);
}

.cart-md-header {
   position: sticky;
   top: 0;
   z-index: 1;
   padding: 20px;
   background: var(--color-surface);
}

.cart-md-header h3 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 22px;
}

.cart-md-header h3 i {
   color: var(--color-primary);
}

.cart-md-header i.close-cart-aside {
   cursor: pointer;
}

.cart-md-footer {
   position: sticky;
   bottom: 0;
   margin-top: auto;
   padding: 20px;
   background: var(--color-surface);
   box-shadow: 0 -10px 10px -10px var(--color-border);
}

.cart-md-total h5 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: var(--font-size-md);
}

.cart-md-total p {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.cart-md-button {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 20px;
}

.cart-md-button a {
   flex: 1 1 0;
   min-width: 0;
   padding: 16px 12px;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   text-align: center;
   white-space: nowrap;
   opacity: 0.85;
   transition: opacity 0.2s ease;
}

.cart-md-button a.outline {
   background: var(--color-border);
   color: var(--color-text);
}

.cart-md-button a:hover {
   opacity: 1;
}

.cart-md-products-wrap {
   display: flex;
   flex-direction: column;
   gap: 25px;
   padding: 20px;
}

.cart-md-products-wrap .product {
   display: flex;
   gap: 12px;
}

.product-img .badge-discount {
   position: absolute;
   top: -5px;
   left: 8px;
   padding: 4px 8px;
   border-radius: 6px;
   background: var(--color-primary);
   color: #fff;
   font-size: 12px;
   font-weight: var(--font-weight-semibold);
}

/* Fixed-size image column - .product-img had no width/flex-shrink of its
   own, so each row's actual width followed that image's intrinsic aspect
   ratio instead of the 125px box the img rule below was aiming for. */
.cart-md-products-wrap .product-img {
   flex-shrink: 0;
   width: 125px;
}

.cart-md-products-wrap .product-img > a {
   display: block;
}

.cart-md-products-wrap .product img {
   width: 125px;
   height: 125px;
   object-fit: cover;
   border-radius: var(--radius);
}

.cart-md-products-wrap .product-cart-title {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-top: 7px;
}

.cart-md-products-wrap .product-cart-title h3 a {
   color: var(--color-text);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   line-height: 1.35;
   transition: color 0.2s ease;
}

.cart-md-products-wrap .product-cart-title h3 a:hover {
   color: var(--color-primary);
}

.cart-md-products-wrap .product-cart-title h4 {
   margin-top: 5px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
}

.cart-md-products-wrap .product-cart-title h4.qty {
   position: relative;
   display: inline-flex;
   align-self: flex-start;
   gap: 4px;
   font-size: 13px;
   color: var(--color-muted);
}

.cart-md-products-wrap .product-cart-title h4.qty .price-old {
   position: absolute;
   top: -8px;
   right: -30px;
   font-size: 11px;
   color: var(--color-muted);
   text-decoration: line-through;
}

.cart-md-products-wrap .product-cart-title h4.qty .price-new {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

/* .md-cart (cart-drawer line items) only adds positioning within its own
   flex-column layout - the shared pill look (border/radius/overflow) now
   lives on the base rule below so the bare .qty-control used in cart.html's
   table rows gets it too. Without a display here, .qty-control defaulted
   to block with inline-block children, which wrapped the second button
   onto its own line instead of sitting in a row. */
.qty-control {
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
}

.qty-control.md-cart {
   align-self: flex-start;
   margin-top: 5px;
}

.qty-control button {
   flex-shrink: 0;
   width: 34px;
   height: 34px;
   border: none;
   background: var(--color-topbar-bg);
   color: var(--color-text);
   cursor: pointer;
}

.qty-control button:disabled {
   color: var(--color-border);
   cursor: not-allowed;
}

.qty-control input {
   flex-shrink: 0;
   width: 44px;
   height: 34px;
   border: none;
   text-align: center;
   outline: none;
   -moz-appearance: textfield;
}

/* cart.html's table column is narrower than the drawer's, so its stepper
   runs a touch more compact to avoid crowding the Total column next to it */
.cart-qty .qty-control button {
   width: 26px;
   height: 26px;
}

.cart-qty .qty-control input {
   width: 32px;
   height: 26px;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* ============================
   Account pages (account.html, adresses.html, personal-info.html,
   settings.html, history.html, wish-list.html, help-center.html,
   policy(-page).html, terms-conditions(-page).html)
   Backdrop for the mobile account-menu drawer below - one static
   <div class="page-dark-overlay"></div> per page, toggled by
   initAccountMenu in index.js. Distinct from .drawer-overlay (the
   header's off-canvas system): this one is scoped to a single aside
   that only exists on these 11 pages, so it doesn't need that system's
   multi-drawer mutual-exclusion logic.
   ============================ */
.page-dark-overlay {
   position: fixed;
   inset: 0;
   z-index: 1000;
   visibility: hidden;
   opacity: 0;
   background: rgba(0, 0, 0, 0.5);
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-dark-overlay._active {
   visibility: visible;
   opacity: 1;
}

.account-page {
   --bs-gutter-x: 1.5rem;
   /* matches the 40px top gap every other inner page (.shop-content,
      .compare-empty, etc.) puts between the breadcrumb bar and its
      own content - the account shell's outer .container has no
      padding of its own to provide that. */
   padding-top: 40px;
}

.account-info {
   padding: 15px;
   border-radius: var(--radius);
   background: #f2f2f2;
}

.account-info h3 {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
}

.acc-cnt-name {
   font-size: 24px;
   font-weight: var(--font-weight-medium);
}

.account-menu-close {
   display: none;
}

.account-menu-header {
   display: none;
}

.account-menu-title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-muted);
   text-transform: uppercase;
   letter-spacing: 0.03em;
}

.account-nav ul h2 {
   padding: 0 5px;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
}

.account-nav ul a {
   padding: 10px 15px;
   border-radius: var(--radius);
   transition: background 0.2s ease;
}

.account-nav ul a i {
   font-size: var(--font-size-md);
   color: var(--color-muted);
   transition: color 0.2s ease;
}

.account-nav ul a span {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
   transition: color 0.2s ease;
}

.account-nav ul a._active,
.account-nav ul a:hover {
   background: #f2f2f2;
}

.account-nav ul a._active i,
.account-nav ul a:hover i {
   color: var(--color-primary);
}

.account-nav ul a._active span,
.account-nav ul a:hover span {
   color: var(--color-text);
}

.account-menu-trigger {
   display: none;
}

.results-query-wrapper {
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

.results-query-wrapper span {
   font-weight: var(--font-weight-semibold);
}

/* ============================
   Auth pages (login.html, register.html, reset-email.html,
   reset-password.html)
   ============================ */
._auth {
   padding: 40px 0 64px;
}

.auth-form .form-text h1 {
   font-size: 28px;
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
}

.auth-form .form-text p {
   max-width: 65%;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-135, 1.35);
   color: var(--color-muted);
}

.auth-form-wr label {
   padding: 3px;
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

.auth-form-wr .form-control {
   border-radius: 4px !important;
   font-size: var(--font-size-base);
}

.auth-form-wr .form-control::placeholder {
   font-size: var(--font-size-sm);
}

.auth-form-wr .form-control:focus {
   outline: none !important;
   box-shadow: none !important;
   border-color: var(--color-primary);
}

.auth-button {
   padding: 15px;
   border: none;
   border-radius: 4px;
   background: var(--color-primary);
   color: #fff;
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease;
}

.auth-form-wr .auth-button:hover,
a.auth-button:hover {
   background: var(--color-primary-dark);
}

.auth-form-wr .auth-link {
   color: var(--color-primary);
   border-bottom: 1px solid var(--color-primary);
   transition: color 0.2s ease;
}

.auth-form-wr .auth-link.no-b {
   border: none;
}

.auth-form-wr .auth-link:hover {
   color: var(--color-primary-dark);
}

.auth-collage img {
   width: 100%;
   object-fit: cover;
   border-radius: var(--radius);
}

.collage-main {
   height: 320px;
}

.collage-small {
   height: 150px;
}

/* ============================
   Error page (error.html)
   ============================ */
.error-page {
   padding: 100px 0;
}

.error-page-wrapper {
   max-width: 520px;
   margin: 0 auto;
}

.error-code {
   margin-bottom: 8px;
   font-size: 140px;
   font-weight: var(--font-weight-bold);
   line-height: 1;
   color: var(--color-primary);
}

.error-page h2 {
   margin-bottom: 12px;
   font-size: 32px;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.error-page p {
   margin-bottom: 32px;
   font-size: var(--font-size-md);
   color: var(--color-muted);
}

.error-home-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 32px;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease;
}

.error-home-btn:hover {
   background: var(--color-primary-dark);
}

.error-home-btn i {
   font-size: var(--font-size-lg);
}

/* ============================
   Legal / plain-text content block (policy, terms-conditions,
   personal-info, settings, adresses, help-center wrapper)
   ============================ */
.checkout-form .form-label {
   font-size: var(--font-size-sm);
}

.checkout-form .contact-info p,
.checkout-form p.text-muted {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
   line-height: 1.7;
}

.checkout-form .form-control {
   border-radius: 4px;
   font-size: var(--font-size-base);
}

.checkout-form .form-control:focus {
   outline: none;
   box-shadow: none;
   border-color: var(--color-primary);
}

/* ============================
   Custom dropdown ("cig-select") - account.html, history.html,
   wish-list.html status/date filters
   ============================ */
.cig-select {
   position: relative;
   width: 220px;
}

.cig-select .selected {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
   font-size: var(--font-size-sm);
   color: var(--color-text);
   cursor: pointer;
}

.cig-select .arrow {
   margin-left: auto;
   opacity: 0.6;
}

.cig-select .options {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   z-index: 10;
   display: none;
   width: 100%;
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
   box-shadow: var(--shadow-md);
}

.cig-select .option {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
   font-size: var(--font-size-sm);
   color: var(--color-text);
   cursor: pointer;
}

.cig-select .option:hover {
   background: #f2f2f2;
}

.cig-select .option._default {
   font-weight: var(--font-weight-medium);
}

.cig-select .option._active {
   background: var(--color-topbar-bg);
}

.cig-select._open .options {
   display: block;
}

/* order-status dots, reused next to .circle in the order table */
.dot {
   width: 10px;
   height: 10px;
   flex-shrink: 0;
   border-radius: 50%;
}

.dot.all {
   background: var(--color-muted);
}

.dot.pending {
   background: var(--color-badge-orange);
}

.dot.processing {
   background: var(--color-accent-blue-text);
}

.dot.completed {
   background: var(--color-primary);
}

.dot.cancelled {
   background: var(--color-badge-pink);
}

/* ============================
   Order table + order-detail drawer (account.html "My Orders";
   the drawer itself reuses .modal-overlay/.add-cart-modal-body etc.
   from the Aside drawer section above)
   ============================ */
.cart-table {
   width: 100%;
}

.cart-table-head,
.cart-row {
   display: flex;
   column-gap: 10px;
   border-bottom: 1px solid var(--color-border);
}

/* Header cells carry their own 18px padding (.cart-table-h below), but a
   data row's cells don't - it sat flush against its own top/bottom border,
   and the product thumbnail's corner checkbox (.cart-remove-inner) had no
   room to sit outside the image without this. */
.cart-row {
   padding: 16px 20px;
}

.cart-table-h {
   flex: 1;
   min-width: 0;
   padding: 18px;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   color: var(--color-muted);
   text-align: left;
   text-transform: uppercase;
}

.sortable {
   cursor: pointer;
   user-select: none;
}

.sortable::after {
   content: " \21C5";
   opacity: 0.4;
}

.cart-row > div {
   display: flex;
   flex: 1;
   min-width: 0;
   align-items: center;
   padding: 18px;
}

.cart-row .text-item span {
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

span.circle {
   width: 10px;
   height: 10px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--color-primary);
}

.details button {
   padding: 10px 16px;
   border: none;
   border-radius: 4px;
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   transition: background 0.2s ease;
}

.details button:hover {
   background: var(--color-primary-dark);
}

.history-pagination {
   margin-top: 1rem;
   margin-bottom: 1rem !important;
}

.history-pagination .pagination-item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 35px;
   height: 35px;
   border: 1px solid var(--color-border);
   border-radius: 5px;
   color: var(--color-text);
   transition: background 0.2s ease;
}

.history-pagination .pagination-item:hover {
   background: #f2f2f2;
}

.detail-block {
   padding: 5px 15px;
}

.detail-block h3 {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
}

.detail-item-row-md .prim,
.detail-item-row-md .second {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
}

/* ============================
   Address card (adresses.html)
   ============================ */
.address-card {
   position: relative;
   height: 100%;
   padding: 20px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
}

.address-card.default {
   border-color: var(--color-primary);
}

.address-card-header {
   gap: 10px;
   margin-bottom: 20px;
}

.address-card-header h4 {
   margin-bottom: 0;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
}

.address-card .badge-default {
   flex: none;
   padding: 6px 14px;
   border: none;
   border-radius: 4px;
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   transition: background 0.2s ease;
}

.address-card .badge-default:hover {
   background: var(--color-primary-dark);
}

.address-card .address-actions {
   gap: 15px;
   margin-top: 15px;
}

.address-card .address-actions i {
   font-size: var(--font-size-md);
   color: var(--color-muted);
   cursor: pointer;
   transition: color 0.2s ease;
}

.address-card .address-actions i:hover {
   color: var(--color-primary);
}

.address-card .address-actions i.bi-trash:hover {
   color: var(--color-badge-pink);
}

/* ============================
   Help Center accordion (help-center.html)
   ============================ */
.help-accordion .accordion-item {
   margin-bottom: 16px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
}

.help-accordion .accordion-item:last-child {
   margin-bottom: 0;
}

.help-accordion .accordion-button {
   --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2312a488'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   gap: 12px;
   padding: 18px 20px;
   background: var(--color-surface);
   box-shadow: none;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.help-accordion .accordion-button i {
   font-size: var(--font-size-md);
   color: var(--color-primary);
}

.help-accordion .accordion-button:not(.collapsed) {
   background: var(--color-topbar-bg);
   color: var(--color-primary-dark);
   box-shadow: none;
}

.help-accordion .accordion-button:focus {
   border-color: var(--color-border);
   box-shadow: none;
}

.help-accordion .accordion-body {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 20px;
}

.help-info-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 14px 16px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   transition: border-color 0.2s ease;
}

.help-info-item:hover {
   border-color: var(--color-primary);
}

.help-info-icon {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-md);
}

.help-info-text h4 {
   margin-bottom: 2px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.help-info-text p {
   margin: 0;
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.help-info-text p a {
   color: var(--color-muted);
   transition: color 0.2s ease;
}

.help-info-text p a:hover {
   color: var(--color-primary);
}

/* ============================
   Product grid (wish-list.html + history.html) - both reuse the
   .arrival-card component from index.html/shop.html in this grid
   wrapper; wish-list.html's cards just start with wishlist-toggle
   pre-marked is-active (favorited), history.html's don't.
   ============================ */
.wish-list-wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

/* ============================
   "Added to cart" modal - opened by any product card's Add to Cart
   button (.arrival-card-cart-btn / .product-card-cart), populated live
   with that card's own name/image/price/discount - see
   initCardAddToCart in index.js.
   ============================ */
.added-to-cart-modal .modal-dialog {
   max-width: 420px;
}

.added-to-cart-modal .modal-footer {
   border-top: 0;
}

.added-title {
   font-size: var(--font-size-md);
}

.product-info h6 {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
   line-height: 1.4;
}

.product-info .qty {
   font-size: var(--font-size-sm);
}

.modal-added-img-wr img {
   width: 90px;
   height: 90px;
   object-fit: cover;
   border-radius: var(--radius);
}

.modal-added-img-wr .badge-discount {
   position: absolute;
   top: -6px;
   left: -6px;
   padding: 4px 8px;
   border-radius: 6px;
   background: var(--color-primary);
   color: #fff;
   font-size: 11px;
   font-weight: var(--font-weight-semibold);
}

.added-actions button.closeAddModal {
   flex: 1;
   padding: 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   background: var(--color-surface);
   color: var(--color-text);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   transition: background 0.2s ease;
}

.added-actions button.closeAddModal:hover {
   background: #f2f2f2;
}

.added-actions a {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px;
   border-radius: var(--radius);
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   text-align: center;
   transition: background 0.2s ease;
}

.added-actions a:hover {
   background: var(--color-primary-dark);
}


/* ============================
   Logout confirmation modal (account sidebar's "Logout" link, all
   account-shell pages) - a plain Bootstrap modal that shipped with no
   styling of its own and no way to open it; the sidebar link now
   triggers it via data-bs-toggle instead of navigating straight to
   login.html.
   ============================ */
.logout-confirm-modal .modal-content {
   border: none;
   border-radius: var(--radius);
}

.logout-confirm-modal .modal-body {
   padding: 32px 28px;
}

.logout-confirm-icon {
   display: flex;
   width: 56px;
   height: 56px;
   align-items: center;
   justify-content: center;
   margin: 0 auto 16px;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   color: var(--color-primary);
   font-size: 22px;
}

.logout-confirm-title {
   margin-bottom: 8px;
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.logout-confirm-text {
   margin-bottom: 24px;
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.logout-confirm-actions .btn {
   padding: 12px;
   border: none;
   border-radius: var(--radius);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   transition: background 0.2s ease, color 0.2s ease;
}

.logout-cancel-btn {
   background: var(--color-border);
   color: var(--color-text);
}

.logout-cancel-btn:hover {
   background: #d9d9d9;
}

.logout-confirm-btn {
   background: var(--color-primary);
   color: #fff;
}

.logout-confirm-btn:hover {
   background: var(--color-primary-dark);
   color: #fff;
}

/* ============================
   Checkout steps tracker (cart.html, checkout.html, order-confirmation.html)
   Step state is a class swap: ._done (past), ._active (current),
   plain (future). The connecting line is two stacked pseudo-elements -
   a full grey back-line and a green progress line drawn over it, whose
   width is driven by the --progress custom property set inline per page
   ("--progress: 33%" etc.) since the class states alone don't encode how
   far to fill it.
   ============================ */
.checkout-steps.small {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   margin-bottom: 24px;
}

.checkout-steps.small::before {
   content: "";
   position: absolute;
   top: 16px;
   left: 16px;
   right: 16px;
   height: 2px;
   background: var(--color-border);
   z-index: 0;
}

.checkout-steps.small::after {
   content: "";
   position: absolute;
   top: 16px;
   left: 16px;
   height: 2px;
   background: var(--color-primary);
   /* --progress is a unitless 0-1 ratio, not a percentage: the fill
      needs to stop at the same 16px inset the grey ::before track stops
      at (right: 16px), and a raw "width: var(--progress)" percentage
      would instead resolve against this element's full un-inset width,
      overshooting past the last dot at higher ratios. */
   width: calc((100% - 32px) * var(--progress, 0));
   transition: width 0.3s ease;
   z-index: 0;
}

.checkout-steps.small .step {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   min-width: 50px;
}

.checkout-steps.small .step-index {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--color-surface);
   border: 2px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: var(--font-weight-semibold);
   color: var(--color-muted);
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.checkout-steps.small .step-label {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
}

.checkout-steps.small .step._done .step-index {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}

.checkout-steps.small .step._done .step-label {
   color: var(--color-primary);
}

.checkout-steps.small .step._active .step-index {
   border-color: var(--color-primary);
   color: var(--color-primary);
   box-shadow: 0 0 0 6px rgba(18, 164, 136, 0.15);
}

.checkout-steps.small .step._active .step-label {
   color: var(--color-primary);
   font-weight: var(--font-weight-semibold);
}

/* ============================
   Custom checkbox (cart item select / select-all, cart.html)
   ============================ */
.custom-checkbox {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.custom-checkbox-label {
   position: relative;
   display: inline-flex;
   width: 20px;
   height: 20px;
   border: 2px solid var(--color-border);
   border-radius: 5px;
   background-color: var(--color-surface);
   cursor: pointer;
   transition: border-color 0.2s ease;
}

.custom-checkbox-label:hover {
   border-color: var(--color-primary);
}

.custom-checkbox:checked + .custom-checkbox-label {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
}

.custom-checkbox:checked + .custom-checkbox-label::after {
   content: "";
   position: absolute;
   left: 5px;
   top: 2px;
   width: 6px;
   height: 11px;
   border: solid #fff;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.custom-checkbox:indeterminate + .custom-checkbox-label {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
}

.custom-checkbox:indeterminate + .custom-checkbox-label::after {
   content: "";
   position: absolute;
   left: 3px;
   top: 8px;
   width: 10px;
   height: 2px;
   background-color: #fff;
}

/* ============================
   Cart page (cart.html) - the product/price/qty/total/remove columns
   reuse .cart-table/.cart-row/.cart-table-h from the account "My
   Orders" table above, scoped with :not(._history) so the order-history
   table's own layout stays untouched.
   ============================ */
.cart-table:not(._history) .cart-table-h:first-child {
   flex: 2.5;
}

.cart-row .cart-product {
   flex: 2.5;
   display: flex;
   align-items: center;
   gap: 14px;
}

.cart-product-thumb {
   position: relative;
   flex-shrink: 0;
}

.cart-product-thumb img {
   width: 100px;
   height: 100px;
   object-fit: cover;
   border-radius: var(--radius);
}

.cart-remove-inner {
   position: absolute;
   /* Clear of the 20px checkbox label entirely (was -6px, well inside the
      thumbnail's bounds - the checkbox sat on top of the product photo
      instead of beside it) - the row's own padding above gives it room to
      sit outside the image instead of overlapping its corner. */
   top: -20px;
   left: -20px;
}

.cart-product-info {
   flex: 1;
   min-width: 150px;
}

.cart-product-info strong a {
   color: var(--color-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   overflow: hidden;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   line-height: 1.35;
   transition: color 0.2s ease;
}

.cart-product-info strong a:hover {
   color: var(--color-primary);
}

.cart-code {
   display: block;
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.stock {
   font-size: var(--font-size-sm);
}

.stock.in-stock {
   color: var(--color-primary);
}

.cart-price {
   white-space: nowrap;
}

.cart-price .price-old {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   text-decoration: line-through;
}

.cart-price .price-new {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
}

.cart-price .badge-discount {
   display: inline-flex;
   align-self: flex-start;
   padding: 3px 8px;
   border-radius: 6px;
   background: var(--color-primary);
   color: #fff;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
}

.cart-total {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.cart-remove-cell {
   justify-content: center;
}

.cart-remove {
   background: none;
   border: none;
   font-size: var(--font-size-lg);
   color: var(--color-muted);
   cursor: pointer;
   transition: color 0.2s ease;
}

.cart-remove:hover {
   color: var(--color-badge-pink);
}

/* matches the 40px top gap every other inner page (.shop-content,
   .compare-empty, etc.) puts between the breadcrumb bar and its own
   content - cart.html/checkout.html/order-confirmation.html's shared .cart section
   had no padding of its own to provide that. */
.cart {
   padding: 40px 0 64px;
}

.cart-layer {
   max-width: 74%;
   width: 100%;
}

.cart-info a {
   font-size: var(--font-size-base);
   color: var(--color-text);
   transition: color 0.2s ease;
}

.cart-info a:hover {
   color: var(--color-badge-pink);
}

.clear-cart._has-selection {
   color: var(--color-badge-pink);
}

.clear-cart i {
   font-size: var(--font-size-md);
   width: 20px;
   height: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.cart-info a.view-cart-info {
   font-size: var(--font-size-sm);
}

.cart-info a.view-cart-info:hover {
   color: var(--color-primary);
}

.cart-info .hd-cart p {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-regular, 400);
}

.cart-info .hd-cart p span {
   font-weight: var(--font-weight-semibold);
}

.cart-info h3 {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-medium);
}

/* ============================
   Order summary sidebar (cart.html, checkout.html) + receipt totals
   (order-confirmation.html reuses .totals-body/.body-item for its own
   line items)
   ============================ */
.totals-wrapper {
   max-width: 30%;
   width: 100%;
   border-radius: var(--radius);
   overflow: hidden;
   position: sticky;
   top: 100px;
}

.info-text {
   font-size: var(--font-size-sm);
   line-height: 1.65;
   color: var(--color-text);
   font-weight: var(--font-weight-medium);
   background-color: var(--color-topbar-bg);
   padding: 10px;
   border-radius: var(--radius);
}

.info-text .item-succes {
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.info-text i {
   font-size: 20px;
   color: var(--color-primary-dark);
   margin-right: 4px;
}

.totals-header {
   margin-top: 10px;
   padding: 10px;
   border-bottom: 1px solid var(--color-border);
}

.totals-header h3 {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-medium);
   color: var(--color-primary);
   margin-bottom: 0;
}

.totals-header .edit-cart {
   color: var(--color-text);
   font-size: var(--font-size-sm);
   transition: color 0.2s ease;
}

.totals-header .edit-cart:hover {
   color: var(--color-primary);
}

.totals-body .total-products img {
   width: 44px;
   height: 44px;
   object-fit: cover;
   border: 1px solid var(--color-border);
   border-radius: 4px;
}

.totals-body .total-products .other-img {
   width: 44px;
   height: 44px;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   background-color: var(--color-topbar-bg);
}

.totals-body .total-products .other-img span {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
   color: var(--color-muted);
}

.chk-view-all-btn {
   border: none;
   outline: none;
   font-size: var(--font-size-sm);
   padding: 8px 12px;
   border-radius: 4px;
   background-color: var(--color-primary);
   color: #fff;
   transition: background 0.2s ease;
}

.chk-view-all-btn:hover {
   background-color: var(--color-primary-dark);
}

.totals-body .body-item {
   padding-bottom: 10px;
}

.totals-body .body-item.total {
   padding-top: 20px;
   border-top: 1px solid var(--color-border);
}

.totals-body .body-item h3 {
   font-size: var(--font-size-md);
   color: var(--color-text);
   font-weight: var(--font-weight-medium);
}

.totals-body .body-item span {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
   color: var(--color-text);
}

.totals-body .body-item .promo-label {
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

.totals-body .body-item h3.total {
   font-size: var(--font-size-lg);
}

.totals-body .body-item span.total {
   font-size: var(--font-size-lg);
}

.totals-body .body-item.promo-code input {
   width: 65%;
}

.totals-body .body-item.promo-code button {
   width: 35%;
}

.totals-body .body-item.promo-code input,
.totals-body .body-item.promo-code button {
   padding: 7px;
   font-size: var(--font-size-base);
   border-radius: 4px;
   outline: none;
}

.totals-body .body-item.promo-code input {
   border: 1px solid var(--color-border);
   letter-spacing: 1.2px;
   text-transform: uppercase;
}

.totals-body .body-item.promo-code input:focus {
   border-color: var(--color-primary);
}

.totals-body .body-item.promo-code button {
   border: none;
   background-color: var(--color-primary);
   color: #fff;
   letter-spacing: 1.1px;
   transition: background 0.2s ease;
}

.totals-body .body-item.promo-code button:hover {
   background-color: var(--color-primary-dark);
}

.totals-body .body-item.promo-code .promo-list .promo-success {
   font-size: var(--font-size-sm);
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-semibold);
}

.totals-body .body-item.promo-code .promo-list i {
   font-size: var(--font-size-xl);
   color: var(--color-text);
   cursor: pointer;
   transition: color 0.2s ease;
}

.totals-body .body-item.promo-code .promo-list i:hover {
   color: var(--color-badge-pink);
}

.totals-body .body-item.promo-code .promo-list .promo-success span {
   font-size: var(--font-size-sm);
   color: var(--color-primary);
}

.checkout-button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 13px 20px;
   border: none;
   outline: none;
   border-radius: 4px;
   font-size: var(--font-size-md);
   color: #fff !important;
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
   background-color: var(--color-primary);
   transition: background 0.2s ease;
}

.checkout-button i {
   font-size: var(--font-size-md);
}

.checkout-button:hover {
   background-color: var(--color-primary-dark);
}

.continue-shoppoing,
.points-info {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   text-decoration: none;
   color: var(--color-text);
   transition: color 0.2s ease;
}

.continue-shoppoing:hover {
   color: var(--color-primary);
}

/* ============================
   Checkout page (checkout.html) - saved address picker (reuses
   .address-card from adresses.html with a .selectable modifier),
   payment method cards, terms agreement checkbox
   ============================ */
.address-card.selectable {
   display: block;
   width: 100%;
   cursor: pointer;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.address-card.selectable:hover {
   border-color: var(--color-primary);
}

.btn-check:checked + .address-card.selectable {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(18, 164, 136, 0.12);
}

.address-card.selectable.new-address {
   height: 100%;
   min-height: 64px;
   color: var(--color-muted);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   border-style: dashed;
}

.btn-check:checked + .address-card.selectable.new-address {
   color: var(--color-primary);
}

.delivery-info .form-control[readonly] {
   background-color: #f2f2f2;
   color: var(--color-muted);
}

.payment-card {
   display: block;
   padding: 16px 18px;
   border-radius: var(--radius);
   border: 1px solid var(--color-border);
   cursor: pointer;
   background: var(--color-surface);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-card:hover {
   border-color: var(--color-primary);
}

.btn-check:checked + .payment-card {
   border-color: var(--color-primary);
   background: var(--color-primary);
}

.btn-check:checked + .payment-card .payment-title,
.btn-check:checked + .payment-card .payment-subtitle,
.btn-check:checked + .payment-card .payment-icon {
   color: #fff;
}

.payment-title {
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-md);
   color: var(--color-text);
}

.payment-subtitle {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   margin-top: 6px;
}

.payment-icon {
   font-size: 24px;
   color: var(--color-primary);
}

.agreement-check {
   margin-top: 20px;
}

.agreement-check .form-check-input {
   width: 18px;
   height: 18px;
   cursor: pointer;
}

.agreement-check .form-check-label {
   margin-left: 8px;
   font-size: var(--font-size-base);
   color: var(--color-text);
}

.agreement-check .form-check-label a {
   color: var(--color-primary);
   font-weight: var(--font-weight-medium);
}

.agreement-check .form-check-label a:hover {
   text-decoration: underline;
}

/* ============================
   Order confirmation (order-confirmation.html) - .receipt-totals reuses
   .totals-body/.body-item from the order summary sidebar above
   ============================ */
.receipt-wrapper {
   width: 100%;
   max-width: 640px;
   margin: 40px auto 60px;
   gap: 24px;
}

.receipt-success i {
   font-size: 56px;
   color: var(--color-primary);
   margin-bottom: 12px;
}

.receipt-success h2 {
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   margin-bottom: 6px;
}

.receipt-success p {
   color: var(--color-muted);
   max-width: 420px;
}

.receipt-card {
   width: 100%;
   background: var(--color-surface);
   border-radius: var(--radius);
   box-shadow: var(--shadow-md);
   padding: 28px;
}

.receipt-head {
   padding-bottom: 20px;
   border-bottom: 1px solid var(--color-border);
}

.receipt-head h3 {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   margin-bottom: 4px;
}

.receipt-order-no {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.receipt-date {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
   white-space: nowrap;
}

.receipt-info-grid {
   display: flex;
   flex-direction: row;
   gap: 20px;
   padding: 20px 0;
   border-bottom: 1px solid var(--color-border);
}

.receipt-info-item {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: 10px;
   flex: 1;
}

.receipt-info-item i {
   font-size: var(--font-size-lg);
   color: var(--color-primary);
   margin-top: 5px;
}

.receipt-info-item h4 {
   font-size: var(--font-size-xs);
   text-transform: uppercase;
   color: var(--color-muted);
   font-weight: var(--font-weight-semibold);
   margin-bottom: 5px;
}

.receipt-info-item p {
   font-size: var(--font-size-sm);
   color: var(--color-text);
}

.receipt-products {
   padding: 20px 0;
   border-bottom: 1px solid var(--color-border);
}

.receipt-products h4 {
   font-size: var(--font-size-sm);
   text-transform: uppercase;
   color: var(--color-muted);
   font-weight: var(--font-weight-semibold);
   margin-bottom: 14px;
}

.receipt-product-row {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 14px;
   padding: 10px 0;
}

.receipt-product-row img {
   width: 52px;
   height: 52px;
   object-fit: cover;
   border-radius: var(--radius);
   flex-shrink: 0;
}

.receipt-product-info {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
   min-width: 0;
}

.receipt-product-info strong {
   font-size: var(--font-size-base);
   color: var(--color-text);
}

.receipt-product-info span {
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.receipt-product-total {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   white-space: nowrap;
}

.receipt-totals {
   padding-top: 20px;
}

.receipt-actions {
   width: 100%;
}

.receipt-actions .checkout-button,
.receipt-home-button {
   flex: 1;
   padding: 13px 16px;
   font-size: var(--font-size-md);
   white-space: nowrap;
   cursor: pointer;
}

.receipt-home-button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: none;
   outline: none;
   border-radius: 4px;
   color: var(--color-text) !important;
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
   background-color: var(--color-border);
   transition: background 0.2s ease;
}

.receipt-home-button:hover {
   background-color: #d9d9d9;
}

@media print {
   .site-header,
   .site-footer,
   .breadcrumb-bar,
   .checkout-steps,
   .receipt-success,
   .receipt-actions,
   .modal-overlay,
   .page-dark-overlay {
      display: none !important;
   }

   .receipt-card {
      box-shadow: none;
      padding: 0;
   }
}

/* ============================
   Promo concept modals (demo.html) - a design-review page: each button
   opens one plain Bootstrap modal previewing a promotional-popup concept.
   ============================ */
.promo-demo-section {
   padding: 40px 0 0;
}

.promo-demo-section h6 {
   margin: 0 0 4px;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
}

.promo-demo-section p {
   margin: 0 0 14px;
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.promo-demo-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   padding-bottom: 40px;
}

.promo-demo-btn {
   border: 1px solid var(--color-border);
   background: var(--color-surface);
   color: var(--color-text);
   font-family: inherit;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   padding: 9px 16px;
   border-radius: var(--radius);
   cursor: pointer;
   transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.promo-demo-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary-dark);
   background: var(--color-topbar-bg);
}

.promo-concept-modal .modal-content {
   position: relative;
   border: none;
   border-radius: var(--radius);
   color: var(--color-text);
}

.promo-concept-modal .modal-body {
   padding: 32px 30px 30px;
}

.promo-concept-modal .btn-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background-color: var(--color-topbar-bg);
   background-size: 12px;
   opacity: 1;
   z-index: 2;
   transition: background-color 0.2s ease;
}

.promo-concept-modal .btn-close:hover {
   background-color: #dcefe5;
}

.promo-concept-modal .m-eyebrow {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--color-primary-dark);
   margin: 0 0 10px;
}

.promo-concept-modal .m-title {
   margin: 0 0 10px;
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
}

.promo-concept-modal .m-body {
   margin: 0 0 20px;
   font-size: var(--font-size-sm);
   line-height: 1.6;
   color: var(--color-muted);
}

.promo-concept-modal .m-cta {
   width: 100%;
   border: none;
   border-radius: 4px;
   background: var(--color-primary);
   color: #fff;
   font-family: inherit;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   padding: 13px 20px;
   cursor: pointer;
   transition: background 0.2s ease;
}

.promo-concept-modal .m-cta:hover {
   background: var(--color-primary-dark);
}

.promo-concept-modal .m-cta.ghost {
   background: none;
   border: 1.5px solid var(--color-border);
   color: var(--color-text);
}

.promo-concept-modal .m-cta.ghost:hover {
   background: var(--color-topbar-bg);
   border-color: var(--color-primary);
}

.promo-concept-modal .m-skip {
   display: block;
   text-align: center;
   margin-top: 12px;
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   background: none;
   border: none;
   width: 100%;
   font-family: inherit;
   cursor: pointer;
}

.promo-concept-modal .m-skip:hover {
   color: var(--color-primary-dark);
}

.promo-concept-modal .m-field {
   width: 100%;
   border: 1.5px solid var(--color-border);
   border-radius: 4px;
   padding: 12px 14px;
   font-family: inherit;
   font-size: var(--font-size-sm);
   margin-bottom: 10px;
   color: var(--color-text);
   background: var(--color-surface);
}

.promo-concept-modal .m-field:focus {
   outline: none;
   border-color: var(--color-primary);
}

.promo-concept-modal .m-fine {
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   text-align: center;
   margin: 10px 0 0;
   line-height: 1.5;
}

.promo-concept-modal .m-center {
   text-align: center;
}

.promo-badge-ring {
   width: 84px;
   height: 84px;
   border-radius: 50%;
   background: var(--color-topbar-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin: 0 auto 18px;
}

.promo-badge-ring b {
   font-size: 22px;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
   line-height: 1;
}

.promo-badge-ring span {
   font-size: 9.5px;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.06em;
   color: var(--color-primary-dark);
   text-transform: uppercase;
   margin-top: 2px;
}

.promo-ship-row {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   color: var(--color-primary-dark);
}

.promo-ship-track {
   width: 100%;
   height: 8px;
   border-radius: 999px;
   background: var(--color-topbar-bg);
   overflow: hidden;
   margin-bottom: 8px;
}

.promo-ship-fill {
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
   width: 72%;
}

.promo-ship-meta {
   display: flex;
   justify-content: space-between;
   font-size: var(--font-size-xs);
   color: var(--color-muted);
   font-variant-numeric: tabular-nums;
   margin-bottom: 20px;
}

.promo-ship-meta strong {
   color: var(--color-primary-dark);
   font-weight: var(--font-weight-bold);
}

.promo-season-modal .modal-dialog {
   max-width: 620px;
}

.promo-season-modal .modal-content {
   flex-direction: row;
   overflow: hidden;
}

.promo-season-modal .modal-body {
   padding: 0;
   display: contents;
}

.promo-season-media {
   width: 42%;
   min-width: 50%;
   flex-shrink: 0;
   align-self: stretch;
}

.promo-season-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.promo-season-copy {
   flex: 1;
   min-width: 0;
   padding: 32px 30px 30px;
}

.promo-season-flag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #f5e6d3;
   color: #8a5a1f;
   border-radius: 999px;
   padding: 4px 10px 4px 8px;
   font-size: 10.5px;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin-bottom: 12px;
}

.promo-season-flag::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #c98a3e;
   flex-shrink: 0;
}

.promo-cd-row {
   display: flex;
   gap: 8px;
   margin-bottom: 22px;
}

.promo-cd-cell {
   flex: 1;
   background: var(--color-topbar-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 10px 4px;
   text-align: center;
}

.promo-cd-cell b {
   display: block;
   font-size: 21px;
   font-weight: var(--font-weight-bold);
   font-variant-numeric: tabular-nums;
   color: var(--color-primary-dark);
}

.promo-cd-cell span {
   display: block;
   font-size: 9px;
   font-weight: var(--font-weight-semibold);
   letter-spacing: 0.07em;
   text-transform: uppercase;
   color: var(--color-muted);
   margin-top: 3px;
}

.promo-cart-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 18px;
}

.promo-cart-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: var(--font-size-sm);
   color: var(--color-muted);
}

.promo-cart-item .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--color-primary);
   flex-shrink: 0;
}

.promo-code-chip {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #f5e6d3;
   border: 1px dashed #c98a3e;
   border-radius: var(--radius);
   padding: 10px 14px;
   margin-bottom: 18px;
   font-size: var(--font-size-sm);
   color: #6b4a1c;
}

.promo-code-chip b {
   letter-spacing: 0.06em;
   color: #8a5a1f;
}

.promo-arrival-modal .modal-content {
   flex-direction: row;
   overflow: hidden;
}

.promo-arrival-modal .modal-body {
   padding: 0;
   display: contents;
}

.promo-arrival-media {
   width: 42%;
   flex-shrink: 0;
   display: flex;
   align-items: stretch;
   justify-content: center;
}

.promo-arrival-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.promo-arrival-copy {
   padding: 26px 26px 20px;
   display: flex;
   flex-direction: column;
}

.promo-arrival-price {
   font-size: 20px;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
   margin: 4px 0 16px;
   font-variant-numeric: tabular-nums;
}

.promo-letter-modal .modal-content {
   background: var(--color-topbar-bg);
}

.promo-sprig {
   display: flex;
   justify-content: center;
   margin-bottom: 14px;
   color: var(--color-primary-dark);
}

.promo-m-italic i {
   font-style: italic;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
}