/* Daydream product pages — layered on dd.css (nav, footer, buttons, blobs, reveals). Per-flavor colours come in as custom properties on .dp */
.dp{--acc:#37d8cb;background:#fff}

/* current section in the nav (Figma: bold + underlined) */
.dd-nav__links a.is-active{font-weight:700}
.dd-nav__links a.is-active::after{transform:scaleX(1);background:#fff;height:1.5px}

/* ---------------- HERO ---------------- */
.dp-hero{position:relative;height:calc(1080*var(--u));min-height:640px;overflow:clip;background:var(--night);color:#fff;isolation:isolate}
.dp-hero .dd-hero__img{opacity:.3}
.dp-copy{position:absolute;left:var(--gx);top:calc(230*var(--u));z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.dp-crumb{font:500 12px/normal var(--fd);letter-spacing:.16em;color:var(--lav);white-space:pre}
.dp-crumb a{transition:color .3s}
.dp-crumb a:hover{color:#fff}
.dp-title{margin-top:calc(175*var(--u));margin-left:-.045em;font:900 max(56px,calc(132*var(--u)))/.92 var(--fd);letter-spacing:-.05em;white-space:nowrap}
.dp-title .dd-wi{animation:dd-rise 1.1s var(--ease) both;animation-delay:calc(.2s + var(--i)*.1s)}
.dp-tag{margin-top:calc(35*var(--u));font-size:max(18px,calc(22*var(--u)));color:var(--mist)}
.dp-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(28*var(--u))}
.dp-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  font:500 14px/normal var(--fb);white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dp-pill img{width:8px;height:8px}
.dp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(51*var(--u))}
.dp-copy > *:not(.dp-title){animation:dd-fadeup 1s var(--ease) both;animation-delay:calc(.5s + var(--i,0)*.1s)}

.dp-c{translate:-50% -50%}
.dp-ring img,.dp-orb img{width:100%;height:100%}
.dp-ring--a img{animation:dd-spin 120s linear infinite}
.dp-ring--b{animation:dd-breathe 8s ease-in-out infinite}
.dp-orb{z-index:1;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-14px),0)}
.dp-orb img{scale:1.4242;animation:dp-orbin 1.4s var(--ease) .1s both,dp-orbpulse 6s ease-in-out 1.5s infinite}
@keyframes dp-orbin{from{opacity:0;scale:.6}}
@keyframes dp-orbpulse{50%{scale:1.5}}
.dp-pack{z-index:2;transform:translate3d(calc(var(--mx,0)*30px),calc(var(--my,0)*30px - var(--sy,0)*50px),0);will-change:transform}
.dp-pack__in{width:100%;height:100%;animation:dp-packin 1.6s var(--spring) .25s both}
.dp-pack__float{width:100%;height:100%;animation:dd-bob 6.5s ease-in-out infinite alternate}
.dp-pack img{width:100%;height:100%;object-fit:cover;rotate:7deg;filter:drop-shadow(0 calc(30*var(--u)) calc(30*var(--u)) rgba(0,0,0,.35));transition:rotate 1s var(--spring)}
.dp-hero:hover .dp-pack img{rotate:3deg}
@keyframes dp-packin{from{opacity:0;transform:translateY(calc(140*var(--u))) rotate(-18deg) scale(.6)}40%{opacity:1}to{opacity:1;transform:none}}
.dp-cap{z-index:3;font-size:13px;color:rgba(255,255,255,.5);white-space:nowrap;animation:dd-fadeup 1s var(--ease) 1.2s both}
.dp-hero .dd-star{z-index:4}

/* ---------------- SPECS ---------------- */
.dp-specs{display:grid;grid-template-columns:repeat(4,1fr);padding-inline:var(--gx);background:#fff}
.dp-spec{display:flex;flex-direction:column;gap:12px;padding:44px 0 44px 40px;border-block:1px solid rgba(14,14,16,.12);border-left:1px solid rgba(14,14,16,.12);min-width:0}
.dp-spec:first-child{padding-left:0;border-left:0}
.dp-spec b{font:900 max(36px,calc(56*var(--u)))/normal var(--fd);letter-spacing:-.03em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.dp-spec span{font-size:15px;color:var(--muted)}

/* ---------------- FLAVOR STORY ---------------- */
.dp-flavor{position:relative;isolation:isolate;overflow:clip;background:var(--night);color:#fff;padding:max(96px,calc(200*var(--u))) var(--gx);display:flex;flex-direction:column;gap:max(48px,calc(80*var(--u)))}
.dp-flavor .dd-eyebrow{color:var(--lav)}
.dp-flavor h2{max-width:calc(1150*var(--u));font:900 max(32px,calc(60*var(--u)))/1.12 var(--fd);letter-spacing:-.03em}
.dp-flavor h2 em{font-style:normal;color:var(--acc)}
.dp-flavor__row{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
.dp-notes{display:flex;flex-wrap:wrap;gap:24px 48px}
.dp-note{display:flex;align-items:center;gap:12px;font:700 20px/normal var(--fd);letter-spacing:-.01em;white-space:nowrap}
.dp-note img{width:28px;height:28px;transition:transform .6s var(--spring)}
.dp-note:hover img{transform:scale(1.25)}
.dd-js .dp-notes.is-in .dp-note img{animation:dd-ping .8s var(--spring) both;animation-delay:calc(var(--i)*.12s + .2s)}
.dp-flavor__row > p{width:420px;max-width:100%;flex:none;font-size:18px;line-height:1.6;color:var(--mist)}

/* ---------------- THE FEEL ---------------- */
.dp-feel{background:#fff;padding:max(96px,calc(200*var(--u))) var(--gx);display:flex;flex-direction:column;gap:max(48px,calc(80*var(--u)))}
.dp-feel__title{display:flex;flex-direction:column;gap:28px}
.dp-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.dp-col{display:flex;flex-direction:column;gap:20px;padding:40px 40px 0;border-top:1px solid rgba(14,14,16,.12);border-left:1px solid rgba(14,14,16,.12)}
.dp-col:first-child{padding-left:0;border-left:0}
.dp-col img{width:48px;height:46px}
.dp-col:nth-child(1) img{animation:dd-pulse 3s ease-in-out infinite;transform-origin:20px 20px}
.dp-col:nth-child(2) img{animation:dd-spin 14s linear infinite;transform-origin:22px 21px}
.dp-col:nth-child(3) img{animation:dd-sunrise 3.6s ease-in-out infinite;transform-origin:23px 23px}
.dp-col span{font-size:15px;color:var(--muted)}
.dp-col b{font:900 max(24px,calc(32*var(--u)))/1.15 var(--fd);letter-spacing:-.02em;color:var(--ink)}

/* ---------------- INSIDE (ingredients + lab) ---------------- */
.dp-inside{background:#fff;padding:0 var(--gx) max(96px,calc(200*var(--u)));display:grid;grid-template-columns:1fr 1fr;gap:max(56px,calc(120*var(--u)))}
.dp-ingr{display:flex;flex-direction:column;gap:28px}
.dp-ingr p:not(.dd-eyebrow){font-size:max(18px,calc(22*var(--u)));line-height:1.6;color:var(--ink)}
.dp-ingr small{font-size:15px;color:var(--muted);white-space:pre-wrap}
.dp-lab .dd-eyebrow{display:block;margin-bottom:28px}
.dp-lab ul{border-top:1px solid rgba(14,14,16,.12)}
.dp-lab li{position:relative;display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid rgba(14,14,16,.12);font-size:17px}
.dp-lab li b{font-weight:500;color:var(--ink)}
.dp-lab li span{color:var(--body)}
.dp-lab li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--acc),transparent);transform:scaleX(0);transform-origin:left;opacity:0}
.dd-js .dp-lab.is-in li::after{animation:dd-scan 1s var(--ease) both;animation-delay:calc(var(--i)*.15s + .1s)}
.dp-coa{display:inline-flex;gap:8px;margin-top:24px;font:700 15px/normal var(--fb);color:var(--ink);border-bottom:2px solid transparent;transition:border-color .3s}
.dp-coa span{display:inline-block;transition:transform .4s var(--spring)}
.dp-coa:hover{border-color:var(--acc)}
.dp-coa:hover span{transform:translate(3px,-3px)}

/* ---------------- NEXT UP ---------------- */
.dp-next{position:relative;display:block;height:max(260px,calc(360*var(--u)));overflow:clip;isolation:isolate;background:var(--night);color:#fff}
.dp-next__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.dp-next__bg .dd-blob:last-child{transition:transform 1s var(--ease)}
.dp-next__eyebrow{position:absolute;left:var(--gx);top:calc(90*var(--u))}
.dp-next__name{position:absolute;left:var(--gx);top:calc(140*var(--u));display:flex;align-items:center;gap:max(16px,calc(24*var(--u)))}
.dp-next__name img{width:max(24px,calc(36*var(--u)));height:max(24px,calc(36*var(--u)));transition:transform .6s var(--spring)}
.dp-next__name b{font:900 max(40px,calc(80*var(--u)))/normal var(--fd);letter-spacing:-.03em;white-space:nowrap}
.dp-next__name i{font-style:normal;display:inline-block;transition:transform .6s var(--spring)}
.dp-next__pack{position:absolute;left:calc(1500*var(--u));top:calc(190*var(--u));width:max(240px,calc(417.391*var(--u)));aspect-ratio:1;translate:-50% -50%;transition:transform 1s var(--spring)}
.dp-next__pack img{width:100%;height:100%;object-fit:cover;rotate:-10deg;transition:rotate 1s var(--spring)}
.dp-next:hover .dp-next__pack,.dp-next:focus-visible .dp-next__pack{transform:translate(-4%,8%) scale(1.08)}
.dp-next:hover .dp-next__pack img{rotate:4deg}
.dp-next:hover .dp-next__name i{transform:translateX(18px)}
.dp-next:hover .dp-next__name img{transform:scale(1.3)}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .dp{--hu:calc(100vw/1000)}
  .dp-hero{height:auto;min-height:0;display:flex;flex-direction:column;padding:calc(110px + var(--wp-admin--admin-bar--height,0px)) 0 32px}
  .dp-copy{position:relative;left:auto;top:auto;padding-inline:var(--gx)}
  .dp-title{margin-top:28px;font-size:clamp(52px,17vw,110px)}
  .dp-tag{margin-top:18px}
  .dp-pills{margin-top:20px}
  .dp-ctas{margin-top:28px}
  /* visual centre of the stage is x=1270 of 1728, so shift it left by (1270-864) units to centre it on phones */
  .dp-hero .dd-stage{--u:var(--hu);position:relative;margin:calc(-40*var(--hu)) 0 calc(-40*var(--hu));transform:translateX(calc(-50% - 406*var(--hu)));height:calc(1000*var(--hu));flex:none}
  .dp-specs{grid-template-columns:1fr 1fr}
  .dp-spec{padding:28px 0 28px 20px}
  .dp-spec:nth-child(3){padding-left:0;border-left:0}
  .dp-spec:nth-child(n+3){border-top:0}
  .dp-flavor__row{flex-direction:column}
  .dp-cols{grid-template-columns:1fr}
  .dp-col{padding:32px 0;border-left:0}
  .dp-inside{grid-template-columns:1fr}
  .dp-next{height:auto;padding:56px var(--gx) 200px}
  .dp-next__eyebrow,.dp-next__name{position:relative;left:auto;top:auto}
  .dp-next__name{margin-top:18px}
  .dp-next__name{align-items:flex-start}
  .dp-next__name img{margin-top:.35em}
  .dp-next__name b{font-size:clamp(32px,9vw,56px);white-space:normal}
  .dp-next__pack{left:auto;right:-40px;top:auto;bottom:-70px;translate:none;width:260px}
}
@media (max-width:560px){
  .dp-title{white-space:normal}
  .dp-spec b{font-size:clamp(24px,7vw,40px)}
  .dp-note{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .dp-pack,.dp-orb{transform:none!important}
}

/* 2026-10-03: flavor picker — every flavor in this category */
.dp-flavors{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:100%}
.dp-flavors__label{font:500 11px/normal var(--fd);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.dp-flavors__row{display:flex;flex-wrap:wrap;gap:8px}
.dp-sw{position:relative;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#fff;text-decoration:none;font:500 14px/normal var(--fb);white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:translate .45s var(--spring),border-color .3s,background .3s}
.dp-sw i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--s1),var(--s2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transition:scale .45s var(--spring)}
.dp-sw:hover{translate:0 -2px;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.dp-sw:hover i{scale:1.12}
.dp-sw.is-on{background:#fff;color:#14112b;border-color:#fff;font-weight:600;pointer-events:none}
.dp-sw.is-on i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--s1)}
.dp-sw:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:900px){
  .dp-flavors{margin-top:18px;width:100%}
  .dp-flavors__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-right:calc(-1*var(--gx));padding-right:var(--gx)}
  .dp-flavors__row::-webkit-scrollbar{display:none}
  .dp-sw{flex:0 0 auto}
}