/* Drops Store — the one stylesheet (SPEC sections 5 and 9.1).
   Two looks, light and dark. Every color lives in the variables below, one set per look.
   One warm main color, near-black and off-white (a muted palette; primary colors read as budget).
   The phone follows its own light or dark setting; the header button flips it and the phone remembers.
   The dark set is written twice (for the phone's own dark setting, and for the button's choice);
   tools\check.mjs fails if the two copies ever differ, so change both together.
   Contrast (WCAG AA) is measured and written in BUILD-REPORT.md.
   Phone first: one column, 390 px wide, nothing wider at 320; a bigger screen gets the same column, centered.
   The phone's own fonts; nothing is downloaded. */

:root {
  /* LIGHT LOOK */
  --bg: #faf7f2;
  --soft: #f2ece3;
  --ink: #1c1917;
  --muted: #57514b;
  --main: #9a3b1b;
  --on-main: #fffaf3;
  --line: #8a7f73;
  --glow: #f6d8c2;
  --heat: none;
  --sun: none;
  --moon: block;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* DARK LOOK */
    --bg: #161311;
    --soft: #221d19;
    --ink: #f3eee6;
    --muted: #bdb3a7;
    --main: #e8a06e;
    --on-main: #1a110b;
    --line: #80766b;
    --glow: #3d2217;
    --heat: 0 0 0 1px rgba(232, 160, 110, 0.35), 0 8px 24px -10px rgba(232, 160, 110, 0.6);
    --sun: block;
    --moon: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  /* DARK LOOK */
  --bg: #161311;
  --soft: #221d19;
  --ink: #f3eee6;
  --muted: #bdb3a7;
  --main: #e8a06e;
  --on-main: #1a110b;
  --line: #80766b;
  --glow: #3d2217;
  --heat: 0 0 0 1px rgba(232, 160, 110, 0.35), 0 8px 24px -10px rgba(232, 160, 110, 0.6);
  --sun: block;
  --moon: none;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 18px; }

a { color: var(--main); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, summary:focus-visible, .gallery:focus-visible {
  outline: 3px solid var(--main);
  outline-offset: 3px;
  border-radius: 6px;
}

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

h1 { font-size: 1.85rem; line-height: 1.2; letter-spacing: -0.01em; margin: 10px 0 8px; }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 34px 0 10px; }
p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 4px; }

/* The skip link: hidden until a keyboard lands on it. */
.skip {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: var(--main);
  color: var(--on-main);
  font-weight: 700;
  border-radius: 8px;
}
.skip:focus { top: 8px; }

/* The draft band (preview only) and a blank a page would print (preview only). */
.band { background: var(--main); color: var(--on-main); font-weight: 700; text-align: center; padding: 10px 16px; letter-spacing: 0.04em; }
.unset { color: var(--main); font-weight: 700; border: 1px dashed var(--main); padding: 0 4px; }
.headmarks { font-size: 0.85rem; color: var(--muted); margin: 10px 0 0; }

/* The header: the store's name, the drops link, the light and dark button. */
.top { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 6px; min-height: 60px; }
.home { flex: 1 1 auto; display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.navlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.bar nav, .theme { flex: 0 0 auto; }
.theme {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
}
html[data-theme] .theme { display: inline-flex; }
.theme .sun { display: var(--sun); }
.theme .moon { display: var(--moon); }

/* The one-line notice bar: printed only when its line is true. */
.notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--soft); font-weight: 600; font-size: 0.95rem; }

/* The picture gallery: a swipe row, no script. */
.gallery {
  display: flex;
  gap: 10px;
  margin: 10px 0 2px;
  padding: 4px 4px 24px; /* room for the dark look's glow, which the swipe row would otherwise clip */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery > li { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
/* Every picture sits in the same square frame, so a wide one leaves no blank band under the row.
   The frame carries the "heat" glow (SPEC 11.4): --heat is none in the light look, a soft warm halo in the dark. */
.gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; background: var(--soft); }
.gallery img, .gallery .nopic { box-shadow: var(--heat); }
.swipe { font-size: 0.85rem; color: var(--muted); margin: 0 0 8px; }

.nopic {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.kicker { margin: 18px 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lede { font-size: 1.1rem; color: var(--ink); }
.price { font-size: 1.5rem; font-weight: 800; margin: 6px 0 4px; }
.delivery { color: var(--muted); }
.status { font-weight: 700; }

/* Sizes or colors: big buttons, each its own Buy link. */
.variants { list-style: none; padding: 0; margin: 14px 0 0; }
.variants li { margin: 0 0 10px; }

/* The Buy link: the one strong color, full width, 52 px tall, the price inside, a tick drawn in CSS. */
.buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 16px 0 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--main);
  color: var(--on-main);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.variants .buy { margin: 0; }
.buy::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 15px;
  margin-top: -4px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.buy-off { display: block; background: transparent; color: var(--ink); border: 2px dashed var(--line); font-weight: 700; }
.buy-off::before { display: none; }

/* The trust row: each mark only when true. */
.trust { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; }

.benefits { padding-left: 0; list-style: none; margin: 18px 0; }
.benefits li { position: relative; padding-left: 28px; margin-bottom: 8px; font-weight: 600; }
.benefits li::before { content: ""; position: absolute; left: 4px; top: 0.35em; width: 7px; height: 13px; border: solid var(--main); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* Specs: a plain two-column table. */
.specs { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); }
.specs th { width: 40%; font-weight: 600; color: var(--muted); }

.label { font-size: 0.95rem; }

/* The FAQ: plain disclosure rows, no script. */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--main); font-size: 1.4rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 14px; }

.guarantee { margin: 28px 0 14px; padding: 16px; border: 2px solid var(--main); border-radius: 12px; }
.guarantee h2 { margin-top: 0; }

.reviews blockquote { margin: 0 0 14px; padding: 14px 16px; background: var(--soft); border-radius: 12px; }
.reviews p { margin: 0 0 6px; }
.reviews footer { color: var(--muted); font-size: 0.9rem; }

.ended { font-weight: 800; font-size: 1.15rem; }

/* Home: product cards, the why-buy-here strip, the drop calendar. */
.cards { list-style: none; padding: 0; margin: 18px 0 0; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 18px; background: var(--soft); }
.card img { border-radius: 10px; }
.card h2 { margin: 12px 0 4px; }
.card h2 a { display: flex; align-items: center; min-height: 44px; color: var(--ink); }
.card p { margin: 0 0 6px; }

.why { list-style: none; padding: 0; margin: 18px 0; }
.why li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.why li::before { content: ""; position: absolute; left: 4px; top: 0.35em; width: 7px; height: 13px; border: solid var(--main); border-width: 0 3px 3px 0; transform: rotate(45deg); }

.calendar { list-style: none; padding: 0; margin: 0 0 14px; }
.calendar li { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.calendar strong { display: block; }
.calendar .when { color: var(--muted); }
.open-now { font-weight: 700; color: var(--main); }
/* What a drop holds: one product to a line, each a thumb-sized link (fix round 2026-10-20). */
.calendar .holds { list-style: none; padding: 0; margin: 2px 0 0; }
.calendar .holds li { padding: 0; border-bottom: 0; margin: 0; }
.holds a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* A link inside a sentence (fix round 2026-10-20): a 44 px tap target of its own. It sits in the
   sentence as one piece, 44 px tall, so the line it is on opens up to hold it; a padded inline link
   was tried first and lost the bottom of its tap to a link on the line under it. The stand-alone
   links above have their own 44 px rules. */
main a:not([class]):not(.go a, .guides a, .holds a, .card a) { display: inline-flex; align-items: center; min-height: 44px; }

/* The footer: the business name, the support email, the five policy pages. */
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 14px 0 28px; }
.foot p { margin: 0 0 4px; }
.mail a { display: inline-flex; align-items: center; min-height: 44px; }
.links { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.links li { margin: 0; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px 0 0; }

/* The pitch (SPEC 11.2): the pre-sell story on the product page, set apart by a warm rule. */
.story { margin: 26px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--main); }
.story h2 { margin-top: 18px; font-size: 1.15rem; }

/* Tips and guides (SPEC 10.7): the guide list on home, big enough for a thumb. */
.guides { list-style: none; padding: 0; margin: 0 0 14px; }
.guides li { margin: 0; border-bottom: 1px solid var(--line); }
.guides a { display: flex; align-items: center; min-height: 44px; font-weight: 600; }

/* A line that is one link and nothing else: a thumb-sized target (round 1d; 1b's and 1c's measure missed these). */
.go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* The hook (SPEC 11.1): the first screen of the home page, full width on a phone (it steps out of the
   column's 18 px side padding), with a slow warm gradient behind it between two palette colors,
   --soft and --glow. The words sit on the hero's own layer; the gradient is a layer under them. */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 0 -18px;
  padding: 28px 18px 24px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -60%;
  background: linear-gradient(115deg, var(--soft) 22%, var(--glow) 50%, var(--soft) 78%);
}
.hero h1 { font-size: 2.05rem; line-height: 1.15; margin: 0 0 12px; }
.hero-promise { font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }
.hero-proof { list-style: none; padding: 0; margin: 0 0 18px; }
.hero-proof li { position: relative; padding-left: 28px; margin-bottom: 6px; }
.hero-proof li::before { content: ""; position: absolute; left: 4px; top: 0.35em; width: 7px; height: 13px; border: solid var(--main); border-width: 0 3px 3px 0; transform: rotate(45deg); }
@media (min-width: 600px) { .hero { margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; } }

/* The hero's button: the same strong color as Buy (SPEC 11.1), the same size, no tick. */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--main);
  color: var(--on-main);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

/* "How it works" (SPEC 11.3): three steps, each with its drawn icon. */
.how { margin: 30px 0 8px; }
.how h2 { margin-top: 0; }
.how-steps { list-style: none; padding: 0; margin: 0; }
.how-steps li { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.how-icon { flex: 0 0 auto; color: var(--main); }
.how h3 { font-size: 1.05rem; line-height: 1.3; margin: 2px 0 4px; }
.how-steps p { margin: 0; }

/* The Buy button's hover and press (SPEC 11.4): a lift and a press, no color change, so its contrast holds. */
a.buy:hover, .cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--main); }
a.buy:active, .cta:active { transform: translateY(1px) scale(0.99); box-shadow: none; }

/* ---------- Motion (SPEC 11.4): all CSS, no script ----------
   Every animation and transition here is two seconds or less, but the hero's gradient drift (20 s, a
   slow slide of two palette colors, never a flash). Nothing is hidden when an animation cannot run:
   nothing outside a @keyframes block sets opacity 0, the section rise sits inside
   @supports (animation-timeline: view()) so a browser without it shows every section as it is, and
   every motion stops under prefers-reduced-motion: reduce (the rule at the bottom).
   tools\check.mjs enforces all of this. */
@keyframes hero-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hero-drift { from { transform: translate3d(-18%, -6%, 0); } to { transform: translate3d(18%, 6%, 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: hero-in 0.9s ease-out both; }
  .hero::before { animation: hero-drift 20s ease-in-out infinite alternate; }
  a.buy, .cta { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .gallery img, .gallery .nopic { transition: box-shadow 1.2s ease; }
  .gallery { scroll-behavior: smooth; }
}

/* The section fade-and-rise as it enters the screen, only where the browser has scroll-driven animations. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(.hero), main > .cards > li, main > .faq, main > .specs, main > .calendar {
      animation: rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}