/** Shopify CDN: Minification failed

Line 1721:13 Expected identifier but found whitespace
Line 1721:15 Unexpected "{"
Line 1721:24 Expected ":"
Line 1721:67 Expected ":"
Line 1730:15 Expected identifier but found whitespace
Line 1730:17 Unexpected "{"
Line 1730:26 Expected ":"
Line 1730:76 Expected ":"
Line 2103:6 Expected identifier but found whitespace
Line 2103:8 Unexpected "{"
... and 10 more hidden warnings

**/
/* ==========================================================================
   Vantage — theme stylesheet
   Copyright (c) 2026. All rights reserved.

   Order: tokens → reset → typography → layout → components → utilities
   ========================================================================== */

   *{
    letter-spacing: normal !important;

     /* User can't select or highlight any text or image */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  /*Remove Tap focus outline and Highlighters */
  -webkit-tap-highlight-color: transparent;  /* Safari and Chrome on mobile */
  outline: none;                             /* Remove focus outline */
  user-select: none;                         /* Optional: prevent text selection */
   }

   
/* --------------------------------------------------------------------------
   1. Tokens
   Merchant-editable values are injected by snippets/design-tokens.liquid,
   which re-declares the custom properties below on :root.
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --c-ink: #14161a;
  --c-ink-soft: #5c646e;
  --c-ink-faint: #8d959e;
  --c-surface: #ffffff;
  --c-shade: #f2f4f3;
  --c-line: #dfe3e2;
  --c-line-strong: #c2c9c7;
  --c-accent: #1f5d4c;
  --c-accent-hover: #17493b;
  --c-accent-wash: #e8f0ec;
  --c-on-accent: #ffffff;
  --c-sale: #a3341f;
  --c-success: #1f5d4c;
  --c-error: #a3341f;

  /* Type */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-body-weight: 400;
  --font-body-weight-bold: 600;
  --font-display-weight: 600;

  --size-2xs: 0.6875rem;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-md: 1rem;
  --size-lg: 1.125rem;
  --size-xl: 1.375rem;
  --size-2xl: 1.75rem;
  --size-3xl: 2.25rem;
  --size-4xl: 3rem;
  --size-5xl: 4rem;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout */
  --page-width: 80rem;
  --gutter: 1.25rem;
  --section-space: var(--sp-8);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--c-line);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Elevation */
  --lift: 0 1px 2px rgb(20 22 26 / 6%), 0 8px 24px rgb(20 22 26 / 8%);
  --lift-sm: 0 1px 2px rgb(20 22 26 / 8%);

  --header-height: 4rem;
  --z-header: 40;
  --z-overlay: 60;
  --z-drawer: 70;
}

@media (min-width: 750px) {
  :root {
    --gutter: 2rem;
    --section-space: var(--sp-9);
    --header-height: 0rem;
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--sp-4));
}

body {
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--size-md);
  font-weight: var(--font-body-weight);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

ul, ol { list-style: none; padding: 0; }

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

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2b. Custom elements

   An unknown element defaults to `display: inline`, which silently breaks
   layout: `position: sticky` will not stick inside an inline parent, and a
   block child inside an inline wrapper produces the wrong box. Every element
   the theme defines is declared here, before anything else can depend on it.
   -------------------------------------------------------------------------- */

vt-sticky-header,
vt-slideshow,
vt-add-to-cart,
vt-recommendations,
vt-collection-filters,
vt-cart-note,
vt-gallery,
vt-variants,
vt-live-search,
vt-localization {
  display: block;
}

/* Wrappers that must not introduce a box of their own. */
vt-drawer,
vt-accordion-group,
vt-cart-remove {
  display: contents;
}

vt-dropdown { display: inline-flex; }
vt-quantity { display: inline-grid; }

/* Before upgrade the element is inert but must still lay out correctly. */
[data-hydrate]:not(:defined) { display: block; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  /* text-wrap: balance; */
}

.t-display { font-size: clamp(var(--size-3xl), 6vw, var(--size-5xl)); }
.t-h1 { font-size: clamp(var(--size-2xl), 4.5vw, var(--size-4xl)); }
.t-h2 { font-size: clamp(var(--size-xl), 3vw, var(--size-3xl)); }
.t-h3 { font-size: var(--size-xl); }
.t-h4 { font-size: var(--size-lg); }
.t-body { font-size: var(--size-md); }
.t-sm { font-size: var(--size-sm); }
.t-xs { font-size: var(--size-xs); }

.t-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  line-height: 1;
}

.t-muted { color: var(--c-ink-soft); }
.t-faint { color: var(--c-ink-faint); }
.t-measure { max-width: 62ch;}
.t-center { text-align: center; }

@media (max-width: 750px) {
.t-center-m { text-align: center; }
}

/* Rich text coming from the merchant */
.rte > * + * { margin-top: var(--sp-4); }
.rte h1, .rte h2, .rte h3, .rte h4 { margin-top: var(--sp-6); }
.rte ul { list-style: disc; padding-left: 1.25em; }
.rte ol { list-style: decimal; padding-left: 1.25em; }
.rte li + li { margin-top: var(--sp-1); }
.rte a { color: var(--c-accent); }
.rte img { border-radius: var(--radius-md); }
.rte blockquote {
  border-left: 2px solid var(--c-accent);
  padding-left: var(--sp-4);
  color: var(--c-ink-soft);
}
.rte table { font-size: var(--size-sm); }
.rte th, .rte td { border-bottom: var(--hairline); padding: var(--sp-2) var(--sp-3); text-align: left; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.page { flex: 1 0 auto; }

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 48rem; }
.wrap--flush { padding-inline: 0; }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: var(--sp-6); }
.section--flush { padding-block: 0; }
.section--shade { background: var(--c-shade); }
.section--ink { background: var(--c-ink); color: var(--c-surface); }
.section--ink .t-muted { color: rgb(255 255 255 / 70%); }

/* Section header: eyebrow, title, and a rule that fills remaining width.
   This rule device is the theme's structural signature. */
.section-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.section-head__top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

/* .section-head__top::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--c-line);
} */

.category-nev-btn {
    background: var(--c-accent) !important;
    color: var(--c-on-accent)!important;
  }
  .category-nev-btn:hover {
    background: #000000 !important;
  }

.section-head__link {
  order: 2;
  flex: none;
  font-size: var(--size-sm);
  font-weight: var(--font-body-weight-bold);
  color: var(--c-accent);
  text-decoration: none;
}

.section-head__link:hover { text-decoration: underline; }

.grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--cols-sm, 2), minmax(0, 1fr));
}

@media (min-width: 750px) {
  .grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
}

.stack { display: grid; gap: var(--sp-4); }
.stack--sm { gap: var(--sp-2); }
.stack--lg { gap: var(--sp-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.split {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   5. Components — buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-on-accent);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.875rem;
  padding: 0 var(--sp-5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.shopify-payment-button__button {
    height: 4.25rem !important;
    border-radius: var(--radius-md) !important;
    background: var(--c-accent) !important;
}
.shopify-payment-button__button:hover {
    background: var(--c-accent-hover) !important;
}

.btn:hover { --btn-bg: var(--c-accent-hover); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-line-strong);
}
.btn--outline:hover { --btn-bg: var(--c-shade); --btn-border: var(--c-ink); }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: transparent;
  padding-inline: var(--sp-3);
}
.btn--quiet:hover { --btn-bg: var(--c-shade); }

.btn--full { width: 100%; }
.btn--sm { min-height: 2.25rem; padding-inline: var(--sp-4); font-size: var(--size-xs); }
.btn--lg { min-height: 4.25rem; padding-inline: var(--sp-6); font-size: var(--size-md); }

.btn__spinner { display: none; width: 1em; height: 1em; }
.btn[data-loading="true"] .btn__label { visibility: hidden; }
.btn[data-loading="true"] .btn__spinner {
  display: block;
  position: absolute;
  animation: vt-spin 700ms linear infinite;
}
.btn[data-loading="true"] { position: relative; }

@keyframes vt-spin { to { transform: rotate(360deg); } }

/* Icon-only control */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 2.75rem; */
  height: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--c-shade); }
.icon-btn svg { width: 1.375rem; height: 1.375rem; }

/* --------------------------------------------------------------------------
   6. Components — forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-size: var(--size-xs);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  transition: border-color var(--dur-fast) var(--ease);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--c-ink-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-accent); outline-offset: 1px; }

.textarea { min-height: 8rem; padding-block: var(--sp-3); resize: vertical; }

.select {
  appearance: none;
  padding-right: var(--sp-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--size-xs);
  color: var(--c-error);
}

.form-banner {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  border: 1px solid;
}
.form-banner--error { border-color: var(--c-error); color: var(--c-error); background: rgb(163 52 31 / 5%); }
.form-banner--success { border-color: var(--c-success); color: var(--c-success); background: var(--c-accent-wash); }
.form-banner svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.15em; }

/* Quantity stepper */
.qty {
  display: inline-grid;
  grid-template-columns: 1.5rem 2rem 1.5rem;
  align-items: center;
  /* border: 1px solid var(--c-line-strong); */
  border-radius: var(--radius-md);
  /* overflow: hidden; */
}
.qty button {
  height: 4.25rem;
  display: grid;
  place-items: center;
  color: var(--c-on-accent);
  transition: background var(--dur-fast) var(--ease);
  background:  var(--c-accent);
  border-radius: var(--radius-md);
}

/* .qty button:hover { background: var(--c-shade); color: var(--c-ink); } */
.qty input {
  height: 4.25rem;
  border: 0;
  border-inline: 1px solid var(--c-line);
  text-align: center;
  font-size: var(--size-sm);
  font-weight: var(--font-body-weight-bold);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   7. Components — media
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.media::before {
  content: "";
  display: block;
  padding-bottom: calc(100% / var(--ratio, 1));
}

.media > img,
.media > svg,
.media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
}

.media--contain { --fit: contain; }
.media--portrait { --ratio: 0.80; }
.media--square { --ratio: 1; }
.media--landscape { --ratio: 1.1; }
.media--wide { --ratio: 2; }

.media__zoom > img { transition: transform var(--dur-slow) var(--ease); }
.media__zoom:hover > img { transform: scale(1.04); }

.placeholder-svg {
  width: 100%;
  height: 100%;
  fill: var(--c-line-strong);
  background: var(--c-shade);
}

/* --------------------------------------------------------------------------
   8. Components — price and badges
   -------------------------------------------------------------------------- */

.price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.price__amount { font-weight: var(--font-body-weight-bold); }
.price__was { color: var(--c-ink-faint); text-decoration: line-through; font-weight: 400; }
.price--on-sale .price__amount { color: var(--c-sale); }
.price__note { font-size: var(--size-xs); color: var(--c-ink-soft); width: 100%; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: var(--size-2xs);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge--sale { background: var(--c-sale); }
.badge--soldout { background: var(--c-ink-faint); }


/* --------------------------------------------------------------------------
   9. Components — product card
   Signature: hairline frame, media zoom, quick-add sliding up on hover.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.card__media { position: relative; }

.card__badges {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  gap: var(--sp-1);
  z-index: 2;
}

.card__quick {
  position: absolute;
  inset-inline: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card:hover .card__quick,
.card:focus-within .card__quick { opacity: 1; transform: none; }

@media (hover: none) {
  .card__quick { opacity: 1; transform: none; }
}

.card__title {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: 0;
  line-height: var(--leading-snug);
}

.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:hover { text-decoration: underline; }

.card__vendor { font-size: var(--size-xs); color: var(--c-ink-faint); }

.card__swatches { display: flex; gap: var(--sp-1); }
.card__swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
}

/* Collection card overlays its label */
.card--overlay .card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-2);
  /* background: linear-gradient(to top, rgb(20 22 26 / 72%), transparent); */
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}


/* --------------------------------------------------------------------------
   9.1 Components — product card 2
   Signature: hairline frame, media zoom, quick-add sliding up on hover.
   -------------------------------------------------------------------------- */


   .c2-product-card {
    border: 1px solid var(--c-line-strong, #1f5d4c);
    background: var(--c-surface, #fff);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
    gap: 0 !important;
  }

  .c2-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 8px;
  }

  .c2-product-card .card__title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  .c2-product-card .card__link {
    text-decoration: none;
    color: var(--c-ink, #14161a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.6em;
  }
  
  .c2-product-card .card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .c2-card__badge-box,
  .c2-cart-btn {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    /* border: 1px solid var(--c-line-strong, #1f5d4c); */
    border-radius: var(--radius-md, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;  
  }

  .c2-card__badge-box {
    position: relative;
    z-index: 2;
    padding: 2px;
  }

  .c2-status-label {
    font-size: 0.55rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--c-ink, #14161a);
  }
  
  .c2-discount-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--c-sale, #a3341f) !important;
  }

  .c2-card__media {
    position: relative;
    overflow: hidden;
  }

  .media.media--landscape.media__zoom, 
  .media.media--portrait.media__zoom,
  .media.media--square.media__zoom {
    border-radius: 0;
  }

  .c2-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 8px;
  }

  .c2-card__price-wrap {
    flex: 1;
    min-width: 0;
  }

  .c2-card__price-wrap .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    line-height: 16px;
  }

  .c2-card__price-wrap .price__was {
    font-size: 0.75rem;
    color: #8d959e;
    text-decoration: line-through;
    order: 1;
  }

  .c2-card__price-wrap .price__amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-ink, #14161a);
    order: 2;
    word-break: break-word;
  }

  .c2-card__action {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }

  

  .c2-cart-btn {
    cursor: pointer;
    color: var(--c-ink, #14161a);
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    position: relative;
  }

  .c2-cart-btn:hover {
    background: var(--c-shade, #f2f4f3);
  }

  .c2-cart-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #8d959e;
    border-color: #8d959e;
  }

  /* Smooth Transitions for Compare Icon */
  .c2-compare-action-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink, #14161a);
  }

  .c2-compare-action-wrap .default-compare-icon,
  .c2-compare-action-wrap .hover-compare-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .c2-compare-action-wrap .default-compare-icon {
    opacity: 1;
    transform: scale(1);
  }

  .c2-compare-action-wrap .hover-compare-icon {
    opacity: 0;
    transform: scale(0.8);
  }

  .c2-compare-action-wrap:hover .default-compare-icon {
    opacity: 0;
    transform: scale(0.8);
  }

  .c2-compare-action-wrap:hover .hover-compare-icon {
    opacity: 1;
    transform: scale(1);
  }

  /* Smooth Transitions for Cart & View Hover Buttons */
  .c2-cart-hover-btn .btn__label,
  .c2-variant-action-btn .btn__label {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c2-cart-hover-btn .default-cart-icon,
  .c2-cart-hover-btn .hover-cart-icon,
  .c2-variant-action-btn .default-cart-icon,
  .c2-variant-action-btn .hover-view-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .c2-cart-hover-btn .default-cart-icon,
  .c2-variant-action-btn .default-cart-icon {
    opacity: 1;
    transform: scale(1);
  }

  .c2-cart-hover-btn .hover-cart-icon,
  .c2-variant-action-btn .hover-view-icon {
    opacity: 0;
    transform: scale(0.8);
  }

  .c2-cart-hover-btn:hover .default-cart-icon,
  .c2-variant-action-btn:hover .default-cart-icon {
    opacity: 0;
    transform: scale(0.8);
  }

  .c2-cart-hover-btn:hover .hover-cart-icon,
  .c2-variant-action-btn:hover .hover-view-icon {
    opacity: 1;
    transform: scale(1);
  }

  /* Mobile Adjustments */
  @media (max-width: 749px) {
    .c2-card__header {
      padding: 8px 10px;
    }
    .c2-product-card .card__title {
      font-size: 0.85rem;
    }
    .c2-card__badge-box,
    .c2-cart-btn {
      width: 38px;
      height: 38px;
    }
    .c2-svg-icon {
      width: 15px !important;
      height: 15px !important;
    }
    .c2-card__footer {
      padding: 8px 10px;
    }
    .c2-card__price-wrap .price__amount {
      font-size: 0.8rem;
    }
    .c2-card__price-wrap .price__was {
      font-size: 0.65rem;
    }
  }

  /* Spinner override styling for c2 button container */
  .c2-cart-btn[data-loading="true"] .btn__label { 
    visibility: hidden; 
  }
  .c2-cart-btn[data-loading="true"] .btn__spinner {
    display: block;
    position: absolute;
    animation: vt-spin 700ms linear infinite;
    width: 16px;
    height: 16px;
  }


/* --------------------------------------------------------------------------
   10. Components — header
   -------------------------------------------------------------------------- */

.header {
  position: relative;
  z-index: var(--z-header);
  background: var(--c-surface);
  /* border-bottom: var(--hairline); */
}

/* Sticky has to be applied to the Shopify section wrapper. A sticky element
   travels inside its parent's box, and .header's own parent is exactly
   header-height tall, so sticking it there does nothing. `:has()` handles
   browsers with JS off; the JS adds .is-sticky as a fallback for the rest. */
.header-section:has(.header--sticky),
.header-section.is-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header--hidden { transform: translateY(-100%); }

.header--sticky {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header--raised { box-shadow: var(--lift-sm); }

/* The mega panel anchors to the page-width wrapper, not the nav item. */
.header .wrap { position: relative; }

.header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-height);
}

.header__logo {
  justify-self: center;
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.header__logo img { max-height: 2.75rem; width: auto; }

.header__actions { display: flex; justify-content: flex-end; align-items: center; }
.header__lead { display: flex; align-items: center; }

.header--left .header__bar { grid-template-columns: auto 1fr auto; }
.header--left .header__logo { justify-self: start; }

.announcement {
  background: var(--c-ink);
  color: var(--c-surface);
  text-align: center;
  font-size: var(--size-xs);
  letter-spacing: 0.02em;
  padding-block: var(--sp-2);
}
.announcement a { color: inherit; }

/* Desktop navigation */
.nav { display: none; }

@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--sp-1); }
  .header__burger { display: none; }
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 2.5rem;
  padding-inline: var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.nav__link:hover { background: var(--c-shade); }
.nav__link[aria-expanded="true"] { background: var(--c-shade); }
.nav__link svg { width: 0.75rem; height: 0.75rem; transition: transform var(--dur-fast) var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  padding: var(--sp-3);
  background: var(--c-surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--lift);
  display: none;
}
.nav__item[open] > .nav__panel,
.nav__panel[data-open] { display: block; }

.nav__panel a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--size-sm);
  text-decoration: none;
}
.nav__panel a:hover { background: var(--c-shade); }

/* Mega menu spans the header, so its containing block is .header__bar,
   not the nav item. `position: static` on the item hands anchoring upward. */
.nav__item--mega { position: static; }

.nav__panel--mega {
  left: 0;
  right: 0;
  width: auto;
  padding: var(--sp-6);
  display: none;
}
.nav__panel--mega[data-open] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-5);
}
.nav__col-title {
  font-size: var(--size-xs);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  padding: var(--sp-2) var(--sp-3);
}

/* --------------------------------------------------------------------------
   11. Components — drawers and overlays
   -------------------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgb(20 22 26 / 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
[data-open] > .scrim,
.scrim[data-open] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(36rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  box-shadow: var(--lift);
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  visibility: hidden;
}

.drawer--right { right: 0; transform: translateX(100%); }
.drawer--left { left: 0; transform: translateX(-100%); }

[data-open] .drawer,
.drawer[data-open] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease), visibility 0s;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--hairline);
}

.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.drawer__foot { border-top: var(--hairline); padding: var(--sp-5); display: grid; gap: var(--sp-3);  background: #ffffff }

/* `position: fixed` freezes the document properly on every browser, including
   iOS Safari where `overflow: hidden` on <body> is ignored. The offset is put
   back by unlockScroll(). */
body[data-scroll-locked] {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* Mobile nav list */
.nav-list a,
.nav-list summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  /* border-bottom: var(--hairline); */
  font-size: var(--size-md);
  text-decoration: none;
}
.nav-list__sub { padding-left: var(--sp-4); }
.nav-list details[open] > summary svg { transform: rotate(180deg); }
.nav-list summary svg { width: 1rem; transition: transform var(--dur-fast) var(--ease); }

/* --------------------------------------------------------------------------
   12. Components — cart
   -------------------------------------------------------------------------- */

.cart-line {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: var(--hairline);
}
.cart-line:first-child { padding-top: 0; }

.cart-line__title { font-size: var(--size-sm); font-weight: normal; text-decoration: none; }
.cart-line__meta { font-size: var(--size-xs); color: var(--c-ink-soft); }
.cart-line__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.cart-line__remove { font-size: var(--size-xs); color: var(--c-ink-soft); text-decoration: underline; }
.cart-line__remove:hover { color: var(--c-error); }

.cart-line[data-updating] { opacity: 0.5; pointer-events: none; }

.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--size-lg); font-weight: var(--font-body-weight-bold); }

.cart-empty { display: grid; gap: var(--sp-4); place-items: center; text-align: center; padding-block: var(--sp-8); }

.cart-count {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: 0.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--size-2xs);
  font-weight: var(--font-body-weight-bold);
  line-height: 1;
}

.cart-toggle { position: relative; }

.cart-toggle.is-pulsing .cart-count {
  animation: vt-pulse 420ms var(--ease);
}

@keyframes vt-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   13. Components — product page
   -------------------------------------------------------------------------- */

.product { display: grid; gap: var(--sp-6); }

@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }

  /* Whichever column is pinned, the other one is what the page scrolls. */
  .product[data-sticky="info"] .product__info,
  .product[data-sticky="media"] .gallery {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-5));
  }
}

/* Gallery ---------------------------------------------------------------- */

.gallery {
  --thumb-per: 6;
  --thumb-per-mobile: 4;
  --thumb-w: 88px;
  --thumb-gap: var(--sp-2);

  display: grid;
  gap: var(--sp-3);
  grid-template-areas: "stage" "nav";
}

.gallery[data-thumbs="top"] { grid-template-areas: "nav" "stage"; }

.gallery__stage { grid-area: stage; position: relative; min-width: 0; }
.gallery__nav { grid-area: nav; position: relative; min-width: 0; }

/* Main slider ------------------------------------------------------------ */

.gallery__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-md);
  /* The rail is dragged by hand on touch, so the bar itself is redundant. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* The loop clones sit outside the real run of slides, so they stay out of the
   way until the script has placed the track on the first real slide. */
vt-gallery:not([data-ready]) .gallery__slide[data-clone] { display: none; }

.gallery__slide .media { border-radius: var(--radius-md); }

/* Only revealed once the element has hydrated, so they never sit dead. */
.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 88%);
  color: var(--c-ink);
  box-shadow: 0 1px 8px rgb(0 0 0 / 14%);
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

vt-gallery[data-ready] .gallery__arrow { display: grid; }
.gallery__arrow:hover { background: #fff; }
.gallery__arrow[data-dir="prev"] { left: var(--sp-3); }
.gallery__arrow[data-dir="next"] { right: var(--sp-3); }
.gallery__arrow[data-dir="prev"] svg { transform: rotate(180deg); }
.gallery__arrow svg { width: 1.125rem; height: 1.125rem; }
.gallery__arrow[disabled] { opacity: 0; pointer-events: none; }

.gallery__counter {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  padding: 0.15rem var(--sp-2);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: var(--size-2xs);
  line-height: 1.6;
}

/* Thumbnail rail --------------------------------------------------------- */

.gallery__thumbs {
  position: relative;
  display: flex;
  gap: var(--thumb-gap);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }

.gallery__thumb {
  position: relative;
  /* Widths divide the rail exactly, so the row always fills its container. */
  flex: 0 0 calc((100% - (var(--thumb-per-mobile) - 1) * var(--thumb-gap)) / var(--thumb-per-mobile));
  aspect-ratio: 1;
  /* Square until the row is very short, then it flattens rather than
     ballooning — a two-image gallery should not out-size its own stage. */
  max-height: 9rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.gallery__thumb .media {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
}

.gallery__thumb .media::before { content: none; }
.gallery__thumb[aria-current="true"] { border-color: var(--c-ink); }
.gallery__thumb[aria-current="false"]:hover { border-color: var(--c-line-strong); }

.gallery__thumb-badge {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 55%);
  color: #fff;
}

.gallery__thumb-badge svg { width: 0.75rem; height: 0.75rem; }

.gallery__thumb-arrow {
  position: absolute;
  z-index: 2;
  display: none;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-pill);
  color: white;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Arrows appear only when the rail actually overflows. */
vt-gallery[data-ready] .gallery__nav[data-overflow] .gallery__thumb-arrow { display: grid; }
.gallery__thumb-arrow svg { width: 0.7rem; height: 0.7rem; }
.gallery__thumb-arrow[disabled] { opacity: 0; pointer-events: none; }

/* Horizontal rail (top, bottom, and every position on small screens). */
.gallery__thumb-arrow[data-dir="prev"] { left: 0; top: 50%; transform: translateY(-50%); }
.gallery__thumb-arrow[data-dir="next"] { right: 0; top: 50%; transform: translateY(-50%); }
.gallery__thumb-arrow[data-dir="prev"] svg { transform: rotate(90deg); }
.gallery__thumb-arrow[data-dir="next"] svg { transform: rotate(-90deg); }

/* Touch devices drag both rails by hand, so the arrows are only clutter. */
@media (hover: none) {
  vt-gallery[data-ready] .gallery__arrow,
  vt-gallery[data-ready] .gallery__nav[data-overflow] .gallery__thumb-arrow { display: none; }
}

@media (min-width: 750px) {
  .gallery__thumb {
    flex: 0 0 calc((100% - (var(--thumb-per) - 1) * var(--thumb-gap)) / var(--thumb-per));
  }

  /* Vertical rails: the column is absolutely filled, so its height can never
     exceed the stage — the thumbnails always line up with the main media. */
  .gallery[data-thumbs="left"] { grid-template-areas: "nav stage"; grid-template-columns: var(--thumb-w) minmax(0, 1fr); }
  .gallery[data-thumbs="right"] { grid-template-areas: "stage nav"; grid-template-columns: minmax(0, 1fr) var(--thumb-w); }

  .gallery[data-thumbs="left"] .gallery__thumbs,
  .gallery[data-thumbs="right"] .gallery__thumbs {
    position: absolute;
    inset: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
  }

  .gallery[data-thumbs="left"] .gallery__thumb,
  .gallery[data-thumbs="right"] .gallery__thumb {
    width: 100%;
    aspect-ratio: auto;
    max-height: none;
    flex: 0 0 calc((100% - (var(--thumb-per) - 1) * var(--thumb-gap)) / var(--thumb-per));
  }

  .gallery[data-thumbs="left"] .gallery__thumb-arrow,
  .gallery[data-thumbs="right"] .gallery__thumb-arrow {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .gallery[data-thumbs="left"] .gallery__thumb-arrow[data-dir="prev"],
  .gallery[data-thumbs="right"] .gallery__thumb-arrow[data-dir="prev"] { top: 0; bottom: auto; }

  .gallery[data-thumbs="left"] .gallery__thumb-arrow[data-dir="next"],
  .gallery[data-thumbs="right"] .gallery__thumb-arrow[data-dir="next"] { top: auto; bottom: 0; }

  .gallery[data-thumbs="left"] .gallery__thumb-arrow[data-dir="prev"] svg,
  .gallery[data-thumbs="right"] .gallery__thumb-arrow[data-dir="prev"] svg { transform: rotate(180deg); }

  .gallery[data-thumbs="left"] .gallery__thumb-arrow[data-dir="next"] svg,
  .gallery[data-thumbs="right"] .gallery__thumb-arrow[data-dir="next"] svg { transform: none; }
}

/* Variant picker */
.variants { display: grid; gap: var(--sp-4); }

.variant__legend {
  font-size: var(--size-xs);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: var(--tracking-wide);
  /* color: var(--c-ink-soft); */
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.variant__value { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-ink); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatches input { position: absolute; opacity: 0; width: 0; height: 0; }

.swatches label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.swatches label:hover { border-color: var(--c-ink); }
.swatches input:checked + label { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-surface); }
.swatches input:focus-visible + label { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.swatches label[data-unavailable] { opacity: 0.4; text-decoration: line-through; }

.accordion { border-top: var(--hairline); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  font-size: var(--size-sm);
  font-weight: var(--font-body-weight-bold);
  border-bottom: var(--hairline);
}
.accordion summary svg { width: 0.75rem; transition: transform var(--dur-fast) var(--ease); }
.accordion details[open] > summary svg { transform: rotate(180deg); }
.accordion__body { padding-block: var(--sp-4); border-bottom: var(--hairline); }

.stock { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--size-sm); }
.stock::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-success); }
.stock[data-level="out"]::before { background: var(--c-ink-faint); }
.stock[data-level="low"]::before { background: #b8860b; }

/* --------------------------------------------------------------------------
   14. Components — banner and marketing
   -------------------------------------------------------------------------- */

.banner { position: relative; display: grid; }
.banner__media { grid-area: 1 / 1; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }

.banner--overlay .banner__content {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  align-content: center;
  padding: var(--sp-7) var(--gutter);
}

.banner__content { display: grid; gap: var(--sp-4); justify-items: start; }
.banner--center .banner__content { justify-items: center; text-align: center; }
.banner--end .banner__content { justify-items: end; text-align: right; }

.banner__veil { grid-area: 1 / 1; background: rgb(20 22 26 / var(--veil, 25%)); }

.banner--tall .banner__media img { min-height: 70vh; }
.banner--short .banner__media img { min-height: 22rem; }

/* --------------------------------------------------------------------------
   15. Components — footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--c-shade);
  border-top: var(--hairline);
  padding-block: var(--sp-8) var(--sp-5);
  margin-top: auto;
}

/* .footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
} */

.footer__col-title {
  font-size: var(--size-md);
  font-weight: var(--font-body-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.footer__links { display: grid; gap: var(--sp-2); font-size: var(--size-sm); }
.footer__links a { color: var(--c-ink-soft); text-decoration: none; }
.footer__links a:hover { color: var(--c-ink); text-decoration: underline; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--hairline);
  font-size: var(--size-xs);
  color: var(--c-ink-soft);
}

.social { display: flex; gap: var(--sp-1); margin:auto;}
.social a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }
.social a:hover { background: var(--c-line); }
.social svg { width: 1.125rem; height: 1.125rem; }

.payment-icons { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.payment-icons svg { width: 2.25rem; height: 1.5rem; }


/* --------------------------------------------------------------------------
   15b. Components — add-on sections
   -------------------------------------------------------------------------- */

/* Image with text -------------------------------------------------------- */

@media (min-width: 900px) {
  .split--media { align-items: center; }
  .split--media.split--flip > *:first-child { order: 2; }
}

.tick-list { display: grid; gap: var(--sp-2); }

.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--size-sm);
}

.tick-list svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.28em;
  color: var(--c-accent);
}

/* Multicolumn ------------------------------------------------------------ */

.column { display: grid; gap: var(--sp-3); align-content: start; }

.column[style*="center"] { justify-items: center; }

.column__media { width: 100%; max-width: 12rem; }
.column[style*="center"] .column__media { margin-inline: auto; }

.column__media--circle .media { border-radius: 50%; max-width: 6rem; }


/* Slideshow -------------------------------------------------------------- */

.slideshow { display: block; position: relative; overflow: hidden; }

.slideshow__track { 
  display: flex; 
  width: 100%; 
  will-change: transform;
}

.slideshow__slide {
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 100%;
  position: relative;
  display: grid;
}

/* Adapt to First Image Logic */
vt-slideshow[data-height="adapt"] {
  aspect-ratio: var(--adapt-ratio, 16/9);
}

vt-slideshow[data-height="adapt"] .slideshow__track,
vt-slideshow[data-height="adapt"] .slideshow__slide {
  height: 100%;
}

.banner--adapt .banner__media,
.banner--adapt .banner__media img,
.banner--adapt .banner__media picture,
.banner--adapt .banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner--short .banner__media img, .banner--short .banner__video { min-height: 22rem; }
.banner--tall .banner__media img, .banner--tall .banner__video { min-height: 70vh; }

/* Custom Heights for Desktop & Mobile */
.banner--custom {
  min-height: {{ section.settings.custom_height | default: 500 }}px;
}
.banner--custom .banner__media img, .banner--custom .banner__video {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 749px) {
  .banner--custom {
    min-height: {{ section.settings.custom_height_mobile | default: 400 }}px;
  }
}

.banner__media { grid-area: 1 / 1; position: relative; overflow: hidden; }
.banner__media img, .banner__video { width: 100%; height: 100%; object-fit: cover; }

/* Vertical Content Alignment */
.banner--valign-top .banner__content { align-content: start; }
.banner--valign-center .banner__content { align-content: center; }
.banner--valign-bottom .banner__content { align-content: end; }

.banner--overlay .banner__content {
  grid-area: 1 / 1;
  z-index: 1;
  display: grid;
  padding: var(--sp-7) var(--gutter);
}

.banner__content { display: grid; gap: var(--sp-4); justify-items: start; }
.banner--align-center .banner__content { justify-items: center; text-align: center; }
.banner--align-end .banner__content { justify-items: end; text-align: right; }

.banner__veil { grid-area: 1 / 1; background: rgb(20 22 26 / var(--veil, 25%)); }

/* Slideshow Controls & Progress Pagination */
.slideshow__controls {
  position: absolute;
  inset-inline: 0;
  bottom: var(--sp-4);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

.slideshow__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 85%);
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
}

.slideshow__arrow:hover { background: #fff; }
.slideshow__arrow svg { width: 1.125rem; height: 1.125rem; }

.slideshow__dots { display: flex; align-items: center; gap: var(--sp-2); }

.slideshow__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-pill);
  background: #e4e3eb;
  transition: width var(--dur) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}

/* Inactive Dots */
.slideshow__dot[aria-selected="false"] {
  width: 0.5rem;
  background: #e4e3eb;
}

/* Active Dot Expanding and Filling Solid Black */
.slideshow__dot[aria-selected="true"] {
  background: #e4e3eb;
  width: 2.2rem;
}

.slideshow__dot.is-animating::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #000000;
  animation: dotProgress var(--progress-duration, 6000ms) linear forwards;
}

@keyframes dotProgress {
  to {
    width: 100%;
  }
}

/* Testimonials ----------------------------------------------------------- */

.quote {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  margin: 0;
}

.quote__rating { display: flex; gap: 0.1em; font-size: var(--size-sm); }
.quote__star { color: var(--c-line-strong); }
.quote__star.is-filled { color: var(--c-accent); }

.quote__body {
  font-size: var(--size-md);
  line-height: var(--leading-normal);
  border: 0;
  padding: 0;
  margin: 0;
}

.quote__body::before { content: open-quote; }
.quote__body::after { content: close-quote; }

.quote__author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.quote__avatar { width: 2.5rem; flex: none; }
.quote__avatar .media { border-radius: 50%; }

/* Logo list -------------------------------------------------------------- */

.logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5) var(--sp-7);
}

.logo-list__item img {
  width: auto;
  max-width: 7rem;
  max-height: 2.5rem;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease);
}

.logo-list__item:hover img { opacity: 1; }

/* --------------------------------------------------------------------------
   16. Components — misc
   -------------------------------------------------------------------------- */

/* .breadcrumb { display: flex; gap: var(--sp-2); font-size: var(--size-xs); color: var(--c-ink-soft); margin-bottom: var(--sp-4); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; } */

.pagination { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-7); }
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  text-decoration: none;
}
.pagination a:hover { background: var(--c-shade); }
.pagination [aria-current] { background: var(--c-ink); color: var(--c-surface); }

.facets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-block: var(--sp-4); border-block: var(--hairline); margin-bottom: var(--sp-6); }
.facets__count { margin-left: auto; font-size: var(--size-sm); color: var(--c-ink-soft); }

/* Collection toolbar (filter / view toggle / sort) ------------------------ */

.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.toolbar-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 0;
  padding: var(--sp-2) 0;
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
}
.toolbar-filter-btn svg { width: 1.15em; height: 1.15em; flex: none; }
.toolbar-filter-btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.35em;
  border-radius: 4px;
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: var(--size-xs);
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--c-shade);
  border-radius: 999px;
  padding: 4px;
}
.view-toggle__btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--c-ink-faint);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.view-toggle__btn svg { width: 1.1rem; height: 1.1rem; }
.view-toggle__btn:hover:not(.is-active) { color: var(--c-ink); }
.view-toggle__btn.is-active { background:var(--c-ink);  color: var(--c-surface); box-shadow: var(--lift-sm); }

.sort-pill { position: relative; display: inline-flex; align-items: center; }
.sort-pill__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  padding: 0.65rem 2.25rem 0.65rem 1.1rem;
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
}
.sort-pill__select:hover { border-color: var(--c-ink-faint); }
.sort-pill__select:focus { border-color: var(--c-accent); outline-offset: 1px; }
.sort-pill svg {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8rem;
  height: 0.8rem;
  pointer-events: none;
  color: var(--c-ink-faint);
}

.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.7rem 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--c-shade);
  font-size: var(--size-xs);
  color: var(--c-ink);
  text-decoration: none;
}
.filter-chip svg { width: 0.7rem; height: 0.7rem; }
.filter-chip:hover { background: var(--c-line); }
.filter-chip__clear-all {
  font-size: var(--size-xs);
  color: var(--c-ink-soft);
  text-decoration: underline;
}

/* View-toggle grid density variants */
.grid[data-view="list"] { grid-template-columns: 1fr !important; }
.grid[data-view="list-detail"] { grid-template-columns: 1fr !important; }
.grid[data-view="list-detail"] .card {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-4);
}
.grid[data-view="list-detail"] .card__media { width: 8rem; flex: none; }
.grid[data-view="list-detail"] .card__body { flex: 1; }

.article-meta { display: flex; gap: var(--sp-3); font-size: var(--size-xs); color: var(--c-ink-soft); }

.search-results { display: grid; gap: var(--sp-3); }

/* Predictive search inside the search drawer */
.live-search { display: block; }

.live-search__results {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

.live-search__results a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.live-search__results a:hover { background: var(--c-shade); }

.live-search__results .nav__col-title { padding-inline: var(--sp-2); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden { display: none !important; }
.mt-auto { margin-top: auto; }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

[data-hydrate]:not(:defined) { display: block; }
vt-quantity[data-hydrate]:not(:defined) {display: inline-grid;}

.reveal { opacity: 0; transform: translateY(0.75rem); }
.reveal[data-shown] {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}


/* Category List Section Styles --------------------------------------------- */
.category-container {
  position: relative;
  overflow: hidden;
}

.category-slider-mode .category-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: {{ settings.card_grid_gap }}px;
  padding-bottom: var(--sp-3);
  cursor: grab;
  user-select: none;
}

.category-slider-mode .category-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.category-slider-mode .category-grid::-webkit-scrollbar {
  display: none;
}

.category-slider-mode .category-card {
  flex: 0 0 calc((100% - (var(--cols-mobile, 2) - 1) * var(--sp-4)) / var(--cols-mobile, 2));
  scroll-snap-align: start;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  background: transparent;
}

@media (min-width: 750px) {
  .category-slider-mode .category-card {
    flex: 0 0 calc((100% - (var(--cols-desktop, 4) - 1) * var(--sp-5)) / var(--cols-desktop, 4));
    transform: none !important;
  }
}

.category-card .media {
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
}

/* Image Zoom Effect on Hover */
.category-card .media img {
  transition: transform 0.4s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card:hover .media img {
  transform: scale(1.08);
}

/* Dynamic Title Font Size & Color Control */
.category-card-title {
  font-size: var(--title-size-mobile) !important;
  color: var(--title-color) !important;
  text-decoration: none !important;
}

@media (min-width: 750px) {
  .category-card-title {
    font-size: var(--title-size-desktop) !important;
  }
}

/* Title Below Card Layout Adjustments */
.category-card:not(.card--overlay) .card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
}

.category-card:not(.card--overlay) .card__body {
  margin-top: var(--sp-3);
  padding: 0 var(--sp-1);
}

.category-card:not(.card--overlay) .category-card-title {
  color: var(--c-ink) !important;
  text-decoration: none !important;
}

/* Text Alignments */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

.card--overlay .text-align-left .card__body { text-align: left; }
.card--overlay .text-align-center .card__body { text-align: center; }
.card--overlay .text-align-right .card__body { text-align: right; }

/* Optional Hover Overlay Effect on Image */
.hover-overlay-enabled .media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.hover-overlay-enabled:hover .media::after {
  opacity: 1;
}

.card--overlay .card__body {
  position: relative;
  z-index: 2;
}

.category-card:hover,
.category-card:active,
.category-card:focus {
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.category-link {
  text-decoration: none !important;
}

/* Controls Wrapper (Progress bar + Arrows in one line) */
.category-controls-wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* Scroll Progress Bar */
.category-scroll-progress {
  flex-grow: 1;
  height: 3px;
  background: #CAE0F0;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.category-progress-fill {
  width: 20%;
  height: 100%;
  background: var(--c-accent);
  transition: width 0.3s ease-out;
  border-radius: var(--radius-pill);
}

/* Navigation Buttons */
.category-controls {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.category-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--c-shade);
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
  border: var(--hairline);
}

.category-arrow:hover { 
  background: var(--c-ink); 
  color: var(--c-surface);
}

.category-arrow svg { 
  width: 1.125rem; 
  height: 1.125rem; 
}



/* Featured Collection Styles --------------------------------------------- */
.category-container {
  position: relative;
  overflow: hidden;
}

.category-grid {
  display: flex;
  gap: {{ settings.card_grid_gap }}px;
  padding-bottom: var(--sp-3);
  user-select: none;
}

/* Slider Mode Styles */
.category-slider-mode .category-grid {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-behavior: smooth;
}

.category-slider-mode .category-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.category-slider-mode .category-grid::-webkit-scrollbar {
  display: none;
}

/* Grid Mode Styles (Fixes the big product size issue) */
.category-container:not(.category-slider-mode) .category-grid {
  flex-wrap: wrap;
}

/* Slide Item Width based on Columns settings */
.category-slide-item {
  flex: 0 0 calc((100% - (var(--cols-mobile, 2) - 1) * var(--sp-4)) / var(--cols-mobile, 2));
  scroll-snap-align: start;
  border-radius: var(--card-radius);
  overflow: hidden;
}

@media (min-width: 750px) {
  .category-slide-item {
    flex: 0 0 calc((100% - (var(--cols-desktop, 4) - 1) * var(--sp-5)) / var(--cols-desktop, 4));
  }
}

.category-controls-wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.category-progress-fill {
  width: 20%;
  height: 100%;
  background: var(--c-accent);
  transition: width 0.3s ease-out;
  border-radius: var(--radius-pill);
}

.category-controls {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.category-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--c-shade);
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
  border: var(--hairline);
}

.category-arrow:hover { 
  background: var(--c-ink); 
  color: var(--c-surface);
}

.category-arrow svg { 
  width: 1.125rem; 
  height: 1.125rem; 
}

/* ==========================================
   Tabs Collection Section - Theme Styles
   ========================================== */

.tabs-collection-section .tabs-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-6, 24px);
  width: 100%;
}

.tabs-collection-section .tabs-scroll-wrapper {
  background: var(--c-on-accent);
  padding: 4px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.tabs-collection-section .tabs-shape-pill {
  border-radius: var(--radius-pill, 9999px);
}
.tabs-collection-section .tabs-shape-pill .tab-nav-btn {
  border-radius: var(--radius-pill, 9999px);
}

.tabs-collection-section .tabs-shape-rounded {
  border-radius: var(--radius-md, 8px);
}
.tabs-collection-section .tabs-shape-rounded .tab-nav-btn {
  border-radius: var(--radius-md, 8px);
}

.tabs-collection-section .tabs-shape-square {
  border-radius: 0;
}
.tabs-collection-section .tabs-shape-square .tab-nav-btn {
  border-radius: 0;
}

.tabs-collection-section .tabs-nav-list {
  display: flex;
  gap: var(--sp-2, 8px);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
  padding: 0 4px;
}

.tabs-collection-section .tabs-nav-list::-webkit-scrollbar {
  display: none;
}

.tabs-collection-section .tab-nav-btn {
  flex: 0 0 calc((100% - (var(--mobile-visible, 2.2) - 1) * var(--sp-2, 8px)) / var(--mobile-visible, 2.2));
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink-subdued, #666);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

@media (min-width: 750px) {
  .tabs-collection-section .tabs-scroll-wrapper {
    width: auto;
    display: inline-flex;
  }
  .tabs-collection-section .tabs-nav-list {
    width: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .tabs-collection-section .tab-nav-btn {
    flex: 0 0 auto;
  }
}

.tabs-collection-section .tab-nav-btn.tab-icon-left {
  flex-direction: row;
  gap: 8px;
}

.tabs-collection-section .tab-nav-btn.tab-icon-top {
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  text-align: center;
}

.tabs-collection-section .tab-btn-icon {
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  object-fit: contain;
  border-radius: 50%;
}

.tabs-collection-section .tab-count {
  opacity: 0.7;
  font-size: 0.85em;
  margin-left: 4px;
}

.tabs-collection-section .tab-nav-btn.is-active {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: var(--lift-sm, 0 2px 8px rgba(0,0,0,0.08));
}

.tabs-collection-section .tab-pane {
  display: none;
}

.tabs-collection-section .tab-pane.is-active {
  display: block;
}

.tabs-collection-section .category-container {
  position: relative;
  overflow: hidden;
}

.tabs-collection-section .category-grid {
  display: flex;
  gap: {{ settings.card_grid_gap }}px;
  padding-bottom: var(--sp-3);
  user-select: none;
}

.tabs-collection-section .category-slider-mode .category-grid {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  scroll-behavior: smooth;
}

.tabs-collection-section .category-slider-mode .category-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.tabs-collection-section .category-slider-mode .category-grid::-webkit-scrollbar {
  display: none;
}

.tabs-collection-section .category-container:not(.category-slider-mode) .category-grid {
  flex-wrap: wrap;
}

.tabs-collection-section .category-slide-item {
  flex: 0 0 calc((100% - (var(--cols-mobile, 2) - 1) * var(--sp-4)) / var(--cols-mobile, 2));
  scroll-snap-align: start;
  border-radius: var(--card-radius);
  overflow: hidden;
}

@media (min-width: 750px) {
  .tabs-collection-section .category-slide-item {
    flex: 0 0 calc((100% - (var(--cols-desktop, 4) - 1) * var(--sp-5)) / var(--cols-desktop, 4));
  }
}

.tabs-collection-section .tabs-controls-wrapper.is-hidden {
  display: none !important;
}

.tabs-collection-section .view-all-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: var(--c-shade, #f4f4f4);
  border: var(--hairline, 1px solid #e5e5e5);
  border-radius: var(--card-radius);
  text-decoration: none !important;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-fast) var(--ease);
}

.tabs-collection-section .view-all-card.has-bg-image .view-all-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}

.tabs-collection-section .view-all-card.has-bg-image:hover .view-all-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.tabs-collection-section .view-all-card.has-bg-image .view-all-text,
.tabs-collection-section .view-all-card.has-bg-image .view-all-icon {
  color: #ffffff;
}

.tabs-collection-section .view-all-card:not(.has-bg-image):hover {
  background: var(--c-ink);
  color: var(--c-surface);
}

.tabs-collection-section .view-all-card:not(.has-bg-image):hover .view-all-text,
.tabs-collection-section .view-all-card:not(.has-bg-image):hover .view-all-icon {
  color: var(--c-surface, #fff);
}

.tabs-collection-section .view-all-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.tabs-collection-section .view-all-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-ink);
}

.tabs-collection-section .view-all-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--c-ink);
}

.tabs-collection-section .view-all-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tabs-collection-section .category-controls-wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.tabs-collection-section .category-progress-fill {
  width: 20%;
  height: 100%;
  background: var(--c-ink);
  transition: width 0.3s ease-out;
  border-radius: var(--radius-pill);
}

.tabs-collection-section .category-controls {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.tabs-collection-section .category-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--c-shade);
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
  border: var(--hairline);
}

.tabs-collection-section .category-arrow:hover { 
  background: var(--c-ink); 
  color: var(--c-surface);
}

.tabs-collection-section .category-arrow svg { 
  width: 1.125rem; 
  height: 1.125rem; 
}


/* ==========================================
   Alert Massege Popup
   ========================================== */
.custom-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.custom-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.custom-alert-modal {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 30px 24px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.custom-modal-overlay.is-visible .custom-alert-modal {
  transform: translateY(0);
}

.custom-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  padding: 0;
}

.custom-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid #dcc819;
  border-radius: 50%;
  color: #dcc819;
  margin-bottom: 16px;
}
.custom-modal-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.custom-modal-title {
  margin: 0 0 12px;
  font-size: 22px;
  color: #334155;
  font-weight: 700;
}
.custom-modal-text {
  margin: 0 0 24px;
  font-size: 15px;
  color: #334155;
  line-height: 1.5;
}
.custom-modal-action {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-radius: var(--radius-md);
  padding: 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 200px;
}
.custom-modal-action:hover {
  background: #000000;
}

/* ============================================================
   National — additions
   Paste at the very BOTTOM of assets/theme.css.
   There is no closing tag here to get wrong, and this file
   loads on every page of the site.
   ============================================================ */

:root {
  /* Distance from the top of the window the sticky gallery stops at.
     Your header measures 82px; this adds a 16px breathing gap.
     Raise if the gallery tucks under the header, lower if the gap is big. */
  --pdp-header-offset: 98px;
}

/* ---------- Product page: adopt the site's own page width ----------
   Every other page is already capped at --page-width (1600px) with a
   2rem gutter via .wrap / .section. The product section was built
   outside that system and ran full-bleed. These rules put it back in
   line, so the product page frames the same as the rest of the site. */

@media (min-width: 900px) {

  .custom-master-wrap {
    padding-inline: var(--gutter, 2rem) !important;
  }

  .custom-product-grid {
    max-width: var(--page-width, 100rem);
    margin-inline: auto;
    align-items: flex-start !important;
  }

  /* The gallery column was pinned to height:100vh, which is what
     cropped the top and bottom off tall appliances. Let it be as
     tall as its contents and stick below the header instead. */
  .custom-col-gallery {
    height: auto !important;
    max-height: none !important;
    align-self: flex-start;
    top: var(--pdp-header-offset) !important;
    padding-block: 24px;
  }

  /* A refrigerator is tall and narrow. `contain` shows the whole
     appliance; `cover` in a short box eats the ends. */
  .custom-col-gallery img,
  .custom-col-gallery .media img,
  .custom-col-gallery [style*="aspect-ratio"] img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - var(--pdp-header-offset) - 48px) !important;
  }

  .custom-col-gallery .media,
  .custom-col-gallery .media--square,
  .custom-col-gallery .media--portrait {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  .custom-col-content {
    padding-top: 24px !important;
  }
}

/* Past 1600px the page stops growing anyway, but ease the split so
   the gallery doesn't become a billboard on very wide monitors. */
@media (min-width: 1700px) {
  .custom-col-gallery { flex-basis: 55% !important; max-width: 55% !important; }
  .custom-col-content { flex-basis: 45% !important; max-width: 45% !important; }
}
/* ---------- Site-wide content width ----------
   The doubled :root:root is deliberate: design-tokens.liquid loads after
   theme.css and sets this variable, so a plain :root here loses to it.
   The extra specificity wins without needing !important. */
:root:root {
  --page-width: 87.5rem;   /* 1400px — theme default is 100rem / 1600px */
}
/* ---------- product gallery: stop the stage cropping tall appliances ----------
   The gallery snippet inlines `.custom-stage-item img { object-fit: cover
   !important }` AFTER theme.css, so an equally specific rule here loses the
   cascade. The extra ancestor gives this one the weight to win.
   The stage also lost its height when we removed `height: 100vh`, leaving a
   landscape box holding square photos — hence the crop. */
.custom-col-gallery .custom-media-gallery-wrap .custom-stage-item img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

.custom-col-gallery .custom-media-gallery-wrap,
.custom-col-gallery .custom-media-stage {
  aspect-ratio: 1 / 1;
  height: auto !important;
}