/* STELLARTO v10 — "Daylight". Replaces v9 "Observatory" (night page, spark
   scatter, Space Mono data voice), which Mateo read as a science instrument
   panel rather than a shop (brief 2026-08-03).

   FOUR colours, nothing else. Every other value in this file is a tint of
   one of them via color-mix — no fifth hue anywhere:
     ink     #0E1020   text · header · footer · primary CTA
     paper   #F7F6FF   page
     surface #FFFFFF   cards, panels, bands
     accent  #FE9A00   price · badge · selected state · highlight
   #E17100 is the same accent darkened for AA contrast on white; #FFFBEB is
   the accent at ~6 % on white. Both are the accent, not new colours.

   Type: Fraunces (display) + Plus Jakarta Sans (body). Space Mono is gone —
   the mono "data voice" was the single strongest science-lab signal.
   Radius: 16 card / 12 control / 999 pill, token-enforced (brands.py). */

@font-face { font-family: 'Fraunces'; src: url("../fonts/Fraunces-Medium.e791faf695dd.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url("../fonts/Fraunces-SemiBold.27d64e8ad7c9.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url("../fonts/PlusJakartaSans-Regular.ec6d5973505b.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url("../fonts/PlusJakartaSans-SemiBold.03a280e14937.ttf"); font-weight: 600; font-display: swap; }

:root {
  --accent-deep: #E17100;   /* accent, darkened — accent-coloured TEXT on white */
  --accent-wash: #FFFBEB;   /* accent at ~6 % — selected cards, soft panels */
  --line: color-mix(in srgb, var(--text) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 16%, transparent);
  --shadow-sm: 0 2px 8px color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-md: 0 10px 30px color-mix(in srgb, var(--text) 8%, transparent);
  --shadow-lg: 0 24px 60px color-mix(in srgb, var(--text) 12%, transparent);
}

/* ── world ─────────────────────────────────────────────────────────── */
body { background: var(--bg); font-weight: 400; line-height: 1.62; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: -0.02em; }
h1 em, h2 em, .accent-em { font-style: italic; color: var(--accent-deep); }

/* one quiet voice for eyebrows — small caps sans, NOT monospace */
.kicker, .eyebrow, .hiw-n, .step3-n {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-deep); opacity: 1;
}
.band .kicker { color: var(--accent-deep); }

/* ── announcement bar: ink, not a block of orange ──────────────────── */
.intro-bar, .deadline-bar {
  background: var(--text); color: #FFFFFF; font-size: 0.82rem;
  letter-spacing: 0.01em; padding: 0.62rem 1rem;
}
.intro-bar strong { color: var(--accent); font-weight: 600; }
.intro-bar [data-countdown] { color: var(--accent); }

/* ── header: white, sticky, one dark pill CTA ──────────────────────── */
header.site {
  background: #FFFFFF; color: var(--text); border-bottom: 1px solid var(--line);
  padding: 0.9rem 1.4rem;
}
header.site .brand svg { color: var(--text); }
.mainnav a { font-size: 0.92rem; font-weight: 500; opacity: 1;
  color: color-mix(in srgb, var(--text) 78%, transparent); border-bottom: none; }
.mainnav a:hover { color: var(--accent-deep); border-bottom-color: transparent; }
header.site .cart-link {
  font-weight: 600; font-size: 0.85rem; text-transform: none; letter-spacing: 0.01em;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.42rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
header.site .cart-link:hover { border-color: var(--accent); background: var(--accent-wash); }
.mobilenav summary { color: var(--text); }
.mobilenav-panel { background: #FFFFFF; border-color: var(--line);
  box-shadow: var(--shadow-lg); }
.mobilenav-panel a { color: var(--text); }
.mobilenav-panel a:hover { background: var(--accent-wash); }

/* service strip — a quiet trust line on paper, no instrument-panel caps */
.service-strip {
  --strip-bg: var(--bg); --strip-text: color-mix(in srgb, var(--text) 62%, transparent);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: none;
  border-bottom: 1px solid var(--line);
}

/* ── buttons: ONE identity — the ink pill. Accent = the highlight. ─── */
.btn-cta {
  background: var(--text); color: #FFFFFF; border: none; border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 1rem;
  text-transform: none; letter-spacing: 0.01em; padding: 0.95rem 2.1rem;
  box-shadow: var(--shadow-md); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* on ink surfaces the pill flips to accent so it still reads as the CTA */
.on-ink .btn-cta, .band-ink .btn-cta {
  background: var(--accent); color: #171000;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 32%, transparent);
}
.btn-ghost {
  display: inline-block; background: #FFFFFF; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.9rem; text-decoration: none; text-align: center;
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-wash); }

/* ── hero: product first, star mood contained to one panel ─────────── */
.hero { padding-top: 2.6rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); color: var(--text); }
.hero p { color: var(--muted); font-size: 1.05rem; }
/* the render already ships as a staged wall card (MockupComposer) — it needs
   a radius and a lift, not a second frame around it */
.hero-star img { border-radius: var(--radius-card); box-shadow: var(--shadow-lg); }
.trust-line { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.01em; }

/* hero mini-configurator — white fields on paper */
.hero-handoff label { font-size: 0.74rem; letter-spacing: 0.08em; font-weight: 600;
  color: var(--muted); opacity: 1; }
.hero-handoff input {
  background: #FFFFFF; color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); box-shadow: var(--shadow-sm);
}
.hero-handoff input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.hf-ac { border-radius: var(--radius-control); box-shadow: var(--shadow-lg); }
.hf-ac div:hover { background: var(--accent-wash); }

/* ── bands: white sections on paper (alternating rhythm) ───────────── */
.band { --tile-scrim: rgba(14, 16, 32, 0.72); }
.band .view-all { color: var(--muted); }
.band .view-all:hover { color: var(--accent-deep); }
/* ink band — reserved for a single statement block per page */
.band-ink { --band-text: #FFFFFF; color: #FFFFFF; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #FFFFFF; }
.band-ink p { color: color-mix(in srgb, #FFFFFF 74%, transparent); }
.band-ink .kicker { color: var(--accent); }

/* ── USP row: four soft cards, icon in an accent disc ──────────────── */
.usp-bar { background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.usp > svg { flex: 0 0 42px; width: 42px; height: 42px; padding: 0.5rem;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent-deep); }
.usp strong { font-weight: 600; }
.usp span { color: var(--muted); }

/* ── product cards: white, image-forward, orange price ─────────────── */
.product-card img, .product-card .card-abstract {
  border-radius: var(--radius-card); border: 1px solid var(--line);
  background: #FFFFFF; box-shadow: var(--shadow-md); transition: box-shadow 0.22s ease;
}
.product-card { transition: transform 0.22s ease; }
.product-card:hover { transform: translateY(-3px); }
.product-card:hover img, .product-card:hover .card-abstract { box-shadow: var(--shadow-lg); }
.product-card strong, .band .product-card strong { color: var(--text); font-size: 1.05rem; font-weight: 600; }
.product-card em, .band .product-card em {
  color: var(--muted); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.card-price, .band .card-price { color: var(--accent-deep); font-weight: 600; font-size: 1.05rem;
  font-family: 'Plus Jakarta Sans', sans-serif; }
.card-was, .band .card-was { color: var(--muted); opacity: 0.85; text-decoration: line-through; }
.card-pct, .band .card-pct { color: var(--accent-deep); font-size: 0.7rem;
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.06em; }
.badge { background: var(--accent); color: #171000; border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; padding: 0.24rem 0.7rem; }
.example-tag { font-family: 'Plus Jakarta Sans', sans-serif; border-radius: 999px;
  background: rgba(14, 16, 32, 0.55); }

/* collection tiles */
.cat-tile img { border-radius: var(--radius-card); }
.cat-tile .tile-img { box-shadow: var(--shadow-md); }
.cat-tile-body strong { color: var(--text); }
.cat-tile-body em, .band .cat-tile-body em { color: var(--muted); }

/* ── editorial statement: the one ink card ─────────────────────────── */
.editorial-moment {
  background: var(--text); color: #FFFFFF; border-radius: var(--radius-card);
  margin: 3rem 0; padding: 3.6rem 1.6rem; box-shadow: var(--shadow-lg);
}
.editorial-moment p { color: #FFFFFF; }
.editorial-moment em { color: var(--accent); font-style: italic; }

/* ── steps / how-it-works: numbered, friendly, no workshop ─────────── */
.step3, .hiw-step { background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.step3 img, .hiw-step img { border-radius: 0; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-wash);
  color: var(--accent-deep); font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.05rem; margin-bottom: 0.7rem;
}

/* ── configurator surfaces: white cards, accent = chosen ───────────── */
.tile, .option-tile {
  border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: #FFFFFF; color: var(--text); box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tile:hover, .option-tile:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.tile.active, .option-tile.active {
  border-color: var(--accent); background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm);
}
.option-tile img { border-radius: calc(var(--radius-control) - 4px); }
.field input, .field select, .field textarea {
  border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: #FFFFFF; color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field label { font-weight: 600; }
/* the live preview IS the print file — no radius, no frame of our own around
   it, or the card stops being an honest picture of the product */
.preview-frame.framed_black, .preview-frame.framed_white { border-radius: 4px; }
.buy-bar { border-top: 1px solid var(--line); }
.buy-signals { border-radius: var(--radius-card); border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--accent-wash); }
.intro-line { color: var(--accent-deep); }
.price { color: var(--text); }
.preview-loading { position: relative; }
.preview-loading::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(14,16,32,0.05) 50%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } }

/* ── Art Builder rail: numbered circles + labels, joined by a line ──── */
.stepper-nav { margin-bottom: 1.6rem; }
.stepper-dots { display: flex; flex-wrap: nowrap; overflow: visible;
  align-items: flex-start; justify-content: space-between; gap: 0; }
.stepper-dot {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  background: none; border: none; border-radius: 0; padding: 0;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
/* the connector runs from each circle to the previous one, behind them */
.stepper-dot::before { content: ""; position: absolute; top: 0.9rem; right: 50%;
  width: 100%; height: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.stepper-dot:first-child::before { content: none; }
.stepper-dot.active::before, .stepper-dot.done::before { background: var(--accent); }
.stepper-dot span { position: relative; z-index: 1;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 0.82rem;
  background: #FFFFFF; color: var(--muted);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 12%, transparent); }
/* base.html gives .active its own padding/font-size for the old pill rail —
   neutralise it here or the current circle sits off the connector line */
.stepper-dot.active { color: var(--accent-deep); padding: 0; gap: 0.4rem;
  font-size: 0.66rem; letter-spacing: 0.12em; }
.stepper-dot.active span, .stepper-dot.done span {
  background: var(--accent); color: #171000; box-shadow: 0 0 0 2px var(--accent); }
.stepper-dot.done { color: var(--muted); }
@media (max-width: 420px) { .stepper-dot { font-size: 0.58rem; letter-spacing: 0.06em; } }

.stepper-back { text-decoration: none; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.72rem 1.4rem; background: #FFFFFF; }
.stepper-back:hover { border-color: var(--accent); background: var(--accent-wash); }
.stepper-controls { gap: 0.8rem; }
.stepper-next { flex: 0 1 auto; }

/* ── reviews ───────────────────────────────────────────────────────── */
.review-card { background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.review-stars { color: var(--accent); letter-spacing: 0.14em; }
.rating-line .avg { font-family: 'Fraunces', serif; color: var(--text); }

/* ── FAQ / accordions ──────────────────────────────────────────────── */
.faq details { border-radius: var(--radius-card); background: #FFFFFF;
  border-color: var(--line); box-shadow: var(--shadow-sm); }
.faq details[open] { border-color: var(--accent); background: var(--accent-wash); }

/* ── footer: ink, no orbit contours ────────────────────────────────── */
footer.brandfoot { background-color: var(--text); color: #FFFFFF; border-top: none; }
footer.brandfoot .foot-logo svg { color: #FFFFFF; }
footer.brandfoot .foot-col strong { color: color-mix(in srgb, #FFFFFF 55%, transparent); }
footer.brandfoot .foot-col a { color: color-mix(in srgb, #FFFFFF 80%, transparent); }
footer.brandfoot .foot-col a:hover { color: var(--accent); }
footer.brandfoot .foot-brand p { color: color-mix(in srgb, #FFFFFF 65%, transparent); }
footer.brandfoot .foot-meta { color: color-mix(in srgb, #FFFFFF 50%, transparent);
  border-top-color: rgba(255, 255, 255, 0.12); }
footer.brandfoot .foot-langs, footer.brandfoot .foot-langs a { color: color-mix(in srgb, #FFFFFF 65%, transparent); }
footer.brandfoot .foot-langs a:hover, footer.brandfoot .foot-langs span[aria-current] { color: #FFFFFF; }
.pay-badges span { border-radius: 999px; border-color: rgba(255, 255, 255, 0.22);
  color: color-mix(in srgb, #FFFFFF 70%, transparent); }

/* ── misc surfaces that must not stay dark ─────────────────────────── */
.cart-drawer, .xi-panel, .sg-panel { background: #FFFFFF; color: var(--text); }
.moment-section img, .gift-section img, .room-grid img, .room-video,
.correct-grid img { border-radius: var(--radius-card); box-shadow: var(--shadow-md); }