/* ==========================================================================
   Kollektion — design system
   --------------------------------------------------------------------------
   Tokens below were measured off the live Wix site with getComputedStyle, so
   the colours, type sizes and line heights are the originals, not approximations:

     ink      #0F3A49  headings, body copy, hero band, footer background
     accent   #8B1C12  prices and the Shopee buttons
     card     #FCFCFC  the hero copy panel
     grid     #C3CED0  image placeholder tint behind gallery slots

   Type on the original is "Avenir LT W01 35 Light" (Monotype, licensed to Wix
   and not redistributable). Real Avenir is kept first in the stack so Apple
   devices — which ship Avenir Next — render the exact original face; everyone
   else falls back to self-hosted Nunito Sans, the closest free match.

   Layout reproduces the desktop original at its 1265px design width: a 980px
   content column (the original ran x=143 to x=1122) and the same section
   rhythm. Everything collapses to a single column under 900px, which the Wix
   site handled with a separate hand-built mobile layout.
   ========================================================================== */

:root {
  --ink: #0f3a49;
  --ink-soft: rgba(15, 58, 73, 0.72);
  --ink-faint: rgba(15, 58, 73, 0.14);
  --accent: #8b1c12;
  --accent-dark: #6d150e;
  /* --paper is sampled straight out of the product photography. typa-stack.jpg — the
     only shot with a light backdrop — has a background of #faf8f9, so using that exact
     value as the page background makes the photo dissolve into the page instead of
     sitting in a visible rectangle.

     Note the hue direction: R > B > G (250, 248, 249) is a warm, faintly magenta
     off-white. The previous band colour was #f5f7f8, which is B > G > R — a COOL grey.
     The lightness was almost identical, but the opposing hue is what made the edge of
     the photo obvious. Any new background tint must keep R > B > G. */
  --paper: #faf8f9;
  /* Alternating band: the same warm hue, ~8 steps deeper, so it reads as a band without
     ever fighting the photography. */
  --wash: #f2f0f1;
  --wash-line: rgba(15, 58, 73, 0.06);
  /* Elevated surfaces that need to lift off --paper or --wash: the language dropdown,
     guide cards, product cards. */
  --surface: #ffffff;
  --card: #fcfcfc;
  --grid-tint: #c3ced0;

  --container: 980px;
  --header-h: 119px;

  --font-sans: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-thai: 'Noto Sans Thai', 'Avenir Next', 'Nunito Sans', system-ui, sans-serif;

  --step-1: 14px;
  --step-2: 16px;
  --step-3: 18px;
  --step-4: 24px;
  --step-5: 30px;
  --step-6: 45px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Thai needs a font with Thai coverage and a taller line to clear the
   stacked vowels and tone marks. */
html[lang='th'] body { font-family: var(--font-thai); line-height: 1.65; }
html[lang='th'] h1,
html[lang='th'] h2,
html[lang='th'] h3 { line-height: 1.5; }

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
p { margin: 0; }
/* `ol` was missing here originally. The breadcrumb list therefore kept the browser's
   default 1em top/bottom margin and 40px left indent — 25px of dead height above the
   fold on every product page, plus a stray indent. */
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-size: var(--step-1);
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------- Header ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  min-height: var(--header-h);
  padding-top: 20px;
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.site-header__logo img { width: 233px; height: 40px; object-fit: contain; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 18px;
}

/* The secondary links live in a wrapper span so they can collapse into the hamburger on
   mobile. That wrapper is a single flex child, so .site-nav's gap does NOT separate the
   links inside it — they need their own matching gap or they render as "Guides FAQ". */
.site-nav__secondary {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  font-size: var(--step-2);
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] { border-bottom-color: var(--ink); }

/* Hamburger — a <details> so it needs no JS. Hidden on desktop, where the secondary
   links sit inline instead. */
.nav-more { position: relative; display: none; }
.nav-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 44px;
  border: 1px solid var(--ink-faint);
  border-radius: var(--r, 0);
}
.nav-more > summary::-webkit-details-marker { display: none; }
/* Three bars drawn from one element: the middle is the box, the outer two are
   pseudo-elements, so there is no extra markup. */
.nav-more__bars,
.nav-more__bars::before,
.nav-more__bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  content: '';
}
.nav-more__bars { position: relative; }
.nav-more__bars::before { position: absolute; top: -5.5px; }
.nav-more__bars::after { position: absolute; top: 5.5px; }
.nav-more[open] .nav-more__bars { background: transparent; }
.nav-more[open] .nav-more__bars::before { top: 0; transform: rotate(45deg); }
.nav-more[open] .nav-more__bars::after { top: 0; transform: rotate(-45deg); }
.nav-more__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--ink-faint);
  box-shadow: 0 8px 24px rgba(15, 58, 73, 0.12);
  padding: 6px 0;
  z-index: 120;
}
.nav-more__menu a {
  display: block;
  padding: 12px 16px;
  font-size: var(--step-2);
  color: var(--ink);
  border: 0;
}
.nav-more__menu a:hover { background: rgba(15, 58, 73, 0.06); }

/* Language switcher — a <details> so it works with zero JS. */
.lang {
  position: relative;
  font-size: var(--step-1);
}
.lang > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  white-space: nowrap;
}
/* Full name on desktop, two/three-letter code on mobile. */
.lang__short { display: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::after {
  content: '';
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.lang[open] > summary::after { transform: rotate(225deg) translateY(0); }
.lang__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 170px;
  /* White, not --paper: the dropdown has to lift off the header, which is now --paper. */
  background: var(--surface);
  border: 1px solid var(--ink-faint);
  box-shadow: 0 8px 24px rgba(15, 58, 73, 0.12);
  padding: 6px 0;
  z-index: 120;
}
.lang__menu a {
  display: block;
  padding: 8px 14px;
  font-size: var(--step-1);
  color: var(--ink);
}
.lang__menu a:hover { background: rgba(15, 58, 73, 0.06); }
.lang__menu a[aria-current='true'] { color: var(--accent); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: 554px;
  object-fit: cover;
  object-position: 65% center; /* keeps the case visible while the copy sits left */
}
.hero__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100% - 40px));
  pointer-events: none;
}
.hero__card {
  background: var(--card);
  width: min(481px, 100%);
  padding: 29px 48px 29px 48px;
  pointer-events: auto;
}
.hero__card h1,
.hero__card p.hero-h {
  font-size: var(--step-6);
  line-height: 63px;
  color: var(--ink);
  font-weight: 400;
}

/* ---------- Sections ---------------------------------------------------- */

.section { padding-block: 56px; }
.section--tight { padding-block: 32px; }
.section--flush { padding-block: 0; }

/* Alternating band. Hairlines top and bottom stop the band from looking like a
   rendering artefact on displays where the tint is near-invisible. */
.section--wash {
  background: var(--wash);
  border-top: 1px solid var(--wash-line);
  border-bottom: 1px solid var(--wash-line);
}
/* Consecutive bands would otherwise show a doubled 2px rule between them. */
.section--wash + .section--wash { border-top: 0; }

.section-heading {
  font-size: var(--step-4);
  line-height: 28.8px;
  text-align: center;
  color: var(--ink);
}
.section-heading--lg {
  font-size: var(--step-5);
  line-height: 36px;
}

.eyebrow {
  font-size: var(--step-1);
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* Product showcase: one large hero shot with two stacked shots beside it, mirroring
   the original's alternating left/right rhythm.

   Both columns are forced to the SAME height. The square hero sets the row height and
   the stack splits it into two equal halves (1fr 1fr), so the two columns end flush
   at the bottom. Giving each of the three images its own `aspect-ratio: 1` instead —
   the obvious first move — makes the stack taller than the hero and leaves a ragged
   bottom edge, because two squares plus a gap are always taller than one square of
   the same width class. */
/* ONE grid holds all three images — the hero spans both rows rather than sitting beside
   a separately-nested stack.
   The nested version could not be made flush: the inner stack's own content (two square
   images) set its intrinsic height to 720px, which then drove the outer row height, so
   the 575px hero sat in a 720px row with 145px of dead space beneath it. Sizing every
   cell from ONE grid removes that second, competing sizing pass.
   Height comes from the hero <img>'s aspect-ratio — never from the grid items
   themselves, since aspect-ratio on a stretched grid item derives width from height and
   blows the item out of its column. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 370fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.showcase--flip { grid-template-columns: minmax(0, 370fr) minmax(0, 600fr); }

/* Explicit placement, never `order`: `order` also reorders the placement algorithm and
   was silently swapping the two columns at desktop. The hero is first in the markup in
   both variants so phones get it first with no override at all.
   :nth-child, not :nth-of-type — every child is a <div>, so :nth-of-type(1) would match
   the hero rather than the first side shot. */
.showcase > .showcase__main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.showcase > .showcase__side:nth-child(2) { grid-column: 2; grid-row: 1; }
.showcase > .showcase__side:nth-child(3) { grid-column: 2; grid-row: 2; }

.showcase--flip > .showcase__main { grid-column: 2; }
.showcase--flip > .showcase__side:nth-child(2) { grid-column: 1; grid-row: 1; }
.showcase--flip > .showcase__side:nth-child(3) { grid-column: 1; grid-row: 2; }

/* Only the hero has a real height — its aspect-ratio sets the whole block's height. */
.showcase__main img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* The side shots are absolutely positioned inside their cell. Out of flow means they
   contribute NOTHING to row sizing, so the two rows collapse to exactly half the hero's
   height instead of each demanding the image's natural square size (which is what left
   the columns ragged). */
.showcase__side { position: relative; min-height: 0; overflow: hidden; }
.showcase__side img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__caption { margin-top: 22px; text-align: center; }
.showcase__caption .name {
  display: block;
  font-size: var(--step-4);
  line-height: 28.8px;
  color: var(--ink);
}
.showcase__caption .price {
  display: block;
  margin-top: 8px;
  font-size: var(--step-3);
  line-height: 21.6px;
  color: var(--accent);
}
.showcase__caption a:hover .name { text-decoration: underline; }

/* Editorial split: big square image beside a short statement heading. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split--flip > .split__media { order: 2; }
.split__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.split__body h2 {
  font-size: var(--step-5);
  line-height: 36px;
  max-width: 20ch;
}
.split__body p { margin-top: 16px; color: var(--ink-soft); max-width: 42ch; }

/* Three-up image row (cushions, colourway shots) */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trio img { width: 100%; object-fit: cover; }
.trio--square img { aspect-ratio: 1; }
.trio--wide img { aspect-ratio: 320 / 251; }

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

.store-logo { width: 205px; height: auto; margin-inline: auto; max-width: 100%; }

/* Smaller wordmark used above buy-button groups on market, guide and product pages. */
.store-mark { height: auto; max-width: 100%; margin-top: 20px; }
.market-hero .store-mark,
.section--wash .container[style*="center"] .store-mark { margin-inline: auto; }
.market-product .store-mark { margin-top: 14px; }

.buy-grid {
  display: grid;
  grid-template-columns: repeat(2, 190px);
  gap: 10px 13px;
  justify-content: center;
  margin-top: 22px;
}
.buy-grid--start { justify-content: start; }

.buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 40px;
  background: var(--accent);
  color: #fff;
  font-size: var(--step-2);
  line-height: 1;
  text-align: center;
  transition: background-color 0.15s ease;
}
.buy-btn:hover { background: var(--accent-dark); }
.buy-btn--wide { width: 100%; }

/* ---------- Product page ----------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 461fr) minmax(0, 392fr);
  gap: 36px;
  align-items: start;
}

.product__gallery { display: grid; gap: 18px; align-content: start; }

/* ---- Main carousel (mirrors the Wix Pro Gallery) ----
   scroll-snap does the paging, so it swipes on touch and paginates with the keyboard
   even if JavaScript never runs. site.js layers arrows, dots and zoom on top. */
.gallery { position: relative; }
.gallery__track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--grid-tint);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: center; min-width: 0; }
.gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  aspect-ratio: var(--gallery-ratio, 1);
}
.gallery__zoom img { width: 100%; height: 100%; object-fit: cover; }

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;                       /* shown by site.js only when there is >1 slide */
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 0; border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 58, 73, 0.18);
  color: var(--ink); font-size: 18px; line-height: 1;
}
.gallery[data-ready] .gallery__nav { display: flex; }
.gallery__nav:disabled { opacity: 0.35; cursor: default; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }

.gallery__dots { display: none; justify-content: center; gap: 7px; margin-top: 10px; }
.gallery[data-ready] .gallery__dots { display: flex; }
.gallery__dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--ink-faint);
  cursor: pointer;
}
.gallery__dot[aria-current='true'] { background: var(--ink); }

.product__feature-image img { width: 100%; height: auto; }

/* ---- 8-up thumbnail grid in the right column ---- */
.thumb-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 22px;
}
.thumb-grid__btn {
  display: block;
  width: 100%;
  padding: 0; border: 0;
  background: var(--grid-tint);
  cursor: zoom-in;
  aspect-ratio: 1;
}
.thumb-grid__btn img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Zoom overlay ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 26, 33, 0.92);
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto; height: auto;
  object-fit: contain;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: 50%;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8); font-size: var(--step-1); letter-spacing: 1px;
}

.product__name { font-size: var(--step-4); line-height: 28.8px; font-weight: 700; }
.product__variant { margin-top: 6px; font-size: var(--step-3); line-height: 21.6px; }
.product__price { margin-top: 12px; font-size: var(--step-3); line-height: 21.6px; color: var(--accent); }
.product__store-logo { width: 137px; margin-top: 14px; }
.product__cta-label { margin-top: 18px; font-size: var(--step-3); line-height: 21.6px; }
.product__guarantee { margin-top: 22px; width: 100%; }

.feature-list { list-style: none; margin-top: 12px; display: grid; gap: 4px; }
.feature-list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--step-2);
  line-height: 1.4;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Features + dimensions block, moved below the main product grid so the buy buttons
   are not pushed down the page on a phone. */
.product-details {
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px);
  gap: 44px;
  align-items: center;
}
.product-details--text-only { grid-template-columns: minmax(0, 640px); justify-content: center; }
.product-details__label { font-size: var(--step-2); }
.product-details__media img { width: 100%; height: auto; }

.copy-block { margin-top: 22px; }
.copy-block p { font-size: var(--step-2); line-height: 22.4px; }
.copy-block p + p { margin-top: 16px; }
.copy-block b, .copy-block strong { font-weight: 700; }

.disclaimer { margin-top: 18px; font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 20px; }
.pair img { aspect-ratio: 195 / 157; object-fit: cover; }

/* ---------- Long-form / editorial pages -------------------------------- */

.prose { max-width: 72ch; margin-inline: auto; }
.prose > h1 { font-size: var(--step-5); line-height: 36px; }
.prose__lead {
  margin-top: 18px;
  font-size: var(--step-3);
  line-height: 1.6;
  color: var(--ink-soft);
}
.prose h2 {
  margin-top: 40px;
  font-size: var(--step-4);
  line-height: 1.3;
}
.prose h3 { margin-top: 28px; font-size: var(--step-3); font-weight: 700; }
.prose p { margin-top: 14px; line-height: 1.65; }
.prose ul { margin-top: 14px; list-style: none; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 20px; line-height: 1.6; }
.prose ul li::before {
  content: '';
  position: absolute; left: 4px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.prose__meta {
  margin-top: 10px;
  font-size: var(--step-1);
  color: var(--ink-soft);
  letter-spacing: 0.4px;
}
.prose__note {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(15, 58, 73, 0.05);
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.6;
}

.breadcrumbs {
  font-size: var(--step-1);
  color: var(--ink-soft);
  padding-block: 18px 0;
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; opacity: 0.5; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Guides hub cards */
/* auto-FIT with a max track width and justify-content:center, so a row that is not full
   (a product page often has only one related guide) sits centred instead of hugging the
   left edge. auto-fill would keep the empty tracks and strand a lone card on the left. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 330px));
  gap: 24px;
  margin-top: 32px;
  justify-content: center;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--ink-faint);
  padding: 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
/* h2 on the guides hub (cards sit under the page h1), h3 elsewhere (under a section
   heading). Both render identically — the tag differs only to keep the outline valid. */
.card h2,
.card h3 { font-size: var(--step-3); line-height: 1.35; font-weight: 700; margin: 0; }
.card p { margin-top: 10px; font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); flex: 1; }
.card .card__more { margin-top: 16px; font-size: var(--step-1); color: var(--accent); }

/* FAQ */
.faq-group { margin-top: 36px; }
.faq-group > h2 { font-size: var(--step-4); line-height: 1.3; }
.faq-item { border-bottom: 1px solid var(--ink-faint); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 32px 16px 0;
  position: relative;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.45;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '';
  position: absolute; right: 6px; top: 22px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.faq-item[open] > summary::after { transform: rotate(225deg); }
.faq-item__answer { padding-bottom: 18px; line-height: 1.65; color: var(--ink-soft); }

/* Market landing page */
.market-hero { text-align: center; }
.market-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  font-size: var(--step-3);
}
.market-price .label { font-size: var(--step-1); color: var(--ink-soft); letter-spacing: 1.4px; text-transform: uppercase; }
.market-price .value { color: var(--accent); }

.market-products { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.market-product { border: 1px solid var(--ink-faint); padding: 20px; }
/* Scoped to the product photo by class, NOT `.market-product img`. A bare descendant
   selector also caught the Shopee wordmark in the same card and stretched it to a
   full-width square. */
.market-product__photo { aspect-ratio: 1; object-fit: cover; width: 100%; }
/* h2 on market pages (card sits under the page h1), h3 inside a guide's CTA. */
.market-product h2,
.market-product h3 { margin-top: 16px; font-size: var(--step-3); font-weight: 700; }
.market-product .price { margin-top: 6px; color: var(--accent); font-size: var(--step-3); }
.market-product .buy-btn { width: 100%; margin-top: 16px; }

.related-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; justify-content: center; }
.related-links a {
  border: 1px solid var(--ink-faint);
  padding: 8px 14px;
  font-size: var(--step-1);
}
.related-links a:hover { border-color: var(--ink); }

/* Cross-links strip pushed at the bottom of product/guide pages */
.crosslinks { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--ink-faint); }
.crosslinks h2 { font-size: var(--step-4); line-height: 1.3; }

/* ---------- Geo banner -------------------------------------------------- */

.geo-banner {
  background: var(--ink);
  color: #fff;
  font-size: var(--step-1);
}
.geo-banner[hidden] { display: none; }
.geo-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  text-align: center;
}
.geo-banner a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 1px;
}
.geo-banner button {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font: inherit;
  padding: 4px 10px;
  cursor: pointer;
}
.geo-banner button:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: #fff;
  padding-block: 38px 34px;
  margin-top: 64px;
}
.site-footer a { color: #fff; }
.site-footer__title {
  font-size: 25px;
  line-height: 27.5px;
  text-align: center;
  color: #fff;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 34px;
}
.site-footer__links { display: grid; gap: 4px; align-content: start; }
.site-footer__links a {
  font-size: var(--step-1);
  line-height: 15.4px;
  letter-spacing: 2.8px;
  padding-block: 3px;
}
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__brand {
  font-size: var(--step-1);
  line-height: 15.4px;
  letter-spacing: 2.8px;
}
.site-footer__brand strong { font-weight: 700; display: block; margin-bottom: 6px; }
.site-footer__brand span { display: block; padding-block: 2px; }
.site-footer__legal {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 900px) {
  :root { --header-h: auto; --step-6: 29px; --step-5: 23px; }

  .section { padding-block: 40px; }

  /* The headline stays OVERLAID on the photo, as it is on desktop — it just moves to
     the bottom of the frame. Letting it drop below the image (position: static) broke
     the composition and pushed the real content further down the fold.
     object-position keeps the watch case in frame on the right while the card covers
     the empty darker area at the bottom. */
  /* Phone hero: the headline sits directly ON the empty dark area of the photo, left
     aligned and reversed out in white — no card. Desktop keeps the original off-white
     panel exactly as Wix had it. object-position pushes the watch case to the right so
     the left third stays clear for the type. */
  .hero { position: relative; display: block; }
  .hero__media img { height: 470px; object-position: 78% center; }
  .hero__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    padding: 0 22px 30px;
  }
  .hero__card {
    width: 100%;
    /* Wide enough for a comfortable 2-3 lines, but stopping short of the watch case
       that object-position parks on the right. */
    max-width: 68%;
    background: none;
    padding: 0;
    text-align: left;
  }
  .hero__card h1,
  .hero__card p.hero-h {
    color: #fff;
    line-height: 1.2;
    /* The backdrop is a photo, so a soft shadow guarantees legibility wherever the
       image happens to be lighter. */
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  /* Hero shot on top, the two supporting shots side by side beneath it. The stack
     must drop back to auto rows here: it is two columns now, so the base
     `1fr 1fr` rows would reserve a second, empty row and add a phantom gap. */
  /* Phone: hero full width on top, the two supporting shots side by side beneath.
     The desktop row/column placement is fully reset first, or the explicitly-placed
     items keep their desktop cells and collide. */
  .showcase,
  .showcase--flip {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .showcase > .showcase__main,
  .showcase--flip > .showcase__main { grid-column: 1 / span 2; grid-row: 1; }
  .showcase > .showcase__side:nth-child(2),
  .showcase--flip > .showcase__side:nth-child(2) { grid-column: 1; grid-row: 2; }
  .showcase > .showcase__side:nth-child(3),
  .showcase--flip > .showcase__side:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* Row 2 is auto here, so the side cells need their own height: a square. */
  .showcase__side { aspect-ratio: 1; }

  .split, .split--flip { grid-template-columns: 1fr; gap: 24px; }
  .split--flip > .split__media { order: 0; }
  .split__body h2 { max-width: none; }

  .product { grid-template-columns: 1fr; gap: 28px; }
  .product-details,
  .product-details--text-only { grid-template-columns: 1fr; gap: 24px; }
  .market-products { grid-template-columns: 1fr; }

  /* Compact footer. Six stacked 44px rows plus a stacked address made this the tallest
     block on the page; the links pair up into two columns and the whole thing tightens. */
  .site-footer { padding-block: 26px 20px; margin-top: 44px; }
  .site-footer__title { font-size: 20px; line-height: 1.2; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 20px; text-align: center; }
  .site-footer__links { justify-items: center; gap: 0; }
  .site-footer__brand {
    grid-column: 1 / -1;
    margin-top: 16px;
    text-align: center;
    letter-spacing: 1.6px;
    line-height: 1.5;
  }
  .site-footer__brand span { padding-block: 0; }
  .site-footer__legal { margin-top: 16px; padding-top: 12px; line-height: 1.5; }

  /* Mobile header: the two product pages, a hamburger for the rest, and a compact
     language code — all on ONE row. Previously four links plus a
     "Bahasa: Bahasa Melayu" control wrapped onto two lines. */
  .site-nav {
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
  }
  .site-nav__secondary { display: none; }   /* these move into the hamburger */
  .nav-more { display: block; }

  .site-nav > a { font-size: 15px; }

  /* Tighten the whole masthead on phones so a product's photo AND its name are both
     above the fold on load. Previously the logo, nav, breadcrumb and page heading ate
     roughly 280px before the gallery even started. */
  .site-header__inner { gap: 10px; }
  .site-header__logo img { width: 186px; height: 32px; }
  .breadcrumbs { padding-block: 2px 0; font-size: 12.5px; }
  .breadcrumbs ol { gap: 4px; line-height: 1.2; }
  /* ~23px row: still a usable target for secondary navigation, versus the 47px the
     default padding produced. */
  .breadcrumbs a { padding-block: 4px; }
  .section--tight { padding-block: 6px; }
  .product { gap: 16px; }
  /* .section-heading--lg pins line-height to a fixed 36px for the desktop reproduction.
     On a phone the type is smaller, so that fixed value leaves a dead band above and
     below each line — enough to push the product name below the fold. */
  .section-heading--lg { line-height: 1.2; }
  .gallery__dots { margin-top: 6px; }

  .lang__full { display: none; }
  .lang__short { display: inline; }
  .lang > summary { padding: 4px 7px; font-size: 13px; gap: 4px; }

  /* Touch targets. Desktop keeps its tighter 26px links; on touch these need ~44px
     of vertical hit area to satisfy Google's tap-target check and to be usable. */
  .site-nav a,
  .lang > summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .lang__menu a { padding: 12px 14px; }

  /* Everything tappable clears 44px. Footer links were 33px and the country
     cross-links 41px — both under Google's tap-target minimum. */
  .site-footer__links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1.6px;
  }
  .related-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer__brand a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Breadcrumbs stay compact by convention, but get enough padding to be hittable. */
  .breadcrumbs a { display: inline-block; }
}

@media (max-width: 560px) {
  /* Cushions stay three-up: the point of the row is comparing the three colours,
     and they read fine small. The lifestyle shots are wider than they are tall and
     become illegible at a third of 335px, so those go one per row. */
  .trio--square { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .trio--wide { grid-template-columns: 1fr; gap: 10px; }

  /* Full-width buttons, and 48px tall rather than the desktop 40px: on a phone these
     are the primary conversion action and 40px is under the tap-target threshold.
     Desktop keeps the original 190x40 exactly. */
  .buy-grid { grid-template-columns: 1fr; width: 100%; }
  .buy-btn { width: 100%; height: 48px; }

  .showcase__stack { grid-template-columns: 1fr 1fr; }

  .thumb-grid { grid-template-columns: repeat(4, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; }
  /* Arrows sit inside the image on a phone, where there is no room beside it. */
  .gallery__nav { width: 36px; height: 36px; font-size: 16px; }
  .gallery__nav--prev { left: 6px; }
  .gallery__nav--next { right: 6px; }
  .lightbox { padding: 12px; }
  .lightbox__close { top: 10px; right: 10px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }

  .site-header { padding-top: 10px; }
  .site-nav { padding-bottom: 6px; }

  .card { padding: 20px; }
  .prose { max-width: none; }
}

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

@media print {
  .site-header, .site-footer, .geo-banner, .buy-grid { display: none; }
  body { color: #000; }
}