/* ============================================================
   Product landing page — mobile-first
   Base styles target a phone; the media query near the bottom
   widens things out for tablet and desktop.
   ============================================================ */

:root {
  --bg:          #ffffff;
  --band:        #111111;
  --ink:         #14130f;
  --ink-soft:    #57534c;
  --ink-faint:   #8b857c;
  --line:        #e7e2d8;
  --surface:     #faf8f4;
  --accent:      #13181c;
  --accent-ink:  #ffffff;
  --good:        #0f8a4d;
  --star:        #e0a02a;
  /* Sale red, used for every price figure. Set it back to var(--ink)
     and the save pill back to var(--good) to undo the whole thing. */
  --sale:        #d0021b;

  --radius:      12px;
  --radius-lg:   18px;
  --pad:         18px;
  --maxw:        620px;
  /* Width of the phone column, held at every viewport. */
  --col:         480px;
}

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

/* The UA sheet gives [hidden] display:none at very low specificity, so
   any author rule setting display (.unit, .livepill…) silently beats it
   and the element shows anyway. This makes hidden actually hidden. */
[hidden] { display: none !important; }

/* The page is a phone-width column at every viewport — the same
   single-column layout on a desktop monitor as on a handset. The
   backdrop fills whatever space is left over. */
html { background: #edeae4; }

body {
  margin: 0 auto;
  max-width: var(--col);
  min-height: 100vh;
  box-shadow: 0 0 40px rgba(0,0,0,.07);
  background: var(--bg);
  color: var(--ink);
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; }

.muted { color: var(--ink-faint); font-size: .88rem; }

/* Sections share one mobile gutter and a max width so the page
   stays a readable column when the viewport grows. */
main > section,
.footer { padding-inline: var(--pad); }

.buybox, .story, .included, .specs, .reviews {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* ---------- Top bar ---------- */

.topbar {
  background: var(--band);
  color: #fff;
  text-align: center;
  padding: 12px var(--pad) 14px;
}
.topbar__line {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.topbar__brand:not(:empty) { margin-top: 12px; display: flex; justify-content: center; }
.topbar__brand img { height: 40px; width: auto; }

/* ---------- Countdown band ---------- */

.countdown {
  background: #1d1d1d;
  color: #fff;
  text-align: center;
  padding: 14px var(--pad) 16px;
  border-top: 1px solid #2c2c2c;
}
.countdown__label {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}
.countdown__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.countdown__clock i { font-style: normal; font-size: 1.5rem; line-height: 1; opacity: .4; }
.unit { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.unit strong { font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.unit span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-top: 5px; }

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

.hero { padding: 0; }

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--surface);
}
.carousel::-webkit-scrollbar { display: none; }
.carousel img {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 14px 0 4px;
}
.dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}
.dot.is-active { background: var(--accent); }

/* ---------- Buy box ---------- */

.buybox { padding-top: 14px; padding-bottom: 34px; }

.buybox h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .45em;
}

/* Stars render as a filled layer clipped over an empty one, so any
   fractional score (4.8, 3.5) shows the exact partial star. */
.stars {
  position: relative;
  display: inline-block;
  font-size: .95rem;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.stars__base { color: var(--line); }
.stars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--star);
}

/* Trustpilot row above the title. The widget draws its own branding
   once it has a real business unit ID; until then this reserves the
   space so the layout does not jump when it loads. */
.trustrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.trustrow__count {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trustrow__on { font-size: .88rem; color: var(--ink-soft); }
.trustrow__brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.trustrow__brand svg { width: 17px; height: 17px; flex: none; }

.ratingrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.ratingrow__count { font-size: .87rem; color: var(--ink-soft); }

.pricerow { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.price { font-size: 2.15rem; font-weight: 700; letter-spacing: -.03em; color: var(--sale); }
.price__was { font-size: 1.05rem; color: var(--ink-faint); text-decoration: line-through; }
.price__save {
  background: var(--good);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.vat { font-size: .82rem; color: var(--ink-faint); margin-top: 5px; }

/* ---------- Price callout ---------- */

.callout {
  display: flex;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 15px;
  background: #fdf6dc;
  border: 1px solid #f0e2ad;
  border-radius: var(--radius);
}
.callout__ico {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 2px;
  border-radius: 999px;
  background: #b8860b;
  color: #fff;
  display: grid; place-items: center;
  font-size: .72rem;
  font-weight: 700;
  font-style: italic;
}
.callout__head { margin: 0 0 3px; font-weight: 700; font-size: .9rem; color: #6b5310; }
.callout__body { margin: 0; font-size: .85rem; line-height: 1.5; color: #7a6320; }

/* ---------- Live viewers ---------- */

.livepill {
  display: inline-block;
  margin: 12px 0 0;
  padding: 7px 14px;
  background: #e4f2f8;
  border-radius: 999px;
  font-size: .84rem;
  color: #23596f;
}

/* ---------- Sold / stock lines ---------- */

.soldline {
  margin: 16px 0 0;
  font-size: .87rem;
  font-weight: 600;
  color: var(--sale);
}
.stockline {
  margin: 10px 0 0;
  font-size: .86rem;
  color: var(--ink-soft);
}
.stockline strong { color: var(--sale); font-weight: 700; }

.stockbar {
  height: 6px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.stockbar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e8664f, var(--sale));
  transition: width .6s ease;
}

/* ---------- Recent-purchase toasts ---------- */

.toasts {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 45;
  margin-inline: auto;
  max-width: 448px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(17, 17, 17, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  animation: toast-in .32s ease both;
}
.toast.is-leaving { animation: toast-out .32s ease both; }
.toast img {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.toast__name { margin: 0; font-size: .88rem; font-weight: 700; line-height: 1.25; }
.toast__line { margin: 0; font-size: .88rem; line-height: 1.25; }
.toast__time { margin: 0; font-size: .75rem; line-height: 1.4; color: rgba(255, 255, 255, .7); }

@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes toast-out { from { opacity: 1 } to { opacity: 0; transform: translateY(6px) } }

/* ---------- Colour tiles ---------- */

.pick {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  margin: 28px 0 14px;
}
.pick span { font-weight: 700; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.tile {
  padding: 0;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: var(--ink-soft);
  transition: border-color .15s ease;
}
.tile img { aspect-ratio: 1 / 1; object-fit: cover; }
.tile span {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  padding: 6px 4px;
  background: #fff;
}
.tile.is-active { border-color: var(--accent); }
.tile.is-active span { color: var(--ink); }

/* ---------- Line summary ---------- */

.summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.summary > img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; }
.summary div { flex: 1; min-width: 0; }
.summary__name { margin: 0; font-weight: 600; font-size: .93rem; }
.summary__meta { margin: 0; font-size: .8rem; color: var(--ink-faint); }
.summary__price { font-weight: 700; font-size: .98rem; color: var(--sale); }

/* ---------- Buy row ---------- */

.buyrow { display: flex; gap: 10px; margin-top: 16px; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: none;
}
.qty__btn {
  width: 42px; height: 54px;
  background: none; border: 0;
  font-size: 1.2rem; cursor: pointer;
  color: var(--ink-soft);
}
.qty__input {
  width: 34px; height: 54px;
  border: 0; text-align: center;
  font: inherit; font-weight: 700;
  background: none; color: var(--ink);
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn {
  flex: 1;
  min-height: 54px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; flex: none; }

/* ---------- Delivery ---------- */

.delivery {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.delivery__head { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.delivery__time { margin: 4px 0 6px; font-size: 1.1rem; font-weight: 700; }
.delivery__note { margin: 0; font-size: .8rem; color: var(--ink-faint); }

.payments {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 14px auto 0;
}

.assurances {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-size: .88rem;
  color: var(--ink-soft);
}
.assurances li { position: relative; padding-left: 20px; }
.assurances li::before {
  content: "";
  position: absolute; left: 3px; top: .6em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--good);
}

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

.story { padding-block: 28px; text-align: center; }
/* The supplied clips are 4:5 portrait — matching the ratio keeps them
   uncropped instead of slicing the top and bottom off. */
.story__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.story h2 {
  font-size: 1.28rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.story p { color: var(--ink-soft); margin: 0; }

/* ---------- Included / specs ---------- */

.included, .specs, .reviews { padding-block: 30px; }

.included h2, .specs h2, .reviews h2 {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1em;
}

.included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.included li {
  position: relative;
  padding: 12px 14px 12px 34px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: .92rem;
}
.included li::before {
  content: "";
  position: absolute; left: 14px; top: 1.28em;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent);
}

.specs table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.specs th, .specs td { text-align: left; padding: 12px 14px; font-size: .9rem; }
.specs th { width: 46%; font-weight: 600; color: var(--ink-soft); background: var(--surface); }
.specs tr + tr th, .specs tr + tr td { border-top: 1px solid var(--line); }

/* ---------- Reviews ---------- */

.trustbox {
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  text-align: center;
}
.trustbox__note { margin: 0; font-size: .78rem; color: var(--ink-faint); }
/* Once the real widget loads it draws its own branding — drop the
   dashed placeholder framing at that point. */
.trustbox:has(iframe) { border-style: solid; }
.trustbox:has(iframe) .trustbox__note { display: none; }

.reviews__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.reviews__summary > strong { font-size: 1.7rem; font-weight: 700; }
.reviews__summary p { margin: 0; width: 100%; text-align: center; font-size: .86rem; color: var(--ink-soft); }

.review {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.review + .review { margin-top: 10px; }
.review header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.review__author { font-weight: 600; font-size: .9rem; }
.review h3 { font-size: .96rem; font-weight: 600; margin-bottom: .35em; }
.review p { font-size: .89rem; color: var(--ink-soft); margin-bottom: .5em; }
.review__date { font-size: .78rem; color: var(--ink-faint); margin: 0; }

/* ---------- Demo review content (showcase only) ----------
   Everything below dresses the data-demo block in index.html: the
   stand-in Trustpilot card and the populated review cards. It comes
   out with that block once the Shopify review app is wired up —
   except .tp-stars, which the rating row under the title also uses. */

.reviews[data-demo] .trustbox { display: none; }

.tp-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 16px;
  margin-bottom: 16px;
  text-align: center;
}
.tp-card__score {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.tp-card__count { margin: 12px 0 16px; font-size: .87rem; color: var(--ink-soft); }
.tp-card__count strong { font-weight: 600; color: var(--ink); }
.tp-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 2px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
.tp-card__brand svg { width: 22px; height: 22px; flex: none; }
.tp-card__verdict { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* Trustpilot draws its rating as filled squares rather than glyphs. */
.tp-stars { display: flex; justify-content: center; gap: 3px; }
.tp-stars span {
  width: 30px;
  height: 30px;
  background: #00b67a;
  display: grid;
  place-items: center;
}
.tp-stars span::before { content: "★"; color: #fff; font-size: 15px; line-height: 1; }
.tp-stars--sm { justify-content: flex-start; margin-bottom: 10px; }
.tp-stars--sm span { width: 24px; height: 24px; }
.tp-stars--sm span::before { font-size: 12px; }
.tp-stars--xs { justify-content: flex-start; gap: 2px; }
.tp-stars--xs span { width: 22px; height: 22px; }
.tp-stars--xs span::before { font-size: 11px; }
/* A fractional score fills the square only as far as the score goes;
   the remainder takes Trustpilot's empty grey. */
.tp-stars span.is-half { background: linear-gradient(90deg, #00b67a 50%, #dcdce6 50%); }

/* The populated card carries an avatar and a photo, so the header lines
   up from the left instead of spreading edge to edge. */
.review header.review__head { justify-content: flex-start; gap: 11px; }
.review__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.review__head .review__author { display: block; }
.review__badge { display: block; font-size: .78rem; color: var(--ink-faint); line-height: 1.3; }
.review__photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin: 2px 0 10px;
}

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

.footer {
  background: var(--band);
  color: #c9c4bb;
  padding-top: 34px;
  padding-bottom: 40px;
  font-size: .9rem;
}
.footer__brand { margin-bottom: 26px; max-width: var(--maxw); margin-inline: auto; }
.footer__brand img { height: 34px; width: auto; }

.footer h3 { color: #fff; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9em; }
.footer__col { margin-bottom: 26px; max-width: var(--maxw); margin-inline: auto; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Policy items carry no href yet — underlined so they still read as
   links. Drop this rule once each one is wrapped in a real <a>. */
.policies li { text-decoration: underline; width: fit-content; }

.assist li { display: flex; flex-direction: column; gap: 1px; }
.assist span { font-size: .78rem; color: #948d84; }
.assist strong { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.footer p { margin: 0 0 6px; }
.footer .muted { color: #948d84; }
.footer__emails {
  border-top: 1px solid #2b2b2b;
  padding-top: 18px;
  max-width: var(--maxw);
  margin-inline: auto;
  font-size: .86rem;
}
.footer__emails p { margin: 0 0 6px; }
.footer__emails p:last-child { margin-bottom: 0; }



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