/* ============================================================================
   The Disney Character Warehouse, Explained — page-scoped styles (cw- prefix).
   A dark warehouse lit warm, kraft-paper price tags, clearance red used like
   a highlighter, big condensed numerals doing the talking.
   ========================================================================== */

.cw {
  /* palette tokens */
  --cw-kraft:      oklch(84% 0.055 84);            /* manila tag stock */
  --cw-kraft-deep: oklch(66% 0.07 78);
  --cw-red:        oklch(58% 0.21 27);             /* clearance red */
  --cw-red-bright: oklch(66% 0.23 29);
  --cw-amber:      oklch(82% 0.12 75);             /* warehouse sodium light */
  --cw-green:      oklch(70% 0.14 155);            /* the "now" price */
  --cw-line:       color-mix(in oklab, var(--ink, #e9edf3) 14%, transparent);
  --cw-card:       color-mix(in oklab, var(--ink, #e9edf3) 5%, transparent);
  --cw-max-w: 1080px;
  --cw-pad: clamp(1rem, 4vw, 2rem);
}

.cw { overflow-x: clip; }
.cw section { padding: clamp(3rem, 7vw, 5.5rem) var(--cw-pad); }
.cw .cw-section-head { max-width: var(--cw-max-w); margin: 0 auto 1.75rem; }
.cw h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.cw h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.cw-section-dek { max-width: 56ch; margin-top: .5rem; opacity: .86; }

/* ------------------------------------------------------------------ hero */
.cw-hero {
  position: relative; min-height: 92svh;
  display: grid; place-items: center; text-align: center;
  padding: 5rem var(--cw-pad) 4rem; overflow: hidden; isolation: isolate;
}
.cw-hero-canvas, .cw-hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.cw-hero-fallback {
  background:
    radial-gradient(90% 70% at 50% 8%, oklch(45% 0.09 75 / .5), transparent 62%),
    radial-gradient(60% 45% at 18% 85%, oklch(40% 0.13 27 / .28), transparent 70%),
    radial-gradient(70% 55% at 84% 78%, oklch(38% 0.07 84 / .3), transparent 70%),
    linear-gradient(180deg, oklch(17% 0.015 265), oklch(13% 0.012 265));
}
.cw-hero-canvas { opacity: 0; transition: opacity 1.2s ease; }
.cw-hero-canvas.is-live { opacity: 1; }

.cw-hero-inner {
  max-width: 60rem; display: grid; gap: 1.15rem; justify-items: center;
  /* a soft dark pool so drifting tags never fight the headline */
  background: radial-gradient(ellipse 62% 58% at 50% 44%, oklch(13% 0.012 265 / .6), transparent 72%);
  padding: 2rem clamp(1rem, 4vw, 3rem);
}
.cw-kicker {
  /* a little hang tag, hole and all */
  position: relative;
  letter-spacing: .16em; text-transform: uppercase; font-size: .74rem; font-weight: 600;
  color: var(--cw-amber);
  border: 1px solid color-mix(in oklab, var(--cw-amber) 55%, transparent);
  border-radius: 7px; padding: .42rem .85rem .42rem 1.55rem;
  rotate: -1.2deg;
}
.cw-kicker::before {
  content: ""; position: absolute; left: .6rem; top: 50%; translate: 0 -50%;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--cw-amber); opacity: .8;
}
.cw-h1 { display: grid; gap: .1em; line-height: .98; text-wrap: balance; }
.cw-h1-eyebrow, .cw-h1-tail {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-style: italic; font-weight: 500;
}
.cw-h1-mark {
  font-family: var(--display);
  font-size: clamp(3.2rem, 10.5vw, 6.8rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0; line-height: .94;
  color: var(--cw-kraft);
  text-shadow: 0 0 70px oklch(75% 0.12 75 / .4);
}
.cw-dek { max-width: 62ch; font-size: clamp(1.02rem, 2.2vw, 1.2rem); opacity: .92; text-wrap: pretty; }

.cw-hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .4rem; }
.cw-cta {
  display: inline-block; padding: .72rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--cw-line); font-weight: 600; text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.cw-cta:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--ink, #e9edf3) 34%, transparent); }
.cw-cta-primary {
  background: var(--cw-red); border-color: transparent; color: oklch(97% 0.01 27);
}
.cw-cta-primary:hover { background: var(--cw-red-bright); }
.cw-cta:focus-visible { outline: 2px solid var(--cw-amber); outline-offset: 3px; }
.cw-updated { font-size: .82rem; opacity: .62; margin-top: .5rem; }

/* --------------------------------------------------------------- notice */
.cw-notice { padding: 0 var(--cw-pad); margin-top: -2.2rem; position: relative; z-index: 1; }
.cw-notice-card {
  max-width: var(--cw-max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 1.1rem;
  background: color-mix(in oklab, var(--cw-red) 13%, oklch(16% 0.01 265));
  border: 1px solid color-mix(in oklab, var(--cw-red) 45%, transparent);
  border-radius: 14px; padding: 1rem 1.25rem;
}
.cw-notice-date {
  flex: 0 0 auto; text-align: center; line-height: 1.05;
  border: 1.5px solid var(--cw-red-bright); border-radius: 10px;
  padding: .45rem .7rem; min-width: 3.6rem;
}
.cw-notice-mon { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cw-red-bright); }
.cw-notice-day { display: block; font-size: 1.5rem; font-weight: 700; }
.cw-notice-card p { margin: 0; text-wrap: pretty; }

/* --------------------------------------------------------------- answer */
.cw-answer-lead { max-width: var(--cw-max-w); margin: 0 auto; font-size: clamp(1.05rem, 2.4vw, 1.28rem); line-height: 1.55; text-wrap: pretty; }
.cw-answer-facts {
  max-width: var(--cw-max-w); margin: 2rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem;
}
.cw-fact {
  border: 1px solid var(--cw-line); background: var(--cw-card);
  border-radius: 14px; padding: 1.1rem 1.2rem; display: grid; gap: .3rem;
}
.cw-fact-num {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; line-height: 1;
  color: var(--cw-kraft);
}
.cw-fact-label { opacity: .85; font-size: .95rem; }
.cw-fact-red .cw-fact-num { color: var(--cw-red-bright); }

/* ----------------------------------------------------------- what it sells */
.cw-what-cols {
  max-width: var(--cw-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem;
}
.cw-what-block {
  border: 1px solid var(--cw-line); border-radius: 16px; padding: 1.4rem 1.5rem;
  background: var(--cw-card);
}
.cw-what-yes { border-top: 3px solid var(--cw-green); }
.cw-what-no  { border-top: 3px solid var(--cw-red); }
.cw-what-block ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.cw-what-block li { text-wrap: pretty; }

/* --------------------------------------------------------------- prices */
.cw-tags {
  max-width: var(--cw-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem;
}
.cw-tag-card {
  position: relative;
  background: var(--cw-kraft); color: oklch(24% 0.03 84);
  border-radius: 10px; padding: 1.9rem 1.3rem 1.15rem;
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 28px oklch(0% 0 0 / .35);
}
.cw-tag-card::before {
  /* the punched hole with its reinforcement ring */
  content: ""; position: absolute; top: 10px; left: 22px; width: 13px; height: 13px;
  border-radius: 50%; background: oklch(15% 0.012 265);
  box-shadow: 0 0 0 4px oklch(70% 0.06 84);
}
.cw-tag-item { font-weight: 700; letter-spacing: .01em; margin: 0 0 .35rem; }
.cw-tag-prices {
  display: flex; align-items: baseline; gap: .7rem; margin: 0;
  font-family: var(--display);
}
.cw-tag-now { font-size: 2.1rem; font-weight: 800; color: var(--cw-red); line-height: 1; }
.cw-tag-note { font-size: .82rem; opacity: .68; margin: .4rem 0 0; text-transform: uppercase; letter-spacing: .07em; }
.cw-prices-foot { max-width: var(--cw-max-w); margin: 1.6rem auto 0; opacity: .9; text-wrap: pretty; }

/* --------------------------------------------------------------- stores */
.cw-store-cards {
  max-width: var(--cw-max-w); margin: 0 auto 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.25rem;
}
.cw-store-card {
  border: 1px solid var(--cw-line); border-radius: 16px; padding: 1.5rem 1.6rem;
  background: var(--cw-card); display: grid; gap: .6rem; align-content: start;
}
.cw-store-vineland { border-top: 3px solid var(--cw-kraft); }
.cw-store-idrive   { border-top: 3px solid var(--cw-amber); }
.cw-store-mall { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 0; }
.cw-store-card h3 { font-size: 1.35rem; margin: 0; }
.cw-store-stamp {
  /* rubber-stamped deciding fact */
  width: max-content; margin: .1rem 0 .2rem;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  border: 1.5px solid currentColor; border-radius: 6px; padding: .26rem .6rem;
  rotate: -1.6deg; opacity: .9;
}
.cw-store-vineland .cw-store-stamp { color: var(--cw-kraft); }
.cw-store-idrive .cw-store-stamp { color: var(--cw-amber); }
.cw-store-personality { margin: 0 0 .4rem; opacity: .92; text-wrap: pretty; }
.cw-store-meta { display: grid; gap: .55rem; margin: 0; border-top: 1px solid var(--cw-line); padding-top: .9rem; }
.cw-store-meta div { display: grid; grid-template-columns: 7.2rem 1fr; gap: .6rem; }
.cw-store-meta dt { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; opacity: .62; padding-top: .12rem; }
.cw-store-meta dd { margin: 0; }

/* --------------------------------------------------------------- picker */
.cw-picker { max-width: 46rem; margin: 0 auto; min-height: 12rem; }
.cw-picker-card {
  border: 1px solid var(--cw-line); border-radius: 16px; padding: 1.5rem 1.6rem;
  background: color-mix(in oklab, var(--ink, #e9edf3) 7%, transparent);
  text-align: center;
}
.cw-picker-q { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; text-wrap: balance; }
.cw-picker-opts { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.cw-pick-btn {
  padding: .7rem 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cw-line); background: transparent; color: inherit;
  font: inherit; font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.cw-pick-btn:hover { border-color: var(--cw-amber); transform: translateY(-1px); }
.cw-pick-btn:focus-visible { outline: 2px solid var(--cw-amber); outline-offset: 3px; }
.cw-picker-card.is-verdict {
  /* the answer arrives as a kraft tag, hole and all */
  position: relative;
  background: var(--cw-kraft); color: oklch(26% 0.03 84);
  border: none; clip-path: polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 12px 32px oklch(0% 0 0 / .4);
}
.cw-picker-card.is-verdict::before {
  content: ""; position: absolute; top: 12px; left: 26px; width: 13px; height: 13px;
  border-radius: 50%; background: oklch(15% 0.012 265);
  box-shadow: 0 0 0 4px oklch(70% 0.06 84);
}
.cw-picker-card.is-verdict .cw-picker-q { color: oklch(40% 0.05 84); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.cw-picker-verdict h3 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 2rem; line-height: 1; margin: .2rem 0 .5rem; color: var(--cw-red);
}
.cw-picker-verdict p { text-wrap: pretty; }
.cw-picker-card.is-verdict .cw-picker-reset { color: inherit; }
.cw-picker-why { opacity: .9; }
.cw-picker-reset {
  margin-top: 1rem; background: none; border: none; color: inherit; cursor: pointer;
  font: inherit; text-decoration: underline; opacity: .75;
}
.cw-picker-reset:hover { opacity: 1; }
.cw-picker-reset:focus-visible { outline: 2px solid var(--cw-amber); outline-offset: 3px; }

/* ------------------------------------------------------------ california + online */
.cw-prose { max-width: var(--cw-max-w); margin: 0 auto; display: grid; gap: 1rem; }
.cw-prose p { margin: 0; max-width: 72ch; text-wrap: pretty; line-height: 1.6; }

/* ------------------------------------------------------------- playbook */
.cw-play-grid {
  max-width: var(--cw-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem;
}
.cw-play {
  border: 1px solid var(--cw-line); border-left: 3px solid var(--cw-amber);
  border-radius: 12px; padding: 1.2rem 1.3rem; background: var(--cw-card);
}
.cw-play p { margin: 0; opacity: .92; text-wrap: pretty; }

/* --------------------------------------------------------------- worth */
.cw-verdicts {
  max-width: var(--cw-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem;
}
.cw-verdict {
  border: 1px solid var(--cw-line); border-radius: 14px; padding: 1.25rem 1.3rem;
  background: var(--cw-card); display: grid; gap: .4rem; align-content: start;
}
.cw-verdict-who { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .66; margin: 0; }
.cw-verdict-call {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 800; line-height: 1; margin: 0;
}
.cw-verdict-yes .cw-verdict-call { color: var(--cw-green); }
.cw-verdict-maybe .cw-verdict-call { color: var(--cw-amber); }
.cw-verdict-no .cw-verdict-call { color: var(--cw-red-bright); }
.cw-verdict p:last-child { margin: 0; opacity: .92; text-wrap: pretty; }

/* ----------------------------------------------------------------- faq */
.cw-faq-item {
  max-width: var(--cw-max-w); margin: 0 auto .65rem;
  border: 1px solid var(--cw-line); border-radius: 12px; background: var(--cw-card);
}
.cw-faq-item summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.cw-faq-item summary::-webkit-details-marker { display: none; }
.cw-faq-item summary::after {
  content: "+"; font-size: 1.3rem; line-height: 1; opacity: .6; flex: 0 0 auto;
  transition: rotate .2s ease;
}
.cw-faq-item[open] summary::after { rotate: 45deg; }
.cw-faq-item summary:focus-visible { outline: 2px solid var(--cw-amber); outline-offset: -2px; border-radius: 12px; }
.cw-faq-item p { padding: 0 1.2rem 1.1rem; margin: 0; opacity: .92; text-wrap: pretty; }

/* ---------------------------------------------------------------- close */
.cw-close { text-align: center; }
.cw-close-line { max-width: 46rem; margin: 0 auto 1.4rem; font-size: clamp(1.1rem, 2.6vw, 1.4rem); text-wrap: balance; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cw-hero-canvas { display: none; }
  .cw-cta, .cw-pick-btn { transition: none; }
}

/* ---------------------------------------------------------- small screens */
@media (max-width: 560px) {
  .cw-notice-card { flex-direction: column; align-items: flex-start; }
  .cw-store-meta div { grid-template-columns: 1fr; gap: .15rem; }
  .cw-tag-now { font-size: 2rem; }
}