/* ==========================================================================
   WORLD 05 — SUNWISE+
   The shop. Bright, warm, product-first — a real store, not a merch page.
   Sunlight as the brand rather than the enemy, because here we sell the cure.
   ========================================================================== */
:root{
  --ink:#1A1206;
  --paper:#FFF8EE;
  --surface:#FFFFFF;
  --surface-2:#FFEDD6;
  --muted:#6B5A44;
  --line:rgba(26,18,6,.14);
  --brand:#FF6B1A;
  --brand-ink:#1A1206;
  --accent:#C2410C;
  --sky:#0E7490;
  --focus:#0E7490;
  --foot-bg:#1A1206;
  --foot-fg:#FFF8EE;

  --font-display:"Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --header-h:70px;
}
h1,h2,h3{ font-weight:800; letter-spacing:-.035em; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--accent); }
.site-header{ background:rgba(255,248,238,.88); }
.worldbar{ background:var(--ink); color:var(--paper); }
.worldmark{ font-family:var(--font-display); font-weight:800; }
.btn--solid{ --btn-bg:var(--ink); --btn-fg:#fff; }
.imgph{ --ph-a:#FFB068; --ph-b:#7A3505; }
.card,.panel{ background:var(--surface); }

.cartbadge[hidden]{ display:none; }
.cartbadge{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--ink); color:#fff;
  font-size:.65rem; font-weight:800; margin-left:.4rem;
}

/* --------------------------------------------------------------- HERO */
.shero{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg,#FFB63F 0%, #FF6B1A 52%, #E8460B 100%);
  color:#fff;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.shero::before{
  content:""; position:absolute; inset:auto -10% -55% auto; width:min(80vw,780px); aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.5), transparent 62%);
}
.shero__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; grid-template-columns:1fr; position:relative; }
@media (min-width:900px){ .shero__grid{ grid-template-columns:1.05fr .95fr; } }
.shero h1{ font-size:var(--step-6); line-height:.98; max-width:14ch; }
.shero .lede{ color:rgba(255,255,255,.92); max-width:46ch; }
.sunburst{
  position:absolute; inset:-40% -30% auto auto; width:min(90vw,900px); aspect-ratio:1; z-index:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.10) 0deg 9deg, transparent 9deg 18deg);
  border-radius:50%; animation:spin 90s linear infinite; pointer-events:none;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ------------------------------------------------------------ PRODUCTS */
.prod{
  display:flex; flex-direction:column; gap:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position:relative;
}
.prod:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.prod .imgph{ border-radius:0; }
.prod__flag{
  position:absolute; top:.8rem; left:.8rem; z-index:3;
  background:var(--ink); color:#fff;
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:.32rem .65rem; border-radius:var(--r-pill);
}
.prod__flag--gift{ background:var(--sky); }
.prod__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.prod__cat{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--accent); }
.prod h3{ font-size:var(--step-1); margin:0; }
.prod__spec{ font-size:var(--step--1); color:var(--muted); margin:0; }
.prod__foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:auto; padding-top:.6rem; }
.price{ font-family:var(--font-display); font-weight:800; font-size:var(--step-1); }
.btn--add{ --btn-bg:var(--ink); --btn-fg:#fff; padding:.55rem 1rem; min-height:40px; font-size:var(--step--2); }

/* ------------------------------------------------------- PRODUCT OF DAY */
.potd{
  background:linear-gradient(140deg,#FFEDD6,#FFD9A8);
  border-radius:var(--r-xl); padding:clamp(1.5rem,4vw,3rem);
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; grid-template-columns:1fr;
}
@media (min-width:820px){ .potd{ grid-template-columns:.9fr 1.1fr; } }
.potd .imgph{ border-radius:var(--r-lg); }

/* ----------------------------------------------------------- CATEGORIES */
.cats{ display:grid; gap:2px; grid-template-columns:1fr; }
@media (min-width:700px){ .cats{ grid-template-columns:repeat(3,1fr); } }
.cat{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(200px,26vw,320px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.4rem; text-decoration:none; color:#fff;
}
.cat .imgph{ position:absolute; inset:0; border-radius:0; z-index:-2; }
.cat::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(26,18,6,.86), rgba(26,18,6,.2) 60%, transparent); }
.cat h3{ font-size:var(--step-2); margin:0 0 .2rem; }
.cat span{ font-size:var(--step--1); opacity:.88; }

/* ------------------------------------------------------- ACCESS MODEL */
.access{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .access{ grid-template-columns:1fr 1fr; } }
.access__side{ background:var(--surface); padding:clamp(1.4rem,3vw,2.2rem); display:grid; gap:.8rem; align-content:start; }
.access__side--gift{ background:linear-gradient(160deg,#E0F2F7,#FFF8EE); }
.access__icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--accent); font-size:1.2rem;
}
.access__side--gift .access__icon{ background:rgba(14,116,144,.14); color:var(--sky); }

/* ---------------------------------------------------------- CONFIGURATOR */
.config{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.swatches{ display:flex; flex-wrap:wrap; gap:.6rem; }
.swatch{ position:relative; }
.swatch input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.swatch span{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  border:2px solid transparent; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08); cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.swatch input:checked + span{ border-color:var(--ink); transform:scale(1.08); }
.swatch input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:3px; }

/* --------------------------------------------------------------- CART */
.cartline{
  display:grid; gap:1rem; align-items:center; margin:0;
  grid-template-columns:auto 1fr;
  padding:1.1rem 0; border-bottom:1px solid var(--line); list-style:none;
}
@media (min-width:760px){ .cartline{ grid-template-columns:88px 1fr auto auto; } }
.cartline__img{ width:88px; aspect-ratio:1; border-radius:var(--r-md); }
.cartline__body h3{ font-size:var(--step-0); margin:0 0 .2rem; }
.cartline__qty{ display:flex; align-items:center; gap:.2rem; }
.cartline__qty button{
  width:34px; height:34px; border:1px solid var(--line); border-radius:var(--r-sm); font-weight:800;
}
.cartline__qty span{ min-width:32px; text-align:center; font-weight:700; }
.cartline__price{ display:grid; gap:.35rem; justify-items:end; }
.cartline__rm{ font-size:var(--step--2); text-decoration:underline; color:var(--muted); }
.cartlist{ list-style:none; padding:0; margin:0; }

.summary{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem); position:sticky; top:calc(var(--header-h) + 1rem);
}
.summary__row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; font-size:var(--step--1); }
.summary__row--total{ border-top:1.5px solid var(--line); margin-top:.5rem; padding-top:.9rem; font-size:var(--step-0); font-weight:800; }

/* --------------------------------------------------------------- BANDS */
.band-cream{ background:var(--surface-2); }
.band-ink{ background:var(--ink); color:var(--paper); }
.band-ink .lede,.band-ink p{ color:rgba(255,248,238,.8); }
.band-ink .eyebrow{ color:#FFB068; }
.band-ink .card,.band-ink .panel{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--paper); }
.band-ink .btn--ghost{ --btn-fg:var(--paper); border-color:rgba(255,255,255,.3); }
.band-sky{ background:linear-gradient(160deg,#0E7490,#075E70); color:#fff; }
.band-sky .eyebrow{ color:#A5E7F5; }
.band-sky .lede,.band-sky p{ color:rgba(255,255,255,.85); }

.ticker{
  background:var(--ink); color:var(--paper);
  font-size:var(--step--2); letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.ticker .marquee__item{ border-right-color:rgba(255,255,255,.18); padding-block:.7rem; }
.ticker .marquee__item strong{ color:#FFB068; }