/* Curse Doll Site CSS */

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:#080705; }
  @keyframes grainShift{
    0%{ transform:translate(0,0) }
    20%{ transform:translate(-3%,2%) }
    40%{ transform:translate(2%,-3%) }
    60%{ transform:translate(-2%,-1%) }
    80%{ transform:translate(3%,2%) }
    100%{ transform:translate(0,0) }
  }
  @keyframes flick{ 0%,97%{opacity:.9} 98%{opacity:.55} 100%{opacity:.9} }
  @keyframes hudBlink{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }
  @keyframes sealStamp{ 0%{transform:scale(1.6); opacity:0} 45%{transform:scale(.86); opacity:1} 70%{transform:scale(1.06)} 100%{transform:scale(1)} }
  @keyframes ghostLoom{ 0%,100%{ transform:translateX(-50%) translateY(0) scale(.985); opacity:.5 } 50%{ transform:translateX(-50%) translateY(-1.6%) scale(1.06); opacity:.82 } }
  @keyframes eyeFlicker{ 0%,40%,47%,68%,100%{ opacity:.92 } 43%{ opacity:.12 } 45%{ opacity:.7 } 70%{ opacity:.4 } 72%{ opacity:.95 } }
  @keyframes handFade{ 0%,84%,100%{ opacity:0 } 7%{ opacity:.55 } 15%{ opacity:.5 } 21%{ opacity:0 } }
  @keyframes mistDrift{ 0%{ transform:translate(0,0) } 50%{ transform:translate(4%,-2.4%) } 100%{ transform:translate(0,0) } }
  @keyframes mistDrift2{ 0%{ transform:translate(0,0) } 50%{ transform:translate(-5%,2%) } 100%{ transform:translate(0,0) } }
  @keyframes textPulse{
    0%,100%{ text-shadow:0 0 1px rgba(168,42,28,.6), 0 6px 30px rgba(0,0,0,.8), 2px 2px 0 rgba(74,29,18,.5), 0 0 16px rgba(168,42,28,0); }
    50%{ text-shadow:0 0 2px rgba(207,60,37,.95), 0 6px 34px rgba(0,0,0,.85), 2px 2px 0 rgba(74,29,18,.55), 0 0 38px rgba(168,42,28,.55); }
  }
  @media (prefers-reduced-motion: reduce){ .livetext{ animation:none !important; filter:none !important } }


/* Responsive */

/* ── Global ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Pinning screen: ensure it never overflows ── */
/* The fixed pinning overlay already uses inset:0, but children can bleed */

/* Pact ledger: shrink on very small screens */
@media (max-width: 380px) {
  /* Hide pact ledger on tiny phones — info is visible in top bar */
  /* Actually just shrink it */
}

/* ── Choose Your Curse section ── */
section#curses { padding-left: clamp(12px, 4vw, 22px) !important; padding-right: clamp(12px, 4vw, 22px) !important; }

/* Curse cards: stack vertically on mobile */
@media (max-width: 720px) {
  /* Remove rotations — they cause clipping and overflow on small screens */
  [style*="rotate(-1.2deg)"],
  [style*="rotate(.8deg)"],
  [style*="rotate(-.6deg)"],
  [style*="rotate(-1deg)"],
  [style*="rotate(2deg)"] {
    transform: none !important;
  }
  /* Full width cards */
  [style*="width:min(320px,88vw)"] {
    width: 100% !important;
    max-width: 420px !important;
  }
  [style*="width:min(288px,86vw)"] {
    width: 100% !important;
    max-width: 380px !important;
  }
}

/* ── HOW IT WORKS section ── */
@media (max-width: 600px) {
  /* HOW IT WORKS: reduce section padding */
  [style*="padding:96px"] { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Testimonial cards: remove rotation */
  [style*="rotate(-2deg)"],
  [style*="rotate(1.5deg)"],
  [style*="rotate(-1deg)"],
  [style*="rotate(2.5deg)"] {
    transform: none !important;
  }
}

/* ── PINNING SCREEN mobile layout ── */
@media (max-width: 600px) {

  /* Top bar: wrap to 2 lines if needed */
  /* The top bar already has left buttons + right tier info.
     On small screens reduce gaps */
  [style*="position:absolute; top:0; left:0; right:0"][style*="justify-content:space-between"] {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  /* Pact ledger: move to bottom centre, full width */
  [style*="position:absolute; left:clamp(10px"][style*="bottom:60px"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 52px !important;
    width: calc(100% - 24px) !important;
    max-width: 320px !important;
  }

  /* Instruction text: above pact ledger */
  [style*="bottom:14px"][style*="tap the doll"] {
    font-size: 9px !important;
    letter-spacing: .08em !important;
    bottom: 10px !important;
  }
}

@media (max-width: 380px) {
  /* Extra small: hide some pact ledger rows */
  [style*="bottom:52px"] .pact-row-optional { display: none; }
  /* Make top bar buttons smaller */
  [style*="← leave the shed"],
  [style*="↻ new effigy"] {
    padding: 6px 8px !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
  }
}

/* ── SEALED banner ── */
@media (max-width: 480px) {
  /* Sealed buttons: stack */
  [style*="⎙ export the deed"],
  [style*="seal & leave"],
  [style*="seal & pay"] {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* Buttons container */
  [style*="flex-wrap:wrap"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 280px !important;
  }
}

/* ── VHS HUD ── */
@media (max-width: 480px) {
  [style*="Evidence Log"] span:last-child { display: none; }
  [style*="padding:14px"][style*="9aa03f"] {
    padding: 8px 12px !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }
}

/* ── Footer ── */
@media (max-width: 600px) {
  [style*="padding:84px 22px"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ── Hero: reduce padding on mobile ── */
@media (max-width: 480px) {
  [style*="min-height:100vh"][style*="padding:clamp"] {
    padding-top: clamp(80px, 18vw, 120px) !important;
    padding-bottom: 40px !important;
  }
}

/* ── Canvas/3D stage: ensure it fills the pinning screen ── */
[ref] canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Touch targets ── */
@media (hover: none) and (pointer: coarse) {
  button { min-height: 44px; }
  input[type="text"] { min-height: 44px; font-size: 16px; } /* prevents iOS zoom */
}

/* ── Prevent iOS input zoom ── */
input[type="text"],
input[type="email"],
textarea,
select {
  font-size: max(16px, 1em);
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Export button: hide on iOS (download API not supported) ── */
@media (hover: none) and (pointer: coarse) {
  button[onclick*="exportCurse"],
  [style*="export the deed"] {
    display: none !important;
  }
}


/* WooCommerce: hide notices on front page */
body.cursedoll-home .woocommerce-message,
body.cursedoll-home .woocommerce-error,
body.cursedoll-home .woocommerce-info { display: none !important; }

/* ============================================================================
   v5 polish: straight cards, nav-overlap fix, footer
   ============================================================================ */

/* ── Straighten the curse cards (homepage + curses page) ───────────────────
   IMPORTANT: the live React/DC runtime serializes inline styles WITH spaces
   (e.g. `width: min(320px, 88vw)`, `display: flex; flex-wrap: wrap`). Attribute
   selectors must therefore match the SPACED form, or target structurally.
   The 6 order-form cards are the direct children of the flex grid inside
   #curses, so we straighten them structurally (spacing-proof).               */
#curses > div > div[style*="flex-wrap"] > div{
  transform:none!important;
  transition:transform .25s ease, box-shadow .25s ease!important;
}
#curses > div > div[style*="flex-wrap"] > div:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 30px 54px rgba(0,0,0,.65), 0 0 32px rgba(168,42,28,.18)!important;
  z-index:5;
}
/* straighten inner rotated bits (scrawl lines, pin-it buttons) — both spacings */
#curses > div > div[style*="flex-wrap"] > div *[style*="rotate"]{
  transform:none!important;
}
/* even grid: equal-height cards */
#curses > div > div[style*="flex-wrap"]{
  align-items:stretch!important;
}

/* ── Nav-overlap fix ───────────────────────────────────────────────────────
   The theme nav (.cd-nav) is fixed at top, height 56px, z-index 90. The app's
   hero "evidence bar" (top:0, z-index:3) and the floating REC/timestamp HUD
   (top:50px, z-index:62) must clear it. Selectors use the live SPACED form.   */
/* push the hero's top evidence bar below the nav */
.cursedoll-site #dc-root section:first-of-type > div[style*="top: 0"][style*="z-index: 3"]{
  top:56px!important;
}
/* move the REC / timestamp HUD stamp clear of the nav (desktop) */
.cursedoll-site div[style*="z-index: 62"]{
  top:68px!important;
}

/* ── Mobile: the floating VHS HUD and the hero's "DO NOT TOUCH" tag both
   right-align near the hamburger and collide. They're decorative flavour, so
   on narrow screens drop the colliding pieces and keep the corner clean.      */
@media(max-width:640px){
  /* hide the fixed REC/CH/timestamp stamp — the hamburger owns the corner */
  .cursedoll-site div[style*="z-index: 62"]{
    display:none!important;
  }
  /* hero evidence bar: keep "EVIDENCE LOG // ITEM 07", drop the right "DO NOT
     TOUCH" span so it never sits under the menu button */
  .cursedoll-site #dc-root section:first-of-type
    > div[style*="justify-content: space-between"] > span:last-child{
    display:none!important;
  }
}
/* give the hero content top breathing room so the headline clears the nav */
.cursedoll-site #dc-root section:first-of-type{
  padding-top:56px;
}

/* z-index scale (documented):
   grain/scanline 1-2 · content 3 · HUD stamp 62 · nav 90 · ritual 45 · sound 70 · drawer 120 · preloader 200 */

/* ── Footer ────────────────────────────────────────────────────────────── */
.cd-footer{
  position:relative;z-index:4;background:var(--cd-ink3,#080605);
  border-top:1px solid rgba(168,42,28,.22);
  padding:48px clamp(18px,5vw,40px) 34px;
  font-family:'Special Elite',monospace;color:#7c7257;
}
.cd-footer-inner{max-width:1100px;margin:0 auto;display:grid;gap:28px;}
.cd-footer-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px;
}
.cd-footer-brand{
  font-family:'Rubik Distressed',system-ui;font-size:clamp(22px,4vw,30px);
  color:#d9cdae;letter-spacing:.06em;
}
.cd-footer-brand span{color:#a82a1c;}
.cd-footer-tag{margin-top:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5a5142;max-width:320px;line-height:1.6;}
.cd-footer-links{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0;}
.cd-footer-links a{
  color:#8a7a62;text-decoration:none;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;transition:color .2s;
}
.cd-footer-links a:hover{color:#d9cdae;}
.cd-footer-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(168,42,28,.3),transparent);}
.cd-footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4a4336;
}
.cd-footer-bottom .cd-foot-final{color:#6b3a2e;font-style:italic;text-transform:none;letter-spacing:.04em;}
@media(max-width:600px){
  .cd-footer-top{flex-direction:column;gap:20px;}
  .cd-footer-bottom{flex-direction:column;gap:8px;}
}

/* ── Mobile global guards ──────────────────────────────────────────────── */
@media(max-width:480px){
  html,body{overflow-x:hidden;}
  .cd-curses-intro{padding-left:18px;padding-right:18px;}
  .cd-curses-lede{padding:0 6px;}
}

/* ============================================================================
   Cart drawer (slide-in on PIN IT)
   ============================================================================ */
.cd-drawer-root{position:fixed;inset:0;z-index:120;visibility:hidden;}
.cd-drawer-root.open{visibility:visible;}
.cd-drawer-scrim{
  position:absolute;inset:0;background:rgba(4,3,2,.74);
  opacity:0;transition:opacity .3s ease;backdrop-filter:blur(2px);
}
.cd-drawer-root.open .cd-drawer-scrim{opacity:1;}
.cd-drawer{
  position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);
  background:linear-gradient(180deg,#0c0a07,#080605);
  border-left:1px solid rgba(168,42,28,.3);
  box-shadow:-24px 0 60px rgba(0,0,0,.7);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;font-family:'Special Elite',monospace;
}
.cd-drawer-root.open .cd-drawer{transform:translateX(0);}
.cd-drawer-head{
  position:relative;padding:26px 24px 20px;border-bottom:1px solid rgba(168,42,28,.18);
}
.cd-drawer-eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:#a82a1c;margin-bottom:8px;}
.cd-drawer-title{font-family:'Rubik Distressed',system-ui;font-size:34px;color:#d9cdae;line-height:1;}
.cd-drawer-x{
  position:absolute;top:22px;right:20px;background:transparent;border:1px solid rgba(154,160,63,.35);
  color:#9aa03f;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1;
  transition:background .2s,color .2s;
}
.cd-drawer-x:hover{background:rgba(168,42,28,.16);color:#d9cdae;border-color:#a82a1c;}
.cd-drawer-body{flex:1;overflow-y:auto;padding:22px 24px;}
.cd-drawer-item{display:flex;gap:14px;align-items:flex-start;padding:16px;background:#0e0b07;border:1px solid #2a1a10;margin-bottom:16px;}
.cd-drawer-item-hero{border-color:rgba(168,42,28,.35);box-shadow:0 0 20px rgba(168,42,28,.1);}
.cd-drawer-pin{
  flex:0 0 auto;position:relative;width:40px;height:48px;background:#080605;border:1px solid #2a1a10;
}
.cd-drawer-pin::before{content:"";position:absolute;left:50%;top:24%;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e85a3f,#8a1d12 70%);transform:translateX(-50%);box-shadow:0 0 8px rgba(168,42,28,.6);}
.cd-drawer-pin::after{content:"";position:absolute;left:50%;top:30%;width:2px;height:46%;
  background:linear-gradient(#d9cdae,#8a7a62);transform:translateX(-50%);}
.cd-drawer-meta{flex:1;min-width:0;}
.cd-drawer-name{font-size:18px;color:#d9cdae;margin-bottom:4px;}
.cd-drawer-target{font-size:12px;color:#9a8a6a;margin-bottom:6px;}
.cd-drawer-target strong{color:#c2522f;}
.cd-drawer-stamp{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6c6450;}
.cd-drawer-price{flex:0 0 auto;color:#d9cdae;font-size:16px;}
.cd-drawer-confirm{font-size:13px;line-height:1.6;color:#8a7a62;font-style:italic;margin:6px 2px 18px;}
.cd-drawer-totals{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:1px dashed rgba(168,42,28,.25);color:#9a8a6a;font-size:13px;}
.cd-drawer-totals strong{color:#d9cdae;font-size:18px;}
.cd-drawer-foot{padding:18px 24px 24px;border-top:1px solid rgba(168,42,28,.18);display:flex;flex-direction:column;gap:10px;}
.cd-drawer-seal{
  display:block;text-align:center;text-decoration:none;
  background:linear-gradient(135deg,#7a0808,#a82a1c);color:#f0e6d6;
  border:2px solid #a82a1c;padding:15px;font-size:15px;letter-spacing:.24em;text-transform:uppercase;
  box-shadow:0 0 24px rgba(168,42,28,.3);transition:box-shadow .2s,background .2s;
}
.cd-drawer-seal:hover{background:linear-gradient(135deg,#a82a1c,#c2331f);color:#fff;box-shadow:0 0 36px rgba(168,42,28,.5);}
.cd-drawer-basket{
  display:block;text-align:center;text-decoration:none;color:#b5503e;
  border:1px solid rgba(168,42,28,.4);padding:11px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.cd-drawer-basket:hover{background:rgba(168,42,28,.12);color:#e9e0c6;}
.cd-drawer-keep{
  background:transparent;border:0;color:#6c6450;cursor:pointer;
  font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:6px;transition:color .2s;
}
.cd-drawer-keep:hover{color:#9a8a6a;}
@media(prefers-reduced-motion:reduce){
  .cd-drawer,.cd-drawer-scrim{transition:none!important;}
}

/* ── Global a11y: visible focus ring (rust) ─────────────────────────────── */
.cursedoll-site a:focus-visible,.cursedoll-site button:focus-visible,
.cursedoll-site input:focus-visible,.cursedoll-site select:focus-visible,
.cursedoll-site textarea:focus-visible,.cd-nav a:focus-visible{
  outline:2px solid #a82a1c!important;outline-offset:2px;
  box-shadow:0 0 0 4px rgba(168,42,28,.25)!important;
}

/* ── prefers-reduced-motion: calm everything ────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.05ms!important;scroll-behavior:auto!important;
  }
}

/* ============================================================================
   Pinning ritual (effigy screen) — mobile fixes
   The ritual is a full-screen immersive overlay (position:fixed, z-index:45)
   rendered by the DC app. Two problems on mobile:
   1) the site nav (z-index:90) sits ON TOP of it, so the hamburger collides
      with the ritual's own top bar ("leave the shed / X OF 2 pins driven").
   2) "The Pact" ledger is sized for desktop and dominates a small screen.
   ============================================================================ */

/* 1) While the ritual overlay exists, hide the site nav (the overlay has its
      own "← leave the shed" exit) and lift the overlay above any fixed UI.
      :has() is supported in all current mobile browsers (Safari 15.4+).      */
body.cursedoll-site:has(div[style*="z-index: 45"][style*="position: fixed"]) .cd-nav{
  display:none!important;
}
div[style*="z-index: 45"][style*="position: fixed"]{
  z-index:100!important;
}

/* 2) Mobile: compact "The Pact" ledger so the 3D effigy stays the hero and the
      panel doesn't swallow the screen. Also tighten the ritual top bar.       */
@media(max-width:640px){
  div[style*="z-index: 45"][style*="position: fixed"] div[style*="bottom: 60px"][style*="backdrop-filter"]{
    width:44vw!important;max-width:184px!important;
    padding:10px 11px 11px!important;bottom:74px!important;
    transform:scale(.9);transform-origin:left bottom;
  }
  div[style*="z-index: 45"][style*="position: fixed"] > div[style*="top: 0"][style*="z-index: 12"]{
    padding:12px 14px!important;
  }
}