/*
Theme Name: Cloudpuff
Theme URI: https://cloudpuffheadphones.com
Description: One-page WooCommerce storefront for Cloudpuff wireless headphones. Color picker, mix-and-match bundle pricing (2/3/4 pairs save 10/15/20%), slide-out bag and WooCommerce checkout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cloudpuff
*/
/* Layout: one soft "sky" page: buy box up top, then pillowy rounded image bands, ending in color picker + FAQ */
:root{
  --sky:#F2EFF8;       /* page ground: pale lilac haze */
  --puff:#FFFFFF;      /* raised surfaces */
  --ink:#2E2745;       /* text */
  --muted:#6F6888;     /* secondary text */
  --plum:#5D4E8E;      /* brand (logo purple) */
  --plum-ink:#FFFFFF;  /* text on brand */
  --mist:#E4DEF0;      /* borders, chips */
  --dawn:#F6E7DA;      /* warm secondary band */
  --sale:#B0456A;
  --glint:#E98FB4;     /* sparkle pink */
  --display:"Quicksand","Nunito","Varela Round",ui-rounded,system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-pill:999px; --r-cloud:36px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sky:#17142A;--puff:#221E39;--ink:#EEEAF8;--muted:#ABA3C6;--plum:#B7A6F2;--plum-ink:#1A1530;--mist:#36304F;--dawn:#2B2238;--sale:#F08FB0;--glint:#F5B8D0;color-scheme:dark}}
:root[data-theme="dark"]{--sky:#17142A;--puff:#221E39;--ink:#EEEAF8;--muted:#ABA3C6;--plum:#B7A6F2;--plum-ink:#1A1530;--mist:#36304F;--dawn:#2B2238;--sale:#F08FB0;--glint:#F5B8D0;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--sky);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--plum)}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}

/* announcement + header */
.announce{background:var(--plum);color:var(--plum-ink);text-align:center;font-size:13px;font-weight:500;letter-spacing:.04em}
.announce .wrap{padding-block:9px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--sky) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--mist)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:12px}
.logo{display:flex;align-items:flex-end;gap:2px;font-family:var(--display);font-weight:700;font-size:28px;color:var(--plum);text-decoration:none;letter-spacing:-.02em}
.logo svg{width:30px;height:22px;margin-bottom:12px}
nav{display:flex;gap:22px;align-items:center}
nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:15px}
nav a:hover{color:var(--plum)}
.cart-btn{display:flex;align-items:center;gap:8px;background:var(--puff);border:1px solid var(--mist);border-radius:var(--r-pill);padding:8px 14px;font-weight:600}
.cart-count{background:var(--plum);color:var(--plum-ink);border-radius:var(--r-pill);min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums}
@media(max-width:720px){nav a{display:none}}

/* product hero */
.product{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding-block:40px 64px;align-items:start}
@media(max-width:880px){.product{grid-template-columns:1fr;gap:28px;padding-block:20px 48px}}
.gallery{display:grid;gap:12px;min-width:0}
.stage{position:relative;background:var(--puff);border-radius:var(--r-cloud);overflow:hidden;aspect-ratio:1/1;max-width:100%;display:grid;place-items:center}
.stage img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.stage .tag{position:absolute;top:16px;left:16px;background:var(--puff);color:var(--plum);font-weight:600;font-size:13px;padding:6px 12px;border-radius:var(--r-pill);box-shadow:0 2px 10px rgb(46 39 69 / .1)}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.thumbs button{border:2px solid transparent;border-radius:16px;overflow:hidden;padding:0;background:var(--puff);aspect-ratio:1/1}
.thumbs button[aria-current="true"]{border-color:var(--plum)}
.thumbs img{width:100%;height:100%;object-fit:cover}

.buy{display:grid;gap:22px;min-width:0}
.buy h1{font-size:clamp(34px,4.6vw,52px);color:var(--plum)}
.buy .sub{color:var(--muted);font-size:17px;max-width:46ch}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}
.was{color:var(--muted);text-decoration:line-through;font-size:18px}
.save{color:var(--sale);font-weight:600;font-size:14px;border:1px solid currentColor;border-radius:var(--r-pill);padding:2px 10px}

.label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.label-row strong{font-weight:600}
.label-row span{color:var(--muted);font-size:14px}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.sw{width:68px;height:50px;border-radius:16px;border:3px solid var(--sky);box-shadow:0 0 0 1px var(--mist);padding:0;background:var(--c) var(--img) center/cover no-repeat;transition:transform .15s ease}
.sw:hover{transform:translateY(-2px)}
.sw[aria-checked="true"]{box-shadow:0 0 0 2px var(--plum)}
/* wear-your-color strip */
.wear{padding-block:8px 72px;display:grid;gap:28px}
.wear-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.wear-head h2{font-size:clamp(30px,3.6vw,44px)}
.wear-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wear-card{position:relative;border:0;padding:0;border-radius:28px;overflow:hidden;aspect-ratio:3/4;max-width:100%;background:var(--puff);text-align:left}
.wear-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wear-card:hover img{transform:scale(1.04)}
.wear-card span{position:absolute;left:12px;bottom:12px;background:var(--puff);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px;padding:6px 14px 6px 8px;border-radius:var(--r-pill);display:flex;align-items:center;gap:8px}
.wear-card span i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12)}
@media(max-width:820px){.wear-grid{grid-template-columns:repeat(2,1fr)}}
/* sky panel behind the color shelf heading */
.shelf-head.sky{background:linear-gradient(color-mix(in srgb,var(--puff) 55%,transparent),color-mix(in srgb,var(--puff) 55%,transparent)),var(--skyimg) center/cover;border-radius:var(--r-cloud);padding:56px 20px}

.bundles{display:grid;gap:10px}
.bundle{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;background:var(--puff);border:1.5px solid var(--mist);border-radius:20px;padding:14px 18px;position:relative}
.bundle[aria-checked="true"]{border-color:var(--plum);background:color-mix(in srgb,var(--plum) 7%,var(--puff))}
.bundle .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--mist)}
.bundle[aria-checked="true"] .dot{border:6px solid var(--plum)}
.bundle b{display:block;font-weight:600}
.bundle small{color:var(--muted);font-size:13.5px}
.bundle .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.bundle .amt s{display:block;color:var(--muted);font-weight:400;font-size:13px}
.bundle .flag{position:absolute;top:-10px;right:16px;background:var(--plum);color:var(--plum-ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill)}

.picks{display:grid;gap:8px}
.picks[hidden]{display:none}
.picks p{font-size:14px;color:var(--muted)}
.pick-row{display:flex;gap:8px;flex-wrap:wrap}
.pick-row select{font:inherit;font-size:14px;padding:8px 12px;border-radius:12px;border:1px solid var(--mist);background:var(--puff);color:var(--ink)}

.cta{background:var(--plum);color:var(--plum-ink);border:0;border-radius:var(--r-pill);padding:18px 24px;font-family:var(--display);font-weight:700;font-size:19px;width:100%;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--plum) 70%,transparent)}
.cta:hover{transform:translateY(-1px)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:13px;color:var(--muted);text-align:center}
.trust div{display:grid;gap:4px;justify-items:center}
.trust svg{width:22px;height:22px;stroke:var(--plum)}

/* spec strip */
.strip{background:linear-gradient(color-mix(in srgb,var(--puff) 80%,transparent),color-mix(in srgb,var(--puff) 80%,transparent)),url('assets/img/g_purplepat.webp') center/cover;border-block:1px solid var(--mist)}
.strip .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-block:28px}
.spec{display:grid;gap:4px;text-align:center}
.spec .n{font-family:var(--display);font-weight:700;font-size:28px;color:var(--plum);font-variant-numeric:tabular-nums}
.spec .n small{font-size:15px}
.spec .t{font-size:13.5px;color:var(--muted)}
@media(max-width:760px){.strip .wrap{grid-template-columns:repeat(2,1fr)}.spec:last-child{grid-column:span 2}}

/* story bands */
.story{padding-block:80px;display:grid;gap:80px}
.band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.band.flip .media{order:2}
.band .media{border-radius:var(--r-cloud);overflow:hidden;background:var(--puff);aspect-ratio:5/4;max-width:100%}
.band .media img{width:100%;height:100%;object-fit:cover}
.band .copy{display:grid;gap:16px;max-width:46ch;min-width:0}
.band h2{font-size:clamp(30px,3.6vw,44px)}
.band p{color:var(--muted);font-size:17px}
.band ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.band li{display:flex;gap:10px;align-items:center}
.band li::before{content:"";width:18px;height:12px;flex:none;background:var(--plum);-webkit-mask:var(--cloud) center/contain no-repeat;mask:var(--cloud) center/contain no-repeat}
@media(max-width:820px){.band{grid-template-columns:1fr;gap:24px}.band.flip .media{order:0}.story{padding-block:48px;gap:56px}}

/* mood hero inside story */
.mood{display:grid;grid-template-columns:.8fr 1.2fr;border-radius:var(--r-cloud);overflow:hidden;background:var(--dawn)}
.mood img{width:100%;height:100%;object-fit:cover;min-height:340px}
.mood .copy{padding:48px;display:grid;gap:14px;align-content:center;min-width:0}
.mood h2{font-size:clamp(36px,5vw,64px);color:var(--plum)}
.mood p{font-family:var(--display);font-size:20px;font-weight:600;color:var(--muted)}
@media(max-width:820px){.mood{grid-template-columns:1fr}.mood img{max-height:420px}.mood .copy{padding:28px}}

/* color shelf */
.shelf{padding-block:24px 80px}
.shelf-head{display:grid;gap:10px;text-align:center;justify-items:center;margin-bottom:32px}
.shelf-head h2{font-size:clamp(30px,3.6vw,44px)}
.shelf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shelf-card{background:var(--puff);border:1.5px solid var(--mist);border-radius:28px;padding:14px 14px 18px;display:grid;gap:12px;text-align:center}
.shelf-card img{border-radius:20px;aspect-ratio:1/1.05;object-fit:cover;width:100%;max-width:100%}
.shelf-card b{font-family:var(--display);font-size:19px}
.shelf-card button{border:1.5px solid var(--plum);color:var(--plum);background:transparent;border-radius:var(--r-pill);padding:9px 12px;font-weight:600}
.shelf-card button:hover{background:var(--plum);color:var(--plum-ink)}
@media(max-width:820px){.shelf-grid{grid-template-columns:repeat(2,1fr)}}

/* specs + faq */
.details{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-block:24px 96px}
@media(max-width:820px){.details{grid-template-columns:1fr}}
.details h2{font-size:30px;margin-bottom:18px}
table{width:100%;border-collapse:collapse;font-size:15px}
td{padding:12px 0;border-bottom:1px solid var(--mist);vertical-align:top}
td:first-child{color:var(--muted);width:44%}
details{border-bottom:1px solid var(--mist);padding-block:14px}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-family:var(--display);font-size:22px;line-height:1;color:var(--plum)}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin-top:10px;font-size:15px}

.signoff{padding-block:0 96px}
.signoff-inner{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:40px;align-items:center;background:var(--dawn);border-radius:var(--r-cloud);padding:28px}
.signoff img{border-radius:24px;width:100%;aspect-ratio:246/203;object-fit:cover;max-width:100%}
.signoff .copy{display:grid;gap:14px;justify-items:start;min-width:0}
.signoff h2{font-size:clamp(34px,4.6vw,56px);color:var(--plum)}
.signoff p{color:var(--muted);font-size:17px;max-width:40ch}
.signoff .cta{width:auto;padding:14px 28px;font-size:17px;text-decoration:none;display:inline-block}
@media(max-width:720px){.signoff-inner{grid-template-columns:1fr;gap:22px;padding:18px}}
footer{background:var(--plum);color:var(--plum-ink)}
footer .wrap{padding-block:40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .logo{color:var(--plum-ink)}
footer p{opacity:.8;font-size:14px}

/* sticky mobile buy bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--puff);border-top:1px solid var(--mist);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:none;gap:12px;align-items:center;justify-content:space-between;transform:translateY(110%);transition:transform .25s ease}
.mbar.show{transform:none}
.mbar .cta{width:auto;padding:12px 22px;font-size:16px}
.mbar b{font-family:var(--display);font-size:20px}
@media(max-width:880px){.mbar{display:flex}}

/* cart drawer */
.scrim{position:fixed;inset:0;background:rgb(20 16 36 / .45);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--sky);z-index:21;transform:translateX(100%);transition:transform .3s ease;display:grid;grid-template-rows:auto 1fr auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--mist)}
.drawer-head h3{font-size:22px}
.x{background:none;border:0;font-size:28px;line-height:1;color:var(--muted)}
.lines{overflow:auto;padding:12px 20px;display:grid;gap:12px;align-content:start}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--puff);border-radius:18px;padding:10px}
.line img{border-radius:12px;aspect-ratio:1/1;object-fit:cover}
.line small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--mist);background:var(--sky)}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--mist);display:grid;gap:10px}
.sum{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.sum.disc{color:var(--sale)}
.sum.tot{font-family:var(--display);font-weight:700;font-size:21px}
.nudge{font-size:13.5px;color:var(--plum);background:color-mix(in srgb,var(--plum) 10%,transparent);border-radius:12px;padding:8px 12px}
.toast{font-size:13.5px;color:var(--muted);text-align:center}

.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgb(255 255 255 / .38) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* sparkles around the headline */
.title-wrap{position:relative;width:fit-content;max-width:100%}
.spark{position:absolute;width:var(--s,18px);height:var(--s,18px);color:var(--glint);pointer-events:none;animation:twinkle 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
.spark svg{width:100%;height:100%;display:block}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
/* glossy cloud ribbon */
.ribbon{overflow:hidden;padding-block:0 72px}
.ribbon-track{display:flex;gap:14px;width:max-content;animation:drift 70s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon img{width:clamp(130px,16vw,190px);aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:28px;box-shadow:0 14px 30px -18px color-mix(in srgb,var(--plum) 60%,transparent)}
@keyframes drift{to{transform:translateX(calc(-50% - 7px))}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.cta::after,.spark,.ribbon-track{animation:none}.spark{opacity:.8}}

/* ---------- WordPress / WooCommerce pages (cart, checkout, account, policies) ---------- */
.page-main{padding-block:40px 96px;min-height:50vh}
.page-main h1{font-size:clamp(30px,4vw,44px);color:var(--plum);margin-bottom:24px}
.page-main a{color:var(--plum)}
.page-main p{margin:0 0 1em}
.woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=tel],.woocommerce input[type=password],.woocommerce input[type=number],.woocommerce select,.woocommerce textarea,.woocommerce .select2-selection{font:inherit;color:var(--ink);background:var(--puff);border:1px solid var(--mist);border-radius:12px;padding:10px 12px;width:100%}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce #place_order,.wp-element-button,.wc-block-components-button{background:var(--plum)!important;color:var(--plum-ink)!important;border:0!important;border-radius:var(--r-pill)!important;font-family:var(--display);font-weight:700;padding:14px 26px!important}
.woocommerce table.shop_table{border:1px solid var(--mist);border-radius:20px;overflow:hidden;background:var(--puff)}
.woocommerce-message,.woocommerce-info{background:var(--puff);border-top-color:var(--plum)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}