/* ===========================================================================
   GoChess Air  -  product page, above the fold
   One ground, one ink, one accent. The accent is on the action and on the
   stars, nowhere else. Surfaces are separated by a step in tone, never a line.
=========================================================================== */

:root {
  --ground: #ffffff;
  --stage: #f1f0ee;          /* the tone step the gallery sits on */
  --ink: #16171a;
  --ink-soft: #55575c;
  --accent: #fe5f00;         /* Particula orange */
  --hair: #dedcd8;

  /* five stars, drawn once and repeated, so the rating needs no image */
  --star-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='17'><path d='M9.5 1.2l2.33 4.72 5.21.76-3.77 3.67.89 5.19-4.66-2.45-4.66 2.45.89-5.19L1.96 6.68l5.21-.76z' fill='%23000'/></svg>") 0 0 / 19px 17px repeat-x;

  --display: "Poppins", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.23, 1, .32, 1);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- top bar */
.bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: 20px var(--gutter);
}

.bar__mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

.bar__nav { display: flex; gap: clamp(16px, 2.4vw, 30px); }
.bar__nav a, .bar__cart {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.bar__nav a:hover, .bar__cart:hover { color: var(--ink); }
.bar__cart { margin-left: auto; }

/* ------------------------------------------------------------- the layout */
.buy {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4.6fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
  padding: clamp(8px, 1.5vw, 24px) var(--gutter) clamp(56px, 7vw, 110px);
}

/* ------------------------------------------------------------- the gallery */
.gallery { position: sticky; top: 24px; }

.stage { background: var(--stage); border-radius: 20px; overflow: hidden; }

.stage__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 210ms var(--ease);
}
.stage__img.is-swapping { opacity: 0; }

/* Five, not six: a sixth would push each one under the size where it reads as
   a picture rather than a chip. */
.thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--stage);
  overflow: hidden;
  cursor: pointer;
  /* the selected thumb is marked by tone, never by an outline */
  opacity: .5;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumb.is-on { opacity: 1; }
.thumb:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .thumb:hover { opacity: 1; }
}

/* ------------------------------------------------------------ the buy box */
.info { padding-top: 4px; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.028em;
}

.lede {
  margin: 14px 0 0;
  font-size: clamp(18px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* -------------------------------------------------- price and rating, one row
   They sit side by side rather than stacked: a short line directly above a
   large one reads as a label on it, which is the thing this page must not do. */
.money {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 26px 0 0;
}

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0; }
.price__now {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 2.6vw, 38px);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price__fin { font-size: 15px; color: var(--ink-soft); }

.rating { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; }
.stars {
  display: block;
  width: 94px;
  height: 17px;
  background: var(--hair);
  -webkit-mask: var(--star-mask);
  mask: var(--star-mask);
}
.stars__fill { display: block; height: 100%; background: var(--accent); }
.rating__num { font-weight: 600; }
.rating__count { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------- cart */
.cart { margin: 24px 0 0; }

.cta {
  display: block;
  width: 100%;
  min-height: 62px;
  padding: 19px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.005em;
  /* Ink on orange, not white: white on #FE5F00 measures 3.07:1 and fails.
     This keeps the brand colour exactly and reads 5.85:1. */
  color: var(--ink);
  cursor: pointer;
  transition: transform 150ms var(--ease), background 170ms var(--ease);
}
.cta:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #ff7420; }
}

.assure { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* --------------------------------------------------------------- bullets */
.head {
  margin: 36px 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.012em;
}

.bullets { margin: 0; padding: 0; list-style: none; }
.bullets li + li { margin-top: 2px; }

/* Each claim is a control: reading it brings up the photograph that proves it.
   That is the one live thing on the page, and it works with a thumb. */
.bullets button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background 170ms var(--ease), transform 150ms var(--ease);
}
.bullets button b { display: block; font-weight: 600; color: var(--ink); }
.bullets button:active { transform: scale(.995); }
.bullets button.is-on { background: var(--stage); }

@media (hover: hover) and (pointer: fine) {
  .bullets button:hover { background: var(--stage); }
}

.inbox { margin: 0; font-size: 16px; color: var(--ink-soft); }
.inbox--note { margin-top: 10px; font-size: 14.5px; }
.inbox--note b { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------- the sticky buy dock */
.dock { display: none; }

/* ------------------------------------------------------------------ phone */
@media (max-width: 899px) {
  /* One narrow column, centred. On a tablet the full width gave a square
     gallery 700px tall and a line of text 95 characters long; both are wrong. */
  .buy {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 580px;
    margin-inline: auto;
    padding-bottom: 120px;
  }
  .gallery { position: static; }
  .bar__nav { display: none; }
  .thumbs { gap: 8px; }
  .money { gap: 8px 16px; margin-top: 20px; }

  /* The name and the line that says what this is come before the gallery, so
     the first screen answers the question instead of showing a picture alone. */
  .info { display: contents; }
  h1 { order: -3; }
  .lede { order: -2; margin-top: 10px; }
  .gallery { order: -1; margin-top: 4px; }

  .dock {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    /* Separated from the page by a step in tone, not by a line or a shadow:
       the page is white, the dock is a shade below the gallery's grey. */
    background: #e8e6e2;
  }
  /* The price moves into the dock rather than appearing twice, which also
     keeps the dock from ever covering it in the flow. */
  .price { display: none; }

  .dock__price {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .dock__price span {
    display: block;
    font-family: var(--text);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--ink-soft);
  }
  .cta--dock { flex: 1; max-width: 340px; min-height: 54px; padding: 15px 22px; font-size: 17px; }
  .cart { margin-top: 20px; }
}

/* ----------------------------------------------------------------- motion
   Every part of this page is painted by the HTML and the CSS and is visible on
   its own. The script adds .anim to play a short rise over it, so the only
   moment anything is invisible is inside an animation the page itself just
   started. No script, no observer, no class: the page is simply finished. */
.anim { animation: rise 680ms cubic-bezier(.23, 1, .32, 1) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .anim { animation: none; }
}