/* ============================================================
   TWINNIE design system · candy register + quiet register
   Periwinkle #6F7BE0 · Cloud Cream #FFF6EC · Butter #FFD08A
   Bubble Pink #FFB3C7 · Ink Navy #2B2E5C
   Quiet: Oat #EFE7DA · Walnut #5C4633 · Soft White #FDFBF7
   Type: Baloo 2 (display) · Nunito Sans (body)
   ============================================================ */
:root{
  --peri:#6F7BE0;
  --peri-deep:#5561C9;
  --cream:#FFF6EC;
  --butter:#FFD08A;
  --pink:#FFB3C7;
  --navy:#2B2E5C;
  --navy-soft:#565a86;
  --white:#FFFFFF;
  --oat:#EFE7DA;
  --walnut:#5C4633;
  --soft:#FDFBF7;
  --radius:16px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --font-display:"Baloo 2","Comic Sans MS",cursive;
  --font-body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);background:var(--cream);color:var(--navy);
  font-size:1.05rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--peri);outline-offset:3px;border-radius:6px}
::selection{background:var(--peri);color:var(--white)}

h1,h2,h3,.disp{font-family:var(--font-display);font-weight:700;line-height:1.08}
.h-xl{font-size:clamp(2.4rem,5.4vw,4.2rem);letter-spacing:-.01em}
.h-lg{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.h-md{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.lede{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--navy-soft);max-width:44ch}

/* ---------- promo bar ---------- */
.promo{
  background:var(--navy);color:var(--cream);text-align:center;
  font-weight:800;font-size:.85rem;letter-spacing:.04em;
  padding:9px 14px;
}
.promo b{color:var(--butter);font-weight:800}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,246,236,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px clamp(16px,4vw,42px);
  border-bottom:2px solid rgba(43,46,92,.08);
}
.nav-logo{display:flex;align-items:center;overflow:visible}
.nav-logo img{height:150px;width:auto;margin:-46px 0;transition:transform .3s var(--ease-pop)}
@media (max-width:820px){.nav-logo img{height:110px;margin:-32px 0}}
.nav-logo:hover img{transform:scale(1.06) rotate(-2deg)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);list-style:none}
.nav-links a{
  text-decoration:none;font-weight:800;font-size:.95rem;color:var(--navy);
  padding:7px 12px;border-radius:999px;transition:background .25s,transform .2s var(--ease-pop);
}
.nav-links a:hover{background:rgba(111,123,224,.14);transform:translateY(-1px)}
.nav-links a[aria-current="page"]{background:var(--peri);color:var(--white)}
.nav-cart{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:rgba(111,123,224,.12);
  transition:transform .2s var(--ease-pop),background .25s;
}
.nav-cart:hover{transform:scale(1.08);background:rgba(111,123,224,.22)}
.nav-cart svg{width:21px;height:21px;stroke:var(--navy);fill:none;stroke-width:2}
.cart-count{
  position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;border-radius:10px;
  background:var(--pink);color:var(--navy);font-size:.68rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  border:2px solid var(--cream);
}
.nav-burger{display:none}
@media (max-width:820px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:fixed;inset:104px 14px auto 14px;
    background:var(--white);border-radius:20px;padding:20px;z-index:70;
    box-shadow:0 22px 60px rgba(43,46,92,.25);align-items:stretch;gap:6px;
  }
  .nav-links.open a{display:block}
  .nav-burger{display:inline-flex;flex-direction:column;gap:5px;padding:12px}
  .nav-burger span{width:22px;height:2.5px;background:var(--navy);border-radius:3px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.06rem;
  padding:15px 34px;border-radius:999px;text-decoration:none;
  transition:transform .25s var(--ease-pop),box-shadow .25s,background .25s;
  will-change:transform;
}
.btn:active{transform:scale(.95)}
.btn-primary{
  background:var(--peri);color:var(--white);
  box-shadow:0 6px 0 var(--peri-deep),0 16px 34px rgba(111,123,224,.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--peri-deep),0 22px 44px rgba(111,123,224,.42)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 3px 0 var(--peri-deep)}
.btn-ghost{
  background:var(--white);color:var(--navy);border:2.5px solid var(--navy);
}
.btn-ghost:hover{transform:translateY(-2px);background:var(--navy);color:var(--cream)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,4vw,60px);
  padding:clamp(18px,3.5vw,50px) clamp(16px,4vw,42px) clamp(40px,6vw,70px);
  max-width:1280px;margin:0 auto;
}
.hero-media{position:relative}
.hero-media img{
  width:100%;max-height:480px;aspect-ratio:1.15/1;object-fit:cover;object-position:center 32%;
  border-radius:26px;box-shadow:0 26px 70px rgba(43,46,92,.22);
}
.hero-badge{
  position:absolute;top:16px;left:16px;
  background:var(--butter);color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  padding:8px 16px;border-radius:999px;transform:rotate(-4deg);
  box-shadow:0 6px 18px rgba(43,46,92,.18);
}
.hero-copy .h-xl{margin:10px 0 14px}
.hero-copy .h-xl em{font-style:normal;color:var(--peri)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-note{margin-top:16px;font-size:.88rem;font-weight:700;color:var(--navy-soft);display:flex;align-items:center;gap:8px}
.hero-note svg{width:16px;height:16px;stroke:var(--peri);fill:none;stroke-width:2.4}
@media (max-width:860px){.hero{grid-template-columns:1fr}}

/* ---------- review row ---------- */
.rev-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,42px) clamp(40px,6vw,64px);
}
.rev-card{
  background:var(--white);border-radius:18px;padding:20px 22px;
  border:2px solid rgba(43,46,92,.07);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .3s var(--ease-pop);
}
.rev-card:hover{transform:translateY(-4px) rotate(-.4deg)}
.rev-card p{font-size:.94rem;color:var(--navy-soft);font-weight:600;line-height:1.5}
.rev-who{display:flex;align-items:center;gap:10px;margin-top:auto}
.rev-who img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.rev-who span{font-weight:800;font-size:.86rem}
.rev-who .vb{color:var(--peri);font-size:.76rem;display:flex;align-items:center;gap:4px}
.rev-who .vb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3}
.stars{display:flex;gap:2px}
.stars svg{width:16px;height:16px;fill:#FFB937;stroke:none}
@media (max-width:760px){.rev-row{grid-template-columns:1fr}}

/* ---------- section shell ---------- */
.sec{max-width:1280px;margin:0 auto;padding:clamp(44px,7vw,90px) clamp(16px,4vw,42px)}
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(30px,4.5vw,54px)}
.sec-head .lede{margin:12px auto 0}

/* ---------- product grid ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.prod-card{
  background:var(--white);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;
  border:2px solid rgba(43,46,92,.07);display:flex;flex-direction:column;
  transition:transform .3s var(--ease-pop),box-shadow .3s;
}
.prod-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 26px 60px rgba(43,46,92,.16)}
.prod-card .pc-img{position:relative;aspect-ratio:1/1;background:var(--oat);overflow:hidden}
.prod-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-pop)}
.prod-card:hover .pc-img img{transform:scale(1.05)}
.pc-chip{
  position:absolute;top:12px;left:12px;background:var(--pink);color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  padding:6px 13px;border-radius:999px;
}
.pc-chip.quiet{background:var(--oat);color:var(--walnut)}
.pc-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc-name{font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.pc-desc{font-size:.9rem;color:var(--navy-soft);font-weight:600;line-height:1.45}
.pc-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.pc-price{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--peri)}
.pc-go{
  width:38px;height:38px;border-radius:50%;background:var(--peri);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease-pop);
}
.prod-card:hover .pc-go{transform:scale(1.12)}
.pc-go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.6}
@media (max-width:820px){.prod-grid{grid-template-columns:1fr;max-width:430px;margin:0 auto}}

/* ---------- fur signature module ---------- */
.fur-band{background:var(--white);border-radius:30px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
  border:2px solid rgba(43,46,92,.07);
}
.fur-frame{position:relative;aspect-ratio:16/11;cursor:ew-resize;touch-action:pan-y;background:var(--oat)}
.fur-frame video,.fur-frame img,.fur-frame canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fur-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  padding:9px 18px;border-radius:999px;font-size:.82rem;font-weight:800;
  background:rgba(43,46,92,.55);color:var(--white);white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .4s;
}
.fur-frame.touched .fur-hint{opacity:0}
.fur-copy{padding:clamp(24px,3.5vw,50px)}
.fur-copy .h-lg{margin:8px 0 14px}
.fur-copy p{color:var(--navy-soft);font-weight:600;max-width:44ch}
.fur-copy .mantra{
  margin-top:20px;font-family:var(--font-display);font-weight:700;
  font-size:1.25rem;color:var(--peri);
}
@media (max-width:860px){.fur-band{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.step{
  background:var(--white);border-radius:22px;padding:26px 24px;text-align:center;
  border:2px solid rgba(43,46,92,.07);
}
.step-num{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:var(--butter);color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
}
.step:nth-child(2) .step-num{background:var(--pink)}
.step:nth-child(3) .step-num{background:var(--peri);color:var(--white)}
.step h3{font-size:1.2rem;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--navy-soft);font-weight:600;line-height:1.5}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);align-items:stretch}
.tier{
  background:var(--white);border-radius:22px;padding:30px 26px 32px;position:relative;
  border:2px solid rgba(43,46,92,.09);display:flex;flex-direction:column;
  transition:transform .3s var(--ease-pop),box-shadow .3s;
}
.tier:hover{transform:translateY(-4px)}
.tier.popular{
  background:var(--navy);color:var(--cream);border-color:transparent;
  transform:scale(1.04);box-shadow:0 30px 70px rgba(43,46,92,.35);z-index:2;
}
.tier.popular:hover{transform:scale(1.04) translateY(-4px)}
.pop-chip{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  background:var(--butter);color:var(--navy);
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(43,46,92,.25);
}
.tier-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.tier-size{font-size:.85rem;font-weight:700;color:var(--navy-soft);margin-top:2px}
.tier.popular .tier-size{color:rgba(255,246,236,.75)}
.tier-price{font-family:var(--font-display);font-weight:700;font-size:2.5rem;margin:14px 0 2px;color:var(--peri)}
.tier.popular .tier-price{color:var(--butter)}
.tier-per{font-size:.8rem;font-weight:700;color:var(--navy-soft)}
.tier.popular .tier-per{color:rgba(255,246,236,.72)}
.tier-list{list-style:none;margin:18px 0 24px;display:grid;gap:9px;font-size:.9rem;font-weight:600}
.tier-list li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.tier-list svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--peri);fill:none;stroke-width:3}
.tier.popular .tier-list svg{stroke:var(--butter)}
.tier-go{margin-top:auto}
@media (max-width:820px){
  .tiers{grid-template-columns:1fr;max-width:430px;margin:0 auto}
  .tier.popular{transform:none;order:-1}
}

/* ---------- quiet register (memorial) ---------- */
.quiet{background:var(--oat);border-radius:30px}
.quiet-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,54px);align-items:center;padding:clamp(26px,4vw,56px);
}
.quiet-inner img{border-radius:22px;box-shadow:0 20px 50px rgba(92,70,51,.2)}
.quiet-copy h2,.quiet-copy h3{color:var(--walnut);font-weight:600}
.quiet-copy p{color:#6d5c49;max-width:46ch}
.quiet-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-weight:800;color:var(--walnut);text-decoration:none;
  border-bottom:2px solid var(--walnut);padding-bottom:2px;
}
.quiet-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
@media (max-width:820px){.quiet-inner{grid-template-columns:1fr}}

/* ---------- UGC + quotes ---------- */
.voices-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.ugc-card{
  grid-column:span 3;border-radius:20px;overflow:hidden;position:relative;
  aspect-ratio:9/14;background:var(--oat);border:2px solid rgba(43,46,92,.07);
}
.ugc-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ugc-tag{
  position:absolute;left:12px;bottom:12px;right:12px;font-size:.8rem;font-weight:800;
  color:var(--white);text-shadow:0 1px 10px rgba(43,46,92,.7);
}
.quote-card{
  grid-column:span 3;border-radius:20px;background:var(--white);padding:22px;
  border:2px solid rgba(43,46,92,.07);display:flex;flex-direction:column;gap:12px;
}
.quote-card blockquote{font-weight:700;font-size:1rem;line-height:1.5;color:var(--navy)}
@media (max-width:1020px){.ugc-card,.quote-card{grid-column:span 6}}
@media (max-width:640px){.ugc-card,.quote-card{grid-column:span 12}}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{
  background:var(--white);border-radius:16px;margin-bottom:10px;
  border:2px solid rgba(43,46,92,.07);overflow:hidden;
}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;font-family:var(--font-display);font-weight:700;font-size:1.02rem;cursor:pointer;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:17px;height:17px;stroke:var(--peri);stroke-width:2.6;fill:none;transition:transform .3s var(--ease-pop)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .fa-body{padding:0 22px 20px;font-size:.94rem;font-weight:600;color:var(--navy-soft);line-height:1.6}

/* ---------- waitlist ---------- */
.wait{
  background:var(--peri);border-radius:30px;text-align:center;color:var(--white);
  padding:clamp(36px,5vw,64px) clamp(20px,4vw,60px);
}
.wait h2{color:var(--white)}
.wait p{color:rgba(255,255,255,.85);font-weight:600;max-width:46ch;margin:12px auto 24px}
.wait-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.wait-form input{
  flex:1;min-width:220px;border:none;border-radius:999px;padding:15px 22px;
  font:inherit;font-weight:700;color:var(--navy);background:var(--white);outline:none;
}
.wait-form button{
  background:var(--navy);color:var(--cream);font-family:var(--font-display);font-weight:700;
  padding:15px 30px;border-radius:999px;transition:transform .25s var(--ease-pop);
}
.wait-form button:hover{transform:translateY(-2px) scale(1.03)}
.wait-done{margin-top:12px;font-weight:800;font-size:.9rem;color:var(--butter);min-height:1.3em}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:rgba(255,246,236,.85);margin-top:clamp(44px,7vw,90px);
  padding:clamp(44px,6vw,72px) clamp(16px,4vw,42px) 34px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,4vw,60px);max-width:1280px;margin:0 auto}
.footer-brand img{height:150px;width:auto;margin:-30px 0 -10px -20px}
.footer-brand p{font-size:.9rem;color:rgba(255,246,236,.6);max-width:30ch;font-weight:600}
.footer h4{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--butter);margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:9px}
.footer ul a{text-decoration:none;font-size:.92rem;font-weight:700;color:rgba(255,246,236,.8)}
.footer ul a:hover{color:var(--white)}
.footer-base{
  max-width:1280px;margin:44px auto 0;padding-top:22px;
  border-top:1px solid rgba(255,246,236,.15);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:.8rem;font-weight:700;color:rgba(255,246,236,.5);
}
.socials{display:flex;gap:16px}
.socials a{color:rgba(255,246,236,.65)}
.socials a:hover{color:var(--white)}
.socials svg{width:17px;height:17px;fill:currentColor}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- turntable / pdp (carried, reskinned) ---------- */
.tt-viewport{
  position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;
  background:var(--white);cursor:grab;touch-action:pan-y;border:2px solid rgba(43,46,92,.08);
}
.tt-viewport:active{cursor:grabbing}
.tt-viewport video,.tt-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tt-hint{
  position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;
  background:var(--peri);display:flex;align-items:center;justify-content:center;
}
.tt-hint svg{width:18px;height:18px;stroke:var(--white);fill:none;stroke-width:2.2}
.pdp{padding:26px clamp(16px,4vw,42px) 60px;max-width:1280px;margin:0 auto}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:start}
.pdp-viewer{position:sticky;top:96px}
.crumbs{font-size:.85rem;font-weight:700;color:var(--navy-soft);margin-bottom:14px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--peri)}
.pdp-price{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--peri);margin:10px 0 4px}
.pdp-price .from{font-size:.95rem;font-family:var(--font-body);font-weight:700;color:var(--navy-soft);margin-right:8px}
.pdp-lede{color:var(--navy-soft);font-weight:600;margin:12px 0 24px;max-width:52ch}
.opt-label{font-weight:800;font-size:.92rem;margin-bottom:10px;display:flex;justify-content:space-between}
.opt-label .opt-hint{color:var(--navy-soft);font-weight:600}
.size-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.size-opt{
  position:relative;border:2.5px solid rgba(43,46,92,.15);border-radius:16px;
  padding:14px 10px;text-align:center;background:var(--white);
  transition:border-color .2s,transform .2s var(--ease-pop);
}
.size-opt:hover{border-color:var(--peri);transform:translateY(-2px)}
.size-opt.sel{border-color:var(--peri);background:rgba(111,123,224,.08)}
.size-opt .so-name{font-family:var(--font-display);font-weight:700;font-size:1rem}
.size-opt .so-size{font-size:.76rem;font-weight:700;color:var(--navy-soft)}
.size-opt .so-price{font-weight:800;color:var(--peri);margin-top:5px;font-size:.92rem}
.size-opt .so-chip{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);
  font-size:.62rem;font-weight:800;background:var(--butter);color:var(--navy);
  padding:3px 10px;border-radius:999px;white-space:nowrap;font-family:var(--font-display);
}
.addcart{width:100%}
.pdp-trust{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:20px;font-size:.84rem;font-weight:700;color:var(--navy-soft)}
.pdp-trust span{display:inline-flex;align-items:center;gap:7px}
.pdp-trust svg{width:15px;height:15px;stroke:var(--peri);fill:none;stroke-width:2.4}
.craft-notes{margin-top:36px}
.craft-note{background:var(--white);border-radius:16px;border:2px solid rgba(43,46,92,.07);margin-bottom:10px;overflow:hidden}
.craft-note summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:17px 20px;font-family:var(--font-display);font-weight:700;cursor:pointer}
.craft-note summary::-webkit-details-marker{display:none}
.craft-note summary svg{width:16px;height:16px;stroke:var(--peri);fill:none;stroke-width:2.6;transition:transform .3s var(--ease-pop)}
.craft-note[open] summary svg{transform:rotate(45deg)}
.craft-note .cn-body{padding:0 20px 18px;color:var(--navy-soft);font-weight:600;font-size:.93rem;line-height:1.6;max-width:56ch}
@media (max-width:880px){.pdp-grid{grid-template-columns:1fr}.pdp-viewer{position:static}}

/* quiet register pdp overrides */
.register-quiet{background:var(--soft)}
.register-quiet .nav{background:rgba(253,251,247,.94)}
.register-quiet .pdp-price,.register-quiet .pc-price{color:var(--walnut)}
.register-quiet h1,.register-quiet h2,.register-quiet h3{color:var(--walnut);font-weight:600}
.register-quiet .btn-primary{
  background:var(--walnut);box-shadow:0 4px 0 #463526,0 14px 30px rgba(92,70,51,.3);
}
.register-quiet .btn-primary:hover{box-shadow:0 6px 0 #463526,0 18px 36px rgba(92,70,51,.35)}
.register-quiet .tt-hint{background:var(--walnut)}
.register-quiet .size-opt.sel{border-color:var(--walnut);background:rgba(92,70,51,.06)}
.register-quiet .craft-note summary svg,.register-quiet .pdp-trust svg,.register-quiet .tier-list svg{stroke:var(--walnut)}
.register-quiet .promo{display:none}

/* cart drawer + toast */
.drawer-veil{position:fixed;inset:0;background:rgba(43,46,92,.42);z-index:70;opacity:0;pointer-events:none;transition:opacity .35s}
.drawer-veil.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:71;background:var(--white);
  box-shadow:-28px 0 70px rgba(43,46,92,.28);transform:translateX(105%);
  transition:transform .45s var(--ease-pop);display:flex;flex-direction:column;
}
.drawer.on{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px solid rgba(43,46,92,.07)}
.drawer-head h3{font-size:1.25rem}
.drawer-close{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(43,46,92,.06)}
.drawer-close svg{width:17px;height:17px;stroke:var(--navy);stroke-width:2.4;fill:none}
.drawer-items{flex:1;overflow-y:auto;padding:18px 24px;display:grid;gap:16px;align-content:start}
.drawer-empty{color:var(--navy-soft);text-align:center;padding:48px 10px;font-weight:700}
.d-item{display:flex;gap:14px;align-items:center}
.d-item img{width:70px;height:70px;border-radius:14px;object-fit:cover;background:var(--oat)}
.d-item .di-name{font-weight:800;font-size:.95rem}
.d-item .di-opt{font-size:.78rem;font-weight:700;color:var(--navy-soft);margin-top:2px}
.d-item .di-price{margin-left:auto;font-family:var(--font-display);font-weight:700;color:var(--peri);white-space:nowrap}
.d-item .di-x{color:var(--navy-soft);padding:6px;border-radius:8px}
.d-item .di-x:hover{background:rgba(43,46,92,.06)}
.d-item .di-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.drawer-foot{padding:18px 24px 24px;border-top:2px solid rgba(43,46,92,.07)}
.d-total{display:flex;justify-content:space-between;font-weight:800;margin-bottom:14px}
.d-checkout{width:100%;justify-content:center}
.d-secure{display:flex;justify-content:center;gap:7px;align-items:center;margin-top:11px;font-size:.76rem;font-weight:700;color:var(--navy-soft)}
.d-secure svg{width:13px;height:13px;stroke:var(--peri);fill:none;stroke-width:2.4}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);
  background:var(--navy);color:var(--cream);padding:14px 26px;border-radius:999px;
  font-weight:800;font-size:.92rem;z-index:80;transition:transform .45s var(--ease-pop);
  box-shadow:0 16px 40px rgba(43,46,92,.4);display:flex;gap:10px;align-items:center;
}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast svg{width:16px;height:16px;stroke:var(--butter);fill:none;stroke-width:2.6}

/* reveals: transform-only */
.rise{transform:translateY(22px);transition:transform .7s var(--ease-pop)}
.rise.in{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{transform:none}
}

/* ---------- brand watermark on product visuals ---------- */
.pc-img::after,.tt-viewport::after,.hero-media::after,.ugc-card::after,.fur-frame::after{
  content:"";position:absolute;right:12px;bottom:12px;width:74px;height:26px;
  background:url("https://d8j0ntlcm91z4.cloudfront.net/user_3FhQ0wVhOlV4N3gq0U1gwWPtGBA/hf_20260712_120037_fe162071-8ff3-4aab-9266-b242002f3fd2.png") center/contain no-repeat;
  opacity:.55;pointer-events:none;z-index:3;
  filter:drop-shadow(0 1px 2px rgba(43,46,92,.25));
}
.ugc-card::after{bottom:auto;top:10px;right:10px;width:60px;height:22px}
.fur-frame::after{opacity:.4}
.tt-viewport::after{bottom:14px;right:56px}

/* ---------- photo portal ---------- */
.portal{scroll-margin-top:90px}
.portal-shell{background:var(--white);border-radius:30px;border:2px solid rgba(43,46,92,.07);padding:clamp(24px,4vw,54px)}
.register-quiet .portal-shell{background:var(--soft)}
.portal-head{text-align:center;max-width:560px;margin:0 auto clamp(22px,3vw,36px)}
.portal-head p{color:var(--navy-soft);font-weight:600;margin-top:10px}
.register-quiet .portal-head p{color:#6d5c49}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.slot{
  position:relative;aspect-ratio:1/1;border-radius:18px;cursor:pointer;
  border:2.5px dashed rgba(111,123,224,.45);background:rgba(111,123,224,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  transform:translateY(26px) scale(.94);transition:transform .6s var(--ease-pop),border-color .25s,background .25s,box-shadow .25s;
  overflow:hidden;text-align:center;padding:10px;
}
.register-quiet .slot{border-color:rgba(92,70,51,.35);background:rgba(92,70,51,.04)}
.slot.in{transform:none}
.slot:hover{border-color:var(--peri);background:rgba(111,123,224,.1);transform:translateY(-3px) rotate(-.6deg)}
.register-quiet .slot:hover{border-color:var(--walnut);background:rgba(92,70,51,.08)}
.slot:active{transform:scale(.96)}
.slot.dragover{border-color:var(--peri);background:rgba(111,123,224,.16);transform:scale(1.03)}
.slot-ico{width:38px;height:38px;border-radius:50%;background:var(--butter);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-pop)}
.slot:nth-child(3n+2) .slot-ico{background:var(--pink)}
.slot:nth-child(3n) .slot-ico{background:var(--peri)}
.slot:nth-child(3n) .slot-ico svg{stroke:var(--white)}
.register-quiet .slot-ico{background:var(--oat)}
.slot:hover .slot-ico{transform:scale(1.15) rotate(-8deg)}
.slot-ico svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:2.2}
.slot-name{font-family:var(--font-display);font-weight:700;font-size:.92rem;line-height:1.15}
.slot-sub{font-size:.72rem;font-weight:700;color:var(--navy-soft)}
.slot img.thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:thumbIn .5s var(--ease-pop)}
@keyframes thumbIn{0%{transform:scale(.6) rotate(-6deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.slot .done-badge{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:var(--peri);display:none;align-items:center;justify-content:center;z-index:2;
  border:2px solid var(--white);
}
.slot.filled .done-badge{display:flex;animation:popIn .4s var(--ease-pop)}
.slot .done-badge svg{width:13px;height:13px;stroke:var(--white);stroke-width:3;fill:none}
@keyframes popIn{0%{transform:scale(0)}100%{transform:scale(1)}}
.slot input[type=file]{display:none}
.pose-row{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px}
.pose-opt{
  border:2.5px solid rgba(43,46,92,.14);border-radius:999px;padding:11px 20px;background:var(--white);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  transition:transform .25s var(--ease-pop),border-color .2s,background .2s,color .2s;
}
.pose-opt:hover{transform:translateY(-2px) rotate(-1deg);border-color:var(--peri)}
.pose-opt.sel{background:var(--peri);border-color:var(--peri);color:var(--white);transform:scale(1.05)}
.register-quiet .pose-opt.sel{background:var(--walnut);border-color:var(--walnut)}
.portal-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.portal-meta input,.portal-meta textarea{
  width:100%;border:2.5px solid rgba(43,46,92,.14);border-radius:14px;padding:13px 15px;
  font:inherit;font-weight:600;background:var(--white);color:var(--navy);outline:none;transition:border-color .2s;
}
.portal-meta input:focus,.portal-meta textarea:focus{border-color:var(--peri)}
.portal-meta textarea{grid-column:1/-1;min-height:84px;resize:vertical}
.progress-wrap{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.progress-track{flex:1;height:12px;border-radius:8px;background:rgba(111,123,224,.14);overflow:hidden}
.progress-fill{height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg,var(--peri),var(--pink));transition:width .6s var(--ease-pop)}
.progress-label{font-family:var(--font-display);font-weight:700;font-size:.95rem;white-space:nowrap}
.portal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.portal-note{font-size:.82rem;font-weight:700;color:var(--navy-soft)}
.portal-done{
  text-align:center;padding:40px 20px;display:none;
}
.portal-done.on{display:block;animation:thumbIn .5s var(--ease-pop)}
.portal-done .big-heart{width:74px;height:74px;margin:0 auto 16px;border-radius:50%;background:var(--peri);display:flex;align-items:center;justify-content:center}
.portal-done .big-heart svg{width:34px;height:34px;fill:var(--white)}
@media (max-width:700px){.portal-meta{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.slot{transform:none}.slot img.thumb{animation:none}}

/* ---------- three steps, award pass ---------- */
.steps{position:relative}
.steps::before{
  content:"";position:absolute;top:26px;left:16%;right:16%;height:0;
  border-top:3px dashed rgba(111,123,224,.35);z-index:0;
}
.step{position:relative;z-index:1;transition:transform .35s var(--ease-pop),box-shadow .35s}
.step:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 24px 54px rgba(43,46,92,.14)}
.step .step-anim{height:86px;margin:2px auto 12px;display:flex;align-items:center;justify-content:center}
.step .step-anim svg{width:120px;height:86px;overflow:visible}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.2s}.rise.d3{transition-delay:.32s}
/* step 1: photos fan in */
@keyframes fanA{0%,15%{transform:rotate(-14deg) translateY(14px);opacity:0}35%,80%{transform:rotate(-10deg) translateY(0);opacity:1}100%{transform:rotate(-14deg) translateY(14px);opacity:0}}
@keyframes fanB{0%,25%{transform:rotate(0) translateY(16px);opacity:0}45%,80%{transform:rotate(2deg) translateY(0);opacity:1}100%{transform:rotate(0) translateY(16px);opacity:0}}
@keyframes fanC{0%,35%{transform:rotate(14deg) translateY(14px);opacity:0}55%,80%{transform:rotate(12deg) translateY(0);opacity:1}100%{transform:rotate(14deg) translateY(14px);opacity:0}}
@keyframes flash{0%,55%,100%{opacity:0}60%,66%{opacity:1}72%{opacity:0}}
.anim-photos .ph{transform-origin:60px 70px}
.anim-photos .phA{animation:fanA 4.2s var(--ease-soft) infinite}
.anim-photos .phB{animation:fanB 4.2s var(--ease-soft) infinite}
.anim-photos .phC{animation:fanC 4.2s var(--ease-soft) infinite}
.anim-photos .flash{animation:flash 4.2s linear infinite}
/* step 2: stitching heart */
@keyframes stitch{0%{stroke-dashoffset:120}55%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}
@keyframes needlebob{0%,100%{transform:translate(0,0) rotate(28deg)}50%{transform:translate(3px,-5px) rotate(24deg)}}
.anim-stitch .hpath{stroke-dasharray:120;stroke-dashoffset:120;animation:stitch 3.6s var(--ease-soft) infinite}
.anim-stitch .needle{transform-origin:88px 26px;animation:needlebob 1.2s ease-in-out infinite}
/* step 3: box opens, heart floats */
@keyframes lid{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-24deg)}95%,100%{transform:rotate(0)}}
@keyframes floatheart{0%,38%{transform:translateY(6px) scale(.5);opacity:0}55%{transform:translateY(-16px) scale(1);opacity:1}80%{transform:translateY(-30px) scale(1.05);opacity:0}100%{opacity:0}}
.anim-box .lid{transform-origin:24px 44px;animation:lid 4s var(--ease-pop) infinite}
.anim-box .fheart{transform-origin:60px 44px;animation:floatheart 4s var(--ease-soft) infinite}
@media (prefers-reduced-motion:reduce){
  .anim-photos .ph,.anim-photos .flash,.anim-stitch .hpath,.anim-stitch .needle,.anim-box .lid,.anim-box .fheart{animation:none}
  .anim-stitch .hpath{stroke-dashoffset:0}
}

/* ---------- cart photos-pending nudge ---------- */
.di-pending{font-size:.76rem;font-weight:800;color:var(--peri);margin-top:3px;display:flex;align-items:center;gap:5px}
.di-pending a{color:inherit}
.di-pending svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- checkout ---------- */
.co-wrap{max-width:980px;margin:0 auto;padding:clamp(24px,4vw,54px) clamp(16px,4vw,42px) 80px}
.co-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,44px);align-items:start}
.co-card{background:var(--white);border-radius:22px;border:2px solid rgba(43,46,92,.07);padding:clamp(20px,3vw,32px)}
.co-item{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:2px solid rgba(43,46,92,.06)}
.co-item:last-of-type{border-bottom:none}
.co-item img{width:78px;height:78px;border-radius:14px;object-fit:cover;background:var(--oat)}
.co-item .ci-name{font-family:var(--font-display);font-weight:700}
.co-item .ci-opt{font-size:.82rem;font-weight:700;color:var(--navy-soft)}
.co-item .ci-price{margin-left:auto;font-family:var(--font-display);font-weight:700;color:var(--peri);white-space:nowrap}
.co-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:1.25rem;padding-top:16px}
.co-pay .btn{width:100%;justify-content:center;margin-top:12px}
.co-secure{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:16px;font-size:.8rem;font-weight:700;color:var(--navy-soft)}
.co-secure span{display:inline-flex;align-items:center;gap:6px}
.co-secure svg{width:14px;height:14px;stroke:var(--peri);fill:none;stroke-width:2.4}
.co-empty{text-align:center;padding:60px 20px}
@media (max-width:820px){.co-grid{grid-template-columns:1fr}}

/* ---------- AUD tag + Afterpay split line ---------- */
.pdp-price .cur{font-size:.85rem;font-weight:800;color:var(--navy-soft);letter-spacing:.04em;vertical-align:middle}
.pay-split{margin:10px 0 4px;font-size:.82rem;font-weight:700;color:var(--navy-soft);text-align:center;background:rgba(111,123,224,.08);border-radius:12px;padding:9px 12px}
.pay-split b{color:var(--peri)}
.register-quiet .pay-split{background:rgba(92,70,51,.07)}
.register-quiet .pay-split b{color:var(--walnut)}

/* ---------- policy pages ---------- */
.policy-wrap{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,54px) clamp(16px,4vw,42px) 80px}
.policy-wrap .lede{margin:8px 0 30px}
.policy-card{background:var(--white);border-radius:22px;border:2px solid rgba(43,46,92,.07);padding:clamp(20px,3vw,34px);margin-bottom:22px}
.policy-card h2{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin-bottom:12px}
.policy-card p{font-weight:600;color:var(--navy-soft);font-size:.95rem;line-height:1.65;margin-bottom:12px}
.policy-card p:last-child{margin-bottom:0}
.policy-card .pin{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800;color:var(--peri);background:rgba(111,123,224,.1);border-radius:999px;padding:6px 13px;margin-bottom:14px}
.policy-card .pin svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- express upgrade toggle ---------- */
.express-row{display:flex;gap:11px;align-items:flex-start;border:2.5px solid rgba(111,123,224,.28);border-radius:14px;padding:12px 14px;margin:0 0 14px;cursor:pointer;background:var(--white);transition:border-color .18s,box-shadow .18s}
.express-row:hover{border-color:var(--peri);box-shadow:0 4px 14px rgba(111,123,224,.14)}
.express-row input{width:18px;height:18px;accent-color:var(--peri);margin-top:2px;flex:none;cursor:pointer}
.express-row .ex-text b{font-size:.9rem;color:var(--navy)}
.express-row .ex-text span{display:block;font-size:.78rem;font-weight:600;color:var(--navy-soft);margin-top:2px}
.register-quiet .express-row{border-color:rgba(92,70,51,.28)}
.register-quiet .express-row:hover{border-color:var(--walnut);box-shadow:0 4px 14px rgba(92,70,51,.12)}
.register-quiet .express-row input{accent-color:var(--walnut)}
.register-quiet .express-row .ex-text b{color:var(--walnut)}

/* ---------- furdie colour swatches ---------- */
.swatch-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.swatch{display:inline-flex;align-items:center;gap:8px;border:2.5px solid rgba(43,46,92,.12);border-radius:999px;padding:8px 14px;font-weight:800;font-size:.82rem;color:var(--navy);background:var(--white);cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.swatch:hover{transform:translateY(-1px)}
.swatch .dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.1);flex:none}
.swatch.sel{border-color:var(--peri);box-shadow:0 4px 12px rgba(111,123,224,.2)}

/* ---------- furdie whoosh-in reveal ---------- */
.whoosh{transform:translateY(110px) rotate(-8deg) scale(.88);transform-origin:50% 100%;transition:transform 1.05s var(--ease-pop)}
.whoosh-r{transform:translateY(110px) rotate(8deg) scale(.88);transform-origin:50% 100%;transition:transform 1.05s var(--ease-pop) .18s}
.rise.whoosh.in,.rise.whoosh-r.in{transform:none}
@keyframes whooshSettle{0%{transform:none}45%{transform:rotate(-1.6deg) scale(1.015)}100%{transform:none}}
.whoosh.in .pc-img img{animation:whooshSettle 1s var(--ease-soft) 1s 1}
.whoosh-r.in .pc-img img{animation:whooshSettle 1s var(--ease-soft) 1.2s 1 reverse}
@media (prefers-reduced-motion:reduce){
  .whoosh,.whoosh-r{transform:none;transition:none}
  .whoosh.in .pc-img img,.whoosh-r.in .pc-img img{animation:none}
}

/* ---------- hero slider ---------- */
.hero-slider{touch-action:pan-y;cursor:grab}
.hero-slider:active{cursor:grabbing}
.hero-slider .hs-img{transition:opacity .8s var(--ease-soft);opacity:0}
.hero-slider .hs-img.on{opacity:1}
.hero-slider .hs-img.abs{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center 32%}
.hs-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:2}
.hs-dots button{width:11px;height:11px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.55);cursor:pointer;transition:transform .2s var(--ease-pop),background .2s;box-shadow:0 1px 4px rgba(43,46,92,.3)}
.hs-dots button.on{background:var(--white);transform:scale(1.3)}
@media (max-width:640px){
  .hero-media img{max-height:340px;aspect-ratio:1/1}
  .hs-dots button{width:13px;height:13px}
}
@media (prefers-reduced-motion:reduce){.hero-slider .hs-img{transition:none}}

/* hero slider: square studio shots, never crop the paws */
.hero-slider .hs-img{aspect-ratio:1/1;max-height:560px;object-position:center}
.hero-slider .hs-img.abs{object-position:center}

/* ---------- drawer cross-sell ---------- */
.d-sugg{border-top:2px solid rgba(43,46,92,.07);padding:14px 20px 8px;flex:none}
.ds-head{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--navy)}
.ds-head span{display:block;font-family:inherit;font-size:.72rem;font-weight:700;color:var(--navy-soft);margin:2px 0 4px}
.ds-item{display:flex;align-items:center;gap:10px;padding:9px 0}
.ds-item img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--oat);flex:none}
.ds-name{font-weight:800;font-size:.88rem;color:var(--navy)}
.ds-meta{font-size:.76rem;font-weight:700;color:var(--navy-soft)}
.ds-add{margin-left:auto;border:none;background:var(--peri);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.8rem;padding:8px 18px;border-radius:999px;cursor:pointer;transition:transform .2s var(--ease-pop),box-shadow .2s;flex:none}
.ds-add:hover{transform:scale(1.07);box-shadow:0 6px 14px rgba(111,123,224,.3)}

/* nav dropdown (sleepwear under The Jammies) */
.nav-links .has-drop{position:relative}
.has-drop > a .caret{display:inline-block;margin-left:4px;font-size:.72em;transform:translateY(-1px)}
.nav-drop{display:none;position:absolute;top:100%;left:0;margin-top:6px;background:var(--white,#fff);border-radius:14px;box-shadow:0 14px 34px rgba(43,46,92,.16);padding:8px;min-width:200px;list-style:none;z-index:80}
.has-drop:hover .nav-drop,.has-drop:focus-within .nav-drop{display:block}
.nav-drop li a{display:block;white-space:nowrap}
@media (max-width:820px){
  .has-drop{position:static}
  .nav-drop{display:block;position:static;box-shadow:none;padding:0 0 0 16px;min-width:0;margin-top:0}
}

/* moving promo banner */
.promo{overflow:hidden;white-space:nowrap;padding-left:0;padding-right:0}
.promo-track{display:inline-flex;will-change:transform;animation:promoScroll 55s linear infinite}
.promo-track span{display:inline-block;padding-right:0}
@keyframes promoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.promo:hover .promo-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.promo-track{animation:none}}