/*
Theme Name: Star Store
Theme URI: https://starstorepatches.com
Description: One-page WooCommerce store for Star Store star pimple patches. Your skin's little happy place.
Version: 2.0
Requires PHP: 7.4
Text Domain: star-store
*/
/* Layout: pink-satin dream. Night header with the chrome logo → sky-to-satin hero buy box → scrolling marquee → face gallery → 7 colors → proof trio → "a star for every moment" → how-to → night packaging band → FAQ → night footer */
:root{
  --satin:#FFF4F8;      /* page ground */
  --blush:#FBDDE9;      /* satin pink */
  --lilac:#E6DBFF;
  --sky:#D7E8FF;
  --card:#FFFFFF;
  --ink:#2C1F4A;        /* text */
  --muted:#76688F;
  --line:#F1D6E4;
  --berry:#D9488C;      /* accent: hot satin pink */
  --berry-ink:#FFFFFF;
  --night:#120D26;      /* packaging black-purple */
  --night-2:#251A4D;
  --star-ink:#FFF7FC;
  --butter:#FFE45C;
  --s-pink:#F7A8CB;--s-blue:#7EC8F4;--s-yellow:#FFE45C;--s-black:#1C1A26;--s-green:#9EE29A;--s-purple:#8C6CF0;
  --holo:linear-gradient(120deg,#FFC4E4 0%,#C9B6FF 30%,#A6E9F7 55%,#FFF1B8 78%,#FFC4E4 100%);
  --display:"Fredoka","Varela Round",ui-rounded,system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --script:"Dancing Script","Snell Roundhand",cursive;
  --r-pill:999px;--r-card:28px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --satin:#160F28;--blush:#2A1A3D;--lilac:#251E45;--sky:#1A2346;--card:#211837;--ink:#F8EEFF;--muted:#BCAED6;--line:#3A2C55;--berry:#FF7DB6;--berry-ink:#1A1030;--night:#0B0818;--night-2:#1E1540;color-scheme:dark}}
:root[data-theme="dark"]{--satin:#160F28;--blush:#2A1A3D;--lilac:#251E45;--sky:#1A2346;--card:#211837;--ink:#F8EEFF;--muted:#BCAED6;--line:#3A2C55;--berry:#FF7DB6;--berry-ink:#1A1030;--night:#0B0818;--night-2:#1E1540;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--satin);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--night)}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px}
.wrap{max-width:1180px;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:.22em;text-transform:uppercase;font-weight:800;color:var(--berry)}
.script{font-family:var(--script);font-weight:600;color:var(--berry);font-size:1.35em;line-height:1}
.holo-deep{background:linear-gradient(120deg,#E0559A,#8C6CF0 55%,#4FA9E6);-webkit-background-clip:text;background-clip:text;color:transparent}
.holo-text{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.star{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--starpath) center/contain no-repeat;mask:var(--starpath) center/contain no-repeat;flex:none}
.spark{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--sparkpath) center/contain no-repeat;mask:var(--sparkpath) center/contain no-repeat;flex:none}
:root{
--starpath:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c.6 0 1.1.4 1.4.9l2.4 4.9 5.4.8c1.3.2 1.8 1.8.9 2.7l-3.9 3.8.9 5.4c.2 1.3-1.1 2.3-2.3 1.7L12 19.4l-4.8 2.6c-1.2.6-2.5-.4-2.3-1.7l.9-5.4-3.9-3.8c-.9-.9-.4-2.5.9-2.7l5.4-.8 2.4-4.9c.3-.5.8-.9 1.4-.9z'/%3E%3C/svg%3E");
--sparkpath:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.5 5.5 11.4 12 12-6.5.6-11.4 5.5-12 12-.6-6.5-5.5-11.4-12-12C6.5 11.4 11.4 6.5 12 0z'/%3E%3C/svg%3E")}

/* announce + header */
.announce{background:var(--holo);color:#2C1F4A;text-align:center;font-size:13.5px;font-weight:800;letter-spacing:.02em}
.announce .wrap{padding-block:8px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:color-mix(in srgb,var(--night) 94%,transparent);backdrop-filter:blur(10px);color:var(--star-ink)}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:8px;gap:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--star-ink);min-width:0}
.brand img{height:46px;width:auto}
.brand small{font-family:var(--script);font-size:19px;color:#FFC4E4;white-space:nowrap}
@media(max-width:600px){.brand small{display:none}.brand img{height:40px}}
nav{display:flex;gap:22px;align-items:center}
nav a{color:color-mix(in srgb,var(--star-ink) 78%,transparent);text-decoration:none;font-weight:700;font-size:15px}
nav a:hover{color:#FFC4E4}
.cart-btn{display:flex;align-items:center;gap:8px;background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .22);color:var(--star-ink);border-radius:var(--r-pill);padding:7px 14px;font-weight:800;text-decoration:none}
.cart-count{background:var(--holo);color:#2C1F4A;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:760px){nav a.nl{display:none}}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,var(--sky) 0%,var(--lilac) 38%,var(--blush) 78%,var(--satin) 100%);overflow:hidden}
#sparkles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.product{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding-block:40px 72px;align-items:start}
@media(max-width:900px){.product{grid-template-columns:1fr;gap:26px;padding-block:18px 52px}}
.gallery{display:grid;gap:12px;min-width:0}
.stage{position:relative;background:var(--card);border-radius:32px;overflow:hidden;aspect-ratio:1/1;max-width:100%;box-shadow:0 30px 60px -28px rgb(140 60 120 / .45),0 0 0 6px rgb(255 255 255 / .55)}
.stage img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.stage .tag{position:absolute;top:14px;left:14px;background:var(--night);color:#FFC4E4;font-weight:800;font-size:13px;padding:6px 12px;border-radius:var(--r-pill);display:flex;gap:6px;align-items:center}
.thumbs{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
@media(max-width:560px){.thumbs{grid-template-columns:repeat(4,1fr)}}
.thumbs button{border:2px solid transparent;border-radius:14px;overflow:hidden;padding:0;background:var(--card);aspect-ratio:1/1;max-width:100%}
.thumbs button[aria-current="true"]{border-color:var(--berry)}
.thumbs img{width:100%;height:100%;object-fit:cover}

.buy{display:grid;gap:20px;min-width:0}
.rating{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);font-weight:600;flex-wrap:wrap}
.rating .stars{display:flex;gap:2px;color:var(--berry);font-size:17px}
.buy h1{font-size:clamp(38px,5.2vw,62px);font-weight:700}
.buy .sub{font-size:17.5px;max-width:44ch;color:var(--muted)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:40px;font-weight:700;font-variant-numeric:tabular-nums}
.was{text-decoration:line-through;font-size:18px;color:var(--muted)}
.save{background:var(--berry);color:var(--berry-ink);font-weight:800;font-size:13px;border-radius:var(--r-pill);padding:3px 11px}
.per{font-size:14px;color:var(--muted);width:100%}
.label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.label-row strong{font-weight:800}
.label-row span{font-size:14px;color:var(--muted)}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pack{position:relative;text-align:left;background:color-mix(in srgb,var(--card) 80%,transparent);border:2px solid var(--line);border-radius:22px;padding:16px;display:grid;gap:4px;color:var(--ink)}
.pack[aria-checked="true"]{border-color:var(--berry);background:var(--card);box-shadow:0 10px 24px -14px var(--berry)}
.pack b{font-family:var(--display);font-size:22px;font-weight:600}
.pack small{font-size:13.5px;color:var(--muted)}
.pack .amt{font-weight:800;font-variant-numeric:tabular-nums}
.pack .flag{position:absolute;top:-11px;right:14px;background:var(--night);color:#FFC4E4;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill)}
.dots{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted);font-weight:600}
.dots i{font-size:17px}
.qty-row{display:flex;gap:12px}
.qty{display:flex;align-items:center;border:2px solid var(--line);background:var(--card);border-radius:var(--r-pill)}
.qty button{background:none;border:0;width:44px;height:54px;font-size:20px}
.qty output{min-width:26px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.cta{flex:1;background:var(--night);color:var(--star-ink);border:0;border-radius:var(--r-pill);padding:14px 22px;font-family:var(--display);font-weight:600;font-size:19px;display:flex;gap:10px;align-items:center;justify-content:center;position:relative;overflow:hidden;text-decoration:none;transition:transform .15s ease}
.cta .star{color:#FFC4E4}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .28) 48%,transparent 66%);transform:translateX(-110%);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{55%,100%{transform:translateX(110%)}}
.cta:hover{transform:translateY(-1px)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:13px;text-align:center;color:var(--muted);font-weight:600}
.trust div{display:grid;gap:4px;justify-items:center}
.trust svg{width:22px;height:22px;stroke:var(--berry)}

/* marquee */
.marquee{background:var(--night);color:var(--star-ink);overflow:hidden;border-block:1px solid rgb(255 255 255 / .08)}
.marquee .track{display:flex;gap:34px;width:max-content;padding-block:14px;animation:marq 32s linear infinite;font-family:var(--display);font-weight:500;font-size:18px;white-space:nowrap}
.marquee span{display:flex;gap:34px;align-items:center}
.marquee .spark{color:#FFC4E4;font-size:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.section{padding-block:80px}
.head{display:grid;gap:10px;max-width:660px;margin-bottom:34px}
.head.center{margin-inline:auto;text-align:center;justify-items:center}
.head h2{font-size:clamp(32px,4.3vw,50px)}
.head p{color:var(--muted);font-size:17px}

/* faces */
.faces{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px;grid-auto-flow:dense}
.faces figure{margin:0;border-radius:24px;overflow:hidden;position:relative;background:var(--blush)}
.faces img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.faces figure:hover img{transform:scale(1.04)}
.faces .tall{grid-row:span 2}
.faces .wide{grid-column:span 2}
.faces .big{grid-column:span 2;grid-row:span 2}
.faces .contain{background:#000}
.faces .contain img{object-fit:contain}
@media(max-width:820px){.faces{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.faces .big{grid-column:span 2}}

/* seven */
.seven{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px 8px 16px;display:grid;justify-items:center;gap:8px;text-align:center}
.chip .star{font-size:50px;color:var(--c);filter:drop-shadow(0 6px 8px rgb(120 60 120 / .18));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.chip:hover .star{transform:rotate(-14deg) scale(1.12)}
.chip.holo .star{background:var(--holo)}
.chip b{font-family:var(--display);font-weight:600;font-size:16px}
.chip small{color:var(--muted);font-size:12.5px;line-height:1.3}
@media(max-width:880px){.seven{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.seven{grid-template-columns:repeat(3,1fr)}}

/* proof trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.proof img{width:100%;aspect-ratio:1/1;object-fit:cover;max-width:100%}
.proof div{padding:20px 22px 24px;display:grid;gap:6px;align-content:start}
.proof h3{font-size:23px}
.proof p{color:var(--muted)}
@media(max-width:820px){.trio{grid-template-columns:1fr}.proof{grid-template-columns:1fr 1.2fr;grid-template-rows:none}.proof img{height:100%}}
@media(max-width:480px){.proof{grid-template-columns:1fr}}

/* moments */
.moments-bg{background:linear-gradient(180deg,var(--satin),var(--blush))}
.moments{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.moment{margin:0;display:grid;gap:10px}
.moment .ph{border-radius:999px 999px 24px 24px;overflow:hidden;aspect-ratio:3/4;max-width:100%;background:var(--card);box-shadow:0 18px 30px -22px rgb(120 40 100 / .5)}
.moment img{width:100%;height:100%;object-fit:cover}
.moment figcaption{font-family:var(--script);font-size:24px;color:var(--berry);text-align:center;line-height:1}
@media(max-width:900px){.moments{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.moments{grid-template-columns:repeat(2,1fr)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;gap:10px;align-content:start}
.step .num{width:46px;height:46px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:19px;color:#2C1F4A;background:var(--c);-webkit-mask:var(--starpath) center/contain no-repeat;mask:var(--starpath) center/contain no-repeat;padding-top:3px}
.step h3{font-size:22px}
.step p{color:var(--muted)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* night packaging band */
.night{background:radial-gradient(90% 120% at 80% 0%,var(--night-2),var(--night) 65%);color:var(--star-ink);border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative}
.night .media{height:100%;min-height:380px}
.night .media img{width:100%;height:100%;object-fit:cover}
.night .copy{padding:48px;display:grid;gap:16px;min-width:0}
.night h2{font-size:clamp(32px,4.2vw,52px)}
.night p{color:color-mix(in srgb,var(--star-ink) 75%,transparent);font-size:17px}
.night .cta{background:var(--holo);color:#2C1F4A;flex:none;justify-self:start}
.night .cta .star{color:#2C1F4A}
.night ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.night li{display:flex;gap:10px;align-items:center}
.night li .spark{color:#FFC4E4;font-size:13px}
@media(max-width:820px){.night{grid-template-columns:1fr}.night .media{min-height:0;aspect-ratio:1/1}.night .copy{padding:28px}}

/* quote */
.quote{position:relative;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#CFE3FF,#E9DCFF 55%,#FFDDEC);text-align:center;padding:72px 20px;display:grid;gap:12px;justify-items:center;color:#2C1F4A}
.quote h2{font-size:clamp(38px,6vw,76px);font-weight:700;letter-spacing:-.02em}
.quote h2 em{font-style:normal;background:linear-gradient(120deg,#E0559A,#8C6CF0 50%,#4FA9E6);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote p{font-family:var(--script);font-size:28px;color:#B23A78}
.quote .cloud{position:absolute;border-radius:999px;background:#fff;opacity:.7;filter:blur(18px)}

/* FAQ */
.faq{display:grid;gap:10px;max-width:780px;margin-inline:auto}
details{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:4px 20px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding-block:14px;font-weight:800;font-size:17px}
summary::-webkit-details-marker{display:none}
summary .star{color:var(--berry);transition:transform .3s ease}
details[open] summary .star{transform:rotate(144deg)}
details p{padding-bottom:16px;color:var(--muted)}

footer{background:var(--night);color:color-mix(in srgb,var(--star-ink) 70%,transparent);font-size:14px}
footer .wrap{padding-block:40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer img{height:64px;width:auto}
footer .tag{font-family:var(--script);font-size:24px;color:#FFC4E4}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);background:var(--night);color:var(--star-ink);border:1px solid rgb(255 255 255 / .2);padding:12px 18px;border-radius:var(--r-pill);font-weight:800;display:flex;gap:8px;align-items:center;transition:transform .35s cubic-bezier(.3,1.4,.5,1);z-index:20;white-space:nowrap;visibility:hidden}
.toast .star{color:#FFC4E4}
.toast.show{transform:translate(-50%,0);visibility:visible}
.burst{position:fixed;pointer-events:none;z-index:30;font-size:16px;animation:burst .8s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(200deg) scale(.4);opacity:0}}
.was[hidden],.save[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---- WooCommerce pages (cart, checkout, account) ---- */
.wc-page{padding-block:48px 80px}
.wc-page h1{font-size:clamp(30px,4vw,44px);margin-bottom:24px}
.wc-page a{color:var(--berry)}
.wc-page .button,.wc-page button.button,.wc-page .checkout-button,.wc-page #place_order,.wc-block-components-button{background:var(--night)!important;color:var(--star-ink)!important;border-radius:999px!important;font-family:var(--display)!important;font-weight:600!important;border:0!important;padding:14px 24px!important}
.wc-page input,.wc-page select,.wc-page textarea{border-radius:12px;border:1px solid var(--line);padding:10px 12px;background:var(--card);color:var(--ink);font:inherit}
.wc-page table{width:100%;border-collapse:collapse}