/** Shopify CDN: Minification failed

Line 1042:0 Unexpected "}"

**/
/* =====================================================================
   HEARTSIDE DESIGN SYSTEM · _ds.css · "Cloud Nursery" (was "Evergreen & Heart")
   The one canonical stylesheet. The preview pages and every Shopify
   section are built from it. Tokens → base → layout → components →
   patterns → utilities. No page may invent a value: add it here.
   Brand name lives in markup only, so a rename never touches this file.
   ===================================================================== */

/* ---------- 1. TOKENS (mirror of brand/design-tokens.json) ---------- */
:root{
  /* color: brand ("Cloud Nursery", 2026-11-04) */
  --color-primary:#A63A66; --color-primary-hover:#8A2D55; --color-primary-tint:#FBE1EA; --color-on-primary:#FFFFFF;
  --color-secondary:#A23C68; --color-secondary-hover:#87305A; --color-secondary-tint:#FCE4EB; --color-on-secondary:#FFFFFF;
  --color-heart:#CF4F84; --color-heart-tint:#FDE8EF;            /* graphic-only (hearts, underline); text on tints stays ink */
  --color-accent:#FFD66B; --color-accent-tint:#FFF3CC; --color-on-accent:#4A1B33;
  /* color: surfaces + ink (pink-biased neutrals) */
  --color-bg:#FFF7F9; --color-surface:#FFFFFF; --color-surface-alt:#FCE4EB; --color-surface-deep:#F8D3DF;
  --color-ink:#4A1B33; --color-on-ink:#FFEFF4; --color-on-ink-muted:#E9B6CA;
  --color-text:#4A1B33; --color-text-muted:#7B4862;
  --color-border:#F2CEDA; --color-border-strong:#B9688A;
  /* color: semantic (always paired with an icon) */
  --color-success:#1F6F5C; --color-warning:#9A5B0E; --color-danger:#B42318; --color-info:#2F5E8C;
  --color-rating:#B5780F; --color-focus:#A63A66;
  --color-placeholder-bg:#FBE7EE; --color-placeholder-line:#E2A6BC;
  --color-scrim:rgba(74,27,51,.42);
  /* illustration palette (product art only, never UI chrome) */
  --art-mist:#FCE4EB; --art-blush:#F7E2E4; --art-fleece:#E8DCC9; --art-fleece-light:#EFE5D6; --art-fleece-shade:#DACAB1; --art-fleece-deep:#CDBB9F;
  --art-skin:#F2C9A8; --art-skin-shade:#EBBC9C; --art-cheek:#EF9E8C; --art-heart:#E59AA7;

  /* type */
  --font-heading:"Fredoka","Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem;
  --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.375rem; --text-5xl:3rem; --text-6xl:3.75rem;
  --leading-tight:1.06; --leading-snug:1.22; --leading-normal:1.55; --leading-relaxed:1.7;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-tight:-0.012em; --tracking-normal:0; --tracking-wide:.09em;

  /* space (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:40px; --space-8:48px; --space-10:64px; --space-12:96px; --space-14:128px;

  /* radius */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --radius-arch:999px 999px var(--radius-lg) var(--radius-lg);

  /* elevation (rose-tinted) */
  --shadow-sm:0 1px 2px rgba(74,27,51,.06), 0 1px 1px rgba(74,27,51,.04);
  --shadow-md:0 10px 28px rgba(166,58,102,.12);
  --shadow-lg:0 22px 56px rgba(166,58,102,.18);
  --shadow-sticky:0 -8px 28px rgba(74,27,51,.10);
  --shadow-cta:0 10px 22px rgba(166,58,102,.32);

  /* layout */
  --container-max:1200px; --container-prose:680px; --gutter:16px;
  --header-h:60px; --announce-h:36px;
  --section-pad:var(--space-10);

  /* motion */
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms; --ease:cubic-bezier(.2,.7,.2,1);

  /* controls */
  --control-sm:40px; --control-md:48px; --control-lg:56px;
}
@media (min-width:750px){ :root{ --gutter:24px; --header-h:68px; } }
@media (min-width:990px){ :root{ --gutter:40px; --header-h:76px; --section-pad:var(--space-12); } }

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--space-4))}
body{margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
body.ds-lock{overflow:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:41; background:var(--color-bg)}
img,svg,video{display:block; max-width:100%; height:auto}
img{color:transparent}
p,h1,h2,h3,h4,h5,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none; padding:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:inherit}
::selection{background:var(--color-primary-tint); color:var(--color-ink)}
:focus-visible{outline:2px solid var(--color-focus); outline-offset:3px; border-radius:6px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- 3. TYPOGRAPHY ---------- */
.ds-display,.ds-h1,.ds-h2,.ds-h3,.ds-h4{font-family:var(--font-heading); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight); color:var(--color-ink); text-wrap:balance}
.ds-display{font-size:clamp(var(--text-4xl), 5.2vw + .5rem, var(--text-6xl)); line-height:var(--leading-tight)}
.ds-h1{font-size:clamp(var(--text-3xl), 3.4vw + .75rem, var(--text-5xl)); line-height:var(--leading-tight)}
.ds-h2{font-size:clamp(var(--text-3xl), 2.6vw + .9rem, var(--text-5xl)); line-height:1.1}
.ds-h3{font-size:clamp(var(--text-xl), 1vw + 1rem, var(--text-2xl)); line-height:var(--leading-snug)}
.ds-h4{font-size:var(--text-lg); line-height:var(--leading-snug); font-weight:var(--weight-semibold)}
.ds-eyebrow{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-body); font-size:var(--text-xs);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-secondary)}
.ds-lead{font-size:var(--text-lg); line-height:var(--leading-normal); color:var(--color-text); text-wrap:pretty}
@media (min-width:990px){ .ds-lead{font-size:var(--text-xl)} }
.ds-body{font-size:var(--text-base); line-height:var(--leading-relaxed); text-wrap:pretty}
.ds-small{font-size:var(--text-sm); line-height:var(--leading-normal)}
.ds-micro{font-size:var(--text-xs); line-height:var(--leading-normal)}
.ds-muted{color:var(--color-text-muted)}
.ds-strong{font-weight:var(--weight-semibold)}
.ds-link{color:var(--color-primary); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
  transition:color var(--motion-base) var(--ease)}
.ds-link:hover{color:var(--color-primary-hover)}
.ds-prose > * + *{margin-top:var(--space-4)}
.ds-prose h2,.ds-prose h3{font-family:var(--font-heading); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); margin-top:var(--space-7)}
.ds-prose h2{font-size:var(--text-2xl)} .ds-prose h3{font-size:var(--text-xl)}
.ds-prose ul,.ds-prose ol{padding-left:1.25em} .ds-prose li + li{margin-top:var(--space-2)}
.ds-prose a{color:var(--color-primary); text-decoration:underline; text-underline-offset:3px}
/* hand-drawn underline on one word per page */
.ds-mark,.ds-display em,.ds-h1 em,.ds-h2 em{position:relative; white-space:nowrap; z-index:0; font-style:normal}
.ds-mark::after,.ds-display em::after,.ds-h1 em::after,.ds-h2 em::after{content:""; position:absolute; left:-2%; right:-2%; bottom:-.02em; height:.26em; z-index:-1;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c40-8 92-11 194-6' fill='none' stroke='%23E59AA7' stroke-width='6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E")}

/* ---------- 4. LAYOUT ---------- */
.ds-container{width:100%; max-width:calc(var(--container-max) + var(--gutter) * 2); margin-inline:auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.ds-container--prose{max-width:calc(var(--container-prose) + var(--gutter) * 2)}
.ds-section{padding-block:var(--section-pad)}
.ds-section--tight{padding-block:var(--space-8)}
.ds-band--alt{background:var(--color-surface-alt)}
.ds-band--deep{background:var(--color-surface-deep)}
.ds-band--sage{background:var(--color-secondary-tint)}
.ds-band--white{background:var(--color-surface)}
.ds-band--ink{background:var(--color-ink); color:var(--color-on-ink)}
.ds-band--ink .ds-h1,.ds-band--ink .ds-h2,.ds-band--ink .ds-h3,.ds-band--ink .ds-display{color:var(--color-on-ink)}
.ds-band--ink .ds-muted{color:var(--color-on-ink-muted)}
.ds-band--ink .ds-eyebrow{color:var(--color-accent)}
.ds-stack{display:flex; flex-direction:column; gap:var(--stack-gap, var(--space-4))}
.ds-cluster{display:flex; flex-wrap:wrap; align-items:center; gap:var(--cluster-gap, var(--space-3))}
.ds-grid{display:grid; gap:var(--grid-gap, var(--space-5))}
@media (min-width:750px){ .ds-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .ds-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:990px){ .ds-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ds-split{display:grid; gap:var(--space-6); align-items:center}
@media (min-width:990px){ .ds-split{grid-template-columns:1.05fr 1fr; gap:var(--space-10)} .ds-split--flip > :first-child{order:2} }
.ds-section-head{max-width:640px; margin-bottom:var(--space-7)}
.ds-section-head--center{margin-inline:auto; text-align:center}
.ds-section-head > * + *{margin-top:var(--space-3)}

/* ---------- 5. COMPONENTS ---------- */

/* 5.1 Buttons */
.ds-btn{--btn-h:var(--control-md); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--btn-h); padding:0 var(--space-5); border-radius:var(--radius-pill); border:1.5px solid transparent;
  font-family:var(--font-body); font-size:var(--text-base); font-weight:var(--weight-semibold); letter-spacing:.01em; line-height:1;
  text-decoration:none; white-space:nowrap; -webkit-tap-highlight-color:transparent; user-select:none;
  transition:background-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-base) var(--ease)}
.ds-btn svg{width:20px; height:20px; flex:none}
.ds-btn:active{transform:translateY(1px) scale(.99)}
.ds-btn--primary{background:var(--color-primary); color:var(--color-on-primary); box-shadow:var(--shadow-cta)}
.ds-btn--primary:hover{background:var(--color-primary-hover)}
.ds-btn--secondary{background:transparent; color:var(--color-ink); border-color:var(--color-ink)}
.ds-btn--secondary:hover{background:var(--color-ink); color:var(--color-on-ink)}
.ds-btn--light{background:var(--color-surface); color:var(--color-ink)}
.ds-btn--light:hover{background:var(--color-surface-alt)}
.ds-btn--ghost{background:transparent; color:var(--color-primary); padding-inline:var(--space-2); min-height:var(--control-sm);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px}
.ds-btn--ghost:hover{color:var(--color-primary-hover)}
.ds-btn--lg{--btn-h:var(--control-lg); font-size:var(--text-lg); padding-inline:var(--space-6)}
.ds-btn--sm{--btn-h:var(--control-sm); font-size:var(--text-sm); padding-inline:var(--space-4)}
.ds-btn--block{display:flex; width:100%}
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none}
.ds-btn[aria-busy="true"]{position:relative; color:transparent !important}
.ds-btn[aria-busy="true"]::after{content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid currentColor; border-color:var(--color-on-primary) transparent var(--color-on-primary) transparent; animation:ds-spin .8s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* 5.2 Icon button (44px tap target) */
.ds-iconbtn{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--radius-pill);
  background:transparent; color:var(--color-ink); transition:background-color var(--motion-base) var(--ease)}
.ds-iconbtn:hover{background:var(--color-surface-alt)}
.ds-iconbtn svg{width:24px; height:24px}
.ds-count{position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill);
  background:var(--color-primary); color:var(--color-on-primary); font-size:11px; font-weight:var(--weight-bold); line-height:18px; text-align:center}

/* 5.3 Icons (inline SVG; 1.75 stroke, rounded) */
.ds-icon{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.ds-icon--sm{width:18px; height:18px} .ds-icon--lg{width:32px; height:32px}

/* 5.4 Badges */
.ds-badge{display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 10px; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.02em; line-height:1; white-space:nowrap}
.ds-badge svg{width:14px; height:14px}
.ds-stack > .ds-badge{align-self:flex-start}
.ds-badge--sage{background:var(--color-secondary-tint); color:var(--color-secondary)}
.ds-badge--clay{background:var(--color-primary-tint); color:var(--color-primary-hover)}
.ds-badge--honey{background:var(--color-accent); color:var(--color-on-accent)}
.ds-badge--outline{border:1px solid var(--color-border-strong); color:var(--color-text-muted); background:var(--color-surface)}
.ds-badge--ink{background:var(--color-ink); color:var(--color-on-ink)}

/* 5.5 Honest placeholder markers */
.ds-ph{position:relative; display:grid; place-items:center; align-content:center; gap:var(--space-2); width:100%; height:100%;
  padding:var(--space-4); text-align:center; color:var(--color-text-muted); font-size:var(--text-xs); line-height:1.4;
  background:var(--color-placeholder-bg); border:1.5px dashed var(--color-placeholder-line); border-radius:inherit}
.ds-ph svg{width:28px; height:28px; opacity:.7}
.ds-ph__label{max-width:28ch}
.ds-ph__tag,.ds-tbd::after{display:inline-block; padding:2px 6px; border-radius:4px; background:var(--color-ink); color:var(--color-on-ink);
  font-size:9px; font-weight:var(--weight-bold); letter-spacing:.08em; text-transform:uppercase; line-height:1.2}
.ds-tbd{border-bottom:1.5px dotted var(--color-text-muted)}
.ds-tbd::after{content:"placeholder"; margin-left:5px; vertical-align:2px; background:var(--color-ink); opacity:.85}
.ds-tbd--quiet::after{display:none}
.ds-art-note{position:absolute; left:var(--space-3); bottom:var(--space-3); padding:4px 8px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.86); color:var(--color-text-muted); font-size:10px; font-weight:var(--weight-semibold); letter-spacing:.04em}

/* 5.6 Media frames */
.ds-media{position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--color-surface-deep); aspect-ratio:var(--ratio, 4/5)}
.ds-media > img,.ds-media > svg,.ds-media > video{width:100%; height:100%; object-fit:cover}
.ds-media--arch{border-radius:var(--radius-arch)}
.ds-media--square{--ratio:1/1} .ds-media--wide{--ratio:16/10} .ds-media--tall{--ratio:3/4} .ds-media--portrait{--ratio:4/5}

/* 5.7 Cards */
.ds-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm)}
.ds-card--flat{box-shadow:none}
.ds-card--tint{background:var(--color-surface-alt); border-color:transparent; box-shadow:none}

/* 5.8 Form fields */
.ds-field{display:flex; flex-direction:column; gap:6px}
.ds-label{font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-ink)}
.ds-help{font-size:var(--text-xs); color:var(--color-text-muted)}
.ds-input,.ds-select,.ds-textarea{width:100%; min-height:var(--control-md); padding:0 var(--space-4); border:1.5px solid var(--color-border-strong);
  border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-ink); font-size:var(--text-base);
  transition:border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease)}
.ds-textarea{min-height:96px; padding:var(--space-3) var(--space-4); resize:vertical; line-height:var(--leading-normal)}
.ds-select{appearance:none; padding-right:44px; background:var(--color-surface) no-repeat right 16px center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317251E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.ds-input::placeholder,.ds-textarea::placeholder{color:#7D8A82}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none; border-color:var(--color-ink); box-shadow:0 0 0 4px var(--color-primary-tint)}
.ds-input[aria-invalid="true"]{border-color:var(--color-danger)}
.ds-error{display:flex; gap:6px; align-items:center; font-size:var(--text-xs); color:var(--color-danger)}
.ds-check{display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm)}
.ds-check input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--color-primary); flex:none}

/* 5.9 Option pickers: color swatches + size pills */
.ds-option{border:0; padding:0; margin:0; min-width:0}
.ds-option__head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-3)}
.ds-option__legend{font-size:var(--text-sm); font-weight:var(--weight-semibold); padding:0}
.ds-option__legend span{font-weight:var(--weight-regular); color:var(--color-text-muted)}
.ds-swatches,.ds-sizes{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.ds-sr-input{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.ds-swatch{position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-pill); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(23,37,30,.16); background:var(--swatch, #ddd); transition:box-shadow var(--motion-base) var(--ease)}
.ds-sr-input:checked + .ds-swatch{box-shadow:inset 0 0 0 1px rgba(23,37,30,.16), 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-ink)}
.ds-sr-input:focus-visible + .ds-swatch{outline:2px solid var(--color-focus); outline-offset:6px}
.ds-size{display:inline-grid; place-items:center; min-width:56px; height:var(--control-md); padding:0 var(--space-4); border-radius:var(--radius-md);
  border:1.5px solid var(--color-border-strong); background:var(--color-surface); font-weight:var(--weight-semibold); font-size:var(--text-sm); cursor:pointer;
  transition:border-color var(--motion-base) var(--ease), background-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease)}
.ds-size:hover{border-color:var(--color-ink)}
.ds-sr-input:checked + .ds-size{background:var(--color-ink); border-color:var(--color-ink); color:var(--color-on-ink)}
.ds-sr-input:focus-visible + .ds-size{outline:2px solid var(--color-focus); outline-offset:3px}
.ds-sr-input:disabled + .ds-size,.ds-size.is-soldout{color:#93A096; border-style:dashed; background:linear-gradient(to top right, transparent calc(50% - 1px), var(--color-border-strong) 50%, transparent calc(50% + 1px)), var(--color-surface); cursor:not-allowed}

/* 5.10 Quantity stepper */
.ds-qty{display:inline-flex; align-items:center; border:1.5px solid var(--color-border-strong); border-radius:var(--radius-pill); background:var(--color-surface); height:40px}
.ds-qty button{width:40px; height:100%; border:0; background:transparent; display:grid; place-items:center; border-radius:var(--radius-pill); color:var(--color-ink)}
.ds-qty button:hover{background:var(--color-surface-alt)}
.ds-qty button:disabled{opacity:.35; cursor:not-allowed}
.ds-qty input{width:32px; border:0; background:transparent; text-align:center; font-weight:var(--weight-semibold); font-size:var(--text-sm); -moz-appearance:textfield}
.ds-qty input::-webkit-inner-spin-button,.ds-qty input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.ds-qty svg{width:16px; height:16px}

/* 5.11 Price */
.ds-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-2) var(--space-3)}
.ds-price__now{font-family:var(--font-body); font-size:var(--text-2xl); font-weight:var(--weight-bold); letter-spacing:-.01em; color:var(--color-ink)}
.ds-price__was{font-size:var(--text-base); color:var(--color-text-muted); text-decoration:line-through}
.ds-price__note{font-size:var(--text-sm); color:var(--color-text-muted)}

/* 5.12 Star rating + reviews */
.ds-stars{display:inline-flex; gap:2px; color:var(--color-rating)}
.ds-stars svg{width:16px; height:16px; fill:currentColor}
.ds-review{display:grid; gap:var(--space-3); padding:var(--space-5); border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border)}
.ds-review__meta{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:center; font-size:var(--text-sm)}
.ds-review__reply{margin-top:var(--space-2); padding:var(--space-3) var(--space-4); border-left:3px solid var(--color-secondary); background:var(--color-secondary-tint); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:var(--text-sm)}
.ds-reviews-empty{display:grid; gap:var(--space-4); justify-items:center; text-align:center; padding:var(--space-8) var(--space-5);
  border:1.5px dashed var(--color-border-strong); border-radius:var(--radius-xl); background:var(--color-surface)}

/* 5.13 Trust row */
.ds-trust{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2)}
.ds-trust__item{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:var(--space-3) var(--space-2);
  border-radius:var(--radius-md); background:var(--color-surface-alt); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:1.3}
.ds-trust__item svg{width:22px; height:22px; color:var(--color-secondary)}
.ds-trust--inline{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5)}
.ds-trust--inline .ds-trust__item{flex-direction:row; background:none; padding:0; font-size:var(--text-sm); font-weight:var(--weight-medium); text-align:left}
.ds-trust--inline .ds-trust__item svg{width:18px; height:18px}

/* 5.14 Delivery estimate + free-ship progress */
.ds-eta{display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm)}
.ds-eta svg{width:20px; height:20px; color:var(--color-secondary); flex:none; margin-top:1px}
.ds-progress{display:grid; gap:var(--space-2); font-size:var(--text-sm)}
.ds-progress__track{height:8px; border-radius:var(--radius-pill); background:var(--color-surface-deep); overflow:hidden}
.ds-progress__bar{height:100%; width:var(--pct, 0%); border-radius:inherit; background:var(--color-secondary); transition:width var(--motion-slow) var(--ease)}

/* 5.15 Accordion (native details) */
.ds-acc{border-top:1px solid var(--color-border)}
.ds-acc:last-of-type{border-bottom:1px solid var(--color-border)}
.ds-acc > summary{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:60px; padding:var(--space-4) 0;
  font-weight:var(--weight-semibold); font-size:var(--text-base); cursor:pointer; list-style:none}
.ds-acc > summary::-webkit-details-marker{display:none}
.ds-acc > summary .ds-acc__icon{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--color-surface-alt); transition:transform var(--motion-base) var(--ease), background-color var(--motion-base) var(--ease)}
.ds-acc > summary .ds-acc__icon svg{width:14px; height:14px}
.ds-acc[open] > summary .ds-acc__icon{transform:rotate(45deg); background:var(--color-primary-tint)}
.ds-acc__title{display:flex; align-items:center; gap:var(--space-3)}
.ds-acc__title svg{width:22px; height:22px; color:var(--color-secondary); flex:none}
.ds-acc__body{padding:0 0 var(--space-5); color:var(--color-text); font-size:var(--text-sm); line-height:var(--leading-relaxed)}
.ds-acc__body > * + *{margin-top:var(--space-3)}
.ds-acc__body ul{padding-left:1.1em}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .ds-acc::details-content{block-size:0; overflow:hidden; transition:block-size var(--motion-slow) var(--ease), content-visibility var(--motion-slow) allow-discrete}
  .ds-acc[open]::details-content{block-size:auto}
}

/* 5.16 Tables (size chart, comparison) */
.ds-table-wrap{overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-surface)}
.ds-table{width:100%; border-collapse:collapse; font-size:var(--text-sm); white-space:nowrap}
.ds-table th,.ds-table td{padding:var(--space-3) var(--space-4); text-align:left; border-bottom:1px solid var(--color-border)}
.ds-table thead th{background:var(--color-surface-alt); font-weight:var(--weight-semibold); font-size:var(--text-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-muted)}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table td:first-child,.ds-table th:first-child{position:sticky; left:0; background:inherit; font-weight:var(--weight-semibold)}
.ds-table tbody tr{background:var(--color-surface)}
.ds-compare{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--text-sm)}
.ds-compare th,.ds-compare td{padding:var(--space-4) var(--space-3); text-align:center; border-bottom:1px solid var(--color-border); vertical-align:middle}
.ds-compare th[scope="row"]{text-align:left; font-weight:var(--weight-medium); color:var(--color-ink); width:40%}
.ds-compare thead th{font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-muted); vertical-align:bottom}
.ds-compare .is-us{background:var(--color-surface); box-shadow:inset 1.5px 0 0 var(--color-primary), inset -1.5px 0 0 var(--color-primary)}
.ds-compare thead .is-us{border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:inset 1.5px 1.5px 0 var(--color-primary), inset -1.5px 0 0 var(--color-primary); color:var(--color-primary-hover)}
.ds-compare tbody tr:last-child .is-us{border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:inset 1.5px -1.5px 0 var(--color-primary), inset -1.5px -1.5px 0 var(--color-primary)}
.ds-compare tbody tr:last-child td,.ds-compare tbody tr:last-child th{border-bottom:0}
.ds-yes{color:var(--color-success)} .ds-no{color:#93A096} .ds-yes svg,.ds-no svg{width:22px; height:22px; margin-inline:auto}

/* 5.17 Steps */
.ds-steps{display:grid; gap:var(--space-4); counter-reset:step}
@media (min-width:750px){ .ds-steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5)} }
.ds-step{position:relative; display:grid; gap:var(--space-3); align-content:start; padding:var(--space-5); border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border)}
.ds-step__num{counter-increment:step; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--color-primary-tint);
  color:var(--color-primary-hover); font-family:var(--font-heading); font-size:var(--text-xl); font-weight:var(--weight-semibold)}
.ds-step__num::before{content:counter(step)}

/* 5.18 Feature tiles */
.ds-feature{display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); align-items:start}
.ds-feature__icon{grid-row:span 2; display:grid; place-items:center; width:48px; height:48px; border-radius:var(--radius-md); background:var(--color-secondary-tint); color:var(--color-secondary)}
.ds-feature__icon svg{width:24px; height:24px}
.ds-feature__title{font-weight:var(--weight-semibold); font-size:var(--text-base)}
.ds-feature__text{font-size:var(--text-sm); color:var(--color-text-muted); line-height:var(--leading-normal)}

/* 5.19 Callout (safety / fit) */
.ds-callout{display:grid; gap:var(--space-3); padding:var(--space-5); border-radius:var(--radius-lg); background:var(--color-secondary-tint); color:var(--color-ink)}
.ds-callout__head{display:flex; gap:var(--space-3); align-items:center; font-weight:var(--weight-semibold)}
.ds-callout__head svg{width:22px; height:22px; color:var(--color-secondary)}
.ds-callout--clay{background:var(--color-primary-tint)} .ds-callout--clay .ds-callout__head svg{color:var(--color-primary)}
.ds-checklist{display:grid; gap:var(--space-3); list-style:none; padding:0; margin:0}
.ds-checklist li{display:grid; grid-template-columns:24px 1fr; gap:var(--space-3); align-items:start; font-size:var(--text-sm); line-height:var(--leading-normal)}
.ds-checklist li > svg{width:22px; height:22px; color:var(--color-secondary); margin-top:1px}
.ds-checklist b{font-weight:var(--weight-semibold)}
.ds-letter{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--color-secondary); color:var(--color-on-secondary); font-size:var(--text-xs); font-weight:var(--weight-bold); margin-top:1px}

/* 5.20 Announcement bar */
.ds-announce{background:var(--color-ink); color:var(--color-on-ink); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:.02em}
.ds-announce__inner{display:flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:var(--announce-h); padding-block:6px; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px)); text-align:center}
.ds-announce a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.ds-announce__msgs{display:grid}
.ds-announce__msgs > *{grid-area:1/1; transition:opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease)}
.ds-announce__msgs > :not(.is-active){opacity:0; transform:translateY(4px); pointer-events:none}

/* 5.21 Header + nav */
.ds-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:rgba(250,251,248,.92); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease)}
.ds-header.is-scrolled{border-bottom-color:var(--color-border)}
.ds-header__inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--header-h)}
.ds-header__left{display:flex; align-items:center; gap:var(--space-1); margin-left:-10px}
.ds-header__right{display:flex; justify-content:flex-end; align-items:center; gap:var(--space-1); margin-right:-10px}
.ds-nav{display:none}
@media (min-width:990px){
  .ds-header__left .ds-iconbtn--menu{display:none}
  .ds-header__left{margin-left:0}
  .ds-nav{display:flex; gap:var(--space-6)}
}
.ds-nav a{font-size:var(--text-sm); font-weight:var(--weight-semibold); text-decoration:none; color:var(--color-ink); padding:var(--space-2) 0; background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1.5px; transition:background-size var(--motion-base) var(--ease)}
.ds-nav a:hover,.ds-nav a[aria-current="page"]{background-size:100% 1.5px}
.ds-logo{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--color-ink); font-family:var(--font-heading);
  font-weight:var(--weight-bold); font-size:1.5rem; letter-spacing:-.035em; line-height:1}
.ds-logo svg{width:26px; height:26px; color:var(--color-heart); flex:none}
@media (min-width:990px){ .ds-logo{font-size:1.75rem} .ds-logo svg{width:32px; height:32px} }

/* 5.22 Drawer + bottom sheet (dialog) */
.ds-scrim{position:fixed; inset:0; z-index:60; background:var(--color-scrim); opacity:0; pointer-events:none; transition:opacity var(--motion-slow) var(--ease)}
.ds-scrim.is-open{opacity:1; pointer-events:auto}
.ds-drawer{position:fixed; z-index:70; top:0; right:0; bottom:0; max-height:100dvh; padding-top:env(safe-area-inset-top, 0px); width:min(440px, 100vw); display:flex; flex-direction:column; background:var(--color-surface);
  box-shadow:var(--shadow-lg); transform:translateX(102%); transition:transform var(--motion-slow) var(--ease); visibility:hidden}
.ds-drawer.is-open{transform:none; visibility:visible}
.ds-drawer--left{right:auto; left:0; transform:translateX(-102%)}
.ds-drawer__head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); min-height:64px}
.ds-drawer__title{font-family:var(--font-heading); font-size:var(--text-xl); font-weight:var(--weight-medium)}
.ds-drawer__body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--space-5)}
.ds-drawer__foot{padding:var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top:1px solid var(--color-border); background:var(--color-surface); display:grid; gap:var(--space-3)}
@media (max-width:749px){
  .ds-drawer--sheet{top:auto; left:0; right:0; width:100%; max-height:88dvh; border-radius:var(--radius-xl) var(--radius-xl) 0 0; transform:translateY(102%)}
  .ds-drawer--sheet .ds-drawer__head::before{content:""; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--color-border-strong)}
  .ds-drawer--sheet .ds-drawer__head{position:relative; padding-top:var(--space-5)}
}

/* 5.23 Cart line items */
.ds-line{display:grid; grid-template-columns:76px 1fr auto; gap:var(--space-4); padding-block:var(--space-4); border-bottom:1px solid var(--color-border)}
.ds-line:first-child{padding-top:0}
.ds-line__img{width:76px; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface-deep)}
.ds-line__title{font-weight:var(--weight-semibold); font-size:var(--text-sm)}
.ds-line__meta{font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px}
.ds-line__price{font-weight:var(--weight-semibold); font-size:var(--text-sm); text-align:right}
.ds-line__actions{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3)}
.ds-line__remove{border:0; background:none; padding:var(--space-2) 0; font-size:var(--text-xs); color:var(--color-text-muted); text-decoration:underline; text-underline-offset:2px}
.ds-subtotal{display:flex; justify-content:space-between; align-items:baseline; font-weight:var(--weight-semibold)}
.ds-subtotal span:last-child{font-size:var(--text-xl)}
.ds-empty{display:grid; justify-items:center; text-align:center; gap:var(--space-4); padding:var(--space-8) var(--space-4)}

/* 5.24 Sticky add-to-cart (mobile) */
.ds-sticky{position:fixed; z-index:30; left:0; right:0; bottom:0; padding:var(--space-3) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-sticky);
  transform:translateY(110%); transition:transform var(--motion-slow) var(--ease)}
.ds-sticky.is-visible{transform:none}
.ds-sticky__inner{display:flex; align-items:center; gap:var(--space-3); max-width:var(--container-max); margin-inline:auto}
.ds-sticky__info{flex:1; min-width:0; line-height:1.25}
.ds-sticky__title{font-size:var(--text-sm); font-weight:var(--weight-semibold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ds-sticky__sub{font-size:var(--text-xs); color:var(--color-text-muted)}
.ds-sticky .ds-btn{flex:none}
@media (min-width:990px){ .ds-sticky--mobile-only{display:none} }

/* 5.25 Gallery (PDP) */
.ds-gallery{position:relative}
.ds-gallery__track{display:flex; gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter)}
.ds-gallery__track::-webkit-scrollbar{display:none}
.ds-gallery__slide{flex:0 0 88%; scroll-snap-align:start}
.ds-gallery__count{position:absolute; left:var(--space-3); top:var(--space-3); padding:4px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.9); font-size:var(--text-xs); font-weight:var(--weight-semibold)}
.ds-dots{display:flex; justify-content:center; gap:6px; margin-top:var(--space-3)}
.ds-dots span{width:6px; height:6px; border-radius:50%; background:var(--color-border-strong); transition:width var(--motion-base) var(--ease), background-color var(--motion-base) var(--ease)}
.ds-dots span.is-active{width:18px; border-radius:var(--radius-pill); background:var(--color-ink)}
@media (min-width:990px){
  .ds-gallery__track{display:grid; grid-template-columns:1fr 1fr; overflow:visible; margin:0; padding:0; gap:var(--space-3)}
  .ds-gallery__slide{flex:none}
  .ds-gallery__slide:first-child{grid-column:1 / -1}
  .ds-dots,.ds-gallery__count{display:none}
}

/* 5.26 Newsletter */
.ds-newsletter{display:grid; gap:var(--space-3)}
.ds-newsletter__row{display:flex; gap:var(--space-2)}
.ds-newsletter__row .ds-input{flex:1; min-width:0}
.ds-band--ink .ds-input{background:rgba(255,255,255,.06); border-color:rgba(244,236,226,.28); color:var(--color-on-ink)}
.ds-band--ink .ds-input::placeholder{color:var(--color-on-ink-muted)}
.ds-band--ink .ds-input:focus{border-color:var(--color-on-ink); box-shadow:0 0 0 4px rgba(244,236,226,.14)}

/* 5.27 Footer */
.ds-footer{background:var(--color-ink); color:var(--color-on-ink); padding-block:var(--space-10) var(--space-6)}
.ds-footer a{color:var(--color-on-ink); text-decoration:none}
.ds-footer a:hover{text-decoration:underline; text-underline-offset:3px}
.ds-footer__grid{display:grid; gap:var(--space-7)}
@media (min-width:750px){ .ds-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.ds-footer h3{font-size:var(--text-xs); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-on-ink-muted); font-weight:var(--weight-bold); margin-bottom:var(--space-4)}
.ds-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:var(--space-3); font-size:var(--text-sm)}
.ds-footer .ds-logo{color:var(--color-on-ink)}
.ds-footer .ds-logo svg{color:var(--art-heart)}
.ds-footer__base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid rgba(244,236,226,.14); font-size:var(--text-xs); color:var(--color-on-ink-muted)}
.ds-pay{display:flex; flex-wrap:wrap; gap:6px}
.ds-pay span{display:inline-grid; place-items:center; height:24px; padding:0 8px; border-radius:4px; background:rgba(255,255,255,.08); border:1px solid rgba(244,236,226,.18); font-size:10px; font-weight:var(--weight-bold); letter-spacing:.04em; color:var(--color-on-ink)}

/* 5.28 Skip link + screen-reader-only */
.ds-skip{position:absolute; left:var(--space-3); top:-100px; z-index:100; padding:var(--space-3) var(--space-4); background:var(--color-ink); color:var(--color-on-ink); border-radius:var(--radius-md)}
.ds-skip:focus{top:var(--space-3)}
.ds-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* 5.29 Marquee-free "honesty strip" (static, no repetition filler) */
.ds-strip{display:flex; gap:var(--space-5); overflow-x:auto; scrollbar-width:none; padding-block:var(--space-4); padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px)); scroll-snap-type:x proximity; justify-content:flex-start}
.ds-strip::-webkit-scrollbar{display:none}
@media (min-width:990px){ .ds-strip{justify-content:center; gap:var(--space-8)} }
.ds-strip__item{display:flex; align-items:center; gap:var(--space-2); flex:none; font-size:var(--text-sm); font-weight:var(--weight-semibold); scroll-snap-align:start; white-space:nowrap}
.ds-strip__item svg{width:20px; height:20px; color:var(--color-primary)}

/* 5.30 Quote / founder note */
.ds-note{position:relative; padding:var(--space-6) var(--space-5); border-radius:var(--radius-xl); background:var(--color-surface); border:1px solid var(--color-border)}
.ds-note__sig{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); font-size:var(--text-sm)}
.ds-avatar{width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--color-surface-deep); flex:none}

/* ---------- 6. PATTERNS ---------- */

/* 6.1 Hero */
.ds-hero{padding-block:var(--space-4) var(--space-8)}
.ds-hero__grid{display:grid; gap:var(--space-5)}
.ds-hero__copy{display:grid; gap:var(--space-4); align-content:center}
.ds-hero__ctas{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; margin-top:var(--space-2)}
.ds-hero__media{position:relative}
.ds-hero__media .ds-media{--ratio:5/4}
@media (min-width:750px){ .ds-hero__media .ds-media{--ratio:4/3} }
@media (min-width:990px){
  .ds-hero{padding-block:var(--space-8) var(--space-12)}
  .ds-hero__grid{grid-template-columns:1fr 1.05fr; gap:var(--space-10); align-items:center}
  .ds-hero__media{order:2}
  .ds-hero__media .ds-media{--ratio:4/5}
}
.ds-hero__float{position:absolute; left:var(--space-3); bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  background:rgba(255,255,255,.94); border-radius:var(--radius-pill); box-shadow:var(--shadow-md); font-size:var(--text-xs); font-weight:var(--weight-semibold)}
.ds-hero__float i{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--color-secondary-tint); color:var(--color-secondary); font-style:normal}
.ds-hero__float svg{width:16px; height:16px}

/* 6.2 Buy box (PDP) */
.ds-pdp{display:grid; gap:var(--space-6); padding-block:var(--space-4) var(--space-4)}
@media (min-width:990px){ .ds-pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-10); align-items:start; padding-block:var(--space-6) var(--space-12)}
  .ds-buybox{position:sticky; top:calc(var(--header-h) + var(--space-5))} }
.ds-buybox{display:grid; gap:var(--space-5)}
.ds-buybox__head{display:grid; gap:var(--space-2)}
.ds-buybox__title{font-family:var(--font-heading); font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight);
  font-size:clamp(var(--text-2xl), 1.6vw + 1.1rem, var(--text-4xl)); line-height:1.12; text-wrap:balance}
.ds-buybox__sub{color:var(--color-text-muted); font-size:var(--text-base)}
.ds-buybox__actions{display:grid; gap:var(--space-3)}
.ds-express{display:grid; place-items:center; min-height:var(--control-lg); border-radius:var(--radius-pill); border:1.5px dashed var(--color-placeholder-line); background:var(--color-placeholder-bg); color:var(--color-text-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); text-align:center; padding:0 var(--space-4)}
.ds-fitnote{display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--color-secondary-tint); font-size:var(--text-sm)}
.ds-fitnote svg{width:20px; height:20px; color:var(--color-secondary); flex:none; margin-top:1px}

/* 6.3 Final CTA band */
.ds-final{text-align:center; display:grid; justify-items:center; gap:var(--space-4)}

/* ---------- 7. UTILITIES ---------- */
.u-center{text-align:center}
.u-mt-2{margin-top:var(--space-2)} .u-mt-3{margin-top:var(--space-3)} .u-mt-4{margin-top:var(--space-4)} .u-mt-5{margin-top:var(--space-5)} .u-mt-6{margin-top:var(--space-6)} .u-mt-8{margin-top:var(--space-8)}
.u-maxw-prose{max-width:var(--container-prose)}
.u-hide-mobile{display:none} @media (min-width:990px){ .u-hide-mobile{display:revert} .u-hide-desktop{display:none} }
.u-nowrap{white-space:nowrap}

/* ---------- 8. ADDITIONS (sales-page build, 2026-11-03) ---------- */
/* evergreen band (final CTA) */
.ds-band--evergreen{background:var(--color-primary); color:var(--color-on-primary)}
.ds-band--evergreen .ds-h1,.ds-band--evergreen .ds-h2,.ds-band--evergreen .ds-display{color:var(--color-on-primary)}
.ds-band--evergreen .ds-muted{color:rgba(255,255,255,.78)}
.ds-band--evergreen .ds-eyebrow{color:var(--color-accent)}
.ds-band--heart{background:var(--color-heart-tint)}
.ds-band--hairline{border-block:1px solid var(--color-border); background:var(--color-surface)}
/* buy box extras */
.ds-buybox__sub strong{color:var(--color-ink); font-weight:var(--weight-semibold)}
.ds-giftline{display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border-radius:var(--radius-md); background:var(--color-heart-tint); font-size:var(--text-sm)}
.ds-giftline svg{width:22px; height:22px; color:var(--color-heart); flex:none; margin-top:1px}
.ds-option.is-attention .ds-sizes{animation:ds-nudge .5s var(--ease) 2}
.ds-option.is-attention .ds-option__legend{color:var(--color-danger)}
@keyframes ds-nudge{0%,100%{transform:none} 30%{transform:translateX(-4px)} 60%{transform:translateX(4px)}}
.ds-sizeguide-link{display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:var(--space-2) 0; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.ds-sizeguide-link svg{width:18px; height:18px}
/* benefit tiles */
.ds-benefits{display:grid; gap:var(--space-4)}
@media (min-width:750px){ .ds-benefits{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5)} }
.ds-benefit{display:grid; gap:var(--space-3); align-content:start; padding:var(--space-5); border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border)}
.ds-benefit__icon{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--color-primary-tint); color:var(--color-primary)}
.ds-benefit__icon svg{width:24px; height:24px}
.ds-benefit h3{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-xl); letter-spacing:-.02em; line-height:var(--leading-snug)}
.ds-benefit p{font-size:var(--text-sm); color:var(--color-text-muted); line-height:var(--leading-normal)}
/* T.I.C.K.S. list */
.ds-ticks{display:grid; gap:var(--space-3); list-style:none; margin:0; padding:0}
@media (min-width:990px){ .ds-ticks{grid-template-columns:repeat(5,minmax(0,1fr))} }
.ds-tick{display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); align-items:start; padding:var(--space-4) var(--space-5); border-radius:var(--radius-lg); background:var(--color-surface)}
@media (min-width:990px){ .ds-tick{grid-template-columns:1fr; padding:var(--space-5)} }
.ds-tick__letter{grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-md); background:var(--color-primary); color:var(--color-on-primary); font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-xl)}
@media (min-width:990px){ .ds-tick__letter{grid-row:auto} }
.ds-tick b{font-weight:var(--weight-semibold); font-size:var(--text-base)}
.ds-tick p{font-size:var(--text-sm); color:var(--color-text-muted); line-height:var(--leading-normal)}
/* section intro with media */
.ds-intro{display:grid; gap:var(--space-6); align-items:center}
@media (min-width:990px){ .ds-intro{grid-template-columns:1fr 1fr; gap:var(--space-10)} }
/* illustration colorways (product art) */
.ds-art{--a-fl:var(--art-fleece); --a-fl2:var(--art-fleece-light); --a-sh:var(--art-fleece-shade); --a-dp:var(--art-fleece-deep); --a-zip:#BCA685; --a-zip2:#A8916F}
.ds-art .a-fl{fill:var(--a-fl)} .ds-art .a-fl2{fill:var(--a-fl2)} .ds-art .a-sh{fill:var(--a-sh)} .ds-art .a-dp{fill:var(--a-dp)}
.ds-art .a-st{stroke:var(--a-dp)} .ds-art .a-zip{stroke:var(--a-zip)} .ds-art .a-zipf{fill:var(--a-zip2)} .ds-art .a-dash{stroke:var(--a-sh)}
.ds-art svg *{transition:fill var(--motion-slow) var(--ease), stroke var(--motion-slow) var(--ease)}
[data-color="cocoa"] .ds-art,.ds-art[data-color="cocoa"]{--a-fl:#8E6D58; --a-fl2:#9C7B65; --a-sh:#7D5E4B; --a-dp:#6E513F; --a-zip:#5E4434; --a-zip2:#4E382B}
[data-color="sage"] .ds-art,.ds-art[data-color="sage"]{--a-fl:#A9BBA6; --a-fl2:#B9C9B6; --a-sh:#97AA94; --a-dp:#869A83; --a-zip:#6F8470; --a-zip2:#5D715E}
[data-color="blush"] .ds-art,.ds-art[data-color="blush"],[data-color="pink"] .ds-art,.ds-art[data-color="pink"]{--a-fl:#EBC3C0; --a-fl2:#F2D2CF; --a-sh:#DEB1AD; --a-dp:#D0A09C; --a-zip:#B98580; --a-zip2:#A6716C}
/* supplier colorways (option values are handleized: "Off White" -> off-white) */
[data-color="off-white"] .ds-art,.ds-art[data-color="off-white"],[data-color="cream"] .ds-art,.ds-art[data-color="cream"]{--a-fl:#ECE6DC; --a-fl2:#F5F0E8; --a-sh:#DDD5C8; --a-dp:#CBC1B2; --a-zip:#B5A992; --a-zip2:#9F937D}
[data-color="dark-brown"] .ds-art,.ds-art[data-color="dark-brown"],[data-color="brown"] .ds-art,.ds-art[data-color="brown"]{--a-fl:#8F5D36; --a-fl2:#9E6C45; --a-sh:#7C4F2D; --a-dp:#6A4226; --a-zip:#563520; --a-zip2:#45291A}
[data-color="black"] .ds-art,.ds-art[data-color="black"]{--a-fl:#3A3633; --a-fl2:#4A4541; --a-sh:#2E2B29; --a-dp:#24211F; --a-zip:#6A635C; --a-zip2:#57514B}
[data-color="navy-blue"] .ds-art,.ds-art[data-color="navy-blue"],[data-color="navy"] .ds-art,.ds-art[data-color="navy"]{--a-fl:#2D3B58; --a-fl2:#3A4A6A; --a-sh:#25314A; --a-dp:#1E283D; --a-zip:#5C6B88; --a-zip2:#4A5874}
/* toast */
.ds-toast{position:fixed; z-index:90; left:50%; bottom:calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  max-width:min(420px, calc(100vw - 32px)); padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill); background:var(--color-ink); color:var(--color-on-ink); font-size:var(--text-sm); font-weight:var(--weight-medium); box-shadow:var(--shadow-lg); text-align:center;
  transition:opacity var(--motion-base) var(--ease), transform var(--motion-base) var(--ease)}
.ds-toast.is-visible{opacity:1; transform:translate(-50%, 0)}
/* menu drawer links */
.ds-menu{display:grid; gap:var(--space-1)}
.ds-menu a{display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0 var(--space-1); font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-xl); letter-spacing:-.02em; text-decoration:none; color:var(--color-ink); border-bottom:1px solid var(--color-border)}
.ds-menu a svg{width:20px; height:20px; color:var(--color-text-muted)}
/* gift visual */
.ds-gift{display:grid; gap:var(--space-6); align-items:center}
@media (min-width:990px){ .ds-gift{grid-template-columns:1.1fr .9fr; gap:var(--space-10)} }
/* reviews empty icon */
.ds-reviews-empty__icon{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--color-heart-tint); color:var(--color-heart)}
.ds-reviews-empty__icon svg{width:28px; height:28px}
/* page hero (content pages) */
.ds-pagehead{padding-block:var(--space-8) var(--space-6)}
.ds-pagehead > * + *{margin-top:var(--space-3)}
/* placeholder paragraph block */
.ds-ph--text{display:block; text-align:left; padding:var(--space-4) var(--space-5); font-size:var(--text-sm); line-height:var(--leading-normal); border-radius:var(--radius-md)}
.ds-ph--text .ds-ph__tag{margin-bottom:var(--space-2)}
/* home hero trust list spacing */
.ds-hero .ds-trust--inline{margin-top:var(--space-2)}
.ds-art{--art-eye:#5A3B2E; --art-mouth:#B5644E; --art-heart2:#EDB3BC; --art-skin-deep:#DFA987; --art-face-shade:#E2AF8B}
.ds-art .a-mist{fill:var(--art-mist)} .ds-art .a-blush{fill:var(--art-blush)} .ds-art .a-heart{fill:var(--art-heart)} .ds-art .a-heart2{fill:var(--art-heart2)}
.ds-art .a-skin{fill:var(--art-skin)} .ds-art .a-skin2{fill:var(--art-skin-shade)} .ds-art .a-skin3{fill:var(--art-skin-deep)} .ds-art .a-face{fill:var(--art-face-shade)}
.ds-art .a-cheek{fill:var(--art-cheek)} .ds-art .a-eye{stroke:var(--art-eye)} .ds-art .a-mouth{stroke:var(--art-mouth)}
.ds-art svg{width:100%; height:100%; display:block}
/* grid/flex children never force the page wider than the phone */
.ds-pdp{grid-template-columns:minmax(0,1fr)}
@media (min-width:990px){ .ds-pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} }
.ds-pdp > *,.ds-grid > *,.ds-split > *,.ds-hero__grid > *,.ds-intro > *,.ds-gift > *,.ds-benefits > *,.ds-steps > *,.ds-footer__grid > *,.ds-buybox > *{min-width:0}
.ds-option__head{flex-wrap:wrap}

/* phone density pass: rows instead of stacked cards */
@media (max-width:749px){
  .ds-benefits{gap:0; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); padding:var(--space-2) var(--space-5)}
  .ds-benefit{grid-template-columns:44px 1fr; gap:2px var(--space-4); padding:var(--space-4) 0; border:0; border-radius:0; background:none}
  .ds-benefit + .ds-benefit{border-top:1px solid var(--color-border)}
  .ds-benefit__icon{grid-row:span 2; width:44px; height:44px}
  .ds-benefit h3{font-size:var(--text-lg)}
  .ds-steps{gap:0; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); padding:var(--space-2) var(--space-5)}
  .ds-step{grid-template-columns:40px 1fr; gap:2px var(--space-4); padding:var(--space-4) 0; border:0; border-radius:0; background:none}
  .ds-step + .ds-step{border-top:1px solid var(--color-border)}
  .ds-step__num{grid-row:span 2}
  .ds-strip{flex-wrap:wrap; justify-content:center; gap:var(--space-3) var(--space-5); overflow:visible}
  .ds-strip__item{font-size:var(--text-xs)}
  .ds-strip__item svg{width:18px; height:18px}
}
/* comparison table: readable on phones */
.ds-compare thead th{text-transform:none; letter-spacing:0; font-size:var(--text-xs); line-height:1.25; padding-inline:var(--space-2)}
.ds-compare td{font-size:var(--text-xs); line-height:1.3; padding-inline:var(--space-2)}
.ds-compare th[scope="row"]{width:44%; font-size:var(--text-sm); line-height:1.35; padding-left:0}
@media (min-width:750px){ .ds-compare td{font-size:var(--text-sm)} .ds-compare thead th{font-size:var(--text-sm)} }
/* Shopify dynamic checkout buttons, styled to the system; locked until a size is chosen */
.ds-express-wrap{position:relative}
.ds-express-wrap .shopify-payment-button__button{min-height:var(--control-lg); border-radius:var(--radius-pill) !important; overflow:hidden; font-family:var(--font-body); font-weight:var(--weight-semibold)}
.ds-express-wrap .shopify-payment-button__button--unbranded{background:var(--color-ink); color:var(--color-on-ink)}
.ds-express-wrap .shopify-payment-button__more-options{margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); text-decoration:underline; background:none; border:0; width:100%}
.ds-express-lock{display:none; position:absolute; inset:0; z-index:2; width:100%; border:0; background:transparent; cursor:pointer}
[data-needs-size="true"] .ds-express-lock{display:block}
[data-needs-size="true"] .ds-express-wrap .shopify-payment-button{opacity:.45; filter:saturate(.6)}
/* product photos in frames */
.ds-media > img{width:100%; height:100%; object-fit:cover}
.ds-line__img img{width:100%; height:100%; object-fit:cover}
.ds-pay--icons{align-items:center}
.ds-pay-icon{height:24px; width:auto; border-radius:4px}

/* =====================================================================
   7. BRAND-WORLD PASS (2026-11-04)
   The garment is the interface: fleece grounds, stitched seams instead of
   card boxes, sewn-in labels for the facts that matter, quiet labels,
   and one orchestrated moment (baby settles into the pouch on load).
   ===================================================================== */
:root{
  --color-fleece:#F4EEE4;            /* oat fleece ground */
  --color-label:#FFFDF8;             /* woven-label white */
  --color-stitch:#C5B49A;            /* thread on oat */
  --color-stitch-green:#7FA391;      /* thread on white */
  --fleece-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Quiet labels: no tracked caps, no label above every heading */
.ds-eyebrow{text-transform:none; letter-spacing:0; font-size:var(--text-sm); font-weight:var(--weight-semibold)}
.ds-section-head .ds-eyebrow{display:none}
.ds-section-head .ds-h2,.ds-section-head .ds-h1{margin-top:0}

/* Headlines carry themselves: no single-word accent */
.ds-mark::after,.ds-display em::after,.ds-h1 em::after,.ds-h2 em::after{display:none}
.ds-mark{white-space:normal}
.ds-display em,.ds-h1 em,.ds-h2 em{white-space:normal}

/* No arrows tacked onto buttons */
.ds-btn > .ds-icon:last-child:not(:first-child){display:none}

/* Placeholder marks: still labeled, no longer shouting */
.ds-tbd{border-bottom:2px dotted var(--color-accent)}
.ds-tbd::after{content:"to confirm"; margin-left:5px; vertical-align:1px; padding:1px 7px; border-radius:var(--radius-pill);
  background:var(--color-accent-tint); color:var(--color-warning); opacity:1; font-size:11px; font-weight:var(--weight-semibold);
  letter-spacing:0; text-transform:none; white-space:nowrap}
.ds-tbd--quiet::after{display:none}
.ds-ph__tag{letter-spacing:0; text-transform:none; font-size:11px; padding:2px 8px; border-radius:var(--radius-pill); background:var(--color-accent-tint); color:var(--color-warning)}

/* Fleece grounds */
.ds-band--alt{background-color:var(--color-fleece); background-image:var(--fleece-grain)}

/* A stitched panel: one piece of fabric, seams between its parts */
.ds-benefits,.ds-steps{position:relative; gap:0; padding:var(--space-3) var(--space-5); border:0; border-radius:var(--radius-xl);
  background-color:var(--color-fleece); background-image:var(--fleece-grain)}
.ds-benefits::before,.ds-steps::before,.ds-ticks::before,.ds-spec::before{content:""; position:absolute; inset:7px; border:1.5px dashed var(--color-stitch);
  border-radius:calc(var(--radius-xl) - 5px); pointer-events:none}
.ds-band--alt .ds-steps,.ds-band--alt .ds-benefits{background-color:var(--color-label); background-image:none}
.ds-band--alt .ds-steps::before,.ds-band--alt .ds-benefits::before{border-color:var(--color-stitch-green)}
.ds-benefit,.ds-step{position:relative; padding:var(--space-5) var(--space-2); border:0; border-radius:0; background:none; box-shadow:none}
.ds-benefit + .ds-benefit,.ds-step + .ds-step{border-top:1.5px dashed var(--color-stitch)}
.ds-band--alt .ds-step + .ds-step{border-top-color:var(--color-stitch-green)}
.ds-benefit__icon{width:auto; height:auto; border-radius:0; background:none; color:var(--color-primary)}
.ds-benefit__icon svg{width:30px; height:30px}
@media (min-width:750px){
  .ds-benefits,.ds-steps{padding:var(--space-4) var(--space-5)}
  .ds-benefit,.ds-step{padding:var(--space-5) var(--space-5)}
  .ds-benefit + .ds-benefit,.ds-step + .ds-step{border-top:0; border-left:1.5px dashed var(--color-stitch)}
  .ds-band--alt .ds-step + .ds-step{border-left-color:var(--color-stitch-green)}
}

/* Step numbers read as sewn knots: the sequence is real, so the numbers stay */
.ds-step__num{background:var(--color-primary); color:var(--color-on-primary); box-shadow:0 0 0 4px var(--color-label), 0 0 0 5.5px var(--color-stitch-green)}

/* Sewn-in label: the safety checks and the spec sheet */
.ds-ticks,.ds-spec{position:relative; padding:var(--space-5) var(--space-5) var(--space-4); border-radius:var(--radius-xl);
  background:var(--color-label); box-shadow:0 1px 0 rgba(23,37,30,.04), 0 12px 30px -18px rgba(23,37,30,.35)}
.ds-ticks::before,.ds-spec::before{border-color:var(--color-stitch-green)}
.ds-ticks{gap:0}
.ds-tick{padding:var(--space-4) var(--space-2); border-radius:0; background:none}
.ds-tick + .ds-tick{border-top:1.5px dashed var(--color-border)}
@media (min-width:990px){
  .ds-ticks{padding:var(--space-5)}
  .ds-tick + .ds-tick{border-top:0; border-left:1.5px dashed var(--color-border)}
}
.ds-tick__letter{border-radius:var(--radius-sm); font-size:var(--text-xl)}

/* Spec sheet (details): plain thread icons, seams between rows */
.ds-spec{display:grid; gap:0}
.ds-spec .ds-feature{padding:var(--space-4) var(--space-1)}
.ds-spec .ds-feature + .ds-feature{border-top:1.5px dashed var(--color-border)}
.ds-feature__icon{width:28px; height:28px; border-radius:0; background:none; color:var(--color-primary)}
.ds-feature__icon svg{width:26px; height:26px}
@media (min-width:750px){
  .ds-spec{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-7)}
  .ds-spec .ds-feature:nth-child(2){border-top:0}
}

/* Trust row under the buy button: one seam-split strip, not three boxes */
.ds-buybox .ds-trust{gap:0; border-block:1.5px dashed var(--color-border)}
.ds-buybox .ds-trust__item{background:none; border-radius:0; padding:var(--space-3) var(--space-2)}
.ds-buybox .ds-trust__item + .ds-trust__item{border-left:1.5px dashed var(--color-border)}

/* Price inside a button: set apart by weight and space, not a dot */
.ds-btn__price{margin-left:.5em; font-weight:var(--weight-medium); opacity:.85}

/* The one orchestrated moment: baby settles into the pouch */
.ds-art .a-baby{transform-box:view-box; transform-origin:200px 240px}
@media (prefers-reduced-motion: no-preference){
  .ds-gallery .ds-art .a-baby,.ds-hero .ds-art .a-baby{animation:hs-settle 1.1s cubic-bezier(.2,.8,.2,1) .35s both}
  @keyframes hs-settle{0%{transform:translateY(-22px)} 70%{transform:translateY(3px)} 100%{transform:none}}
}

/* Supplier studio photos: one slide, the photo follows the chosen color */
.ds-photos{position:relative; background:var(--color-fleece)}
.ds-photos img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity var(--motion-slow) var(--ease)}
.ds-photos img.is-on{opacity:1}

/* Waitlist mode */
.ds-waitlist{padding:var(--space-5); border-radius:var(--radius-lg); background-color:var(--color-fleece); background-image:var(--fleece-grain)}
.ds-waitlist__row{display:grid; gap:var(--space-3)}
@media (min-width:480px){ .ds-waitlist__row{grid-template-columns:1fr auto} }

/* =====================================================================
   8. NURSERY DREAM PASS (2026-11-04, owner direction, grill round 2)
   Everything pink, like walking into a baby nursery in a dream: clouds,
   sunshine, flowers, bubbles and marshmallows. Puffy icons, bubble-letter
   logo, rounded type. The first screen sells; the rest stays short.
   Overrides the brand-world pass (7) where they disagree.
   ===================================================================== */
:root{
  --color-fleece:#FCE4EB; --color-label:#FFFFFF; --color-stitch:#F2CEDA; --color-stitch-green:#F2CEDA; --fleece-grain:none;
  --color-candy:#F6B8CB; --color-petal:#EF8FB0; --color-cloud:#FFF9FA; --color-sun:#FFD66B;
  --dream-sky:radial-gradient(120% 70% at 18% 0%,#FFFFFF 0%,rgba(255,255,255,0) 60%),radial-gradient(80% 60% at 100% 10%,#FFF1C9 0%,rgba(255,241,201,0) 62%),linear-gradient(180deg,#FFF3F7 0%,#FCE4EB 100%);
  --shadow-puff:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(122,36,74,.30);
  --shadow-bubble:0 14px 34px -22px rgba(166,58,102,.6);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
body{background:linear-gradient(180deg,#FFEDF3 0,var(--color-bg) 360px) no-repeat,var(--color-bg)}
.ds-display,.ds-h1,.ds-h2,.ds-h3,.ds-h4,.ds-buybox__title{font-weight:var(--weight-semibold)}

/* Announcement + header: cotton candy bar, frosted cloud header, bubble logo */
.ds-announce{background:var(--color-candy); color:var(--color-ink); font-weight:var(--weight-bold)}
.ds-header{background:rgba(255,247,249,.84)}
.ds-header.is-scrolled{border-bottom-color:transparent; box-shadow:0 8px 24px -18px rgba(166,58,102,.55)}
.ds-logo .hs-logo{width:150px; height:auto; display:block}
@media (min-width:990px){ .ds-logo .hs-logo{width:184px} }
.ds-drawer .ds-logo .hs-logo{width:132px}
.ds-footer .ds-logo .hs-logo{width:176px}

/* Buttons: marshmallow puff, squish on tap */
.ds-btn{font-family:var(--font-heading); font-weight:var(--weight-semibold); letter-spacing:.005em; border-radius:var(--radius-pill)}
.ds-btn:active{transform:scale(.96)}
.ds-btn--primary{background:linear-gradient(180deg,#BC4A7B 0%,var(--color-primary) 52%,#93305B 100%); box-shadow:var(--shadow-puff),var(--shadow-cta)}
.ds-btn--primary:hover{background:linear-gradient(180deg,#AE4271 0%,var(--color-primary-hover) 60%,#7D274D 100%)}
.ds-btn--secondary{border-color:var(--color-primary); color:var(--color-primary)}
.ds-btn--secondary:hover{background:var(--color-primary); color:var(--color-on-primary)}
.ds-btn[disabled]{background:var(--color-surface-deep); color:var(--color-text-muted); box-shadow:none}

/* Color picker: photo bubbles with the name underneath */
.ds-swatches{gap:var(--space-3) var(--space-2)}
.ds-swatch--photo{width:auto; height:auto; display:grid; justify-items:center; gap:6px; background:none; box-shadow:none; border-radius:0}
.ds-sr-input:checked + .ds-swatch--photo{box-shadow:none}
.ds-sr-input:focus-visible + .ds-swatch--photo{outline:none}
.ds-sr-input:focus-visible + .ds-swatch--photo .ds-swatch__img{outline:2px solid var(--color-focus); outline-offset:4px}
.ds-swatch__img{position:relative; display:block; width:62px; height:62px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 35% 28%,#FFFFFF 0%,#FFF0F5 50%,var(--color-surface-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(166,58,102,.12),0 6px 14px -8px rgba(166,58,102,.55);
  transition:transform var(--motion-slow) var(--ease-spring),box-shadow var(--motion-base) var(--ease)}
.ds-swatch__img img{position:absolute; left:50%; top:4%; width:118%; max-width:none; height:auto; transform:translateX(-50%)}
.ds-swatch__img--media img{inset:0; left:0; top:0; width:100%; height:100%; object-fit:cover; transform:none}
.ds-swatch__img--dot{background:var(--swatch,#ddd)}
.ds-swatch__img::after{content:""; position:absolute; left:18%; top:12%; width:26%; height:14%; border-radius:50%; background:rgba(255,255,255,.75); transform:rotate(-30deg); pointer-events:none}
.ds-swatch__name{font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--color-text-muted); line-height:1.1}
.ds-swatch--photo:hover .ds-swatch__img{transform:translateY(-2px)}
.ds-sr-input:checked + .ds-swatch--photo .ds-swatch__img{transform:scale(1.07); box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--color-primary),0 10px 20px -10px rgba(166,58,102,.7)}
.ds-sr-input:checked + .ds-swatch--photo .ds-swatch__name{color:var(--color-primary)}

/* Size picker: big puffy pills */
.ds-sizes{gap:var(--space-2)}
.ds-size{min-width:58px; height:52px; border-radius:var(--radius-pill); border:2px solid var(--color-border); background:var(--color-surface);
  font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-lg); color:var(--color-ink);
  box-shadow:inset 0 -3px 0 rgba(242,206,218,.75),0 4px 10px -6px rgba(166,58,102,.4); transition:transform var(--motion-fast) var(--ease),background-color var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease),color var(--motion-base) var(--ease)}
.ds-size:hover{border-color:var(--color-petal)}
.ds-size:active{transform:scale(.94)}
.ds-sr-input:checked + .ds-size{background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); box-shadow:var(--shadow-puff),0 8px 16px -8px rgba(166,58,102,.65)}
.ds-sizeguide-link{color:var(--color-primary); font-weight:var(--weight-bold)}

/* Buy box */
.ds-buybox__title{color:var(--color-ink)}
.ds-price__now{font-family:var(--font-heading); color:var(--color-primary)}
.ds-buybox .ds-trust{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); border-block:0}
.ds-buybox .ds-trust__item{display:grid; justify-items:center; align-content:start; gap:6px; text-align:center; padding:var(--space-3) var(--space-1);
  border-radius:var(--radius-lg); background:linear-gradient(180deg,#FFFFFF,#FFF3F7); box-shadow:0 8px 18px -14px rgba(166,58,102,.6); font-size:var(--text-xs); font-weight:var(--weight-bold); line-height:1.25}
.ds-buybox .ds-trust__item + .ds-trust__item{border-left:0}
.ds-puff{display:block; width:40px; height:40px; flex:none; overflow:visible}
.ds-giftline,.ds-eta{color:var(--color-text)}

/* Accordions: soft white pillows */
.ds-acc{border:0; margin-top:var(--space-2); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:0 8px 20px -16px rgba(166,58,102,.55); padding-inline:var(--space-4)}
.ds-acc:last-of-type{border-bottom:0}
.ds-acc > summary .ds-acc__icon{background:var(--color-surface-alt); color:var(--color-primary)}
.ds-acc__title svg{color:var(--color-primary)}

/* Sections: cloud-scalloped pink bands, bubble cards instead of stitched panels */
.ds-band--alt{position:relative; background-color:var(--color-fleece); background-image:none}
.ds-band--alt::before{content:""; position:absolute; left:0; right:0; top:-21px; height:22px; pointer-events:none;
  background:radial-gradient(circle at 26px 30px,var(--color-fleece) 25px,transparent 26px) 0 0/52px 30px repeat-x}
.ds-benefits,.ds-steps{gap:var(--space-3); padding:0; background:none; border-radius:0}
.ds-benefits::before,.ds-steps::before{display:none}
.ds-band--alt .ds-steps,.ds-band--alt .ds-benefits{background:none}
.ds-benefit,.ds-step{padding:var(--space-5); border-radius:var(--radius-xl); background:var(--color-surface); box-shadow:var(--shadow-bubble),inset 0 -4px 0 rgba(252,228,235,.9)}
.ds-benefit + .ds-benefit,.ds-step + .ds-step,.ds-band--alt .ds-step + .ds-step{border:0}
@media (min-width:750px){ .ds-benefit + .ds-benefit,.ds-step + .ds-step,.ds-band--alt .ds-step + .ds-step{border-left:0} }
.ds-benefit__icon{color:inherit}
.ds-benefit__icon .ds-puff{width:56px; height:56px}
.ds-step__num{background:linear-gradient(180deg,#BC4A7B,var(--color-primary)); box-shadow:var(--shadow-puff),0 0 0 4px #fff}
.ds-section-head--center .ds-h2::before{content:""; display:block; width:30px; height:28px; margin:0 auto var(--space-2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cdefs%3E%3CradialGradient id='h' cx='35%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23FFB3CC'/%3E%3Cstop offset='.5' stop-color='%23E9619A'/%3E%3Cstop offset='1' stop-color='%23B23468'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M12 21.2C6.3 17.4 1.2 13.4 1.2 7.6 1.2 4 3.9 1.3 7.3 1.3c2 0 3.7 1 4.7 2.6 1-1.6 2.7-2.6 4.7-2.6 3.4 0 6.1 2.7 6.1 6.3 0 5.8-5.1 9.8-10.8 13.6z' fill='url(%23h)'/%3E%3Cellipse cx='7' cy='6.5' rx='2.6' ry='1.5' fill='%23fff' opacity='.85' transform='rotate(-35 7 6.5)'/%3E%3C/svg%3E") center/contain no-repeat}

/* Gallery frames */
.ds-gallery .ds-media{border-radius:var(--radius-xl)}
.ds-dots span.is-active{background:var(--color-primary)}
.ds-art-note{background:rgba(255,255,255,.86); color:var(--color-text-muted)}

/* The dream: first slide. Mom and baby on a cloud, the chosen color floats in a bubble */
.ds-dream{position:relative; overflow:hidden; background:var(--dream-sky); isolation:isolate}
.ds-dream__sun{position:absolute; z-index:0; right:-14%; top:-16%; width:58%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#FFF4C4 0%,rgba(255,244,196,.6) 38%,rgba(255,244,196,0) 70%)}
.ds-dream > .ds-dream__photo{position:absolute; z-index:1; left:40%; top:auto; bottom:0; height:93%; width:auto; max-width:none; object-fit:contain; transform:translateX(-50%); transform-origin:50% 100%;
  filter:drop-shadow(0 18px 24px rgba(166,58,102,.22))}
.ds-dream > .ds-dream__cloud{position:absolute; z-index:2; height:auto; fill:url(#hsPuffCloud); filter:drop-shadow(0 -2px 8px rgba(166,58,102,.12))}
.ds-dream > .ds-dream__cloud--a{width:50%; left:-12%; bottom:-8%}
.ds-dream > .ds-dream__cloud--b{width:56%; right:-16%; bottom:-12%}
.ds-dream > .ds-dream__cloud--c{z-index:0; width:28%; left:5%; top:8%; opacity:.85; filter:none}
.ds-dream__bubble{position:absolute; z-index:3; right:5%; top:7%; width:36%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 35% 28%,#FFFFFF 0%,#FFF0F5 52%,var(--color-surface-deep) 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 16px 28px -14px rgba(166,58,102,.6)}
.ds-dream__bubble .ds-photos{position:absolute; inset:0; background:none}
.ds-dream__bubble .ds-photos img{inset:auto; left:50%; top:9%; width:84%; height:auto; object-fit:contain; transform:translateX(-50%)}
.ds-dream__bubble .ds-photos img.is-media{top:0; left:0; width:100%; height:100%; object-fit:cover; transform:none}
.ds-dream__bubble::after{content:""; position:absolute; left:17%; top:11%; width:24%; height:12%; border-radius:50%; background:rgba(255,255,255,.8); transform:rotate(-32deg)}
.ds-dream__tag{position:absolute; z-index:4; right:23%; top:calc(7% + 36% - 14px); transform:translateX(50%); padding:4px 10px; border-radius:var(--radius-pill); background:#fff; color:var(--color-primary); font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-sm); box-shadow:0 6px 14px -8px rgba(166,58,102,.6)}
.ds-dream__float{position:absolute; z-index:2; bottom:12%; border-radius:50%; border:2px solid rgba(255,255,255,.95); background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 16%,rgba(255,255,255,.18) 17% 100%); opacity:0}
.ds-dream .ds-art-note{z-index:5}
@media (prefers-reduced-motion: no-preference){
  .ds-dream__photo{animation:hs-breathe 9s ease-in-out infinite alternate}
  .ds-dream__cloud--a{animation:hs-drift 14s ease-in-out infinite alternate}
  .ds-dream__cloud--b{animation:hs-drift 17s ease-in-out infinite alternate-reverse}
  .ds-dream__cloud--c{animation:hs-drift 21s ease-in-out infinite alternate}
  .ds-dream__bubble,.ds-dream__tag{animation:hs-bob 5.5s ease-in-out infinite}
  .ds-dream__float{animation:hs-rise 11s linear infinite}
  @keyframes hs-breathe{from{transform:translateX(-50%) scale(1)} to{transform:translateX(-50%) scale(1.03)}}
  @keyframes hs-drift{from{transform:translateX(-4%)} to{transform:translateX(5%)}}
  @keyframes hs-bob{0%,100%{translate:0 0} 50%{translate:0 -7px}}
  @keyframes hs-rise{0%{transform:translateY(0) scale(.85); opacity:0} 12%{opacity:.95} 85%{opacity:.95} 100%{transform:translateY(-260px) scale(1.05); opacity:0}}
}
@media (prefers-reduced-motion: reduce){ .ds-dream__float{display:none} }

/* Color studio slide: the hoodie cut out on the same sky */
.ds-media.ds-studio{background:var(--dream-sky)}
.ds-media.ds-studio > img{position:absolute; inset:auto; left:50%; top:6%; width:auto; height:90%; max-width:none; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(0 16px 22px rgba(166,58,102,.2))}
.ds-media.ds-studio > img.is-media{inset:0; left:0; top:0; width:100%; height:100%; object-fit:cover; transform:none; filter:none}

/* Moments strip: bubble-framed photos, swipe on phones */
.ds-moments{display:flex; gap:var(--space-4); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding:var(--space-2) var(--gutter) var(--space-5)}
.ds-moments::-webkit-scrollbar{display:none}
.ds-moment{flex:0 0 72%; scroll-snap-align:center; display:grid; gap:var(--space-3); text-align:center}
@media (min-width:750px){ .ds-moments{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:0} .ds-moment{flex:none} }
.ds-moment__frame{position:relative; aspect-ratio:4/5; border-radius:120px 120px var(--radius-xl) var(--radius-xl); overflow:hidden; background:var(--dream-sky); box-shadow:var(--shadow-bubble)}
.ds-moment__frame img{position:absolute; left:50%; bottom:0; height:94%; width:auto; max-width:none; transform:translateX(-50%)}
.ds-moment__frame img.is-cover{inset:0; left:0; width:100%; height:100%; object-fit:cover; transform:none}
.ds-moment__cap{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-lg); color:var(--color-ink)}

/* Size table (on the page and in the drawer) */
.ds-table{border-radius:var(--radius-lg); overflow:hidden}
.ds-table th{background:var(--color-surface-alt); color:var(--color-ink)}
.ds-sizes-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5)}
@media (min-width:990px){ .ds-sizes-wrap{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ds-sizes-card{min-width:0; padding:var(--space-4); border-radius:var(--radius-xl); background:var(--color-surface); box-shadow:var(--shadow-bubble)}
@media (min-width:750px){ .ds-sizes-card{padding:var(--space-5)} }
.ds-sizes-card .ds-table-wrap{overflow-x:auto}
.ds-sizes-card .ds-table{width:100%; font-size:var(--text-sm)}
.ds-sizes-card h3{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-xl); margin-bottom:var(--space-2)}

/* Sticky bar + footer */
.ds-sticky{background:rgba(255,247,249,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.ds-footer{background:#4A1B33}
.ds-footer__base{border-top-color:rgba(255,239,244,.16)}
/* Password page: the logo is the hero, on the dream sky */
.template-password{background:var(--dream-sky) fixed}
.ds-logo--hero{justify-content:center}
.ds-logo--hero .hs-logo{width:min(340px,82vw)}
.ds-buybox .ds-trust__item .ds-puff{width:40px; height:40px}
.ds-sizes-card .ds-table th,.ds-sizes-card .ds-table td{padding:10px 8px}

/* Detail pins: the hoodie on a cloud, bubble numbers on each detail */
.ds-spots{display:grid; gap:var(--space-6); align-items:center}
@media (min-width:750px){ .ds-spots{grid-template-columns:1fr 1fr} }
.ds-spots__frame{position:relative; aspect-ratio:533/900; width:min(100%,360px); margin-inline:auto; border-radius:200px 200px var(--radius-xl) var(--radius-xl); background:var(--dream-sky); box-shadow:var(--shadow-bubble)}
.ds-spots__img{position:absolute; left:6%; top:4%; width:88%; height:auto; filter:drop-shadow(0 14px 18px rgba(166,58,102,.2))}
.ds-spots__pin,.ds-spots__num{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; flex:none;
  background:linear-gradient(180deg,#BC4A7B,var(--color-primary)); color:#fff; font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-sm);
  box-shadow:var(--shadow-puff),0 0 0 3px #fff,0 6px 12px -4px rgba(166,58,102,.6)}
.ds-spots__pin{position:absolute; transform:translate(-50%,-50%)}
.ds-spots__list{display:grid; gap:var(--space-3); list-style:none; margin:0; padding:0}
.ds-spots__item{display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:0 8px 20px -16px rgba(166,58,102,.55)}
.ds-spots__item b{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-lg); color:var(--color-ink)}
.ds-spots__item p{font-size:var(--text-sm); color:var(--color-text-muted); margin-top:2px}
@media (prefers-reduced-motion: no-preference){
  .ds-spots__pin{animation:hs-pop 2.6s var(--ease-spring) infinite; animation-delay:var(--d, 0s)}
  @keyframes hs-pop{0%,70%,100%{transform:translate(-50%,-50%) scale(1)} 80%{transform:translate(-50%,-50%) scale(1.18)}}
}

/* Size quiz */
.ds-quizlink{margin-left:auto; padding:4px 12px; border:0; border-radius:var(--radius-pill); background:var(--color-surface-alt); color:var(--color-primary); font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-sm); cursor:pointer}
.ds-option__head:has(.ds-quizlink){gap:var(--space-2)}
.ds-quiz__step{display:grid; gap:var(--space-4); text-align:center; padding-block:var(--space-2) var(--space-5)}
.ds-quiz__num{font-weight:var(--weight-bold); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary)}
.ds-quiz__q{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-2xl); line-height:1.2; color:var(--color-ink)}
.ds-quiz__opts{display:grid; gap:var(--space-2)}
.ds-quiz__opt{min-height:54px; padding:0 var(--space-5); border:2px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface);
  font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-lg); color:var(--color-ink); cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(242,206,218,.75); transition:transform var(--motion-fast) var(--ease),border-color var(--motion-base) var(--ease)}
.ds-quiz__opt:hover{border-color:var(--color-petal)}
.ds-quiz__opt:active{transform:scale(.96)}
.ds-quiz__heart{width:64px; height:64px; margin:0 auto}
.ds-quiz__size{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:3.5rem; line-height:1; color:var(--color-primary)}
.ds-quiz__again{justify-self:center; background:none; border:0; color:var(--color-primary); font-weight:var(--weight-bold); cursor:pointer}

/* Gift note */
.ds-gift{border-radius:var(--radius-lg); background:linear-gradient(180deg,#FFF6F9,#FDE8EF); box-shadow:inset 0 0 0 1.5px var(--color-border)}
.ds-gift > summary{display:flex; align-items:center; gap:var(--space-3); min-height:56px; padding:6px var(--space-4) 6px var(--space-2); list-style:none; cursor:pointer; font-weight:var(--weight-bold); font-size:var(--text-sm); color:var(--color-ink)}
.ds-gift > summary::-webkit-details-marker{display:none}
.ds-gift .ds-puff{width:40px; height:40px}
.ds-gift__plus{margin-left:auto; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fff; color:var(--color-primary); transition:transform var(--motion-base) var(--ease)}
.ds-gift__plus svg{width:14px; height:14px}
.ds-gift[open] .ds-gift__plus{transform:rotate(45deg)}
.ds-gift__body{display:grid; gap:var(--space-2); padding:0 var(--space-4) var(--space-4)}
.ds-gift .ds-textarea{border-radius:var(--radius-md); background:#fff}

/* Dream slide with a full generated scene (the photo already has the sky and clouds) */
.ds-dream--photo .ds-dream__sun,.ds-dream--photo .ds-dream__cloud{display:none}
.ds-dream.ds-dream--photo > .ds-dream__photo{left:0; top:0; bottom:auto; width:100%; height:100%; object-fit:cover; object-position:50% 18%; transform:none; filter:none}
@media (prefers-reduced-motion: no-preference){
  .ds-dream.ds-dream--photo > .ds-dream__photo{animation:none}
  @keyframes hs-kenburns{from{transform:scale(1)} to{transform:scale(1.06)}}
}
.ds-moment__frame img.is-cover{object-position:50% 20%}
.ds-dream--photo .ds-dream__bubble{top:auto; bottom:11%; right:4%; width:29%}
.ds-dream--photo .ds-dream__tag{top:auto; bottom:calc(11% - 14px); right:18.5%}
.ds-dream.ds-dream--photo > video.ds-dream__photo{animation:none}

/* =====================================================================
   9. ALIVE PASS (2026-11-06): living sky, rolling badges, soft focus reveal,
   edge-to-edge first photo. Motion only on non-human things.
   ===================================================================== */
html{background:#FFF3F7}
body{background:transparent}
.ds-sky{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:radial-gradient(90% 55% at 85% 0%,#FFF6D8 0%,rgba(255,246,216,0) 60%),linear-gradient(180deg,#FFE7EF 0%,#FFF5F8 45%,#FDE4ED 100%)}
.ds-sky__glow{position:absolute; left:-20%; top:30%; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 65%)}
.ds-sky__cloud{position:absolute; left:0; fill:#fff; opacity:.85; filter:drop-shadow(0 8px 18px rgba(214,120,160,.14)); will-change:transform}
.ds-sky__cloud--1{top:6%;  width:46vw; max-width:420px; animation:hs-sky 95s linear infinite; animation-delay:-10s}
.ds-sky__cloud--2{top:24%; width:30vw; max-width:280px; opacity:.7; animation:hs-sky 120s linear infinite; animation-delay:-70s}
.ds-sky__cloud--3{top:43%; width:58vw; max-width:520px; opacity:.6; animation:hs-sky 140s linear infinite; animation-delay:-35s}
.ds-sky__cloud--4{top:62%; width:36vw; max-width:340px; animation:hs-sky 105s linear infinite; animation-delay:-90s}
.ds-sky__cloud--5{top:78%; width:52vw; max-width:480px; opacity:.75; animation:hs-sky 130s linear infinite; animation-delay:-55s}
.ds-sky__cloud--6{top:90%; width:28vw; max-width:260px; opacity:.65; animation:hs-sky 110s linear infinite; animation-delay:-20s}
@keyframes hs-sky{from{transform:translateX(-70vw)} to{transform:translateX(130vw)}}
@media (prefers-reduced-motion: reduce){ .ds-sky__cloud{animation:none; transform:translateX(20vw)} }
/* let the sky show through the page */
.ds-band--alt{background-color:rgba(252,228,235,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.ds-band--alt::before{background:radial-gradient(circle at 26px 30px,rgba(252,228,235,.62) 25px,transparent 26px) 0 0/52px 30px repeat-x}
.ds-band--white{background:rgba(255,255,255,.66)}
.ds-header{background:rgba(255,247,250,.72)}

/* Rolling badge ribbon */
.ds-badges{overflow:hidden; padding-block:var(--space-5); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ds-badges__track{display:flex; width:max-content; animation:hs-ribbon 38s linear infinite}
.ds-badges:hover .ds-badges__track{animation-play-state:paused}
.ds-badges__set{display:flex; gap:var(--space-7); padding-right:var(--space-7)}
.ds-badge{display:inline-flex; align-items:center; gap:6px; color:var(--color-primary)}
.ds-badge__laurel{width:16px; height:34px; flex:none}
.ds-badge__flip{display:inline-flex; transform:scaleX(-1)}
.ds-badge__text{display:grid; text-align:center; line-height:1.15}
.ds-badge__text b{font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-base); color:var(--color-ink); white-space:nowrap}
.ds-badge__text small{font-size:11px; font-weight:var(--weight-bold); color:var(--color-text-muted); white-space:nowrap}
@keyframes hs-ribbon{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ds-badges__track{animation:none} }

/* Soft focus reveal: things drift up out of a blur as you scroll to them */
[data-reveal]{opacity:0; filter:blur(12px); transform:translateY(18px) scale(.985); transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1; filter:none; transform:none}
.ds-moment__frame img.is-cover,.ds-spots__img{transition:transform 1.6s var(--ease)}
[data-reveal]:not(.is-in) .ds-moment__frame img.is-cover{transform:scale(1.08)}

/* Edge-to-edge gallery on phones: every slide full width, all aligned */
@media (max-width:749px){
  .ds-pdp > .ds-gallery .ds-gallery__track{gap:0; padding-inline:0; scroll-padding-inline:0; margin-top:calc(var(--space-4) * -1)}
  .ds-pdp > .ds-gallery .ds-gallery__slide{flex:0 0 100%; scroll-snap-align:start}
  .ds-pdp > .ds-gallery .ds-media{border-radius:0 0 var(--radius-xl) var(--radius-xl)}
}
}

/* Fabric and care strip (from The Oodie) */
.ds-specstrip{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); list-style:none; margin:0; padding:0}
.ds-specstrip li{display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-pill); background:rgba(255,255,255,.8); box-shadow:inset 0 0 0 1.5px var(--color-border); font-size:var(--text-sm); font-weight:var(--weight-bold)}
.ds-specstrip .ds-puff{width:30px; height:30px}
/* Comparison table, pink world */
.ds-compare{border-radius:var(--radius-xl); overflow:hidden; background:rgba(255,255,255,.85); box-shadow:var(--shadow-bubble)}
.ds-compare th.is-us,.ds-compare td.is-us{background:var(--color-primary-tint); color:var(--color-primary)}

/* Detail pins are buttons: tap one to see what it is */
.ds-spots__pin{border:0; padding:0; cursor:pointer; z-index:2}
.ds-spots__pin.is-open{background:linear-gradient(180deg,#D86A98,#B8457A); z-index:3}
.ds-spots__tip{position:absolute; left:50%; bottom:calc(100% + 10px); width:max-content; max-width:190px; padding:8px 12px; border-radius:var(--radius-md);
  background:#fff; color:var(--color-ink); box-shadow:0 10px 24px -10px rgba(166,58,102,.55); font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:1.35; text-align:left;
  opacity:0; pointer-events:none; transform:translate(-50%,6px); transition:opacity var(--motion-base) var(--ease),transform var(--motion-base) var(--ease)}
.ds-spots__tip b{display:block; font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-primary)}
.ds-spots__pin.is-open .ds-spots__tip{opacity:1; transform:translate(-50%,0)}
.ds-spots__pin--left .ds-spots__tip{left:0; transform:translate(-14px,6px)}
.ds-spots__pin--left.is-open .ds-spots__tip{transform:translate(-14px,0)}
.ds-spots__pin--right .ds-spots__tip{left:auto; right:0; transform:translate(14px,6px)}
.ds-spots__pin--right.is-open .ds-spots__tip{transform:translate(14px,0)}
.ds-spots__item{transition:box-shadow var(--motion-base) var(--ease),transform var(--motion-base) var(--ease)}
.ds-spots__item.is-hot{box-shadow:0 0 0 2.5px var(--color-petal),0 10px 22px -14px rgba(166,58,102,.6); transform:scale(1.02)}
.ds-spots__pin.is-open{animation:none}

/* ===================== 10. STICKER PASS =====================
   Everything you can tap looks like a puffy little sticker:
   white die-cut edge, glossy top shine, soft 3D bottom, squish on press.
   Same places, same one-tap jobs, nothing extra to click through. */
:root{
  --sticker-edge:0 0 0 3px #fff;
  --sticker-drop:0 6px 14px -8px rgba(166,58,102,.55);
  --sticker-3d:inset 0 -3px 0 rgba(242,206,218,.9);
}
@keyframes ds-squish{0%{transform:scale(1)}40%{transform:scale(.9,.86)}70%{transform:scale(1.05,1.04)}100%{transform:scale(1)}}

/* Header + drawer icon buttons: little round stickers */
.ds-iconbtn{width:44px; height:44px; background:radial-gradient(120% 100% at 35% 20%,#fff 0%,#FFF3F7 55%,#FBE1EA 100%);
  color:var(--color-primary); box-shadow:var(--sticker-edge),var(--sticker-3d),var(--sticker-drop);
  transition:transform var(--motion-fast) var(--ease),box-shadow var(--motion-base) var(--ease); -webkit-tap-highlight-color:transparent}
.ds-iconbtn::after{content:""; position:absolute; left:11px; top:7px; width:12px; height:6px; border-radius:50%; background:rgba(255,255,255,.95); transform:rotate(-28deg); pointer-events:none}
.ds-iconbtn:hover{background:radial-gradient(120% 100% at 35% 20%,#fff 0%,#FFEAF1 55%,#F8D3E0 100%)}
.ds-iconbtn:active{animation:ds-squish .32s var(--ease)}
.ds-iconbtn svg{width:22px; height:22px; stroke-width:2.4}
.ds-header__left{margin-left:0}
.ds-header__right{margin-right:0}
.ds-count{background:linear-gradient(180deg,#D86A98,#A63A66); color:#fff; box-shadow:0 0 0 2px #fff,0 3px 6px -2px rgba(166,58,102,.6)}

/* Main buttons: glossy candy stickers */
.ds-btn{position:relative; isolation:isolate}
.ds-btn--primary{box-shadow:0 0 0 3px #fff,var(--shadow-puff),0 10px 22px -10px rgba(166,58,102,.75)}
.ds-btn--primary::before{content:""; position:absolute; z-index:-1; left:14%; right:14%; top:4px; height:38%; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0)); pointer-events:none}
.ds-btn--secondary,.ds-btn--light{background:radial-gradient(120% 120% at 40% 10%,#fff 0%,#FFF3F7 70%,#FBE1EA 100%);
  border:2px solid var(--color-petal); color:var(--color-primary); box-shadow:var(--sticker-3d),var(--sticker-drop)}
.ds-btn--secondary:hover,.ds-btn--light:hover{background:var(--color-primary-tint); color:var(--color-primary)}
.ds-btn:active{animation:ds-squish .32s var(--ease)}
.ds-btn--ghost{color:var(--color-primary)}

/* Size pills: stickers that pop when picked */
.ds-size{border:2px solid #fff; background:radial-gradient(120% 120% at 40% 10%,#fff 0%,#FFF5F8 70%,#FBE4EC 100%);
  box-shadow:0 0 0 1.5px rgba(239,143,176,.55),var(--sticker-3d),var(--sticker-drop)}
.ds-size:hover{border-color:#fff; box-shadow:0 0 0 2px var(--color-petal),var(--sticker-3d),var(--sticker-drop)}
.ds-sr-input:checked + .ds-size{border-color:#fff; box-shadow:0 0 0 2px var(--color-primary),var(--shadow-puff),0 8px 16px -8px rgba(166,58,102,.65); animation:ds-squish .32s var(--ease)}

/* Color photo bubbles: white sticker ring */
.ds-swatch__img{box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(239,143,176,.5),var(--sticker-drop)}
.ds-sr-input:checked + .ds-swatch--photo .ds-swatch__img{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--color-primary),var(--sticker-drop); animation:ds-squish .32s var(--ease)}

/* Quantity +/- : tiny round stickers */
.ds-qty{border:0; background:transparent; gap:4px; height:auto}
.ds-qty button{width:34px; height:34px; background:radial-gradient(120% 100% at 35% 20%,#fff,#FBE1EA); color:var(--color-primary); box-shadow:var(--sticker-edge),var(--sticker-3d),var(--sticker-drop)}
.ds-qty button:active{animation:ds-squish .3s var(--ease)}

/* FAQ / detail toggles: the + is a little candy sticker */
.ds-acc > summary .ds-acc__icon{background:radial-gradient(120% 100% at 35% 20%,#fff,#FBE1EA); box-shadow:0 0 0 2.5px #fff,var(--sticker-3d),0 4px 8px -4px rgba(166,58,102,.5)}
.ds-acc[open] > summary .ds-acc__icon{background:linear-gradient(180deg,#D86A98,#A63A66); color:#fff}

/* Phone menu: each link is a soft bubble card with a puffy heart, one tap away */
.ds-menu{gap:var(--space-2)}
.ds-menu a{min-height:58px; padding:0 var(--space-3) 0 var(--space-4); border:0; border-radius:var(--radius-pill);
  background:radial-gradient(120% 140% at 30% 0%,#fff 0%,#FFF4F8 70%,#FCE6EE 100%); box-shadow:0 0 0 2px #fff,var(--sticker-3d),var(--sticker-drop);
  font-size:var(--text-lg); color:var(--color-primary); transition:transform var(--motion-fast) var(--ease)}
.ds-menu a::before{content:""; flex:none; width:18px; height:16px; margin-right:12px;
  background:radial-gradient(circle at 30% 30%,#fff 0 14%,transparent 16%),linear-gradient(180deg,#F290B4,#B8457A);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.2C6.3 17.4 1.2 13.4 1.2 7.6 1.2 4 3.9 1.3 7.3 1.3c2 0 3.7 1 4.7 2.6 1-1.6 2.7-2.6 4.7-2.6 3.4 0 6.1 2.7 6.1 6.3 0 5.8-5.1 9.8-10.8 13.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.2C6.3 17.4 1.2 13.4 1.2 7.6 1.2 4 3.9 1.3 7.3 1.3c2 0 3.7 1 4.7 2.6 1-1.6 2.7-2.6 4.7-2.6 3.4 0 6.1 2.7 6.1 6.3 0 5.8-5.1 9.8-10.8 13.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.ds-menu a{justify-content:flex-start}
.ds-menu a svg{margin-left:auto; width:28px; height:28px; padding:7px; border-radius:50%; color:var(--color-primary); background:#fff; box-shadow:0 2px 6px -3px rgba(166,58,102,.5)}
.ds-menu a:active{animation:ds-squish .32s var(--ease)}
.ds-drawer{border-radius:0 var(--radius-xl) var(--radius-xl) 0; background:linear-gradient(180deg,#FFF9FB 0%,#FFF1F6 100%)}
.ds-drawer:not(.ds-drawer--left){border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
.ds-drawer__head,.ds-drawer__foot{border-color:rgba(239,143,176,.25)}

/* Gallery dots: little candy pills */
.ds-dots span{width:8px; height:8px; background:#F4C3D4; box-shadow:0 0 0 1.5px #fff}
.ds-dots span.is-active{width:22px; background:linear-gradient(180deg,#D86A98,#A63A66)}

/* Size guide / quiz text links become tiny pill stickers */
.ds-sizeguide-link{text-decoration:none; padding:7px 14px; border-radius:999px; background:radial-gradient(120% 120% at 40% 10%,#fff,#FCE6EE);
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(239,143,176,.45),0 4px 10px -6px rgba(166,58,102,.5)}
.ds-sizeguide-link:active{animation:ds-squish .3s var(--ease)}

@media (prefers-reduced-motion: reduce){
  .ds-iconbtn:active,.ds-btn:active,.ds-size,.ds-menu a:active,.ds-qty button:active,.ds-sizeguide-link:active,
  .ds-sr-input:checked + .ds-size,.ds-sr-input:checked + .ds-swatch--photo .ds-swatch__img{animation:none}
}
/* sticker pass: small follow-ups */
.ds-swatch--photo{gap:11px}
.ds-menu a:first-child{background:linear-gradient(180deg,#C9548A 0%,var(--color-primary) 55%,#93305B 100%); color:#fff; box-shadow:0 0 0 3px #fff,var(--shadow-puff),0 10px 22px -10px rgba(166,58,102,.75)}
.ds-menu a:first-child::before{background:#fff}
.ds-drawer .ds-trust--inline{gap:var(--space-2)}
.ds-drawer .ds-trust__item{padding:8px 14px; border-radius:999px; background:#fff; color:var(--color-primary); font-weight:var(--weight-bold); font-size:var(--text-sm); box-shadow:0 0 0 1.5px rgba(239,143,176,.4),0 4px 10px -6px rgba(166,58,102,.45)}
.ds-drawer .ds-trust__item svg{color:var(--color-primary)}

/* ===================== 11. PRODUCT DREAM HERO =====================
   First screen: the real hoodie (supplier photo, cut out) floating in a
   fluffy cartoon sky. No people up top; people live lower on the page. */
.ds-dream--product{background:
  radial-gradient(70% 45% at 50% 46%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%),
  radial-gradient(60% 50% at 88% 6%,#FFF1C9 0%,rgba(255,241,201,0) 65%),
  linear-gradient(180deg,#FFE9F1 0%,#FDDDE8 55%,#F9D2E0 100%)}
.ds-dream--product .ds-dream__sun{right:-10%; top:-12%; width:52%}
.ds-dream__glow{position:absolute; z-index:1; left:50%; bottom:9%; width:62%; height:12%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side,rgba(166,58,102,.28),rgba(166,58,102,0))}
.ds-dream__hero{position:absolute !important; z-index:1; left:50%; top:5%; height:84%; aspect-ratio:887/1500; transform:translateX(-50%); background:none !important}
.ds-dream__hero img{object-fit:contain !important; filter:drop-shadow(0 18px 24px rgba(166,58,102,.22))}
.ds-dream__hero img.is-media{object-fit:cover !important; border-radius:var(--radius-xl)}
.ds-dream--product > .ds-dream__cloud--a{width:62%; left:-14%; bottom:-10%; z-index:3}
.ds-dream--product > .ds-dream__cloud--b{width:66%; right:-18%; bottom:-14%; z-index:3}
.ds-dream--product > .ds-dream__cloud--e{position:absolute; width:44%; left:30%; bottom:-17%; z-index:4; height:auto; fill:url(#hsPuffCloud)}
.ds-dream--product > .ds-dream__cloud--c{width:30%; left:3%; top:9%; opacity:.95}
.ds-dream--product > .ds-dream__cloud--d{position:absolute; z-index:0; width:22%; right:6%; top:30%; height:auto; fill:url(#hsPuffCloud); opacity:.9}
.ds-dream--product .ds-dream__float{z-index:2; bottom:16%}
.ds-dream--product .ds-dream__tag{top:auto; right:auto; left:6%; bottom:auto; top:6%; transform:none; z-index:5}
@media (prefers-reduced-motion: no-preference){
  .ds-dream__hero{animation:hs-hover 6s ease-in-out infinite}
  .ds-dream__glow{animation:hs-glow 6s ease-in-out infinite}
  .ds-dream--product > .ds-dream__cloud--d{animation:hs-drift 19s ease-in-out infinite alternate-reverse}
  .ds-dream--product > .ds-dream__cloud--e{animation:hs-drift 16s ease-in-out infinite alternate}
}
@keyframes hs-hover{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-2.2%)}}
@keyframes hs-glow{0%,100%{transform:translateX(-50%) scale(1); opacity:1}50%{transform:translateX(-50%) scale(.9); opacity:.7}}

/* Color lineup slide: all colors side by side on a cloud */
.ds-lineup{background:linear-gradient(180deg,#FFF3F7 0%,#FCE4EB 100%)}
.ds-lineup__row{position:absolute; z-index:1; left:0; right:0; top:15%; bottom:12%; display:flex; justify-content:center; align-items:flex-end}
.ds-lineup__row img{height:86%; width:auto; margin-inline:-7%; filter:drop-shadow(0 12px 16px rgba(166,58,102,.2)); position:relative; z-index:calc(4 - var(--i))}
.ds-lineup__row img:nth-child(odd){height:78%}
.ds-lineup .ds-dream__cloud--a{z-index:3; width:62%; left:-14%; bottom:-14%}
.ds-lineup .ds-dream__cloud--b{z-index:3; width:66%; right:-18%; bottom:-18%}
.ds-lineup__label{position:absolute; z-index:4; left:50%; top:5%; transform:translateX(-50%); padding:6px 14px; border-radius:999px; background:#fff; color:var(--color-primary);
  font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-sm); box-shadow:0 0 0 2px #fff,0 6px 14px -8px rgba(166,58,102,.6); white-space:nowrap}
.ds-dream--product .ds-dream__tag{left:auto; right:6%}

/* Nov 6 fixes: no gloss oval on the color photos; cloud tops never clipped */
.ds-swatch__img::after{display:none}
svg.ds-dream__cloud,svg.ds-sky__cloud,svg[viewBox="0 0 120 64"]{overflow:visible}
.ds-lineup__row img{height:84%}
.ds-lineup__row img:nth-child(odd){height:76%}


/* ===================== 12. CANDY DREAM PASS =====================
   A painted Victorian candy dream: watercolor paper, a painted candy-world
   backdrop, candy ornaments, frosting drips, cameo portraits and a candy-shore
   footer. Same layout and same one-tap buying underneath. */
:root{
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .27 0 0 0 0 .42 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --candy-band:#FCE4EB; --candy-white:#FFFAFC;
  --orn-bubbles:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22%3E%3Cdefs%3E%3CradialGradient id=%22hsPuffBubble%22 cx=%2240%25%22 cy=%2235%25%22 r=%2265%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%22.95%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23FFF0F6%22 stop-opacity=%22.7%22/%3E%3Cstop offset=%22.86%22 stop-color=%22%23F6CFE0%22 stop-opacity=%22.85%22/%3E%3Cstop offset=%221%22 stop-color=%22%23CFA9E6%22 stop-opacity=%22.95%22/%3E%3C/radialGradient%3E%3Cfilter id=%22hsPuffShine%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3Cfilter id=%22hsPuffDrop%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22170%25%22%3E%3CfeDropShadow dx=%220%22 dy=%225%22 stdDeviation=%224.5%22 flood-color=%22%23B8487A%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22matrix(-1 0 0 1 240 0)%22%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(92 0) scale(.7)%22%3E%3Cg filter=%22url(%23hsPuffDrop)%22%3E%3Ccircle cx=%2231%22 cy=%2245%22 r=%2219%22 fill=%22url(%23hsPuffBubble)%22/%3E%3Ccircle cx=%2256%22 cy=%2229%22 r=%2213%22 fill=%22url(%23hsPuffBubble)%22/%3E%3Ccircle cx=%2258%22 cy=%2257%22 r=%228.5%22 fill=%22url(%23hsPuffBubble)%22/%3E%3C/g%3E%3Cellipse cx=%2224%22 cy=%2237%22 rx=%226%22 ry=%223.4%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-35 24 37)%22/%3E%3Cellipse cx=%2251%22 cy=%2224%22 rx=%224%22 ry=%222.4%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-35 51 24)%22/%3E%3Ccircle cx=%2255.5%22 cy=%2254%22 r=%222%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E");
  --orn-lollipop:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22%3E%3Cdefs%3E%3ClinearGradient id=%22hsPuffCream%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFBF2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F4E2C2%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22hsPuffPink%22 cx=%2234%25%22 cy=%2228%25%22 r=%2278%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE6EF%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23F7A9C3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E4739C%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22hsPuffHeart%22 cx=%2234%25%22 cy=%2226%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD9E6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23F28DB2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D9568A%22/%3E%3C/radialGradient%3E%3Cfilter id=%22hsPuffShine%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3Cfilter id=%22hsPuffDrop%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22170%25%22%3E%3CfeDropShadow dx=%220%22 dy=%225%22 stdDeviation=%224.5%22 flood-color=%22%23B8487A%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22matrix(-1 0 0 1 240 0)%22%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(92 0) scale(.7)%22%3E%3Cg filter=%22url(%23hsPuffDrop)%22%3E%3Crect x=%2237%22 y=%2244%22 width=%226%22 height=%2232%22 rx=%223%22 fill=%22url(%23hsPuffCream)%22/%3E%3Ccircle cx=%2240%22 cy=%2230%22 r=%2224%22 fill=%22url(%23hsPuffPink)%22/%3E%3Cpath d=%22M40 30a4 4 0 0 1 4 4 8 8 0 0 1-8 8 12 12 0 0 1-12-12 16 16 0 0 1 16-16 20 20 0 0 1 20 20%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%225%22 stroke-linecap=%22round%22 opacity=%22.92%22/%3E%3Cpath d=%22M33 54c-5-4-10-2-9 2 1 3 6 3 9-2zm14 0c5-4 10-2 9 2-1 3-6 3-9-2z%22 fill=%22url(%23hsPuffHeart)%22/%3E%3Ccircle cx=%2240%22 cy=%2254%22 r=%223.2%22 fill=%22%23E4739C%22/%3E%3C/g%3E%3Cellipse cx=%2229%22 cy=%2217%22 rx=%226%22 ry=%223%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-30 29 17)%22/%3E%3C/g%3E%3C/svg%3E");
  --orn-candy:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22%3E%3Cdefs%3E%3CradialGradient id=%22hsPuffPink%22 cx=%2234%25%22 cy=%2228%25%22 r=%2278%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE6EF%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23F7A9C3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E4739C%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22hsPuffHeart%22 cx=%2234%25%22 cy=%2226%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD9E6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23F28DB2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D9568A%22/%3E%3C/radialGradient%3E%3Cfilter id=%22hsPuffShine%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3Cfilter id=%22hsPuffDrop%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22170%25%22%3E%3CfeDropShadow dx=%220%22 dy=%225%22 stdDeviation=%224.5%22 flood-color=%22%23B8487A%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22matrix(-1 0 0 1 240 0)%22%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(92 0) scale(.7)%22%3E%3Cg filter=%22url(%23hsPuffDrop)%22%3E%3Cpath d=%22M22 40 6 26c3 9 3 19 0 28z%22 fill=%22url(%23hsPuffPink)%22/%3E%3Cpath d=%22M58 40 74 26c-3 9-3 19 0 28z%22 fill=%22url(%23hsPuffPink)%22/%3E%3Cpath d=%22M14 33l8 7-8 7M66 33l-8 7 8 7%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.6%22 opacity=%22.7%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2240%22 cy=%2240%22 rx=%2220%22 ry=%2216%22 fill=%22url(%23hsPuffHeart)%22/%3E%3C/g%3E%3CclipPath id=%22hsBonClip%22%3E%3Cellipse cx=%2240%22 cy=%2240%22 rx=%2220%22 ry=%2216%22/%3E%3C/clipPath%3E%3Cg clip-path=%22url(%23hsBonClip)%22 stroke=%22%23fff%22 stroke-width=%224.5%22 opacity=%22.8%22%3E%3Cpath d=%22M24 58 44 20M36 62 56 24M12 52 32 16%22/%3E%3C/g%3E%3Cellipse cx=%2231%22 cy=%2231%22 rx=%226%22 ry=%223%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-25 31 31)%22/%3E%3C/g%3E%3C/svg%3E");
  --orn-macaron:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22%3E%3Cdefs%3E%3CradialGradient id=%22hsPuffMint%22 cx=%2234%25%22 cy=%2228%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23F1FFF8%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23BFEBD7%22/%3E%3Cstop offset=%221%22 stop-color=%22%238CCFB4%22/%3E%3C/radialGradient%3E%3ClinearGradient id=%22hsPuffCream%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFBF2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F4E2C2%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22hsPuffPink%22 cx=%2234%25%22 cy=%2228%25%22 r=%2278%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE6EF%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23F7A9C3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E4739C%22/%3E%3C/radialGradient%3E%3Cfilter id=%22hsPuffShine%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3Cfilter id=%22hsPuffDrop%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22170%25%22%3E%3CfeDropShadow dx=%220%22 dy=%225%22 stdDeviation=%224.5%22 flood-color=%22%23B8487A%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22matrix(-1 0 0 1 240 0)%22%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(92 0) scale(.7)%22%3E%3Cg filter=%22url(%23hsPuffDrop)%22%3E%3Cpath d=%22M16 47c0-5 11-8 24-8s24 3 24 8v3c0 7-11 11-24 11s-24-4-24-11z%22 fill=%22url(%23hsPuffMint)%22/%3E%3Cpath d=%22M17 40h46v6c-2 2-4 0-6 2s-4 0-6 2-4 0-6 2-4 0-6 2-4 0-6-2-4 0-6-2-4 0-6-2-4 0-4-2z%22 fill=%22url(%23hsPuffCream)%22/%3E%3Cpath d=%22M16 34c0-9 11-14 24-14s24 5 24 14v3c0 4-11 7-24 7s-24-3-24-7z%22 fill=%22url(%23hsPuffMint)%22/%3E%3Cpath d=%22M18 41c3 1.6 5 0 7 1.6s4 0 6 1.6 4 0 6 1.6 4 0 6-1.6 4 0 6-1.6 4 0 6-1.6 4 0 5-1.6%22 fill=%22none%22 stroke=%22%239FD8BF%22 stroke-width=%222.2%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cellipse cx=%2230%22 cy=%2227%22 rx=%228%22 ry=%223%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-12 30 27)%22/%3E%3C/g%3E%3C/svg%3E");
  --orn-gumdrop:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22%3E%3Cdefs%3E%3CradialGradient id=%22hsPuffLilac%22 cx=%2234%25%22 cy=%2228%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FBF4FF%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23DCC6F0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23B99AD8%22/%3E%3C/radialGradient%3E%3Cfilter id=%22hsPuffShine%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3Cfilter id=%22hsPuffDrop%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22170%25%22%3E%3CfeDropShadow dx=%220%22 dy=%225%22 stdDeviation=%224.5%22 flood-color=%22%23B8487A%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22matrix(-1 0 0 1 240 0)%22%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(92 0) scale(.7)%22%3E%3Cg filter=%22url(%23hsPuffDrop)%22%3E%3Cpath d=%22M16 60c0-24 9-40 24-40s24 16 24 40c0 3-11 5-24 5s-24-2-24-5z%22 fill=%22url(%23hsPuffLilac)%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22 opacity=%22.85%22%3E%3Ccircle cx=%2230%22 cy=%2238%22 r=%221.6%22/%3E%3Ccircle cx=%2240%22 cy=%2231%22 r=%221.4%22/%3E%3Ccircle cx=%2250%22 cy=%2240%22 r=%221.6%22/%3E%3Ccircle cx=%2235%22 cy=%2250%22 r=%221.5%22/%3E%3Ccircle cx=%2247%22 cy=%2254%22 r=%221.4%22/%3E%3Ccircle cx=%2256%22 cy=%2250%22 r=%221.2%22/%3E%3Ccircle cx=%2225%22 cy=%2254%22 r=%221.3%22/%3E%3Ccircle cx=%2242%22 cy=%2244%22 r=%221.2%22/%3E%3C/g%3E%3Cellipse cx=%2231%22 cy=%2230%22 rx=%226%22 ry=%223.2%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-40 31 30)%22/%3E%3C/g%3E%3C/svg%3E");
  --orn-peppermint:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22%3E%3Cdefs%3E%3CradialGradient id=%22hsPuffHeart%22 cx=%2234%25%22 cy=%2226%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFD9E6%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23F28DB2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D9568A%22/%3E%3C/radialGradient%3E%3Cfilter id=%22hsPuffShine%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E%3CfeGaussianBlur stdDeviation=%221.6%22/%3E%3C/filter%3E%3Cfilter id=%22hsPuffDrop%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22170%25%22%3E%3CfeDropShadow dx=%220%22 dy=%225%22 stdDeviation=%224.5%22 flood-color=%22%23B8487A%22 flood-opacity=%22.28%22/%3E%3C/filter%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3Cg transform=%22matrix(-1 0 0 1 240 0)%22%3E%3Cg fill=%22none%22 stroke=%22%23E596B5%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M88 38C76 40 68 30 56 30 44 30 40 42 48 46c6 3 12-4 7-8%22/%3E%3Cpath d=%22M71 33c-4-9-12-13-22-11%22/%3E%3C/g%3E%3Cg fill=%22%23F0A9C4%22%3E%3Ccircle cx=%2236%22 cy=%2237%22 r=%222.6%22/%3E%3Ccircle cx=%2226%22 cy=%2238%22 r=%222.1%22/%3E%3Ccircle cx=%2217%22 cy=%2238.6%22 r=%221.6%22/%3E%3Ccircle cx=%229.5%22 cy=%2239%22 r=%221.2%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22translate(92 0) scale(.7)%22%3E%3Cg filter=%22url(%23hsPuffDrop)%22%3E%3Ccircle cx=%2240%22 cy=%2240%22 r=%2224%22 fill=%22%23fff%22/%3E%3Cg fill=%22url(%23hsPuffHeart)%22%3E%3Cpath d=%22M40 40 40 16a24 24 0 0 1 12 3.2z%22/%3E%3Cpath d=%22M40 40 60.8 28a24 24 0 0 1 3.2 12z%22/%3E%3Cpath d=%22M40 40 60.8 52a24 24 0 0 1-8.8 8.8z%22/%3E%3Cpath d=%22M40 40 40 64a24 24 0 0 1-12-3.2z%22/%3E%3Cpath d=%22M40 40 19.2 52a24 24 0 0 1-3.2-12z%22/%3E%3Cpath d=%22M40 40 19.2 28a24 24 0 0 1 8.8-8.8z%22/%3E%3C/g%3E%3Ccircle cx=%2240%22 cy=%2240%22 r=%2224%22 fill=%22none%22 stroke=%22%23F7C9D9%22 stroke-width=%222%22/%3E%3C/g%3E%3Cellipse cx=%2231%22 cy=%2227%22 rx=%227%22 ry=%223.4%22 fill=%22%23fff%22 opacity=%22.85%22 filter=%22url(%23hsPuffShine)%22 transform=%22rotate(-35 31 27)%22/%3E%3C/g%3E%3C/svg%3E");
  --section-pad:var(--space-8); --header-h:66px;
}
@media (min-width:750px){ :root{ --header-h:76px } }
@media (min-width:990px){ :root{ --section-pad:var(--space-12); --header-h:84px } }

/* Bigger marshmallow logo */
.ds-logo .hs-logo{width:196px}
@media (min-width:990px){ .ds-logo .hs-logo{width:236px} }
.ds-drawer .ds-logo .hs-logo{width:158px}
.ds-footer .ds-logo .hs-logo{width:220px}

/* Watercolor paper grain on every painted surface */
.ds-sky::after{content:""; position:absolute; inset:0; background:var(--paper)}

/* Candy-stripe ribbon announcement */
.ds-announce{background:repeating-linear-gradient(-45deg,#F6B8CB 0 12px,#F9C9D8 12px 24px); color:var(--color-ink)}

/* The painted candy world behind the real hoodie (first screen + color lineup) */
.ds-dream--painted{background:#F9D7E2}
.ds-dream__paint{position:absolute; z-index:0; inset:0; width:100%; height:100%; max-width:none; object-fit:cover}
.ds-lineup .ds-dream__paint{transform:scaleX(-1)}
.ds-dream--painted > .ds-dream__sun,.ds-dream--painted > .ds-dream__cloud{display:none}
.ds-dream__halo{position:absolute; z-index:0; left:50%; top:47%; width:88%; height:82%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 45%,rgba(255,255,255,0) 100%)}
.ds-lineup .ds-dream__halo{top:58%; width:112%; height:74%}

/* Tighter rhythm between sections */
.ds-section-head{margin-bottom:var(--space-6)}

/* Candy ornaments above every heading (a different sweet per section) */
.ds-section-head--center .ds-h2::before{width:190px; height:50px; margin:0 auto var(--space-1); background:var(--orn-lollipop) center/contain no-repeat}
.ds-section:has(.ds-benefits) .ds-section-head{margin-inline:auto; text-align:center}
.ds-section:has(.ds-benefits) .ds-section-head .ds-h2::before{content:""; display:block; width:190px; height:50px; margin:0 auto var(--space-1); background:var(--orn-candy) center/contain no-repeat}
.ds-section:has(.ds-spots) .ds-h2::before{background-image:var(--orn-lollipop)}
.ds-section:has(.ds-compare) .ds-h2::before{background-image:var(--orn-peppermint)}
.ds-section:has(.ds-moments) .ds-h2::before{background-image:var(--orn-macaron)}
.ds-section:has(.ds-sizes-wrap) .ds-h2::before{background-image:var(--orn-gumdrop)}
.ds-band--white:has(.ds-acc) .ds-h2::before{background-image:var(--orn-bubbles)}

/* Frosting layers: pink bands with marshmallow scallops on top and icing drips below */
.ds-band--alt{z-index:1; background-color:var(--candy-band); background-image:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none}
.ds-band--alt::before{background:radial-gradient(circle at 26px 30px,var(--candy-band) 25px,transparent 26px) 0 0/52px 30px repeat-x}
.ds-band--alt::after{content:""; position:absolute; left:0; right:0; bottom:-43px; height:44px; pointer-events:none; background-color:var(--candy-band);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 44%22%3E%3Cpath d=%22M0 0H160V10L139.5 10C134.5 10 134.5 12 134.5 16V29.5A6.5 6.5 0 0 1 121.5 29.5V16C121.5 12 121.5 10 116.5 10L106.5 10C101.5 10 101.5 12 101.5 16V20.5A5.5 5.5 0 0 1 90.5 20.5V16C90.5 12 90.5 10 85.5 10L68.0 10C63.0 10 63.0 12 63.0 16V35.0A7.0 7.0 0 0 1 49.0 35.0V16C49.0 12 49.0 10 44.0 10L29.0 10C24.0 10 24.0 12 24.0 16V26.0A6.0 6.0 0 0 1 12.0 26.0V16C12.0 12 12.0 10 7.0 10L0 10Z%22 fill=%22%23000%22/%3E%3C/svg%3E") 0 0/160px 44px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 44%22%3E%3Cpath d=%22M0 0H160V10L139.5 10C134.5 10 134.5 12 134.5 16V29.5A6.5 6.5 0 0 1 121.5 29.5V16C121.5 12 121.5 10 116.5 10L106.5 10C101.5 10 101.5 12 101.5 16V20.5A5.5 5.5 0 0 1 90.5 20.5V16C90.5 12 90.5 10 85.5 10L68.0 10C63.0 10 63.0 12 63.0 16V35.0A7.0 7.0 0 0 1 49.0 35.0V16C49.0 12 49.0 10 44.0 10L29.0 10C24.0 10 24.0 12 24.0 16V26.0A6.0 6.0 0 0 1 12.0 26.0V16C12.0 12 12.0 10 7.0 10L0 10Z%22 fill=%22%23000%22/%3E%3C/svg%3E") 0 0/160px 44px repeat-x}
.ds-band--alt + .ds-section,.shopify-section:has(> .ds-band--alt) + .shopify-section > .ds-section{padding-top:calc(var(--section-pad) + 30px)}
.ds-band--white{background-color:var(--candy-white); background-image:var(--paper)}

/* Benefit cards: each icon sits in its own candy bubble */
@media (max-width:749px){
  .ds-benefit{grid-template-columns:64px minmax(0,1fr); align-items:center; column-gap:var(--space-4)}
}
.ds-benefit__icon{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0%,#FCE4EB 78%); box-shadow:0 0 0 3px #fff,0 8px 16px -10px rgba(166,58,102,.55)}
.ds-benefit__icon .ds-puff{width:44px; height:44px}
@media (max-width:749px){ .ds-benefit__icon{grid-row:span 2} }

/* Cameo portraits: oval photos in piped-icing pearls with a ribbon bow */
.ds-cameo{position:relative; padding:20px 10px 8px}
.ds-cameo .ds-moment__frame{border-radius:50%; box-shadow:0 18px 34px -20px rgba(166,58,102,.6)}
.ds-cameo__ring{position:absolute; left:10px; top:20px; width:calc(100% - 20px); height:calc(100% - 28px); overflow:visible; pointer-events:none; filter:drop-shadow(0 4px 6px rgba(166,58,102,.22))}
.ds-moment__cap{justify-self:center; padding:7px 28px 8px; color:#fff; font-size:var(--text-base); background:linear-gradient(180deg,#D9679A,#B03F72);
  clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%)}

/* Buy box polish: gift note without the empty gap, matching size pills, roomier color bubbles */
details.ds-gift{display:block}
.ds-swatches{gap:var(--space-3) 14px}
.ds-quizlink{margin-left:0; padding:7px 14px; background:radial-gradient(120% 120% at 40% 10%,#fff,#FCE6EE); box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(239,143,176,.45),0 4px 10px -6px rgba(166,58,102,.5)}
.ds-quizlink:active{animation:ds-squish .3s var(--ease)}
.ds-option__head:has(.ds-quizlink){flex-wrap:wrap; row-gap:var(--space-2)}
.ds-option__head:has(.ds-quizlink) .ds-sizeguide-link{margin-left:auto}

/* Candy-shore footer: strawberry-milk ground, marshmallow scallops, the painted candy hills at the very bottom */
.ds-footer{position:relative; padding-bottom:0; background-color:#FCE4EB; background-image:var(--paper),linear-gradient(180deg,#FCE4EB 0%,#F9D3E1 100%); color:var(--color-ink);
  --color-on-ink:var(--color-ink); --color-on-ink-muted:#7A4D63}
.ds-footer::before{content:""; position:absolute; left:0; right:0; top:-21px; height:22px; pointer-events:none;
  background:radial-gradient(circle at 26px 30px,#FCE4EB 25px,transparent 26px) 0 0/52px 30px repeat-x}
.ds-footer a{color:var(--color-ink)}
.ds-footer h3{color:var(--color-primary)}
.ds-footer .ds-input{background:#fff; border-color:#F3B9CC; color:var(--color-ink)}
.ds-footer .ds-input::placeholder{color:#A9788F}
.ds-footer__base{border-top-color:rgba(166,58,102,.18)}
.ds-pay span{background:#fff; border:1.5px solid #F3C4D4; border-radius:999px; color:var(--color-primary)}
.ds-footer__shore{margin-top:var(--space-6); line-height:0}
.ds-footer__shore img{display:block; width:100%; height:auto; max-height:320px; object-fit:cover; object-position:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 32%); mask-image:linear-gradient(180deg,transparent 0%,#000 32%)}

/* candy pass fixes: drips share the band's paper grain, bow clears the photo, size pills line up */
.ds-band--alt::after{background-image:var(--paper)}
.ds-cameo{padding-top:30px}
.ds-cameo__ring{top:30px; height:calc(100% - 38px)}
.ds-option__head:has(.ds-quizlink){align-items:center}
.ds-sizeguide-link,.ds-quizlink{display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px; line-height:1; font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-sm)}

/* floating soap bubbles: keep them round */
.ds-dream__float{aspect-ratio:1; height:auto}


/* ===================== 13. SMOOTH PASS =====================
   Calm, steady scrolling: nothing re-blurs under your thumb, the sky never
   jumps when Safari's address bar slides, motion is slower and softer. */

/* Sky: pinned to the large viewport (no jump when the address bar hides),
   its own compositor layer, puffy clouds without live drop-shadow filters */
.ds-sky{inset:auto; top:0; left:0; right:0; height:100vh; height:100lvh; contain:strict; transform:translateZ(0)}
.ds-sky__cloud{filter:none; fill:url(#hsPuffCloud); opacity:.82; backface-visibility:hidden}

/* Frosted bars become soft solid glass: no backdrop blur repainting every frame */
.ds-header{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,246,249,.97)}
.ds-sticky{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,247,249,.98)}

/* Reveal: a gentle rise and fade (no blur filter, no image zoom) */
[data-reveal]{opacity:0; filter:none; transform:translate3d(0,14px,0); transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal]:not(.is-in) .ds-moment__frame img.is-cover{transform:none}
.ds-moment__frame img.is-cover,.ds-spots__img{transition:none}

/* Slower, softer motion */
@keyframes hs-hover{0%,100%{transform:translate3d(-50%,0,0)}50%{transform:translate3d(-50%,-1.4%,0)}}
@keyframes ds-squish{0%{transform:scale(1)}45%{transform:scale(.95,.93)}75%{transform:scale(1.02)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: no-preference){
  .ds-dream__hero,.ds-dream__glow{animation-duration:9s}
  .ds-spots__pin{animation-duration:4.5s}
  .ds-badges__track{animation-duration:60s}
}
.ds-dream__hero,.ds-badges__track,.ds-dream__float{will-change:transform}

/* Swipes settle one slide at a time and never drag the page sideways */
.ds-gallery__track,.ds-moments{overscroll-behavior-x:contain}
.ds-gallery__slide,.ds-moment{scroll-snap-stop:always}

/* Crisp, even text rendering */
body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}