/* =====================================================================
   KIVELLA STOREFRONT
   Mobile-first. Breakpoints: 750px (tablet), 990px (desktop), 1200px (wide)
   ===================================================================== */

:root {
  --ink: #17140f;
  --espresso: #1c1a18;
  --espresso-2: #26221f;
  --espresso-3: #2f2a26;
  --line-dark: #3b352f;
  --paper: #fbf8f3;
  --cream: #f3ede2;
  --white: #ffffff;
  --line: #e7e0d4;
  --gold: #c9a262;
  --gold-hi: #e3c48c;
  --gold-ink: #85662c;
  --muted: #6b6358;
  --muted-light: #b6ad9f;
  --cream-text: #f4efe6;
  --danger: #b3261e;
  --ok: #2e7d4f;

  /* the system font, like Apple's own pages: San Francisco on iPhone/Mac, Segoe UI Variable on Windows. Nothing to download. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Hebrew", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Hebrew", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --serif: var(--display);
  --brand: 'Fraunces', Georgia, 'Times New Roman', serif; /* only the KIVELLA wordmark */

  --radius: 16px;
  --radius-sm: 10px;
  --gutter: 18px;
  --header-h: 62px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 1px 2px rgba(23, 20, 15, 0.04), 0 12px 32px -16px rgba(23, 20, 15, 0.18);
  --shadow-lg: 0 30px 60px -30px rgba(23, 20, 15, 0.45);
}

@media (min-width: 750px) {
  :root { --gutter: 32px; --header-h: 72px; }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

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

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }

::selection { background: var(--gold); color: var(--espresso); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sr-only {
  position: absolute !important; 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: 100;
  padding: 10px 16px; background: var(--espresso); color: var(--cream-text); border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 820px; }
.center { text-align: center; }

/* ---------------------------------------------------------------- type */

.eyebrow {
  font: 600 0.72rem/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow--dark { color: var(--gold-ink); }
.eyebrow--small { font-size: 0.66rem; letter-spacing: 0.16em; margin-bottom: 8px; }

.display, .title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}
.display em, .title em {
  font-style: italic;
  font-weight: 450;
  color: var(--gold-ink);
}

.display {
  font-size: clamp(2.45rem, 8.4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 600;
  color: var(--cream-text);
}
.display em { display: block; color: var(--gold); }

.title {
  font-size: clamp(1.95rem, 5.6vw, 3.1rem);
  line-height: 1.08;
}
.title--light { color: var(--cream-text); }
.title--light em { color: var(--gold); }
.title--sm { font-size: clamp(1.7rem, 4.4vw, 2.3rem); margin-bottom: 18px; }

.lead-light { color: var(--muted-light); font-size: 1.05rem; line-height: 1.65; margin-top: 16px; max-width: 34em; }

.micro { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.84rem; color: var(--muted); margin-top: 14px; }
.micro svg { width: 17px; height: 17px; flex: none; color: var(--gold-ink); }
.micro--light { color: var(--muted-light); }
.micro a { color: var(--gold-ink); }

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--cream-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 0.98rem/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--espresso);
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 248, 230, 0.45) 48%, transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  box-shadow: 0 10px 24px -12px rgba(201, 162, 98, 0.7);
  transition: transform 0.25s var(--ease), background-position 0.9s var(--ease), box-shadow 0.25s;
}
.btn--gold:hover { background-position: -30% 0; box-shadow: 0 14px 30px -12px rgba(201, 162, 98, 0.85); }
.btn--dark:hover { background: #000; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--cream-text); border-color: rgba(244, 239, 230, 0.32); }
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.02rem; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.92rem; border-radius: 10px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 0.9rem/1 var(--sans); color: var(--ink); text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.link-arrow:hover { color: var(--gold-ink); }
.link-arrow:hover svg { transform: translateX(4px); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:hover { background: rgba(23, 20, 15, 0.06); }

.badge {
  display: inline-block;
  padding: 6px 11px; border-radius: 999px;
  background: var(--espresso); color: var(--gold-hi);
  font: 600 0.66rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- announcement + header */

.announce {
  background: var(--espresso);
  color: var(--gold-hi);
  font: 500 0.78rem/1 var(--sans);
  letter-spacing: 0.04em;
  text-align: center;
}
.announce__track { position: relative; height: 38px; overflow: hidden; }
.announce__item {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 0 16px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.announce__item.is-active { opacity: 1; transform: none; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 243, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 24px -20px rgba(23, 20, 15, 0.4); }

.site-header__inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: var(--header-h);
}

.logo {
  display: inline-flex; align-items: center; gap: 9px;
  justify-self: center;
  font: 600 1.18rem/1 var(--serif); letter-spacing: 0.24em;
  color: var(--ink); text-decoration: none;
}
.logo img { width: 30px; height: 30px; object-fit: contain; }
.logo--light { color: var(--cream-text); }
.logo--light img { filter: invert(1) hue-rotate(180deg); }

.site-nav { display: none; }

.cart-btn { position: relative; justify-self: end; }
.cart-btn__count {
  position: absolute; top: 4px; right: 2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--gold); color: var(--espresso);
  font: 700 0.7rem/1 var(--sans);
}
.cart-btn__count.is-bump { animation: bump 0.45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

@media (min-width: 990px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; gap: 32px; }
  .site-header__menu { display: none; }
  .logo { justify-self: start; }
  .site-nav { display: flex; justify-content: center; gap: 30px; }
  .site-nav a {
    position: relative; padding: 8px 0;
    font: 500 0.94rem/1 var(--sans); text-decoration: none; color: var(--ink);
  }
  .site-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .site-nav a:hover::after, .site-nav a[aria-current='page']::after { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- drawers (menu + cart) */

.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 12, 9, 0.5);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; }

.drawer__panel {
  position: absolute; top: 0; bottom: 0;
  width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s var(--ease);
}
.drawer--left .drawer__panel { left: 0; width: min(360px, 88%); transform: translateX(-100%); }
.drawer--right .drawer__panel { right: 0; transform: translateX(100%); }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); padding: 0 12px 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.drawer__head .logo { justify-self: start; }
.drawer__title { font: 600 1.3rem/1 var(--serif); }
.drawer__title span { font: 500 0.9rem/1 var(--sans); color: var(--muted); }

.menu-list { display: flex; flex-direction: column; padding: 8px 0; }
.menu-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  font: 500 1.35rem/1 var(--serif); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu-list a span svg { width: 18px; color: var(--gold-ink); }
.menu-foot { margin-top: auto; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); background: var(--cream); }
.menu-foot p { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.menu-foot p + p { margin-top: 10px; }
.menu-foot svg { width: 20px; color: var(--gold-ink); }

/* cart drawer */
.cart-drawer__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cart-loading { margin: 40px auto; width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ship-meter { padding: 14px var(--gutter); background: var(--cream); font-size: 0.88rem; }
.ship-meter p { display: flex; align-items: center; gap: 8px; }
.ship-meter svg { width: 18px; color: var(--gold-ink); flex: none; }
.ship-meter__bar { height: 6px; margin-top: 10px; border-radius: 99px; background: rgba(23, 20, 15, 0.08); overflow: hidden; }
.ship-meter__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width 0.6s var(--ease); }

.cart-lines { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter); list-style: none; margin: 0; }
.cart-line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--cream); }
.cart-line__name { font: 600 1.02rem/1.25 var(--serif); text-decoration: none; }
.cart-line__variant { display: block; margin-top: 3px; font-size: 0.84rem; color: var(--muted); }
.cart-line__price { font-weight: 600; font-size: 0.95rem; text-align: right; }
.cart-line__controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cart-line__remove { border: 0; background: none; padding: 4px 0; font-size: 0.8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__remove:hover { color: var(--danger); }

.qty {
  display: inline-grid; grid-template-columns: 40px 40px 40px;
  height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); overflow: hidden;
}
.qty button { border: 0; background: none; display: grid; place-items: center; color: var(--ink); }
.qty button svg { width: 16px; height: 16px; }
.qty button:hover { background: var(--cream); }
.qty input {
  width: 100%; border: 0; text-align: center; font-weight: 600; background: none;
  -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-upsell { margin: 6px var(--gutter) 0; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.cart-upsell__label { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.cart-upsell__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.cart-upsell__item img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.cart-upsell__item strong { display: block; font: 600 0.95rem/1.2 var(--serif); }
.cart-upsell__item span { font-size: 0.82rem; color: var(--muted); }

.cart-foot { padding: 16px var(--gutter) calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
.cart-foot__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cart-foot__row strong { font: 600 1.35rem/1 var(--serif); }
.cart-foot .micro { justify-content: flex-start; margin: 4px 0 14px; }
.cart-foot__trust { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 0.76rem; color: var(--muted); }
.cart-foot__trust span { display: inline-flex; align-items: center; gap: 5px; }
.cart-foot__trust svg { width: 15px; color: var(--gold-ink); }

.cart-empty { padding: 48px var(--gutter); text-align: center; }
.cart-empty h3 { font: 500 italic 1.6rem/1.2 var(--serif); margin-bottom: 8px; }
.cart-empty p { color: var(--muted); margin-bottom: 22px; }

/* ---------------------------------------------------------------- sections */

.section { padding: 64px 0; }
.section--tight { padding: 40px 0 56px; }
.section--cream { background: var(--cream); }
.section--dark { background: var(--espresso); color: var(--cream-text); }

@media (min-width: 990px) {
  .section { padding: 104px 0; }
  .section--tight { padding: 64px 0 88px; }
}

.section-head { text-align: center; max-width: 700px; margin: 0 auto 36px; }
.section-head__sub { margin: 14px auto 0; color: var(--muted); font-size: 1.04rem; max-width: 36em; }
.section-head .rating-line { justify-content: center; margin-top: 16px; }
@media (min-width: 990px) { .section-head { margin-bottom: 56px; } }

.center-cta { display: flex; flex-direction: column; align-items: center; margin-top: 34px; }

/* ---------------------------------------------------------------- rating + stars */

.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.rating-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 26px; font-size: 0.9rem; color: var(--muted-light); }
.rating-line strong { color: var(--cream-text); }
.rating-line--compact { margin-top: 10px; color: var(--muted); }
.rating-line--compact strong { color: var(--ink); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  background:
    radial-gradient(80% 60% at 85% 20%, rgba(201, 162, 98, 0.16), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(201, 162, 98, 0.08), transparent 60%),
    var(--espresso);
  color: var(--cream-text);
  overflow: hidden;
}
/* Phone order: headline → slider → buttons → benefit chips. Desktop: text left, slider right. */
.hero__grid {
  display: grid;
  grid-template-areas: 'copy' 'media' 'actions' 'chips';
  gap: 22px;
  padding-top: 26px;
  padding-bottom: 34px;
}
.hero__copy { grid-area: copy; }
.hero__media { grid-area: media; position: relative; min-width: 0; }
.hero__actions { grid-area: actions; }
.hero__chips { grid-area: chips; }
.hero__lead { margin-top: 14px; max-width: 30em; color: var(--muted-light); font-size: 1.02rem; line-height: 1.6; }
.hero__ctas { display: flex; flex-direction: column; gap: 10px; }
.hero__ctas .btn { width: 100%; }
.hero .rating-line { margin-top: 16px; }

/* hero carousel */
.hslider { position: relative; }
.hslider__viewport {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line-dark);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  background: #12100e;
  /* hard clip to the rounded frame (also while the slides glide), so nothing of a neighbouring picture can show outside it */
  contain: paint;
  isolation: isolate;
}
.hslider__track { display: flex; touch-action: pan-y; will-change: transform; }
.hslider__track.is-animating { transition: transform 0.9s var(--ease); }
.hslide { position: relative; flex: 0 0 100%; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; background: #12100e; }
/* the picture: no zoom, no overlay on the products; the frame is close to the photo's own square shape so little is cropped */
.hslide__frame { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.hslide__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* soft shade only along the top edge, so the progress bars stay readable on bright photos */
.hslide__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 6, 0.5) 0%, rgba(10, 8, 6, 0) 24%); pointer-events: none; }
/* the caption: a bar under the picture — name left, price + link right, pause button at the far end */
.hslide__tag {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 64px; padding: 0 16px; padding-inline-end: 66px;
  background: #161311; border-top: 1px solid rgba(201, 162, 98, 0.28);
}
.hslide__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hslide__name small { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-light); }
.hslide__name strong { font: 600 1.15rem/1.1 var(--serif); color: var(--cream-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hslide__price { display: flex; align-items: baseline; gap: 12px; font-weight: 600; color: var(--gold-hi); font-size: 1rem; white-space: nowrap; }
.hslide__price em { font-style: normal; font-size: 0.8rem; font-weight: 500; color: var(--cream-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 239, 230, 0.4); transition: text-decoration-color 0.2s, color 0.2s; }
.hslide:hover .hslide__price em { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }

.hslider__bars { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }
.hslider__bar { flex: 1; height: 18px; padding: 0; border: 0; background: none; display: flex; align-items: center; }
.hslider__bar span { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.34); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); overflow: hidden; }
.hslider__bar b, .ways__tab i b { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--gold-hi); will-change: transform; }

.hslider__nav {
  position: absolute; top: calc(50% - 32px); z-index: 3;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  display: none; place-items: center;
  border-radius: 50%; border: 1px solid rgba(244, 239, 230, 0.25);
  background: rgba(28, 26, 24, 0.6); color: var(--cream-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.3s, background 0.3s;
}
.hslider__nav svg { width: 20px; height: 20px; }
.hslider__nav--prev { left: 12px; }
.hslider__nav--prev svg { transform: rotate(180deg); }
.hslider__nav--next { right: 12px; }
.hslider:hover .hslider__nav, .hslider__nav:focus-visible { opacity: 1; }
.hslider__nav:hover { background: rgba(201, 162, 98, 0.85); color: var(--espresso); }

/* benefit chips */
.perk-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.perk-chips li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; font-size: 0.86rem; font-weight: 600; line-height: 1.25; }
.perk-chips svg { width: 22px; height: 22px; flex: none; }
.perk-chips--hero li { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-dark); color: var(--cream-text); }
.perk-chips--hero svg { color: var(--gold); }
.perk-chips--pdp { margin-top: 16px; }
.perk-chips--pdp li { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.perk-chips--pdp svg { color: var(--gold-ink); }

@media (min-width: 750px) {
  .hero__ctas { flex-direction: row; }
  .hero__ctas .btn { width: auto; }
  .trust-row { justify-content: space-between; }
  .hslide__frame { aspect-ratio: 4 / 3; }
}

@media (min-width: 990px) {
  .hero__grid {
    grid-template-columns: 0.9fr 1.1fr; /* the picture gets the bigger half; the text column is sized to its headline */
    grid-template-areas: 'copy media' 'actions media' 'chips media';
    grid-template-rows: auto auto 1fr;
    column-gap: 56px; row-gap: 26px;
    padding-top: 64px; padding-bottom: 72px;
  }
  .hero__copy { align-self: end; }
  .hero__media { align-self: center; }
  .hero__lead { font-size: 1.14rem; margin-top: 18px; }
  .hslide__frame { aspect-ratio: 5 / 4; }
  .hslider__nav { display: grid; }
  .perk-chips--hero { grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: start; }
  .perk-chips--hero li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
}

.trust-row {
  display: flex; gap: 22px; margin: 0; padding: 16px 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.trust-row::-webkit-scrollbar { display: none; }
.trust-row li { display: flex; align-items: center; gap: 9px; flex: none; font-size: 0.86rem; font-weight: 500; }
.trust-row svg { width: 20px; height: 20px; color: var(--gold); flex: none; }

/* ---------------------------------------------------------------- product cards + rails */

.product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 14px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.product-rail::-webkit-scrollbar { display: none; }
.product-rail > * { scroll-snap-align: start; }

.rail-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.rail-dots span { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: width 0.3s var(--ease), background 0.3s; }
.rail-dots span.is-active { width: 22px; background: var(--gold); }

.product-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }

@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 750px) {
  .product-rail { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 0; padding: 0; gap: 20px; }
  .rail-dots { display: none; }
}
@media (min-width: 990px) {
  .product-rail, .product-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .product-rail--3 { grid-template-columns: repeat(3, 1fr); }
}

.pcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s;
}
.pcard__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #efe9de; overflow: hidden; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s var(--ease), transform 1.1s var(--ease); }
.pcard__img--hover { opacity: 0; }
.pcard .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.pcard__soldout { position: absolute; inset: auto 12px 12px auto; z-index: 2; padding: 6px 10px; border-radius: 8px; background: var(--white); font-size: 0.75rem; font-weight: 600; }

.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.pcard__body .eyebrow { color: var(--gold-ink); }
.pcard__title { font: 600 1.32rem/1.15 var(--serif); letter-spacing: -0.01em; }
.pcard__title a { text-decoration: none; }
.pcard__title a::after { content: ''; position: absolute; inset: 0; } /* whole card clickable */
.pcard { position: relative; }
.pcard__title span { display: block; margin-top: 3px; font: 500 0.78rem/1 var(--sans); letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.pcard__tag {
  margin-top: 10px; color: var(--muted); font-size: 0.92rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__swatches { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.pcard__swatches span { width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pcard__swatches em { font-style: normal; font-size: 0.78rem; color: var(--muted); margin-left: 2px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.pcard__foot .link-arrow { position: relative; z-index: 1; }

@media (hover: hover) {
  .pcard:hover { border-color: rgba(201, 162, 98, 0.6); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
  .pcard:hover .pcard__img--hover { opacity: 1; }
  .pcard:hover .pcard__img { transform: scale(1.04); }
}

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price__now { font: 600 1.18rem/1 var(--sans); }
.price__was { color: var(--muted); font-size: 0.95rem; }
.price__save { padding: 4px 8px; border-radius: 6px; background: rgba(201, 162, 98, 0.18); color: var(--gold-ink); font-size: 0.74rem; font-weight: 700; }
.price--large .price__now { font: 600 1.85rem/1 var(--serif); }

/* ---------------------------------------------------------------- steps */

.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step {
  position: relative;
  padding: 24px 22px 24px 84px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.step__n {
  position: absolute; left: 22px; top: 22px;
  font: 500 italic 2.3rem/1 var(--serif); color: var(--gold);
}
.step h3 { font: 600 1.25rem/1.2 var(--serif); margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.96rem; }

@media (min-width: 990px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step { padding: 36px 30px 34px; }
  .step__n { position: static; display: block; font-size: 3.2rem; margin-bottom: 26px; }
  .step h3 { font-size: 1.45rem; }
}

/* ---------------------------------------------------------------- story */

.story__grid { display: grid; gap: 36px; }
.story__media { position: relative; }
.story__media img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 22px; border: 1px solid var(--line-dark); }
.story__label {
  position: absolute; top: 16px; left: 16px;
  font: 600 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  padding: 8px 12px; border-radius: 999px; background: rgba(28, 26, 24, 0.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.benefits { display: grid; gap: 22px; margin: 30px 0 34px; padding: 0; list-style: none; }
.benefits li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.benefits svg {
  width: 44px; height: 44px; padding: 10px; border-radius: 12px;
  background: rgba(201, 162, 98, 0.12); color: var(--gold); stroke-width: 1.5;
}
.benefits h3 { font: 600 1.08rem/1.3 var(--serif); margin-bottom: 3px; }
.benefits p { color: var(--muted-light); font-size: 0.94rem; }

@media (min-width: 990px) {
  .story__grid { grid-template-columns: 0.95fr 1.05fr; gap: 80px; align-items: center; }
  .benefits { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}

/* ---------------------------------------------------------------- finder */

.finder { display: grid; gap: 12px; }
.finder__card {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center;
  padding: 14px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.finder__img { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--cream); }
.finder__img img { width: 100%; height: 100%; object-fit: cover; }
.finder__card h3 { font: 600 1.2rem/1.2 var(--serif); }
.finder__card p:not(.eyebrow) { margin: 4px 0 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.finder__card .link-arrow { font-size: 0.84rem; color: var(--gold-ink); }

@media (hover: hover) {
  .finder__card:hover { border-color: rgba(201, 162, 98, 0.6); box-shadow: var(--shadow); transform: translateY(-2px); }
}
@media (min-width: 750px) {
  .finder { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .finder__card { grid-template-columns: 140px 1fr; padding: 18px; gap: 22px; }
}

/* ---------------------------------------------------------------- reviews */

.reviews {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
  margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: start;
  display: flex; flex-direction: column; margin: 0;
  padding: 26px 24px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
}
.review__stars { display: flex; gap: 2px; color: var(--gold); margin-bottom: 16px; }
.review__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.review blockquote { margin: 0 0 22px; font: 400 1.08rem/1.55 var(--serif); }
.review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.review figcaption span { color: var(--muted); font-size: 0.8rem; }

@media (min-width: 990px) {
  .reviews { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; gap: 22px; }
}

/* ---------------------------------------------------------------- guarantee */

.guarantee__grid { display: grid; gap: 30px; }
.guarantee .section-head__sub { margin-left: 0; }
.guarantee__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.guarantee__list li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
}
.guarantee__list svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--cream); color: var(--gold-ink); }
.guarantee__list h3 { font: 600 1.05rem/1.3 var(--serif); margin-bottom: 2px; }
.guarantee__list p { color: var(--muted); font-size: 0.92rem; }

@media (min-width: 990px) {
  .guarantee__grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
  .guarantee__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ---------------------------------------------------------------- FAQ */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font: 600 1.08rem/1.35 var(--serif);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px;
  background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open]:not([data-closing]) .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__item[open]:not([data-closing]) .faq__icon { border-color: var(--gold); }
.faq__answer { padding: 0 2px 22px; color: var(--muted); max-width: 44em; }

/* ---------------------------------------------------------------- newsletter */

.newsletter { text-align: center; }
.newsletter .lead-light { margin-left: auto; margin-right: auto; }
.newsletter__form { display: grid; gap: 10px; max-width: 520px; margin: 28px auto 0; }
.newsletter__form input {
  height: 56px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--line-dark); background: var(--espresso-2); color: var(--cream-text);
  font-size: 16px;
}
.newsletter__form input::placeholder { color: #8f877b; }
.newsletter__form input:focus { outline: none; border-color: var(--gold); }
@media (min-width: 560px) {
  .newsletter__form { grid-template-columns: 1fr auto; }
  .newsletter__form .btn { min-height: 56px; }
}

/* ---------------------------------------------------------------- footer */

.site-footer { background: #141210; color: var(--muted-light); padding: 0 0 calc(28px + env(safe-area-inset-bottom)); font-size: 0.92rem; }
.footer-trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px;
  padding: 34px 0; border-bottom: 1px solid var(--line-dark);
}
.footer-trust div { display: flex; gap: 12px; align-items: flex-start; }
.footer-trust svg { width: 24px; height: 24px; color: var(--gold); flex: none; }
.footer-trust strong { display: block; color: var(--cream-text); font-weight: 600; }
.footer-trust p { font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere; }

.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; padding: 40px 0 30px; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { margin-top: 14px; max-width: 26em; }
.footer-grid h3 { margin-bottom: 14px; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-text); }
.footer-grid a:not(.logo) { display: block; padding: 6px 0; text-decoration: none; }
.footer-grid a:not(.logo):hover { color: var(--gold-hi); }
.footer-disclaimer { padding: 20px 0; border-top: 1px solid var(--line-dark); font-size: 0.8rem; line-height: 1.6; }
.footer-disclaimer strong { color: var(--gold); }
.footer-copy { font-size: 0.78rem; opacity: 0.7; }

@media (min-width: 750px) {
  .footer-trust { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

/* ---------------------------------------------------------------- page hero (inner pages) */

.page-hero {
  padding: 48px 0 44px;
  background: radial-gradient(70% 90% at 90% 0%, rgba(201, 162, 98, 0.14), transparent 60%), var(--espresso);
  color: var(--cream-text);
}
.page-hero--short { padding: 40px 0 36px; }
@media (min-width: 990px) { .page-hero { padding: 80px 0 72px; } .page-hero--short { padding: 64px 0 56px; } }

/* ---------------------------------------------------------------- product page */

.pdp { padding: 0 0 40px; }
.pdp__grid { display: grid; gap: 26px; }

.gallery { position: relative; margin: 0 calc(var(--gutter) * -1); }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: #efe9de;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { margin: 0; scroll-snap-align: center; aspect-ratio: 1 / 1; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__badge { position: absolute; top: 14px; left: var(--gutter); }
.gallery__count {
  position: absolute; top: 14px; right: var(--gutter);
  padding: 6px 10px; border-radius: 999px; background: rgba(28, 26, 24, 0.7); color: var(--cream-text);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em;
}
.gallery__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.gallery__dots span { width: 6px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); transition: width 0.3s var(--ease), background 0.3s; }
.gallery__dots span.is-active { width: 20px; background: var(--white); }
.gallery__thumbs { display: none; }

.pdp__info { min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: 0.8rem; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold-ink); }
.pdp__info .eyebrow { margin-bottom: 8px; }
.pdp__title { font: 600 clamp(2.1rem, 6.5vw, 3rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.pdp__info .price { margin-top: 16px; }
.pdp__tagline { margin-top: 12px; color: var(--muted); font-size: 1.02rem; }

.pdp__form { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }

.option { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.option legend { margin-bottom: 12px; font-size: 0.9rem; color: var(--muted); }
.option legend strong { color: var(--ink); font-weight: 600; }
.option__values { display: flex; flex-wrap: wrap; gap: 10px; }
.option__value { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.option__value input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.swatch {
  display: block; width: 42px; height: 42px; border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 3px var(--paper), 0 0 0 4px var(--line);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.option__value:hover .swatch { transform: scale(1.06); }
.option__value input:checked + .swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 3px var(--paper), 0 0 0 5px var(--gold); }
.option__value input:focus-visible + .swatch, .option__value input:focus-visible + .pill { outline: 2px solid var(--gold); outline-offset: 4px; }
.option__value.is-unavailable .swatch::after, .option__value.is-unavailable .pill { opacity: 0.45; }
.option__value.is-unavailable .swatch { background: linear-gradient(135deg, transparent 47%, rgba(0,0,0,0.45) 48%, rgba(0,0,0,0.45) 52%, transparent 53%), var(--swatch); }

.pill {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 132px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pill strong { font-size: 0.95rem; }
.pill small { font-size: 0.76rem; color: var(--muted); }
.option__value:hover .pill { border-color: var(--gold); }
.option__value input:checked + .pill { background: var(--espresso); border-color: var(--espresso); color: var(--cream-text); }
.option__value input:checked + .pill small { color: var(--muted-light); }

.pdp__buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.pdp__buy .qty { height: 58px; grid-template-columns: 38px 40px 38px; border-radius: 12px; }
.btn__price { padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(28, 26, 24, 0.25); }
.pdp__ship-note { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 0.88rem; color: var(--muted); }
.pdp__ship-note svg { width: 20px; color: var(--gold-ink); flex: none; }
.pdp__ship-note strong { color: var(--ink); }

.pdp__assurance { margin: 22px 0 0; padding: 4px 18px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.pdp__assurance li { display: flex; gap: 14px; align-items: center; padding: 13px 0; font-size: 0.86rem; color: var(--muted); }
.pdp__assurance li + li { border-top: 1px solid var(--line); }
.pdp__assurance svg { width: 22px; height: 22px; color: var(--gold-ink); flex: none; }
.pdp__assurance strong { display: block; color: var(--ink); font-size: 0.92rem; }

.accordion { margin-top: 22px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font: 600 0.82rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font: 300 1.5rem/1 var(--sans); color: var(--gold-ink); transition: transform 0.3s var(--ease); }
.accordion details[open]:not([data-closing]) summary::after { transform: rotate(45deg); }
.accordion__body { padding: 0 2px 22px; color: var(--muted); font-size: 0.96rem; }
.accordion__body p + p, .accordion__body p + ul { margin-top: 12px; }
.accordion__body a { color: var(--gold-ink); }
.ticks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.ticks svg { width: 20px; height: 20px; color: var(--gold-ink); stroke-width: 2; margin-top: 1px; }
.ticks strong { color: var(--ink); }
.specs { margin: 0; display: grid; }
.specs div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.specs dt { color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.specs dd { margin: 0; }

@media (min-width: 750px) {
  .gallery { margin: 0; }
  .gallery__track { border-radius: 20px; }
  .gallery__badge { left: 16px; }
  .gallery__count { right: 16px; }
}

@media (min-width: 990px) {
  .pdp { padding: 36px 0 72px; }
  .pdp__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 64px; align-items: start; }
  .gallery { position: sticky; top: calc(var(--header-h) + 20px); }
  .gallery__count, .gallery__dots { display: none; }
  .gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .gallery__thumb { flex: none; width: 76px; height: 76px; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--cream); transition: border-color 0.2s; }
  .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .gallery__thumb.is-active { border-color: var(--gold); }
  .gallery__thumb:hover { border-color: rgba(201, 162, 98, 0.5); }
}

.benefit-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 16px; margin: 0; padding: 0; list-style: none; text-align: center; }
.benefit-strip svg { width: 46px; height: 46px; margin: 0 auto 12px; padding: 10px; border-radius: 50%; background: rgba(201, 162, 98, 0.12); color: var(--gold); }
.benefit-strip h3 { font: 600 1.06rem/1.2 var(--serif); }
.benefit-strip p { margin-top: 4px; color: var(--muted-light); font-size: 0.86rem; }
.pdp-benefits { padding: 48px 0; }
@media (min-width: 750px) { .benefit-strip { grid-template-columns: repeat(4, 1fr); } }

/* sticky add-to-cart (phones + tablets only) */
.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 243, 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -18px rgba(23, 20, 15, 0.35);
  transform: translateY(110%); transition: transform 0.4s var(--ease);
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.sticky-atc__text { min-width: 0; display: flex; flex-direction: column; }
.sticky-atc__text strong { font: 600 0.98rem/1.2 var(--serif); }
.sticky-atc__text span { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 989px) { .page-product .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (min-width: 990px) { .sticky-atc { display: none; } }

/* home quick bar (phones only) */
.quick-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 16px;
  background: rgba(28, 26, 24, 0.94); color: var(--cream-text);
  border: 1px solid rgba(201, 162, 98, 0.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
  transform: translateY(150%); transition: transform 0.45s var(--ease);
}
.quick-bar strong { color: var(--gold-hi); }
.quick-bar.is-visible { transform: none; }
@media (max-width: 749px) { .page-home .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (min-width: 750px) { .quick-bar { display: none; } }

/* ---------------------------------------------------------------- shop compare */

.compare-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 600 1.05rem/1.2 var(--serif); background: var(--cream); }
.compare thead a { text-decoration: none; }
.compare tbody th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.compare tr:last-child > * { border-bottom: 0; }

/* ---------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: 0.84rem; font-weight: 600; }
.field small { font-size: 0.78rem; color: var(--muted); }
.optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white);
  font-size: 16px; /* prevents iOS zoom on focus */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6358' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 98, 0.22); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }
.field-row { display: grid; gap: 0 12px; }
@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row--3 { grid-template-columns: 1.3fr 1fr 0.8fr; }
}

.check { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; font-size: 0.92rem; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--espresso); }
.check.is-invalid span { color: var(--danger); }

.form-error { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: #fbeceb; color: var(--danger); font-size: 0.9rem; }

.card-form { padding: 24px 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card-form > p:first-child { color: var(--muted); margin-bottom: 18px; }
.card-form > p:first-child a { color: var(--gold-ink); }
.card-form .btn { margin-top: 6px; }
@media (min-width: 750px) { .card-form { padding: 34px; } }

.notice { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; }
.notice--demo { background: #fff6e2; border: 1px solid #f0d9a5; color: #6d5214; }
.notice code { font-size: 0.85em; background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------------- checkout */

.page-checkout .quick-bar, .page-checkout .announce { display: none; }
.checkout { padding: 24px 0 64px; }
.checkout__grid { display: grid; gap: 30px; }
.back-link { display: inline-block; margin-bottom: 12px; font-size: 0.88rem; color: var(--muted); text-decoration: none; }
.checkout-form fieldset { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.checkout-form legend { margin-bottom: 14px; font: 600 1.3rem/1.2 var(--serif); }

.pay-box { margin-top: 22px; padding: 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.pay-box h2 { font: 600 1.3rem/1.2 var(--serif); }
.pay-box .micro { justify-content: flex-start; margin: 6px 0 16px; }
.paypal-slot { min-height: 60px; }

.summary-toggle { margin: 4px 0 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.summary-toggle summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 0.92rem; color: var(--gold-ink); }
.summary-toggle summary::-webkit-details-marker { display: none; }
.summary-toggle summary span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.summary-toggle summary svg { width: 20px; }
.summary-toggle summary strong { color: var(--ink); font-size: 1.08rem; }
.summary-toggle > div { padding: 0 16px 16px; }

.checkout__aside { display: none; }

.summary__lines { margin: 0; padding: 0; list-style: none; }
.summary__line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; font-size: 0.92rem; }
.summary__img { position: relative; }
.summary__img img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); background: var(--white); }
.summary__img em { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--espresso); color: var(--cream-text); font: 700 0.72rem/1 var(--sans); }
.summary__name strong { display: block; font-family: var(--serif); font-weight: 600; }
.summary__name small { color: var(--muted); }
.summary__totals { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.summary__totals div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.94rem; }
.summary__totals dt { color: var(--muted); }
.summary__totals dd { margin: 0; }
.summary__total { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--line); }
.summary__total dt { color: var(--ink) !important; font-weight: 600; }
.summary__total dd { font: 600 1.4rem/1 var(--serif); }
.summary__note { margin-top: 10px; font-size: 0.84rem; color: var(--gold-ink); }

@media (min-width: 990px) {
  .checkout { padding: 48px 0 96px; }
  .checkout__grid { grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
  .summary-toggle { display: none; }
  .checkout__aside { display: block; position: sticky; top: calc(var(--header-h) + 24px); padding: 26px; border-radius: 20px; background: var(--cream); }
  .checkout__aside .trust-row { flex-wrap: wrap; gap: 12px 20px; padding: 20px 0 0; margin-top: 18px; border-top: 1px solid var(--line); justify-content: flex-start; }
  .checkout__aside .trust-row svg { color: var(--gold-ink); }
}

/* ---------------------------------------------------------------- order confirmation + track */

.confirm { text-align: center; }
.confirm__icon { width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--espresso); color: var(--gold); }
.confirm__icon svg { width: 30px; height: 30px; stroke-width: 2.2; }
.confirm__lead { margin: 0 auto 24px; max-width: 32em; color: var(--muted); }
.confirm__status { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-bottom: 10px; border-radius: 12px; background: var(--cream); text-align: left; font-size: 0.94rem; }
.confirm__status span { color: var(--muted); }
.confirm__status a { color: var(--gold-ink); }
.confirm .summary, .track-result .summary { margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: left; }
.confirm__ship { text-align: left; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 18px; }
.confirm__ship h2 { font: 600 1.1rem/1.2 var(--serif); margin-bottom: 8px; }
.confirm__ship p { color: var(--muted); font-size: 0.94rem; }
.confirm .micro { display: block; margin-bottom: 22px; }
.track-result { margin-top: 26px; }

/* ---------------------------------------------------------------- prose (policies) */

.prose { color: #3d3830; font-size: 1.02rem; }
.prose h2 { margin: 30px 0 10px; font: 600 1.35rem/1.25 var(--serif); color: var(--ink); }
.prose p, .prose ul { margin: 0 0 14px; }
.prose a { color: var(--gold-ink); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90;
  max-width: calc(100% - 32px); padding: 14px 18px; border-radius: 12px;
  background: var(--espresso); color: var(--cream-text); font-size: 0.92rem;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  transition: transform 0.4s var(--ease), opacity 0.3s, visibility 0.4s;
  pointer-events: none;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- why: four perks, animated */

.container--mid { max-width: 980px; }

.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.perk {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: var(--espresso-2); border: 1px solid var(--line-dark);
}
.perk__visual {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 55%, rgba(201, 162, 98, 0.14), transparent 70%), #1a1816;
}
.perk__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perk__visual--art svg { width: 92%; height: 92%; }
.perk__badge {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(28, 26, 24, 0.78); border: 1px solid rgba(201, 162, 98, 0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gold-hi); font: 700 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.perk__badge svg { width: 13px; height: 13px; }
.perk__body { padding: 14px 14px 16px; }
.perk__body h3 { display: flex; align-items: center; gap: 8px; font: 600 1.08rem/1.2 var(--serif); color: var(--cream-text); }
.perk__body h3 svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.perk__body p { margin-top: 6px; color: var(--muted-light); font-size: 0.84rem; line-height: 1.5; }

@media (min-width: 990px) {
  .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .perk__body { padding: 20px 20px 22px; }
  .perk__body h3 { font-size: 1.35rem; }
  .perk__body p { font-size: 0.95rem; }
  .perk__badge { font-size: 0.64rem; padding: 7px 12px; left: 14px; top: 14px; }
}

/* smell: wisps rise inside the case and never get out */
.smell-art .sa-wisp { transform-box: fill-box; animation: sa-rise 3.4s ease-in-out infinite; }
.smell-art .sa-wisp--2 { animation-delay: -1.1s; }
.smell-art .sa-wisp--3 { animation-delay: -2.3s; }
.smell-art .sa-seal { animation: sa-pulse 3.4s ease-in-out infinite; }
.smell-art .sa-glow { animation: sa-pulse 3.4s ease-in-out infinite; }
.smell-art .sa-outside { opacity: 0.35; }
.smell-art .sa-x { opacity: 0.9; }
@keyframes sa-rise {
  0% { transform: translateY(26px); opacity: 0; }
  30% { opacity: 0.95; }
  75% { opacity: 0.6; }
  100% { transform: translateY(-40px); opacity: 0; }
}
@keyframes sa-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

/* winter: rain over the real case */
.perk__visual--rain img { filter: saturate(0.9) brightness(0.85); }
.rain {
  position: absolute; inset: -20% -20% 0 -20%; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130'%3E%3Cg stroke='%23e3edf7' stroke-width='1.6' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M10 6v20'/%3E%3Cpath d='M42 52v24'/%3E%3Cpath d='M70 18v18'/%3E%3Cpath d='M26 92v22'/%3E%3Cpath d='M60 96v18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 130px;
  transform: rotate(10deg);
  animation: rain-fall 0.55s linear infinite;
}
.rain--back { opacity: 0.45; background-size: 60px 90px; animation: rain-fall-back 0.85s linear infinite; }
@keyframes rain-fall { from { background-position: 0 0; } to { background-position: 0 130px; } }
@keyframes rain-fall-back { from { background-position: 20px 0; } to { background-position: 20px 90px; } }

/* hide the pack: pack slides into the case, lid clicks shut */
:is(.ways__slide.is-playing, .perk__visual) .pack-art .pa-pack { animation: pa-slide 5.2s var(--ease) infinite; }
.pack-art .pa-lid { transform-box: fill-box; transform-origin: 0% 100%; }
:is(.ways__slide.is-playing, .perk__visual) .pack-art .pa-lid { animation: pa-lid 5.2s var(--ease) infinite; }
:is(.ways__slide.is-playing, .perk__visual) .pack-art .pa-case rect:first-child { animation: pa-fill 5.2s var(--ease) infinite; }
:is(.ways__slide.is-playing, .perk__visual) .pack-art .pa-arrow { animation: pa-arrow 5.2s ease-in-out infinite; }
@keyframes pa-slide {
  0%, 12% { transform: translateX(0); opacity: 1; }
  44% { transform: translateX(114px); opacity: 1; }
  56%, 90% { transform: translateX(114px); opacity: 0; }
  91% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes pa-lid {
  0%, 46% { transform: rotate(-40deg); }
  58%, 90% { transform: rotate(0deg); }
  100% { transform: rotate(-40deg); }
}
@keyframes pa-fill { 0%, 50% { opacity: 0.14; } 62%, 90% { opacity: 0.55; } 100% { opacity: 0.14; } }
@keyframes pa-arrow { 0%, 10% { opacity: 1; } 40%, 92% { opacity: 0; } 100% { opacity: 1; } }

/* luxury: a slow light sweep across the gold case */
.perk__visual--shine::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 210, 0.38) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 4.6s ease-in-out infinite;
}
@keyframes shine { 0%, 50% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* how it works: real photo of a pack inside the case + three steps */
.how { display: grid; gap: 26px; align-items: center; }
.how__visual { position: relative; margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.how__visual img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.how__tag {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px; border-radius: 999px;
  background: rgba(28, 26, 24, 0.82); border: 1px solid rgba(201, 162, 98, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream-text); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.how__tag b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--espresso); font-size: 0.75rem; }
/* pin each tag next to what it names in the photo */
.how__tag--pack { left: 6%; top: 14%; }
.how__tag--pack::after, .how__tag--case::after {
  content: ''; position: absolute; height: 1.5px; background: var(--gold); transform-origin: left center;
}
.how__tag--pack::after { left: 100%; top: 50%; width: clamp(28px, 9vw, 70px); transform: rotate(18deg); }
.how__tag--case { right: 5%; bottom: 20%; }
.how__tag--case::after { right: 100%; top: 50%; width: clamp(24px, 7vw, 56px); transform-origin: right center; transform: rotate(-20deg); }
.how__visual figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: var(--cream-text); font-size: 0.82rem; font-weight: 500;
}
.how__visual figcaption svg { width: 16px; height: 16px; color: var(--gold-hi); stroke-width: 2.4; }

.how__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.how__steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start;
  padding: 18px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
}
.how__steps li:first-child { border-color: rgba(201, 162, 98, 0.7); box-shadow: 0 0 0 3px rgba(201, 162, 98, 0.12); }
.how__n { font: 500 italic 2.2rem/1 var(--serif); color: var(--gold); }
.how__steps h3 { font: 600 1.2rem/1.25 var(--serif); margin-bottom: 4px; }
.how__steps p { color: var(--muted); font-size: 0.95rem; }

@media (min-width: 990px) {
  .how { grid-template-columns: 1fr 1fr; gap: 56px; }
  .how__steps { gap: 16px; }
  .how__steps li { padding: 24px 26px; grid-template-columns: 68px 1fr; }
  .how__n { font-size: 2.8rem; }
  .how__steps h3 { font-size: 1.4rem; }
  .how__tag { font-size: 0.88rem; }
}

.pdp__fits {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(201, 162, 98, 0.12); border: 1px solid rgba(201, 162, 98, 0.45);
  font-size: 0.9rem; color: var(--ink);
}
.pdp__fits svg { width: 20px; height: 20px; flex: none; color: var(--gold-ink); stroke-width: 2.4; margin-top: 1px; }

.finder__price { margin-left: 6px; font: 600 0.9rem/1 var(--sans); color: var(--gold-ink); }

/* ---------------------------------------------------------------- product page additions */

.pdp__buy { grid-template-columns: auto 1fr; }
.pdp__buy-now { grid-column: 1 / -1; }
.pdp__buy-now:hover { background: #000; }
.benefit-strip p { max-width: 22em; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- minimal checkout header */

.site-header--minimal .site-header__inner { grid-template-columns: 44px 1fr auto; gap: 8px; }
.site-header--minimal .logo { justify-self: center; }
.back-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.back-btn svg { width: 22px; height: 22px; transform: rotate(180deg); }
.back-btn:hover { background: rgba(23, 20, 15, 0.06); }
.secure-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-ink); font-size: 0.78rem; font-weight: 600; }
.secure-tag svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .secure-tag > span { display: none; } }
@media (min-width: 990px) {
  .site-header--minimal .site-header__inner { grid-template-columns: 1fr auto 1fr; }
  .site-header--minimal .back-btn { justify-self: start; }
  .site-header--minimal .secure-tag { justify-self: end; }
}

.pay-reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; font-size: 0.8rem; color: var(--muted); }
.pay-reassure span { display: inline-flex; align-items: center; gap: 5px; }
.pay-reassure svg { width: 15px; height: 15px; color: var(--gold-ink); }
.field.is-valid input, .field.is-valid select { border-color: #9cc5a8; }

/* ---------------------------------------------------------------- reveal on scroll */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.ways__art, .ways__art *, .ticker__track, .marquee__track, .band9__track, .reveal, .why8__list *), *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* the small decorative effects become still frames... */
  .smell-art *, .rain, .perk__visual--shine::after { animation: none !important; }
  .rain { opacity: 0.5; }
  /* ...but the "whole pack / loose" illustrations and the gold ticker keep their slow, gentle motion:
     frozen mid-frame they look broken, and the slideshow has its own pause button */
  .perk__visual--shine::after { display: none; }
}

.checkout__perks { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.checkout__perks .perk-chips { margin-top: 0; }
/* illustrations draw their own strokes — don't inherit the icon defaults */
.smell-art, .pack-art, .pack-icon { stroke: none; }

/* headlines break into even lines instead of leaving one word alone */
.display, .title, .pdp__title { text-wrap: balance; }

/* ---------------------------------------------------------------- the question each section answers */

.ask {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 7px 15px 7px 12px; border-radius: 999px;
  background: rgba(201, 162, 98, 0.14); color: var(--gold-ink);
  font: italic 500 1rem/1.2 var(--serif);
}
.ask svg { width: 17px; height: 17px; flex: none; }
.ask--light { color: var(--gold-hi); background: rgba(201, 162, 98, 0.16); }
.guarantee .ask { margin-left: 0; }

/* ---------------------------------------------------------------- whole pack / loose: alternating real photos */

.ways { border-radius: 22px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ways__tabs { display: grid; grid-template-columns: 1fr 1fr; }
.ways__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px 16px; border: 0; background: var(--white); color: var(--ink);
  font: 600 1.02rem/1.2 var(--serif); transition: background 0.3s, color 0.3s;
}
.ways__tab span { font: 700 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.ways__tab.is-active { background: var(--espresso); color: var(--cream-text); }
.ways__tab.is-active span { color: var(--gold-hi); }
.ways__tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(201, 162, 98, 0.18); overflow: hidden; }
.ways__tab i b { background: var(--gold); }

/* pause / play for auto-advancing carousels (WCAG 2.2.2) */
.carousel-toggle {
  position: absolute; z-index: 4; right: 12px; bottom: 12px;
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(244, 239, 230, 0.3);
  background: rgba(28, 26, 24, 0.66); color: var(--cream-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.25s, color 0.25s;
}
.carousel-toggle svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; }
.carousel-toggle:hover { background: var(--gold); color: var(--espresso); }
.carousel-toggle--ways { bottom: auto; top: 12px; right: auto; left: 12px; }
.ways__stage { position: relative; aspect-ratio: 1 / 1; background: #12100e; overflow: hidden; }
.ways__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity 0.8s var(--ease), transform 1.4s var(--ease); }
.ways__slide.is-active { opacity: 1; transform: none; }
.ways__slide img { width: 100%; height: 100%; object-fit: cover; }
.ways__slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; padding: 40px 18px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: var(--cream-text); font: 600 1.05rem/1.3 var(--serif);
}
.ways__slide figcaption b { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--gold); color: var(--espresso); }
.ways__slide figcaption svg { width: 16px; height: 16px; stroke-width: 2.6; }
.ways__real {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 6px 11px; border-radius: 999px; background: rgba(28, 26, 24, 0.75); color: var(--gold-hi);
  font: 700 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- sizes (Magnet Case) */

.pcard__sizes { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pcard__sizes span { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.pcard__sizes em { font-style: normal; font-size: 0.74rem; color: var(--gold-ink); font-weight: 600; margin-left: 2px; }

.pill--size { flex-direction: row; align-items: center; gap: 12px; min-width: 170px; }
.pill--size > span { display: flex; flex-direction: column; gap: 3px; }
.size-shape { width: 26px; height: 36px; flex: none; color: var(--gold-ink); }
.size-shape rect { fill: rgba(201, 162, 98, 0.18); }
.size-shape__cig { stroke: #c98a4b; stroke-width: 1.8; }
.option__value input:checked + .pill--size .size-shape { color: var(--gold-hi); }

/* ---------------------------------------------------------------- header: progress + shop button */

.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.header-cta { display: none; }
@media (min-width: 990px) {
  .past-hero .header-cta { display: inline-flex; animation: cta-in 0.45s var(--ease); }
}
@keyframes cta-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none;
}

/* ---------------------------------------------------------------- scroll choreography */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
  .js .perk.reveal .perk__visual { clip-path: inset(12% 12% 12% 12% round 18px); transition: clip-path 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .perk.reveal.is-in .perk__visual { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* the two sizes sit side by side so they can be compared at a glance */
.option--size .option__values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option--size .option__value, .option--size .pill--size { height: 100%; }
.option--size .pill--size { min-width: 0; padding: 12px; gap: 10px; }

.btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost-dark:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------- policy pages */

.prose__updated { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose__box { padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--line); background: var(--white); font-size: 0.95rem; }
.check a { color: var(--gold-ink); }
.newsletter .micro a { color: var(--gold-hi); }

/* "whole pack / loose" illustrations */
.ways__art {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 48%, rgba(201, 162, 98, 0.18), transparent 70%), #1a1816;
}
.ways__art svg { width: 82%; height: 82%; }
.loose-art { stroke: none; }
.loose-art .la-cig { transform-box: fill-box; }
.ways__slide.is-playing .loose-art .la-cig { animation: la-drop 6s var(--ease) infinite; animation-delay: calc(var(--d) * 0.22s); }
.loose-art .la-lid { transform-box: fill-box; transform-origin: 0% 100%; }
.ways__slide.is-playing .loose-art .la-lid { animation: la-lid 6s var(--ease) infinite; }
/* slideshow paused (button, tab in background, scrolled out of view): the illustration waits with the progress bar */
.ways.is-paused .ways__art * { animation-play-state: paused; }
@keyframes la-drop {
  0% { transform: translateY(-120px); opacity: 0; }
  6% { opacity: 1; }
  24%, 86% { transform: none; opacity: 1; }
  94%, 100% { transform: none; opacity: 0; }
}
@keyframes la-lid { 0%, 58% { transform: rotate(-42deg); } 68%, 90% { transform: rotate(0deg); } 100% { transform: rotate(-42deg); } }
/* (the illustrations keep playing under "reduce motion": a frozen half-open lid reads as broken) */

/* guarantees right under the comparison: remove the last doubt before buying */
.assure { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 780px; margin: 18px auto 0; padding: 0; list-style: none; }
.assure li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.assure svg { width: 22px; height: 22px; flex: none; color: var(--gold-ink); }
.assure strong { display: block; color: var(--ink); font-size: 0.86rem; margin-bottom: 2px; }
@media (min-width: 750px) { .assure { grid-template-columns: repeat(4, 1fr); } }
.section-head + .center-cta, .faq + .center-cta { margin-top: 22px; }
.newsletter .micro { display: block; }
.footer-trust a { color: var(--gold-hi); text-decoration: none; }
.footer-trust a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- shop: compare (cards on phones, table from tablet up) */

.spec-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
  margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
}
.spec-rail::-webkit-scrollbar { display: none; }
.spec-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px;
  padding: 16px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line);
}
.spec-card__head { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; text-decoration: none; }
.spec-card__head img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.spec-card__head strong { display: block; font: 600 1.2rem/1.15 var(--serif); }
.spec-card__head small { display: block; margin-top: 2px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.spec-card__head b { display: block; margin-top: 6px; font-size: 1.05rem; }
.spec-card__specs { margin: 0; display: grid; flex: 1; align-content: start; }
.spec-card__specs div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.spec-card__specs dt { color: var(--muted); }
.spec-card__specs dd { margin: 0; font-weight: 500; }
.compare-wrap { display: none; }
@media (min-width: 750px) {
  .spec-rail, .spec-dots { display: none; }
  .compare-wrap { display: block; }
}


/* ---------------------------------------------------------------- persuasion details */

/* a real review, right next to the buy buttons */
.hero__quote { margin-top: 10px; font: italic 400 1rem/1.4 var(--serif); color: var(--cream-text); }
.hero__quote span { font: 500 0.82rem/1 var(--sans); font-style: normal; color: var(--muted-light); }

/* gold band of promises, gently scrolling */
/* direction: ltr on the band itself, so the (wider than the screen) track always starts at the left edge — in Hebrew too */
.ticker { overflow: hidden; direction: ltr; background: linear-gradient(90deg, #b8914f, var(--gold), #b8914f); color: var(--espresso); border-block: 1px solid rgba(0, 0, 0, 0.15); }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__set { display: flex; flex: none; }
.ticker__track.is-js { animation: none; }
.ticker span { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font: 600 0.82rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ticker svg { width: 15px; height: 15px; stroke-width: 2.6; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* real availability */
.pcard__stock, .pdp__stock { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: var(--ok); }
.pcard__stock { margin-top: 10px; }
.pcard__stock i, .pdp__stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.18); }
.pdp__stock { margin-top: 12px; font-size: 0.86rem; }

/* review next to the buy box */
.pdp__quote { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--white); border-radius: 0 12px 12px 0; }
.pdp__quote blockquote { margin: 6px 0 4px; font: italic 400 1.02rem/1.45 var(--serif); }
.pdp__quote figcaption { font-size: 0.8rem; color: var(--muted); }
.pdp__quote .stars svg { width: 14px; height: 14px; }

/* gift */
.gift__grid { display: grid; gap: 30px; align-items: center; }
.gift__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; border: 1px solid var(--line-dark); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.gift .ask { margin-left: 0; }
.gift__points { margin: 22px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.gift__points li { display: flex; align-items: center; gap: 10px; color: var(--cream-text); font-weight: 500; }
.gift__points svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--gold); color: var(--espresso); stroke-width: 3; }
@media (min-width: 990px) { .gift__grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; } }

.summary__note--win { color: var(--ok); font-weight: 600; }

/* ---------------------------------------------------------------- soft pack vs kivella: two cards facing off */

.duel {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(6, auto);
  column-gap: 12px; max-width: 820px; margin: 0 auto;
}
.duel__card {
  grid-row: 1 / -1; display: grid; grid-template-rows: subgrid;
  border-radius: 20px; overflow: hidden;
}
.duel__card--bad { grid-column: 1; background: #ebe5da; border: 1px solid #ddd5c7; color: #7b7368; }
.duel__card--good {
  grid-column: 2; color: var(--cream-text);
  background: radial-gradient(90% 60% at 50% 0%, rgba(201, 162, 98, 0.22), transparent 70%), var(--espresso);
  border: 1px solid rgba(201, 162, 98, 0.45);
  box-shadow: 0 30px 60px -30px rgba(23, 20, 15, 0.6);
}
.duel__head { padding: 22px 14px 18px; text-align: center; }
.duel__card--bad .duel__head { border-bottom: 1px solid #ddd5c7; }
.duel__card--good .duel__head { border-bottom: 1px solid rgba(201, 162, 98, 0.25); }
.duel__visual { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.duel__visual img { width: 60px; height: 62px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7); }
.duel__visual .pack-icon { width: 44px; height: 58px; opacity: 0.85; filter: grayscale(0.3); }
.duel__visual b { font: 600 1.25rem/1.1 var(--serif); }
.duel__card--good .duel__visual b { color: var(--gold-hi); }
.duel__visual small { font-size: 0.74rem; letter-spacing: 0.04em; opacity: 0.8; }
.duel__row span { display: flex; align-items: center; gap: 10px; height: 100%; padding: 13px 16px; font-size: 0.94rem; line-height: 1.3; }
.duel__row + .duel__row span, .duel__head + .duel__row span { border-top: 1px solid transparent; }
.duel__card--bad .duel__row + .duel__row span { border-top-color: #ddd5c7; }
.duel__card--good .duel__row + .duel__row span { border-top-color: rgba(244, 239, 230, 0.08); }
.duel__row svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; stroke-width: 2.8; }
.duel__card--bad .duel__row svg { color: #b3261e; background: rgba(179, 38, 30, 0.1); }
.duel__card--good .duel__row svg { color: var(--espresso); background: var(--gold); }
.duel__card--good .duel__row span { font-weight: 600; }
.duel__vs {
  position: absolute; left: 50%; top: 64px; z-index: 2; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--gold); color: var(--espresso); border: 4px solid var(--paper);
  font: 700 italic 1.05rem/1 var(--serif); letter-spacing: 0.02em;
  box-shadow: 0 10px 24px -10px rgba(23, 20, 15, 0.6);
}

@media (max-width: 749px) {
  .duel { column-gap: 6px; margin-left: calc(var(--gutter) * -1 + 8px); margin-right: calc(var(--gutter) * -1 + 8px); }
  .duel__card { border-radius: 16px; }
  .duel__head { padding: 16px 8px 14px; }
  .duel__visual b { font-size: 1.08rem; }
  .duel__visual small { font-size: 0.66rem; }
  .duel__visual img { width: 50px; height: 52px; }
  .duel__visual .pack-icon { width: 38px; height: 50px; }
  .duel__row span { gap: 7px; padding: 11px 9px; font-size: 0.8rem; }
  .duel__row svg { width: 19px; height: 19px; padding: 3px; }
  .duel__vs { top: 56px; width: 42px; height: 42px; font-size: 0.92rem; border-width: 3px; }
}

/* reveal: the soft pack column settles in, Kivella's checks pop one by one */
@media (prefers-reduced-motion: no-preference) {
  .js .duel.reveal .duel__card--good { transform: translateY(14px); transition: transform 0.9s var(--ease); }
  .js .duel.reveal.is-in .duel__card--good { transform: none; }
  .js .duel .duel__card--good .duel__row svg { transform: scale(0); }
  .js .duel.is-in .duel__card--good .duel__row svg { animation: pop 0.5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 350ms); }
  .js .duel .duel__vs { transform: translate(-50%, -50%) scale(0.4); opacity: 0; transition: transform 0.6s var(--ease) 0.2s, opacity 0.4s 0.2s; }
  .js .duel.is-in .duel__vs { transform: translate(-50%, -50%); opacity: 1; }
}

/* hero carousel: feels physical when grabbed */
.hslider__viewport { cursor: grab; user-select: none; -webkit-user-select: none; }
.hslider.is-dragging .hslider__viewport { cursor: grabbing; }

/* =====================================================================
   HEBREW / RIGHT-TO-LEFT
   Latin text keeps Fraunces + Inter; Hebrew letters use Frank Ruhl Libre + Heebo (unicode-range).
   ===================================================================== */


/* Rubik is the typeface of the whole site, in both languages. Only the KIVELLA wordmark keeps its own face (see .logo span). */
.logo span { font-family: var(--brand); }
[dir='rtl'] body { line-height: 1.7; }
[dir='rtl'] .display, [dir='rtl'] .title { letter-spacing: 0; line-height: 1.18; font-weight: 600; }
[dir='rtl'] .section-head__sub, [dir='rtl'] .hero__lead, [dir='rtl'] .lead-light { font-weight: 400; }
/* Hebrew has no italics: the accent half of headlines stays upright, in gold */
[dir='rtl'] .display em, [dir='rtl'] .title em, [dir='rtl'] .ask, [dir='rtl'] .hero__quote,
[dir='rtl'] .review blockquote, [dir='rtl'] .pdp__quote blockquote, [dir='rtl'] .cart-empty h3,
[dir='rtl'] .how__n, [dir='rtl'] .step__n, [dir='rtl'] .duel__vs { font-style: normal; }
/* tracked capitals don't exist in Hebrew */
[dir='rtl'] .eyebrow, [dir='rtl'] .badge, [dir='rtl'] .announce, [dir='rtl'] .perk__badge, [dir='rtl'] .ticker span,
[dir='rtl'] .accordion summary, [dir='rtl'] .footer-grid h3, [dir='rtl'] .hslide__name small, [dir='rtl'] .ways__tab span,
[dir='rtl'] .ways__real, [dir='rtl'] .spec-card__head small, [dir='rtl'] .cart-upsell__label, [dir='rtl'] .duel__visual small,
[dir='rtl'] .pdp__info .eyebrow { letter-spacing: 0.02em; }

/* arrows point the reading direction */
[dir='rtl'] .btn svg, [dir='rtl'] .link-arrow svg, [dir='rtl'] .menu-list a svg { transform: scaleX(-1); }
[dir='rtl'] .btn:hover svg { transform: scaleX(-1) translateX(3px); }
[dir='rtl'] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
[dir='rtl'] .back-btn svg { transform: none; }

/* the hero slider and the product gallery run right-to-left in Hebrew (first slide on the right); the ticker keeps ltr mechanics */
[dir='rtl'] .ticker__track { direction: ltr; }
[dir='rtl'] .ticker span { direction: rtl; }
[dir='rtl'] .hslider__bar b, [dir='rtl'] .ways__tab i b, [dir='rtl'] .scroll-progress, [dir='rtl'] .site-nav a::after { transform-origin: right; }
[dir='rtl'] .hslider__nav--prev { left: auto; right: 12px; }
[dir='rtl'] .hslider__nav--prev svg { transform: none; }
[dir='rtl'] .hslider__nav--next { right: auto; left: 12px; }
[dir='rtl'] .hslider__nav--next svg { transform: rotate(180deg); }

/* mirrored positions */
[dir='rtl'] .pcard .badge, [dir='rtl'] .perk__badge { left: auto; right: 12px; }
[dir='rtl'] .gallery__badge { left: auto; right: var(--gutter); }
[dir='rtl'] .gallery__count { right: auto; left: var(--gutter); }
[dir='rtl'] .carousel-toggle { right: auto; left: 12px; }
[dir='rtl'] .carousel-toggle--ways { left: auto; right: 12px; }
[dir='rtl'] .ways__real { right: auto; left: 12px; }
[dir='rtl'] .pcard__soldout { inset: auto auto 12px 12px; }
[dir='rtl'] .cart-btn__count { right: auto; left: 2px; }
[dir='rtl'] .summary__img em { right: auto; left: -7px; }
[dir='rtl'] .prose ul { padding-left: 0; padding-right: 20px; }
[dir='rtl'] .pdp__quote { border-left: 0; border-right: 3px solid var(--gold); border-radius: 12px 0 0 12px; }
[dir='rtl'] .field select { background-position: left 14px center; padding-right: 14px; padding-left: 42px; }
@media (min-width: 750px) {
  [dir='rtl'] .gallery__badge { right: 16px; }
  [dir='rtl'] .gallery__count { left: 16px; }
}
@media (min-width: 990px) {
  [dir='rtl'] .perk__badge { right: 14px; }
}

/* drawers come in from the reading side: menu from the right, cart from the left */
[dir='rtl'] .drawer--left .drawer__panel { left: auto; right: 0; transform: translateX(100%); }
[dir='rtl'] .drawer--right .drawer__panel { right: auto; left: 0; transform: translateX(-100%); }
[dir='rtl'] .drawer.is-open .drawer__panel { transform: none; }

/* emails, phone numbers and order numbers stay left-to-right inside Hebrew text */
[dir='rtl'] input[type='email'], [dir='rtl'] input[type='tel'] { text-align: right; }

/* the quantity stepper never gives up its width to a long button label (Hebrew) */
.pdp__buy { grid-template-columns: auto minmax(0, 1fr); }
.pdp__buy .qty { min-width: 116px; }


/* =====================================================================
   HERO: trust row under the buttons, payment marks
   ===================================================================== */

.display { font-size: clamp(2.25rem, 7.6vw, 4.3rem); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 500; color: var(--muted-light); white-space: nowrap; }
.hero__trust svg { width: 17px; height: 17px; flex: none; color: var(--gold); }
.hero .rating-line { margin-top: 18px; }

.pay-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.pay-marks li {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  font: 600 0.7rem/1.4 var(--sans); letter-spacing: 0.04em; color: var(--muted);
}
.pay-marks--checkout { margin-top: 10px; }
.section--dark .pay-marks li { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); color: var(--muted-light); }

/* =====================================================================
   FLOATING LANGUAGE SWITCH (visitors in Israel)
   Always bottom-left, in both reading directions, so it never jumps when the page flips.
   ===================================================================== */

.lang-fab {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 35;
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid rgba(201, 162, 98, 0.5);
  background: rgba(28, 26, 24, 0.94); color: var(--cream-text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.65);
  font: 600 0.84rem/1 var(--sans); text-decoration: none; letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease), border-color 0.2s, background 0.2s, bottom 0.35s var(--ease), opacity 0.2s;
  direction: ltr;
}
[dir='rtl'] .lang-fab { padding: 0 11px 0 14px; flex-direction: row-reverse; }
.lang-fab svg { width: 18px; height: 18px; color: var(--gold-hi); }
.lang-fab:hover { transform: translateY(-2px); border-color: var(--gold); background: var(--espresso-2); }
.lang-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lang-fab.is-busy { opacity: 0.6; pointer-events: none; }
.lang-fab.is-busy svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* stay clear of the phone bars that slide up from the bottom */
body:has(.quick-bar.is-visible) .lang-fab, body:has(.sticky-atc.is-visible) .lang-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
.is-locked .lang-fab { opacity: 0; pointer-events: none; }

/* the whole page cross-fades when the language changes in place */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* Hebrew headlines run wider than English ones: keep the hero title to two lines on desktop */
[dir='rtl'] .display { font-size: clamp(2.2rem, 6.9vw, 3.95rem); }
/* Rubik letters are wider than the old Hebrew face: size the two-line hero headline by the screen width so it never overflows */
@media (max-width: 749px) { [dir='rtl'] .hero .display { font-size: clamp(1.5rem, 7.2vw, 2.7rem); } }
@media (min-width: 750px) and (max-width: 989px) { [dir='rtl'] .hero .display { font-size: clamp(2.2rem, 5.6vw, 3.2rem); } }
@media (min-width: 990px) { [dir='rtl'] .hero .display { font-size: clamp(2.2rem, 3.55vw, 3rem); } }
@media (max-width: 749px) { .lang-fab { min-height: 38px; padding: 0 12px 0 10px; font-size: 0.78rem; } [dir='rtl'] .lang-fab { padding: 0 10px 0 12px; } .lang-fab svg { width: 16px; height: 16px; } }

/* Hero headline: always two clean lines — the white line, then the gold line. Sized so each fits its column. */
.hero .display { text-wrap: nowrap; }
@media (max-width: 420px) { [dir='ltr'] .hero .display { font-size: clamp(2rem, 9.2vw, 2.4rem); } }
@media (min-width: 990px) {
  [dir='ltr'] .hero .display { font-size: clamp(2.3rem, 4vw, 3.4rem); }
  .hero__grid { padding-top: 52px; padding-bottom: 56px; }
}

/* the gold strip under the hero: calmer type, a little more height, hairlines top and bottom */
.ticker { background: linear-gradient(90deg, #a9823f, #cfa96a 50%, #a9823f); border-block: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.ticker span { padding: 15px 26px; font: 600 0.9rem/1 var(--sans); letter-spacing: 0.01em; text-transform: none; }
.ticker span + span::before { content: ''; width: 5px; height: 5px; margin-inline-end: 26px; border-radius: 50%; background: rgba(28, 26, 24, 0.45); }
.ticker svg { width: 16px; height: 16px; stroke-width: 2.8; }

/* hero slider: the pause button sits in the caption bar, level with the name and price */
.hslider .carousel-toggle { bottom: 13px; }

/* ---------------------------------------------------------------- order status (order page + track page) */
.ostatus { margin: 0 0 20px; padding: 24px 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: center; }
.ostatus--cancelled, .ostatus--refunded { border-color: #ecc9c5; background: #fff8f7; }
.osteps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.osteps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; }
.osteps li::before { content: ''; position: absolute; top: 15px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--line); }
.osteps li:first-child::before { display: none; }
.osteps li.is-done::before, .osteps li.is-current::before { background: var(--gold); }
.osteps i { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: var(--white); color: var(--gold-hi); }
.osteps i svg { width: 16px; height: 16px; stroke-width: 3; }
.osteps li.is-done i, .ostatus--delivered .osteps li.is-current i { background: var(--espresso); border-color: var(--espresso); }
.osteps li.is-current i { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(201, 162, 98, 0.22); }
.osteps li.is-current:not(:last-child) i::after, .ostatus--paid .osteps li.is-current i::after, .ostatus--demo .osteps li.is-current i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.ostatus--delivered .osteps li.is-current i::after { display: none; }
.osteps b { font: 600 0.82rem/1.25 var(--sans); color: var(--ink); }
.osteps li:not(.is-done):not(.is-current) b { color: var(--muted); font-weight: 500; }
.osteps small { min-height: 1.1em; font-size: 0.74rem; color: var(--muted); }
.ostatus h2 { margin: 0 0 8px; font: 600 1.4rem/1.2 var(--serif); }
.ostatus p { margin: 0 auto; max-width: 32em; color: var(--muted); font-size: 0.95rem; }
.otrack { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px auto 0; padding: 14px 16px; max-width: 360px; border-radius: 12px; background: var(--cream); }
.otrack span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.otrack strong { font: 600 1.1rem/1.3 var(--sans); letter-spacing: 0.04em; user-select: all; word-break: break-all; }
.otrack .btn { margin-top: 6px; }
@media (max-width: 420px) { .osteps b { font-size: 0.74rem; } }

/* =====================================================================
   CLEAN THEME (2026-10): light, quiet, trustworthy.
   The rules below override the darker "luxury" look above: light hero and sections, one warm accent used
   sparingly, black primary buttons, no shine or heavy shadows. Kept as an override block so the structure
   above stays intact.
   ===================================================================== */

:root {
  --gold: #b08a4f;
  --gold-hi: #c9a46a;
  --gold-ink: #7a5f32;
  --accent-soft: rgba(176, 138, 79, 0.12);
  --paper: #fcfbf8;
  --cream: #f4f1ea;
  --line: #e6e1d7;
  --muted: #6a6459;
  --shadow-lg: 0 24px 50px -30px rgba(23, 20, 15, 0.28);
}
body { background: var(--paper); }
::selection { background: var(--accent-soft); color: var(--ink); }

/* type: accents are upright and calm */
.eyebrow { color: var(--gold-ink); letter-spacing: 0.14em; font-size: 0.7rem; }
.display em, .title em { font-style: normal; font-weight: 600; color: var(--gold-ink); }
.display { color: var(--ink); }
.title--light { color: var(--ink); }
.title--light em { color: var(--gold-ink); }
.lead, .lead-light { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin-top: 16px; max-width: 34em; }
.micro--light { color: var(--muted); }
.ask { background: var(--accent-soft); color: var(--gold-ink); font-style: normal; font-weight: 500; }
.ask--light { background: var(--accent-soft); color: var(--gold-ink); }

/* buttons: black primary, outlined secondary, nothing shiny */
.btn--gold {
  --btn-bg: var(--ink); --btn-fg: #fff;
  background-image: none; box-shadow: none;
}
.btn--gold:hover { background-position: 0 0; box-shadow: none; background-color: #000; }
.btn--dark { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--dark:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost-light:hover { border-color: var(--ink); color: var(--ink); }
.btn { border-radius: 10px; }
.btn__price { border-left-color: rgba(255, 255, 255, 0.3); }
[dir='rtl'] .btn__price { border-left: 0; border-right: 1px solid rgba(255, 255, 255, 0.3); padding-left: 0; padding-right: 12px; margin-left: 0; margin-right: 2px; }
.link-arrow:hover { color: var(--gold-ink); }
.badge { background: var(--ink); color: #fff; }
.cart-btn__count { background: var(--ink); color: #fff; }
:focus-visible { outline-color: var(--ink); }

/* announcement strip + header */
.announce { background: var(--cream); color: var(--ink); border-bottom: 1px solid var(--line); font-weight: 500; letter-spacing: 0; }
.site-header { background: rgba(252, 251, 248, 0.94); }
.site-nav a::after { background: var(--ink); }
.header-actions { gap: 6px; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 600 0.78rem/1 var(--sans); letter-spacing: 0.04em; color: var(--ink); text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.lang-switch svg { width: 16px; height: 16px; color: var(--muted); }
.lang-switch:hover { border-color: var(--ink); }
.lang-switch.is-busy { opacity: 0.6; pointer-events: none; }
.lang-switch.is-busy svg { animation: spin 0.9s linear infinite; }
.lang-switch--menu { min-height: 44px; padding: 0 14px; margin-bottom: 14px; font-size: 0.9rem; letter-spacing: 0; }
.lang-switch--menu span { font-weight: 600; }
@media (max-width: 989px) { .site-header__inner { grid-template-columns: 44px 1fr auto; } .site-header .lang-switch { padding: 0 9px; } .site-header .lang-switch svg { display: none; } }
.scroll-progress { background: var(--ink); opacity: 0.6; }
.menu-list a span svg, .menu-foot svg { color: var(--gold-ink); }

/* hero: light, the product carries it */
.hero { background: linear-gradient(180deg, #f6f2ea 0%, var(--paper) 100%); color: var(--ink); }
.hero__lead { color: var(--muted); }
.hero__trust li { color: var(--muted); }
.hero__trust svg { color: var(--gold-ink); }
.hero .rating-line { color: var(--muted); }
.hero .rating-line strong { color: var(--ink); }
.hero__quote { color: var(--ink); }
.hero__quote span { color: var(--muted); }
.perk-chips--hero li { background: var(--white); border-color: var(--line); color: var(--ink); }
.perk-chips--hero svg { color: var(--gold-ink); }
.hslider__viewport { border-color: var(--line); box-shadow: var(--shadow-lg); background: var(--white); }
.hslide { background: var(--white); }
.hslide__tag { background: var(--white); border-top: 1px solid var(--line); }
.hslide__name small { color: var(--muted); }
.hslide__name strong { color: var(--ink); }
.hslide__price { color: var(--ink); }
.hslide__price em { color: var(--muted); text-decoration-color: var(--line); }
.hslide:hover .hslide__price em { color: var(--ink); text-decoration-color: var(--ink); }
.hslider__bar span { background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.hslider__bar b { background: var(--ink); }
.hslider__nav { background: rgba(255, 255, 255, 0.85); color: var(--ink); border-color: var(--line); }
.hslider__nav:hover { background: var(--ink); color: #fff; }
.hslider .carousel-toggle { background: var(--white); color: var(--ink); border-color: var(--line); }
.hslider .carousel-toggle:hover { background: var(--ink); color: #fff; }

/* the strip under the hero: a quiet line of promises */
.ticker { background: var(--white); color: var(--ink); border-block: 1px solid var(--line); box-shadow: none; }
.ticker span { font-weight: 500; color: var(--ink); }
.ticker svg { color: var(--gold-ink); }
.ticker span + span::before { background: var(--line); }

/* sections that used to be dark */
.section--dark { background: var(--cream); color: var(--ink); }
.section--cream + .section--cream { border-top: 1px solid var(--line); }
.perk { background: var(--white); border-color: var(--line); }
.perk__body h3 { color: var(--ink); }
.perk__body h3 svg { color: var(--gold-ink); }
.perk__body p { color: var(--muted); }
.benefits p { color: var(--muted); }
.benefit-strip svg { background: var(--accent-soft); color: var(--gold-ink); }
.benefit-strip p { color: var(--muted); }
.gift__media img { border-color: var(--line); box-shadow: var(--shadow-lg); }
.gift__points li { color: var(--ink); }
.gift__points svg { background: var(--ink); color: #fff; }
.newsletter__form input { background: var(--white); border-color: var(--line); color: var(--ink); }
.newsletter__form input::placeholder { color: #9a9387; }
.newsletter__form input:focus { border-color: var(--ink); }
.newsletter .micro a { color: var(--gold-ink); }
.rating-line { color: var(--muted); }
.rating-line strong { color: var(--ink); }

/* inner page headers */
.page-hero { background: linear-gradient(180deg, #f6f2ea 0%, var(--paper) 100%); color: var(--ink); border-bottom: 1px solid var(--line); }

/* cards and small things */
.pcard:hover { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.pcard__body .eyebrow { color: var(--gold-ink); }
.price__save { background: var(--accent-soft); color: var(--gold-ink); }
.pdp__quote { border-color: var(--gold); }
.pdp__fits { background: var(--accent-soft); border-color: rgba(176, 138, 79, 0.35); }
.how__steps li:first-child { border-color: var(--ink); box-shadow: none; }
.how__n, .step__n { color: var(--gold); font-style: normal; }
.ways__tab.is-active { background: var(--ink); color: #fff; }
.ways__tab.is-active span { color: var(--gold-hi); }
.ways__tab i b { background: var(--gold); }
.duel__card--good { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-lg); }
.duel__card--good .duel__visual b { color: var(--gold-hi); }
.duel__card--good .duel__row svg { background: var(--gold-hi); color: var(--ink); }
.duel__vs { background: var(--ink); color: #fff; font-style: normal; }
.assure svg, .pdp__assurance svg, .trust-row svg, .menu-foot svg, .footer-trust svg, .micro svg, .pdp__ship-note svg, .cart-foot__trust svg, .pay-reassure svg, .ticks svg, .ship-meter svg { color: var(--gold-ink); }
.option__value input:checked + .swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.option__value input:checked + .pill { background: var(--ink); border-color: var(--ink); color: #fff; }
.option__value:hover .pill { border-color: var(--ink); }
.option__value input:checked + .pill--size .size-shape { color: var(--gold-hi); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23, 20, 15, 0.08); }
.confirm__icon { background: var(--ink); color: #fff; }
.osteps li.is-done::before, .osteps li.is-current::before { background: var(--ink); }
.osteps li.is-current i { border-color: var(--ink); box-shadow: 0 0 0 5px rgba(23, 20, 15, 0.08); }
.osteps li.is-current:not(:last-child) i::after, .ostatus--paid .osteps li.is-current i::after, .ostatus--demo .osteps li.is-current i::after { background: var(--ink); }
.osteps li.is-done i, .ostatus--delivered .osteps li.is-current i { background: var(--ink); border-color: var(--ink); color: #fff; }
.toast { background: var(--ink); color: #fff; }
.quick-bar { background: rgba(23, 20, 15, 0.94); border-color: rgba(255, 255, 255, 0.12); }
.quick-bar strong { color: var(--gold-hi); }
.check a, .prose a, .micro a, .accordion__body a, .card-form > p:first-child a { color: var(--gold-ink); }
.gallery__count { background: rgba(23, 20, 15, 0.7); }
.gallery__thumb.is-active { border-color: var(--ink); }
.gallery__thumb:hover { border-color: var(--muted); }
.secure-tag { color: var(--gold-ink); }
.rail-dots span.is-active { background: var(--ink); }
.pcard__sizes em, .finder__price { color: var(--gold-ink); }

/* footer: dark, but calm */
.site-footer { background: #1c1a18; }
.footer-trust svg { color: var(--gold-hi); }
.footer-disclaimer strong { color: var(--gold-hi); }
.footer-grid a:not(.logo):hover, .footer-trust a { color: var(--gold-hi); }

/* checkout: Israeli address, payment choice */
.field-row--street { grid-template-columns: 1fr; }
.field-row--apt { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .field-row--street { grid-template-columns: 0.9fr 1.4fr; }
  .field-row--apt { grid-template-columns: 1.4fr 0.9fr; }
}
.field-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 0.86rem; color: var(--muted); }
.field-note svg { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.notice--info { background: #eef4ff; border: 1px solid #c9d8f5; color: #1f3a6b; }
.pay-methods { display: grid; gap: 10px; margin: 0 0 16px; }
.pay-method { position: relative; display: block; cursor: pointer; }
.pay-method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pay-method__body { display: block; padding: 14px 16px 12px 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color 0.2s, background 0.2s; }
[dir='rtl'] .pay-method__body { padding: 14px 46px 12px 16px; }
.pay-method__body::before { content: ''; position: absolute; top: 17px; left: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; }
[dir='rtl'] .pay-method__body::before { left: auto; right: 16px; }
.pay-method input:checked + .pay-method__body { border-color: var(--ink); background: var(--white); }
.pay-method input:checked + .pay-method__body::before { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }
.pay-method input:focus-visible + .pay-method__body { outline: 2px solid var(--ink); outline-offset: 2px; }
.pay-method__body strong { display: block; font-size: 0.98rem; }
.pay-method__body small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--muted); }
.pay-marks--inline { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }
.pay-marks--inline i { font-style: normal; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font: 600 0.68rem/1.4 var(--sans); color: var(--muted); }
.pay-panel .micro { justify-content: center; margin: 10px 0 0; }
.grow-slot { min-height: 120px; margin-bottom: 12px; }
.paypal-slot { min-height: 60px; }
.confirm__retry { margin: -6px 0 18px; }
.ostatus__spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.9s linear infinite; }
.contact-wa { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 22px; text-align: center; font-size: 0.9rem; color: var(--muted); }
.contact-wa .btn svg { width: 20px; height: 20px; }

/* WhatsApp button: bottom-left on every page when a number is set (stays clear of the phone bars) */
.wa-fab {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 35;
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 12px;
  border-radius: 999px; background: #25d366; color: #fff; text-decoration: none;
  font: 600 0.86rem/1 var(--sans); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s var(--ease), bottom 0.35s var(--ease), opacity 0.2s;
}
.wa-fab svg { width: 22px; height: 22px; stroke-width: 1.8; }
.wa-fab:hover { transform: translateY(-2px); }
body:has(.quick-bar.is-visible) .wa-fab, body:has(.sticky-atc.is-visible) .wa-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
.is-locked .wa-fab, .page-checkout .wa-fab { opacity: 0; pointer-events: none; }
@media (max-width: 749px) { .wa-fab span { display: none; } .wa-fab { padding: 0 12px; } }

/* no more floating language pill */
.lang-fab { display: none; }


/* =====================================================================
   HOME REFRESH (2026-10): the product first, promises once, less noise.
   ===================================================================== */

/* hero: on the phone the picture comes first, then the headline and one button */
.hero { background: linear-gradient(180deg, #efe9de 0%, #f7f3ec 55%, var(--paper) 100%); }
.hero__grid { grid-template-areas: 'media' 'copy' 'actions'; gap: 18px; padding-top: 14px; padding-bottom: 30px; }
.hero__chips { display: none; }
.hero__lead { font-size: 0.98rem; margin-top: 10px; }
.hero__ctas { gap: 8px; }
.hero .rating-line { margin-top: 14px; font-size: 0.86rem; }
.hslider__viewport { border-radius: 18px; box-shadow: 0 18px 40px -28px rgba(23, 20, 15, 0.35); }
.hslide__tag { height: 56px; }
@media (max-width: 749px) {
  .hero .display { font-size: clamp(1.7rem, 7.4vw, 2.3rem); line-height: 1.12; }
  [dir='rtl'] .hero .display { font-size: clamp(1.6rem, 7.2vw, 2.3rem); }
  .hero__media { margin: 0 calc(var(--gutter) * -1 + 6px); }
  .hslider__viewport { border-radius: 16px; }
}
@media (min-width: 990px) {
  .hero__grid { grid-template-columns: 0.86fr 1.14fr; grid-template-areas: 'copy media' 'actions media'; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 20px; padding-top: 48px; padding-bottom: 56px; }
  .hero__copy { align-self: end; }
  .hero__actions { align-self: start; }
  .hero__media { align-self: center; }
}

/* the ticker is gone; four promises sit under the hero */
.ticker { display: none; }
.values { background: var(--white); border-block: 1px solid var(--line); }
.values__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0 auto; padding-top: 16px; padding-bottom: 16px; list-style: none; }
.values__list li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.values__list svg { width: 22px; height: 22px; flex: none; color: var(--gold-ink); margin-top: 1px; }
.values__list span { display: flex; flex-direction: column; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.values__list strong { color: var(--ink); font-size: 0.86rem; }
@media (min-width: 750px) {
  .values__list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 18px; padding-bottom: 18px; }
  .values__list span { font-size: 0.82rem; }
  .values__list strong { font-size: 0.92rem; }
}

/* the four reasons: light cards; on the phone a row with a small picture, not four dark tiles */
.perk { border-color: var(--line); box-shadow: none; }
.perk__visual { background: #f1ede5; }
.perk__badge { background: rgba(255, 255, 255, 0.9); border-color: var(--line); color: var(--gold-ink); }
@media (max-width: 749px) {
  .perks { grid-template-columns: 1fr; gap: 10px; }
  .perk { flex-direction: row; align-items: stretch; }
  .perk__visual { width: 112px; flex: none; aspect-ratio: auto; }
  .perk__visual--art svg { width: 86%; height: 86%; }
  .perk__badge { display: none; }
  .perk__body { padding: 14px 14px 14px 12px; }
  [dir='rtl'] .perk__body { padding: 14px 12px 14px 14px; }
  .perk__body h3 { font-size: 1rem; }
  .perk__body p { font-size: 0.84rem; }
  .js .perk.reveal .perk__visual { clip-path: none; }
}

/* sections breathe a little less on the phone, headings a touch smaller */
@media (max-width: 749px) {
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 26px; }
  .title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .section-head__sub { font-size: 0.96rem; }
}

/* product cards: price and "free shipping" are what people scan for */
.pcard__body { padding: 14px 14px 16px; }
.pcard__title { font-size: 1.15rem; }
.pcard__tag { font-size: 0.86rem; margin-top: 6px; }
.pcard__stock { margin-top: 8px; }
.price__now { font-size: 1.15rem; }

/* products rail on the phone: show a peek of the next card */
@media (max-width: 749px) { .product-rail { grid-auto-columns: 72%; } }

/* desktop hero: the text block sits at the vertical middle of the picture */
@media (min-width: 990px) {
  .hero__grid { grid-template-areas: '. media' 'copy media' 'actions media' '. media'; grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  .hero__copy { align-self: end; padding-bottom: 22px; }
  .hero__actions { align-self: start; }
}


/* =====================================================================
   V3 (2026-10): bone, charcoal, one clay accent. Fewer things, bigger pictures.
   ===================================================================== */
:root {
  --paper: #f4f1eb;
  --cream: #ece7df;
  --white: #ffffff;
  --line: #e2ddd4;
  --ink: #17181a;
  --muted: #6e6a62;
  --gold: #b0603b;       /* the one accent: clay */
  --gold-hi: #d08a68;
  --gold-ink: #9a4f2d;
  --accent-soft: rgba(176, 96, 59, 0.1);
  --radius: 18px;
  --shadow-lg: 0 24px 50px -30px rgba(23, 24, 26, 0.3);
}
body { background: var(--paper); }
.site-header { background: rgba(244, 241, 235, 0.92); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(23, 24, 26, 0.45); }
.announce { background: var(--ink); color: #f4f1eb; border: 0; font-size: 0.78rem; font-weight: 500; }
.announce__line { margin: 0; padding: 9px 16px; text-align: center; }
.announce__line span { opacity: 0.5; margin: 0 8px; }
.announce__track { display: none; }
.stars, .review__stars { color: var(--gold); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--light:hover { background: #f4f1eb; }
.display em, .title em, .head3 em, .hero3__title em, .how3__title em { color: var(--gold-ink); font-style: normal; }
.eyebrow { color: var(--gold-ink); }
.link-arrow { color: var(--ink); }
.link-arrow:hover { color: var(--gold-ink); }
.section--cream, .section--bone { background: var(--cream); }
.section--cream + .section--cream { border-top: 0; }

/* hero: one photograph */
.hero3 { position: relative; display: grid; align-items: end; min-height: min(78vh, 720px); color: #fff; background: #1a1714; overflow: hidden; isolation: isolate; }
.hero3__media { position: absolute; inset: 0; z-index: -1; }
.hero3__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.hero3::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 17, 14, 0.12) 0%, rgba(20, 17, 14, 0.08) 40%, rgba(20, 17, 14, 0.78) 100%); }
.hero3__copy { padding-top: 54vh; padding-bottom: 34px; }
.hero3__eyebrow { margin: 0 0 10px; font: 600 0.7rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.hero3__title { margin: 0; font: 600 clamp(2rem, 7.6vw, 3.6rem)/1.08 var(--sans); letter-spacing: -0.015em; text-wrap: balance; max-width: 12em; }
.hero3__title em { display: block; color: #e8cdbb; }
.hero3__lead { margin: 14px 0 0; max-width: 30em; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.84); }
.hero3__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }
.hero3__note { font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); }
[dir='rtl'] .hero3__eyebrow { letter-spacing: 0.02em; }
@media (min-width: 750px) {
  .hero3 { min-height: min(82vh, 780px); }
  .hero3__copy { padding-top: 42vh; padding-bottom: 56px; }
  .hero3__actions { flex-direction: row; align-items: center; gap: 18px; }
  .hero3__lead { font-size: 1.1rem; }
}
@media (min-width: 990px) {
  .hero3__media img { object-position: 50% 50%; }
  .hero3__copy { padding-bottom: 72px; }
  .hero3__title { font-size: clamp(2.6rem, 4.6vw, 4rem); }
}
@media (max-width: 749px) { .hero3__media img { object-position: 46% 50%; } }

/* section headings: a title with an accent and, when useful, a link beside it */
.head3 { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; margin: 0 0 26px; }
.head3 h2 { margin: 0; font: 600 clamp(1.6rem, 4.8vw, 2.4rem)/1.12 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.head3--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 10px; }
.head3 .rating-line { margin: 0; justify-content: center; }
@media (min-width: 990px) { .head3 { margin-bottom: 34px; } .section--grid { padding-top: 72px; } }

/* the product grid */
.grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 750px) { .grid3 { gap: 18px; } }
@media (min-width: 990px) { .grid3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.grid3__note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 22px 0 0; font-size: 0.82rem; color: var(--muted); }
.grid3__note svg { width: 16px; height: 16px; color: var(--gold-ink); }
.pcard { position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; transition: none; }
.pcard:hover { transform: none; box-shadow: none; border-color: transparent; }
.pcard__media { aspect-ratio: 4 / 5; border-radius: 16px; background: var(--cream); overflow: hidden; }
.pcard__img { object-fit: cover; transition: opacity 0.5s var(--ease), transform 0.9s var(--ease); }
.pcard__img--cut { object-fit: contain; padding: 8%; }
.pcard__img--hover { opacity: 0; }
@media (hover: hover) { .pcard:hover .pcard__img--hover { opacity: 1; } .pcard:hover .pcard__img { transform: none; } }
.pcard__body { padding: 12px 2px 4px; }
.pcard__title { font: 600 1.02rem/1.25 var(--sans); letter-spacing: 0; }
.pcard__title a { color: var(--ink); }
.pcard__tag { margin-top: 2px; font-size: 0.8rem; color: var(--muted); -webkit-line-clamp: 1; }
.pcard__foot { align-items: center; margin-top: 8px; padding-top: 0; }
.pcard .price__now { font-size: 1.02rem; }
.pcard__swatches { margin-top: 0; gap: 5px; }
.pcard__swatches span { width: 12px; height: 12px; }
.pcard__swatches em { font-size: 0.72rem; }
.pcard__soldout { top: 10px; bottom: auto; inset-inline: auto 10px; }
@media (min-width: 990px) { .pcard__title { font-size: 1.12rem; } .pcard .price__now { font-size: 1.1rem; } }

/* three reasons */
.reasons { display: grid; gap: 22px; }
.reason { display: grid; gap: 6px; }
.reason figure { position: relative; margin: 0 0 8px; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--white); }
.reason figure img { width: 100%; height: 100%; object-fit: cover; }
.reason__rain img { filter: saturate(0.92) brightness(0.9); }
.reason h3 { font: 600 1.15rem/1.25 var(--sans); }
.reason p { color: var(--muted); font-size: 0.94rem; line-height: 1.55; max-width: 34em; }
@media (min-width: 750px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .reason figure { aspect-ratio: 4 / 5; } }
@media (min-width: 990px) { .reason h3 { font-size: 1.25rem; } }

/* how it works: text + the two-way illustration */
.how3 { display: grid; gap: 28px; align-items: center; }
.how3__title { margin: 0 0 22px; font: 600 clamp(1.6rem, 4.8vw, 2.4rem)/1.12 var(--sans); text-wrap: balance; }
.how3__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.how3__steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; }
.how3__steps b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 0.9rem/1 var(--sans); }
.how3__steps h3 { font: 600 1.05rem/1.3 var(--sans); }
.how3__steps p { margin-top: 2px; color: var(--muted); font-size: 0.94rem; }
.ways { border-radius: 18px; box-shadow: none; border-color: var(--line); }
@media (min-width: 990px) { .how3 { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }

/* reviews, faq, newsletter: quieter */
.review { border-color: var(--line); border-radius: 16px; }
.review blockquote { font-size: 1.02rem; }
.faq__item summary { font-size: 1.02rem; }
.newsletter3__inner { display: grid; gap: 18px; }
.newsletter3 h2 { font: 600 1.4rem/1.2 var(--sans); }
.newsletter3 p { margin-top: 6px; color: var(--muted); max-width: 32em; }
.newsletter3 .newsletter__form { margin: 0; max-width: none; }
.newsletter3 .newsletter__form .micro { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; }
.newsletter3 .newsletter__form input { height: 52px; }
.newsletter3 .newsletter__form .btn { min-height: 52px; }
@media (min-width: 990px) { .newsletter3__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; } }

/* nothing that was removed may linger */
.ticker, .values, .hero, .quick-bar, .gift, .duel, .assure, .perk-chips--hero { display: none; }
.footer-trust svg { color: var(--gold-hi); }
.footer-disclaimer strong { color: var(--gold-hi); }

/* product page in the same voice */
.page-hero { background: var(--cream); border-bottom: 0; }
.pdp__title { font-size: clamp(1.9rem, 6vw, 2.7rem); }
.option__value input:checked + .swatch { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.pdp__quote { border-color: var(--gold); }

/* hero height in pixels, not viewport units: phone address bars and screenshots both get it wrong otherwise */
.hero3 { min-height: 0; height: clamp(520px, 118vw, 640px); }
.hero3__copy { padding-top: 0; padding-bottom: 30px; }
@media (min-width: 750px) { .hero3 { height: 640px; } .hero3__copy { padding-bottom: 52px; } }
@media (min-width: 990px) { .hero3 { height: 700px; } .hero3__copy { padding-bottom: 68px; } }
@media (min-width: 1400px) { .hero3 { height: 760px; } }


/* =====================================================================
   SHIPPING CHOICE · DISCOUNT CODE · OFFER CARD (2026-10)
   ===================================================================== */

/* checkout: how would you like it delivered */
.ship-choice { margin-top: 4px; }
.ship-options { display: grid; gap: 10px; margin: 0 0 10px; }
.ship-option { position: relative; display: block; cursor: pointer; }
.ship-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ship-option__body { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px 13px 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color 0.2s, background 0.2s; }
[dir='rtl'] .ship-option__body { padding: 13px 46px 13px 16px; }
.ship-option__body::before { content: ''; position: absolute; top: 50%; left: 16px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; }
[dir='rtl'] .ship-option__body::before { left: auto; right: 16px; }
.ship-option input:checked + .ship-option__body { border-color: var(--ink); background: var(--white); }
.ship-option input:checked + .ship-option__body::before { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }
.ship-option input:focus-visible + .ship-option__body { outline: 2px solid var(--ink); outline-offset: 2px; }
.ship-option__main { display: flex; flex-direction: column; min-width: 0; }
.ship-option__main strong { font-size: 0.98rem; }
.ship-option__main small { margin-top: 2px; font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.ship-option__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-size: 0.98rem; }
[dir='rtl'] .ship-option__price { align-items: flex-start; }
.ship-option__price.is-free { color: var(--ok); }
.ship-option__price s { font-weight: 400; font-size: 0.8rem; color: var(--muted); }

/* order summary: discount line + the code box */
.summary__discount dd { color: var(--ok); font-weight: 600; }
.summary__discount code, .summary__totals code { font: 600 0.78em/1 ui-monospace, Menlo, Consolas, monospace; padding: 2px 6px; border-radius: 6px; background: rgba(23, 20, 15, 0.06); margin-inline-start: 4px; }
.summary__totals dt small { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.coupon { margin: 14px 0 6px; padding: 0; border-top: 1px solid var(--line); }
.coupon summary { padding: 12px 0; font-size: 0.9rem; font-weight: 600; color: var(--gold-ink); cursor: pointer; list-style: none; }
.coupon summary::-webkit-details-marker { display: none; }
.coupon summary::after { content: '+'; float: right; font-weight: 400; }
[dir='rtl'] .coupon summary::after { float: left; }
.coupon[open] summary::after { content: '–'; }
.coupon__row { display: flex; gap: 8px; padding-bottom: 12px; }
.coupon__row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: 500 0.95rem/1 inherit; letter-spacing: 0.04em; text-transform: uppercase; background: var(--white); color: var(--ink); }
.coupon__row input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.coupon__row .btn { flex: none; }
.coupon__msg { margin: -4px 0 12px; font-size: 0.84rem; }
.coupon__msg.is-bad { color: var(--danger); }
.coupon__msg.is-ok { color: var(--ok); }
.coupon--applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; font-size: 0.9rem; }
.coupon--applied p { margin: 0; color: var(--ok); font-weight: 600; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.86rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--ink); }

/* the legal shipping page: the options as a small table */
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 0.95rem; }
.legal-table th, .legal-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: start; }
.legal-table th { font-weight: 600; color: var(--ink); font-size: 0.85rem; }

/* offer card: a live discount code the admin chose to announce */
.offer { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; padding: 18px 44px 16px 18px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55); transform: translateY(20px); opacity: 0; visibility: hidden; transition: transform 0.4s var(--ease), opacity 0.4s, visibility 0s 0.4s; }
[dir='rtl'] .offer { padding: 18px 18px 16px 44px; }
.offer.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform 0.4s var(--ease), opacity 0.4s; }
.offer__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
[dir='rtl'] .offer__close { right: auto; left: 8px; }
.offer__msg { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.offer__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.offer__code { padding: 8px 12px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, 0.45); font: 700 0.95rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.offer .btn--gold { background: var(--gold); color: #fff; }
.offer__until { margin: 8px 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }
@media (min-width: 750px) { .offer { left: auto; right: 24px; bottom: 24px; max-width: 360px; } [dir='rtl'] .offer { right: auto; left: 24px; } }
body:has(.wa-fab) .offer { bottom: 84px; }
@media (min-width: 750px) { body:has(.wa-fab) .offer { bottom: 24px; right: 96px; } [dir="rtl"] body:has(.wa-fab) .offer, body:has(.wa-fab) [dir="rtl"] .offer { right: auto; left: 96px; } }


/* =====================================================================
   V4 (2026-10): what it fixes → the cases, studio photos, language toggle, cart, footer
   ===================================================================== */

/* ---- what it fixes: one real photo + three short lines ---- */
.fixes__grid { display: grid; gap: 26px; align-items: center; }
.fixes__photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #1d1916; aspect-ratio: 1 / 1; }
.fixes__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.fixes__photo figcaption { position: absolute; inset-inline: 14px; bottom: 14px; display: inline-flex; width: fit-content; padding: 8px 12px; border-radius: 99px; background: rgba(20, 17, 14, 0.72); color: #fff; font-size: 0.82rem; backdrop-filter: blur(6px); }
.fixes__kicker { margin: 0 0 8px; font: 600 0.78rem/1.2 var(--sans); color: var(--gold-ink); }
.fixes__title { margin: 0 0 22px; font: 600 clamp(1.7rem, 5vw, 2.5rem)/1.12 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.fixes__title em { display: block; font-style: normal; color: var(--gold-ink); }
.fixes__list { list-style: none; margin: 0; padding: 0; display: grid; }
.fixes__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.fixes__list li:last-child { border-bottom: 1px solid var(--line); }
.fixes__list svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--cream); color: var(--ink); stroke-width: 1.6; }
.fixes__list h3 { margin: 0; font: 600 1.06rem/1.3 var(--sans); }
.fixes__list p { margin: 3px 0 0; color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.fixes__cta { margin-top: 20px; display: inline-flex; }
@media (min-width: 750px) { .fixes__photo { aspect-ratio: 5 / 4; } }
@media (min-width: 990px) {
  .fixes__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .fixes__photo { aspect-ratio: 1 / 1; }
  .fixes__list h3 { font-size: 1.14rem; }
}
.reasons { display: none; }

/* ---- product cards: studio photos on their own dark backdrop, no pale tiles ---- */
.pcard__media { aspect-ratio: 1 / 1; border-radius: 16px; background: #1f1a16; }
.pcard__img { object-fit: cover; }
.pcard__img--hover { opacity: 0; transition: opacity 0.45s var(--ease); }
@media (hover: hover) {
  .pcard:hover .pcard__img--hover { opacity: 1; }
  .pcard:hover .pcard__title a { color: var(--gold-ink); }
}
.pcard__soldout { background: rgba(255, 255, 255, 0.92); color: var(--ink); }
#collection .grid3__note { color: var(--muted); }

/* ---- language: two options, the current one filled in ---- */
.lang-switch { display: none !important; }
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); }
.lang__opt { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 9px; border-radius: 99px; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.02em; color: var(--muted); text-decoration: none; transition: background 0.2s, color 0.2s; }
.lang__opt.is-on { background: var(--ink); color: #fff; }
a.lang__opt:hover { color: var(--ink); background: var(--cream); }
a.lang__opt.is-busy { opacity: 0.5; pointer-events: none; }
.lang--menu { display: flex; width: 100%; margin-bottom: 16px; padding: 4px; }
.lang--menu .lang__opt { flex: 1; height: 42px; font-size: 0.95rem; }
.site-header--minimal .lang { background: transparent; }
@media (max-width: 989px) { .site-header .lang:not(.lang--menu) .lang__opt { min-width: 30px; height: 26px; padding: 0 7px; font-size: 0.74rem; } }

/* ---- cart drawer ---- */
.cart-drawer { background: var(--paper); }
.cart-drawer .drawer__head { padding: 18px var(--gutter); border-bottom: 1px solid var(--line); background: var(--paper); }
.drawer__title { font: 600 1.25rem/1 var(--sans); }
.cart-drawer__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cart-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cart-lines { flex: none; overflow: visible; padding: 4px var(--gutter) 0; }
.cart-line { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px 0; align-items: start; }
.cart-line__img { display: block; width: 88px; height: 88px; border-radius: 14px; overflow: hidden; background: #1f1a16; }
.cart-line img, .cart-line__img img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; background: none; }
.cart-line__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cart-line__name { font: 600 1rem/1.25 var(--sans); color: var(--ink); text-decoration: none; }
.cart-line__price { font: 600 0.98rem/1.25 var(--sans); white-space: nowrap; text-align: end; }
.cart-line__variant { margin-top: 3px; font-size: 0.84rem; }
.cart-line__controls { justify-content: space-between; margin-top: 12px; }
.qty--sm { height: 36px; grid-template-columns: 34px 34px 34px; border-radius: 99px; background: var(--white); }
.qty--sm button:first-child { border-radius: 99px 0 0 99px; }
.qty--sm button:last-child { border-radius: 0 99px 99px 0; }
.qty--sm input { font-size: 0.92rem; }
.cart-line__remove { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-size: 0.8rem; color: var(--muted); }
.cart-line__remove svg { width: 16px; height: 16px; }
.cart-upsell { margin: 14px var(--gutter) 18px; padding: 14px; border: 0; border-radius: 14px; background: var(--cream); }
.cart-upsell__label { margin-bottom: 10px; font: 600 0.78rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cart-upsell__item { grid-template-columns: 60px minmax(0, 1fr) auto; }
.cart-upsell__item img { width: 60px; height: 60px; border-radius: 10px; background: #1f1a16; }
.cart-upsell__item strong { font: 600 0.95rem/1.25 var(--sans); }
.cart-upsell .btn { gap: 4px; background: var(--white); }
.cart-upsell .btn svg { width: 14px; height: 14px; }
.cart-foot { flex: none; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -26px rgba(23, 24, 26, 0.35); }
.cart-foot__row strong { font: 700 1.3rem/1 var(--sans); }
.cart-foot__ship { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; font-size: 0.84rem; color: var(--muted); }
.cart-foot__ship svg { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.cart-foot .btn--block { justify-content: center; gap: 8px; }
.cart-foot__trust { flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.cart-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 60%; padding: 40px var(--gutter); }
.cart-empty__icon svg { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--cream); color: var(--ink); }
.cart-empty h3 { margin: 6px 0 0; font: 600 1.3rem/1.2 var(--sans); }
.cart-empty p { margin: 0 0 14px; }
.ship-meter { margin: 12px var(--gutter) 0; border-radius: 12px; }

/* ---- footer: brand + contact, two link columns, payment, one legal line ---- */
.foot4 { background: #171513; color: rgba(244, 241, 235, 0.7); padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.foot4 .footer-trust, .foot4 .footer-grid { display: none; }
.foot4__top { display: grid; gap: 30px; padding: 44px 0 30px; }
.foot4__brand p { margin: 12px 0 0; max-width: 26em; font-size: 0.92rem; line-height: 1.55; }
.foot4__contact { display: grid; gap: 6px; margin-top: 20px; justify-items: start; }
.foot4__label { margin: 0 0 2px !important; font-weight: 600; color: #f4f1eb; }
.foot4__contact a { display: inline-flex; align-items: center; gap: 8px; color: #e8cdbb; text-decoration: none; font-size: 0.92rem; }
.foot4__contact a:hover { color: #fff; }
.foot4__contact svg { width: 18px; height: 18px; }
.foot4__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot4__nav h3 { margin: 0 0 12px; font: 600 0.82rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: #f4f1eb; }
.foot4__nav a { display: block; padding: 6px 0; color: rgba(244, 241, 235, 0.7); text-decoration: none; font-size: 0.92rem; }
.foot4__nav a:hover { color: #fff; }
.foot4__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.foot4__pay > span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: #f4f1eb; }
.foot4__pay > span svg { width: 16px; height: 16px; color: #e8cdbb; }
.foot4 .pay-marks { margin: 0; justify-content: flex-start; }
.foot4 .pay-marks li { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: rgba(244, 241, 235, 0.85); }
.foot4__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 16px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.82rem; }
.foot4__bottom p { margin: 0; }
.foot4__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot4__legal a { color: rgba(244, 241, 235, 0.7); text-decoration: none; }
.foot4__legal a:hover { color: #fff; }
.foot4__fine { margin: 6px 0 0; font-size: 0.76rem; line-height: 1.5; color: rgba(244, 241, 235, 0.5); }
.foot4__fine strong { color: rgba(244, 241, 235, 0.75); }
@media (min-width: 750px) { .foot4__top { grid-template-columns: 1.2fr 1fr; gap: 48px; padding-top: 56px; } }
@media (min-width: 990px) { .foot4__nav { gap: 48px; } }
.cart-upsell .btn { color: var(--ink); border: 1px solid var(--line); background: var(--white); }
.cart-upsell .btn:hover { border-color: var(--ink); }
.ways__slide > img { width: 100%; height: 100%; object-fit: cover; }

/* top bar with the code shown on the site */
.announce--offer { background: var(--gold-ink); }
.announce--offer .announce__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; padding: 7px 16px; }
.announce__msg { font-weight: 600; }
.announce__code { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px dashed rgba(255, 255, 255, 0.6); border-radius: 99px; background: transparent; color: #fff; font: 500 0.76rem/1.4 var(--sans); cursor: pointer; }
.announce__code b { letter-spacing: 0.06em; }
.announce__code:hover, .announce__code.is-applied { background: #fff; color: var(--gold-ink); border-style: solid; }
.announce--offer .announce__msg { opacity: 1; margin: 0; color: #fff; }


/* =====================================================================
   V5 (2026-10): the story in order — without/with → the film → the cases → reviews → last call
   ===================================================================== */
.kicker5 { margin: 0 0 8px; font: 600 0.8rem/1.2 var(--sans); color: var(--gold-ink); }
.fixes { display: none; }

/* ---- without a case / with Kivella ---- */
.why5__head h2 em { display: block; }
.why5__grid { display: grid; gap: 22px; align-items: center; }
.why5__photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #1d1916; aspect-ratio: 5 / 4; }
.why5__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.why5__photo figcaption { position: absolute; inset-inline-start: 14px; bottom: 14px; padding: 8px 12px; border-radius: 99px; background: rgba(20, 17, 14, 0.74); color: #fff; font-size: 0.82rem; backdrop-filter: blur(6px); }
.why5__cols { display: none; }
.why5__row { display: grid; gap: 0; margin-bottom: 10px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.why5__row p { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 13px 16px; line-height: 1.45; }
.why5__bad { background: #f6f2ec; color: #7d776d; font-size: 0.9rem; }
.why5__good { color: var(--ink); font-weight: 500; font-size: 0.98rem; }
.why5__x, .why5__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.why5__x { background: #efe3dc; color: #a2533a; }
.why5__x svg { width: 14px; height: 14px; stroke-width: 2.4; }
.why5__ic { background: var(--ink); color: #fff; }
.why5__ic svg { width: 16px; height: 16px; stroke-width: 1.8; }
.why5__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.why5__cta span { font-size: 0.86rem; color: var(--muted); }
@media (min-width: 750px) {
  .why5__cols { display: grid; grid-template-columns: 1fr 1fr; padding: 0 4px 8px; font: 600 0.82rem/1 var(--sans); }
  .why5__cols span:first-child { color: #a2533a; }
  .why5__cols span:last-child { color: var(--ink); }
  .why5__row { grid-template-columns: 1fr 1fr; }
  .why5__row p { padding: 16px 18px; }
}
@media (min-width: 990px) {
  .why5__grid { grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
  .why5__photo { aspect-ratio: 4 / 5; }
}

/* ---- how it works: the film (pure CSS, one 12 s loop, nothing to press) ---- */
.how5 { display: grid; gap: 28px; align-items: center; }
@media (min-width: 990px) { .how5 { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.film { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 50% 28%, #3b3027 0%, #1d1815 58%, #141110 100%); --T: 12s; }
.film__stage { position: relative; width: 200px; height: 300px; margin-top: -40px; }
.film__case { position: absolute; left: 15px; top: 30px; width: 170px; height: 250px; }
.film__case > span { position: absolute; display: block; }
.film__back { inset: 0; border-radius: 16px; background: linear-gradient(180deg, #2c241d, #15110e); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05); }
.film__pack { left: 14px; bottom: 10px; width: 142px; height: 226px; border-radius: 5px; background: linear-gradient(90deg, #e6e0d6, #fbfaf7 38%, #ece6dc); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); animation: film-pack var(--T) infinite; }
.film__pack::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #d8d3cb, #b8b1a7); }
.film__tips { position: absolute; left: 10px; right: 10px; top: -13px; height: 14px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #d68a3c 0 15px, rgba(0, 0, 0, 0) 15px 19px); }
.film__warn { position: absolute; left: 12px; right: 12px; top: 64px; height: 118px; border-radius: 4px; background: radial-gradient(70% 60% at 40% 40%, #6b5b55, #2d2624); }
.film__warn b { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 16px; border-radius: 2px; background: rgba(255, 255, 255, 0.88); }
.film__cigs { left: 16px; right: 16px; bottom: 10px; height: 206px; display: flex !important; justify-content: space-between; }
.film__cigs i { display: block; width: 15px; height: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #d68a3c 0 26%, #c47a2f 26% 27%, #f8f5ef 27% 100%); box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.06); opacity: 0; animation: film-cig var(--T) infinite; animation-delay: calc(var(--i) * 0.11s); }
.film__front, .film__lid {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0) 1px 3px), linear-gradient(100deg, #a8782a 0%, #e4bb63 28%, #c28f3a 52%, #efcd7e 74%, #a97629 100%);
}
.film__front { left: 0; right: 0; bottom: 0; height: 172px; border-radius: 3px 3px 16px 16px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 -10px 18px rgba(0, 0, 0, 0.22); }
.film__plate { position: absolute; left: 50%; top: 18px; width: 58px; height: 12px; margin-left: -29px; border-radius: 3px; background: linear-gradient(180deg, #f1f1f1, #a7a7a7); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.film__lid { left: 0; right: 0; top: 0; height: 78px; border-radius: 16px 16px 3px 3px; transform-origin: 50% 0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 8px 14px rgba(255, 255, 255, 0.18); animation: film-lid var(--T) infinite; }
.film__shadow { position: absolute; left: 20px; right: 20px; bottom: 6px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.film__steps { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; padding: 0 14px; }
.film__step { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.86rem; font-weight: 500; white-space: nowrap; }
[dir='rtl'] .film__step { padding: 8px 10px 8px 14px; }
.film__step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 0.75rem; }
.film__step--1 { animation: film-cap1 var(--T) infinite; }
.film__step--2 { animation: film-cap2 var(--T) infinite; }
@media (max-width: 480px) { .film__steps { flex-direction: column; align-items: center; gap: 6px; } .film__stage { margin-top: -70px; } }

@keyframes film-lid {
  0%, 4% { transform: perspective(520px) rotateX(0deg); }
  10%, 34% { transform: perspective(520px) rotateX(118deg); }
  40%, 52% { transform: perspective(520px) rotateX(0deg); }
  58%, 84% { transform: perspective(520px) rotateX(118deg); }
  90%, 100% { transform: perspective(520px) rotateX(0deg); }
}
@keyframes film-pack {
  0%, 10% { transform: translateY(-340px); opacity: 0; }
  12% { transform: translateY(-340px); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  26% { transform: translateY(0); opacity: 1; }
  58% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  65% { transform: translateY(-340px); opacity: 1; }
  66%, 100% { transform: translateY(-340px); opacity: 0; }
}
@keyframes film-cig {
  0%, 64% { transform: translateY(-340px); opacity: 0; }
  65% { transform: translateY(-340px); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  71% { transform: translateY(0); }
  73% { transform: translateY(-7px); }
  75%, 95% { transform: translateY(0); opacity: 1; }
  96%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes film-cap1 { 0%, 46% { opacity: 1; background: rgba(255, 255, 255, 0.18); } 50%, 96% { opacity: 0.45; background: rgba(255, 255, 255, 0.06); } 100% { opacity: 1; background: rgba(255, 255, 255, 0.18); } }
@keyframes film-cap2 { 0%, 46% { opacity: 0.45; background: rgba(255, 255, 255, 0.06); } 50%, 96% { opacity: 1; background: rgba(255, 255, 255, 0.18); } 100% { opacity: 0.45; background: rgba(255, 255, 255, 0.06); } }

/* ---- reviews: an endless, slow strip; pauses under the mouse ---- */
.reviews5 { overflow: hidden; }
.marquee { overflow: hidden; padding: 4px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
[dir='rtl'] .marquee__track { animation-name: marquee-rtl; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; gap: 16px; padding-inline-end: 16px; }
.marquee .review { flex: none; width: min(320px, 80vw); margin: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.marquee .review blockquote { margin: 10px 0 16px; font: 400 0.98rem/1.6 var(--sans); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
.review__stars { display: flex; gap: 2px; color: var(--gold); }
.review__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.review__stars-off { display: flex; gap: 2px; color: #ddd6cb; }
.review figcaption strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.review__verified { display: inline-flex; align-items: center; gap: 3px; font: 500 0.72rem/1 var(--sans); color: #2e7d4f; }
.review__verified svg { width: 13px; height: 13px; }

/* ---- last call ---- */
.final5 { background: var(--ink); color: #f4f1eb; }
.final5__inner { display: grid; gap: 20px; align-items: center; }
.final5 h2 { margin: 0; font: 600 clamp(1.6rem, 4.6vw, 2.3rem)/1.15 var(--sans); text-wrap: balance; }
.final5 p { margin: 10px 0 0; max-width: 36em; color: rgba(244, 241, 235, 0.75); }
@media (min-width: 750px) { .final5__inner { grid-template-columns: 1fr auto; gap: 40px; } }

/* ---- write a review ---- */
.review-form__items { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.review-form__items li { display: flex; align-items: center; gap: 12px; }
.review-form__items img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #1f1a16; }
.review-form__items span { display: flex; flex-direction: column; }
.review-form__items small { color: var(--muted); }
.stars-input { border: 0; margin: 0 0 14px; padding: 0; }
.stars-input legend { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.stars-input__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.stars-input__row input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input__row label { cursor: pointer; color: #ddd6cb; transition: color 0.15s, transform 0.15s; }
.stars-input__row label svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.stars-input__row input:checked ~ label, .stars-input__row label:hover, .stars-input__row label:hover ~ label { color: var(--gold); }
.stars-input__row input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.confirm__review { margin: 18px 0 0; }
.btn--ghost-dark svg { width: 16px; height: 16px; }
/* the film: case centred with room above for the open lid, captions underneath (never on top of the case) */
.film { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 70px 16px 20px; }
.film__stage { margin-top: 0; flex: none; }
.film__steps { position: static; padding: 0; }
@media (max-width: 749px) { .film { aspect-ratio: auto; min-height: 470px; } }
@media (max-width: 480px) { .film__stage { margin-top: 0; } }
@media (min-width: 750px) { .film__stage { zoom: 1.2; } }
@media (min-width: 990px) { .film__stage { zoom: 1.35; } .film { padding-top: 64px; } }


/* =====================================================================
   CHECKOUT + CART v5: numbered steps in cards, a clean summary, nothing salesy
   ===================================================================== */
.co5 { padding: 18px 0 72px; }
.co-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 0.82rem; color: var(--muted); }
.co-steps li { display: inline-flex; align-items: center; gap: 8px; }
.co-steps li + li::before { content: ''; width: 22px; height: 1px; background: var(--line); }
.co-steps a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; }
.co-steps a:hover { color: var(--ink); }
.co-steps svg { width: 14px; height: 14px; color: #2e7d4f; }
.co-steps .is-on { color: var(--ink); font-weight: 600; }
.co-title { margin: 0 0 16px; font: 700 clamp(1.6rem, 4.6vw, 2rem)/1.15 var(--sans); }
.co5 .back-link { display: none; }

.co-card { margin: 0 0 14px; padding: 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.co-card__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 1.08rem/1.2 var(--sans); }
.co-num { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; font: 700 0.8rem/1 var(--sans); }
.co-secure { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; font: 500 0.78rem/1 var(--sans); color: #2e7d4f; }
.co-secure svg { width: 14px; height: 14px; }
.co-card .field:last-child { margin-bottom: 0; }
.co-card .field input { background: var(--paper); }
.co-card .field input:focus { background: var(--white); }
.co-card .ship-options { margin-bottom: 10px; }
.co-card .field-note { margin: 0; }
.co5 .pay-box { margin-top: 0; padding: 20px 18px; border-radius: 18px; }
.co5 .pay-box h2 { font: 600 1.08rem/1.2 var(--sans); }
.co-checks { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.co-checks .check { margin: 6px 0; font-size: 0.88rem; }
.co-pay { gap: 8px; }
.co-pay svg { width: 18px; height: 18px; }
.co-after { justify-content: center; text-align: center; margin: 10px 0 0 !important; }
.co5 .pay-marks--checkout { margin-top: 14px; }
.co5 .notice { margin-bottom: 14px; }
@media (min-width: 750px) { .co-card, .co5 .pay-box { padding: 24px 26px; } }

/* the summary beside the form */
.co5 .checkout__aside { padding: 0; background: none; border-radius: 0; }
.co-aside { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.co-aside__title { margin: 0 0 8px; font: 600 1.05rem/1.2 var(--sans); }
.co5 .summary__line { grid-template-columns: 60px minmax(0, 1fr) auto; }
.co5 .summary__img img { width: 60px; height: 60px; border: 0; background: #1f1a16; }
.co5 .summary__img em { background: var(--ink); color: #fff; }
[dir='rtl'] .co5 .summary__img em { right: auto; left: -7px; }
.co5 .summary__name strong { font-family: var(--sans); }
.co5 .summary__total dd { font: 700 1.35rem/1 var(--sans); }
.co-assure { list-style: none; margin: 14px 0 0; padding: 4px 18px; border-radius: 18px; background: var(--cream); }
.co-assure li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 0.86rem; }
.co-assure li + li { border-top: 1px solid var(--line); }
.co-assure svg { width: 20px; height: 20px; flex: none; color: var(--gold-ink); margin-top: 1px; }
.co-assure span { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.co-assure strong { color: var(--ink); }
.co-assure a { color: var(--gold-ink); }
.co5 .summary-toggle { border-radius: 14px; background: var(--white); }
.co5 .summary-toggle[open] > div { padding: 0 16px 14px; }
@media (min-width: 990px) {
  .co5 .checkout__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; }
  .co5 .checkout__aside { top: calc(var(--header-h, 72px) + 20px); }
  .co5 .summary-toggle { display: none; }
}

/* cart drawer: a tidy header line and the footer as a receipt */
.cart-foot__marks { margin-top: 12px; }
.cart-foot__marks .pay-marks { margin: 0; gap: 4px; justify-content: center; }
.cart-foot__marks .pay-marks li { font-size: 0.66rem; padding: 3px 7px; }
.cart-foot__note { display: block; margin: 0 0 12px; font-size: 0.8rem; color: var(--muted); }
.cart-continue { display: block; margin: 10px auto 0; border: 0; background: none; font: 500 0.86rem/1 var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-continue:hover { color: var(--ink); }
.cart-count-note { font: 500 0.86rem/1 var(--sans); color: var(--muted); }


/* =====================================================================
   V6 (2026-10): the case as the hero of "why", real photos in "how it works", a light ending
   ===================================================================== */
.why5, .film { display: none !important; }

/* ---- why: the gold case on a warm stage, three numbered points ---- */
.why6__stage { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: 28px;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #fffaf2 0%, #f3e8da 48%, #e7d6c1 100%); overflow: hidden; }
.why6__visual { position: relative; margin: 0 auto; width: min(78%, 360px); aspect-ratio: 4 / 5; order: -1; }
.why6__glow { position: absolute; left: 8%; right: 8%; top: 10%; bottom: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 200, 0.95), rgba(255, 236, 200, 0)); }
.why6__case { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(84, 52, 20, 0.28)) drop-shadow(0 6px 8px rgba(84, 52, 20, 0.18)); animation: why6-float 6s ease-in-out infinite alternate; }
.why6__floor { position: absolute; left: 22%; right: 22%; bottom: 3%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(84, 52, 20, 0.28), rgba(84, 52, 20, 0)); animation: why6-shadow 6s ease-in-out infinite alternate; }
.why6__dot { position: absolute; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 0.8rem/1 var(--sans); box-shadow: 0 0 0 0 rgba(23, 24, 26, 0.35); animation: why6-pulse 2.6s ease-out infinite; }
.why6__dot--1 { left: 42%; top: 66%; animation-delay: 0s; }
.why6__dot--2 { left: 60%; top: 19%; animation-delay: 0.6s; }
.why6__dot--3 { left: 36%; top: 41%; animation-delay: 1.2s; }
.why6__card { position: relative; z-index: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 14px 30px -24px rgba(84, 52, 20, 0.45); backdrop-filter: blur(6px); }
.why6__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 0.8rem/1 var(--sans); }
.why6__card h3 { margin: 3px 0 4px; font: 600 1.04rem/1.3 var(--sans); }
.why6__card p { margin: 0; color: #5f5a52; font-size: 0.92rem; line-height: 1.5; }
.why6__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f3e8da; color: var(--gold-ink); }
.why6__ic svg { width: 18px; height: 18px; }
.why6__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin: 24px 0 0; }
.why6__cta span { font-size: 0.86rem; color: var(--muted); }
@media (min-width: 990px) {
  .why6__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr); grid-template-areas: 'one vis two' 'three vis two'; align-items: center; gap: 22px 28px; padding: 44px 40px; }
  .why6__visual { grid-area: vis; order: 0; width: 100%; max-width: 380px; }
  .why6__card--1 { grid-area: one; align-self: end; }
  .why6__card--3 { grid-area: three; align-self: start; }
  .why6__card--2 { grid-area: two; }
  .why6__card { padding: 20px; }
  .why6__card h3 { font-size: 1.12rem; }
}
@keyframes why6-float { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-10px) rotate(1deg); } }
@keyframes why6-shadow { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0.86); opacity: 0.7; } }
@keyframes why6-pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 24, 26, 0.35); } 70% { box-shadow: 0 0 0 14px rgba(23, 24, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 24, 26, 0); } }

/* ---- how it works: two real photos, a slow crossfade with a story bar (12 s, nothing to press) ---- */
.show { position: relative; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #1d1916; isolation: isolate; --T: 12s; }
.show::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 17, 14, 0.35) 0%, rgba(20, 17, 14, 0) 22%, rgba(20, 17, 14, 0) 62%, rgba(20, 17, 14, 0.6) 100%); pointer-events: none; }
.show__scene { position: absolute; inset: 0; margin: 0; }
.show__scene img { width: 100%; height: 100%; object-fit: cover; }
.show__scene--1 { animation: show-a var(--T) infinite; }
.show__scene--2 { animation: show-b var(--T) infinite; }
.show__scene--1 img { animation: show-zoom-a var(--T) infinite linear; }
.show__scene--2 img { animation: show-zoom-b var(--T) infinite linear; }
.show__bar { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; gap: 6px; }
.show__bar span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.show__bar i { display: block; height: 100%; background: #fff; transform-origin: left center; }
[dir='rtl'] .show__bar i { transform-origin: right center; }
.show__bar span:first-child i { animation: show-bar-a var(--T) infinite linear; }
.show__bar span:last-child i { animation: show-bar-b var(--T) infinite linear; }
.show__cap { position: absolute; z-index: 2; inset-inline-start: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 10px 10px; border-radius: 99px; background: rgba(20, 17, 14, 0.6); color: #fff; font: 600 1rem/1.2 var(--sans); backdrop-filter: blur(8px); opacity: 0; }
[dir='rtl'] .show__cap { padding: 10px 10px 10px 16px; }
.show__cap b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 0.8rem; }
.show__cap--1 { animation: show-cap-a var(--T) infinite; }
.show__cap--2 { animation: show-cap-b var(--T) infinite; }
@keyframes show-a { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes show-b { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes show-zoom-a { 0% { transform: scale(1); } 50% { transform: scale(1.07); } 52%, 100% { transform: scale(1); } }
@keyframes show-zoom-b { 0%, 46% { transform: scale(1); } 100% { transform: scale(1.07); } }
@keyframes show-bar-a { 0% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes show-bar-b { 0%, 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes show-cap-a { 0% { opacity: 0; transform: translateY(10px); } 4%, 44% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes show-cap-b { 0%, 50% { opacity: 0; transform: translateY(10px); } 54%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(10px); } }

/* ---- reviews never stop ---- */
.marquee:hover .marquee__track, .marquee__track { animation-play-state: running !important; }

/* ---- last call: a light card with a photo ---- */
.final5 { display: none; }
.final6__card { display: grid; overflow: hidden; border-radius: 24px; background: var(--cream); }
.final6__photo { margin: 0; aspect-ratio: 16 / 10; }
.final6__photo img { width: 100%; height: 100%; object-fit: cover; }
.final6__text { padding: 26px 22px 30px; }
.final6__text h2 { margin: 0; font: 600 clamp(1.6rem, 4.4vw, 2.2rem)/1.15 var(--sans); text-wrap: balance; }
.final6__text p { margin: 10px 0 22px; color: var(--muted); max-width: 34em; line-height: 1.55; }
@media (min-width: 750px) {
  .final6__card { grid-template-columns: 1fr 1fr; align-items: center; }
  .final6__photo { aspect-ratio: auto; height: 100%; min-height: 360px; }
  .final6__text { padding: 40px 44px; }
}

/* ---- footer: light, the newsletter in it, tidy single-line legal links ---- */
.site-footer.foot6 { background: #ebe5db; color: var(--ink); padding: 48px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.page-home .site-footer.foot6, .page-product .site-footer.foot6 { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.foot6__top { display: grid; gap: 30px; padding-bottom: 30px; }
.foot6 .logo span { color: var(--ink); }
.foot6__brand p { margin: 12px 0 0; color: var(--muted); max-width: 26em; line-height: 1.55; font-size: 0.94rem; }
.foot6__contact { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot6__contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(23, 24, 26, 0.2); padding-bottom: 1px; }
.foot6__contact a:hover { border-color: var(--ink); }
.foot6__contact svg { width: 16px; height: 16px; }
.foot6__news { padding: 22px; border-radius: 20px; background: var(--white); }
.foot6__news h3 { margin: 0; font: 600 1.15rem/1.25 var(--sans); }
.foot6__news > p { margin: 6px 0 14px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.foot6__form { display: flex; gap: 8px; }
.foot6__form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; color: var(--ink); }
.foot6__form input:focus { outline: none; border-color: var(--ink); background: var(--white); }
.foot6__form .btn { flex: none; min-height: 48px; }
.foot6__msg { margin: 10px 0 0; font-size: 0.78rem; color: var(--muted); }
.foot6__links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 18px 0; border-top: 1px solid rgba(23, 24, 26, 0.1); border-bottom: 1px solid rgba(23, 24, 26, 0.1); }
.foot6__links a { padding: 7px 0; color: var(--ink); text-decoration: none; font-size: 0.94rem; }
.foot6__links a:hover { color: var(--gold-ink); }
.foot6__bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 6px; text-align: center; }
.foot6__copy { margin: 0; font-size: 0.82rem; color: var(--muted); }
.foot6__legal { display: flex; justify-content: center; font-size: 0.82rem; white-space: nowrap; }
.foot6__legal a { color: var(--muted); text-decoration: none; }
.foot6__legal a:hover { color: var(--ink); }
.foot6__legal a + a::before { content: '·'; margin: 0 10px; color: rgba(23, 24, 26, 0.35); }
.foot6 .pay-marks { margin: 0; gap: 5px; justify-content: center; }
.foot6 .pay-marks li { background: var(--white); border-color: var(--line); color: #4a463f; font-size: 0.7rem; }
.foot6__fine { margin: 10px 0 0; font-size: 0.74rem; line-height: 1.5; color: #8a857c; text-align: center; }
@media (min-width: 750px) {
  .foot6__top { grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
  .foot6__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
  .foot6__bottom { flex-direction: row; justify-content: space-between; text-align: start; }
  .foot6__fine { text-align: start; }
}
@media (min-width: 990px) { .foot6__news { padding: 26px 28px; } }
.foot6__top { grid-template-columns: minmax(0, 1fr); }
.foot6__top > * { min-width: 0; }
@media (min-width: 750px) { .foot6__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }


/* =====================================================================
   V7 (2026-10): hero side by side on a computer, both drawings at once, a coloured newsletter strip
   ===================================================================== */

/* ---- hero: full-bleed photo on the phone; on a computer the photo sits at its own size beside the words ---- */
.hero3__inner { position: static; }
@media (min-width: 990px) {
  .hero3 { height: auto; min-height: 0; display: block; padding: 36px 0 60px; background: var(--paper); color: var(--ink); }
  .hero3::after { display: none; }
  .hero3__inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
  .hero3__media { position: relative; inset: auto; z-index: 0; order: 2; aspect-ratio: 1 / 1; max-height: 600px; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 70px -46px rgba(30, 22, 14, 0.55); }
  .hero3__media img { object-position: 50% 50%; }
  .hero3__copy { order: 1; padding: 0; }
  .hero3__eyebrow { color: var(--gold-ink); }
  .hero3__title { color: var(--ink); font-size: clamp(2.6rem, 4.2vw, 3.7rem); }
  .hero3__title em { color: var(--gold-ink); }
  .hero3__lead { color: #4f4a43; }
  .hero3__note { color: var(--muted); }
  .hero3 .btn--light { --btn-bg: var(--ink); --btn-fg: #fff; background: var(--ink); color: #fff; }
  .hero3 .btn--light:hover { background: #2b2c2f; }
}
@media (min-width: 1400px) { .hero3 { height: auto; } }

/* ---- how it works: both drawings at once, they start when you reach them ---- */
.show { display: none !important; }
.duo7 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo7__tile { margin: 0; }
.duo7__art { position: relative; inset: auto; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; }
.duo7__art svg { width: 90%; height: 90%; }
.duo7 figcaption { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.duo7 figcaption b { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; font: 700 0.78rem/1 var(--sans); }
.duo7 figcaption span { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; color: var(--muted); }
.duo7 figcaption strong { font-size: 0.98rem; color: var(--ink); }
[dir='rtl'] .duo7 .la-count { display: none; }
@media (min-width: 750px) { .duo7 { gap: 18px; } }
.duo7.is-playing .pack-art .pa-pack { animation: pa-slide 5.2s var(--ease) infinite; }
.duo7.is-playing .pack-art .pa-lid { animation: pa-lid 5.2s var(--ease) infinite; }
.duo7.is-playing .pack-art .pa-case rect:first-child { animation: pa-fill 5.2s var(--ease) infinite; }
.duo7.is-playing .pack-art .pa-arrow { animation: pa-arrow 5.2s ease-in-out infinite; }
.duo7.is-playing .loose-art .la-cig { animation: la-drop 6s var(--ease) infinite; animation-delay: calc(var(--d) * 0.22s); }
.duo7.is-playing .loose-art .la-lid { animation: la-lid 6s var(--ease) infinite; }

/* ---- newsletter: its own coloured strip, like most shops ---- */
.news7 { background: linear-gradient(120deg, #8f4627 0%, #a9593a 55%, #b8693f 100%); color: #fff; }
.news7__inner { display: grid; gap: 18px; padding-top: 40px; padding-bottom: 40px; }
.news7__text h2 { margin: 0; font: 600 clamp(1.4rem, 4vw, 1.8rem)/1.2 var(--sans); }
.news7__text p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.84); max-width: 34em; line-height: 1.5; }
.news7__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.news7__form input { min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
.news7__form input:focus { outline: 3px solid rgba(255, 255, 255, 0.5); outline-offset: 1px; }
.news7__form .btn { min-height: 52px; padding: 0 22px; border-radius: 12px; background: var(--ink); color: #fff; border: 0; }
.news7__form .btn:hover { background: #000; }
.news7__msg { grid-column: 1 / -1; margin: 2px 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 480px) { .news7__form { grid-template-columns: 1fr; } .news7__form .btn { width: 100%; } }
@media (min-width: 990px) { .news7__inner { grid-template-columns: 1fr minmax(0, 480px); align-items: center; gap: 48px; padding-top: 48px; padding-bottom: 48px; } }

/* ---- footer: light, brand + two short columns, one tidy bottom line ---- */
.site-footer.foot7 { background: #ebe5db; color: var(--ink); padding: 44px 0 calc(22px + env(safe-area-inset-bottom)); border: 0; }
.page-home .site-footer.foot7, .page-product .site-footer.foot7 { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.foot7__top { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 28px; }
.foot7__brand { grid-column: 1 / -1; }
.foot7 .logo span { color: var(--ink); }
.foot7__brand p { margin: 12px 0 0; color: var(--muted); max-width: 26em; line-height: 1.55; font-size: 0.94rem; }
.foot7__contact { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot7__contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(23, 24, 26, 0.2); }
.foot7__contact svg { width: 16px; height: 16px; }
.foot7 h3 { margin: 0 0 10px; font: 600 0.9rem/1.2 var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; }
.foot7__top > div:not(.foot7__brand) a { display: block; padding: 6px 0; color: #4f4a43; text-decoration: none; font-size: 0.93rem; }
.foot7__top > div:not(.foot7__brand) a:hover { color: var(--gold-ink); }
.foot7__bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 6px; border-top: 1px solid rgba(23, 24, 26, 0.1); text-align: center; }
.foot7__copy { margin: 0; font-size: 0.82rem; color: var(--muted); }
.foot7__legal { display: flex; justify-content: center; font-size: 0.82rem; white-space: nowrap; }
.foot7__legal a { color: var(--muted); text-decoration: none; }
.foot7__legal a:hover { color: var(--ink); }
.foot7__legal a + a::before { content: '·'; margin: 0 10px; color: rgba(23, 24, 26, 0.35); }
.foot7 .pay-marks { margin: 0; gap: 5px; justify-content: center; }
.foot7 .pay-marks li { background: var(--white); border-color: var(--line); color: #4a463f; font-size: 0.7rem; }
.foot7__fine { margin: 10px 0 0; font-size: 0.74rem; line-height: 1.5; color: #8a857c; text-align: center; }
@media (min-width: 750px) {
  .foot7__top { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
  .foot7__brand { grid-column: auto; }
  .foot7__bottom { flex-direction: row; justify-content: space-between; text-align: start; }
  .foot7__fine { text-align: start; }
}


/* =====================================================================
   V8 (2026-10): one journey — promise → the pains crossed out → the cases → how it works → proof → last call
   ===================================================================== */
.why6 { display: none !important; }

/* ---- one gentle fade, the same everywhere (headings and cards only) ---- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: opacity 0.4s ease; } }

/* ---- hero: the three reassurances under the button ---- */
.hero3__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 0; padding: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.86); }
.hero3__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero3__trust svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 749px) { .hero3 { height: clamp(560px, 128vw, 680px); } .hero3__trust { gap: 4px 12px; font-size: 0.78rem; } }
@media (min-width: 990px) {
  .hero3__trust { color: #4f4a43; font-size: 0.86rem; gap: 8px 22px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
  .hero3__trust svg { color: var(--gold-ink); }
}

/* ---- header button (computer, after the hero) ---- */
.header-cta { display: none; }
@media (min-width: 990px) {
  .past-hero .header-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 99px; background: var(--gold); color: #fff; font: 600 0.84rem/1 var(--sans); text-decoration: none; white-space: nowrap; animation: cta-in 0.35s ease; }
  .past-hero .header-cta:hover { background: var(--gold-ink); }
}

/* ---- why: the pains, crossed out one by one, then the answer ---- */
.why8__grid { display: grid; gap: 26px; align-items: center; }
.why8__photo { margin: 0; order: -1; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: #1d1916; }
.why8__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.why8__title { margin: 0; font: 600 clamp(1.7rem, 4.8vw, 2.5rem)/1.15 var(--sans); letter-spacing: -0.01em; text-wrap: balance; }
.why8__list { list-style: none; margin: 22px 0 18px; padding: 0; display: grid; gap: 16px; }
.why8__list li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.why8__pain { position: relative; font: 600 clamp(1.2rem, 3.6vw, 1.55rem)/1.3 var(--sans); color: var(--ink); transition: color 0.5s ease; transition-delay: calc(var(--i) * 0.55s + 0.5s); }
.why8__pain::after { content: ''; position: absolute; left: -4px; right: -4px; top: 54%; height: 3px; border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.6, 0, 0.2, 1); transition-delay: calc(var(--i) * 0.55s + 0.2s); }
[dir='rtl'] .why8__pain::after { transform-origin: right center; }
.why8__fix { display: inline-flex; align-items: center; gap: 8px; font-size: 0.98rem; font-weight: 500; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: calc(var(--i) * 0.55s + 0.65s); }
.why8__fix svg { width: 18px; height: 18px; flex: none; color: #2e7d4f; stroke-width: 2.4; }
.why8__list.is-playing .why8__pain { color: #a59f95; }
.why8__list.is-playing .why8__pain::after { transform: scaleX(1); }
.why8__list.is-playing .why8__fix { opacity: 1; transform: none; }
.why8__close { margin: 0 0 20px; font: 600 1.15rem/1.4 var(--sans); }
@media (min-width: 990px) {
  .why8__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .why8__photo { order: 0; aspect-ratio: 1 / 1; }
  .why8__list { gap: 20px; margin: 28px 0 22px; }
}

/* ---- the cases: tall cards on a computer, wide cards on a phone ---- */
.cases8__head { align-items: end; }
.cases8__head .kicker5 { margin-bottom: 6px; }
.cards8 { display: grid; gap: 12px; }
.pcard8 { position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--white); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.pcard8__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #1f1a16; }
.pcard8__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.pcard8__img--hover { opacity: 0; }
.pcard8__badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font: 600 0.7rem/1.3 var(--sans); }
.pcard8__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px; min-width: 0; }
.pcard8__row { display: flex; flex-direction: column; gap: 2px; }
.pcard8__title { margin: 0; font: 600 1.05rem/1.25 var(--sans); }
.pcard8__title a { color: var(--ink); text-decoration: none; }
.pcard8__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcard8 .price { margin: 0; }
.pcard8 .price__now { font: 600 1rem/1.2 var(--sans); }
.pcard8__pitch { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.pcard8__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.pcard8__foot .pcard__swatches { margin: 0; }
.pcard8__count { display: none; font-size: 0.76rem; color: var(--muted); }
.pcard8__go { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 0.84rem/1 var(--sans); color: var(--gold-ink); }
.pcard8__go svg { width: 14px; height: 14px; }
[dir='rtl'] .pcard8__go svg { transform: scaleX(-1); }
@media (min-width: 750px) {
  .cards8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pcard8 { grid-template-columns: 1fr; }
  .pcard8__media { aspect-ratio: 4 / 5; }
  .pcard8__body { padding: 16px 18px 18px; gap: 8px; }
  .pcard8__row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; }
  .pcard8__count { display: inline; }
}
@media (min-width: 990px) { .cards8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (hover: hover) and (min-width: 750px) {
  .pcard8:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(30, 22, 14, 0.45); }
  .pcard8:hover .pcard8__img--hover { opacity: 1; }
}
.cards8__trust { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.cards8__trust li { display: flex; align-items: flex-start; gap: 10px; }
.cards8__trust svg { width: 22px; height: 22px; flex: none; color: var(--gold-ink); }
.cards8__trust span { display: flex; flex-direction: column; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.cards8__trust strong { font-size: 0.88rem; color: var(--ink); }
@media (min-width: 990px) { .cards8__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 34px; padding-top: 24px; } }

/* ---- how it works (now after the cases) ---- */
.how5__lead { margin: -10px 0 22px; color: var(--muted); max-width: 30em; line-height: 1.55; }

/* ---- newsletter: a soft tint of the site's accent instead of brown ---- */
.news7 { background: #f1e5da; color: var(--ink); border-top: 1px solid #e8d8ca; }
.news7__text h2 { color: var(--ink); }
.news7__text p { color: #6a5f55; }
.news7__form input { border: 1px solid #e3d3c4; }
.news7__form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.news7__msg { color: #7d7166; }
@media (prefers-reduced-motion: reduce) { .why8__pain::after { transition-duration: 0.55s !important; } }

/* top bar: one line on a phone (the delivery promise), both on a computer */
.announce__line .announce__part { opacity: 1; margin: 0; }
.announce__line .announce__sep { opacity: 0.5; margin: 0 8px; }
@media (max-width: 749px) { .announce__part--1, .announce__sep { display: none; } }
/* three related cases under a product */
@media (min-width: 990px) { .cards8--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- the dark strip between the hero and the story: promises sliding by, nothing to press ---- */
.band9 { background: var(--ink); color: #f4f1eb; overflow: hidden; border-block: 1px solid #000; }
.band9__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
[dir='rtl'] .band9__track { animation-name: marquee-rtl; }
.band9__set { display: flex; align-items: center; }
.band9__set span { display: inline-flex; align-items: center; gap: 22px; padding: 17px 0 17px 22px; font: 500 0.92rem/1 var(--sans); white-space: nowrap; letter-spacing: 0.01em; }
[dir='rtl'] .band9__set span { padding: 17px 22px 17px 0; }
.band9__set span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); flex: none; }
@media (min-width: 990px) {
  .band9__set span { font-size: 1rem; padding-top: 20px; padding-bottom: 20px; }
  .hero3 { padding-bottom: 48px; }
}


/* =====================================================================
   BLACK & GOLD (2026-10): the strip under the hero, the header button, the newsletter and the footer
   ===================================================================== */
:root { --bg-gold: #c9a262; --bg-gold-hi: #e3c48c; --bg-gold-lo: #9b7838; --bg-black: #121110; }

/* ---- the strip: black with gold, sliding endlessly to the left ---- */
.band9 { position: relative; background: linear-gradient(180deg, #171513 0%, #0f0e0d 100%); color: #efe6d6; border: 0; overflow: hidden; }
.band9::before, .band9::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 98, 0) 0%, rgba(201, 162, 98, 0.75) 50%, rgba(201, 162, 98, 0) 100%); }
.band9::before { top: 0; }
.band9::after { bottom: 0; }
.band9 { -webkit-mask-image: none; }
.band9__track { direction: ltr; animation: marquee 55s linear infinite !important; }
[dir='rtl'] .band9__track { animation-name: marquee !important; }
.band9__set { direction: ltr; }
.band9__set span { direction: rtl; unicode-bidi: isolate; gap: 0; padding: 18px 0 !important; font: 500 0.95rem/1 var(--sans); color: #efe6d6; letter-spacing: 0.01em; }
[dir='ltr'] .band9__set span { direction: ltr; }
.band9__set span::before { display: none; }
.band9__set span::after { content: '✦'; display: inline-block; margin: 0 26px; font-size: 0.7rem; color: var(--bg-gold); transform: translateY(-1px); }
.band9__set span:nth-child(even) { color: var(--bg-gold-hi); }
@media (min-width: 990px) { .band9__set span { font-size: 1.02rem; padding: 21px 0 !important; } .band9__set span::after { margin: 0 34px; } }

/* ---- header button: black with a gold edge and gold words ---- */
@media (min-width: 990px) {
  .past-hero .header-cta { background: var(--bg-black); color: var(--bg-gold-hi); border: 1px solid rgba(201, 162, 98, 0.65); box-shadow: inset 0 1px 0 rgba(227, 196, 140, 0.15); }
  .past-hero .header-cta:hover { background: #000; color: #f0d7a6; border-color: var(--bg-gold-hi); }
}

/* ---- newsletter: black and gold ---- */
.news7 { position: relative; background: radial-gradient(120% 140% at 85% 0%, #24201b 0%, #151311 55%, #0f0e0d 100%); color: #efe6d6; border: 0; }
.news7::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 98, 0), rgba(201, 162, 98, 0.8), rgba(201, 162, 98, 0)); }
.news7__text h2 { color: var(--bg-gold-hi); }
.news7__text p { color: rgba(239, 230, 214, 0.72); }
.news7__form input { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(201, 162, 98, 0.45); color: #f4efe6; }
.news7__form input::placeholder { color: rgba(239, 230, 214, 0.5); }
.news7__form input:focus { outline: none; border-color: var(--bg-gold-hi); background: rgba(255, 255, 255, 0.08); }
.news7__form .btn { background: linear-gradient(135deg, var(--bg-gold-hi) 0%, var(--bg-gold) 55%, var(--bg-gold-lo) 100%); color: #15120e; font-weight: 700; }
.news7__form .btn:hover { background: linear-gradient(135deg, #f0d7a6 0%, var(--bg-gold-hi) 60%, var(--bg-gold) 100%); }
.news7__msg { color: rgba(239, 230, 214, 0.5); }

/* ---- footer: black and gold, continuing the newsletter ---- */
.site-footer.foot7 { background: var(--bg-black); color: rgba(239, 230, 214, 0.72); border-top: 1px solid rgba(201, 162, 98, 0.18); }
.foot7 .logo span { color: #f4efe6; }
.foot7__brand p { color: rgba(239, 230, 214, 0.62); }
.foot7__contact a { color: var(--bg-gold-hi); border-bottom-color: rgba(201, 162, 98, 0.4); }
.foot7__contact a:hover { color: #f0d7a6; border-bottom-color: var(--bg-gold-hi); }
.foot7 h3 { color: var(--bg-gold-hi); }
.foot7__top > div:not(.foot7__brand) a { color: rgba(239, 230, 214, 0.72); }
.foot7__top > div:not(.foot7__brand) a:hover { color: var(--bg-gold-hi); }
.foot7__bottom { border-top-color: rgba(201, 162, 98, 0.2); }
.foot7__copy, .foot7__legal a { color: rgba(239, 230, 214, 0.55); }
.foot7__legal a:hover { color: var(--bg-gold-hi); }
.foot7__legal a + a::before { color: rgba(201, 162, 98, 0.6); }
.foot7 .pay-marks li { background: rgba(255, 255, 255, 0.04); border-color: rgba(201, 162, 98, 0.28); color: rgba(239, 230, 214, 0.8); }
.foot7__fine { color: rgba(239, 230, 214, 0.42); }
.band9 { direction: ltr; }

/* the story right under the dark strip sits on a warm tone, not bare white; tighter on the phone */
.why8 { background: var(--cream); }
@media (max-width: 749px) { .why8 { padding-top: 28px; } .why8__photo { aspect-ratio: 16 / 11; } }

/* checkout summary: change a quantity or remove a line without leaving the checkout */
.summary__edit { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.summary__qty { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font: 600 1rem/1 var(--sans); cursor: pointer; }
.summary__qty:hover { border-color: var(--ink); }
.summary__edit b { min-width: 18px; text-align: center; font-size: 0.9rem; }
.summary__remove { margin-inline-start: 8px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 0.82rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.summary__remove:hover { color: #a12620; }

/* =====================================================================
   HERO 4 (2026-10): dark, centred, one dominant headline, then the photo in a wide frame.
   Also: the accent goes back to brass gold everywhere (the clay/pink tone is gone).
   ===================================================================== */
:root { --gold: #c9a262; --gold-ink: #85662c; --gold-hi: #e3c48c; }
.hero4 { position: relative; overflow: hidden; background: #121110; color: #f4f1eb; padding: 56px 0 0; isolation: isolate; }
.hero4::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -18vw; width: 120vw; height: 60vw; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(201, 162, 98, 0.22), rgba(201, 162, 98, 0.05) 55%, transparent 72%); pointer-events: none; }
.hero4__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero4__eyebrow { margin: 0 0 18px; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.06em; color: var(--gold-hi); }
[dir='rtl'] .hero4__eyebrow { letter-spacing: 0.02em; }
.hero4__title { margin: 0; max-width: 11.5em; font: 700 clamp(2.5rem, 9.6vw, 5.4rem)/1.04 var(--sans); letter-spacing: -0.025em; text-wrap: balance; color: #fff; }
.hero4__title em { display: block; font-style: normal; color: var(--gold-hi); }
.hero4__lead { margin: 22px 0 0; max-width: 36em; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.6; color: rgba(244, 241, 235, 0.78); text-wrap: balance; }
.hero4__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }
.hero4__actions .btn { min-height: 54px; padding: 0 26px; border-radius: 999px; font-size: 1rem; }
.hero4__actions .btn--gold { --btn-bg: var(--gold); --btn-fg: #121110; background: linear-gradient(135deg, #e3c48c, #c9a262 60%, #b8914f); color: #121110; border: 0; box-shadow: 0 14px 34px -14px rgba(201, 162, 98, 0.7); }
.hero4__actions .btn--gold:hover { background: linear-gradient(135deg, #ecd3a3, #d4b074 60%, #c9a262); box-shadow: 0 16px 36px -12px rgba(201, 162, 98, 0.85); }
.hero4__actions .btn--ghost { --btn-bg: transparent; --btn-fg: #f4f1eb; background: transparent; color: #f4f1eb; border: 1px solid rgba(244, 241, 235, 0.35); }
.hero4__actions .btn--ghost:hover { border-color: var(--gold-hi); color: var(--gold-hi); background: transparent; }
.hero4__price { margin: 16px 0 0; font-size: 0.92rem; color: rgba(244, 241, 235, 0.62); }
.hero4__price b { color: #f4f1eb; font-weight: 600; }
.hero4__frame { position: relative; width: 100%; max-width: 1100px; margin: 44px auto 0; aspect-ratio: 4 / 5; border-radius: 26px 26px 0 0; overflow: hidden; background: #1a1714; box-shadow: 0 -1px 0 rgba(201, 162, 98, 0.55), 0 40px 90px -40px rgba(0, 0, 0, 0.9); }
.hero4__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.hero4__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 17, 16, 0.18), transparent 28%, transparent 70%, rgba(18, 17, 16, 0.55)); pointer-events: none; }
.hero4__trust { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 16px 20px 20px; list-style: none; font-size: 0.84rem; color: rgba(244, 241, 235, 0.92); }
.hero4__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero4__trust svg { width: 16px; height: 16px; color: var(--gold-hi); flex: none; }
@media (min-width: 750px) {
  .hero4 { padding-top: 84px; }
  .hero4__frame { aspect-ratio: 16 / 9; margin-top: 56px; border-radius: 32px 32px 0 0; }
  .hero4__trust { gap: 10px 36px; font-size: 0.92rem; padding-bottom: 26px; }
  .hero4__actions { gap: 14px; margin-top: 34px; }
  .hero4__actions .btn { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }
}
@media (min-width: 990px) { .hero4 { padding-top: 96px; } .hero4__title { font-size: clamp(3.6rem, 5.8vw, 5.6rem); } }
/* the home then goes straight to the cream "why" section: the dark hero is the colour break, no band needed */
.why8 { padding-top: 72px; }


/* =====================================================================
   TYPE (2026-10): the system font everywhere. Headings use the Display cut, slightly tighter, like the reference.
   ===================================================================== */
h1, h2, h3, .title, .display, .head3, .hero4__title, .why8__title, .how3__title, .pdp__title, .co-title { font-family: var(--display); }
h1, .display, .hero4__title { letter-spacing: -0.025em; }
h2, .title, .head3, .why8__title, .how3__title { letter-spacing: -0.015em; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* hero → "three things": the dark fades into the cream of the next section behind the photo,
   and the photo floats over the seam with its corners rounded all round, so there is no hard edge */
.hero4 { background: linear-gradient(180deg, #121110 0, #121110 calc(100% - 240px), #2b2520 calc(100% - 150px), var(--cream) 100%); padding-bottom: 0; }
.hero4__frame { border-radius: 26px; box-shadow: 0 0 0 1px rgba(201, 162, 98, 0.35), 0 34px 70px -30px rgba(18, 17, 16, 0.75); margin-bottom: -1px; }
.hero4 + .why8, .hero4 ~ .why8 { padding-top: 64px; }
@media (min-width: 750px) {
  .hero4 { background: linear-gradient(180deg, #121110 0, #121110 calc(100% - 320px), #2b2520 calc(100% - 200px), var(--cream) 100%); }
  .hero4__frame { border-radius: 32px; }
  .hero4 + .why8, .hero4 ~ .why8 { padding-top: 88px; }
}
.hero4__inner { padding-bottom: 0; }
.hero4__frame-wrap { padding-bottom: 0; }

/* the photo hangs over the seam: its lower part sits on the cream of the next section, so the dark hero
   flows into it instead of stopping at a line */
.hero4__frame { position: relative; z-index: 2; margin-bottom: -96px; }
.hero4 { background: linear-gradient(180deg, #121110 0, #121110 calc(100% - 210px), #3a322a calc(100% - 96px), var(--cream) calc(100% - 95px), var(--cream) 100%); }
.hero4 + .why8, .hero4 ~ .why8 { padding-top: 150px; }
@media (min-width: 750px) {
  .hero4__frame { margin-bottom: -140px; }
  .hero4 { background: linear-gradient(180deg, #121110 0, #121110 calc(100% - 300px), #3a322a calc(100% - 140px), var(--cream) calc(100% - 139px), var(--cream) 100%); }
  .hero4 + .why8, .hero4 ~ .why8 { padding-top: 210px; }
}
/* phone: the first line of the headline fits on one row */
@media (max-width: 749px) { .hero4__title { font-size: clamp(1.9rem, 8vw, 2.6rem); } }

/* (fix) the overhanging photo must not be clipped, and the dark → cream change is one long smooth fade, no step */
.hero4 { overflow: visible; overflow-x: clip; background: linear-gradient(180deg, #121110 0, #121110 calc(100% - 300px), #6f655a calc(100% - 150px), var(--cream) 100%); }
.hero4 + .why8, .hero4 ~ .why8 { padding-top: 156px; }
@media (min-width: 750px) {
  .hero4 { background: linear-gradient(180deg, #121110 0, #121110 calc(100% - 420px), #6f655a calc(100% - 210px), var(--cream) 100%); }
  .hero4 + .why8, .hero4 ~ .why8 { padding-top: 212px; }
}
/* the glow stays inside the page width, so no browser can scroll sideways (older Safari ignores overflow-x: clip) */
.hero4::before { width: 100%; left: 0; transform: none; }

/* =====================================================================
   PRODUCTS v9 (2026-10): flat cards, no boxes or badges; four in a row on a computer, two on a phone,
   the shop opens straight on them. Same card on the home, the shop and under a product.
   ===================================================================== */
.grid9 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
@media (min-width: 990px) { .grid9 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; } .grid9--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard9 { min-width: 0; }
.pcard9__link { display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.pcard9__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #1a1714; }
.pcard9__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard9__img--hover { opacity: 0; }
@media (hover: hover) {
  .pcard9__link:hover .pcard9__img--hover { opacity: 1; }
  .pcard9__link:hover .pcard9__img { transform: scale(1.03); }
}
.pcard9__soldout { position: absolute; inset-inline-start: 10px; top: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(18, 17, 16, 0.85); color: #fff; font-size: 0.74rem; font-weight: 600; }
.pcard9__body { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.pcard9__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pcard9__name { font: 600 1.02rem/1.25 var(--display); letter-spacing: -0.01em; }
.pcard9__price { font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.pcard9__price s { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-inline-end: 4px; }
.pcard9__pitch { color: var(--muted); font-size: 0.86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard9 .pcard__swatches { margin-top: 6px; }
.pcard9__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 16px; }
@media (min-width: 990px) { .pcard9__name { font-size: 1.12rem; } .pcard9__pitch { font-size: 0.9rem; } }
@media (max-width: 400px) { .pcard9__top { flex-direction: column; gap: 2px; } }

/* shop: one compact line, then the cases */
.shop9 { padding: 26px 0 56px; }
.shop9__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; margin-bottom: 22px; }
.shop9__title { margin: 0; font: 700 clamp(1.7rem, 4.6vw, 2.4rem)/1.1 var(--display); letter-spacing: -0.02em; }
.shop9__sub { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }
.shop9__compare { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 0.9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.shop9__compare svg { width: 15px; height: 15px; }
[dir='rtl'] .shop9__compare svg { transform: scaleX(-1); }
@media (min-width: 990px) { .shop9 { padding-top: 36px; } .shop9__head { margin-bottom: 28px; } }

/* home: "why" and "the cases" share one background, so they read as one story */
.why8 { padding-bottom: 28px; }
.why8__list { margin-bottom: 0; }
.cases8 { background: var(--cream); padding-top: 48px; }
@media (min-width: 990px) { .why8 { padding-bottom: 40px; } .cases8 { padding-top: 64px; } }
.cases8 .cards8__trust { margin-top: 40px; }
/* phone: square photos and a tighter text block, so two rows of cases fit on the first screen */
@media (max-width: 989px) {
  .pcard9__media { aspect-ratio: 1 / 1; border-radius: 14px; }
  .pcard9__link { gap: 9px; }
  .pcard9__name { font-size: 0.98rem; }
  .pcard9__price { font-size: 0.9rem; }
  .pcard9__pitch { font-size: 0.8rem; -webkit-line-clamp: 1; }
  .pcard9 .pcard__swatches { margin-top: 4px; }
  .grid9 { gap: 22px 12px; }
  .shop9 { padding-top: 18px; }
  .shop9__head { flex-wrap: nowrap; align-items: center; margin-bottom: 16px; }
  .shop9__sub { font-size: 0.8rem; }
  .shop9__compare { flex: none; font-size: 0.82rem; }
}
@media (max-width: 400px) { .pcard9__top { flex-direction: row; gap: 6px; } }
/* home: less empty space after the cases */
.cases8 { padding-bottom: 48px; }
@media (min-width: 990px) { .cases8 { padding-bottom: 72px; } }
/* tablet: all four in one row as well */
@media (min-width: 750px) and (max-width: 989px) { .grid9 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 14px; } .grid9--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* under a product: the other three, smaller and square, so they don't outweigh the product itself */
.grid9--3 { max-width: 980px; margin-inline: auto; }
.grid9--3 .pcard9__media { aspect-ratio: 1 / 1; }

/* phone: the "why" section has no photo of its own (the opening photo and the cases are right around it),
   so the page doesn't read as photo after photo */
@media (max-width: 749px) { .why8__photo { display: none; } .why8 { padding-top: 132px; } }
/* product cards: the studio photos sit on the same dark backdrop, so the frame matches it */
.pcard9__media { background: #191512; }
.pcard9__img { object-position: 50% 52%; }

/* language: one plain button with the other language's name */
.lang { display: none !important; }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink); font: 500 0.86rem/1 var(--sans); text-decoration: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.lang-btn:hover { border-color: var(--ink); background: var(--white); }
.lang-btn.is-busy { opacity: 0.5; pointer-events: none; }
.lang-btn--menu { height: 44px; padding: 0 18px; margin-bottom: 14px; font-size: 0.95rem; }
@media (max-width: 749px) { .site-header .lang-btn:not(.lang-btn--menu) { height: 32px; padding: 0 11px; font-size: 0.8rem; } }

/* ---------------------------------------------------------------- buy box v10: quantity + total on one quiet line,
   then two equal pills — "Buy it now" in the brand gold (same as the hero button), "Add to cart" outlined */
.buy10 { display: grid; gap: 14px; margin-top: 4px; }
.buy10__row { display: flex; align-items: center; gap: 12px; }
.buy10__label { font-size: 0.92rem; color: var(--muted); }
.buy10__qty { height: 40px; grid-template-columns: 38px 34px 38px; border-radius: 99px; background: transparent; border-color: rgba(18, 17, 16, 0.18); }
.buy10__qty button:first-child { border-radius: 0 99px 99px 0; }
.buy10__qty button:last-child { border-radius: 99px 0 0 99px; }
[dir="ltr"] .buy10__qty button:first-child { border-radius: 99px 0 0 99px; }
[dir="ltr"] .buy10__qty button:last-child { border-radius: 0 99px 99px 0; }
.buy10__qty button:hover { background: rgba(18, 17, 16, 0.05); }
.buy10__total { margin-inline-start: auto; font-size: 0.92rem; color: var(--muted); white-space: nowrap; }
.buy10__total b { margin-inline-start: 4px; font-size: 1.12rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.buy10__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy10 .btn { height: 54px; padding: 0 14px; border-radius: 99px; font-size: 1rem; font-weight: 600; letter-spacing: 0; width: 100%; justify-content: center; }
.buy10__now { background: linear-gradient(135deg, #e3c48c, #c9a262 60%, #b8914f); color: #121110; border: 0; box-shadow: 0 12px 26px -14px rgba(155, 120, 56, 0.8); }
.buy10__now:hover { background: linear-gradient(135deg, #ecd3a3, #d4b074 60%, #c9a262); color: #121110; }
.buy10__add { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.buy10__add:hover { background: var(--ink); color: #fff; }
.buy10 .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 380px) { .buy10 .btn { font-size: 0.94rem; padding: 0 8px; } }
.cart-foot__save { color: #2e7d4f; }
.cart-foot__save strong { color: #2e7d4f; }
.cart-foot__nudge { margin: 2px 0 8px; padding: 9px 12px; border-radius: 10px; background: rgba(201, 162, 98, 0.14); color: var(--gold-ink); font-size: 0.88rem; font-weight: 500; }
.pdp__bundle { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(201, 162, 98, 0.12); color: var(--gold-ink); font-size: 0.9rem; font-weight: 500; text-align: center; }

/* ---------------------------------------------------------------- deals (free shipping, second case off):
   one look everywhere — small pills with a gold icon; on the dark hero they are glassy with gold edges */
.deals { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.deals__item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 14px; border-radius: 99px;
  font-size: 0.86rem; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(201, 162, 98, 0.13); color: var(--gold-ink); border: 1px solid rgba(201, 162, 98, 0.38); }
.deals__item svg { width: 16px; height: 16px; flex: none; color: var(--gold-ink); }
.deals--dark .deals__item { background: rgba(201, 162, 98, 0.1); color: #f1dfb6; border-color: rgba(227, 196, 140, 0.45); backdrop-filter: blur(6px); }
.deals--dark .deals__item svg { color: #e3c48c; }
.hero4__deals { justify-content: center; margin-bottom: 18px; }
.cases8__deals { margin-top: 14px; }
.shop9__deals { margin-top: 12px; }
.pdp__deals { margin: 12px 0 2px; }
@media (max-width: 749px) {
  .deals__item { font-size: 0.8rem; padding: 6px 11px; }
  .hero4__deals { margin-bottom: 14px; }
}

/* top bar: the deals, in gold, on every screen */
.announce__deals { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.announce__deal { display: inline-flex; align-items: center; gap: 6px; color: #f1dfb6; font-weight: 600; white-space: nowrap; }
.announce__deal svg { width: 15px; height: 15px; color: #e3c48c; }
.announce__dot { color: #c9a262; font-size: 0.7em; }
@media (max-width: 380px) { .announce__deal svg { display: none; } .announce__deals { gap: 8px; } }
.announce .announce__deals, .announce .announce__deal { opacity: 1; }
.announce__deal { color: #ecd3a3; font-size: 0.86rem; letter-spacing: 0.01em; }