/* ClothingCo — custom layer on top of Tailwind CDN.
   Colour/font/shape vars are injected per-theme by <style id="cc-theme"> in the header,
   so this file must NOT redeclare them. */

*{ -webkit-font-smoothing:antialiased; }
html{ scrollbar-width:thin; scrollbar-color:var(--volt) var(--ink); background:var(--ink); }
/* kill horizontal scroll on mobile without breaking the sticky nav (clip, not hidden) */
html, body{ overflow-x:clip; max-width:100%; }
body{ background:transparent; }
img, svg, video, canvas{ max-width:100%; }
/* long monospace strings shouldn't force the page wide */
.break-anywhere{ overflow-wrap:anywhere; word-break:break-word; }

/* Lenis smooth-scroll wiring */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--line); }
::-webkit-scrollbar-thumb:hover{ background:var(--volt); }

/* film-grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* per-theme decorative motif (behind content) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; background-repeat:repeat;
}
body[data-motif="none"]::before{ display:none; }
body[data-motif="snow"]::before,
body[data-motif="blossom"]::before{ background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.7px); background-size:40px 40px; }
body[data-motif="sparkle"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 16v16M16 24h16' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2'/%3E%3C/svg%3E"); }
body[data-motif="hearts"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 46 L18 32 a8 8 0 0 1 14-6 a8 8 0 0 1 14 6 Z' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E"); opacity:.06; }
body[data-motif="leaves"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cellipse cx='28' cy='28' rx='11' ry='4' transform='rotate(45 28 28)' fill='%23ffffff' fill-opacity='0.45'/%3E%3C/svg%3E"); }
body[data-motif="sun"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='6' fill='none' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M32 10v8M32 46v8M10 32h8M46 32h8' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2'/%3E%3C/svg%3E"); }

/* marquees */
.marquee{ display:flex; overflow:hidden; white-space:nowrap; user-select:none; }
.marquee__track{ display:flex; flex-shrink:0; align-items:center; min-width:100%; animation:marquee 26s linear infinite; }
.marquee__track--slow{ animation-duration:48s; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* scroll reveals — visible by default (no-JS / reduced-motion safe) */
[data-reveal]{ opacity:1; }
html.has-anim [data-reveal]{ opacity:0; transform:translateY(28px); }
html.has-anim [data-reveal-x]{ opacity:0; transform:translateX(40px); }

/* buttons — radius + display font follow the active theme */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem; font-weight:700; padding:.85rem 1.6rem; border:1px solid transparent;
  cursor:pointer; transition:all .2s ease; border-radius:var(--radius); }
.btn-volt{ background:var(--volt); color:var(--onvolt); }
.btn-volt:hover{ background:var(--voltpress); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--volt); color:var(--volt); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* form controls round with the theme */
input:not([type=checkbox]):not([type=color]):not([type=radio]), select, textarea{ border-radius:var(--radius); }

/* product card */
.pcard{ border-radius:var(--radius); overflow:hidden; }
.pcard img{ transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.pcard:hover img{ transform:scale(1.05); }

/* size chips */
.size-chip{ border:1px solid var(--line); padding:.5rem .9rem; font-family:var(--font-display);
  font-size:.8rem; cursor:pointer; transition:all .15s ease; border-radius:var(--radius); }
.size-chip:hover{ border-color:var(--volt); }
.size-chip[aria-pressed="true"]{ background:var(--volt); color:var(--onvolt); border-color:var(--volt); }
.size-chip:disabled{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }

/* toast */
.toast{ background:var(--surface2); border:1px solid var(--volt); color:var(--paper);
  font-family:var(--font-display); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  padding:.8rem 1.1rem; max-width:320px; transform:translateY(10px); opacity:0;
  transition:all .25s ease; border-radius:var(--radius); }
.toast.show{ transform:translateY(0); opacity:1; }
.toast--err{ border-color:var(--flame); }

/* hero grid lines */
.gridlines{ background-image:linear-gradient(rgb(var(--c-line)) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--c-line)) 1px,transparent 1px);
  background-size:64px 64px; opacity:.25; }

/* light-mode tuning */
:root[data-mode="light"] body::after{ opacity:.025; }
:root[data-mode="light"] body::before{ opacity:.04; filter:invert(1); }
:root[data-mode="light"] .gridlines{ opacity:.5; }

@media (prefers-reduced-motion: reduce){
  html.has-anim [data-reveal],
  html.has-anim [data-reveal-x]{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }
  .pcard:hover img{ transform:none; }
}