/* ==========================================================================
   SMOVF FRAGRANCE — PAGE PATTERNS
   Hero, intent router, product detail, cart, contact.
   ========================================================================== */

/* ==========================================================================
   HERO  (homepage)
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(84svh, 760px);
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media picture { display: contents; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim keeps headline legible over photography without a heavy gradient */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.55) 0%,
    rgba(17, 17, 17, 0.28) 42%,
    rgba(17, 17, 17, 0.82) 100%
  );
}

.hero__inner { padding-block: var(--space-2xl) var(--space-xl); }

@media (min-width: 900px) {
  .hero__inner { padding-block: var(--space-3xl); }
}

.hero__content { max-width: 44rem; color: var(--white); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--white);
  margin-bottom: var(--space-md);
}

/* Supporting message — separated fragments with gold dividers */
.hero__support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}

.hero__support span { display: inline-flex; align-items: center; gap: var(--space-sm); }
.hero__support span:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--smovf-gold);
  border-radius: 50%;
}

/* Scroll cue */
.hero__cue {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-xl);
  writing-mode: vertical-rl;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 1180px) { .hero__cue { display: block; } }

.hero__cue::after {
  content: "";
  display: block;
  width: 1px; height: 52px;
  margin: var(--space-2xs) auto 0;
  background: linear-gradient(var(--smovf-gold), transparent);
}

/* ---------- Page hero (inner pages) ------------------------------------- */
.page-hero {
  position: relative;
  padding-block: var(--space-2xl);
  background: var(--neutral);
  overflow: hidden;
}

.page-hero--dark { background: var(--black); color: var(--text-on-dark); }
.page-hero--dark h1,
.page-hero--dark h2 { color: var(--white); }

.page-hero__inner { position: relative; max-width: 52rem; }

@media (min-width: 900px) {
  .page-hero { padding-block: var(--space-3xl) var(--space-2xl); }
}

/* Campaign photo behind the join hero.

   The hero is already dark with white type, so the photo sits behind it under
   a scrim rather than beside it: a headline over a photograph is unreadable
   without one, and the contrast has to hold whatever the shop uploads. The
   gradient is opaque on the left, where the text is, and thins out to the
   right so the picture is still a picture.

   object-position is set inline by js/join.js from the image's stored focal
   point, so a photo of a person does not get cropped to their shoulder. */
.join-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* <picture> is a wrapper with no box of its own to give, so it is taken out
   of the layout entirely — otherwise the img inside it sizes against the
   picture rather than against the hero, and the 100% height means nothing. */
.join-hero__media > picture { display: contents; }

.join-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim that keeps white type readable over a photograph nobody has seen
   yet. The shop uploads whatever it likes, so the worst case is a photo that
   is white exactly where the heading falls, and this has to hold there.

   The default is flat, because on anything but a wide screen the text fills
   the hero and there is nowhere for a gradient to thin out to. A directional
   scrim was tried first and measured 2.71:1 on a phone — which is where a
   scanned QR is opened almost every time. */
.join-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(17 17 17 / 0.78);
}

/* Only once the viewport is comfortably wider than the 52rem text column is
   there room to let the picture come through on the right without the type
   ever reaching the pale end of it. */
@media (min-width: 1200px) {
  .join-hero__media::after {
    background: linear-gradient(
      100deg,
      rgb(17 17 17 / 0.88) 0%,
      rgb(17 17 17 / 0.82) 40%,
      rgb(17 17 17 / 0.74) 62%,
      rgb(17 17 17 / 0.34) 100%
    );
  }
}

.join-hero__media[hidden] { display: none; }

/* The text has to sit above both. .page-hero__inner is already relative; this
   only adds the stacking order. */
[data-join-hero] .page-hero__inner { z-index: 1; }

/* The offer, stated before the form rather than after it. */
.join-hero__offer {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  background: var(--smovf-gold);
  color: var(--text-on-gold);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 900px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.trust__item svg { width: 20px; height: 20px; color: var(--smovf-gold-deep); flex: none; margin-top: 2px; }
.trust__item strong { display: block; color: var(--text-heading); font-weight: var(--fw-medium); }

/* ==========================================================================
   INTENT ROUTER
   The five customer intentions, surfaced as navigable paths.
   ========================================================================== */

.intent-grid { display: grid; gap: var(--space-2xs); }

@media (min-width: 700px) {
  .intent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
}

@media (min-width: 1100px) {
  .intent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.intent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg) var(--space-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.intent:hover { border-color: var(--smovf-gold); background: var(--smovf-gold-tint); }

.intent__want {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.intent__answer {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--text-heading);
}

.intent__note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: auto; padding-top: var(--space-2xs); }

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */

.category {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}

.category img { transition: transform var(--dur-slow) var(--ease); }
.category:hover img { transform: scale(1.05); }

/* The overlay and its children are spans (a valid anchor's only permitted
   content), so each needs an explicit block display or the title and the
   category meta run together on one line. */
.category__overlay {
  display: block;
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(transparent, rgba(17, 17, 17, 0.88));
  color: var(--white);
}

.category__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 2px;
}

.category__meta {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
}

.category::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
  pointer-events: none;
}

.category:hover::after { border-color: var(--smovf-gold); }

/* ==========================================================================
   SCENT NOTES PYRAMID
   ========================================================================== */

.notes { display: grid; gap: var(--space-sm); }

@media (min-width: 640px) {
  .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.note {
  padding: var(--space-md);
  background: var(--neutral);
  border-radius: var(--radius);
  border-top: 2px solid var(--smovf-gold);
}

.note__tier {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}

.note__items { font-size: var(--fs-sm); color: var(--charcoal); }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */

.pdp { display: grid; gap: var(--space-xl); }
.pdp > * { min-width: 0; }

@media (min-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
}

.pdp__gallery { display: grid; gap: var(--space-2xs); }

@media (min-width: 900px) {
  .pdp__gallery { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}

.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xs); }

.pdp__thumb {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--neutral);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color var(--dur) var(--ease);
}

.pdp__thumb picture { display: contents; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--smovf-gold); border-width: 2px; }

.pdp__title { font-size: var(--fs-h1); margin-bottom: var(--space-2xs); }

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  margin-bottom: var(--space-md);
}

.pdp__price del { font-size: var(--fs-body); color: var(--text-muted); font-weight: var(--fw-regular); }

.pdp__badges { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-bottom: var(--space-sm); }

.pdp__group { margin-block: var(--space-md); }

.pdp__group-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: var(--space-2xs);
}

.pdp__variants { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.variant {
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--charcoal);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.variant:hover { border-color: var(--black); }

.variant[aria-pressed="true"] {
  border-color: var(--smovf-gold);
  background: var(--smovf-gold-tint);
  color: var(--black);
  font-weight: var(--fw-medium);
}

.pdp__buy {
  display: grid;
  gap: var(--space-2xs);
  align-items: center;
  margin-block: var(--space-md);
}

@media (min-width: 520px) {
  .pdp__buy { grid-template-columns: auto 1fr; }
}

.pdp__secondary-actions { display: grid; gap: var(--space-2xs); }

@media (min-width: 520px) {
  .pdp__secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Recommendation tags — future-ready fields for Phase 2 */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }

.tag {
  padding: 0.3rem 0.65rem;
  background: var(--neutral);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   SHOP
   ========================================================================== */

.shop { display: grid; gap: var(--space-lg); }
.shop > * { min-width: 0; }

@media (min-width: 1024px) {
  .shop { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
}

.shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.shop__count { font-size: var(--fs-sm); color: var(--text-muted); }
.shop__count strong { color: var(--text-heading); font-weight: var(--fw-medium); }

.shop__sort { display: flex; align-items: center; gap: var(--space-2xs); }
.shop__sort label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.shop__sort .select { min-height: 42px; width: auto; min-width: 180px; }

.filters { display: grid; gap: var(--space-md); }
/* fieldset carries an intrinsic min-width from its content in every
   browser, which stops the scrolling filter row from shrinking. */
.filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.filters legend {
  padding: 0 0 var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.product-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

@media (min-width: 960px) { .product-grid { gap: var(--space-lg); } }

/* ==========================================================================
   CART
   ========================================================================== */

.cart { display: grid; gap: var(--space-xl); align-items: start; }
.cart > * { min-width: 0; }

@media (min-width: 960px) {
  .cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) {
  .cart-line { grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; }
}

.cart-line__media { border-radius: var(--radius); overflow: hidden; background: var(--neutral); aspect-ratio: 4/5; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: 2px; }
.cart-line__meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--space-2xs); }
.cart-line__price { font-weight: var(--fw-medium); color: var(--text-heading); }

.cart-line__remove {
  background: none; border: 0; padding: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-line__remove:hover { color: var(--accent-text); }

.summary {
  padding: var(--space-lg);
  background: var(--neutral);
  border-radius: var(--radius-lg);
}

@media (min-width: 960px) {
  .summary { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.summary__row--total {
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-strong);
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
}

.summary__row--total span:last-child { color: var(--text-heading); }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */

.cta-banner {
  position: relative;
  padding-block: var(--section-y);
  background: var(--black);
  color: var(--text-on-dark);
  overflow: hidden;
}

.cta-banner__inner { position: relative; max-width: 46rem; }
.cta-banner h2 { color: var(--white); }

/* Fine gold hairline at the top edge */
.cta-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--smovf-gold), transparent 55%);
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */

.quote {
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 2px solid var(--smovf-gold);
  border-radius: var(--radius);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.quote blockquote {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--text-heading);
}

.quote figcaption { margin-top: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.quote figcaption strong { display: block; color: var(--text-heading); font-weight: var(--fw-medium); font-size: var(--fs-sm); }

/* ==========================================================================
   LOGO WALL
   ========================================================================== */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 700px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: var(--space-2xs);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact { display: grid; gap: var(--space-xl); align-items: start; }
.contact > * { min-width: 0; }

@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

.contact-card {
  padding: var(--space-lg);
  background: var(--neutral);
  border-radius: var(--radius-lg);
}

.contact-card + .contact-card { margin-top: var(--space-md); }

.contact-item { display: flex; gap: var(--space-sm); padding-block: var(--space-xs); }
.contact-item svg { width: 20px; height: 20px; color: var(--smovf-gold-deep); flex: none; margin-top: 3px; }
.contact-item strong { display: block; color: var(--text-heading); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.contact-item span, .contact-item a { font-size: var(--fs-sm); color: var(--text-muted); }
.contact-item a:hover { color: var(--accent-text); }

/* ==========================================================================
   JOIN / CLAIM A GIFT
   The page a printed QR code lands on. Read on a phone, in a shop, often
   one-handed — so it is a single column with one thing to do at a time.
   ========================================================================== */

.join {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.join__panel[hidden] { display: none; }

/* The gift itself. Dark, because it is the thing being handed over, and
   because a phone screen held up at a counter needs contrast. */
.gift-card {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-on-dark);
}

.gift-card .label { color: var(--smovf-gold); }

.gift-card__terms {
  margin: var(--space-2xs) 0 var(--space-md);
  font-size: var(--fs-h2);
  color: var(--text-on-dark);
}

/* Monospaced and widely tracked: this gets read aloud across a counter and
   typed into a till, so every character has to be unmistakable. */
.gift-card__code {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
  letter-spacing: 0.22em;
  /* The tracking is applied to the right of each character, including the
     last, which visually shifts the whole string left inside its box. */
  text-indent: 0.22em;
  color: var(--smovf-gold);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--smovf-gold-line);
  border-radius: var(--radius);
}

.gift-card__qr {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}

/* A white quiet zone around the code — scanners need the contrast, and the
   card behind it is black. */
.gift-card__qr img {
  width: min(240px, 60vw);
  height: auto;
  padding: var(--space-2xs);
  background: var(--white);
  border-radius: var(--radius);
}

.gift-card__meta {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.gift-card__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
}

.join__share {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  text-align: center;
}

.join__code {
  display: inline-block;
  padding: var(--space-2xs) var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-h3);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--text-heading);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.join__actions {
  display: flex;
  gap: var(--space-2xs);
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   JOURNAL
   Post grid, and the article itself. An article is the one place on this
   site where long-form reading is the whole job, so the measure is narrow
   and the vertical rhythm is generous.
   ========================================================================== */

.post-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.post-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.post-grid > * { min-width: 0; }

.post-card { display: flex; flex-direction: column; }

.post-card__media { display: block; margin-bottom: var(--space-sm); }

.post-card__meta {
  margin: 0 0 var(--space-3xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-card__title {
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-2xs);
  line-height: var(--lh-heading);
}

.post-card__title a { color: var(--text-heading); text-decoration: none; }
.post-card__title a:hover { color: var(--accent-text); }

.post-card__excerpt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.pager__count { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------- article */

/* 68 characters or so at the body size — the range prose stays comfortable
   to read at. Wider and the eye loses the start of the next line. */
.article {
  max-width: 42rem;
  margin-inline: auto;
}

.article__head { margin-bottom: var(--space-lg); }

.crumbs {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.article__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-2xs);
}

.article__meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* The cover breaks out of the reading measure — an image is looked at, not
   read, so it does not want the same width as the prose. */
.article__cover {
  margin-bottom: var(--space-xl);
  width: min(100%, 52rem);
  margin-inline: calc((42rem - min(100%, 52rem)) / 2);
}

@media (max-width: 56rem) {
  .article__cover { width: 100%; margin-inline: 0; }
}

.article__body { font-size: var(--fs-lead); line-height: var(--lh-body); }

.article__body > * + * { margin-top: var(--space-md); }

.article__body h2,
.article__body h3,
.article__body h4 {
  margin-top: var(--space-xl);
  line-height: var(--lh-heading);
}

.article__body h2 { font-size: var(--fs-h2); }
.article__body h3 { font-size: var(--fs-h3); }
.article__body h4 { font-size: var(--fs-h4); }

.article__body ul,
.article__body ol { padding-left: 1.4em; }
.article__body li + li { margin-top: var(--space-2xs); }

.article__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.article__body blockquote {
  padding-left: var(--space-md);
  border-left: 3px solid var(--smovf-gold);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}

.article__body blockquote p { margin: 0; }

.article__body code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.article__body pre {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius);
  /* Code does not reflow, so it scrolls inside its own box rather than
     pushing the page sideways. */
  overflow-x: auto;
}

.article__body pre code {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}

.article__body hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.article__foot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.article__related {
  max-width: var(--container);
  margin: var(--space-3xl) auto 0;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}

.article__related h2 { margin-bottom: var(--space-lg); }

/* ==========================================================================
   CHECKOUT

   The same two-column shape as the cart, so the step from one to the other
   does not feel like a different site. The summary is sticky on a wide screen
   and simply sits below the form on a narrow one — a fixed bar pinned over a
   phone keyboard is the classic way to hide the field someone is typing in.
   ========================================================================== */

.checkout { display: grid; gap: var(--space-xl); align-items: start; }
.checkout > * { min-width: 0; }

@media (min-width: 960px) {
  .checkout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

.checkout__block {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.checkout__block legend {
  padding: 0;
  margin-bottom: var(--space-sm);
}

.form-grid--2 { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- choices */

/* Radio choices as cards. The whole card is the label, so the target is the
   full width of the row rather than a 16px circle — which matters most on the
   payment step, on a phone, at the end of a purchase. */
.choice-list { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.choice:hover { border-color: var(--border-strong); }

.choice input { margin-top: 0.28em; flex: none; accent-color: var(--smovf-gold-deep); }

.choice:has(input:checked) {
  border-color: var(--smovf-gold-line);
  background: var(--smovf-gold-tint);
}

/* :has() is not everywhere yet. Without it the choice still works — it just
   does not tint — so this is an enhancement rather than a dependency. */
.choice:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__label { font-weight: var(--fw-medium); color: var(--text-heading); }
.choice__hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }

/* ------------------------------------------------------------- gift code */

.gift-row {
  margin-block: var(--space-md);
  padding-block: var(--space-md);
  border-block: 1px solid var(--border);
}

.gift-row .label { display: block; margin-bottom: var(--space-3xs); }

.gift-row__input { display: flex; gap: var(--space-2xs); }
.gift-row__input .input { min-width: 0; text-transform: uppercase; }
.gift-row__input .btn { flex: none; }

.form-note--warn { color: var(--error-text); }

/* ==========================================================================
   ORDER STATUS PAGE
   ========================================================================== */

.order { max-width: 46rem; margin-inline: auto; }

.order__head { margin-bottom: var(--space-xl); }
.order__head h1 { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.order__placed { font-size: var(--fs-sm); color: var(--text-muted); }

.order__status {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  background: var(--neutral);
  color: var(--text);
}

/* Paid and beyond read as settled; cancelled and refunded read as stopped.
   Everything else is simply in progress and stays neutral. */
.order__status--paid,
.order__status--packing,
.order__status--shipped,
.order__status--completed {
  background: var(--success-tint);
  color: var(--success-text);
}

.order__status--cancelled,
.order__status--refunded {
  background: var(--error-tint);
  color: var(--error-text);
}

.order__next {
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--neutral);
  border-radius: var(--radius-lg);
}

.order__next h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2xs); }

.order__bank {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-md);
  margin-block: var(--space-md);
}

.order__bank dt { font-size: var(--fs-xs); color: var(--text-muted); }
.order__bank dd { font-weight: var(--fw-medium); color: var(--text-heading); }

.order__qr { margin-block: var(--space-md); }
.order__qr img { display: block; background: var(--white); padding: var(--space-2xs); border-radius: var(--radius); }
.order__qr figcaption { margin-top: var(--space-3xs); font-size: var(--fs-xs); color: var(--text-muted); }

.order__slip { margin-top: var(--space-md); }
.order__slip-done { margin-top: var(--space-md); font-size: var(--fs-sm); color: var(--success-text); }

.order__detail h2 { font-size: var(--fs-h3); margin-bottom: var(--space-sm); }

.order__items { width: 100%; border-collapse: collapse; margin-bottom: var(--space-xl); }
.order__items th, .order__items td { padding: var(--space-xs) 0; text-align: left; }
.order__items .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.order__items thead th {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}

.order__items tbody td { border-bottom: 1px solid var(--border); }
.order__items tfoot th { font-weight: var(--fw-regular); color: var(--text-muted); }
.order__items tfoot td { color: var(--text); }

.order__items tfoot tr:first-child th,
.order__items tfoot tr:first-child td { padding-top: var(--space-sm); }

.order__total th, .order__total td {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border-strong);
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
}

.order__size { color: var(--text-muted); }
.order__size::before { content: ' · '; }

.order__where h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3xs); }
.order__where p { margin-bottom: var(--space-md); color: var(--text-muted); }

.order__help { font-size: var(--fs-sm); color: var(--text-muted); }

/* ------------------------------------------------------------- notices */

.notice {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

.notice--good { background: var(--success-tint); color: var(--success-text); }
.notice--warn { background: var(--error-tint); color: var(--error-text); }

/* ==========================================================================
   LEGAL PAGES

   Privacy, terms, shipping and returns. Deliberately set smaller and tighter
   than an article: this is reference text somebody scans for one clause, not
   something read end to end, so what matters is that a heading is findable
   and a numbered clause can be quoted back.
   ========================================================================== */

.legal { font-size: var(--fs-body); line-height: var(--lh-body); }

.legal > * + * { margin-top: var(--space-sm); }

.legal h2 {
  margin-top: var(--space-xl);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  /* Cleared, because every heading is a link target from the contents list
     and the sticky header would otherwise sit on top of it. */
  scroll-margin-top: 96px;
}

.legal h3 {
  margin-top: var(--space-lg);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.legal ul,
.legal ol { padding-left: 1.4em; }
.legal li + li { margin-top: var(--space-3xs); }

.legal dt { font-weight: var(--fw-medium); color: var(--text-heading); }
.legal dd { margin: 0 0 var(--space-2xs); }

.legal address { font-style: normal; }

.legal__meta {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-alt);
  border-left: 3px solid var(--smovf-gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.legal__meta p { max-width: none; }
.legal__meta p + p { margin-top: var(--space-2xs); }

.legal__toc { padding-left: 1.4em; font-size: var(--fs-sm); }
.legal__toc li + li { margin-top: var(--space-3xs); }

/* The share row under the shop grid. Set apart from the products above it,
   because it belongs to the listing as a whole rather than to the last card. */
.shop-share:not(:empty) {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}