/* Starshop — clean, modern, white (VISION.md Design). All values come
   from tokens.css, the single source of truth — no raw colors here
   (enforced by test/design/design_tokens_test.rb). */

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  font-family: "D-DIN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: "D-DIN";
  src: url("/fonts/D-DIN.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("/fonts/D-DIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

main { max-width: 1080px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-7); }
.ss-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* — ss-nav: sticky site navigation; mobile drawer is a native <details> — */
.ss-nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper); border-bottom: 1px solid var(--hairline);
}
.ss-nav-inner {
  max-width: 1080px; margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex; align-items: baseline; gap: var(--space-4);
}
.ss-brand {
  font-size: var(--text-brand); letter-spacing: var(--track-brand);
  font-weight: 700; text-decoration: none;
}
.ss-brand small { font-weight: 400; }
.ss-merchant { color: var(--dim); font-size: var(--text-cta); letter-spacing: 0.22em; }
.ss-nav-items { margin-left: auto; display: flex; gap: var(--space-5); }
.ss-nav-link {
  text-decoration: none; font-size: var(--text-cta);
  letter-spacing: var(--track-loose); text-transform: uppercase;
}
.ss-nav-drawer { display: none; margin-left: auto; position: relative; }
.ss-nav-drawer summary {
  list-style: none; cursor: pointer; font-size: var(--text-title);
  line-height: 1; padding: var(--space-1) var(--space-2);
}
.ss-nav-drawer summary::-webkit-details-marker { display: none; }
.ss-nav-drawer[open] nav {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  min-width: 200px; display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}

/* — microlabels: quiet, uppercase, tracked — */
.ss-label {
  display: block; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--dim); margin-bottom: var(--space-4);
}

/* — storefront hero — */
.ss-hero { margin: var(--space-8) 0 72px; text-align: center; }
.ss-hero h2 {
  font-size: var(--text-hero); font-weight: 400; letter-spacing: var(--track-loose);
  text-transform: uppercase;
}
.ss-hero p { color: var(--dim); margin-top: 10px; font-size: var(--text-body); }

.ss-campaign-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  margin: 0 0 var(--space-7); min-height: 360px; aspect-ratio: 16 / 9;
  background: var(--wash);
}
.ss-campaign-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ss-campaign-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,12,0.50), rgba(11,11,12,0.04) 62%);
}
.ss-campaign-copy {
  position: absolute; left: var(--space-6); bottom: var(--space-6); z-index: 1;
  color: var(--paper); max-width: 340px;
}
.ss-campaign-copy span {
  display: block; font-size: var(--text-cta); font-weight: 700;
  letter-spacing: var(--track-loose); text-transform: uppercase;
}
.ss-campaign-copy p { margin-top: var(--space-2); color: var(--paper); }

/* — product grid: image-first, no boxes, whitespace does the work — */
.ss-catalog {
  display: grid; gap: var(--space-7) 36px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ss-card .ss-media {
  aspect-ratio: 4 / 3; background: var(--wash); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.ss-media span {
  font-size: var(--text-display); font-weight: 700; color: var(--ghost);
  letter-spacing: 0.04em;
}
.ss-card h3 { font-size: var(--text-title); font-weight: 700; letter-spacing: var(--track-tight); }
.ss-card .ss-desc { color: var(--dim); font-size: var(--text-small); margin: 6px 0 10px; }
.ss-card .ss-price { display: block; font-size: var(--text-body); }
.ss-card-action { display: block; margin-top: var(--space-4); text-align: center; width: 100%; }

/* — forms & buttons — */
form { display: flex; gap: 10px; margin-top: var(--space-4); flex-wrap: wrap; }
input[type=email], input[type=password] {
  flex: 1; min-width: 180px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: var(--text-small); font-family: inherit;
}
input::placeholder { color: var(--placeholder); }
input:focus { outline: none; border-color: var(--ink); }

button, input[type=submit] {
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius-sm);
  padding: 11px 26px; font-size: var(--text-cta); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
}
button:hover, input[type=submit]:hover { opacity: 0.85; }

.ss-btn-ghost button {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); font-weight: 400;
  padding: 7px 18px; font-size: var(--text-ghost-btn);
}
.ss-btn-ghost button:hover { background: var(--ink); color: var(--paper); opacity: 1; }

/* — flash — */
.ss-flash {
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 10px var(--space-4); margin: 18px 0; font-size: var(--text-small);
}
.ss-flash.ss-alert { border-color: var(--alert); color: var(--alert); }

/* — receipt — */
.ss-receipt { max-width: 560px; margin: var(--space-7) auto 0; }
.ss-receipt dt {
  color: var(--dim); margin-top: 18px; font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.ss-receipt dd {
  margin: 5px 0 0; overflow-wrap: anywhere;
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
}
.ss-orbit { margin: 40px auto 0; max-width: 560px; color: var(--dim); font-size: var(--text-small); }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--dim); }

/* — admin chrome — */
.ss-admin-nav .ss-brand { color: var(--ink); }
.ss-admin-nav-items { align-items: center; }
.ss-admin-power-form { margin: 0; display: flex; }
.ss-admin-power {
  width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent; color: var(--ink); border: 0;
  padding: 0; letter-spacing: 0;
}
.ss-admin-power:hover { opacity: 0.55; }
.ss-admin-power svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter;
}
.ss-admin-drawer nav { align-items: flex-start; }

.ss-panel {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: var(--space-5) 28px; margin-bottom: var(--space-5); background: var(--paper);
}
.ss-panel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5); margin-bottom: var(--space-5);
}
.ss-panel-grid .ss-panel { margin-bottom: 0; }
.ss-stat .ss-label { margin-bottom: var(--space-2); }
.ss-stat .ss-value {
  display: block; font-size: var(--text-stat);
  font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.1;
}
.ss-stat-detail {
  display: block; margin-top: var(--space-2);
  color: var(--dim); font-size: var(--text-mono);
}

table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
th {
  text-align: left; font-size: var(--text-label); letter-spacing: 0.2em; font-weight: 400;
  color: var(--dim); text-transform: uppercase;
  border-bottom: 1px solid var(--hairline); padding: 0 var(--space-3) 10px 0;
}
td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hairline-soft); }
tr:last-child td { border-bottom: 0; }
.ss-num, th.ss-num { text-align: right; white-space: nowrap; }
.ss-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--text-mono); white-space: nowrap;
}

.ss-chip {
  display: inline-block; font-size: var(--text-micro); letter-spacing: 0.16em;
  text-transform: uppercase; border: 1px solid var(--ink);
  border-radius: var(--radius-xs); padding: 2px 9px; white-space: nowrap;
}
.ss-chip.ss-chip-agent { background: var(--ink); color: var(--paper); }
.ss-chip.ss-chip-soft { border-color: var(--hairline); color: var(--dim); }

.ss-empty, .ss-hint { color: var(--dim); font-size: var(--text-mono); }
.ss-hint { margin-top: 28px; }

/* — sign in — */
.ss-auth { max-width: 380px; margin: 12vh auto 0; }
.ss-auth form { flex-direction: column; gap: var(--space-3); }
.ss-auth input[type=submit] { width: 100%; }
.ss-auth-shell {
  min-height: 420px; display: grid; align-items: center;
  padding: var(--space-7) 0 var(--space-8);
}
.ss-auth-login {
  width: min(100%, 440px); max-width: 440px; margin: 0 auto;
}
.ss-auth-login h1 {
  font-size: var(--text-hero-narrow); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.ss-auth-login .ss-auth-form {
  margin-top: 0; flex-direction: column; gap: var(--space-3);
}
.ss-auth-login input[type=email],
.ss-auth-login input[type=password],
.ss-auth-login input[type=submit] {
  width: 100%; min-width: 0; flex: none;
}
.ss-auth-login input[type=email],
.ss-auth-login input[type=password] {
  padding: 13px 14px; font-size: var(--text-body);
}
.ss-auth-login input[type=submit] { margin-top: var(--space-2); }

/* — responsive pass (breakpoints documented in tokens.css: 390/768/1280;
     media queries cannot read custom properties, literals kept in sync
     by test/design/design_tokens_test.rb) — */
@media (max-width: 768px) {
  main { padding: var(--space-5) var(--space-5) var(--space-8); }
  .ss-hero { margin: var(--space-7) 0; }
  .ss-hero h2 { font-size: var(--text-hero-narrow); }
  .ss-campaign-hero { min-height: 360px; aspect-ratio: auto; }
  .ss-campaign-hero img { object-position: 58% center; }
  .ss-campaign-copy { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
  .ss-catalog { gap: var(--space-6) var(--space-5); }
  .ss-nav-items { display: none; }
  .ss-nav-drawer { display: block; }
  .ss-merchant { display: none; }
  .ss-auth { margin-top: var(--space-8); }
  .ss-auth-shell { min-height: 360px; padding: var(--space-6) 0 var(--space-7); }
  .ss-auth-login { margin: 0 auto; }
  .ss-panel { padding: var(--space-5); }
}

/* Console tables keep their columns; the panel scrolls instead of crushing. */
.ss-panel { overflow-x: auto; }
.ss-panel table { min-width: 560px; }

.ss-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block; }

/* — content blocks (the CMS kernel) — */
.ss-block { margin: var(--space-8) auto; max-width: 720px; }
.ss-block-text h2 {
  font-size: var(--text-hero-narrow); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.ss-block-text p { color: var(--dim); max-width: 60ch; }

/* — hero block: full-bleed, media optional — */
.ss-block-hero {
  position: relative; width: 100vw; margin: 0 calc(50% - 50vw) var(--space-8);
  min-height: 420px; display: flex; align-items: center; justify-content: center;
  text-align: center; max-width: none;
}
.ss-hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.ss-block-hero.has-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(11,11,12,0.34), rgba(11,11,12,0.12));
}
.ss-hero-content { position: relative; z-index: 2; padding: var(--space-8) var(--space-5); }
.ss-block-hero h2 {
  font-size: var(--text-hero); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
}
.ss-block-hero p { color: var(--dim); margin-top: 10px; }
.ss-block-hero.has-media h2,
.ss-block-hero.has-media p { color: var(--paper); }
.ss-hero-content .ss-btn-link { margin-top: var(--space-5); }

/* — anchor styled as the house button — */
.ss-btn-link {
  display: inline-block; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius-sm);
  padding: 11px 26px; font-size: var(--text-cta); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
}
.ss-btn-link:hover { opacity: 0.85; color: var(--paper); }
.has-media .ss-btn-link {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.has-media .ss-btn-link:hover { color: var(--ink); }
@media (max-width: 768px) {
  .ss-block-hero { min-height: 320px; }
  .ss-block-hero h2 { font-size: var(--text-hero-narrow); }
}

/* — media+text section: the long-form workhorse, flippable — */
.ss-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7);
  align-items: center; max-width: 1080px; margin: var(--space-9) auto;
}
.ss-block-media-text.flip .ss-mt-media { order: 2; }
.ss-mt-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-md); display: block;
}
.ss-mt-text h2 {
  font-size: var(--text-hero-narrow); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.ss-mt-text p { color: var(--dim); max-width: 48ch; }
.ss-mt-text .ss-btn-link { margin-top: var(--space-5); }
@media (max-width: 768px) {
  .ss-block-media-text { grid-template-columns: 1fr; gap: var(--space-5); margin: var(--space-8) auto; }
  .ss-block-media-text.flip .ss-mt-media { order: 0; }
}

/* — product grid block — */
.ss-block-product-grid { max-width: 1080px; }
.ss-grid-heading {
  font-size: var(--text-hero-narrow); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
  margin-bottom: var(--space-6); text-align: center;
}

/* — specs block — */
.ss-block-specs table { max-width: 720px; margin: 0 auto; }
.ss-spec-label { color: var(--dim); font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; }

/* — faq block: native details accordion — */
.ss-block-faq { max-width: 720px; }
.ss-faq-item { border-bottom: 1px solid var(--hairline); }
.ss-faq-item summary {
  cursor: pointer; list-style: none; padding: var(--space-4) 0;
  font-weight: 700; letter-spacing: var(--track-tight);
  display: flex; justify-content: space-between; align-items: center;
}
.ss-faq-item summary::-webkit-details-marker { display: none; }
.ss-faq-item summary::after { content: "+"; color: var(--dim); font-weight: 400; }
.ss-faq-item[open] summary::after { content: "–"; }
.ss-faq-item p { color: var(--dim); padding-bottom: var(--space-4); max-width: 60ch; }

/* — ss-footer: channel-owned, sitewide — */
.ss-footer { border-top: 1px solid var(--hairline); margin-top: var(--space-6); }
.ss-footer-inner { max-width: 1080px; margin: 0 auto; padding: var(--space-7) var(--space-6); }
.ss-footer-columns {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6); margin-bottom: var(--space-6);
}
.ss-footer-link {
  display: block; color: var(--dim); text-decoration: none;
  font-size: var(--text-small); padding: var(--space-1) 0;
}
.ss-footer-link:hover { color: var(--ink); }
.ss-footer-legal { color: var(--dim); font-size: var(--text-mono); }

@media (max-width: 768px) {
  .ss-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .ss-footer-columns { grid-template-columns: 1fr; }
}

/* — product detail page: editorial stacked gallery + persistent buy bar — */
.ss-pdp { padding-bottom: 96px; }
.ss-pdp-head { text-align: center; margin: var(--space-7) auto var(--space-7); max-width: 720px; }
.ss-pdp-head h2 {
  font-size: var(--text-hero); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
}
.ss-pdp-price { font-family: ui-monospace, "SF Mono", Menlo, monospace; margin: var(--space-3) 0; }
.ss-pdp-desc { color: var(--dim); max-width: 56ch; margin: 0 auto; }
.ss-pdp-gallery { display: grid; gap: var(--space-5); max-width: 880px; margin: 0 auto; }
.ss-pdp-gallery img { width: 100%; border-radius: var(--radius-md); display: block; }
.ss-card h3 a { text-decoration: none; }

.ss-buy-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  background: var(--paper); border-top: 1px solid var(--hairline);
}
.ss-buy-bar-inner {
  max-width: 1080px; margin: 0 auto; padding: var(--space-3) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
}
.ss-buy-bar-name { font-weight: 700; letter-spacing: var(--track-tight); }
.ss-buy-bar-inner form { margin: 0; flex: 1; justify-content: flex-end; }
.ss-buy-bar-inner input[type=email] { max-width: 260px; }
@media (max-width: 768px) {
  .ss-buy-bar-name { display: none; }
}

/* — pdp options: native selects in the house style — */
.ss-pdp-options { display: flex; gap: var(--space-5); justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }
.ss-pdp-options select {
  display: block; margin-top: var(--space-2); background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: var(--text-small); font-family: inherit;
}

/* — payment method picker — */
.ss-pay-methods { border: 0; padding: 0; margin: var(--space-5) auto 0; display: flex; gap: var(--space-5); justify-content: center; }
.ss-pay-methods label { font-size: var(--text-small); color: var(--ink); display: flex; align-items: center; gap: var(--space-2); }
.ss-pay-methods legend { margin-bottom: var(--space-2); }

/* — configurator layout: media column + sticky rail (the split grammar) — */
.ss-config {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-7);
  align-items: start; max-width: 1080px; margin: var(--space-6) auto;
}
.ss-config-media { display: grid; gap: var(--space-5); }
.ss-config-media img { width: 100%; border-radius: var(--radius-md); display: block; }
.ss-config-rail { position: sticky; top: 80px; }
.ss-config-rail h2 {
  font-size: var(--text-hero-narrow); font-weight: 400;
  letter-spacing: var(--track-loose); text-transform: uppercase;
}
.ss-config-rail .ss-pdp-price { margin: var(--space-3) 0; }
.ss-config-rail .ss-pdp-options { justify-content: flex-start; margin-top: var(--space-4); }
.ss-config-rail .ss-pay-methods { justify-content: flex-start; margin: var(--space-4) 0 0; }
.ss-config-rail form { margin-top: var(--space-4); }
@media (max-width: 768px) {
  .ss-config { grid-template-columns: 1fr; }
  .ss-config-rail { position: static; }
}

/* — the conversation console — */
.ss-panel form input[type=text] {
  flex: 1; background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: var(--text-small); font-family: inherit;
}
.ss-panel form input[type=text]:focus { outline: none; border-color: var(--ink); }

/* — ask-the-shop — */
.ss-ask { margin-top: var(--space-5); }
.ss-ask input[type=text] {
  flex: 1; min-width: 220px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: var(--text-small); font-family: inherit;
}
.ss-ask input[type=text]:focus { outline: none; border-color: var(--ink); }