/* ===========================
   SINS — QUIET LUX THEME v3
   =========================== */

/* --- Design tokens --- */
:root{
  /* Color system */
  --bg: #0B0C0E;              /* deep near-black */
  --surface: #0E1013;         /* cards/nav */
  --surface-2: #121419;       /* gentle contrast */
  --ink: #D9DCE2;             /* primary silver text */
  --mute: #B8BEC8;            /* secondary silver text */
  --ink-soft: #98A0AC;        /* tertiary silver text */
  --ink-bright: #F1F4F8;      /* bright silver highlights */

  --line: rgba(217,220,226,.16);
  --hair: rgba(217,220,226,.10);

  /* Accents (more mineral than neon) */
  --acid: #9CE8D8;            /* matured cyan */
  --hot:  #6A1F1F;            /* oxblood for rare emphasis */
  --gold: #FFCA6B;

  /* Shape & motion */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;

  --fast: 160ms;
  --norm: 220ms;
  --easing: cubic-bezier(.2,.65,.2,1);
}

/* --- Base reset --- */
* { box-sizing:border-box; }
html, body { height:100%; }
html, body {
  margin:0;
  background:
    radial-gradient(80vw 60vh at 50% -20vh, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(#0B0C0E,#090A0C);
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
h1, h2, h3, .brand, .logo-link, .page-label {
  color: var(--ink-bright);
  text-shadow: 0 2px 14px rgba(0,0,0,.28);
}
p, li, label, .muted, .subtitle, .note {
  color: var(--mute);
}

/* ===========================
   Header / Nav
   =========================== */
.header {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 4vw, 40px);
  background: color-mix(in hsl, var(--surface) 70%, transparent);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--hair);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; }
.brand img { height:28px; filter:grayscale(100%) contrast(1.05); }
.nav { display:flex; gap:22px; font-weight:600; }
.nav a { position:relative; color:var(--mute); padding:6px 0; }
.nav a:hover, .nav a.active { color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
  transition: width var(--norm) var(--easing), left var(--norm) var(--easing);
}
.nav a:hover::after, .nav a.active::after{ width:100%; left:0 }

/* ===========================
   Hero
   =========================== */
.hero {
  display:grid; place-items:center; min-height:68vh;
  border-bottom:1px solid var(--hair);
  background:
    linear-gradient(to bottom, rgba(8,10,13,.35), rgba(8,10,13,.75)),
    url('../assets/Sinsbg.png') center/cover no-repeat; /* fallback */
}
.hero .inner { max-width:820px; text-align:center; padding:48px 16px; }

/* ===========================
   Buttons
   =========================== */
.btn{
  border:1px solid var(--hair);
  background:var(--surface);
  color:var(--ink);
  padding:12px 16px;
  border-radius:var(--r-sm);
  font-weight:700;
  transition:transform var(--fast) var(--easing), border-color var(--fast), background var(--fast);
}
.btn:hover{ transform:translateY(-1px); border-color:var(--line); }
.btn.primary{
  background: linear-gradient(180deg, var(--acid), #7FD9C9);
  color:#0B1E1A; border-color:transparent;
}
.btn.small{ padding:8px 12px; border-radius:10px; }

/* Focus visible */
.btn:focus-visible, a:focus-visible{
  outline:2px solid var(--acid); outline-offset:2px;
}

/* ===========================
   Sections
   =========================== */
.section { padding:56px clamp(16px, 4vw, 40px); }
.section h1, .section h2 { max-width:1100px; margin:0 auto 12px; }
.muted { color:var(--ink-soft); }

/* ===========================
   Product grid & cards
   =========================== */
.grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
.grid > .card { grid-column: span 12; }
@media (min-width: 760px){ .grid > .card{ grid-column: span 6 } }
@media (min-width:1040px){ .grid > .card{ grid-column: span 4 } }

.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition: transform var(--norm) var(--easing), border-color var(--fast);
}
.card:hover{ transform: translateY(-2px); border-color: var(--hair); }
.card .img { aspect-ratio:4/5; background:#0c0f19 center/cover no-repeat; }
.card .img img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(10%);
  transition: filter var(--fast);
}
.card:hover .img img{ filter:none; }
.card .meta { padding:14px; }
.price { font-weight:800; }

/* ===== MARQUEE ===== */

.marquee{
  width:100%;
  overflow:hidden;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  padding:18px 0;          /* ← BIGGEST FIX */
  margin:60px 0;           /* more breathing room */

  background: rgba(255,255,255,.02);  /* subtle luxury layer */
}

.marquee span{
  font-size:10px;          /* slight bump only */
  letter-spacing:.18em;

  color:#ffd166;
  opacity:.85;

  padding:0 38px;

  text-shadow:0 6px 24px rgba(255,209,102,.18);
}


/* ===== MARQUEE FINAL POLISH ===== */

.marquee{
  margin: 60px 0;
  display: grid;
  gap: 18px;
  overflow: hidden;
  text-align: center;
}

/* each scrolling row */
.marquee .track{
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* centers content vertically in row */
  white-space: nowrap;
  gap: 28px;
  will-change: transform;
  animation: stp-marquee 20s linear infinite;
}

/* speed variance */
.marquee .track:nth-child(2){ animation-duration: 24s; }
.marquee .track:nth-child(3){ animation-duration: 28s; }

/* text styling */
.marquee .track span{
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;

  /* luxury gold */
  color: #c9a24d; /* muted metallic gold */
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size:10px; 
}

/* optional subtle glow for depth */
.marquee .track span{
  text-shadow:
    0 0 6px rgba(201,162,77,.25),
    0 0 14px rgba(201,162,77,.15);
}

/* animation */
@keyframes stp-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


@keyframes stp-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===========================
   Footer
   =========================== */
.footer { padding:24px clamp(16px, 4vw, 40px); text-align:center; border-top:1px solid var(--hair); color:var(--mute); }

/* ===========================
   Reveal helper (JS hooks)
   =========================== */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity var(--norm) var(--easing), transform var(--norm) var(--easing); }
.reveal.show{ opacity:1; transform:none; }

/* ===========================
   Cursor system (ONE clean version)
   NOTE: paths are relative to /css/base.css → use ../assets/...
   =========================== */

/* default */
:root { --cursor: auto; }

/* apply everywhere except typing fields */
:where(html, body, *):not(input, textarea, [contenteditable="true"]) { cursor: var(--cursor) !important; }
:where(input, textarea, [contenteditable="true"]) { cursor: text !important; }

/* per-page cursors */
body.page-home    { --cursor: url('../assets/indexgrim.png') 12 12, auto; }
body.page-shop    { --cursor: url('../assets/flower.png') 12 12, auto; }
body.page-about   { --cursor: url('../assets/flame.png') 12 12, auto; }
body.page-contact { --cursor: url('../assets/grimbag.png') 12 12, auto; }
body.page-care    { --cursor: url('../assets/insigina.png') 12 12, auto; }
body.page-pusillanimious-heels { --cursor: url('../assets/sgrim.png') 12 12, auto; }

/* optional follower */
.cursor { pointer-events:none !important; }

/* ===========================
   Reduced motion
   =========================== */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .marquee .track{ animation:none }
}

/* ========== Mini-Cart Drawer ========== */
.mcart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity var(--norm) var(--easing);
  z-index: 60;
}
.mcart-overlay.show{ opacity:1; pointer-events:auto; }

.mcart{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-left:1px solid var(--hair);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  transform: translateX(100%);
  transition: transform var(--norm) var(--easing);
  z-index: 61; display:flex; flex-direction:column;
}
.mcart.show{ transform: translateX(0); }

.mcart header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--hair);
}
.mcart header h3{ margin:0; font-size:18px; }
.mcart .close{
  border:1px solid var(--hair); background:transparent; color:var(--ink);
  border-radius:8px; padding:6px 10px; cursor:pointer;
}

.mcart .body{
  overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; flex:1;
}
.mcart .empty{
  text-align:center; color:var(--ink-soft); padding:40px 12px;
}

.mitem{
  display:grid; grid-template-columns:72px 1fr auto; gap:10px;
  border:1px solid var(--hair); border-radius:12px; padding:10px; background:rgba(255,255,255,.02);
}
.mitem .thumb{
  width:72px; height:72px; border-radius:10px; background:#0f1117; overflow:hidden;
}
.mitem .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mitem h4{ margin:0 0 6px; font-size:14px; }
.mitem .meta{ color:var(--ink-soft); font-size:12px; }
.mitem .qty{
  display:flex; align-items:center; gap:8px; margin-top:10px;
}
.mitem .qty button{
  width:28px; height:28px; border:1px solid var(--hair); background:transparent; color:var(--ink);
  border-radius:6px; cursor:pointer;
}
.mitem .rm{
  align-self:start; border:none; background:transparent; color:var(--ink-soft); cursor:pointer;
}

.mcart .footer{
  border-top:1px solid var(--hair); padding:12px 16px; display:grid; gap:10px;
}
.mcart .row{ display:flex; align-items:center; justify-content:space-between; }
.mcart .subtotal{ font-weight:700; color:var(--ink); }
.mcart .checkout{ display:flex; gap:8px; }
.mcart .checkout .btn{ flex:1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mcart{ transition:none }
  .mcart-overlay{ transition:none }
}