:root {
  /* Black / white / yellow tactical-brand palette (Condor Outdoor style). Variable
     names are kept as-is (originally mapped to an olive-and-khaki palette) so every
     existing rule that references them just picks up the new colors automatically. */
  --wlm-forest-dark: #0d0d0d;
  --wlm-forest: #1a1a1a;
  --wlm-forest-mid: #333333;
  --wlm-sand: #c9a64b;
  --wlm-sand-light: #eaeaea;
  --wlm-cream: #ffffff;
  --wlm-ink: #111111;
  --wlm-blue-dark: #1a1a1a;
  --wlm-blue: #6b6b6b;
  --wlm-danger: #b5482c;
  /* Off-white panel background for the homepage "Featured Products" panel — barely warmer than
     --wlm-cream (pure white), just enough to read as its own framed block against the page. */
  --wlm-cream-panel: #fbfaf7;
  /* Dark charcoal, scoped to the mega-menu panel only — a step lighter than --wlm-forest-dark
     (the near-black used site-wide for the header/nav bar), so the open panel reads as its own
     distinct surface rather than pure black. Deliberately a separate token, not a reuse of
     --wlm-forest (used pervasively elsewhere for buttons/badges/borders), so this stays isolated
     to the one component it was requested for. */
  --wlm-charcoal-panel: #1a1a1a;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;

}

* {
  box-sizing: border-box;
}

/* overflow-x: hidden used to live on both html AND body, which (per the CSS overflow
   spec's mixed-axis rule: an unset overflow-y computes to auto whenever overflow-x isn't
   visible) made BOTH elements independently scrollable — a real, competing scroll
   container on body swallowed the page's actual overflow while html (the nominal
   document.scrollingElement) reported almost no scrollable height of its own. That
   mismatch is what produced a large blank region during/after scrolling: content was
   really there, just laid out inside a second scroll context the browser wasn't
   compositing predictably alongside the sticky header. html keeps overflow-x: hidden
   (there's nothing above it to bleed horizontally past anyway) as the sole scrolling
   element, which is what position: sticky on the header assumes.

   body still needs *some* horizontal clipping though — off-canvas elements like
   .side-nav are deliberately positioned past the viewport edge (position: fixed +
   transform) when closed, and that width always counts toward scrollWidth regardless of
   clipping. Using overflow-x: hidden here would reintroduce the exact dual-scroll-
   container bug above. overflow-x: clip is the fix: it visually clips the same as
   hidden, but (per spec) does *not* trigger the mixed-axis auto-coercion, so body's
   overflow-y stays visible and html remains the only scroll container. */
html {
  height: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--wlm-ink);
  background-color: var(--wlm-cream);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.site-main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--wlm-forest-dark);
  letter-spacing: 0.02em;
}

a {
  color: var(--wlm-forest-mid);
  text-decoration: none;
}

a:hover {
  color: var(--wlm-sand);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--wlm-forest-mid);
}

/* The whole header stack (promo strips, topbar, header, main nav) stays pinned to the top of
   the viewport while scrolling, so search/cart/nav are always reachable without scrolling back
   up. A shadow appears once it's actually stuck, so it doesn't look glued to the page at rest. */
.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--wlm-cream);
}

.site-header-sticky.is-stuck {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Top utility bar */
.topbar {
  background-color: var(--wlm-forest-dark);
  color: var(--wlm-sand-light);
  font-size: 0.8rem;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.topbar-inner i {
  margin-right: 4px;
}

/* Header */
.site-header {
  background-color: var(--wlm-forest-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  min-height: 60px;
}

.header-branding {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-col {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-col-end {
  justify-self: end;
}

@media (max-width: 767.98px) {
  .header-inner {
    gap: 12px;
  }

  /* Icon-only on mobile (matching .account-label, already icon-only at all widths) — the text
     labels plus counts for 4 icons plus the lang/currency switches don't fit a narrow header. */
  .cart-label,
  .favorites-label {
    display: none;
  }

  .header-actions {
    gap: 14px;
  }

  /* Even icon-only, the search icon + lang switch + currency dropdown + 4 icons don't reliably
     fit one line next to the hamburger/logo on the narrowest phones — wrap to a second row
     within the header rather than clipping anything off-screen. */
  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }
}

/* Secondary black nav bar under the header — desktop only; the mobile side-nav drawer
   already covers category browsing on small screens. */
.main-nav {
  position: relative;
  background-color: var(--wlm-forest-dark);
}

.main-nav-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 14px 0;
}

.main-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: white;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: 6px;
}

.main-nav-link:hover,
.main-nav-link.active,
.main-nav-dropdown.open > .main-nav-link {
  color: var(--wlm-sand);
}

/* Thin gold underline on the active/hovered top-level tab — an absolutely-positioned
   pseudo-element rather than a real border-bottom, so it doesn't shift the nav bar's height. */
.main-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wlm-sand);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}

.main-nav-link:hover::after,
.main-nav-link.active::after,
.main-nav-dropdown.open > .main-nav-link::after {
  transform: scaleX(1);
}

/* Small gold diamond straddling the underline's midpoint, centered under the tab. A separate
   ::before (not part of the ::after underline) so it can fade in/out independently — scaling it
   with the underline's scaleX(0) would squash it instead of hiding it cleanly. */
.main-nav-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 6px;
  height: 6px;
  background: var(--wlm-sand);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.main-nav-link:hover::before,
.main-nav-link.active::before,
.main-nav-dropdown.open > .main-nav-link::before {
  opacity: 1;
}

/* Small gold caret bridging the nav tab to its open mega-menu panel below — a separate real
   element (not a third pseudo-element; ::before/::after are already the diamond/underline above)
   rendered only on dropdown triggers, shown only while that dropdown is actually open. Sits in
   the gap created by .main-nav-dropdown-panel's margin-top so it visually points from the tab
   down into the panel. */
.main-nav-dropdown-caret {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--wlm-sand);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 61;
}

.main-nav-dropdown.open > .main-nav-link .main-nav-dropdown-caret {
  opacity: 1;
}

/* "Special Sales" tab — a solid highlighted block filling the full height of the nav bar, same
   red used elsewhere on the site for sale badges/ribbons (.sale-badge, .sale-ribbon), rather than
   the thin gold-underline treatment every other nav item gets. The negative vertical margin
   cancels out .main-nav-inner's own 14px padding so the red background actually touches the top
   and bottom edges of the bar instead of floating as a smaller pill inside it. */
.main-nav-link-sale {
  background: linear-gradient(120deg, #e0592f, #c8342f);
  color: white !important;
  font-weight: 700;
  padding: 17px 20px;
  margin: -14px 0;
}

.main-nav-link-sale:hover {
  background: linear-gradient(120deg, #c8342f, #e0592f);
  color: white !important;
}

.main-nav-link-sale::after {
  display: none;
}

/* "My Coupon" tab — same full-height treatment as "Special Sales" right next to it, but a
   deliberately darker, cooler maroon (no orange) so the two red tabs read as distinct at a
   glance rather than duplicates. Only rendered when the visitor actually has an active welcome
   coupon (see newWelcomeCoupon in _Layout.cshtml). */
.main-nav-link-coupon {
  background: linear-gradient(120deg, #9c1c3f, #641026);
  color: white !important;
  font-weight: 700;
  padding: 17px 20px;
  margin: -14px 0;
}

.main-nav-link-coupon:hover {
  background: linear-gradient(120deg, #641026, #9c1c3f);
  color: white !important;
}

.main-nav-link-coupon::after {
  display: none;
}

.main-nav-dropdown {
  position: static;
}

.main-nav-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 230px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
  padding: 10px 0;
  margin-top: 14px;
  z-index: 60;
  border-radius: 0 0 6px 6px;
}

/* Opens on click (toggled by main-nav-dropdown.js) and stays open until clicked again or
   clicked outside — hover-to-open was closing prematurely when the cursor crossed the gap
   between the "Shop" link and the panel below it. :focus-within is kept as a fallback for
   keyboard users tabbing straight into the panel's links. */
.main-nav-dropdown.open .main-nav-dropdown-panel,
.main-nav-dropdown:focus-within .main-nav-dropdown-panel {
  display: block;
}

.main-nav-dropdown-panel a {
  display: block;
  padding: 9px 22px;
  color: var(--wlm-ink);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 0.9rem;
}

.main-nav-dropdown-panel a:hover {
  background: var(--wlm-sand-light);
}

/* Full-width mega-menu variant — a "curtain" that drops down covering the full viewport width,
   anchored to .main-nav (position: relative) rather than to the individual trigger, so it's the
   same width no matter which category opened it. .main-nav-dropdown itself is position: static
   for this reason (see above). A CSS @keyframes animation (not a transition) plays each time
   `display` flips to `block`, since transitions can't animate a display:none -> block change. */
.main-nav-dropdown-panel-mega {
  left: 0;
  right: 0;
  margin-top: 0;
  top: 100%;
  border-radius: 0;
  padding: 0;
  background: var(--wlm-charcoal-panel);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  animation: mainNavMegaCurtain 0.22s ease;
}

@keyframes mainNavMegaCurtain {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-nav-mega-inner {
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding: 12px 0 14px;
  scrollbar-color: var(--wlm-sand) var(--wlm-forest-mid);
}

.main-nav-mega-inner::-webkit-scrollbar {
  width: 8px;
}

.main-nav-mega-inner::-webkit-scrollbar-track {
  background: var(--wlm-forest-mid);
}

.main-nav-mega-inner::-webkit-scrollbar-thumb {
  background: var(--wlm-sand);
  border-radius: 4px;
}

.main-nav-mega-top {
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.main-nav-mega-viewall {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  color: var(--wlm-sand) !important;
  padding: 0 !important;
}

.main-nav-mega-subitem {
  padding: 2px 4px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.83rem;
  line-height: 1.25;
  /* !important needed: .main-nav-dropdown-panel a (class + element selector) outranks this
     single-class selector, so a plain declaration here loses to its font-weight: 500 despite
     coming later in the file. Items should read as clearly lighter than the column header above
     them, not the same visual weight. */
  font-weight: 400 !important;
}

.main-nav-mega-subitem:hover {
  background: var(--wlm-sand) !important;
  color: var(--wlm-forest-dark) !important;
}

/* Brand/attribute quick-filter chips under a subcategory link (e.g. under "T-Shirts": Sentinel ·
   Talon · Crew Neck · Short Sleeve) — see BuildQuickFilters in _Layout.cshtml. Only rendered when
   real values exist for that subcategory, so this silently stays empty until data is populated. */
.main-nav-mega-subfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 0 4px 8px;
}

.main-nav-mega-subfilter-chip {
  padding: 2px 9px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.72rem !important;
  text-transform: none;
  letter-spacing: normal;
}

.main-nav-mega-subfilter-chip:hover {
  background: var(--wlm-sand) !important;
  color: var(--wlm-forest-dark) !important;
}

/* Brand chips get a touch more visual weight than spec chips (neck type, sleeve length, ...) so a
   dense row still reads as two distinct kinds of information at a glance. */
.main-nav-mega-subfilter-chip-brand {
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
}

.main-nav-mega-body {
  display: flex;
  gap: 36px;
}

/* One column per group (Tops/Bottoms/etc. — see BuildMegaColumns in _Layout.cshtml), or per
   stacked group of groups for Apparel (see apparelMenuColumnGroups in _Layout.cshtml). auto-fill +
   minmax lets the grid reflow to fewer columns per row on narrower desktop/tablet widths without
   any extra breakpoint rules, and to more on wide monitors; Gear & Accessories alone renders 6. */
.main-nav-mega-columns {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 24px;
  align-content: start;
}

/* Non-Apparel categories render their subitem links as direct children of .main-nav-mega-column
   (no .main-nav-mega-group wrapper — see the "else" branch in _Layout.cshtml), so this column's
   own flex gap was landing between every individual item, not just between grouped sections —
   the tight Apparel look (~4px between items, from .main-nav-mega-subitem's own padding) has no
   group wrapper standing between it and this gap. Kept at 0 so all categories get that same tight
   item density; the seam Apparel actually needs between stacked groups within one column (e.g.
   Featured + Pants) now lives on .main-nav-mega-group's own margin-top instead, so it only ever
   applies where a group wrapper actually exists. */
.main-nav-mega-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.main-nav-mega-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main-nav-mega-group + .main-nav-mega-group {
  margin-top: 20px;
}

.main-nav-mega-column-header {
  position: relative;
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  color: var(--wlm-sand);
  margin: 0 0 8px;
  padding-bottom: 4px;
}

/* Gold underline at a fixed width, the same for every header regardless of how long that
   header's own text is — deliberately not sized to the text (a short header like "Pants" and a
   long one like "Colors & Brands" both get the same underline). */
.main-nav-mega-column-header::after {
  content: "";
  position: absolute;
  left: 0;
  width: 130px;
  bottom: 0;
  height: 1px;
  background: var(--wlm-sand);
}

/* Sub-label inside a curated mega-menu column (e.g. "Alpha Sizes" / "Waist Sizes" under the
   Apparel dropdown's Shop by Size column — see BuildApparelMenuAsync in _Layout.cshtml). Sits one
   step down from .main-nav-mega-column-header: same uppercase treatment, smaller and dimmer since
   it's a sub-grouping rather than the column's own title. A later sub-header in the same column
   gets breathing room from the group above it via margin-top. */
.main-nav-mega-subgroup-header {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 6px 0 1px;
}

.main-nav-mega-subgroup-header:first-child {
  margin-top: 0;
}

/* Promo image/caption/CTA for the category the panel belongs to. Swaps per hovered/focused
   subcategory (site.js) — starts out showing the category's own default image/caption so it's
   never empty on open, before any subitem has been hovered. */
.main-nav-mega-promo {
  display: flex;
  flex-direction: column;
  flex: 0 0 220px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
  padding-inline-start: 24px;
}

/* Two stacked <img> layers crossfade between each other (site.js toggles which has .active) —
   smoother than swapping a single <img>'s src, which can't transition natively. */
.main-nav-mega-promo-image-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wlm-forest-mid);
  margin-bottom: 12px;
}

.main-nav-mega-promo-image-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.main-nav-mega-promo-image-stack img.active {
  opacity: 1;
}

.main-nav-mega-promo p {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 14px;
  transition: opacity 0.2s ease;
}

.main-nav-mega-promo-cta {
  display: block;
  text-align: center;
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  padding: 12px 14px !important;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.main-nav-mega-promo-cta:hover {
  background: white !important;
}

/* Dims the page content below the curtain menu while any category dropdown is open, similar in
   spirit to .side-nav-overlay. Lives as the last child of .site-header-sticky (see
   _Layout.cshtml), right after <nav class="main-nav">, so "top: 100%" resolves against that
   sticky wrapper's own box — which ends exactly at the nav bar's bottom edge since nav is its
   last child — placing the overlay right below the header/topbar without covering them, then
   extending a full viewport height down. Toggled by main-nav-dropdown.js alongside .open. */
.main-nav-mega-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(10, 10, 10, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 55;
}

.main-nav-mega-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767.98px) {
  .main-nav {
    display: none;
  }

  .main-nav-mega-overlay {
    display: none;
  }
}

.brand {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--wlm-forest-dark);
}

.brand-mark-accent {
  color: var(--wlm-sand);
  margin-left: 6px;
}

.brand-logo {
  display: flex;
  align-items: center;
}

.brand-logo img {
  height: 41px;
  width: auto;
  display: block;
}

.brand:hover {
  color: var(--wlm-forest-dark);
}

/* Persistent centered search bar (desktop) vs. the click-to-open icon + slide-down panel
   (mobile, where a permanently-visible bar wouldn't fit in the header row) — same GET search to
   Products/Index either way, just two responsive presentations of the same functionality. */
.header-search-inline {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.header-search-inline input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 9px 14px;
  color: white;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  outline: none;
}

.header-search-inline input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.header-search-inline button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  background: none;
  color: var(--wlm-sand);
  font-size: 1rem;
  cursor: pointer;
}

.search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
}

.search-toggle:hover {
  color: var(--wlm-sand);
}

@media (max-width: 767.98px) {
  .header-search-inline {
    display: none;
  }

  .search-toggle {
    display: inline-flex;
  }
}

.header-search-panel {
  display: none;
  background: var(--wlm-sand-light);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.header-search-panel.open {
  display: block;
}

.header-search-panel-inner {
  padding: 22px 0;
}

.header-search-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.header-search-panel-top span {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wlm-forest-mid);
}

.header-search-close {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--wlm-forest-dark);
}

.header-search-form {
  display: flex;
  align-items: center;
  background: white;
  border-bottom: 2px solid var(--wlm-forest-dark);
}

.header-search-input {
  flex: 1;
  border: none;
  background: none;
  padding: 14px 8px;
  font-size: 1.5rem;
  font-family: var(--font-body);
  color: var(--wlm-ink);
  outline: none;
}

.header-search-submit {
  border: none;
  background: none;
  padding: 0 14px;
  font-size: 1.3rem;
  color: var(--wlm-forest-dark);
  cursor: pointer;
}

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

.account-menu .account-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 0.95rem;
  color: white;
  cursor: pointer;
}

.account-menu .account-toggle i {
  font-size: 1.3rem;
}

.account-label {
  display: none;
}

.account-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-avatar-lg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--wlm-sand-light);
}

.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wlm-cream);
  color: var(--wlm-forest-mid);
  font-size: 3rem;
  margin: 0 auto;
}

.account-dropdown {
  border-radius: 6px;
  border: 1px solid var(--wlm-sand-light);
}

.account-dropdown form {
  margin: 0;
}

.cart-link,
.favorites-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  color: white;
  white-space: nowrap;
}

.cart-label,
.favorites-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
}

/* Plain-text EN | AR toggle — each is a real form submit (Localization/SetLanguage), no
   open/close panel step like the currency switcher below. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch form {
  margin: 0;
}

.lang-switch-option {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.lang-switch-option:hover {
  color: var(--wlm-sand);
}

.lang-switch-option.active {
  color: white;
}

.lang-switch-divider {
  color: var(--wlm-sand);
  font-size: 0.85rem;
}

/* Header currency switcher (AED/USD) — click to open, matching the same pattern as the
   main-nav dropdown (JS-toggled "open" class rather than hover/focus). */
.currency-switch {
  position: relative;
}

.currency-switch-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: white;
  cursor: pointer;
}

.currency-switch-toggle:hover {
  color: var(--wlm-sand);
}

.currency-switch-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  padding: 6px 0;
  z-index: 60;
}

.currency-switch-panel.open {
  display: block;
}

.currency-switch-panel form {
  margin: 0;
}

.currency-switch-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 18px;
  font-size: 0.88rem;
  color: var(--wlm-ink);
  cursor: pointer;
}

.currency-switch-panel button:hover {
  background: var(--wlm-sand-light);
}

.currency-switch-panel button.active {
  font-weight: 700;
  color: var(--wlm-forest-dark);
}

.cart-count,
.favorites-count {
  font-weight: 700;
}

/* Heart toggle — overlaid on product-card images and next to Add to Cart on the detail page. */
.favorite-toggle {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--wlm-ink);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, color 0.15s ease;
}

.favorite-toggle:hover {
  transform: scale(1.08);
}

.favorite-toggle.active,
.favorite-toggle.active:hover {
  color: #e0334f;
}

.favorite-toggle-detail {
  position: static;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  font-size: 1.2rem;
}

.empty-favorites {
  text-align: center;
  padding: 64px 16px;
}

.empty-favorites i {
  font-size: 2.5rem;
  color: var(--wlm-sand);
  margin-bottom: 12px;
  display: inline-block;
}

.empty-favorites .btn-wlm {
  display: inline-block;
  margin-top: 16px;
}

/* Compare page (Views/Compare/Index.cshtml) */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--wlm-sand-light);
  text-align: center;
  vertical-align: middle;
  font-size: 0.9rem;
}

.compare-row-label {
  text-align: start;
  white-space: nowrap;
  color: var(--wlm-forest-mid);
  font-weight: 600;
  background: var(--wlm-cream);
}

.compare-col {
  position: relative;
  min-width: 200px;
}

.compare-remove-form {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
}

.compare-remove-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--wlm-sand-light);
  background: white;
  color: var(--wlm-ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.compare-remove-btn:hover {
  background: var(--wlm-danger);
  color: white;
  border-color: var(--wlm-danger);
}

.compare-image {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto 8px;
}

.compare-name {
  display: block;
  font-weight: 700;
  color: var(--wlm-forest-dark);
}

/* Menu toggle button */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: white;
  cursor: pointer;
  white-space: nowrap;
}

.menu-toggle:hover {
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

.menu-toggle i {
  font-size: 1.2rem;
}

/* Side nav (off-canvas drawer) */
.side-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1040;
}

.side-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background-color: var(--wlm-forest);
  box-shadow: 8px 0 30px rgba(10, 10, 10, 0.4);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.side-nav.open {
  transform: translateX(0);
}

.side-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.side-nav-title {
  font-family: var(--font-heading);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
}

.side-nav-close {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.side-nav-links {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.side-nav-links a {
  color: var(--wlm-sand-light);
  padding: 14px 22px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-nav-links a:hover {
  background-color: var(--wlm-forest-mid);
  color: white;
}

/* "Special Sales" — same red used for the desktop nav tab and the site's other sale badges,
   kept as a distinct highlighted row rather than blending into the plain drawer link list. */
.side-nav-links a.side-nav-link-sale {
  background: linear-gradient(120deg, #e0592f, #c8342f);
  color: white;
  font-weight: 700;
}

.side-nav-links a.side-nav-link-sale:hover {
  background: linear-gradient(120deg, #c8342f, #e0592f);
  color: white;
}

/* "My Coupon" — same darker maroon as the desktop nav tab, distinct from the orange-red of
   Special Sales right below it. */
.side-nav-links a.side-nav-link-coupon {
  background: linear-gradient(120deg, #9c1c3f, #641026);
  color: white;
  font-weight: 700;
}

.side-nav-links a.side-nav-link-coupon:hover {
  background: linear-gradient(120deg, #641026, #9c1c3f);
  color: white;
}

.side-nav-links hr {
  border-color: rgba(255, 255, 255, 0.15);
  margin: 10px 22px;
}

.side-nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.side-nav-item .side-nav-link {
  flex: 1;
}

.side-nav-preview-toggle {
  background: none;
  border: none;
  color: var(--wlm-sand-light);
  padding: 0 20px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  transition: transform 0.25s ease, color 0.15s ease;
}

.side-nav-preview-toggle:hover {
  color: white;
}

.side-nav-item.preview-open .side-nav-preview-toggle {
  transform: rotate(180deg);
  color: white;
}

.category-preview-panel {
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.15);
  transition: max-height 0.35s ease;
}

/* Tall enough for a category's subcategory groups (up to 6 for Gear & Accessories) plus the
   product-preview row below them; overflow-y handles anything still taller than that on short
   phone viewports rather than pushing the rest of the drawer off-screen. */
.side-nav-item.preview-open .category-preview-panel {
  max-height: min(70vh, 620px);
  overflow-y: auto;
}

/* Mobile accordion equivalent of the desktop mega-menu's column groups — same headers/grouping
   (BuildMegaColumns in _Layout.cshtml), stacked instead of laid out side by side since the drawer
   is much narrower than the full-width curtain. */
.side-nav-subgroups {
  padding: 14px 22px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.side-nav-subgroup-header {
  position: relative;
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--wlm-sand);
  margin-bottom: 14px;
  padding-bottom: 8px;
}

/* Gold underline at a fixed width, same as the desktop column header
   (.main-nav-mega-column-header) — not sized to the header text. */
.side-nav-subgroup-header::after {
  content: "";
  position: absolute;
  left: 0;
  width: 130px;
  bottom: 0;
  height: 1px;
  background: var(--wlm-sand);
}

/* Sub-label within an Apparel side-nav subgroup (e.g. "Alpha Sizes" / "Waist Sizes") — same role
   as .main-nav-mega-subgroup-header's desktop counterpart, sized down for the mobile pill rows. */
.side-nav-subgroup-subheader {
  display: block;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}

.side-nav-subgroup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.side-nav-subgroup-links a {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--wlm-sand-light);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.82rem;
  font-weight: 400;
}

.side-nav-subgroup-links a:hover {
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

/* Brand/attribute quick-filter chip (Sentinel, Crew Neck, Short Sleeve, ...) sitting right after
   its subcategory's own pill in the same wrapping row — deliberately smaller/dimmer so the
   subcategory itself still reads as the primary link. Only rendered when real values exist. */
.side-nav-subfilter-chip {
  padding: 3px 9px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.72rem !important;
}

.side-nav-subfilter-chip:hover {
  background: var(--wlm-sand) !important;
  border-color: var(--wlm-sand);
  color: var(--wlm-forest-dark) !important;
}

.side-nav-subfilter-chip-brand {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600;
}

.category-preview-row {
  display: flex;
  gap: 12px;
  padding: 16px 22px 6px;
  overflow-x: auto;
}

.category-preview-panel a.category-preview-card {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--wlm-sand-light);
  gap: 4px;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  transition: transform 0.15s ease;
}

.category-preview-panel a.category-preview-card:hover {
  background: none;
  color: white;
  transform: translateY(-4px);
}

.category-preview-image-wrap {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  display: block;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transform-style: preserve-3d;
  will-change: transform;
}

.category-preview-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-preview-name {
  font-size: 0.72rem;
  line-height: 1.25;
}

.category-preview-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wlm-sand);
}

.category-preview-panel a.category-preview-viewall {
  display: block;
  padding: 6px 22px 16px;
  font-size: 0.75rem;
  color: var(--wlm-sand);
}

.category-preview-panel a.category-preview-viewall:hover {
  color: white;
}

/* Floating navigation controls: back / forward / scroll-to-top */
.nav-fab-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: var(--wlm-forest);
  color: white;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.35);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.nav-fab:hover {
  background-color: var(--wlm-forest-mid);
  transform: translateY(-2px);
}

.nav-fab-top {
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}

.nav-fab-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.nav-fab-top:hover {
  background-color: white;
}

@media (max-width: 576px) {
  .nav-fab-stack {
    right: 14px;
    bottom: 14px;
  }

  .nav-fab {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }
}

/* Homepage top banner carousel (Views/Shared/HomeBanner, admin-managed under Home Banners).
   Full-bleed, wide "hero strip" aspect ratio on desktop; a taller ratio on mobile so a wide
   photo doesn't shrink down to a sliver on narrow screens. */
.home-banner-carousel {
  margin-bottom: 0;
}

.home-banner-image {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.home-banner-slide-link {
  display: block;
  position: relative;
  text-decoration: none;
}

.home-banner-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 6%;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.65) 0%, rgba(5, 5, 5, 0.15) 55%, rgba(5, 5, 5, 0) 80%);
}

.home-banner-caption h2 {
  color: white;
  font-size: 2.2rem;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  max-width: 600px;
}

.home-banner-caption p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  max-width: 480px;
  margin-bottom: 0;
}

.home-banner-carousel .carousel-control-prev,
.home-banner-carousel .carousel-control-next {
  width: 8%;
}

@media (max-width: 767.98px) {
  .home-banner-image {
    aspect-ratio: 4 / 3;
  }

  .home-banner-caption {
    padding: 18px 6%;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.75) 100%);
    justify-content: flex-end;
  }

  .home-banner-caption h2 {
    font-size: 1.5rem;
    max-width: 100%;
  }

  .home-banner-caption p {
    font-size: 0.9rem;
    max-width: 100%;
  }
}

/* Hero */
.hero {
  background-image: url('/images/hero-tactical-spotlight.jpg');
  background-size: cover;
  /* Gear composition sits right-of-center in the source photo (2000x900), vertically centered
     between empty headroom above the helmet and the reflective floor below the boots. At >=1422px
     wide (640px hero height x the image's ~2.22:1 aspect ratio) cover crops vertically only, so Y
     is what keeps the full helmet-to-boots figure in frame; X only starts cropping below that
     width. Same values for LTR and RTL — the background image itself doesn't flip, only the text
     block's alignment does. */
  background-position: 75% 50%;
  color: var(--wlm-cream);
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 40px 0;
  margin-bottom: 40px;
  position: relative;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-block;
  color: var(--wlm-sand);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.hero h1 {
  color: var(--wlm-cream);
  font-size: 3.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 640px;
}

.hero .accent {
  color: var(--wlm-sand);
}

.hero p {
  max-width: 520px;
  color: var(--wlm-cream);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 18px 0 38px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 80px;
}

.btn-wlm {
  display: inline-block;
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 30px;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-wlm:hover {
  background-color: white;
  color: var(--wlm-forest-dark);
}

.btn-wlm-outline {
  display: inline-block;
  background: transparent;
  color: var(--wlm-cream);
  border: 2px solid var(--wlm-sand-light);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 28px;
  border-radius: 4px;
  font-weight: 600;
}

.btn-wlm-outline:hover {
  background-color: var(--wlm-sand-light);
  color: var(--wlm-forest-dark);
}

/* Same shape as .btn-wlm-outline but for use on light/white sections, where the cream text of
   .btn-wlm-outline would be nearly invisible. */
.btn-wlm-outline-dark {
  display: inline-block;
  background: transparent;
  color: var(--wlm-forest);
  border: 2px solid var(--wlm-forest);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 28px;
  border-radius: 4px;
  font-weight: 600;
}

.btn-wlm-outline-dark:hover {
  background-color: var(--wlm-forest);
  color: white;
}

/* Trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: -20px 0 40px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 16px 18px;
}

.trust-item i {
  font-size: 1.6rem;
  color: var(--wlm-forest);
}

.trust-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--wlm-forest-dark);
}

.trust-item span {
  display: block;
  font-size: 0.82rem;
  color: var(--wlm-ink);
  opacity: 0.75;
}

/* Auto-scrolling "what we sell" product strip (Welcome page) */
.product-scroller {
  overflow: hidden;
  margin: 0 0 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.product-scroller-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: product-scroll 36s linear infinite;
}

.product-scroller:hover .product-scroller-track {
  animation-play-state: paused;
}

.product-scroller-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 140px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.product-scroller-item:hover .product-scroller-name {
  color: var(--wlm-sand);
}

.product-scroller-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--wlm-sand-light);
  margin-bottom: 8px;
  background: white;
}

.product-scroller-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wlm-forest-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.product-scroller-price {
  font-size: 0.8rem;
  color: var(--wlm-sand);
  font-weight: 700;
}

@keyframes product-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .product-scroller-track {
    animation: none;
  }
}

/* Section titles */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-title h2 {
  font-size: 1.8rem;
  border-left: 5px solid var(--wlm-sand);
  padding-left: 12px;
}

/* Collections grid — larger tactical-lifestyle tiles with a centered label, tactical-brand style */
.collections-title {
  text-align: center;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.collections-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 56px;
  overflow-x: auto;
}

.collections-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 190px;
  overflow: hidden;
  text-decoration: none;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.collections-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.collections-tile-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.collections-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.collections-tile:hover img {
  transform: scale(1.08);
}

.collections-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
}

.collections-tile-name-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.collections-tile-name {
  color: var(--wlm-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.collections-tile-tag {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.72rem;
  color: var(--wlm-ink-soft, #8a8a8a);
}

.collections-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wlm-forest-mid);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.collections-tile:hover .collections-tile-cta {
  color: var(--wlm-sand);
  transform: translateX(3px);
}

[dir="rtl"] .collections-tile:hover .collections-tile-cta {
  transform: translateX(-3px);
}

/* Subcategory tile row — per-category "shop by type" strip shown above the product
   grid (currently only wired up for Bags & Packs). Same tile language as
   .brand-tile (white card, contained image, label below) but with an active-state
   border so the currently-selected subcategory stands out, matching the reference
   the store owner supplied. */
.subcat-tile-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  margin-bottom: 24px;
  padding-bottom: 4px;
}

.subcat-tile {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.subcat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  border-color: var(--wlm-sand);
}

.subcat-tile.active {
  border: 2px solid var(--wlm-sand);
}

.subcat-tile-img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: white;
}

.subcat-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subcat-tile-label {
  padding: 8px 6px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wlm-ink);
  border-top: 1px solid var(--wlm-sand-light);
}

/* "Shop by Brand" carousel — reuses the .product-carousel arrow/track/scroll-snap
   mechanics (site.js already wires up any ".product-carousel" generically), with
   text-logotype tiles since we don't have real brand artwork to show instead. */
/* Wraps everything on the homepage below the hero (which keeps its own dark background
   image) — sections that need to stay dark (Own Brand banner, Wholesale banner) set
   their own background-color and override this. Shop by Brand sits directly on this
   gray backdrop; only its individual tiles are white. */
.homepage-body {
  background-color: #EDEDED;
}

.brand-carousel {
  margin-bottom: 24px;
}

/* Centers the tile row as a group when it doesn't fill the track's width (the common case —
   .container-listing has no max-width, so on a wide screen a handful of brand tiles otherwise
   sit flush left with empty space on the right). "safe center" is what makes this behave: it
   centers normally, but if the row is wide enough to overflow, it falls back to start-aligned
   scrolling instead of centering — centering an overflowing flex row would otherwise clip the
   first item(s) off the start edge with no way to scroll back to them. The plain "center" line
   first is a harmless fallback for the rare browser that doesn't understand "safe". */
.brand-carousel .product-carousel-track {
  justify-content: center;
  justify-content: safe center;
  scrollbar-width: none;
}

.brand-carousel .product-carousel-track::-webkit-scrollbar {
  display: none;
}

.brand-carousel-item.brand-tile {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.brand-tile {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 24px 28px;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  border-color: var(--wlm-sand);
}

.brand-tile-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wlm-forest-dark);
  color: var(--wlm-sand);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.brand-tile:hover .brand-tile-mark {
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

.brand-tile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  color: var(--wlm-forest-dark);
  text-align: center;
}

.brand-tile-logo {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  object-fit: contain;
}

.brand-sidebar-tile-logo {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

/* Homepage "Featured Products" panel — a distinct framed card (not edge-to-edge like the
   sections around it) with a Best Sellers / New Arrivals tab switcher. Tab show/hide itself is
   plain Bootstrap pills (.nav/.tab-content/.tab-pane, already loaded site-wide via
   bootstrap.bundle.js) — every rule below is purely the visual skin on top of that. */
.featured-products-panel {
  background: var(--wlm-cream-panel);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  padding: 48px 40px;
  margin: 56px 0;
}

.featured-products-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}

.featured-products-divider {
  height: 1px;
  width: 80px;
  background: var(--wlm-sand);
  opacity: 0.8;
}

.featured-products-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wlm-sand);
  color: var(--wlm-sand);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.featured-products-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wlm-ink);
  margin-bottom: 28px;
}

.featured-products-tabs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--wlm-sand-light);
}

.featured-products-tabs {
  display: flex;
  gap: 40px;
}

.featured-tab-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 2px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: var(--wlm-forest-mid);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.featured-tab-link i {
  font-size: 0.85rem;
  color: var(--wlm-sand-light);
}

.featured-tab-link:hover {
  cursor: pointer;
}

.featured-tab-link:hover:not(.active) {
  color: var(--wlm-ink);
  border-bottom-color: var(--wlm-sand);
}

.featured-tab-link:hover:not(.active) i {
  color: var(--wlm-sand);
}

.featured-tab-link.active {
  color: var(--wlm-ink);
  border-bottom-color: var(--wlm-sand);
}

.featured-tab-link.active i {
  color: var(--wlm-sand);
}

.featured-products-viewall {
  position: absolute;
  right: 0;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--wlm-sand);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.featured-products-viewall:hover {
  color: var(--wlm-ink);
}

.featured-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.featured-product-card {
  background: var(--wlm-cream);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.featured-product-card:hover {
  border-color: var(--wlm-sand);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--wlm-sand) 35%, transparent), 0 2px 8px rgba(0, 0, 0, 0.05);
}

.featured-product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
}

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

.featured-product-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.featured-product-swatches {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.featured-product-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch-color, #ccc);
  box-shadow: 0 0 0 1px var(--wlm-sand-light);
}

.featured-product-card-body h3 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  line-height: 1.3;
}

.featured-product-card-body h3 a {
  color: var(--wlm-ink);
  text-decoration: none;
}

.featured-product-price-row {
  margin-top: auto;
  margin-bottom: 12px;
}

.featured-product-price {
  color: var(--wlm-sand);
  font-weight: 700;
  font-size: 1rem;
}

.featured-product-price-was {
  color: var(--wlm-forest-mid);
  text-decoration: line-through;
  font-size: 0.85rem;
  margin-right: 6px;
}

.featured-product-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--wlm-sand);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--wlm-forest-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.featured-product-add-btn:hover:not(:disabled) {
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

.featured-product-add-btn:disabled {
  opacity: 0.5;
  border-color: var(--wlm-sand-light);
  color: var(--wlm-forest-mid);
}

@media (max-width: 767.98px) {
  .featured-products-panel {
    padding: 32px 20px;
  }

  .featured-products-title {
    font-size: 1.5rem;
  }

  .featured-products-tabs {
    gap: 20px;
  }

  .featured-products-viewall {
    position: static;
    justify-content: center;
    margin-top: 12px;
  }

  .featured-products-tabs-row {
    flex-direction: column;
  }
}

/* "Our Own Brand" banner — dark image banner with a decorative play button, mirrors
   .spotlight-banner's overlay pattern but content is left-aligned and has no product data. */
.own-brand-banner {
  position: relative;
  background: linear-gradient(120deg, var(--wlm-forest-dark) 0%, var(--wlm-forest-mid) 100%);
  background-size: cover;
  background-position: center;
  margin-bottom: 56px;
  overflow: hidden;
}

.own-brand-banner-inner {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 48px 0;
}

.own-brand-content {
  max-width: 480px;
  color: white;
}

.own-brand-eyebrow {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--wlm-sand);
  margin-bottom: 8px;
}

.own-brand-content h2 {
  color: white;
  font-size: 2.6rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.own-brand-content p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}

.own-brand-play {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.own-brand-play:hover {
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  transform: scale(1.06);
}

/* Government / bulk-supply banner with stat counters */
.wholesale-banner {
  background: var(--wlm-forest-dark);
  margin-bottom: 56px;
}

.wholesale-banner-inner {
  padding: 48px 0;
}

.wholesale-content {
  max-width: 720px;
}

.wholesale-content h2 {
  color: white;
  font-size: 1.9rem;
  margin-bottom: 14px;
}

.wholesale-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.wholesale-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
  margin-top: 32px;
  max-width: 640px;
}

.wholesale-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--wlm-sand);
}

.wholesale-stat span {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Best-selling carousel component — shared by the homepage and the product details page's
   related-products row; the arrow-controlled horizontal scroller itself. */
.product-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.product-carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  flex: 1;
  scrollbar-width: thin;
}

.product-carousel-item {
  flex: 0 0 230px;
  scroll-snap-align: start;
}

.product-carousel-arrow {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--wlm-sand-light);
  background: white;
  color: var(--wlm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.product-carousel-arrow:hover {
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

@media (max-width: 575.98px) {
  .product-carousel-arrow {
    display: none;
  }
}

/* Product cards */
/* Categories page — visual grid + per-category CTA */
.categories-quote-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--wlm-forest);
  color: white;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  white-space: nowrap;
}

.categories-quote-cta:hover {
  background-color: var(--wlm-forest-dark);
  color: white;
}

.category-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--wlm-cream);
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.92rem;
}

.category-cta-banner a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wlm-forest);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* Sidebar "Shop by Brand" — logo-card tiles (same white-card wordmark treatment as the
   homepage brand row), in a compact grid that scrolls internally past a handful of rows
   so it doesn't push the price filter and product grid far down the page. */
.brand-sidebar-all {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wlm-forest-mid);
  margin-bottom: 10px;
}

.brand-sidebar-all.active {
  color: var(--wlm-forest-dark);
  text-decoration: underline;
}

.brand-sidebar-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
}

.brand-sidebar-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.brand-sidebar-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  border-color: var(--wlm-sand);
}

.brand-sidebar-tile.active {
  border-color: var(--wlm-sand);
  background: var(--wlm-sand-light);
}

.brand-sidebar-tile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: var(--wlm-forest-dark);
  line-height: 1.25;
}

/* Sidebar "Filter Results" panel — one form, one collapsible accordion per facet
   (category/subcategory, brand, color, price, size, features, availability, rating). */
.filter-panel {
  position: sticky;
  top: 12px;
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.filter-panel-header h5 {
  margin: 0;
}

.filter-clear-all {
  font-size: 0.8rem;
  color: var(--wlm-forest-mid);
  text-decoration: underline;
}

.filter-accordion {
  border-top: 1px solid var(--wlm-sand-light);
  padding-top: 12px;
  padding-bottom: 12px;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--wlm-ink);
  list-style: none;
}

.filter-header::-webkit-details-marker {
  display: none;
}

.filter-header i {
  color: var(--wlm-forest-mid);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.filter-accordion:not([open]) .filter-header i {
  transform: rotate(180deg);
}

.filter-body {
  margin-top: 14px;
}

.filter-checkbox-row,
.filter-radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--wlm-ink);
  padding: 4px 0;
  cursor: pointer;
}

.filter-checkbox-row input,
.filter-radio-row input {
  accent-color: var(--wlm-sand);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.filter-checkbox-row span:first-of-type,
.filter-radio-row .filter-stars {
  flex: 1;
}

.filter-count {
  color: var(--wlm-forest-mid);
  font-size: 0.8rem;
}

.filter-extra {
  display: none;
}

.filter-extra.filter-extra-visible {
  display: flex;
}

.filter-show-more {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--wlm-forest-mid);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.filter-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch-color, #ccc);
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--wlm-sand-light);
  cursor: pointer;
  display: block;
}

.filter-swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.filter-swatch.active {
  box-shadow: 0 0 0 2px var(--wlm-sand);
}

.filter-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--wlm-sand);
  font-size: 0.85rem;
}

.filter-stars .bi-star {
  color: var(--wlm-sand-light);
}

.price-range-slider {
  position: relative;
  height: 18px;
  margin: 0 8px 16px;
  /* Forced LTR: the slider's own left-to-right math (0% at the left handle) must stay
     predictable regardless of the page's RTL direction — same reasoning as the numeric
     form inputs noted in Program.cs. */
  direction: ltr;
}

.price-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--wlm-sand-light);
  border-radius: 2px;
  transform: translateY(-50%);
}

.price-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--wlm-sand);
  border-radius: 2px;
}

.price-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.price-range-input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wlm-sand);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wlm-sand);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

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

.price-range-values {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.price-range-values input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--wlm-sand);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: center;
}

/* Product grid sort/count bar */
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.sort-bar-count {
  font-size: 0.88rem;
  color: var(--wlm-forest-mid);
}

.sort-bar form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-bar label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.sort-bar select {
  padding: 7px 10px;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: white;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.product-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}

.product-card:hover {
  transform: translateY(-3px);
}

.product-card-body {
  padding: 12px 2px;
  display: flex;
  flex-direction: column;
  /* .product-card is a CSS Grid item, stretched to the tallest card in its row — grow to
     fill that stretched height so the price/variant/button block (pushed down via
     margin-top: auto on .product-card-price-row below) lands at the same Y across every
     card in the row, regardless of how many lines the title above it wraps to. */
  flex: 1;
}

.product-card-body .category-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wlm-forest-mid);
  font-weight: 600;
}

.product-card-body h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 10px 0 6px;
  line-height: 1.25;
  /* Reserve space for 2 lines (1rem × 1.25 × 2) regardless of actual wrap, and clamp any
     title that would wrap to 3+ lines — keeps every card's title block the same height. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-body h3 a {
  color: var(--wlm-ink);
}

.product-card-price-row {
  margin-bottom: 10px;
  /* Anchors the price/variant/button block to the bottom of .product-card-body (which now
     fills the grid-stretched card height) — see .product-card-body's flex: 1 comment. */
  margin-top: auto;
}

.product-card-body .price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--wlm-ink);
}

.product-card-variant {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--wlm-forest);
  border-radius: 4px;
  background: white;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--wlm-ink);
}

.product-card-add-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 4px;
  padding: 12px 16px;
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.product-card-add-btn:hover:not(:disabled) {
  background: var(--wlm-forest-dark);
  color: white;
}

.product-card-add-btn:disabled {
  background: var(--wlm-sand-light);
  color: var(--wlm-forest-mid);
  cursor: not-allowed;
}

.star-rating {
  color: #f5b301;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 2px;
}

.star-rating-value {
  color: var(--wlm-ink);
  opacity: 0.65;
  font-size: 0.8rem;
  margin-left: 4px;
}

.card-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.1s ease, transform 0.3s ease;
}

/* Second-image crossfade on hover (product-card grids, related products, featured products) —
   only wired up when a product has a genuinely different image to swap to; see
   ProductCardImageExtensions.GetHoverImageUrl. Guarded by (hover: hover) so touch devices, which
   have no real hover state, always just show the default image. */
.card-product-image-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

@media (hover: hover) {
  .has-hover-image:hover .card-product-image-hover {
    opacity: 1;
  }

  /* Featured Products cards have no existing zoom effect, so give products without a second
     image the same subtle scale fallback the catalog grid's .product-card-tilt already has. */
  .featured-product-card-media:not(.has-hover-image):hover .card-product-image {
    transform: scale(1.05);
  }
}

.featured-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}

.sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(120deg, #e0592f, #c8342f);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(200, 52, 47, 0.4);
  z-index: 2;
}

.price-was {
  color: var(--wlm-ink);
  opacity: 0.5;
  text-decoration: line-through;
  font-size: 0.85rem;
  margin-right: 8px;
}

.price-sale {
  color: #c8342f;
  font-weight: 700;
}

.price-detail .price-was {
  font-size: 1.1rem;
}

.price-detail .price-sale {
  font-size: 1.75rem;
}

.sale-ribbon {
  display: inline-block;
  background: linear-gradient(120deg, #e0592f, #c8342f);
  color: white;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 20px;
}

.pdp-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--wlm-ink);
}

.pdp-vat-note {
  color: var(--wlm-forest-mid);
  font-size: 0.85rem;
}

.pdp-savings {
  color: var(--bs-success, #198754);
  font-weight: 600;
  font-size: 0.95rem;
}

.pdp-stock-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--wlm-ink);
}

.pdp-stock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--bs-success, #198754);
  flex-shrink: 0;
}

.pdp-total-line {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wlm-ink);
}

.pdp-total-line strong {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--wlm-forest-dark);
}

.pdp-btn-cart,
.pdp-btn-buynow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  border-radius: 4px;
  padding: 11px 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.66rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pdp-btn-cart {
  background-color: var(--wlm-forest-dark);
  color: white;
}

.pdp-btn-cart:hover {
  background-color: var(--wlm-forest-mid);
}

.pdp-btn-buynow {
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

.pdp-btn-buynow:hover {
  background-color: var(--wlm-sand-light);
}

/* Add to Cart / Buy Now side by side, equal width. */
.pdp-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.pdp-btn-row .pdp-btn-cart,
.pdp-btn-row .pdp-btn-buynow {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* Full-width outlined Add to Wishlist button below the cart/buy row — the reference's
   primary secondary-action button, promoted here from a small inline text link. */
.pdp-btn-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border-radius: 4px;
  padding: 10px 4px;
  background: transparent;
  border: 1px solid var(--wlm-forest-dark);
  color: var(--wlm-forest-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pdp-btn-wishlist:hover {
  background-color: var(--wlm-cream);
}

.pdp-btn-wishlist.active {
  background-color: var(--wlm-forest-dark);
  color: white;
}

/* Compare / Wholesale quote — real functionality kept, but visually secondary to the
   Cart/Buy Now/Wishlist trio above, matching how little room the reference gives non-primary
   actions. */
.pdp-secondary-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 575.98px) {
  .pdp-btn-row {
    flex-direction: column;
  }

  /* Once .pdp-btn-row is column-stacked (see above), each button gets the full card width
     instead of sharing a row, so the cramped font-size/padding tuned for narrow side-by-side
     desktop layouts is no longer necessary — restore a more comfortable, legible touch size. */
  .pdp-btn-cart,
  .pdp-btn-buynow {
    padding: 13px 4px;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }

  /* Qty stepper moves above the (now column-stacked) buttons instead of squeezing beside
     them, so the buttons keep the full card width for their larger touch-friendly text. */
  .pdp-qty-cart-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pdp-qty-stepper {
    align-self: flex-start;
  }
}

@media (max-width: 767.98px) {
  .currency-switch-toggle {
    padding: 8px 0;
  }
}

/* Compact horizontal mini trust row inside the purchase card (Free Shipping / Easy Returns /
   Secure Payment) — no fabricated delivery-estimate item, since there's no real ETA data. */
.pdp-trust-mini-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px 12px;
  border-top: 1px solid var(--wlm-sand-light);
  padding-top: 12px;
}

.pdp-trust-mini-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-trust-mini-item i {
  font-size: 1.2rem;
  color: var(--wlm-forest-mid);
  flex-shrink: 0;
}

.pdp-trust-mini-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--wlm-forest-dark);
}

.pdp-trust-mini-item span {
  display: block;
  font-size: 0.72rem;
  color: var(--wlm-ink);
  opacity: 0.7;
}

.pdp-brand-badge {
  display: inline-block;
  background: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-inline-end: 8px;
}

.pdp-meta-line {
  color: var(--wlm-ink);
  opacity: 0.75;
  font-size: 0.88rem;
}

.pdp-meta-sep {
  margin: 0 6px;
  color: var(--wlm-sand-light);
}

/* Icon feature row below the gallery (Durable Fabric / Multiple Pockets / ... style) — each
   item is a circular icon badge with a bold label underneath, matching the reference's
   below-image feature row. Flexbox, not grid: with a grid (even auto-fit), the last
   incomplete row still reserves the same N column tracks as full rows, leaving visibly empty
   trailing cells whenever the item count isn't a multiple of the column count. Flexbox items
   keep their own natural width and simply wrap with nothing reserved beyond the last item. */
.pdp-icon-feature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wlm-sand-light);
}

/* flex: 0 (no grow) keeps each item at its natural ~90px width instead of stretching to fill
   whatever's left on an incomplete last row — the same lesson as the feature-badge row
   earlier: a leftover single item on its own row must NOT balloon to fill the full width. */
.pdp-icon-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 1 90px;
  text-align: center;
}

.pdp-icon-feature-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wlm-cream);
  color: var(--wlm-forest);
  font-size: 1.2rem;
}

.pdp-icon-feature-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--wlm-ink);
}

.pdp-rating-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.pdp-review-count {
  font-size: 0.85rem;
  color: var(--wlm-ink);
  opacity: 0.75;
}

.pdp-rating-sep {
  color: var(--wlm-sand-light);
}

.pdp-ask-question {
  font-size: 0.85rem;
  color: var(--wlm-forest-mid);
  text-decoration: underline;
}

.pdp-ask-question:hover {
  color: var(--wlm-forest-dark);
}

/* Qty stepper sits beside the Cart/Buy Now row (not stacked above it), matching the
   reference's single "QTY ... ADD TO CART" line instead of two separate rows. */
.pdp-qty-cart-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.pdp-qty-cart-row .pdp-btn-row {
  flex: 1;
  margin-bottom: 0;
}

.pdp-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  flex-shrink: 0;
}

.pdp-qty-btn {
  width: 38px;
  height: 40px;
  border: none;
  background: var(--wlm-cream);
  color: var(--wlm-forest-dark);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pdp-qty-btn:hover {
  background-color: var(--wlm-sand-light);
}

.pdp-qty-input {
  width: 50px;
  height: 40px;
  border: none;
  border-inline: 1px solid var(--wlm-sand-light);
  text-align: center;
  font-size: 0.95rem;
  -moz-appearance: textfield;
}

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

.pdp-wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--wlm-forest-mid);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
}

.pdp-wishlist-link:hover {
  color: var(--wlm-forest-dark);
}

.pdp-wishlist-link.active i {
  color: #c8342f;
}

@media (max-width: 575.98px) {
  /* Bump up a few controls that measure comfortably above 44px on desktop pointer input
     but come in under that on a touch screen (qty stepper, wishlist/compare links). */
  .pdp-qty-btn {
    width: 44px;
    height: 44px;
  }

  .pdp-wishlist-link {
    padding: 8px 0;
  }
}

/* Horizontal 4-up trust strip below the purchase area — distinct from .pdp-trust-list
   (the vertical list inside the purchase card itself). */
.pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 20px;
}

.pdp-trust-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-trust-strip-item i {
  font-size: 1.5rem;
  color: var(--wlm-forest);
  flex-shrink: 0;
}

.pdp-trust-strip-item span {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wlm-ink);
  opacity: 0.65;
}

.pdp-trust-strip-item strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wlm-forest-dark);
}

.pdp-view-all {
  color: var(--wlm-forest-mid);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.pdp-view-all:hover {
  color: var(--wlm-forest-dark);
}

/* Product info accordion (Features / Specifications / Overview / Description / Reviews /
   Shipping & Returns) — replaces the earlier horizontal tab bar with stacked full-width rows,
   matching the reference the site owner supplied. Built on Bootstrap's native collapse
   component (already loaded via bootstrap.bundle.js, same as everywhere else on this page) for
   the slide animation and single-open-at-a-time behavior via the shared data-bs-parent — only
   the visual chrome and the +/x icon swap below are custom. */
.pdp-accordion {
  border-top: 1px solid var(--wlm-sand-light);
}

.pdp-accordion-item {
  border-bottom: 1px solid var(--wlm-sand-light);
}

.pdp-accordion-header {
  margin: 0;
}

.pdp-accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wlm-ink);
  cursor: pointer;
  transition: color 0.15s ease;
}

.pdp-accordion-button:hover {
  color: var(--wlm-forest-dark);
}

.pdp-accordion-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.pdp-accordion-icon-close {
  display: none;
}

.pdp-accordion-button[aria-expanded="true"] .pdp-accordion-icon-plus {
  display: none;
}

.pdp-accordion-button[aria-expanded="true"] .pdp-accordion-icon-close {
  display: inline-flex;
}

.pdp-accordion-body {
  padding: 0 4px 28px;
}

/* Description tab: intro/materials text + checklist on one side, an optional per-color
   lifestyle photo on the other (Media Role "Lifestyle"). */
.pdp-description-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.pdp-description-text {
  flex: 1;
  min-width: 0;
}

.pdp-description-photo {
  flex: 0 0 280px;
}

.pdp-description-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Checkmarked feature bullets inside the Description tab (reuses the FEATURE-attribute
   marketing bullets, same data as before, just relocated into the tab alongside the photo
   to match the reference layout instead of living in its own section). */
.pdp-checklist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  color: var(--wlm-ink);
  font-size: 0.9rem;
}

.pdp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.pdp-checklist li i {
  color: var(--wlm-forest);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 767.98px) {
  .pdp-description-layout {
    flex-direction: column;
  }

  .pdp-description-photo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}

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

.pdp-spec-table th,
.pdp-spec-table td {
  text-align: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wlm-sand-light);
  font-size: 0.9rem;
}

.pdp-spec-table th {
  width: 40%;
  color: var(--wlm-forest-mid);
  font-weight: 600;
}

/* Reviews tab — aggregate summary (average + count, recalculated from real ProductReviews
   rows), a write/edit-in-place review form, and the list of submitted reviews below it. */
.pdp-reviews-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-reviews-summary-count {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--wlm-forest-dark);
}

.pdp-review-form-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wlm-sand-light);
}

.pdp-review-form-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wlm-forest-dark);
  margin: 0 0 12px;
}

.pdp-review-login-prompt {
  color: var(--wlm-ink);
  font-size: 0.9rem;
}

.pdp-review-login-prompt a {
  color: var(--wlm-forest-mid);
  font-weight: 600;
  margin-inline-start: 4px;
}

.pdp-review-form {
  max-width: 560px;
}

.pdp-star-input {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.pdp-star-input-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wlm-sand);
}

.pdp-star-input-btn .bi-star-fill {
  color: #c79420;
}

.pdp-review-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 12px;
}

.pdp-review-submit {
  width: auto;
  padding-inline: 28px;
}

.pdp-review-list {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wlm-sand-light);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pdp-review-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.star-rating-inline {
  color: #c79420;
  font-size: 0.85rem;
}

.pdp-review-author {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--wlm-forest-dark);
}

.pdp-review-date {
  font-size: 0.78rem;
  color: var(--wlm-ink);
  opacity: 0.6;
}

.pdp-review-comment {
  font-size: 0.9rem;
  color: var(--wlm-ink);
  margin: 0;
  line-height: 1.6;
}

.loyalty-celebration {
  max-width: 520px;
  background: linear-gradient(120deg, var(--wlm-sand-light), var(--wlm-sand));
  color: var(--wlm-forest-dark);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 10px 24px rgba(171, 152, 101, 0.4);
}

.coupon-discount-line {
  color: #c8342f;
  font-weight: 600;
}

.coupon-applied-row {
  background-color: rgba(116, 133, 90, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
}

/* My Coupons page: ticket-style cards */
.coupon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.coupon-card {
  display: flex;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.12);
  position: relative;
}

.coupon-card::before {
  content: "";
  position: absolute;
  left: 108px;
  top: 0;
  bottom: 0;
  border-left: 2px dashed rgba(28, 28, 28, 0.15);
}

.coupon-card-left {
  width: 108px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--wlm-forest), var(--wlm-forest-dark));
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.coupon-card.coupon-used .coupon-card-left,
.coupon-card.coupon-expired .coupon-card-left {
  background: linear-gradient(160deg, #8a8a82, #5c5c56);
}

.coupon-discount {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.coupon-off {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.coupon-card-right {
  flex: 1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coupon-source {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wlm-forest-mid);
  font-weight: 600;
}

.coupon-code {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.coupon-status-badge {
  align-self: flex-start;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 20px;
  background-color: rgba(116, 133, 90, 0.15);
  color: var(--wlm-forest);
  margin-top: 4px;
}

.coupon-card.coupon-used .coupon-status-badge,
.coupon-card.coupon-expired .coupon-status-badge {
  background-color: rgba(90, 90, 86, 0.15);
  color: #5c5c56;
}

.coupon-expiry {
  font-size: 0.75rem;
  color: var(--wlm-ink);
  opacity: 0.6;
}

/* Upcoming UAE sales & events: cheerful, festive promo cards */
.promo-event-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-bottom: 56px;
}

.promo-event-card {
  position: relative;
  background: linear-gradient(150deg, var(--wlm-forest) 0%, var(--wlm-forest-dark) 100%);
  border-radius: 14px;
  padding: 24px 22px;
  color: var(--wlm-sand-light);
  box-shadow: 0 12px 28px rgba(10, 10, 10, 0.25);
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.promo-event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(10, 10, 10, 0.35);
}

.promo-event-card.is-live {
  background: linear-gradient(150deg, var(--wlm-forest-mid) 0%, var(--wlm-forest) 60%, var(--wlm-forest-dark) 100%);
  border-color: var(--wlm-sand);
}

.promo-live-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 4px;
}

.promo-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c8342f;
  animation: promo-pulse 1.4s ease-in-out infinite;
}

@keyframes promo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.promo-soon-badge {
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--wlm-sand-light);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 4px;
}

.promo-event-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 4px;
}

.promo-event-card h4 {
  color: white;
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.promo-event-card p {
  color: var(--wlm-sand-light);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.promo-event-discount {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wlm-sand);
}

.promo-event-dates {
  font-size: 0.78rem;
  color: rgba(232, 220, 200, 0.75);
  margin-bottom: 10px;
}

.promo-event-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: auto;
}

.promo-event-cta:hover {
  color: var(--wlm-sand);
}

/* Hero search bar */
.hero-search-form {
  display: flex;
  max-width: 480px;
  margin-top: 10px;
}

.hero-search-input {
  flex: 1;
  border: none;
  border-radius: 4px 0 0 4px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: var(--font-body);
}

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

.hero-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 20px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  cursor: pointer;
}

.hero-search-btn:hover {
  background-color: white;
}

/* Delivery / policies / contact info strip */
.info-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 8px 0 56px;
}

.info-strip-item {
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.info-strip-item i {
  font-size: 1.8rem;
  color: var(--wlm-forest);
  margin-bottom: 10px;
  display: block;
}

.info-strip-item h5 {
  margin-bottom: 8px;
}

.info-strip-item p {
  font-size: 0.9rem;
  color: var(--wlm-ink);
  opacity: 0.85;
  margin-bottom: 0;
}

/* Locations / branches */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.location-card {
  position: relative;
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 26px;
}

.location-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.location-card p {
  color: var(--wlm-ink);
  opacity: 0.8;
  margin-bottom: 16px;
}

.location-pickup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--wlm-forest);
  color: white;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.location-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.whatsapp-btn {
  background-color: #25d366;
  border-color: #25d366;
  color: white;
}

/* Find a Store (map locator) */
.store-locator-search {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.store-locator-search-input {
  position: relative;
  flex: 1 1 auto;
}

.store-locator-search-input i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wlm-blue);
}

.store-locator-search-input input {
  padding-left: 38px;
  height: 100%;
}

.store-locator-count {
  color: var(--wlm-ink);
  opacity: 0.75;
  font-size: 0.9rem;
}

.store-locator-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .store-locator-layout {
    grid-template-columns: 1fr;
  }
}

.store-locator-results {
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 4px;
}

.store-locator-map {
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  overflow: hidden;
}

.store-locator-map #storeLocatorMap {
  width: 100%;
  height: 560px;
}

.store-result-card {
  padding: 16px;
  border-bottom: 1px solid var(--wlm-sand-light);
  cursor: pointer;
}

.store-result-card:last-child {
  border-bottom: none;
}

.store-result-card:hover {
  background-color: #fafafa;
}

.store-result-card h4 {
  font-size: 1.02rem;
  margin: 6px 0 8px;
}

.store-result-card p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--wlm-ink);
  opacity: 0.85;
  margin-bottom: 6px;
}

.store-result-card p i {
  margin-top: 2px;
  opacity: 0.7;
}

.store-result-card a {
  color: inherit;
  text-decoration: none;
}

.store-category-badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}

.store-category-badge.store-category-official {
  background-color: var(--wlm-forest);
  color: white;
}

.store-category-badge.store-category-dealer {
  background-color: var(--wlm-sand);
  color: var(--wlm-ink);
}

.store-directions-btn {
  margin-top: 4px;
}

.whatsapp-btn:hover {
  background-color: #1ebe5b;
  border-color: #1ebe5b;
  color: white;
}

.product-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
}

.product-card-tilt {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.product-card-tilt:hover {
  box-shadow: 0 22px 38px rgba(10, 10, 10, 0.32);
}

.product-card-tilt:hover .card-product-image {
  transform: scale(1.04);
}

/* Buttons matching bootstrap */
.btn-primary, .btn.btn-primary {
  background-color: var(--wlm-forest);
  border-color: var(--wlm-forest);
}

.btn-primary:hover, .btn.btn-primary:hover {
  background-color: var(--wlm-forest-mid);
  border-color: var(--wlm-forest-mid);
}

.btn-outline-primary {
  color: var(--wlm-forest);
  border-color: var(--wlm-forest);
}

.btn-outline-primary:hover {
  background-color: var(--wlm-forest);
  border-color: var(--wlm-forest);
}

/* Footer */
.site-footer {
  background-color: var(--wlm-forest-dark);
  color: var(--wlm-sand-light);
  margin-top: 60px;
}

.footer-top {
  padding: 40px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-newsletter h5 {
  color: white;
  margin-bottom: 6px;
}

.newsletter-form {
  display: flex;
  max-width: 420px;
  margin-top: 12px;
}

.newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 4px 0 0 4px;
}

.newsletter-form button {
  background-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
  border: none;
  padding: 0 20px;
  font-weight: 600;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  padding: 30px 0;
}

.footer-col h6 {
  color: white;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col a {
  color: var(--wlm-sand-light);
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: white;
}

.footer-social {
  display: flex;
  gap: 14px;
  font-size: 1.3rem;
}

.footer-bottom {
  padding: 16px 0;
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(232, 220, 200, 0.7);
}

.footer-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-payments-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: rgba(232, 220, 200, 0.7);
  white-space: nowrap;
}

.footer-payments-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-payments-icons img {
  height: 28px;
  width: auto;
  border-radius: 4px;
  background: white;
  padding: 3px 8px;
  object-fit: contain;
}

/* Cart & checkout tables */
.cart-table th {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--wlm-forest-dark);
}

.summary-box {
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 24px;
}

.summary-box h4 {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.quote-request-number {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wlm-forest);
  margin-bottom: 0;
}

.page-banner {
  background-color: var(--wlm-forest);
  color: white;
  padding: 30px 0;
  margin-bottom: 32px;
}

/* Edge-to-edge content wrapper, used on specific sections that should run to both screen edges
   instead of sitting in Bootstrap's centered max-width .container: the category/All Products
   page (hero banner, subcategory tile row, filter sidebar, product grid) and the homepage's Shop
   by Category / Shop by Brand / Featured-Best Selling-New Arrivals sections. Applied per-section,
   not site-wide — Bootstrap's centered .container is still the right choice for narrower content
   like forms, checkout, and the rest of the homepage's marketing sections. */
.container-listing {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .container-listing {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.page-banner h1 {
  color: white;
  margin: 0;
}

.page-banner-sale {
  background-color: var(--wlm-forest-dark);
}

/* Optional PromoEvent.ImageUrl photo behind the sale banner — the gradient overlay is set
   inline alongside the image (Views/Products/Sales.cshtml) so it composites in one
   background-image value; this class just adds the sizing/height a photo needs to read. */
.page-banner-sale-photo {
  background-size: cover;
  background-position: center;
  min-height: 280px;
  display: flex;
  align-items: center;
}

@media (max-width: 575.98px) {
  .page-banner-sale-photo {
    min-height: 200px;
  }
}

.page-banner-sale p {
  color: var(--wlm-sand);
  font-weight: 600;
  margin-top: 6px;
}

/* Category/subcategory hero banner (Views/Products/Index.cshtml) — same optional-photo
   technique as .page-banner-sale-photo: the gradient overlay is composited into the same
   background-image value as the photo, set inline, so a category with no ImageUrl just
   renders as a plain .page-banner with no extra markup/code path. */
.page-banner-category-photo {
  background-size: cover;
  background-position: center;
  min-height: 340px;
  display: flex;
  align-items: center;
}

@media (max-width: 575.98px) {
  .page-banner-category-photo {
    min-height: 220px;
  }
}

.category-hero-title {
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.category-hero-description {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 10px;
  margin-bottom: 0;
}

/* Subcategory showcase row, directly under the hero banner — a single-row carousel (arrow
   buttons + horizontal scroll-snap track), same pattern and classes as the homepage's Shop by
   Brand carousel (.product-carousel/.product-carousel-track/-arrow/-item; site.js wires up any
   ".product-carousel" generically, so no extra JS is needed here). Replaces the old wrapping
   CSS grid, which wrapped to multiple rows for categories with many subcategories (e.g. Gear &
   Accessories has 30) instead of scrolling like every other carousel on the site. */
.category-subcat-row {
  background: white;
  padding: 32px 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--wlm-sand-light);
}

.category-subcat-carousel .product-carousel-track {
  justify-content: center;
  justify-content: safe center;
  scrollbar-width: none;
}

.category-subcat-carousel .product-carousel-track::-webkit-scrollbar {
  display: none;
}

.category-subcat-tile.product-carousel-item {
  flex: 0 0 150px;
  scroll-snap-align: start;
}

.category-subcat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  text-align: center;
}

.category-subcat-tile-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wlm-sand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: box-shadow 0.25s ease;
}

.category-subcat-tile:hover .category-subcat-tile-img-wrap {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.category-subcat-tile-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.category-subcat-tile:hover .category-subcat-tile-img-wrap img {
  transform: scale(1.06);
}

.category-subcat-tile-placeholder {
  color: var(--wlm-blue);
  font-size: 1.8rem;
}

.category-subcat-tile-label {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.82rem;
  color: var(--wlm-ink);
}

.no-sale-state {
  text-align: center;
  padding: 60px 20px;
}

.no-sale-state i {
  font-size: 2.6rem;
  color: var(--wlm-sand);
  margin-bottom: 14px;
  display: inline-block;
}

.no-sale-state h3 {
  margin-bottom: 8px;
}

.no-sale-state p {
  color: var(--wlm-forest-mid);
  margin-bottom: 20px;
}

/* Matches the .sale-badge/.featured-badge pill typography used on product cards (uppercase,
   bold, small, tight padding) rather than Bootstrap's default .badge look. */
.badge-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  color: white;
}

.badge-status-pending { background-color: var(--wlm-danger); }
.badge-status-processing { background-color: var(--wlm-sand); color: var(--wlm-ink); }
.badge-status-shipped { background-color: var(--wlm-blue); }
.badge-status-outfordelivery { background-color: #b8860b; }
.badge-status-delivered { background-color: var(--wlm-forest); }

/* Customer order-tracking: FedEx tracking link box (stepper CSS lives further down, alongside
   the checkout-stepper classes it's built on). */
.order-tracking-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--wlm-sand-light);
  border-radius: 8px;
  padding: 14px 20px;
}

.admin-shell {
  display: flex;
  min-height: calc(100vh - 200px);
}

.admin-sidebar {
  width: 220px;
  background-color: var(--wlm-forest-dark);
  color: var(--wlm-sand-light);
  padding: 24px 0;
}

.admin-sidebar a {
  display: block;
  padding: 10px 24px;
  color: var(--wlm-sand-light);
}

.admin-sidebar a:hover, .admin-sidebar a.active {
  background-color: var(--wlm-forest);
  color: white;
}

.admin-content {
  flex: 1;
  padding: 30px;
  background-color: var(--wlm-cream);
}

/* Product image zoom + gallery */
/* Gallery layout: a narrow vertical thumbnail column beside the main image on desktop
   (matches typical PDP references), falling back to a horizontal row below the image on
   mobile where there isn't room for a side column. */
.product-gallery-layout {
  display: flex;
  gap: 12px;
}

/* .pdp-content-col (the title/description/purchase-card column) is the last column of the
   outer row, so it carries that row's own trailing gutter padding (24px, from .g-5) on its
   outer edge. The purchase card, nested two levels deep inside a second row-and-columns
   split (color/size | purchase card), only bleeds relative to ITS OWN parent row's gutter —
   it has no way to also cancel out the outer column's separate 24px padding reservation on
   top of that. Net effect: the purchase card's outer edge lands 24px short of where the
   gallery's outer edge lands on the opposite side (which — as the outer row's FIRST column —
   bleeds cleanly to the container edge with nothing reserved beyond it). Dropping this
   column's own trailing padding removes that extra reservation so both sides match. LTR: the
   trailing edge is the right side. */
.pdp-content-col {
  padding-right: 0;
}

/* At lg+, .pdp-top-row has no align-items override (defaults to stretch), so both columns'
   outer boxes become equal height — as tall as .pdp-content-col, which is normally the taller
   of the two. .pdp-gallery-col becomes a flex column so that extra height can be handed to
   .product-gallery-layout (flex: 1 below) instead of sitting there as unused space, which is
   what actually grows the product photo — .pdp-icon-feature-row keeps its own natural height
   and simply gets pushed down to sit right under the now-taller image. This replaces the
   earlier position:sticky approach: sticky kept a SHORT gallery pinned in view while the
   taller column scrolled past it; here the gallery is no longer short, so there's nothing left
   to pin against. Below lg the columns stack full-width in document order, so none of this
   applies — the image keeps its own natural aspect-ratio there (see .product-zoom-image). */
@media (min-width: 992px) {
  .pdp-gallery-col {
    display: flex;
    flex-direction: column;
  }

  .product-gallery-layout {
    flex: 1;
    min-height: 0;
  }

  .product-zoom-image {
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

.product-zoom-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--wlm-sand-light);
  cursor: zoom-in;
  background: white;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transform-style: preserve-3d;
  will-change: transform;
  flex: 1;
  min-width: 0;
}

.product-zoom-container:hover {
  box-shadow: 0 25px 45px rgba(10, 10, 10, 0.3);
}

.product-zoom-image {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  display: block;
  transition: transform 0.15s ease;
  transform: scale(1);
}

.product-zoom-image.zoomed-hover {
  transform: scale(2);
}

.zoom-hint {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(10, 10, 10, 0.75);
  color: var(--wlm-sand-light);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 3px;
  pointer-events: none;
}

.product-thumbs {
  display: flex;
  flex-direction: column;
  flex: 0 0 70px;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .product-gallery-layout {
    flex-direction: column-reverse;
  }

  /* Horizontal scroll strip instead of wrapping to multiple rows — wrapping leaves a lopsided
     trailing row (e.g. 4 thumbs then 1 alone) whenever the count isn't a clean multiple of
     however many fit per row; a single scrollable row sidesteps that regardless of count. */
  .product-thumbs {
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
  }

  .product-thumb,
  .product-thumb-item {
    flex-shrink: 0;
  }
}

.product-thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.7;
}

.product-thumb:hover {
  opacity: 1;
}

.product-thumb.active {
  border-color: var(--wlm-forest);
  opacity: 1;
}

.product-zoom-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  background: #000;
}

/* Video thumbs need a wrapper for the play-icon overlay — <img> itself can't render
   ::after content since it's a replaced element. */
.product-thumb-item {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.product-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.zoom-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: 1050;
  align-items: center;
  justify-content: center;
}

.zoom-lightbox.open {
  display: flex;
}

.zoom-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
}

.zoom-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Color & size option pickers */
.option-label {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--wlm-forest-dark);
  margin-bottom: 8px;
}

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  border: 2px solid var(--wlm-sand-light);
  box-shadow: 0 0 0 2px transparent;
  position: relative;
  background-size: cover;
  background-position: center;
}

.color-swatch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.color-swatch:has(input:checked) {
  box-shadow: 0 0 0 2px var(--wlm-forest);
  border-color: white;
}

.option-value {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--wlm-ink);
}

.size-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
}

.size-pill {
  position: relative;
  border: 1px solid var(--wlm-forest);
  border-radius: 4px;
  padding: 10px 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--wlm-forest-dark);
  text-align: center;
}

.size-pill input {
  position: absolute;
  opacity: 0;
}

.size-pill:has(input:checked) {
  background-color: var(--wlm-forest);
  color: white;
}

.size-pill.unavailable {
  border-color: var(--wlm-sand-light);
  color: var(--wlm-sand-light);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Quick-add modal (triggered from product cards) */
.quick-add-modal .modal-header {
  border-bottom: none;
  padding-bottom: 0;
  align-items: flex-start;
}

.quick-add-modal .modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--wlm-forest-dark);
}

.quick-add-modal .modal-subtitle {
  color: var(--wlm-ink);
  opacity: 0.7;
  font-size: 0.9rem;
  margin-top: 2px;
}

.quick-add-modal .modal-body {
  padding-top: 0.75rem;
}

.quick-add-error {
  display: none;
  color: var(--wlm-danger);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.quick-add-error.visible {
  display: block;
}

/* Quick-add modal quantity stepper. */
.qty-stepper { display: flex; align-items: center; gap: 12px; }
.qty-btn { width: 32px; height: 32px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 18px; line-height: 1; }
.qty-btn:hover { background: #f5f5f5; }
#quickAddQtyValue { min-width: 24px; text-align: center; font-weight: 600; }

/* Checkout wizard: step indicator, per-step panels, Stripe Payment Element container, and the
   OTP verification modal (reuses the .quick-add-modal header/subtitle look for consistency). */
.checkout-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  gap: 0.5rem;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--wlm-sand-light);
  color: var(--wlm-blue);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.checkout-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wlm-sand-light);
  color: var(--wlm-forest-dark);
  font-size: 0.8rem;
  font-weight: 700;
}

.checkout-step.active {
  border-bottom-color: var(--wlm-sand);
  color: var(--wlm-forest-dark);
}

.checkout-step.active .checkout-step-num {
  background: var(--wlm-sand);
}

.checkout-step.completed {
  color: var(--wlm-forest-mid);
}

.checkout-step.completed .checkout-step-num {
  background: var(--wlm-forest-dark);
  color: var(--wlm-cream);
}

.checkout-step-error {
  display: none;
  color: var(--wlm-danger);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.checkout-step-error.visible {
  display: block;
}

.stripe-element-box {
  background: #fff;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 6px;
  padding: 1.25rem;
}

.review-recap-box {
  background: var(--wlm-sand-light);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.checkout-otp-modal .modal-header {
  border-bottom: none;
  padding-bottom: 0;
  align-items: flex-start;
}

.checkout-otp-modal .modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--wlm-forest-dark);
}

.checkout-otp-modal .modal-subtitle {
  color: var(--wlm-ink);
  opacity: 0.7;
  font-size: 0.9rem;
  margin-top: 2px;
}

.checkout-step.completed .checkout-step-num {
  background: var(--wlm-forest-dark);
  color: white;
}

/* Order-tracking stepper: reuses .checkout-stepper/.checkout-step/.checkout-step-num from the
   checkout wizard, but arranges each step as a circle-over-label column connected by a
   horizontal line (instead of the wizard's underline-per-step), since a shipment timeline reads
   better that way. */
.order-tracking-stepper .checkout-step {
  border-bottom: none;
  flex-direction: column;
  text-align: center;
  padding-bottom: 0;
  position: relative;
}

.order-tracking-stepper .checkout-step::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--wlm-sand-light);
  z-index: 0;
}

.order-tracking-stepper .checkout-step:first-child::before {
  content: none;
}

.order-tracking-stepper .checkout-step.completed::before,
.order-tracking-stepper .checkout-step.active::before {
  background: var(--wlm-forest-dark);
}

.order-tracking-stepper .checkout-step-num {
  position: relative;
  z-index: 1;
  margin: 0 auto 6px;
}

.order-tracking-step-date {
  display: block;
  font-size: 0.7rem;
  color: var(--wlm-blue);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 2px;
}

.otp-code-input {
  width: 100%;
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Cart page: free-shipping progress bar, stock badges, qty stepper, and sidebar extras
   (dark checkout button, Tabby placeholder, payment/trust rows reused from the footer/PDP). */
.free-shipping-bar {
  background: white;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 8px;
  padding: 16px 20px;
}

.free-shipping-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--wlm-sand-light);
  overflow: hidden;
  margin-bottom: 10px;
}

.free-shipping-bar-fill {
  height: 100%;
  background: var(--wlm-sand);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.free-shipping-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
}

#freeShippingBarStatus.free-shipping-qualified {
  color: #2e7d32;
  font-weight: 600;
}

.cart-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
}

.cart-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.cart-stock-in { color: #2e7d32; }
.cart-stock-in .cart-stock-dot { background: #2e7d32; }
.cart-stock-low { color: #b8860b; }
.cart-stock-low .cart-stock-dot { background: #b8860b; }
.cart-stock-out { color: #b5482c; }
.cart-stock-out .cart-stock-dot { background: #b5482c; }

.cart-qty-stepper { display: inline-flex; }

.btn-wlm-black {
  display: inline-block;
  background-color: var(--wlm-forest-dark);
  color: white;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 30px;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-wlm-black:hover {
  background-color: var(--wlm-forest-mid);
  color: white;
}

.cart-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--wlm-blue);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0;
}

.cart-or-divider::before,
.cart-or-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--wlm-sand-light);
}

.cart-or-divider span {
  padding: 0 10px;
}

.btn-tabby-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--wlm-sand-light);
  color: var(--wlm-blue);
  border: 1px solid var(--wlm-sand-light);
  border-radius: 4px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: not-allowed;
  position: relative;
}

.cart-coming-soon-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: white;
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 6px;
}

.cart-payments.footer-payments {
  border-top: 1px solid var(--wlm-sand-light);
  padding: 14px 0 0;
  justify-content: flex-start;
}

.cart-payments .footer-payments-label {
  color: var(--wlm-blue);
}

.cart-trust-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--wlm-sand-light);
  padding-top: 14px;
}

.cart-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--wlm-blue);
  text-align: center;
  flex: 1;
}

.cart-trust-item i {
  font-size: 1.1rem;
  color: var(--wlm-forest-dark);
}

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 768px) {
  .header-inner {
    gap: 10px;
    padding: 12px 0;
  }

  .brand {
    font-size: 1.2rem;
  }

  .brand-logo img {
    height: 33px;
  }

  .menu-toggle span {
    display: none;
  }

  .menu-toggle {
    padding: 8px 10px;
  }

  .search-form {
    order: 5;
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header-actions {
    gap: 12px;
    margin-left: auto;
  }

  .admin-shell {
    flex-direction: column;
    min-height: auto;
  }

  .admin-sidebar {
    width: 100%;
    padding: 10px 0;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
  }

  .admin-sidebar a {
    padding: 10px 16px;
  }

  .admin-content {
    padding: 18px;
  }
}

@media (max-width: 576px) {
  .topbar-inner {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    text-align: center;
    font-size: 0.72rem;
  }

  .section-title {
    flex-wrap: wrap;
    gap: 6px;
  }

  .promo-event-row {
    grid-template-columns: 1fr;
  }

  /* Extra bottom padding reserves clearance below the CTA buttons so the last button doesn't
     render underneath the fixed WhatsApp/chat bubbles in the bottom-left corner — those are
     position: fixed to the viewport, so whatever page content lands in that same screen region
     on initial load (no scroll) sits directly behind them otherwise. */
  .hero {
    /* Desktop's fixed min-height + flex centering is a wide-viewport-only sizing choice — mobile
       keeps its own original padding-driven height (auto, content-sized) so it doesn't inherit
       the 640px floor and grow taller than this breakpoint was ever tuned for. */
    min-height: 0;
    display: block;
    padding: 28px 0 110px;
    /* Mobile's tall/narrow hero box is height-bound, not width-bound, so cover crops
       horizontally — bias right to keep the gear composition in frame instead of showing the
       image's empty left-side backdrop. */
    background-position: 55% center;
  }

  /* Text sits directly on top of the image at this width (desktop's side-by-side layout has
     empty dark backdrop to sit beside; mobile's stacked layout doesn't) — the new spotlight
     source image's light beam is broad enough that no crop window fully avoids it, so a top-
     anchored scrim darkens specifically the eyebrow/heading/paragraph zone. Fades out by
     roughly where the CTA buttons start, since those already sit on solid button backgrounds
     and don't need it, and fading keeps the gear composition below from reading as washed out. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.8) 0%, rgba(5, 5, 5, 0.55) 45%, rgba(5, 5, 5, 0.15) 70%, rgba(5, 5, 5, 0) 88%);
  }

  .hero-eyebrow {
    margin-bottom: 8px;
  }

  .hero h1 {
    font-size: 1.7rem;
    max-width: 100%;
  }

  .hero p {
    font-size: 0.95rem;
    max-width: 100%;
    margin: 14px 0 30px;
  }

  .hero-cta-row {
    margin-top: 32px;
  }

  .hero-cta-row .btn-wlm,
  .hero-cta-row .btn-wlm-outline {
    padding: 11px 20px;
    font-size: 0.88rem;
  }
}

/* Shorter phones (e.g. iPhone SE at 375x667) don't have enough vertical room for the hero's
   text + CTA buttons to clear the fixed WhatsApp bubble — compact further specifically when
   viewport height is tight, leaving taller phones (iPhone 12/13/14, 11/XR class and up) at the
   roomier sizing above. */
@media (max-width: 575.98px) and (max-height: 700px) {
  .hero {
    padding: 16px 0 100px;
  }

  .hero-eyebrow {
    margin-bottom: 4px;
    font-size: 0.75rem;
  }

  .hero h1 {
    font-size: 1.35rem;
  }

  .hero p {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 8px 0 20px;
  }

  .hero-cta-row {
    margin-top: 14px;
  }

  .hero-cta-row .btn-wlm,
  .hero-cta-row .btn-wlm-outline {
    padding: 9px 16px;
    font-size: 0.8rem;
  }

  .search-input {
    padding: 10px 12px;
  }

  .cart-count {
    top: -6px;
    right: -10px;
  }
}

/* ==========================================================================
   Identity / auth pages (Login, Register, Forgot Password, etc.)
   The compiled Identity UI emits no container, so these rules provide the
   layout + a centered card that matches the storefront styling.
   ========================================================================== */
.auth-page {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 5rem;
  display: flex;
  align-items: center;
  min-height: 60vh;
  background: var(--wlm-forest-dark);
}

/* Slow-drifting glow blobs behind the card — purely decorative, ignored by
   assistive tech and screen size (clipped by the page's own overflow:hidden). */
.auth-page::before,
.auth-page::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.auth-page::before {
  background: var(--wlm-sand);
  top: -160px;
  left: -120px;
  animation: auth-blob-drift-a 16s ease-in-out infinite;
}

.auth-page::after {
  background: #2f6690;
  bottom: -180px;
  right: -140px;
  animation: auth-blob-drift-b 20s ease-in-out infinite;
}

@keyframes auth-blob-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.15); }
}

@keyframes auth-blob-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -30px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page::before,
  .auth-page::after {
    animation: none;
  }
}

.auth-page > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
}

.auth-page h1 {
  text-align: center;
  font-size: 2.1rem;
  margin-bottom: 0.4rem;
}

/* Only the bare page-level <h1> (e.g. the default Register page's own heading, which
   sits directly on the dark auth-page background) should turn white — not .auth-card-title,
   which lives inside the white card and needs to stay dark to remain readable. */
.auth-page h1:not(.auth-card-title) {
  color: white;
}

/* The compiled Login/Register markup lays out local + external login in a Bootstrap row.
   Center it, and since no external providers are configured, hide that empty column. */
.auth-page .row {
  justify-content: center;
}

.auth-page .col-md-offset-2 {
  display: none;
}

.auth-page .col-md-4 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 460px;
}

/* Card around each auth form section. */
.auth-page section {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wlm-sand-light);
  border-radius: 10px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: auth-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-page section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wlm-sand), var(--wlm-forest), var(--wlm-sand));
  background-size: 200% 100%;
  animation: auth-accent-shimmer 5s linear infinite;
}

.auth-page section:nth-of-type(2) {
  animation-delay: 0.12s;
}

@keyframes auth-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes auth-accent-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page section {
    animation: none;
  }

  .auth-page section::before {
    animation: none;
  }
}

.auth-page section h2,
.auth-page section h3 {
  font-size: 1.15rem;
  font-family: var(--font-heading);
  color: var(--wlm-forest-dark);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--wlm-sand-light);
}

.auth-page .form-floating {
  margin-bottom: 1rem;
}

.auth-page .form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.auth-page .form-control:focus {
  border-color: var(--wlm-sand);
  box-shadow: 0 0 0 0.2rem rgba(245, 197, 24, 0.25);
  transform: translateY(-1px);
}

/* Show/hide password toggle (injected by auth.js). */
.auth-page .form-floating.has-password-toggle {
  position: relative;
}

.auth-page .form-floating.has-password-toggle > .form-control {
  padding-right: 3rem;
}

.auth-page .password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--wlm-forest-mid);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 3;
}

.auth-page .password-toggle:hover {
  color: var(--wlm-forest-dark);
}

.auth-page .password-toggle:focus-visible {
  outline: 2px solid var(--wlm-forest-mid);
  outline-offset: -2px;
  border-radius: 4px;
}

.auth-page .checkbox {
  margin: 0.25rem 0 1.25rem;
}

.auth-page .checkbox .form-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  margin: 0;
}

.auth-page .btn-lg {
  position: relative;
  overflow: hidden;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-page .btn-lg::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.auth-page .btn-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.auth-page .btn-lg:hover::after {
  left: 130%;
}

/* Links under the form (Forgot password / Register / Resend confirmation). */
.auth-page section a {
  color: var(--wlm-forest-mid);
  font-weight: 500;
}

.auth-page section a:hover {
  color: var(--wlm-forest-dark);
}

.auth-page section p {
  margin-bottom: 0.5rem;
}

.auth-page .text-danger {
  font-size: 0.9rem;
}

/* Login page card (Areas/Identity/Pages/Account/Login.cshtml) — a custom-scaffolded
   page, so it doesn't rely on the generic ".auth-page section" rules above. */
.auth-card {
  text-align: center;
}

.auth-card-icon {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--wlm-cream);
  color: var(--wlm-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.auth-card-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--wlm-sand);
  opacity: 0;
  animation: auth-icon-pulse 2.4s ease-out infinite;
}

@keyframes auth-icon-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card-icon::after {
    animation: none;
    display: none;
  }
}

.auth-card-title {
  font-size: 1.9rem;
  margin-bottom: 0.4rem;
}

.auth-card-subtitle {
  color: var(--wlm-forest-mid);
  font-size: 0.92rem;
  margin: 0 0 1.75rem;
}

.auth-card form {
  text-align: left;
}

.auth-card-links {
  margin-top: 1rem;
  text-align: center;
}

.auth-card-links p {
  margin-bottom: 0.5rem;
}

.auth-card-external h3 {
  font-size: 1.05rem;
  text-align: center;
}

@media (max-width: 575.98px) {
  .auth-page {
    padding: 2rem 0 3rem;
    min-height: 0;
  }

  .auth-page section {
    padding: 1.5rem 1.25rem;
  }

  .auth-page::before,
  .auth-page::after {
    width: 260px;
    height: 260px;
  }

  .auth-card-title {
    font-size: 1.55rem;
  }
}

/* ==========================================================================
   Site-wide customer support chat widget (Views/Shared/_ChatWidget.cshtml).
   ========================================================================== */
.chat-widget {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1030;
}

.chat-widget-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--wlm-forest);
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.35);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.chat-widget-toggle:hover {
  background-color: var(--wlm-forest-mid);
  transform: translateY(-2px);
}

.chat-widget-panel {
  position: absolute;
  left: 0;
  bottom: 70px;
  width: 320px;
  max-width: calc(100vw - 44px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-widget-header {
  background: var(--wlm-forest);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 600;
}

.chat-widget-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.chat-widget-messages {
  height: 320px;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--wlm-cream);
}

.chat-bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.9rem;
}

.chat-bubble-sender {
  font-size: 0.7rem;
  opacity: 0.75;
  margin-bottom: 0.15rem;
}

.chat-bubble-me {
  align-self: flex-end;
  background: var(--wlm-sand-light);
  color: var(--wlm-ink);
}

.chat-bubble-support {
  align-self: flex-start;
  background: var(--wlm-forest);
  color: #fff;
}

.chat-bubble-notice {
  align-self: center;
  font-size: 0.8rem;
  color: var(--wlm-forest-mid);
  text-align: center;
}

.chat-widget-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-top: 1px solid var(--wlm-sand-light);
}

/* File & photo attachments, shared by the customer widget and the support console. */
.chat-attachment {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.chat-attachment-download {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}

.chat-bubble-me .chat-attachment-download {
  background: rgba(60, 60, 60, 0.12);
}

.chat-attachment-download:hover {
  background: rgba(255, 255, 255, 0.4);
}

.chat-bubble-me .chat-attachment-download:hover {
  background: rgba(60, 60, 60, 0.22);
}

.chat-attachment-image-link {
  display: block;
  margin: 0;
}

.chat-attachment-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  display: block;
}

.chat-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
}

.chat-bubble-me .chat-attachment-file {
  background: rgba(60, 60, 60, 0.1);
}

.chat-attachment-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Support console reuses the widget's markup/classes inline in the page (not floating). */
.chat-widget-panel-static {
  position: static;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--wlm-sand-light);
}

.chat-widget-panel-static .chat-widget-messages {
  height: 420px;
}

@media (max-width: 575.98px) {
  .chat-widget {
    left: 14px;
    bottom: 14px;
  }
}

/* ==========================================================================
   Site-wide WhatsApp contact widget (Views/Shared/_WhatsAppWidget.cshtml).
   Sits directly above the support chat widget (same left offset, stacked
   higher) so the two coexist without overlapping when both are visible.
   ========================================================================== */
.whatsapp-widget {
  position: fixed;
  left: 22px;
  bottom: 92px;
  z-index: 1030;
}

.whatsapp-widget-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: #25d366;
  color: white;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.35);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.whatsapp-widget-toggle:hover {
  background-color: #1ebe5b;
  transform: translateY(-2px);
}

.whatsapp-widget-panel {
  position: absolute;
  left: 0;
  bottom: 70px;
  width: 300px;
  max-width: calc(100vw - 44px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.25);
  overflow: hidden;
}

.whatsapp-widget-header {
  background: #25d366;
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-weight: 600;
}

.whatsapp-widget-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.whatsapp-widget-branches {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.whatsapp-widget-hint {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  color: var(--wlm-ink);
  opacity: 0.7;
}

.whatsapp-branch-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--wlm-sand-light);
  color: var(--wlm-ink);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.whatsapp-branch-link:hover {
  background-color: var(--wlm-cream);
  border-color: #25d366;
  color: var(--wlm-ink);
}

.whatsapp-branch-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
}

.whatsapp-branch-phone {
  font-size: 0.8rem;
  opacity: 0.75;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .whatsapp-widget {
    left: 12px;
    bottom: 78px;
  }

  /* Smaller footprint on mobile — less surface area for the fixed bubble to cover whatever
     happens to be underneath it. */
  .whatsapp-widget-toggle {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   Animated "trash can" delete button — plays an open-lid / drop / checkmark
   animation on click (see wwwroot/js/delete-button.js), then the underlying
   form is submitted for real. Used for Cart line-item removal and every
   Admin/Merchant delete confirmation page.
   ========================================================================== */
.btn-delete-animated {
  --btn-delete-size: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--wlm-danger);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

.btn-delete-animated:hover:not(:disabled) {
  background-color: #8f3620;
}

.btn-delete-animated:disabled {
  cursor: default;
  opacity: 0.9;
}

.btn-delete-animated.btn-delete-icon-only {
  padding: 6px;
}

.btn-delete-trash {
  position: relative;
  width: var(--btn-delete-size);
  height: var(--btn-delete-size);
  flex-shrink: 0;
}

.btn-delete-top {
  position: absolute;
  top: 20%;
  left: 12%;
  right: 12%;
  height: 2px;
  background: white;
  border-radius: 2px;
  transform-origin: 15% 50%;
  transition: transform 0.25s ease, opacity 0.15s ease 0.4s;
  z-index: 2;
}

.btn-delete-paper {
  position: absolute;
  top: -18%;
  left: 50%;
  width: 24%;
  height: 20%;
  margin-left: -12%;
  background: white;
  border-radius: 1px;
  opacity: 0;
}

.btn-delete-box {
  position: absolute;
  top: 35%;
  left: 20%;
  right: 20%;
  bottom: 15%;
  border: 2px solid white;
  border-top: none;
  border-radius: 0 0 4px 4px;
  transition: transform 0.2s ease, opacity 0.2s ease 0.4s;
}

.btn-delete-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease 0.4s, transform 0.2s ease 0.4s;
}

.btn-delete-check svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: white;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-delete-check svg polyline {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 0.25s ease 0.5s;
}

.btn-delete-animated.is-deleting {
  background-color: var(--wlm-forest);
}

.btn-delete-animated.is-deleting .btn-delete-top {
  transform: rotate(-35deg) translateY(-1px);
  opacity: 0;
}

.btn-delete-animated.is-deleting .btn-delete-paper {
  opacity: 1;
  animation: btn-delete-paper-drop 0.4s ease 0.1s forwards;
}

.btn-delete-animated.is-deleting .btn-delete-box {
  animation: btn-delete-shake 0.3s ease 0.2s;
  opacity: 0;
}

.btn-delete-animated.is-deleting .btn-delete-check {
  opacity: 1;
  transform: scale(1);
}

.btn-delete-animated.is-deleting .btn-delete-check svg polyline {
  stroke-dashoffset: 0;
}

@keyframes btn-delete-paper-drop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(60%);
    opacity: 0;
  }
}

@keyframes btn-delete-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px);
  }
  75% {
    transform: translateX(1px);
  }
}