/* ============================================================================
   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; }
}

/* ============================================================================
   Build your haul (cw-haul.js): cardboard bins, a kraft bag, a register key,
   and a thermal receipt that prints and gets stamped.
   ========================================================================== */
.cw-haul { position: relative; isolation: isolate;
  background: radial-gradient(70% 60% at 70% 10%, oklch(45% 0.09 75 / .22), transparent 70%), radial-gradient(60% 50% at 10% 90%, oklch(40% 0.13 27 / .14), transparent 70%); }
.cw-haul-kicker { display: inline-block; margin: 0 0 .5rem; padding: .3rem .7rem; border-radius: 6px; rotate: -2deg;
  background: var(--cw-red); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.cw-haul-floor { max-width: var(--cw-max-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.cw-haul-noscript { grid-column: 1 / -1; opacity: .85; }

/* bins */
.cw-haul-bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .85rem; }
.cw-bin { position: relative; display: grid; justify-items: center; gap: .15rem; padding: 1.35rem .6rem .8rem; cursor: pointer; text-align: center;
  border: 0; border-radius: 12px; color: oklch(24% 0.03 84); font: inherit;
  background: linear-gradient(180deg, #d6b27c, #c39b62 60%, #b48b53);
  box-shadow: inset 0 3px 0 oklch(100% 0 0 / .25), inset 0 -4px 0 oklch(0% 0 0 / .15), 0 10px 22px oklch(0% 0 0 / .35);
  transform: rotate(var(--tilt, 0deg)); transition: transform .18s cubic-bezier(.2,1.4,.4,1), box-shadow .18s ease; }
.cw-bin::before { /* the bin label strip */
  content: ""; position: absolute; top: 8px; left: 50%; width: 46%; height: 7px; margin-left: -23%; border-radius: 3px; background: oklch(96% 0.02 90 / .75); }
.cw-bin:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); box-shadow: inset 0 3px 0 oklch(100% 0 0 / .25), inset 0 -4px 0 oklch(0% 0 0 / .15), 0 18px 30px oklch(0% 0 0 / .4); }
.cw-bin:hover .cw-bin-art svg { animation: cw-wiggle .5s ease; }
.cw-bin:focus-visible { outline: 3px solid var(--cw-amber); outline-offset: 3px; }
.cw-bin-art { width: 78px; height: 78px; display: grid; place-items: center; filter: drop-shadow(0 6px 6px oklch(0% 0 0 / .3)); }
.cw-bin-art svg { width: 100%; height: 100%; }
.cw-bin-name { font-weight: 800; font-size: .92rem; line-height: 1.15; }
.cw-bin-band { font-size: .74rem; font-weight: 700; letter-spacing: .02em; opacity: .75; }
.cw-bin-sticker { position: absolute; top: -10px; right: -8px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, var(--cw-red-bright), var(--cw-red)); color: #fff; font-family: var(--display); font-weight: 800; font-size: .74rem; line-height: 1;
  box-shadow: 0 4px 10px oklch(0% 0 0 / .35), inset 0 0 0 2px oklch(100% 0 0 / .35); transform: scale(0) rotate(-30deg); opacity: 0; pointer-events: none; }
.cw-bin-sticker small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.cw-bin.is-in .cw-bin-sticker { transform: scale(1) rotate(12deg); opacity: 1; }
.cw-bin.is-slap .cw-bin-sticker { animation: cw-slap .42s cubic-bezier(.2,1.6,.4,1); }
.cw-bin.is-in { background: linear-gradient(180deg, #c9a46e, #b48b53 60%, #a57d47); }
.cw-bin.is-in .cw-bin-art { opacity: .35; filter: grayscale(.4); }
.cw-bin-check { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); padding: .2rem .55rem; border-radius: 5px; border: 2px solid oklch(30% 0.05 70);
  font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: oklch(30% 0.05 70); opacity: 0; transition: opacity .2s ease; }
.cw-bin.is-in .cw-bin-check { opacity: .85; }
@keyframes cw-slap { 0% { transform: scale(2.4) rotate(-40deg); opacity: 0; } 60% { transform: scale(.9) rotate(16deg); opacity: 1; } 100% { transform: scale(1) rotate(12deg); } }
@keyframes cw-wiggle { 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }

/* flying merch */
.cw-flyer { position: fixed; z-index: 2000; pointer-events: none; filter: drop-shadow(0 12px 14px oklch(0% 0 0 / .4)); }
.cw-flyer svg { width: 100%; height: 100%; }

/* counter + bag */
.cw-haul-counter { position: sticky; top: 90px; padding: 1.2rem 1.2rem 1.4rem; border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface, #2b2d4a) 92%, #000), color-mix(in oklab, var(--bg, #1f2038) 90%, #000));
  border: 1px solid var(--cw-line); box-shadow: 0 24px 50px oklch(0% 0 0 / .4), inset 0 1px 0 oklch(100% 0 0 / .06); }
.cw-haul-counter-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cw-haul-counter-k { font-weight: 800; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cw-amber); }
.cw-haul-mute { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--cw-line); background: var(--cw-card); color: inherit; }
.cw-haul-mute svg { width: 17px; height: 17px; }
.cw-haul-mute .off, .cw-haul-mute[aria-pressed="true"] .on { display: none; }
.cw-haul-mute[aria-pressed="true"] .off { display: block; }
.cw-bag { position: relative; width: min(230px, 70%); aspect-ratio: 220 / 200; margin: 1.2rem auto .3rem; transform-origin: 50% 100%; }
.cw-bag svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cw-bag-back { z-index: 0; }
.cw-bag-front { z-index: 2; filter: drop-shadow(0 12px 18px oklch(0% 0 0 / .45)); }
.cw-bag-mouth { position: absolute; z-index: 1; left: 12%; right: 12%; top: 0; height: 52%; display: flex; justify-content: center; align-items: flex-end; }
.cw-bag-item { position: absolute; bottom: -6px; left: 50%; width: 54%; aspect-ratio: 1; margin-left: -27%;
  transform: translate(var(--x, 0), var(--lift, 0)) rotate(var(--r, 0deg)); animation: cw-drop .45s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 4px 4px oklch(0% 0 0 / .3)); }
.cw-bag-item svg { width: 100%; height: 100%; }
.cw-bag-item.is-out { animation: cw-hop-out .4s ease forwards; }
@keyframes cw-drop { from { transform: translate(var(--x, 0), -60px) rotate(var(--r, 0deg)); opacity: 0; } }
@keyframes cw-hop-out { to { transform: translate(calc(var(--x, 0) * 2), -90px) rotate(90deg); opacity: 0; } }
.cw-bag.is-bounce { animation: cw-bounce .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes cw-bounce { 0% { transform: scale(1, 1); } 30% { transform: scale(1.06, .9); } 60% { transform: scale(.97, 1.04); } 100% { transform: none; } }
.cw-bag-count { position: absolute; z-index: 3; right: 4%; top: 30%; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px; display: grid; place-items: center;
  background: var(--cw-red); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; box-shadow: 0 4px 10px oklch(0% 0 0 / .4), inset 0 0 0 2px oklch(100% 0 0 / .3);
  transform: scale(0); transition: transform .3s cubic-bezier(.2,1.6,.4,1); }
.cw-bag-count.is-on { transform: scale(1); }
.cw-bag-empty { text-align: center; opacity: .7; font-size: .9rem; margin: .2rem 0 0; }

/* the park-price slider */
.cw-haul-budget { margin-top: 1rem; }
.cw-haul-budget label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .45rem; }
.cw-haul-budget-row { display: flex; align-items: center; gap: .8rem; }
.cw-haul-budget output { min-width: 4.5ch; text-align: right; font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--cw-amber); font-variant-numeric: tabular-nums; }
.cw-haul-budget input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; cursor: pointer;
  background: linear-gradient(90deg, var(--cw-amber) var(--fill, 0%), var(--cw-line) var(--fill, 0%)); }
.cw-haul-budget input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, var(--cw-kraft) 40%, var(--cw-kraft-deep)); border: 2px solid oklch(30% 0.05 70); box-shadow: 0 3px 8px oklch(0% 0 0 / .45); }
.cw-haul-budget input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--cw-kraft); border: 2px solid oklch(30% 0.05 70); }
.cw-haul-hint { margin: .45rem 0 0; font-size: .8rem; opacity: .7; }

/* buttons: a chunky red register key, plus quiet ghosts */
.cw-haul-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.cw-haul-ring { flex: 1 1 100%; position: relative; overflow: hidden; padding: 1rem 1.2rem; border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; color: #fff4e4;
  background: linear-gradient(180deg, var(--cw-red-bright), var(--cw-red)); box-shadow: 0 6px 0 oklch(38% 0.15 27), 0 14px 26px oklch(0% 0 0 / .4), inset 0 1px 0 oklch(100% 0 0 / .3);
  transition: transform .06s ease, box-shadow .06s ease, filter .2s ease; }
.cw-haul-ring::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, oklch(100% 0 0 / .35) 50%, transparent 65%); transform: translateX(-120%); animation: cw-sheen 2.6s 1s ease-in-out infinite; }
.cw-haul-ring:active:not(:disabled), .cw-haul-ring.is-press { transform: translateY(5px); box-shadow: 0 1px 0 oklch(38% 0.15 27), 0 6px 12px oklch(0% 0 0 / .4); }
.cw-haul-ring:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.cw-haul-ring:disabled::after { display: none; }
@keyframes cw-sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.cw-haul-ghost { flex: 1 1 auto; padding: .7rem 1rem; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: .9rem; color: inherit; background: var(--cw-card); border: 1px solid var(--cw-line); }
.cw-haul-ghost:hover { border-color: var(--cw-amber); color: var(--cw-amber); }

/* the receipt */
.cw-receipt-slot { position: relative; margin-top: 1.3rem; padding-top: 10px; }
.cw-receipt-slot::before { /* the printer slot */ content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 12px; border-radius: 6px; background: oklch(12% 0.01 265); box-shadow: inset 0 3px 6px oklch(0% 0 0 / .8); }
.cw-receipt { position: relative; margin: -4px 8% 0; padding: 18px 16px 22px; color: #2b211c; background: #fbf8f1;
  font-family: "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 16px 30px oklch(0% 0 0 / .35); transform-origin: 50% 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x; }
.cw-rl { white-space: pre; overflow: hidden; animation: cw-print .12s ease-out both; }
@keyframes cw-print { from { opacity: 0; transform: translateY(-4px); } }
.cw-rl-h { text-align: center; font-weight: 800; font-size: 17px; letter-spacing: .12em; }
.cw-rl-h2 { text-align: center; font-weight: 700; letter-spacing: .2em; }
.cw-rl-fine { text-align: center; font-size: 10.5px; opacity: .7; white-space: normal; }
.cw-rl-center { text-align: center; font-weight: 700; letter-spacing: .12em; }
.cw-rl-tip { text-align: center; font-size: 11px; white-space: normal; font-style: italic; opacity: .85; }
.cw-rl-rule { height: 0; border-top: 1.5px dashed #2b211c; margin: 6px 0; opacity: .6; }
.cw-rl-rule2 { height: 0; border-top: 2px solid #2b211c; margin: 6px 0; }
.cw-rl-big { font-weight: 800; font-size: 14px; }
.cw-rl-barcode svg { display: block; width: 70%; height: 34px; margin: 8px auto 2px; }
.cw-stamp { position: absolute; right: 6%; top: 44%; padding: .45rem .8rem .5rem; text-align: center; color: oklch(55% 0.21 25); border: 3px solid currentColor; border-radius: 8px;
  outline: 1.5px solid currentColor; outline-offset: -8px; transform: rotate(-12deg); mix-blend-mode: multiply; opacity: 0; font-family: inherit; }
.cw-stamp span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.cw-stamp b { display: block; font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.cw-receipt.is-done .cw-stamp { animation: cw-stamp .32s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes cw-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2.6); } 100% { opacity: .92; transform: rotate(-12deg) scale(1); } }
.cw-receipt-slot.is-shake { animation: cw-shake .35s ease; }
@keyframes cw-shake { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(1px, 0); } }
.cw-receipt-actions { display: flex; gap: .6rem; margin: 1rem 8% 0; }
.cw-mini-tag { position: fixed; z-index: 2000; width: 14px; height: 20px; border-radius: 3px 3px 4px 4px; pointer-events: none; clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); box-shadow: 0 2px 4px oklch(0% 0 0 / .3); }
.cw-haul-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* phones: bins first, the counter below, a chip to jump to it */
.cw-haul-chip { position: fixed; z-index: 150; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: .8rem 1.2rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cw-red); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; box-shadow: 0 10px 26px oklch(0% 0 0 / .5); animation: cw-chip .35s cubic-bezier(.2,1.5,.4,1); }
.cw-haul-chip[hidden] { display: none; }
@keyframes cw-chip { from { transform: translate(-50%, 30px); opacity: 0; } }
@media (min-width: 900px) { .cw-haul-chip { display: none !important; } }
@media (max-width: 899px) {
  .cw-haul-floor { grid-template-columns: 1fr; }
  .cw-haul-counter { position: relative; top: 0; }
  .cw-haul-bins { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .cw-bin { padding: 1.1rem .35rem .6rem; }
  .cw-bin-art { width: 58px; height: 58px; }
  .cw-bin-name { font-size: .8rem; }
  .cw-bin-band { font-size: .66rem; }
  .cw-bin-sticker { width: 46px; height: 46px; font-size: .62rem; right: -6px; }
  .cw-receipt { margin: -4px 2% 0; font-size: 11.5px; }
  .cw-receipt-actions { margin: 1rem 2% 0; }
}
@media (max-width: 380px) { .cw-haul-bins { grid-template-columns: repeat(2, 1fr); } .cw-receipt { font-size: 10.5px; padding: 16px 10px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .cw-bin, .cw-bin-sticker, .cw-bag-item, .cw-bag.is-bounce, .cw-receipt.is-done .cw-stamp, .cw-rl, .cw-haul-ring::after, .cw-haul-chip { animation: none !important; transition: none !important; }
  .cw-receipt.is-done .cw-stamp { opacity: .92; }
}
/* the receipt's 34-column lines always fit: type scales with the paper's width */
.cw-receipt { container-type: inline-size; }
.cw-rl { font-size: min(12.5px, 4.7cqi); }
.cw-rl-h { font-size: min(17px, 6.2cqi); }
.cw-rl-big { font-size: min(14px, 4.9cqi); }
.cw-rl-fine { font-size: min(10.5px, 3.9cqi); }
.cw-rl-tip { font-size: min(11px, 4cqi); }

/* ============================================================================
   Hero, v2: the markdown moment (cw-hero-tag.js). The headline sits clear on
   the left; a kraft tag hangs on a clearance rail to its right and gets
   re-tagged. Nothing moves behind the type.
   ========================================================================== */
.cw-hero { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); grid-template-areas: "copy tag"; gap: clamp(1rem, 4vw, 3.5rem);
  max-width: none; text-align: left; place-items: center stretch; min-height: 88svh; }
.cw-hero > .cw-hero-inner { grid-area: copy; justify-items: start; background: none; padding: 0; max-width: 40rem; justify-self: end; }
.cw-hero .cw-hero-ctas { justify-content: flex-start; }
.cw-htag-col { grid-area: tag; position: relative; align-self: stretch; display: grid; justify-items: center; align-content: start; padding-top: 1.5rem; min-height: 520px; }

/* a warm light from above, only over the tag */
.cw-htag-beam { position: absolute; left: 50%; top: -6rem; width: 120%; height: 115%; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: conic-gradient(from 180deg at 50% 0%, transparent 155deg, oklch(80% 0.12 78 / .16) 172deg, oklch(86% 0.1 80 / .22) 180deg, oklch(80% 0.12 78 / .16) 188deg, transparent 205deg);
  -webkit-mask: linear-gradient(#000 40%, transparent 95%); mask: linear-gradient(#000 40%, transparent 95%); }

/* the clearance rail, with two out-of-focus neighbours */
.cw-htag-rail { position: relative; width: min(400px, 92%); height: 14px; z-index: 2; }
.cw-htag-rail i { position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(180deg, #fbe7a6, #b98f38 45%, #5e4113); box-shadow: 0 6px 12px oklch(0% 0 0 / .45); }
.cw-htag-rail::before, .cw-htag-rail::after { content: ""; position: absolute; top: -40px; width: 10px; height: 52px; border-radius: 4px; background: linear-gradient(90deg, #5e4113, #c9a14a, #5e4113); }
.cw-htag-rail::before { left: 6%; } .cw-htag-rail::after { right: 6%; }
.cw-htag-ghost { position: absolute; top: 10px; width: 92px; height: 128px; background: var(--cw-kraft-deep); opacity: .45; filter: blur(3px);
  clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); transform-origin: 50% 0; }
.cw-htag-ghost.g1 { left: 2%; transform: rotate(6deg) scale(.85); animation: cw-ghost 6s ease-in-out infinite; }
.cw-htag-ghost.g2 { right: 1%; transform: rotate(-5deg) scale(.78); background: var(--cw-red); opacity: .35; animation: cw-ghost 7s -2s ease-in-out infinite reverse; }
@keyframes cw-ghost { 50% { rotate: 3deg; } }

/* the tag itself */
.cw-htag-stage { position: relative; z-index: 3; margin-top: -2px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 900px; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.cw-htag-stage:focus-visible { outline: 3px solid var(--cw-amber); outline-offset: 8px; border-radius: 12px; }
.cw-htag-swing { display: grid; justify-items: center; transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform; }
.cw-htag-string { width: 20px; height: 58px; display: block; }
.cw-htag { position: relative; display: grid; justify-items: center; align-content: start; gap: .35rem;
  width: clamp(230px, 26vw, 300px); aspect-ratio: 3 / 4.1; margin-top: -4px; padding: 3.4rem 1.4rem 1.4rem;
  color: oklch(26% 0.04 70); text-align: center;
  background: radial-gradient(120% 80% at 30% 10%, oklch(92% 0.05 86), transparent 60%), linear-gradient(180deg, oklch(86% 0.06 84), oklch(79% 0.065 80));
  clip-path: polygon(24% 0, 76% 0, 100% 11%, 100% 100%, 0 100%, 0 11%);
  filter: drop-shadow(0 24px 30px oklch(0% 0 0 / .55)); }
.cw-htag::after { /* paper fibre */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background: repeating-linear-gradient(83deg, transparent 0 3px, oklch(55% 0.05 70 / .35) 3px 4px), repeating-linear-gradient(-12deg, transparent 0 7px, oklch(55% 0.05 70 / .25) 7px 8px); }
.cw-htag-hole { position: absolute; top: 16px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: oklch(15% 0.012 265); box-shadow: 0 0 0 5px oklch(72% 0.06 84), 0 0 0 6px oklch(60% 0.05 80); }
.cw-htag-top { font-weight: 800; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.cw-htag-bars { width: 72%; height: 30px; margin: .15rem 0 .2rem; opacity: .85;
  background: repeating-linear-gradient(90deg, oklch(24% 0.03 70) 0 2px, transparent 2px 4px, oklch(24% 0.03 70) 4px 5px, transparent 5px 8px, oklch(24% 0.03 70) 8px 11px, transparent 11px 13px); }
.cw-htag-item { font-family: var(--display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; max-width: 12ch; }
.cw-htag-price { position: relative; display: grid; gap: .1rem; margin-top: .6rem; padding: .5rem 1rem; }
.cw-htag-price-k { font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.cw-htag-price-v { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; }
.cw-htag-slash { position: absolute; inset: -8% -12%; width: 124%; height: 116%; overflow: visible; pointer-events: none; }
.cw-htag-slash path { fill: none; stroke: var(--cw-red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.cw-htag.is-slashed .cw-htag-slash path { transition: stroke-dashoffset .28s cubic-bezier(.5,0,.3,1); stroke-dashoffset: 0; }
.cw-htag.is-slashed .cw-htag-slash path:nth-child(2) { transition-delay: .18s; }
.cw-htag-fine { margin-top: auto; font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.cw-htag.is-hit { animation: cw-hit .28s ease; }
@keyframes cw-hit { 30% { transform: scale(.97) translateY(3px); } }

/* the stickers */
.cw-stk { position: absolute; z-index: 2; display: grid; place-content: center; text-align: center; color: #fff; pointer-events: none;
  font-family: var(--display); line-height: .95; opacity: 0; box-shadow: 0 6px 12px oklch(0% 0 0 / .35), inset 0 0 0 2px oklch(100% 0 0 / .35); }
.cw-stk b { font-weight: 800; }
.cw-stk i { font-style: normal; font-weight: 800; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.cw-stk-1 { top: 28%; left: -6%; width: 84px; height: 84px; border-radius: 50%; color: oklch(28% 0.06 80);
  background: radial-gradient(circle at 35% 30%, #fff3a6, #f2cf3a 60%, #d9ae1e); --r: -14deg; }
.cw-stk-1 b { font-size: 1.6rem; }
.cw-stk-2 { top: 44%; right: -8%; width: 100px; height: 100px; background: #ff8a2a; --r: 10deg;
  clip-path: polygon(50% 0, 61% 17%, 79% 8%, 80% 28%, 99% 32%, 88% 49%, 100% 64%, 81% 70%, 82% 91%, 62% 84%, 50% 100%, 38% 84%, 18% 91%, 19% 70%, 0 64%, 12% 49%, 1% 32%, 20% 28%, 21% 8%, 39% 17%); box-shadow: none; filter: drop-shadow(0 6px 8px oklch(0% 0 0 / .35)); }
.cw-stk-2 b { font-size: 1.7rem; }
.cw-stk-3 { left: 6%; right: 6%; bottom: 13%; padding: .7rem .6rem .75rem; border-radius: 8px; --r: -5deg;
  background: linear-gradient(180deg, var(--cw-red-bright), var(--cw-red)); box-shadow: 0 10px 18px oklch(0% 0 0 / .4), inset 0 0 0 2px oklch(100% 0 0 / .35), inset 0 0 0 5px var(--cw-red), inset 0 0 0 6px oklch(100% 0 0 / .4); }
.cw-stk-3 i { font-size: .7rem; letter-spacing: .24em; margin-bottom: .25rem; }
.cw-stk-3 b { font-size: 1.55rem; text-transform: uppercase; letter-spacing: .01em; }
.cw-stk.is-on { opacity: 1; transform: rotate(var(--r)); animation: cw-stk-slap .42s cubic-bezier(.2,1.6,.4,1); }
.cw-stk.is-peel { animation: cw-stk-peel .45s ease forwards; }
@keyframes cw-stk-slap { 0% { opacity: 0; transform: rotate(calc(var(--r) - 30deg)) scale(2.3); } 55% { opacity: 1; transform: rotate(calc(var(--r) + 6deg)) scale(.92); } 100% { transform: rotate(var(--r)) scale(1); } }
@keyframes cw-stk-peel { 0% { opacity: 1; transform: rotate(var(--r)); } 100% { opacity: 0; transform: rotate(calc(var(--r) + 40deg)) translate(40px, -60px) scale(.7); } }

.cw-htag-hint { margin: 1rem 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transition: opacity .6s ease; color: var(--cw-amber); }
.cw-htag-col:has(.is-done) .cw-htag-hint { opacity: .6; }
.cw-htag-stage.is-drop .cw-htag-swing { animation: cw-tag-drop .7s cubic-bezier(.25,1.4,.45,1) both; }
@keyframes cw-tag-drop { from { translate: 0 -120px; opacity: 0; } }

@media (max-width: 899px) {
  .cw-hero { grid-template-columns: 1fr; grid-template-areas: "tag" "copy"; text-align: center; min-height: 0; padding-top: 2.5rem; gap: .5rem; }
  .cw-hero > .cw-hero-inner { justify-items: center; justify-self: center; }
  .cw-hero .cw-hero-ctas { justify-content: center; }
  .cw-htag-col { min-height: 0; padding-top: .5rem; }
  .cw-htag { width: 190px; padding: 2.8rem 1rem 1rem; }
  .cw-htag-item { font-size: .9rem; }
  .cw-htag-price-v { font-size: 1.5rem; }
  .cw-stk-1 { width: 64px; height: 64px; } .cw-stk-1 b { font-size: 1.2rem; }
  .cw-stk-2 { width: 76px; height: 76px; } .cw-stk-2 b { font-size: 1.3rem; }
  .cw-stk-3 b { font-size: 1.15rem; } .cw-stk-3 i { font-size: .58rem; }
  .cw-htag-rail { width: min(300px, 86%); }
  .cw-htag-ghost { width: 64px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-stk.is-on, .cw-htag-stage.is-drop .cw-htag-swing, .cw-htag-ghost, .cw-htag.is-hit { animation: none; }
  .cw-htag.is-slashed .cw-htag-slash path { transition: none; }
}
/* the big word shares its row with the tag now */
@media (min-width: 900px) { .cw-hero .cw-h1-mark { font-size: clamp(2.8rem, 6vw, 5.4rem); } }

/* ============================================================================
   The store map (cw-map.js): a kraft fold-out map of the I-4 corridor
   ========================================================================== */
.cw-map { max-width: var(--cw-max-w); margin: 0 auto 2.2rem; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); grid-template-areas: "paper panel" "picks panel"; gap: 1rem 1.4rem; align-items: start; }
.cw-map-paper { grid-area: paper; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px oklch(0% 0 0 / .45), 0 0 0 1px oklch(40% 0.05 70 / .5); transform: rotate(-.4deg); }
.cw-map-paper::after { /* fold creases */ content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 32.9%, oklch(0% 0 0 / .08) 33.3%, oklch(100% 0 0 / .18) 33.6%, transparent 34.2%, transparent 66.2%, oklch(0% 0 0 / .08) 66.6%, oklch(100% 0 0 / .18) 66.9%, transparent 67.5%),
    linear-gradient(180deg, transparent 49.6%, oklch(0% 0 0 / .07) 50%, oklch(100% 0 0 / .15) 50.3%, transparent 50.9%); }
.cw-map-svg { display: block; width: 100%; height: auto; font-family: var(--display); }
.cw-map-water { fill: #9cc7c3; }
.cw-map-lake { fill: #9cc7c3; opacity: .85; }
.cw-map-sea { font-size: 20px; font-style: italic; fill: #3f6f73; letter-spacing: .3em; opacity: .75; }
.cw-map-park { fill: #9fc58a; stroke: #6f9a5c; stroke-width: 2; stroke-dasharray: 5 4; }
.cw-map-park-u { fill: #b7c7e6; stroke: #7d8fb8; }
.cw-map-road-case { fill: none; stroke: #fbf5e6; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.cw-map-road { fill: none; stroke: #c9a14a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cw-map-shield path { fill: #2f55a4; stroke: #fbf5e6; stroke-width: 2.5; }
.cw-map-shield text { fill: #fff; font-size: 14px; font-weight: 800; text-anchor: middle; }
.cw-map-town { fill: #2b211c; }
.cw-map-dot { fill: #7a4f9e; stroke: #fbf5e6; stroke-width: 2; }
.cw-map-label { fill: #3a2a12; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #eadcbc; stroke-width: 4px; stroke-linejoin: round; }
.cw-map-label-town { font-size: 20px; letter-spacing: .04em; }
.cw-map-label-park { font-size: 14px; font-style: italic; fill: #2f4f25; }
.cw-map-label-small { font-size: 13px; font-weight: 700; }
.cw-map-compass text { fill: #6b4a26; font-size: 15px; font-weight: 800; text-anchor: middle; }
.cw-map-cartouche path { fill: #7a4f2a; }
.cw-map-cartouche text { fill: #fbf1d8; font-size: 19px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; font-style: italic; }
.cw-map-scale { fill: #6b4a26; font-size: 12px; font-style: italic; text-anchor: end; opacity: .8; }
.cw-map-route { fill: none; stroke: var(--cw-red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; opacity: 0; }
.cw-map-route.is-on { opacity: .95; }
.cw-map-route.is-done { stroke-dasharray: 10 8 !important; stroke-dashoffset: 0 !important; animation: cw-march 1s linear infinite; }
@keyframes cw-march { to { stroke-dashoffset: -18; } }
.cw-map-car { filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }

/* pins */
.cw-map-pin { cursor: pointer; }
.cw-pin-body { fill: var(--cw-red); stroke: #2b211c; stroke-width: 2.5; transform-origin: 0 0; transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.cw-pin-pulse { fill: none; stroke: var(--cw-red); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: cw-pulse 2s ease-out infinite; }
@keyframes cw-pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.cw-pin-label { font-size: 17px; font-weight: 800; text-anchor: middle; fill: #2b211c; paint-order: stroke; stroke: #fbf5e6; stroke-width: 5px; stroke-linejoin: round; }
.cw-map-pin:hover .cw-pin-body, .cw-map-pin.is-active .cw-pin-body { transform: scale(1.18) translateY(-3px); }
.cw-map-pin.is-active .cw-pin-body { fill: #b3172d; }
.cw-map-pin-soon .cw-pin-body { fill: #e3b33a; }
.cw-map-pin-soon .cw-pin-pulse { stroke: #e3b33a; }
.cw-pin-soon rect { fill: #2b211c; }
.cw-pin-soon text { fill: #f2cf63; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-anchor: middle; }
/* Tampa drops in last, once the map is on screen */
.cw-map-pin-soon { opacity: 0; }
.cw-map.is-live .cw-map-pin-soon { animation: cw-pin-drop .8s .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes cw-pin-drop { 0% { opacity: 0; translate: 0 -120px; } 60% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
.cw-map.is-live .cw-pin-soon { animation: cw-badge 1.4s 1.4s ease both; }
@keyframes cw-badge { 0% { opacity: 0; transform: translate(30px, -46px) scale(.3); } 30% { opacity: 1; transform: translate(30px, -46px) scale(1.25); } 100% { opacity: 1; transform: translate(30px, -46px) scale(1); } }

/* the store card beside the map */
.cw-map-panel { grid-area: panel; min-height: 100%; padding: 1.3rem 1.3rem 1.4rem; border-radius: 14px; background: var(--cw-kraft); color: oklch(24% 0.03 84); box-shadow: 0 16px 34px oklch(0% 0 0 / .35);
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%); }
.cw-map-panel.is-in { animation: cw-panel .45s cubic-bezier(.2,1.2,.4,1); }
@keyframes cw-panel { from { opacity: 0; transform: translateY(8px) rotate(-1deg); } }
.cw-map-panel-k { margin: .3rem 0 .35rem; font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.cw-map-panel h3 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.3rem; line-height: 1.15; }
.cw-map-panel-hint { margin: 0; opacity: .8; }
.cw-map-status { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-weight: 800; }
.cw-map-status i { width: 10px; height: 10px; border-radius: 50%; background: #8a8a8a; }
.cw-map-status.is-open i { background: #2f9e57; box-shadow: 0 0 0 0 #2f9e57; animation: cw-live 1.8s ease-out infinite; }
.cw-map-status.is-closed i { background: var(--cw-red); }
.cw-map-status.is-soon i { background: #d9a31e; }
@keyframes cw-live { to { box-shadow: 0 0 0 9px transparent; } }
.cw-map-panel dl { display: grid; gap: .45rem; margin: 0 0 .8rem; }
.cw-map-panel dl div { display: grid; grid-template-columns: 7.2em 1fr; gap: .5rem; }
.cw-map-panel dt { font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; padding-top: .12rem; }
.cw-map-panel dd { margin: 0; font-weight: 600; }
.cw-map-note { margin: 0 0 .5rem; }
.cw-map-fine { margin: 0 0 .9rem; font-size: .8rem; opacity: .7; }
.cw-map-dir { display: inline-block; padding: .6rem 1.1rem; border-radius: 999px; background: var(--cw-red); color: #fff; font-weight: 800; text-decoration: none; }
.cw-map-dir:hover { background: var(--cw-red-bright); }

.cw-map-picks { grid-area: picks; display: flex; flex-wrap: wrap; gap: .5rem; }
.cw-map-pick { padding: .6rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: inherit; background: var(--cw-card); border: 1px solid var(--cw-line); }
.cw-map-pick span { margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: #d9a31e; color: #2b211c; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.cw-map-pick[aria-pressed="true"] { background: var(--cw-red); border-color: transparent; color: #fff; }
.cw-map-pick:focus-visible { outline: 2px solid var(--cw-amber); outline-offset: 3px; }
.cw-store-stamp-soon { background: #d9a31e !important; color: #2b211c !important; }

@media (max-width: 899px) {
  .cw-map { grid-template-columns: 1fr; grid-template-areas: "paper" "picks" "panel"; }
  .cw-map-paper { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-pin-pulse, .cw-map-route.is-done, .cw-map-status.is-open i, .cw-map-panel.is-in { animation: none; }
  .cw-map-pin-soon { opacity: 1; }
  .cw-map.is-live .cw-map-pin-soon, .cw-map.is-live .cw-pin-soon { animation: none; }
}

/* ============================================================================
   Map v2: camera, detail layers, light, traffic, pop-up storefront
   ========================================================================== */
.cw-map { grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); grid-template-areas: "paper side"; }
.cw-map-paper { grid-area: paper; }
.cw-map-side { grid-area: side; display: grid; gap: 1rem; align-content: start; }
.cw-map-svg { --k: 1; aspect-ratio: 1000 / 600; touch-action: manipulation; }
/* hold on-screen sizes steady while the camera zooms */
.cw-map-road, .cw-map-road-case, .cw-map-local, .cw-map-route, .cw-map-park { vector-effect: non-scaling-stroke; }
.cw-map-road-case { stroke-width: 11px; } .cw-map-road { stroke-width: 5.5px; }
.cw-map-label-town { font-size: calc(20px / var(--k)); stroke-width: calc(4px / var(--k)); }
.cw-map-label-park { font-size: calc(14px / var(--k)); stroke-width: calc(4px / var(--k)); }
.cw-map-label-small { font-size: calc(13px / var(--k)); stroke-width: calc(4px / var(--k)); }
.cw-map-sea { font-size: calc(20px / var(--k)); }
.cw-map-scale { font-size: calc(12px / var(--k)); }
.cw-pin-s, .cw-sh-s { transform: scale(calc(1 / var(--k))); }
.cw-map-town { r: calc(6px / var(--k)); }
.cw-map-dot { r: calc(5px / var(--k)); }
.cw-traffic-dot { r: calc(2.6px / var(--k)); }
/* the zoomed-in layers */
.cw-map-detail { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cw-map[data-detail="orlando"] .cw-map-detail[data-detail="orlando"], .cw-map[data-detail="tampa"] .cw-map-detail[data-detail="tampa"] { opacity: 1; }
.cw-map-local { fill: none; stroke: #fbf5e6; stroke-width: 4px; stroke-linecap: round; }
.cw-map-mini { font-size: calc(11px / var(--k)); font-weight: 800; fill: #3a2a12; paint-order: stroke; stroke: #eadcbc; stroke-width: calc(3px / var(--k)); stroke-linejoin: round; }
.cw-map-mall rect { fill: #fbf5e6; stroke: #2b211c; stroke-width: 1.2; } .cw-map-mall path { fill: var(--cw-red); stroke: #2b211c; stroke-width: 1.2; }
.cw-map-build text { font-size: 6px; font-weight: 800; fill: #f2cf63; font-family: system-ui, sans-serif; }
.cw-crane-sign { transform-box: fill-box; transform-origin: 50% -4px; animation: cw-crane 3s ease-in-out infinite; }
@keyframes cw-crane { 50% { transform: rotate(6deg); } }
/* hide the wide-view furniture when close */
.cw-lbl-g, .cw-map-scale { transition: opacity .4s ease; }
.cw-map.is-zoomed .cw-map-cartouche, .cw-map.is-zoomed .cw-map-compass, .cw-map.is-zoomed .cw-map-scale { opacity: 0; }
/* the route marker line */
.cw-map-route { stroke-width: 5px; stroke-dasharray: 0; }
.cw-map-route.is-done { stroke-dasharray: 12 9 !important; }
.cw-map-origin .cw-pin-s { animation: none; }
.cw-map-origin.is-pop .cw-pin-s { animation: cw-origin .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes cw-origin { from { transform: scale(calc(2 / var(--k))); } }
/* cloud shadows */
.cw-map-clouds ellipse { fill: #3a2a12; opacity: .12; }
.cw-map-clouds .c1 { animation: cw-cloud 60s linear infinite; }
.cw-map-clouds .c2 { animation: cw-cloud 80s -30s linear infinite; }
.cw-map-clouds .c3 { animation: cw-cloud 70s -50s linear infinite; }
@keyframes cw-cloud { from { transform: translateX(-700px); } to { transform: translateX(900px); } }
/* the light of the real Orlando hour */
.cw-map-tod { fill: transparent; mix-blend-mode: multiply; transition: fill 1.5s ease; }
.cw-map[data-tod="dawn"] .cw-map-tod { fill: #f3c2a6; }
.cw-map[data-tod="dusk"] .cw-map-tod { fill: #c9a0c8; }
.cw-map[data-tod="night"] .cw-map-tod { fill: #5a6394; }
.cw-map-glows circle { opacity: 0; transition: opacity 1s ease; }
.cw-map.is-open[data-tod="dusk"] .cw-map-glows circle, .cw-map.is-open[data-tod="night"] .cw-map-glows circle { opacity: 1; animation: cw-glow 2.4s ease-in-out infinite alternate; }
@keyframes cw-glow { to { opacity: .6; } }
.cw-map-clock { position: absolute; left: 12px; top: 12px; margin: 0; padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  background: oklch(20% 0.03 70 / .78); color: #fbf1d8; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cw-map-reset { position: absolute; right: 12px; top: 12px; padding: .45rem .9rem; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; font-size: .8rem;
  background: #2b211c; color: #f2cf63; box-shadow: 0 6px 14px oklch(0% 0 0 / .35); }
.cw-map-reset[hidden] { display: none; }
/* pins: the closest-open badge, active state */
.cw-pin-best { opacity: 0; transition: opacity .3s ease; }
.cw-pin-best rect { fill: #2f9e57; } .cw-pin-best text { fill: #fff; font-size: 10px; font-weight: 800; text-anchor: middle; letter-spacing: .04em; }
.cw-map-pin.is-best .cw-pin-best { opacity: 1; }
.cw-map-pin.is-active .cw-pin-pulse { animation-duration: 1s; }
/* hover chip */
.cw-map-tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: .45rem .7rem; border-radius: 10px; pointer-events: none; white-space: nowrap;
  background: #2b211c; color: #fbf1d8; box-shadow: 0 8px 18px oklch(0% 0 0 / .4); display: grid; gap: .1rem; font-size: .8rem; }
.cw-map-tip[hidden] { display: none; }
.cw-map-tip b { font-size: .9rem; }
.cw-map-tip .is-open { color: #7fe0a0; } .cw-map-tip .is-closed { color: #ff9a9a; } .cw-map-tip .is-soon { color: #f2cf63; }
/* controls */
.cw-map-controls { display: grid; gap: .45rem; }
.cw-map-ctl-k { margin: .2rem 0 0; font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cw-amber); }
.cw-map-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--cw-card); border: 1px solid var(--cw-line); }
.cw-map-seg button { flex: 1 1 auto; padding: .55rem .7rem; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; color: inherit; background: transparent; }
.cw-map-seg button[aria-pressed="true"] { background: var(--cw-kraft); color: oklch(24% 0.03 84); box-shadow: 0 3px 8px oklch(0% 0 0 / .3); }
.cw-map-pick.is-best::after { content: "Closest"; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; background: #2f9e57; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* the pop-up storefront */
.cw-popup { margin: -1.3rem -1.3rem .9rem; perspective: 700px; }
.cw-front { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.cw-map-panel.is-in .cw-front { animation: cw-popup .7s cubic-bezier(.2,1.3,.4,1) both; }
.cw-map-panel.is-in .cw-front-awning { animation: cw-awning .5s .45s cubic-bezier(.2,1.6,.4,1) both; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes cw-popup { from { transform: rotateX(-88deg); } }
@keyframes cw-awning { from { transform: scaleY(0); } }
.cw-map-best { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: #2f9e57; color: #fff; font-size: .66rem; letter-spacing: .06em; }
.cw-map-panel { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; }
@media (max-width: 899px) {
  .cw-map { grid-template-columns: 1fr; grid-template-areas: "paper" "side"; }
  .cw-map-clock { font-size: .66rem; left: 8px; top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-map-clouds ellipse, .cw-crane-sign, .cw-map-glows circle, .cw-map-panel.is-in .cw-front, .cw-map-panel.is-in .cw-front-awning, .cw-map-origin.is-pop .cw-pin-s { animation: none !important; }
}
/* map v2 fixes: the side column stacks cleanly (v1's grid areas no longer apply), softer night, chip clear of the banner */
.cw-map-side .cw-map-panel, .cw-map-side .cw-map-picks { grid-area: auto; }
.cw-map-side .cw-map-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.cw-map-side .cw-map-panel { min-height: 0; }
.cw-map-controls { grid-template-columns: 1fr; }
.cw-map[data-tod="dawn"] .cw-map-tod { fill: #f8dcc9; }
.cw-map[data-tod="dusk"] .cw-map-tod { fill: #ddc3dc; }
.cw-map[data-tod="night"] .cw-map-tod { fill: #a9afd6; }
.cw-map[data-tod="night"] .cw-map-clouds ellipse, .cw-map[data-tod="dusk"] .cw-map-clouds ellipse { opacity: .06; }
.cw-map-paper::after { opacity: .6; }
.cw-map-clock { top: auto; bottom: 12px; }

/* ============================================================================
   Small joys (cw-joy.js): receipt tears, swinging tags, a peel-in sticker,
   FAQ answers that flip open like a tag
   ========================================================================== */
/* a strip of torn receipt paper between sections */
.cw-tear { position: relative; max-width: var(--cw-max-w); height: 18px; margin: 0 auto; opacity: .26; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cw-kraft) 8%, var(--cw-kraft) 92%, transparent);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) var(--shift, 0) 0 / 14px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) var(--shift, 0) 100% / 14px 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) var(--shift, 0) 0 / 14px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) var(--shift, 0) 100% / 14px 51% repeat-x; }
.cw-tear::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 2px dotted oklch(20% 0.03 70 / .9); }

/* tags and store cards hang from their top-left hole */
.cw-swingable { transform-origin: 28px 16px; will-change: transform; }
.cw-store-card.cw-swingable { transform-origin: 50% 0; }

/* the "Updated" line is a sticker that peels on */
.cw-updated { display: inline-block; position: relative; max-width: 34rem; margin-top: .9rem; padding: .55rem .9rem .55rem 2.1rem; opacity: 1;
  font-size: .82rem; font-weight: 700; line-height: 1.35; color: oklch(26% 0.05 80); border-radius: 6px;
  background: linear-gradient(135deg, #fbe7a6, #f2cf3a 70%); box-shadow: 0 6px 14px oklch(0% 0 0 / .35);
  rotate: -1.5deg; transform-origin: 0 50%; animation: cw-peel-on .7s 3.4s cubic-bezier(.2,1.3,.4,1) both; }
.cw-updated::before { content: "✓"; position: absolute; left: .75rem; top: 50%; translate: 0 -50%; font-weight: 900; color: #2f9e57; }
.cw-updated::after { /* the curled corner */ content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; border-radius: 0 0 6px 0;
  background: linear-gradient(315deg, var(--bg, #1f2038) 45%, oklch(78% 0.1 85) 50%, #fff4c4 100%); box-shadow: -2px -2px 4px oklch(0% 0 0 / .25); }
@keyframes cw-peel-on { 0% { opacity: 0; transform: perspective(500px) rotateY(-70deg) translateX(-20px); } 60% { opacity: 1; } 100% { transform: none; } }

/* FAQ answers flip open like a tag turned over */
.cw-faq-item { perspective: 900px; transition: border-color .2s ease, background-color .2s ease; }
.cw-faq-item[open] { border-color: color-mix(in oklab, var(--cw-kraft) 55%, transparent); }
.cw-faq-item summary::after { content: ""; width: 20px; height: 13px; opacity: .8; rotate: -12deg; transition: rotate .3s cubic-bezier(.2,1.5,.4,1);
  background: var(--cw-kraft); clip-path: polygon(0 50%, 26% 0, 100% 0, 100% 100%, 26% 100%); border-radius: 2px; }
.cw-faq-item[open] summary::after { rotate: 190deg; background: var(--cw-red); }
.cw-faq-item p { position: relative; margin: 0 .8rem .9rem; padding: 1rem 1.1rem 1rem 2.4rem; border-radius: 8px; color: oklch(24% 0.03 84); opacity: 1;
  background: var(--cw-kraft); transform-origin: 50% 0; box-shadow: 0 8px 18px oklch(0% 0 0 / .3); }
.cw-faq-item p::before { /* the punched hole */ content: ""; position: absolute; left: .9rem; top: 1.15rem; width: 10px; height: 10px; border-radius: 50%;
  background: oklch(15% 0.012 265); box-shadow: 0 0 0 3px oklch(70% 0.06 84); }
.cw-faq-item[open] p { animation: cw-tag-flip .55s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes cw-tag-flip { 0% { transform: rotateX(-95deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) { .cw-updated, .cw-faq-item[open] p { animation: none; } }

/* ============================================================================
   Scratch-off tip card (cw-scratch.js)
   ========================================================================== */
.cw-scratch { max-width: 560px; margin: 2.2rem auto 0; text-align: center; }
.cw-scratch-k { margin: 0 0 .7rem; font-weight: 800; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cw-amber); }
.cw-scratch-card { position: relative; border-radius: 14px; overflow: hidden; rotate: -1deg;
  box-shadow: 0 18px 36px oklch(0% 0 0 / .45), 0 0 0 1px oklch(84% 0.13 86 / .35);
  background: radial-gradient(120% 90% at 20% 0%, oklch(92% 0.06 86), transparent 60%), linear-gradient(135deg, var(--cw-kraft), oklch(78% 0.07 80)); }
.cw-scratch-tip { position: relative; min-height: 150px; display: grid; place-content: center; gap: .45rem; padding: 1.6rem 1.8rem; color: oklch(24% 0.04 70); }
.cw-scratch-tip b { font-family: var(--display); font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.cw-scratch-tip > span:last-child { font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.cw-scratch-star { font-size: 1.4rem; color: var(--cw-red); }
.cw-scratch-foil { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.cw-scratch-foil:active { cursor: grabbing; }
.cw-scratch.is-done .cw-scratch-card { animation: cw-won .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes cw-won { 40% { scale: 1.04; rotate: 1deg; } }
.cw-scratch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; margin-top: 1rem; }
.cw-scratch-hint { margin: 0; font-size: .85rem; opacity: .75; }
.cw-scratch-row .cw-haul-ghost { flex: 0 0 auto; }
.cw-spark { position: fixed; z-index: 2000; pointer-events: none; font-size: 18px; text-shadow: 0 0 8px currentColor; }
@media (prefers-reduced-motion: reduce) { .cw-scratch.is-done .cw-scratch-card { animation: none; } }

/* ============================================================================
   Black Friday and the holidays: tear-off calendar pages
   ========================================================================== */
.cw-holiday-answer { max-width: var(--cw-max-w); margin: 0 auto 1.6rem; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--cw-red) 45%, transparent);
  background: color-mix(in oklab, var(--cw-red) 12%, transparent); }
.cw-holiday-answer p { margin: 0; text-wrap: pretty; }
.cw-cal { max-width: var(--cw-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.3rem 1rem; }
.cw-cal-page { position: relative; padding: 1.9rem 1.1rem 1.2rem; border-radius: 6px 6px 10px 10px; color: oklch(24% 0.03 70); text-align: center;
  background: linear-gradient(180deg, #fbf8f1 0 30%, #f3ecdf); box-shadow: 0 14px 28px oklch(0% 0 0 / .35); transform-origin: 50% 0; transition: transform .25s cubic-bezier(.2,1.5,.4,1); }
.cw-cal-page::before { /* the red header band */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.6rem; border-radius: 6px 6px 0 0; background: #c8323e; }
.cw-cal-page:nth-child(even) { rotate: 1deg; } .cw-cal-page:nth-child(odd) { rotate: -1deg; }
.cw-cal-page:hover { transform: translateY(-4px) rotate(-1.5deg); }
.cw-cal-rings { position: absolute; top: -8px; left: 50%; width: 70%; height: 16px; translate: -50% 0; z-index: 1;
  background: radial-gradient(circle at 50% 50%, #d9d4c8 0 4px, #6b6558 5px, transparent 6px) 0 0 / 25% 100% repeat-x; }
.cw-cal-mon { position: relative; margin: -1.3rem 0 .9rem; font-weight: 800; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: #fff; }
.cw-cal-day { margin: 0 0 .5rem; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.cw-cal-note { margin: 0; font-size: .92rem; line-height: 1.5; text-wrap: pretty; }
.cw-cal-hot { background: linear-gradient(180deg, #fff4d6 0 30%, #fbe7a6); }
.cw-cal-stamp { position: absolute; right: -10px; top: 3.1rem; padding: .25rem .55rem; border: 2.5px solid #c8323e; border-radius: 6px; color: #c8323e; background: oklch(98% 0.02 90 / .6);
  font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; rotate: 12deg; }
.cw-holiday-foot { max-width: var(--cw-max-w); margin: 1.4rem auto 0; font-size: .9rem; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .cw-cal-page { transition: none; } }