/* The doodle skin. The same shop, redrawn as a Korean doodle poster: thick wobbly ink on
   off-white, one soft pastel patch per section printed a little off-register behind the
   ink, hand-lettered titles, and Kiki at the head of each section doing that section's job.
   It sits on top of the shop's own styles and only overrides; the clay tokens are
   redefined as ink so every key and card that used them follows without being named.
   The wobble is an SVG filter (#dd-wob, #dd-ink, defined at the top of <body>) on a
   pseudo-element that carries the paper, the outline and the patch, so text stays crisp. */
:root{
  --dd-rose:#F0B3BF; --dd-sky:#AFCBEA; --dd-lilac:#C9BCEB; --dd-mint:#B6DCC8; --dd-honey:#F1D488;
  --dd-hand:'Gaegu',cursive;
  --clay:inset 0 0 0 2.5px var(--ink);
  --clay-thin:inset 0 0 0 2px var(--ink);
  --key:inset 0 0 0 2px var(--ink);
  --key-down:inset 0 0 0 2px var(--ink);
  --key-ink:none; --key-ink-down:none;
  --signal:var(--ink);
  --rule:#CFC5B4;
  --r-btn:999px;
}
::selection{ background:var(--dd-lilac); color:var(--ink); }
:focus-visible{ outline-color:var(--ink); }

/* ---------- the drawn box ----------
   Paper, a thick ink outline and a pastel patch, all on ::before, all wobbled together. */
.slab,.panel,.anatomy-card,.proof-item,.track-card,.help-card--wa,.foot,.checkout-sheet,.faq{
  position:relative; isolation:isolate; background:transparent !important; box-shadow:none !important;
}
.slab::before,.panel::before,.anatomy-card::before,.proof-item::before,.track-card::before,.help-card--wa::before,.foot::before,.checkout-sheet::before,.faq::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:var(--dd-paper,var(--cream)); border:3px solid var(--ink);
  box-shadow:var(--dd-off,10px 9px) 0 var(--dd-patch,transparent);
  filter:url(#dd-wob);
}
.slab{ border-radius:34px 26px 38px 24px / 26px 36px 24px 34px; }
@media(min-width:641px){ .slab,.foot{ margin-left:20px; margin-right:24px; } .slab + .slab,.slab + .foot{ margin-top:22px; } }
.slab--build{ --dd-patch:var(--dd-mint); }
#help{ --dd-patch:var(--dd-sky); }
#reviews{ --dd-patch:var(--dd-rose); }
.foot{ --dd-patch:var(--dd-lilac); --dd-paper:#FFFDF9; border-radius:30px 24px 34px 22px / 24px 32px 22px 30px; }
.panel,.track-card,.help-card--wa,.checkout-sheet,.faq{ --dd-paper:#FFFDF9; border-radius:24px 18px 26px 20px / 20px 26px 18px 24px; }
.help-card--wa{ --dd-patch:var(--dd-honey); }
.checkout-sheet{ --dd-patch:var(--dd-lilac); }
.anatomy-card{ --dd-paper:#FFFDF9; border-radius:22px 28px 20px 26px / 26px 20px 28px 22px; }
.anatomy-card:nth-child(2){ --dd-patch:var(--dd-honey); }
.proof-item{ --dd-paper:#FFFDF9; border-radius:22px 18px 24px 16px / 18px 24px 16px 22px; }
.proof-item--lead{ --dd-patch:var(--dd-honey); }
/* small parts get a plain outline: a wobble at 40px just looks broken */
.review-card,.cart-row,.order-summary,.receipt-ref,.bank-card,.track-foot{ background:#FFFDF9; box-shadow:inset 0 0 0 2px var(--ink); }
.review-card{ box-shadow:inset 0 0 0 2.5px var(--ink), 7px 6px 0 var(--dd-rose); }
.review-card::before{ color:var(--dd-rose); font-family:var(--dd-hand); }
.modal-sheet{ background:var(--cream); border:3px solid var(--ink); box-shadow:10px 9px 0 var(--dd-lilac), 0 40px 80px -30px var(--scrim); border-radius:26px 20px 28px 22px / 22px 28px 20px 26px; }
.ph-slot,.film-item{ box-shadow:none; border:2.5px solid var(--ink); border-radius:20px 16px 22px 14px / 16px 22px 14px 20px; }
.ph-slot--big{ box-shadow:9px 8px 0 var(--dd-sky); }
.ph-cap,.film-cap{ background:#FFFDF9; box-shadow:inset 0 0 0 1.5px var(--ink); border-radius:999px; padding:5px 12px; }
.qr-img{ box-shadow:none; border:2px solid var(--ink); }

/* ---------- hand lettering ---------- */
h2.section-title,.step-title,.modal-title,.anatomy-card h3,.help-card--wa h3,.curtain h2{
  font-family:var(--dd-hand); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:.98;
}
h2.section-title{ font-size:clamp(42px,5.4vw,72px); margin-bottom:14px; filter:url(#dd-ink); }
.step-title{ font-size:clamp(32px,3vw,40px); }
.anatomy-card h3{ font-size:clamp(30px,2.8vw,38px); }
.help-card--wa h3{ font-size:clamp(30px,3vw,40px); }
.modal-title{ font-size:34px; }
.checkout-sheet .modal-title{ font-size:clamp(34px,5vw,44px); }
.step-kicker{ color:var(--ink-2); font-family:var(--dd-hand); font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
/* the section's words sit left, and Kiki stands at the right doing the section's job */
.wrap:has(> .dd-kiki){ position:relative; }
.dd-kiki{ position:absolute; top:-18px; right:28px; width:clamp(150px,15vw,196px); height:auto; overflow:visible; filter:url(#dd-ink); pointer-events:none; }
.slab .dd-kiki{ top:-6px; }
.foot .dd-kiki{ top:auto; bottom:-10px; width:118px; }
.dd-kiki--hi{ width:clamp(150px,14vw,180px); }
@media(min-width:821px){ #help .help-side{ padding-top:clamp(40px,7vw,96px); } }

/* ---------- keys become ink pills and outlined pills ---------- */
.cta-btn,.place-btn,.track-btn,.nav-cart,.sticky-add-btn,.done-btn,.door-key{ background:var(--ink); color:var(--cream); border-radius:999px; }
.cta-btn:hover,.place-btn:hover,.track-btn:hover,.nav-cart:hover,.sticky-add-btn:hover,.done-btn:hover{ background:#34302B; }
.cta-btn:active,.place-btn:active,.track-btn:active,.nav-cart:active,.sticky-add-btn:active,.done-btn:active,
.ghost-btn:active,.reset-view-btn:active,.toggle-btn:active,.shape-btn:active,.pay-opt:active,.track-chip:active,.type-cta:active{ transform:translateY(2px); }
.ghost-btn,.reset-view-btn,.toggle-btn,.shape-btn,.pay-opt,.track-chip,.type-cta,.done-btn--ghost{ background:transparent; }
.ghost-btn:hover,.reset-view-btn:hover,.shape-btn:not(.active):hover,.pay-opt:hover,.track-chip:hover,.type-cta:hover{ background:#EBE6DE; }
.toggle-btn.active,.shape-btn.active,.pay-opt.is-active{ background:var(--ink); color:var(--cream); box-shadow:none; }
.type-cta,.pay-opt{ border-radius:18px; }
.type-cta-key,.pay-opt-icon{ background:var(--dd-lilac); box-shadow:inset 0 0 0 2px var(--ink); }
.pay-opt.is-active .pay-opt-icon{ background:var(--dd-lilac); color:var(--ink); }
.symbol-swatch{ border-radius:14px; }
.cs-key{ background:transparent; border-radius:16px; }
.cs-key.is-on{ background:var(--dd-mint); transform:none; }
.cart-qty-btn,.cart-row-remove,.sum-remove,.modal-close{ background:transparent; border-radius:999px; }
.wa-go,.track-review,.receipt-wa,.form-error-wa{ box-shadow:inset 0 0 0 2px var(--ink); border-radius:999px; }
.help-card--wa .wa-icon{ box-shadow:inset 0 0 0 2px var(--ink); border-radius:50%; }
.toast{ border-radius:999px; }
.cart-fab-count,.nav-cart-count{ background:var(--dd-rose); color:var(--ink); }

/* ---------- inputs: drawn boxes to write in ---------- */
.form-group input,.form-group textarea,.form-group select,.track-input,.remarks-input{
  background-color:#FFFDF9; box-shadow:inset 0 0 0 2px var(--ink); border-radius:16px;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus-visible,.form-group input:focus-visible,.form-group textarea:focus-visible,.track-input:focus,.remarks-input:focus{
  box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 4px var(--dd-lilac);
}
/* order numbers stay in Archivo: in the hand font 1 and I, 0 and O look alike */
.track-input{ border-radius:999px; padding:14px 22px; }
.checkout-sheet .form-group input,.checkout-sheet .form-group select,.checkout-sheet .form-group textarea{ background-color:var(--cream); }
.form-error{ box-shadow:inset 0 0 0 2px var(--signal-deep); }

/* ---------- the logo: six drawn keycaps, each with its own tone printed off-register ---------- */
.logo-keys .hk,.foot .hk{
  background:var(--cream); color:var(--ink); text-shadow:none; font-family:var(--dd-hand); font-weight:700; font-size:.86em;
  box-shadow:inset 0 0 0 2px var(--ink), 3px 3px 0 var(--kc);
}
.logo-keys .hk:hover,.logo-keys .hk.is-pressed{ box-shadow:inset 0 0 0 2px var(--ink), 1px 1px 0 var(--kc); transform:translate(2px,2px); }
.nav-links a::before{ background:var(--nk,var(--dd-rose)); }
.nav-links a:nth-child(5n+1){ --nk:var(--dd-rose); } .nav-links a:nth-child(5n+2){ --nk:var(--dd-honey); }
.nav-links a:nth-child(5n+3){ --nk:var(--dd-lilac); } .nav-links a:nth-child(5n+4){ --nk:var(--dd-sky); }
.nav-links a:nth-child(5n+5){ --nk:var(--dd-mint); }

/* ---------- the builder's pieces ---------- */
.step-pip-n{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.step-pip.is-done .step-pip-n{ background:var(--ink); color:var(--cream); }
.step-pip.is-active .step-pip-n{ background:var(--dd-lilac); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.step-pip::after{ height:3px; background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px); opacity:.45; }
.step-pip.is-done::after{ background:var(--ink); opacity:1; }
.step-foot,.divider,.foot-fine,.track-now,.bank-row,.faq-item,.receipt-amount,.receipt-items,.sum-item--next{ border-color:var(--ink) !important; }
.step-foot,.foot-fine,.track-now{ border-top-style:dashed; }
.divider{ height:0; border-top:2px dashed var(--ink); opacity:.5; }
.step-recap{ background:transparent; box-shadow:inset 0 0 0 2px var(--ink); border-radius:16px; }
.type-hint,.tap-coach{ background:var(--ink); border-radius:999px; box-shadow:none; }
.tap-coach::after{ border-radius:2px; }
.preview-label::before{ background:var(--dd-mint); box-shadow:0 0 0 2px var(--ink); }
.price{ font-family:var(--dd-hand); font-size:44px; letter-spacing:0; }
.price s{ font-family:var(--font); font-size:.4em; }
.pk{ background:#FFFDF9; font-family:var(--dd-hand); }
.proof-num{ font-family:var(--dd-hand); }
.track-now-pulse,.receipt-next-dot{ background:var(--dd-lilac); box-shadow:0 0 0 2px var(--ink); }
.track-step.is-now .track-dot{ background:var(--dd-lilac); border-color:var(--ink); }
.track-dot{ border-color:var(--ink); }
.faq-item summary::after{ background:transparent; box-shadow:inset 0 0 0 2px var(--ink); }

/* ---------- the four promises as stickers ---------- */
.dd-sticker{ width:96px; height:96px; overflow:visible; filter:url(#dd-ink); }
.seals b{ font-family:var(--dd-hand); font-size:20px; font-weight:700; text-transform:uppercase; line-height:1; letter-spacing:.02em; }

/* ---------- the phone's bottom bar: a strip of paper under an ink rule ---------- */
.sticky-preview-bar{ background:var(--cream); box-shadow:none; border-top:3px solid var(--ink); border-radius:0; }

/* ---------- a little life, only where motion is welcome ---------- */
@media (prefers-reduced-motion:no-preference){
  .dd-kiki .dd-tail{ animation:pf-sway 4s ease-in-out infinite; transform-box:fill-box; transform-origin:0% 100%; }
  .dd-kiki .dd-eyes{ animation:pf-blink 5.2s infinite; transform-box:fill-box; transform-origin:center; }
  .dd-kiki .dd-prop{ animation:dd-bob 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
  .dd-kiki--parcel .dd-prop{ animation-duration:.9s; }
  .dd-kiki--hi .dd-prop{ animation:dd-pop 4s ease-in-out infinite; transform-origin:20% 100%; }
  .dd-zzz text{ animation:dd-float 3.6s ease-in-out infinite; }
  .dd-zzz text:nth-child(2){ animation-delay:.5s; } .dd-zzz text:nth-child(3){ animation-delay:1s; }
}
@keyframes dd-bob{ 50%{ transform:translateY(-6px) rotate(-3deg); } }
@keyframes dd-pop{ 0%,70%,100%{ transform:none; } 78%{ transform:scale(1.12) rotate(-4deg); } 86%{ transform:scale(.97); } }
@keyframes dd-float{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(-6px); opacity:.55; } }

/* ---------- phones ---------- */
@media(max-width:640px){
  .slab::before,.panel::before,.anatomy-card::before,.proof-item::before,.track-card::before,.help-card--wa::before,.foot::before,.checkout-sheet::before,.faq::before{ --dd-off:6px 6px; border-width:2.5px; }
  .ph-slot--big,.review-card{ box-shadow:inset 0 0 0 2.5px var(--ink), 6px 6px 0 var(--dd-sky); }
  .modal-sheet{ box-shadow:6px 6px 0 var(--dd-lilac); }
  h2.section-title{ font-size:clamp(34px,9.5vw,44px); }
  /* on a phone Kiki steps into the text column and the words wrap round her */
  .dd-kiki{ position:static; float:right; width:92px; margin:-6px -4px 4px 10px; }
  .dd-kiki--hi{ width:104px; }
  .foot .dd-kiki{ width:80px; margin-top:-10px; }
  .slab,.foot{ margin-left:8px; margin-right:14px; }
  .dd-sticker{ width:76px; height:76px; }
  .seals b{ font-size:17px; }
  .step-title{ font-size:30px; }
  .price{ font-size:38px; }
}

/* ---------- the bag ----------
   A sheet of the same paper: hand-lettered title, each keychain on its own drawn card, a dashed
   rule above the total, one ink button. Empty, it is Kiki and a single way on. */
#stepCart .modal-sub{ margin-bottom:16px; }
#cartList{ gap:10px; }
.cart-row{ border-radius:20px 16px 22px 14px / 16px 22px 14px 20px; padding:14px 16px; }
.cart-row-name{ font-family:var(--dd-hand); font-size:26px; line-height:1; letter-spacing:.03em; }
.cart-row-price{ font-size:17px; }
.cart-qty{ border:2px solid var(--ink); border-radius:999px; padding:0 2px; gap:0; }
.cart-qty-btn{ box-shadow:none; width:40px; height:40px; font-size:18px; }
.cart-qty-btn:hover{ background:#EBE6DE; }
.cart-row-remove{ box-shadow:none; background:none; text-decoration:underline; text-underline-offset:3px; padding:0 6px; }
.cart-subtotal{ border-top:2px dashed var(--ink); padding:14px 4px 0; margin-top:4px; }
.cart-subtotal{ font-family:var(--dd-hand); font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
.cart-subtotal strong{ font-family:var(--font); font-size:24px; letter-spacing:-.01em; text-transform:none; }
.cart-nudge{ display:inline-block; color:var(--ink); background:var(--dd-honey); border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px; margin:-4px 0 14px; }
.cart-empty{ padding:6px 4px 20px; gap:4px; }
.cart-empty .kiki{ margin-bottom:6px; filter:url(#dd-ink); }
.cart-empty b{ font-family:var(--dd-hand); font-size:30px; line-height:1; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
.cart-empty span{ font-size:14px; color:var(--ink-2); max-width:30ch; }
#stepCart.is-empty .cart-subtotal,#stepCart.is-empty #cartCheckoutBtn,#stepCart.is-empty .cart-nudge{ display:none; }
#stepCart.is-empty #cartAddMore{ background:var(--ink); color:var(--cream); margin-bottom:0 !important; }
/* the one main button on any screen is ink with a lilac shadow, as it is on the first screen */
.cta-btn,.place-btn,#stepCart.is-empty #cartAddMore{ box-shadow:5px 5px 0 var(--dd-lilac); }
.cta-btn:active,.place-btn:active,#stepCart.is-empty #cartAddMore:active{ box-shadow:2px 2px 0 var(--dd-lilac); transform:translate(3px,3px); }
.kiki-note .kiki{ filter:url(#dd-ink); }
.cart-qty{ justify-self:start; }
/* a long bag scrolls under the button instead of hiding it */
#cartCheckoutBtn{ position:sticky; bottom:2px; z-index:1; }