/* ==========================================================================
   Blueleaf Sports Store - shared design tokens, chrome and components.
   Desktop and tablet expression lives here.
   The mobile application shell lives in store-app.css.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Neutral surfaces, pure crisp white default */
  --page: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #F8FAFA;
  --card-3: #ECF1F1;

  /* Type */
  --ink: #0E1417;
  --ink-2: #3D4A4F;
  --ink-3: #6C7B81;
  --ink-4: #98A5AA;

  /* Hairlines */
  --line: #D9E1E2;
  --line-soft: #E8EDEE;

  /* Brand chrome, treated as a tinted dark neutral rather than an accent */
  --chrome: #10211E;
  --chrome-2: #17302B;
  --chrome-3: #204039;
  --chrome-ink: #E9F1EF;
  --chrome-ink-2: #A8BEB8;

  /* The single accent */
  --accent: #0B8B70;
  --accent-press: #087159;
  --accent-soft: #E2F2EE;
  --accent-ink: #FFFFFF;

  /* Semantic only: markdown, availability, rating */
  --deal: #B03220;
  --stock: #1B7A3D;
  --star: #DE9433;

  --r-xs: 4px;
  --r-sm: 7px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(14, 20, 23, .05), 0 1px 1px rgba(14, 20, 23, .04);
  --shadow-2: 0 8px 22px -10px rgba(14, 20, 23, .18), 0 2px 6px -2px rgba(14, 20, 23, .07);
  --shadow-3: 0 26px 60px -24px rgba(14, 20, 23, .30), 0 4px 12px -6px rgba(14, 20, 23, .10);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-swap: cubic-bezier(.65, .05, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --max: 1480px;
  --gutter: 22px;
  --header-h: 106px;
  --tab-h: 60px;

  --z-sticky: 40;
  --z-header: 60;
  --z-sheet: 80;
  --z-modal: 90;
  --z-toast: 100;
}
/* --- Dark mode. Activated explicitly via user toggle (:root[data-theme="dark"]). --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0A0E0F;
  --card: #141A1B;
  --card-2: #1A2223;
  --card-3: #222B2C;
  --ink: #E9EEEE;
  --ink-2: #B5C0C2;
  --ink-3: #8C989B;
  --ink-4: #6B7679;
  --line: #2B3536;
  --line-soft: #222B2C;
  --chrome: #0D1817;
  --chrome-2: #14231F;
  --chrome-3: #1D332D;
  --accent: #2CBE9B;
  --accent-press: #48D2B0;
  --accent-soft: #12312A;
  --accent-ink: #06231C;
  --deal: #F2745C;
  --stock: #52C47C;
  --star: #F0AC53;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 8px 22px -10px rgba(0, 0, 0, .70), 0 2px 6px -2px rgba(0, 0, 0, .45);
  --shadow-3: 0 26px 60px -24px rgba(0, 0, 0, .85), 0 4px 12px -6px rgba(0, 0, 0, .55);
}
/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Sticky chrome sits over the top of the scrollport, so every anchor jump and
   every scrollIntoView is pushed down past it. --stick-h is measured live and
   names whichever chrome is currently pinned there, web header or app bar. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--stick-h, var(--header-h)) + 14px); }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }

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

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top .22s var(--ease);
}
.skip-link:focus { top: 12px; }

.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.stack-gap { display: grid; gap: 18px; }

/* Author display rules outrank the browser default for [hidden], so panels that
   are declared display:grid or display:flex ignore the attribute unless this
   says otherwise. Every toggled region on the site uses hidden, so it is set
   once here rather than per component. */
[hidden] { display: none !important; }
/* ==========================================================================
   WEB CHROME (desktop and tablet). Hidden below 768px, where the
   application shell in store-app.css takes over completely.
   ========================================================================== */

.web-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--chrome);
  color: var(--chrome-ink);
}

.header-row-1 {
  display: grid;
  grid-template-columns: auto auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 62px;
}

/* Right hand utilities travel as one unit so the grid stays stable when
   individual controls drop out at narrower widths */
.header-tools { display: flex; align-items: center; gap: 4px; justify-self: end; }

.brand-lockup {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.brand-lockup:hover { border-color: rgba(233, 241, 239, .35); }
.brand-lockup img { width: 30px; height: 30px; object-fit: contain; }
.brand-word { font-size: 17px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.brand-word span { color: var(--accent-press); }
.brand-sub { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--chrome-ink-2); }

.deliver-to {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; text-align: left;
  transition: border-color .2s var(--ease);
}
.deliver-to:hover { border-color: rgba(233, 241, 239, .35); }
.deliver-to i { font-size: 18px; color: var(--chrome-ink-2); margin-bottom: 1px; }
.deliver-to small { display: block; font-size: 11px; color: var(--chrome-ink-2); line-height: 1.2; }
.deliver-to strong { font-size: 13px; font-weight: 700; line-height: 1.25; }
/* --- Search --------------------------------------------------------------- */
.searchbar {
  display: grid; grid-template-columns: auto 1fr auto;
  height: 40px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 0 rgba(11, 139, 112, 0);
  transition: box-shadow .24s var(--ease);
}
.searchbar:focus-within { box-shadow: 0 0 0 3px var(--accent); }

.search-scope {
  appearance: none; border: 0; cursor: pointer;
  background: var(--card-3); color: var(--ink-2);
  padding: 0 26px 0 12px; font-size: 12px; font-weight: 600;
  border-right: 1px solid var(--line);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.search-field {
  border: 0; background: transparent; padding: 0 14px;
  color: var(--ink); min-width: 0;
}
.search-field::placeholder { color: var(--ink-4); }
.search-field:focus { outline: none; }

.search-go {
  width: 48px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 19px;
  transition: background-color .2s var(--ease);
}
.search-go:hover { background: var(--accent-press); }

.search-suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 6px);
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-3);
  padding: 6px; display: none; text-align: left;
  border: 1px solid var(--line-soft);
}
.search-wrap { position: relative; }
.search-wrap.is-open .search-suggest { display: block; }
.search-suggest li > button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: var(--r-sm); color: var(--ink-2);
  font-size: 13px; text-align: left;
}
.search-suggest li > button:hover { background: var(--card-3); color: var(--ink); }
.search-suggest i { color: var(--ink-4); font-size: 15px; }
/* --- Header utilities ----------------------------------------------------- */
.header-util {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; text-align: left;
  transition: border-color .2s var(--ease);
}
.header-util:hover { border-color: rgba(233, 241, 239, .35); }
.header-util small { display: block; font-size: 11px; color: var(--chrome-ink-2); line-height: 1.2; }
.header-util strong { font-size: 13px; font-weight: 700; line-height: 1.25; }
.header-util .caret { font-size: 13px; color: var(--chrome-ink-2); align-self: flex-end; }

.cart-button {
  display: flex; align-items: flex-end; gap: 3px;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.cart-button:hover { border-color: rgba(233, 241, 239, .35); }
.cart-icon-wrap { position: relative; display: grid; place-items: center; }
.cart-icon-wrap i { font-size: 27px; }
.cart-count {
  position: absolute; top: -3px; left: 15px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--accent-press); color: var(--chrome);
  border-radius: var(--r-pill); font-size: 11px; font-weight: 800;
  transition: transform .34s var(--ease-back);
}
.cart-count.is-bumped { transform: scale(1.34); }
.cart-button strong { font-size: 13px; font-weight: 700; }

/* --- Account flyout ------------------------------------------------------- */
.flyout-host { position: relative; }
.flyout {
  position: absolute; top: calc(100% + 4px); right: 0; width: 268px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--shadow-3); padding: 14px; text-align: left;
  opacity: 0; transform: translate3d(0, -8px, 0) scale(.985);
  transition: opacity .22s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}
.flyout-host.is-open .flyout { opacity: 1; transform: none; pointer-events: auto; }
.flyout h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.flyout a { display: block; padding: 7px 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2); }
.flyout a:hover { background: var(--card-3); color: var(--accent); }

/* Sign in heads the flyout, so every page carrying the web header has a door
   into the auth screens. Both selectors outrank the plain .flyout a above. */
.flyout a.flyout-cta {
  display: grid; place-items: center; height: 40px; padding: 0 14px;
  margin-bottom: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 700;
}
.flyout a.flyout-cta:hover { background: var(--accent-press); color: var(--accent-ink); }
.flyout-note {
  font-size: 12px; color: var(--ink-3); padding-bottom: 11px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.flyout-note a { display: inline; padding: 0; font-weight: 700; color: var(--accent); }
.flyout-note a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* --- Department strip slider (header row 2) -------------------------------------- */
.header-row-2 {
  background: var(--chrome-2);
  border-top: 1px solid rgba(233, 241, 239, .07);
  position: relative;
  z-index: 50;
}
.dept-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.dept-strip-nav {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
}
.dept-strip-nav::-webkit-scrollbar {
  display: none;
}
.dept-strip-nav.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.dept-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}
.dept-item {
  position: relative;
  list-style: none;
  flex: none;
}
.dept-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--chrome-ink);
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
  cursor: pointer;
}
.dept-link:hover,
.dept-item:hover > .dept-link {
  border-color: rgba(233, 241, 239, .35);
}
.dept-link[aria-current="page"],
.dept-link.is-active {
  background: rgba(44, 190, 155, .16);
  color: var(--accent-press);
  font-weight: 700;
}
.dept-link.is-lead {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}
.dept-item--promo {
  margin-left: 8px;
}
.dept-promo {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-press);
  padding-inline: 11px;
}

/* Slide Prev/Next Buttons with subtle shadow */
.dept-slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #032b21;
  border: 1px solid rgba(233, 241, 239, 0.25);
  color: #e9f1ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 70;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
  opacity: 0;
  pointer-events: none;
}
.dept-slide-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.dept-slide-btn:hover {
  background: var(--accent-press);
  color: #032b21;
  border-color: var(--accent-press);
  transform: translateY(-50%) scale(1.08);
}
.dept-slide-btn.is-prev {
  left: 0;
}
.dept-slide-btn.is-next {
  right: 0;
}

/* Caret indicator */
.dept-caret {
  font-size: 11px;
  margin-left: 2px;
  transition: transform .2s ease;
  opacity: .75;
}
.dept-item:hover > .dept-link .dept-caret {
  transform: rotate(180deg);
}

/* Badges */
.dept-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  margin-left: 4px;
  line-height: 1.2;
}
.dept-badge.is-sub {
  margin-left: auto;
  font-size: 8.5px;
  padding: 1px 4px;
}

/* Dropdown Flyout Panel */
.dept-dropdown {
  position: fixed;
  min-width: 240px;
  background: #032b21;
  border: 1px solid rgba(233, 241, 239, .18);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 9999;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.dept-item.has-dropdown:hover > .dept-dropdown,
.dept-item.has-dropdown:focus-within > .dept-dropdown,
.dept-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.dept-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dept-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--chrome-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.dept-dropdown-link:hover {
  background: rgba(44, 190, 155, .18);
  color: var(--accent-press);
}
.dept-dropdown-link i {
  font-size: 14px;
  color: var(--accent);
}

/* --- Theme toggle --------------------------------------------------------- */
.theme-toggle {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 17px;
  border: 1px solid rgba(233, 241, 239, .22); color: var(--chrome-ink);
  transition: background-color .22s var(--ease), transform .34s var(--ease-back);
}
.theme-toggle:hover { background: rgba(233, 241, 239, .1); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle .ph-moon, .app-theme .ph-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ph-moon,
:root[data-theme="dark"] .app-theme .ph-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ph-sun,
:root[data-theme="dark"] .app-theme .ph-sun { display: none; }
/* ==========================================================================
   PRIMITIVES
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.005em;
  transition: transform .3s var(--ease), background-color .22s var(--ease),
              border-color .22s var(--ease), color .22s var(--ease);
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-press); }
.btn-ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-quiet { color: var(--accent); padding: 0 4px; height: auto; }
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* The trailing icon is nested in its own well, never naked beside the label */
.btn-icon-well {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  display: grid; place-items: center; flex: none; font-size: 14px;
  background: rgba(255, 255, 255, .18);
  transition: transform .34s var(--ease-back);
}
.btn-ghost .btn-icon-well { background: var(--card-3); }
.btn:hover .btn-icon-well { transform: translate3d(2px, -1px, 0) scale(1.06); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.badge-deal { background: var(--deal); color: #fff; }
.badge-soft { background: var(--accent-soft); color: var(--accent); }
.badge-flat { background: var(--card-3); color: var(--ink-2); }
.badge-stock { color: var(--stock); font-weight: 700; font-size: 12.5px; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
}
/* --- Rating and price ----------------------------------------------------- */
.rating { display: inline-flex; align-items: center; gap: 6px; }
.stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; color: var(--line); letter-spacing: 1px; }
.stars i { display: inline-block; }
.stars-fill {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  color: var(--star); width: var(--fill, 100%);
}
.rating-count { font-size: 12.5px; color: var(--accent); }

.price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.price-now { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.price-now sup { font-size: 12px; font-weight: 700; top: -.55em; }
.price-was { font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }
.price-off { font-size: 12.5px; font-weight: 700; color: var(--deal); }
.price-note { font-size: 12px; color: var(--ink-3); }

/* --- Section headers ------------------------------------------------------ */
.section { padding-block: 34px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.section-title { font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.section-note { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.section-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); flex: none; }
.section-link i { transition: transform .3s var(--ease); }
.section-link:hover i { transform: translate3d(3px, 0, 0); }

/* --- Panel: the recurring nested container ------------------------------- */
.panel {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); border: 1px solid var(--line-soft);
}
.panel-pad { padding: 20px; }
.panel-head {
  padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.panel-head h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }

/* Outer tray plus inner plate, so media reads as seated hardware */
.frame {
  padding: 7px; border-radius: var(--r-lg);
  background: var(--card-2); border: 1px solid var(--line-soft);
}
.frame-inner {
  border-radius: calc(var(--r-lg) - 7px); overflow: hidden;
  background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */

.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 11px;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .3s var(--ease);
}
.product-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow-2); border-color: var(--line);
}

.pc-media {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--card-2); aspect-ratio: 1 / 1;
}
.pc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.product-card:hover .pc-media img { transform: scale(1.05); }

.pc-wish {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 255, 255, .9); color: var(--ink-2);
  box-shadow: var(--shadow-1);
  opacity: 0; transform: scale(.85);
  transition: opacity .26s var(--ease), transform .34s var(--ease-back), color .2s var(--ease);
}
.product-card:hover .pc-wish, .pc-wish:focus-visible { opacity: 1; transform: none; }
.pc-wish:hover { color: var(--deal); }
.pc-wish[aria-pressed="true"] { opacity: 1; transform: none; color: var(--deal); }
.pc-wish .ph-fill { display: none; }
.pc-wish[aria-pressed="true"] .ph { display: none; }
.pc-wish[aria-pressed="true"] .ph-fill { display: block; }

.pc-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 4px 4px; flex: 1; }
.pc-brand { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.pc-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card:hover .pc-title { color: var(--accent); }
.pc-foot { margin-top: auto; padding-top: 9px; display: grid; gap: 9px; }
.pc-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.pc-add { position: relative; z-index: 2; }
.pc-swatches { display: flex; gap: 5px; position: relative; z-index: 2; }
.pc-swatch {
  width: 18px; height: 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); box-shadow: inset 0 0 0 2px var(--card);
  transition: transform .3s var(--ease-back);
}
.pc-swatch:hover, .pc-swatch[aria-pressed="true"] { transform: scale(1.16); border-color: var(--accent); }

/* --- Grids ---------------------------------------------------------------- */
.grid-products {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}
.grid-products.is-tight { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 13px; }

/* --- Horizontal rail (the showcase carousel) ------------------------------ */
.rail-host { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(214px, 1fr);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding: 4px; margin: -4px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.rail-nav {
  position: absolute; top: 50%; z-index: 5;
  width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 21px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-2);
  transform: translate3d(0, -50%, 0);
  transition: opacity .26s var(--ease), background-color .2s var(--ease), transform .3s var(--ease);
}
.rail-nav:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rail-nav.is-prev { left: -14px; }
.rail-nav.is-next { right: -14px; }
.rail-nav[hidden] { display: none; }

/* --- Reveal on scroll ----------------------------------------------------- */
.js-motion [data-rise] { opacity: 0; transform: translate3d(0, 20px, 0); }
.js-motion [data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease) var(--rise-delay, 0s),
              transform .62s var(--ease) var(--rise-delay, 0s);
}
/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.hero {
  position: relative; background: var(--chrome);
  border-bottom: 1px solid var(--line-soft);
}
.hero-viewport { position: relative; height: clamp(330px, 44vh, 460px); overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.03); visibility: hidden;
  transition: opacity .8s var(--ease), transform 1.2s var(--ease), visibility .8s var(--ease);
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(97deg, rgba(9, 18, 16, .93) 0%, rgba(9, 18, 16, .74) 38%, rgba(9, 18, 16, .12) 74%);
}
/* The inset is a shell, so hero copy lines up with page content below it */
.hero-inset { position: absolute; inset: 0; }
.hero-copy {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  justify-content: center; gap: 13px; max-width: 540px;
  color: #F2F7F6;
}
.hero-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--accent-press); }
.hero-title { font-size: clamp(28px, 3.1vw, 44px); font-weight: 800; line-height: 1.03; letter-spacing: -.042em; }
.hero-text { font-size: 14.5px; color: rgba(242, 247, 246, .82); max-width: 42ch; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 5px; }

.hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 4; }
.hero-dot {
  width: 26px; height: 4px; border-radius: var(--r-pill);
  background: rgba(242, 247, 246, .34);
  transition: background-color .3s var(--ease), width .34s var(--ease);
}
.hero-dot[aria-selected="true"] { background: var(--accent-press); width: 42px; }

/* Arrows sit in a bottom right cluster rather than at the vertical middle,
   where they would land on top of the hero copy at the left gutter */
.hero-arrow {
  position: absolute; bottom: 13px; z-index: 4;
  width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 21px;
  color: #F2F7F6; background: rgba(9, 18, 16, .42);
  backdrop-filter: blur(6px);
  transition: background-color .24s var(--ease), transform .3s var(--ease-back);
}
.hero-arrow:hover { background: rgba(9, 18, 16, .72); transform: scale(1.06); }
.hero-arrow.is-prev { right: 62px; }
.hero-arrow.is-next { right: 13px; }
/* --- Trust strip ---------------------------------------------------------- */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft);
}
.trust-cell { background: var(--card); padding: 15px 17px; display: flex; gap: 12px; align-items: center; }
.trust-cell i { font-size: 25px; color: var(--accent); flex: none; }
.trust-cell strong { display: block; font-size: 13.5px; font-weight: 700; }
.trust-cell span { font-size: 12px; color: var(--ink-3); }

/* --- Asymmetric category bento ------------------------------------------- */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* minmax(x, auto), never a bare height: the cells clip their overflow for the
     rounded corners, so a hard row height cuts any tile whose heading wraps or
     whose thumbnails need more room. The floor keeps the visual rhythm. */
  grid-auto-rows: minmax(218px, auto);
}
.bento-cell {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bento-cell:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--shadow-2); }
.bento-cell.is-wide { grid-column: span 2; }
.bento-cell.is-tall { grid-row: span 2; }
.bento-cell.is-fill { padding: 0; }
.bento-cell.is-fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* One gradient for every image cell, dark enough across the whole text band that
   legibility never depends on how bright the photograph behind it happens to be.
   The old ramp was only .28 opaque where the heading sits. */
.bento-shade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    rgba(9, 18, 16, .92) 0%,
    rgba(9, 18, 16, .80) 30%,
    rgba(9, 18, 16, .38) 60%,
    rgba(9, 18, 16, 0) 86%);
}
.bento-text { position: relative; margin-top: auto; padding: 17px; color: #F2F7F6; }
.bento-text h3 { font-size: 17px; font-weight: 800; letter-spacing: -.028em; }
.bento-text p { font-size: 12.5px; color: rgba(242, 247, 246, .86); margin-top: 3px; }
/* White, not --accent-press: the accent green reads 3.1:1 on the shade, which
   fails AA at this size. White on the same backdrop is about 18:1. */
.bento-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: #FFFFFF; }
.bento-cta i { transition: transform .3s var(--ease); }
.bento-cell:hover .bento-cta i { transform: translate3d(3px, 0, 0); }

/* Quad tile: four thumbnails inside one category card, Amazon style */
.bento-cell.is-quad { padding: 16px; background: var(--card); }
.bento-cell.is-quad h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.quad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; flex: 1; }
.quad-item { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.quad-item .quad-shot {
  position: relative;
  flex: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--card-2);
  /* A floor rather than min-height: 0. The thumbnails still stretch to fill a tall
     cell, but they can no longer be squeezed until the label crushes into them. */
  min-height: 84px;
}
/* Out of flow, like .bento-cell.is-fill img. Now that the grid rows size to their
   content, an in-flow img with height:100% would fall back to its intrinsic aspect
   and drag the whole tile taller than the layout intends. */
.quad-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quad-item span { font-size: 11px; color: var(--ink-3); }
/* --- Deal of the day ------------------------------------------------------ */
.deal-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.deal-feature { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.deal-timer { display: flex; align-items: center; gap: 9px; }
.timer-cell {
  min-width: 44px; padding: 7px 8px; border-radius: var(--r-sm);
  background: var(--chrome); color: var(--chrome-ink); text-align: center;
}
.timer-cell b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.timer-cell small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chrome-ink-2); }
.deal-progress { height: 6px; border-radius: var(--r-pill); background: var(--card-3); overflow: hidden; }
.deal-progress span { display: block; height: 100%; background: var(--deal); border-radius: inherit; }

/* --- Editorial split (craft story) --------------------------------------- */
.story-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.story-copy { display: grid; gap: 14px; }
.story-copy h2 { font-size: clamp(24px, 2.5vw, 34px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.story-copy p { font-size: 14.5px; color: var(--ink-2); max-width: 52ch; }
.story-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.story-stat b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.story-stat span { font-size: 12px; color: var(--ink-3); }
.story-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.story-media .frame:first-child { grid-column: 1 / -1; }
.story-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.story-media .frame:not(:first-child) img { aspect-ratio: 1 / 1; }

/* --- Review quotes -------------------------------------------------------- */
.quote-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(298px, 1fr); gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; scroll-snap-type: x mandatory; }
.quote-rail::-webkit-scrollbar { display: none; }
.quote-card { scroll-snap-align: start; padding: 19px; display: grid; gap: 12px; }
.quote-card blockquote { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.quote-who { display: flex; align-items: center; gap: 11px; }
.quote-who img { width: 38px; height: 38px; border-radius: var(--r-pill); object-fit: cover; }
.quote-who strong { display: block; font-size: 13px; font-weight: 700; }
.quote-who span { font-size: 11.5px; color: var(--ink-3); }
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--stock); }
/* ==========================================================================
   PRODUCT DETAIL: gallery, lens zoom, buy box
   ========================================================================== */

.pdp-grid {
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 314px;
  align-items: start;
}

.gallery { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
.gallery-thumbs { display: grid; gap: 9px; align-content: start; }
.gallery-thumb {
  width: 62px; height: 62px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--card-2);
  transition: border-color .24s var(--ease), transform .3s var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { transform: translate3d(2px, 0, 0); border-color: var(--accent); }
.gallery-thumb[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* The stage is the hover target. On desktop it drives the magnified panel. */
.gallery-stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); border: 1px solid var(--line-soft);
  aspect-ratio: 1 / 1; cursor: zoom-in;
}
.gallery-stage img.stage-shot {
  width: 100%; height: 100%; object-fit: contain; padding: 14px;
}
.zoom-reticle {
  position: absolute; top: 0; left: 0; z-index: 3;
  width: var(--lens-size, 180px); height: var(--lens-size, 180px);
  border: 1px solid var(--accent); background: rgba(11, 139, 112, .14);
  border-radius: var(--r-xs); pointer-events: none;
  opacity: 0; transform: translate3d(var(--lens-x, 0px), var(--lens-y, 0px), 0);
  transition: opacity .2s var(--ease);
}
.gallery-stage.is-zooming .zoom-reticle { opacity: 1; }

.zoom-hint {
  position: absolute; bottom: 11px; left: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--card-3); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600;
  transition: opacity .24s var(--ease);
}
.gallery-stage.is-zooming .zoom-hint { opacity: 0; }
/* The magnified panel. Overlays the middle column, like Amazon desktop. */
.zoom-panel {
  position: absolute; top: 0; left: calc(100% + 14px); z-index: 30;
  width: 520px; height: 520px; overflow: hidden;
  border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s var(--ease);
}
.gallery-host { position: relative; }
.gallery-host.is-zooming .zoom-panel { opacity: 1; visibility: visible; }
.zoom-panel img {
  position: absolute; top: 0; left: 0;
  width: var(--zoom-w, 1300px); height: var(--zoom-h, 1300px);
  max-width: none; object-fit: contain;
  transform: translate3d(var(--zoom-x, 0px), var(--zoom-y, 0px), 0);
  will-change: transform;
}

/* --- Buy box -------------------------------------------------------------- */
.buybox { display: grid; gap: 13px; padding: 19px; position: sticky; top: calc(var(--header-h) + 16px); }
.buybox-price .price-now { font-size: 27px; }
.deliver-line { display: flex; gap: 9px; font-size: 13px; color: var(--ink-2); }
.deliver-line i { font-size: 17px; color: var(--accent); flex: none; margin-top: 1px; }
.deliver-line b { color: var(--ink); }

.qty-stepper {
  display: inline-grid; grid-template-columns: 36px 46px 36px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; height: 40px;
}
.qty-stepper button { height: 100%; display: grid; place-items: center; font-size: 16px; color: var(--ink-2); transition: background-color .2s var(--ease); }
.qty-stepper button:hover { background: var(--card-3); color: var(--accent); }
.qty-stepper output { text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.option-row { display: grid; gap: 8px; }
.option-row > .option-label { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.option-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.option-chip {
  padding: 8px 13px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  transition: border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease);
}
.option-chip:hover { border-color: var(--accent); color: var(--accent); }
.option-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.option-chip small { display: block; font-size: 10.5px; color: var(--ink-4); font-weight: 500; }

/* --- Product detail middle column ---------------------------------------- */
.pdp-title { font-size: 25px; font-weight: 800; letter-spacing: -.04em; line-height: 1.24; margin-top: 4px; }
.pdp-rating-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pdp-sold { font-size: 12.5px; color: var(--ink-3); }
.pdp-price-block { display: grid; gap: 7px; justify-items: start; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.pdp-price-block .price-now { font-size: 25px; }
.pdp-bullets { display: grid; gap: 10px; }
.pdp-promise { display: grid; gap: 12px; }
.buybox-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* A bullet is drawn rather than listed, so the marker keeps the accent colour
   and the text still wraps flush under itself. */
.bullet-list { display: grid; gap: 7px; }
.bullet-list li { position: relative; padding-left: 17px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.bullet-list li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--accent);
}

/* --- Frequently bought together ------------------------------------------ */
.bundle { display: grid; grid-template-columns: minmax(0, 1fr) 244px; gap: 22px; align-items: start; }
.bundle-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 13px 0 16px; }
.bundle-shot {
  width: 78px; height: 78px; border-radius: var(--r-sm); flex: none; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--card-2);
}
.bundle-shot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.bundle-plus { font-size: 17px; color: var(--ink-4); flex: none; }
.bundle-list { display: grid; gap: 10px; }
.bundle-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); }
.bundle-list input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.bundle-list b { color: var(--ink); }
.bundle-total {
  display: grid; gap: 11px; padding: 17px; border-radius: var(--r);
  background: var(--card-2); border: 1px solid var(--line-soft);
}

/* --- Questions and answers ----------------------------------------------- */
.qa-item { padding: 15px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.qa-item:first-of-type { border-top: 0; }
.qa-q, .qa-a { display: flex; gap: 9px; }
.qa-q { font-size: 13.5px; font-weight: 700; }
.qa-a { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.qa-q i, .qa-a i { color: var(--accent); font-size: 15px; flex: none; margin-top: 2px; }

/* --- Spec sheet and reviews ---------------------------------------------- */
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border-radius: var(--r); overflow: hidden; }
.spec-cell { background: var(--card); padding: 13px 16px; }
.spec-cell dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.spec-cell dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; }

.review-summary { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.review-score { text-align: center; }
.review-score b { display: block; font-size: 44px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.review-bars { display: grid; gap: 7px; }
.review-bar { display: grid; grid-template-columns: 46px minmax(0, 1fr) 42px; align-items: center; gap: 10px; font-size: 12.5px; }
.review-bar .bar-track { height: 8px; border-radius: var(--r-pill); background: var(--card-3); overflow: hidden; }
.review-bar .bar-fill { height: 100%; background: var(--star); border-radius: inherit; }
.review-bar span:last-child { color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

.review-item { padding: 17px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; }
.review-item:first-child { border-top: 0; }
.review-head { display: flex; align-items: center; gap: 11px; }
.review-head img { width: 34px; height: 34px; border-radius: var(--r-pill); object-fit: cover; }
/* Reviewers are initials rather than photographs, so the avatar is drawn from
   the name instead of loading a file that would only ever be a placeholder. */
.review-avatar {
  width: 34px; height: 34px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.review-who { display: grid; gap: 1px; min-width: 0; }
.review-who span, .review-who time { font-size: 11.5px; color: var(--ink-4); }
.review-verified { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--stock); font-size: 11.5px; font-weight: 700; }
.review-verified i { font-size: 13px; }
.review-head strong { font-size: 13px; }
.review-head time { font-size: 11.5px; color: var(--ink-4); }
.review-title { font-size: 14px; font-weight: 700; }
.review-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.review-shots { display: flex; gap: 8px; }
/* Buyer photographs open the same full screen viewer the gallery uses, so each
   one is a real button rather than an image with a click handler on it. */
.review-shots button { display: block; border-radius: var(--r-sm); overflow: hidden; cursor: zoom-in; }
.review-shots img { width: 68px; height: 68px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line-soft); }
.review-shots button:hover img { border-color: var(--accent); }
.review-helpful { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-block: 13px; font-size: 12.5px; color: var(--ink-3); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs i { font-size: 12px; color: var(--ink-4); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
/* ==========================================================================
   CATEGORY / SEARCH RESULTS
   ========================================================================== */

.listing-grid { display: grid; grid-template-columns: 254px minmax(0, 1fr); gap: 24px; align-items: start; }

.filter-rail { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 3px; }
.filter-group { padding: 15px 17px; border-bottom: 1px solid var(--line-soft); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { font-size: 13px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.filter-option { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.filter-option:hover { color: var(--accent); }
.filter-option input { accent-color: var(--accent); width: 15px; height: 15px; }
.filter-option .count { margin-left: auto; font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.range-row { display: flex; align-items: center; gap: 9px; }
.range-row input[type="number"] {
  width: 100%; height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); min-width: 0;
}
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch-btn { width: 26px; height: 26px; border-radius: var(--r-pill); border: 1px solid var(--line); box-shadow: inset 0 0 0 2px var(--card); transition: transform .3s var(--ease-back); }
.swatch-btn:hover, .swatch-btn[aria-pressed="true"] { transform: scale(1.14); border-color: var(--accent); }

.listing-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 17px; margin-bottom: 16px; flex-wrap: wrap;
}
.listing-count { font-size: 13px; color: var(--ink-3); }
.listing-count b { color: var(--ink); }
.toolbar-right { display: flex; align-items: center; gap: 11px; }
.select-plain {
  height: 36px; padding: 0 30px 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.view-switch button { width: 36px; height: 36px; display: grid; place-items: center; font-size: 17px; color: var(--ink-3); transition: background-color .2s var(--ease), color .2s var(--ease); }
.view-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-clear { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.chip-clear i { font-size: 14px; }
/* List view variant of the product card */
.grid-products.is-list { grid-template-columns: minmax(0, 1fr); gap: 13px; }
.grid-products.is-list .product-card { flex-direction: row; gap: 17px; padding: 15px; }
.grid-products.is-list .pc-media { width: 194px; flex: none; }
.grid-products.is-list .pc-body { padding: 2px 0; gap: 7px; }
.grid-products.is-list .pc-title { -webkit-line-clamp: 2; font-size: 16px; font-weight: 700; }
.grid-products.is-list .pc-blurb { font-size: 13px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grid-products.is-list .pc-foot { display: flex; align-items: center; gap: 14px; }
.pc-blurb { display: none; }
.grid-products.is-list .pc-blurb { display: -webkit-box; }

.pager { display: flex; align-items: center; justify-content: center; gap: 7px; padding-block: 26px; }
.pager button, .pager a {
  min-width: 38px; height: 38px; padding: 0 11px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.pager button:hover, .pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   CART / CHECKOUT / ACCOUNT
   ========================================================================== */

.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 22px; align-items: start; }

.cart-line { display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; gap: 17px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.cart-line:first-of-type { border-top: 0; }
.cart-line .frame { padding: 5px; }
.cart-line img { aspect-ratio: 1 / 1; object-fit: cover; }
.cart-info { display: grid; gap: 6px; align-content: start; }
.cart-info h3 { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.cart-info h3 a:hover { color: var(--accent); }
.cart-meta { font-size: 12.5px; color: var(--ink-3); }
.cart-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 3px; }
.cart-line-price { text-align: right; }
.link-danger { font-size: 12.5px; font-weight: 700; color: var(--deal); }
.link-danger:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Free delivery meter: the cart's one piece of persuasion, so it states the
   gap in rupees rather than leaving the shopper to work the arithmetic out. */
.ship-meter { display: grid; gap: 8px; padding: 13px 15px; margin-bottom: 6px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line-soft); }
.ship-meter p { font-size: 13px; color: var(--ink-2); }
.ship-meter p b { color: var(--ink); }
.ship-meter.is-clear p b { color: var(--stock); }
.ship-track { height: 7px; border-radius: var(--r-pill); background: var(--card-3); overflow: hidden; }
.ship-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width .45s var(--ease); }
.ship-meter.is-clear .ship-fill { background: var(--stock); }

.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 17px; margin-top: 3px; border-top: 1px solid var(--line-soft); }
.cart-foot p { font-size: 14px; color: var(--ink-2); }
.cart-foot p b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-foot p b sup { font-size: 12px; font-weight: 700; top: -.5em; margin-right: 1px; }

.summary-card { position: sticky; top: calc(var(--header-h) + 16px); padding: 19px; display: grid; gap: 13px; }
.summary-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--ink-2); }
.summary-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-total { padding-top: 13px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; }
.summary-total span { font-size: 15px; font-weight: 800; }
.summary-total b { font-size: 23px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
/* --- Checkout steps ------------------------------------------------------- */
.checkout-steps { display: flex; align-items: center; gap: 12px; padding: 15px 19px; flex-wrap: wrap; }
.step-node { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-3); }
.step-node b { width: 25px; height: 25px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--card-3); color: var(--ink-3); font-size: 12px; }
.step-node[data-state="done"] b { background: var(--stock); color: #fff; }
.step-node[data-state="active"] { color: var(--ink); font-weight: 700; }
.step-node[data-state="active"] b { background: var(--accent); color: var(--accent-ink); }
.step-sep { flex: 1; min-width: 22px; height: 1px; background: var(--line); }

.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea {
  height: 44px; padding: 0 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field textarea { height: auto; padding: 11px 13px; resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-error { font-size: 12px; font-weight: 600; color: var(--deal); min-height: 16px; }
.field.has-error input, .field.has-error select { border-color: var(--deal); }

.pay-option {
  display: flex; align-items: center; gap: 13px; padding: 15px 17px;
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .22s var(--ease), background-color .22s var(--ease);
}
.pay-option:hover { border-color: var(--accent); }
.pay-option input { accent-color: var(--accent); width: 17px; height: 17px; }
.pay-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pay-option i { font-size: 23px; color: var(--ink-2); }
.pay-option strong { display: block; font-size: 13.5px; }
.pay-option span { font-size: 12px; color: var(--ink-3); }
/* The text column has to be allowed to shrink, or a long address pushes the
   radio and the icon out of the row. */
.pay-option div { flex: 1; min-width: 0; }
.pay-option.is-tall { align-items: flex-start; }
.pay-option.is-tall i { margin-top: 1px; }
/* A method that cannot be used on this order is dimmed rather than removed, so
   the shopper can see it exists and why the total ruled it out. */
.pay-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pay-option:has(input:disabled):hover { border-color: var(--line); }

/* --- Checkout flow -------------------------------------------------------- */
/* The step rail sits above the two columns rather than inside them, so it
   carries its own gap: the grid below cannot reach out and give it one. */
.checkout-top { margin-bottom: 14px; }
.form-stack { display: grid; gap: 15px; }
/* A commit button does not have to be as wide as the panel it sits in. On a
   phone it does, and store-app.css stretches it back out there. */
.panel-pad.form-stack > .btn { justify-self: start; }
.form-note { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.form-note i { font-size: 16px; color: var(--stock); flex: none; }

/* Review step: each block restates one decision and offers a way back to it,
   because a summary a shopper cannot act on is only a wall of text. */
.review-block { display: grid; gap: 6px; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.review-block:first-child { border-top: 0; padding-top: 0; }
.review-block h4 { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.review-block p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.review-block p b { color: var(--ink); }
.review-block .btn-quiet { justify-self: start; }

/* Compact line, shared by the review step and the order cards on the account */
.mini-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.mini-line:first-of-type { border-top: 0; }
.mini-line img { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; background: var(--card-2); border: 1px solid var(--line-soft); }
.mini-line b { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.mini-line b a:hover { color: var(--accent); }
.mini-line small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.mini-line em { font-size: 13px; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }
/* On the account page each line can be re-ordered on its own, so the money cell
   becomes a small stack: the amount paid, and the way back to the shelf. */
.mini-act { display: grid; gap: 5px; justify-items: end; }
.mini-act .btn { white-space: nowrap; }

/* --- Account -------------------------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 24px; align-items: start; }
.account-nav { display: grid; gap: 2px; padding: 11px; position: sticky; top: calc(var(--header-h) + 16px); }
.account-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.account-nav a:hover { background: var(--card-3); color: var(--ink); }
.account-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.account-nav i { font-size: 18px; }

/* The address book is a set of equal cards rather than a list, because the point
   of it is comparing two or three addresses at a glance. They fill the row they
   are given, so a wide content column shows four rather than two very wide ones. */
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.addr-card { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.addr-card.is-default { border-color: var(--accent); background: var(--accent-soft); }
.addr-card b { font-size: 13.5px; }
.addr-card p { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.addr-card .addr-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.addr-card.is-default .addr-tag { color: var(--accent); }
.addr-card .addr-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; }

.order-card { display: grid; gap: 0; overflow: hidden; }
.order-top { display: flex; flex-wrap: wrap; gap: 22px; padding: 14px 18px; background: var(--card-2); border-bottom: 1px solid var(--line-soft); }
.order-top div small { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.order-top div b { font-size: 13.5px; }
.order-top .order-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; }
.order-body { padding: 18px; display: grid; gap: 16px; }
/* flex-start, not center: the labels are different heights the moment one of them
   wraps, and centring would then stagger the dots and break the connector into a
   zig-zag. Aligning the tops pins every dot to one line and lets the text below
   run to whatever depth it needs. */
.order-track { display: flex; align-items: flex-start; gap: 0; padding-top: 4px; }
.track-node { flex: 1; position: relative; text-align: center; font-size: 11.5px; color: var(--ink-3); }
.track-node::before { content: ""; display: block; width: 13px; height: 13px; border-radius: var(--r-pill); background: var(--card-3); margin: 0 auto 7px; position: relative; z-index: 2; }
.track-node::after { content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: 1; }
.track-node:last-child::after { display: none; }
.track-node[data-state="done"]::before { background: var(--stock); }
.track-node[data-state="done"]::after { background: var(--stock); }
.track-node[data-state="active"]::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.track-node[data-state="active"] { color: var(--ink); font-weight: 700; }

/* The one sentence the account page is opened for. It sits above the lines
   rather than in the header row, where the four small labels would flatten it.
   Green once the parcel has landed, accent while it is still moving. */
.order-status { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: -.012em; }
.order-status i { font-size: 19px; color: var(--stock); flex: none; }
.order-status[data-stage="1"] i, .order-status[data-stage="2"] i { color: var(--accent); }

/* --- Empty state ---------------------------------------------------------- */
.empty-state { display: grid; gap: 13px; justify-items: center; text-align: center; padding: 52px 24px; }
/* Direct child only. The receipt reuses this shape for "Order placed", and it
   puts a button in the actions row, so a descendant selector would blow the
   arrow inside that button's icon well up to 46px and grey it out. */
.empty-state > i { font-size: 46px; color: var(--ink-4); }
.empty-state h2 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.empty-state p { font-size: 13.5px; color: var(--ink-3); max-width: 40ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.store-footer { margin-top: 34px; background: var(--chrome); color: var(--chrome-ink); }
.footer-top { display: block; width: 100%; padding: 15px; text-align: center; font-size: 13px; font-weight: 700; background: var(--chrome-2); transition: background-color .22s var(--ease); }
.footer-top:hover { background: var(--chrome-3); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 30px; padding-block: 40px; }
.footer-cols h4 { font-size: 13.5px; font-weight: 800; margin-bottom: 13px; }
.footer-cols li a { display: block; padding: 4px 0; font-size: 12.5px; color: var(--chrome-ink-2); transition: color .2s var(--ease); }
.footer-cols li a:hover { color: var(--accent-press); }
.footer-signup { display: grid; gap: 10px; }
.footer-signup p { font-size: 12.5px; color: var(--chrome-ink-2); }
.signup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.signup-row input { height: 42px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid rgba(233, 241, 239, .22); background: rgba(233, 241, 239, .07); color: var(--chrome-ink); }
.signup-row input::placeholder { color: rgba(168, 190, 184, .8); }
.signup-row input:focus { outline: none; border-color: var(--accent-press); }
.footer-note { font-size: 11.5px; color: var(--chrome-ink-2); min-height: 17px; }
.footer-bar { border-top: 1px solid rgba(233, 241, 239, .1); padding-block: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-bar p { font-size: 12px; color: var(--chrome-ink-2); }
.footer-legal { display: flex; gap: 17px; flex-wrap: wrap; }
.footer-legal a { font-size: 12px; color: var(--chrome-ink-2); }
.footer-legal a:hover { color: var(--accent-press); }
.footer-social { display: flex; gap: 9px; }
.footer-social a { width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 18px; border: 1px solid rgba(233, 241, 239, .2); transition: background-color .22s var(--ease), transform .32s var(--ease-back); }
.footer-social a:hover { background: rgba(233, 241, 239, .1); transform: translate3d(0, -2px, 0); }
/* ==========================================================================
   OVERLAYS: toast, sheet, lightbox
   ========================================================================== */

.toast-dock { position: fixed; bottom: 22px; right: 22px; z-index: var(--z-toast); display: grid; gap: 9px; justify-items: end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 17px; border-radius: var(--r-pill);
  background: var(--chrome); color: var(--chrome-ink);
  box-shadow: var(--shadow-3); font-size: 13px; font-weight: 600;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.97);
  transition: opacity .3s var(--ease), transform .42s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast i { font-size: 19px; color: var(--accent-press); }

.scrim {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(7, 14, 13, .58);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }
body.is-locked { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--page);
  opacity: 0; visibility: hidden;
  transform: scale(1.015);
  transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .4s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; transform: none; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--line-soft); }
.lightbox-bar strong { font-size: 14px; font-weight: 700; }
.icon-btn { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 21px; color: var(--ink-2); transition: background-color .2s var(--ease), transform .3s var(--ease); }
.icon-btn:hover { background: var(--card-3); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }

.lightbox-stage { position: relative; overflow: hidden; touch-action: none; background: var(--card); }
/* The photograph is sized off the stage and letterboxed inside it, rather than
   being laid out at its own intrinsic size and reined back in.

   `max-height: 100%` cannot do that job here. The stage is a `minmax(0, 1fr)`
   grid row with no height of its own, so a percentage maximum has an
   indefinite height to resolve against and is dropped — which left the image
   standing at the 1200px its `height` attribute asked for inside a 678px
   frame, hanging 522px past the bottom with a third of the picture clipped off
   and an empty band above it. Pinning to `inset: 0` measures the stage's used
   height instead, so the box is always exactly the frame and `object-fit`
   centres whatever aspect ratio the source turns out to have. `width`/`height`
   at 100% are what override the attributes' presentational hints. */
.lightbox-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
  transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0) scale(var(--pan-scale, 1));
  transform-origin: center; transition: transform .34s var(--ease); will-change: transform;
}
.lightbox.is-scaled .lightbox-stage img { cursor: grab; }
/* A live gesture owns the frame: the transition would leave the picture a third
   of a second behind the fingers, so drags and pinches switch it off. */
.lightbox-stage.is-panning img { transition: none; cursor: grabbing; }
.lightbox-foot { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px; border-top: 1px solid var(--line-soft); }
/* ==========================================================================
   TABLET EXPRESSION (768px to 1179px)
   Distinct from desktop: search gets its own row, the filter rail becomes a
   slide-over drawer, hover-only affordances become always-visible, and the
   lens zoom is replaced by tap-to-open pan zoom.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1179px) {
  :root { --gutter: 18px; --header-h: 148px; }

  .header-row-1 { grid-template-columns: auto 1fr; height: 58px; gap: 6px; }
  .header-row-1 .deliver-to, .header-row-1 .header-util.is-lang { display: none; }
  .header-row-1 .search-wrap { display: none; }
  .brand-sub { display: none; }

  .header-row-search { background: var(--chrome); padding-bottom: 11px; }
  .header-row-search .search-wrap { display: block; }
  .searchbar { height: 44px; }

  .header-row-2 { position: relative; }
  .dept-strip { height: 46px; }
  .dept-link { padding: 9px 13px; font-size: 13.5px; }
  .dept-strip .dept-promo { display: none; }

  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .grid-products.is-tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-auto-columns: minmax(202px, 1fr); }
  .rail-nav { display: none; }

  /* Touch devices get no hover, so the wish control is permanent */
  .pc-wish { opacity: 1; transform: none; }
  .product-card:hover { transform: none; box-shadow: var(--shadow-1); }
  .product-card:hover .pc-media img { transform: none; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); }
  .bento-cell.is-wide { grid-column: span 2; }
  .bento-cell.is-tall { grid-row: span 1; }
  /* The four up tile needs both axes or the labels crush at this width */
  .bento-cell.is-quad { grid-column: span 2; grid-row: span 2; }

  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, 1fr) not 1fr: a bare 1fr track takes the item min-content as its
     floor, and the deal rail inside reports a min-content of ~700px */
  .deal-split { grid-template-columns: minmax(0, 1fr); }
  .story-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .story-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-media .frame:first-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1179px) {
  /* PDP folds to two columns, the buy box sits under the gallery column */
  .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .pdp-buy { grid-column: 1 / -1; }
  .buybox { position: static; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery-thumbs { grid-auto-flow: column; grid-auto-columns: 60px; overflow-x: auto; scrollbar-width: none; order: 2; }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-stage { cursor: pointer; }
  .zoom-panel { display: none; }
  .zoom-hint::after { content: "Tap to zoom"; }
  .zoom-hint .hint-desktop { display: none; }

  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .review-summary { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bundle { grid-template-columns: minmax(0, 1fr); }

  /* Filters leave the page flow and become a drawer */
  .listing-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: calc(var(--z-sheet) + 1);
    width: min(340px, 86vw); border-radius: 0; overflow-y: auto;
    background: var(--card); box-shadow: var(--shadow-3);
    transform: translate3d(-101%, 0, 0);
    transition: transform .4s var(--ease-swap);
    display: block;
  }
  .filter-rail.is-open { transform: none; }
  .filter-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--card); z-index: 2; }
  .filter-drawer-foot { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 13px 17px; background: var(--card); border-top: 1px solid var(--line-soft); }
  .filter-open-btn { display: inline-flex; }

  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .summary-card { position: static; }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .account-nav::-webkit-scrollbar { display: none; }

  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .footer-cols .footer-signup { grid-column: 1 / -1; }
  .hero-viewport { height: clamp(300px, 40vh, 380px); }
  .hero-copy { max-width: 460px; }
}

/* Drawer chrome and the filter trigger exist only where the drawer exists */
@media (min-width: 1180px) {
  .filter-open-btn, .filter-drawer-head, .filter-drawer-foot { display: none; }
}
.filter-open-btn { align-items: center; gap: 8px; }
/* ==========================================================================
   DESKTOP-ONLY DETAILS (1180px and up)
   ========================================================================== */
@media (min-width: 1180px) {
  .header-row-search { display: none; }
  .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-products.is-tight { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-products.is-list { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-auto-columns: minmax(max(214px, calc((100% - 4 * 16px) / 5)), 1fr); }
}
@media (min-width: 1180px) and (max-width: 1379px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 284px; gap: 20px; }
  .zoom-panel { width: 440px; height: 440px; }
  .grid-products, .grid-products.is-tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail { grid-auto-columns: minmax(max(214px, calc((100% - 3 * 16px) / 4)), 1fr); }
}

/* ==========================================================================
   The pincode chooser is the one bottom sheet the web chrome also needs.
   Above 768px it becomes a centred dialog instead of a thumb sheet.
   ========================================================================== */
@media (min-width: 768px) {
  #localeSheet.sheet {
    display: grid !important;
    /* The phone rule that fixes this to the viewport lives in the phone
       stylesheet, so the dialog has to be positioned again here. */
    position: fixed; z-index: calc(var(--z-sheet) + 1);
    top: 50%; left: 50%; right: auto; bottom: auto;
    width: min(420px, 92vw); max-height: 80vh;
    border-radius: var(--r-lg);
    background: var(--card); box-shadow: var(--shadow-3);
    grid-template-rows: auto minmax(0, 1fr) auto;
    opacity: 0; visibility: hidden;
    transform: translate3d(-50%, -46%, 0) scale(.98);
    transition: opacity .26s var(--ease), transform .34s var(--ease), visibility .26s var(--ease);
  }
  #localeSheet.sheet.is-open { opacity: 1; visibility: visible; transform: translate3d(-50%, -50%, 0); }
  #localeSheet .sheet-grip { display: none; }
  #localeSheet .sheet-head { padding: 17px 19px 14px; }
  #localeSheet .sheet-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
  #localeSheet .sheet-body { overflow-y: auto; padding: 15px 19px; }
  #localeSheet .sheet-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 19px; border-top: 1px solid var(--line-soft); }
}

/* ==========================================================================
   FLAGSHIP SHOWCASE: TABS & EDITIONS
   ========================================================================== */
.flagship-wrap { margin-top: 10px; margin-bottom: 36px; }
.flagship-tabs-nav {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 6px; background: var(--card-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); margin-bottom: 16px;
  /* The scrollbar is hidden here, so a row left resting mid-tab reads as a broken,
     clipped layout instead of a scroller. Snapping parks each tab on its own edge
     and the fades below say there is more to reach. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px;
  -webkit-overflow-scrolling: touch;
}
.flagship-tabs-nav::-webkit-scrollbar { display: none; }
/* Applied by store-home.html only while the row actually overflows, so a desktop
   width that fits all four tabs keeps its hard edges. */
.flagship-tabs-nav.has-more-start {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
  mask-image: linear-gradient(to right, transparent 0, #000 34px);
}
.flagship-tabs-nav.has-more-end {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 34px);
  mask-image: linear-gradient(to left, transparent 0, #000 34px);
}
.flagship-tabs-nav.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.flagship-tab {
  /* 1 0 auto, not 1: this row scrolls, so a zero flex-basis would hand every tab
     the same share regardless of its label and the longest one (a name plus its
     spec chip) would spill straight out of the pill on a phone. Content sets the
     basis, nothing shrinks below it, and a wide row still spreads them out. */
  flex: 1 0 auto; min-width: 140px; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 16px; border-radius: var(--r-lg);
  background: transparent; color: var(--ink-2); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: all .24s var(--ease); white-space: nowrap;
  scroll-snap-align: start;
}
.flagship-tab:hover { background: var(--card); color: var(--ink); }
.flagship-tab.is-active {
  background: var(--card); color: var(--accent); border-color: var(--line);
  box-shadow: var(--shadow-1);
}
.flagship-tab i { font-size: 18px; }
.tab-chip {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--card-3); color: var(--ink-3);
}
.flagship-tab.is-active .tab-chip { background: var(--accent-soft); color: var(--accent); }

/* Edition Bar */
.edition-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
  padding: 12px 18px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line-soft);
}
.edition-label {
  font-size: 13.5px; font-weight: 800; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.edition-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edition-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--page); color: var(--ink-2);
  border: 1px solid var(--line); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease);
}
.edition-pill:hover { background: var(--card-2); color: var(--ink); transform: translateY(-1px); }
.edition-pill.is-active {
  background: var(--ink); color: #FFF; border-color: var(--ink);
  box-shadow: var(--shadow-1);
}
.edition-pill.pill-dragon.is-active { background: #DC2626; color: #FFF; border-color: #DC2626; }
.edition-pill.pill-hippo.is-active { background: #2563EB; color: #FFF; border-color: #2563EB; }
.edition-pill.pill-player.is-active { background: #059669; color: #FFF; border-color: #059669; }
.edition-pill.pill-kaal.is-active { background: #9333EA; color: #FFF; border-color: #9333EA; }

/* 4-Card Responsive Grid */
.flagship-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 32px;
}
@media (max-width: 1080px) {
  .flagship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .flagship-grid { grid-template-columns: 1fr; }
}

/* Badge for Editions on Cards */
.pc-edition-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(14, 20, 23, 0.75); color: #FFF; backdrop-filter: blur(8px);
}
.pc-edition-tag.is-dragon { background: rgba(220, 38, 38, 0.9); color: #FFF; }
.pc-edition-tag.is-hippo { background: rgba(37, 99, 235, 0.9); color: #FFF; }
.pc-edition-tag.is-player { background: rgba(5, 150, 105, 0.9); color: #FFF; }
.pc-edition-tag.is-kaal { background: rgba(147, 51, 234, 0.9); color: #FFF; }

/* Specs chips inside product card */
.pc-specs-list {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0;
}
.pc-spec-pill {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--card-3); color: var(--ink-2);
}

/* ==========================================================================
   INSTAGRAM SHORTS / REELS SECTION
   ========================================================================== */
.insta-header-wrap {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.insta-follow-badge {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-pill); box-shadow: var(--shadow-1);
}
.insta-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  color: #FFF;
}
.insta-follow-badge strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.insta-follow-badge small { display: block; font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: .05em; }

.insta-shorts-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 250px);
  gap: 16px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding: 4px; margin: -4px;
}
.insta-shorts-rail::-webkit-scrollbar { display: none; }
.insta-short-card {
  position: relative; aspect-ratio: 9/16; border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; scroll-snap-align: start;
  background: var(--card-2); box-shadow: var(--shadow-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.insta-short-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-3);
}
.insta-short-card img.insta-bg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.insta-short-card:hover img.insta-bg { transform: scale(1.05); }
.insta-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 40%, rgba(0,0,0,.85) 100%);
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px;
}
.insta-top {
  display: flex; align-items: center; justify-content: space-between;
}
.insta-reel-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  background: rgba(255,255,255,.2); color: #FFF; backdrop-filter: blur(8px);
}
.insta-views { font-size: 11px; font-weight: 700; color: #F5D79E; display: flex; align-items: center; gap: 4px; }
.insta-center-play {
  align-self: center; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.25); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center;
  color: #FFF; font-size: 20px; transition: all .3s var(--ease);
}
.insta-short-card:hover .insta-center-play {
  transform: scale(1.15); background: var(--accent); border-color: var(--accent);
}
.insta-bottom { color: #FFF; }
.insta-caption {
  font-size: 12.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.insta-metrics {
  display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; opacity: .9;
}
.insta-metrics span { display: inline-flex; align-items: center; gap: 4px; }

/* Short Video Viewer Modal */
.insta-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.8); backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: all .26s var(--ease);
}
.insta-modal.is-open { opacity: 1; visibility: visible; }
.insta-modal-shell {
  position: relative; width: min(440px, 92vw); max-height: 90vh;
  border-radius: var(--r-xl); overflow: hidden; background: #000;
  box-shadow: var(--shadow-3);
}
.insta-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2);
  color: #FFF; border: none; display: grid; place-items: center; font-size: 20px; cursor: pointer;
}
.insta-modal-inner { position: relative; aspect-ratio: 9/16; width: 100%; max-height: 75vh; }
.insta-modal-inner img { width: 100%; height: 100%; object-fit: cover; }
.insta-modal-info { padding: 16px 20px; background: var(--card); color: var(--ink); }
.insta-modal-info h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.insta-modal-info p { font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-bottom: 12px; }

/* ==========================================================================
   GOOGLE REVIEWS AUTOMATIC MARQUEE
   ========================================================================== */
.google-badge-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 22px; padding: 16px 22px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-1);
}
.google-badge-lockup { display: flex; align-items: center; gap: 14px; }
.google-icon { flex: none; }
.google-rating-score { display: flex; align-items: center; gap: 8px; }
.google-rating-score strong { font-size: 20px; font-weight: 800; color: var(--ink); }
.google-rating-score .stars { color: #FBBC05; font-size: 17px; letter-spacing: 2px; }
.google-badge-lockup small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.google-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: #E8F0FE; color: #1967D2; font-size: 12px; font-weight: 700;
}
:root[data-theme="dark"] .google-trust-pill {
  background: rgba(66, 133, 244, 0.16); color: #8AB4F8;
}

.google-marquee-wrap {
  position: relative; overflow: hidden; width: 100%;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}
.google-marquee-track {
  display: flex; gap: 18px; width: max-content;
  animation: googleMarquee 42s linear infinite;
}
.google-marquee-track:hover { animation-play-state: paused; }

@keyframes googleMarquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.google-review-card {
  width: 320px; flex: none; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.google-review-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-2);
}
.google-user-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.google-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--chrome-3); color: #FFF; font-weight: 800; font-size: 13px;
  display: grid; place-items: center; flex: none;
}
.google-meta strong {
  display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; color: var(--ink);
}
.google-check { color: #1A73E8; font-size: 14px; }
.google-meta small { display: block; font-size: 11px; color: var(--ink-3); }

.google-stars-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.google-stars { color: #FBBC05; font-size: 14px; letter-spacing: 2px; }
.google-time { font-size: 11px; color: var(--ink-4); }

.google-review-text {
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  margin-bottom: 14px; flex: 1;
}
.google-product-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  background: var(--card-3); color: var(--ink-2);
}

/* ==========================================================================
   PROMO TICKER. The announcement bar sits above the sticky header, so it
   scrolls away with the page while the header stays. One CSS marquee, two
   copies of the track, so the loop has no seam.
   ========================================================================== */
.promo-ticker {
  background: var(--chrome); color: var(--chrome-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ticker-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}
.ticker-track {
  display: flex; align-items: center; width: max-content;
  animation: tickerScroll 44s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 0; margin: 0 24px;
  font-size: 12px; font-weight: 700; letter-spacing: .005em;
  white-space: nowrap; color: var(--chrome-ink);
}
.ticker-item i { font-size: 15px; color: var(--accent-soft); flex: none; }
.ticker-item::after {
  content: ''; width: 4px; height: 4px; border-radius: var(--r-pill);
  background: var(--chrome-3); margin-left: 16px;
}
@keyframes tickerScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   USP BAND. Same marquee mechanics, mid page, on a light surface and with
   two lines of copy per item.
   ========================================================================== */
.usp-band {
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: var(--card-2); padding: 18px 0;
}
.usp-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.usp-track {
  display: flex; align-items: stretch; width: max-content;
  animation: uspScroll 52s linear infinite;
}
.usp-track:hover { animation-play-state: paused; }
.usp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 0 26px; white-space: nowrap;
  border-right: 1px solid var(--line);
}
.usp-mark {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: var(--accent-soft); color: var(--accent);
}
.usp-item strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.usp-item small { display: block; font-size: 11.5px; color: var(--ink-3); }
@keyframes uspScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   OUR COLLECTION: the three format doors, as a snapping tile carousel.
   ========================================================================== */
.tile-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding: 4px; margin: -4px;
}
.tile-rail::-webkit-scrollbar { display: none; }
.tile-card {
  position: relative; display: flex; flex-direction: column;
  scroll-snap-align: start; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--line-soft);
  background: var(--card); box-shadow: var(--shadow-1);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .3s var(--ease);
}
.tile-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-2); border-color: var(--line);
}
.tile-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--card-2); }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile-card:hover .tile-media img { transform: scale(1.06); }
.tile-count {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .92); color: var(--ink-2); backdrop-filter: blur(8px);
}
.tile-body { display: grid; gap: 7px; padding: 17px 19px 19px; }
.tile-body h3 { font-size: 17px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.tile-card:hover .tile-body h3 { color: var(--accent); }
.tile-body p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.tile-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 3px;
  font-size: 12.5px; font-weight: 800; color: var(--accent);
}
.tile-card .pc-link { border-radius: var(--r-xl); }

/* Slide readout shared by every rail that asks for one */
.section-aside { display: flex; align-items: center; gap: 16px; flex: none; }
.rail-count {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rail-count b { font-size: 14px; font-weight: 800; color: var(--ink); }

/* ==========================================================================
   CARD MEDIA EXTRAS: the second photograph under the pointer, and the
   markdown flash. Both live inside .pc-media, so they inherit its clipping.
   ========================================================================== */
.pc-media-alt {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .42s var(--ease), transform .7s var(--ease);
}
.product-card:hover .pc-media-alt, .product-card:focus-within .pc-media-alt { opacity: 1; }
.pc-flash {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 4px 9px; border-radius: var(--r-sm);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--deal); color: #FFF; box-shadow: var(--shadow-1);
}

/* ==========================================================================
   WATCH AND BUY: circular story bubbles that open the shoppable reel viewer.
   ========================================================================== */
.reelbar {
  display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding: 4px; margin: -4px;
}
.reelbar::-webkit-scrollbar { display: none; }
.reelbar-item {
  flex: none; width: 98px; display: grid; gap: 9px; justify-items: center;
  scroll-snap-align: start; text-align: center;
}
.reelbar-ring {
  position: relative; width: 92px; height: 92px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, #FDF497, #FD5949, #D6249F, #285AEB, #FDF497);
  transition: transform .34s var(--ease-back);
}
.reelbar-item:hover .reelbar-ring, .reelbar-item:focus-visible .reelbar-ring { transform: scale(1.06); }
/* The photo well is a class, not .reelbar-ring > span, so the play badge that
   shares the ring is not caught by the same rule. */
.reelbar-shot {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  padding: 2px; background: var(--card);
}
.reelbar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.reelbar-badge {
  position: absolute; right: -1px; bottom: -1px;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--card);
}
.reelbar-label {
  font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==========================================================================
   SHOPPABLE REEL VIEWER: the tagged product strip and the reel stepper that
   turn the preview modal into something you can buy from.
   ========================================================================== */
.insta-modal-step {
  position: absolute; top: 50%; z-index: 10; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px; cursor: pointer;
  background: rgba(255, 255, 255, .22); color: #FFF;
  border: 1px solid rgba(255, 255, 255, .38); backdrop-filter: blur(8px);
  transition: background-color .24s var(--ease), transform .3s var(--ease);
}
.insta-modal-step:hover { background: var(--accent); border-color: var(--accent); }
.insta-modal-step.is-prev { left: 12px; }
.insta-modal-step.is-next { right: 12px; }
.insta-shop {
  display: flex; align-items: center; gap: 12px; margin-top: 13px;
  padding: 11px; border-radius: var(--r);
  border: 1px solid var(--line-soft); background: var(--card-2);
}
.insta-shop-media {
  width: 56px; height: 56px; flex: none; overflow: hidden;
  border-radius: var(--r-sm); background: var(--card-3);
}
.insta-shop-media img { width: 100%; height: 100%; object-fit: cover; }
.insta-shop-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.insta-shop-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.insta-shop-title {
  font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.insta-shop .price { margin-top: 2px; }
.insta-shop .price-now { font-size: 15px; }
.insta-shop-add { flex: none; }
.insta-modal-dots { display: flex; justify-content: center; gap: 6px; padding: 11px 0 3px; }
.insta-modal-dots span {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--line); transition: width .3s var(--ease), background-color .3s var(--ease);
}
.insta-modal-dots span.is-on { width: 20px; background: var(--accent); }

/* ==========================================================================
   MINI CART DRAWER. A right hand drawer on web chrome; the phone stylesheet
   turns the same element into a bottom sheet.
   ========================================================================== */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
  width: min(420px, 100vw);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-3);
  transform: translate3d(101%, 0, 0);
  transition: transform .44s var(--ease-swap);
}
.cart-drawer.is-open { transform: none; }
.cart-drawer > .sheet-grip { display: none; }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
}
.cart-drawer-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
.cart-drawer-head h2 span {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--ink-3);
}
.cart-drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 18px; }

.cart-lines { display: grid; }
/* The drawer and the cart page share the .cart-line name but not the shape, so
   the drawer's narrow three column version stays scoped to the drawer. */
.cart-drawer .cart-line {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 13px;
  padding: 15px 0; border-top: 0; border-bottom: 1px solid var(--line-soft);
}
.cart-line-media {
  border-radius: var(--r); overflow: hidden; background: var(--card-2);
  aspect-ratio: 1 / 1; align-self: start;
}
.cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-body { display: grid; gap: 5px; align-content: start; }
.cart-line-title { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.cart-line-title:hover { color: var(--accent); }
.cart-line-meta { font-size: 11.5px; color: var(--ink-3); }
.cart-line-row { display: flex; align-items: center; gap: 12px; margin-top: 3px; }
.cart-line-remove { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cart-line-remove:hover { color: var(--deal); text-decoration: underline; text-underline-offset: 3px; }
.cart-line-money { text-align: right; display: grid; gap: 2px; align-content: start; }
.cart-line-money .price-was { font-size: 11.5px; }
.qty-stepper.is-mini { height: 32px; grid-template-columns: 30px 34px 30px; }
.qty-stepper.is-mini button { font-size: 13px; }
.qty-stepper.is-mini output { font-size: 13px; }

.cart-empty { display: grid; gap: 9px; justify-items: center; text-align: center; padding: 52px 8px 40px; }
.cart-empty-mark {
  width: 62px; height: 62px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 29px;
  background: var(--accent-soft); color: var(--accent);
}
.cart-empty-title { font-size: 15px; font-weight: 800; color: var(--ink); }
.cart-empty-note { font-size: 13px; color: var(--ink-3); max-width: 30ch; }
.cart-empty .btn { margin-top: 7px; }

.cart-drawer-foot {
  display: grid; gap: 10px; padding: 15px 18px;
  border-top: 1px solid var(--line-soft); background: var(--card);
}
.cart-drawer-perk {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; line-height: 1.35;
}
.cart-drawer-perk i { font-size: 17px; flex: none; }
.cart-drawer-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cart-drawer-total span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cart-drawer-total b { font-size: 21px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cart-drawer-total b sup { font-size: 12px; font-weight: 700; top: -.5em; margin-right: 2px; }
.cart-drawer-fine { font-size: 11.5px; color: var(--ink-3); }
.cart-drawer-foot .btn-quiet { justify-self: center; }

/* --- The new sections, narrowed for the tablet band ----------------------- */
@media (max-width: 1080px) {
  .tile-rail { grid-auto-columns: minmax(262px, 62%); }
}
@media (max-width: 900px) {
  .tile-rail { grid-auto-columns: minmax(258px, 80%); }
  .ticker-item { margin: 0 18px; font-size: 11.5px; }
  .usp-item { padding: 0 20px; }
}

/* ==========================================================================
   REDUCED MOTION. Every transition, reveal and autoplay collapses.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-motion [data-rise] { opacity: 1 !important; transform: none !important; }
  .hero-slide { transform: none !important; }
  .rail, .quote-rail, .dept-strip, .gallery-thumbs { scroll-behavior: auto; }
  .product-card:hover { transform: none; }
  .product-card:hover .pc-media img { transform: none; }
  /* The marquees stop dead, so their overflow has to become scrollable or the
     copy past the fold would be unreachable. */
  .ticker-track, .usp-track, .google-marquee-track { animation: none !important; transform: none !important; }
  .ticker-wrap, .usp-wrap, .google-marquee-wrap { overflow-x: auto; }
  .tile-card:hover, .reelbar-item:hover .reelbar-ring { transform: none; }
}

@media print {
  .web-header, .store-footer, .toast-dock, .app-shell, .rail-nav, .hero-arrow,
  .promo-ticker, .usp-band, .cart-drawer, .reelbar { display: none !important; }
  body { background: #fff; }
}