:root{
  --ink:#3c2116;
  --paper:#fffaf2;
  --cream-2:#f5ead9;
  --rose:#edabb9;
  --coral:#eb724c;
  --mint:#b8c994;
  --sky:#8fd5dc;
  --sun:#f4c94b;
  --plum:#76518c;
  --hairline:rgba(60,33,22,.15);
  --soft-shadow:0 18px 55px rgba(60,33,22,.12);
}

body{background:var(--paper);font-size:16px}
.wrap{max-width:1320px;padding-inline:clamp(18px,3.5vw,52px)}

.announcement{background:var(--ink);color:var(--paper);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-align:center;text-transform:uppercase;padding:9px 16px}
.announcement a{color:var(--sun);text-decoration:underline;text-underline-offset:3px}
header{background:rgba(255,250,242,.92);border-bottom:1px solid var(--hairline)}
.nav{height:82px}
.logo{font-size:1.42rem;letter-spacing:-.025em}
.logo small{font-size:.52rem;color:var(--coral);margin-top:4px}
.navlinks{gap:28px}
.navlinks a{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.nav-shop{color:var(--coral)!important}
.cart-btn{background:var(--ink);color:var(--paper);border:0;padding:11px 19px}

.hero{position:relative;min-height:720px;padding:0;background:linear-gradient(115deg,#f5e9d7 0 48%,#f0acb9 48% 100%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(60,33,22,.075) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
.hero-grid{min-height:720px;grid-template-columns:minmax(0,.84fr) minmax(430px,1.16fr);gap:20px;position:relative}
.hero-copy{padding:85px 0 92px;position:relative;z-index:2}
.eyebrow{background:transparent;color:var(--ink);padding:0;border-radius:0;border-left:4px solid var(--coral);padding-left:12px;font-size:.63rem;margin-bottom:24px}
.hero h1{font-size:clamp(4rem,7.1vw,7.2rem);line-height:.83;letter-spacing:-.065em;max-width:7ch;margin-bottom:28px}
.hero h1 em{color:var(--coral);display:block;margin-left:.55em}
.hero .lede{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;max-width:42ch;margin-bottom:30px}
.hero-ctas .btn{min-height:52px}
.btn{border-radius:4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:15px 23px}
.btn:hover{transform:translateY(-3px)}
.btn.ghost{background:rgba(255,250,242,.2)}
.hero-micro{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.hero-micro span{display:flex;align-items:center;gap:7px}
.hero-micro span::before{content:"✦";color:var(--coral)}
.hero-stage{height:100%;min-height:720px;position:relative}
.hero-stage::after{content:"THE POP CATS";position:absolute;right:-10px;bottom:10px;font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,7vw,7.5rem);line-height:.8;color:rgba(255,250,242,.33);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:-.06em}
.hero-cat{position:absolute;object-fit:contain;filter:drop-shadow(0 25px 24px rgba(60,33,22,.18));transition:transform .35s ease}
.hero-cat:hover{transform:translateY(-9px) rotate(1deg)}
.hero-cat.cashmere{width:37%;left:1%;bottom:0}
.hero-cat.coco{width:36%;left:30%;bottom:0;z-index:2}
.hero-cat.cosmo{width:41%;right:0;bottom:0}
.hero-badge{position:absolute;z-index:4;border:1px solid rgba(60,33,22,.3);background:rgba(255,250,242,.9);backdrop-filter:blur(8px);width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;right:6%;top:8%;font-family:var(--font-display);font-size:1rem;font-weight:900;line-height:1.05;transform:rotate(9deg)}

.trust-strip{border-block:1px solid var(--hairline);background:#fffdf9}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:19px 20px;text-align:center;border-right:1px solid var(--hairline);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.trust-item:last-child{border-right:0}
.trust-item b{font-family:var(--font-display);font-size:1.15rem;display:block;text-transform:none;letter-spacing:0;margin-bottom:2px}

.section-kicker{display:block;color:var(--coral);font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.18em;margin-bottom:10px}
.sec-head{text-align:left;display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:.95;letter-spacing:-.04em}
.sec-head p{max-width:48ch;margin:0;line-height:1.65}

.mascots{padding:100px 0 80px}
.mascot-grid{gap:18px}
.mascot-card{padding:0;text-align:left;align-items:stretch;overflow:hidden;border:1px solid var(--hairline);box-shadow:none;border-radius:6px;position:relative}
/* The three-scene collage is gone -- each cat now gets one contained portrait,
   so its coat, eye colour and cake pop stay readable. That is a character-bible
   requirement, and object-fit:cover was cropping their faces.
   The middle card no longer drops 28px either: with one portrait each, the row
   reads as a matched set and a stagger just misaligns the three CTAs. */
.mascot-hero{height:430px;display:flex;align-items:center;justify-content:center;
  margin:0;background:var(--cream-2);overflow:hidden;padding:22px;border-radius:0}
.mascot-hero img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;transition:transform .55s ease}
.mascot-card:hover .mascot-hero img{transform:scale(1.025)}
.mascot-copy{padding:24px 25px 28px;position:relative;display:flex;flex-direction:column;flex:1}
.mascot-card h3{font-size:2.05rem;margin:0}
.mascot-slogan{position:absolute;right:22px;top:28px;margin:0;font-size:.59rem}
.mascot-card p{font-size:.82rem;max-width:none;margin:12px 0 19px}
.mascot-card .btn{align-self:flex-start}
.mascot-copy .mascot-link{margin-top:auto;align-self:flex-start}

.collections{padding:110px 0;background:var(--ink);color:var(--paper)}
.collections .sec-head p{color:#dcc9b9}
.collection-mosaic{display:grid;grid-template-columns:1.22fr .78fr;grid-template-rows:repeat(2,330px);gap:16px}
.occasion-card{position:relative;overflow:hidden;border-radius:5px;background:var(--cream-2);color:var(--ink)}
.occasion-card:first-child{grid-row:1 / 3}
.occasion-card img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.occasion-card:hover img{transform:scale(1.025)}
.occasion-overlay{position:absolute;inset:auto 18px 18px;background:rgba(255,250,242,.94);backdrop-filter:blur(9px);padding:22px 23px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.occasion-overlay h3{font-family:var(--font-display);font-size:1.75rem;line-height:1;margin-bottom:7px}
.occasion-overlay p{font-size:.76rem;max-width:44ch;color:var(--cocoa-soft)}
.occasion-overlay .btn{flex:0 0 auto}
.coll-row{margin-top:22px;grid-template-columns:repeat(4,1fr)}
.coll-chip{background:transparent;color:var(--paper);border-color:rgba(255,250,242,.22);border-radius:4px;padding:19px}
.coll-chip:hover{border-color:var(--rose);background:rgba(255,255,255,.04)}
.coll-chip span{color:#cbb6a5}

.shop{padding:110px 0}
.shop-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
.shop-aside{position:sticky;top:112px;border-top:3px solid var(--ink);padding-top:18px}
.shop-aside h3{font-family:var(--font-display);font-size:1.3rem;margin-bottom:6px}
.shop-aside p{font-size:.78rem;color:var(--cocoa-soft);margin-bottom:18px}
.shop-tools{display:block}
.search-box{margin-bottom:15px}
.search-box input{border-radius:3px;background:transparent;border-color:var(--hairline)}
.filters{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.fchip{text-align:left;border:0;border-bottom:1px solid var(--hairline);border-radius:0;background:transparent;padding:11px 2px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.fchip[aria-pressed="true"]{background:transparent;color:var(--coral);border-bottom-color:var(--coral)}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
.pcard{border-radius:3px;box-shadow:none;border:1px solid var(--hairline);background:#fffdf9}
.pcard:hover{box-shadow:0 14px 36px rgba(60,33,22,.1);transform:translateY(-4px)}
.ptile{aspect-ratio:1 / 1.06}
.pinfo{padding:17px}
.pname{font-family:var(--font-display);font-size:1.02rem}
.pdesc{font-size:.72rem}
.pbadge{border-radius:2px;top:10px;left:10px}
.prow .btn{font-size:.63rem}
.result-note{padding-bottom:10px;border-bottom:1px solid var(--hairline)}

.corporate{padding:100px 0;background:#e6edda}
.corporate-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--paper);box-shadow:var(--soft-shadow)}
.corporate-media{position:relative;min-height:530px;overflow:hidden}
.corporate-media img{width:100%;height:100%;object-fit:cover}
.corporate-copy{padding:clamp(36px,6vw,78px);display:flex;flex-direction:column;justify-content:center}
.corporate-copy h2{font-family:var(--font-display);font-size:clamp(2.4rem,4.3vw,4rem);line-height:.95;letter-spacing:-.04em;margin-bottom:18px}
.corporate-copy p{color:var(--cocoa-soft);margin-bottom:22px}
.check-list{list-style:none;display:grid;gap:10px;margin-bottom:27px;font-size:.8rem;font-weight:700}
.check-list li::before{content:"✓";color:var(--coral);font-weight:900;margin-right:9px}

.how{padding:95px 0;background:var(--paper)}
.how-grid{gap:0;border-block:1px solid var(--hairline)}
.how-card{border-radius:0;background:transparent;padding:35px 30px;border-right:1px solid var(--hairline);text-align:left}
.how-card:last-child{border-right:0}
.how-num{margin:0 0 18px;border-radius:0;background:var(--sun)}
.how-card h3{font-size:1.3rem}

.cross{padding:0 0 95px}
.cross-panel{border-radius:5px;padding:55px;background:linear-gradient(115deg,var(--plum),#4d315c);position:relative;overflow:hidden}
.cross-panel::after{content:"CAKE POPS";position:absolute;right:-20px;bottom:-30px;font-family:var(--font-display);font-size:7rem;font-weight:900;opacity:.08;white-space:nowrap}
.cross-panel h2{font-size:2.4rem}
.cross-panel p{position:relative;z-index:2}
.cross-panel .btn{position:relative;z-index:2}

.signup{padding:80px 0;background:var(--rose)}
.signup-panel{max-width:980px;background:transparent;border:0;border-radius:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:50px;text-align:left;align-items:center}
.signup-panel h2{font-size:clamp(2.3rem,4vw,3.8rem);line-height:.95}
.signup-panel p{color:var(--ink)}
.signup-form{max-width:none;margin:0;flex-wrap:wrap}
.signup-form input{border-radius:3px;border-color:var(--ink);background:rgba(255,250,242,.65);min-height:52px}
.signup-msg{width:100%}

footer{background:var(--ink);color:#d9c5b5;border:0;padding:55px 0;text-align:left}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(2,1fr);gap:45px}
footer .fbrand{font-size:1.5rem;color:var(--paper)}
.footer-links h3{color:var(--paper);font-size:.67rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.footer-links a{display:block;text-decoration:none;margin:7px 0;font-size:.78rem}
.footer-links a:hover{color:var(--rose)}
footer .fnote{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;margin-top:8px}

dialog{border-radius:5px}
.drawer{background:var(--paper)}

@media(max-width:1050px){
  .hero{min-height:auto}.hero-grid{grid-template-columns:1fr 1fr;min-height:650px}.hero-stage{min-height:650px}.hero h1{font-size:clamp(3.6rem,7.5vw,5.8rem)}
  .shop-shell{grid-template-columns:1fr}.shop-aside{position:static}.filters{flex-direction:row;overflow-x:auto;padding-bottom:8px}.fchip{white-space:nowrap;border:1px solid var(--hairline);padding:8px 13px;min-height:42px;display:inline-flex;align-items:center}.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  .grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:820px){
  .announcement{font-size:.58rem}.nav{height:68px}.navlinks{gap:12px}.navlinks a{display:none}.logo{font-size:1.15rem}
  .hero{background:linear-gradient(180deg,#f5e9d7 0 54%,#f0acb9 54%)}.hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:65px 0 35px}.hero-stage{min-height:520px}.hero h1{font-size:clamp(4rem,17vw,6.2rem)}
  .trust-grid{grid-template-columns:1fr 1fr}.trust-item:nth-child(2){border-right:0}.trust-item:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
  .sec-head{display:block}.sec-head p{margin-top:10px}
  .mascot-grid{grid-template-columns:1fr}.mascot-hero{height:480px}
  .collection-mosaic{grid-template-columns:1fr;grid-template-rows:repeat(3,400px)}.occasion-card:first-child{grid-row:auto}.coll-row{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .corporate-grid{grid-template-columns:1fr}.corporate-media{min-height:420px}
  .signup-panel{grid-template-columns:1fr;gap:22px}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1 / -1}
}

@media(max-width:540px){
  .hero-stage{min-height:440px}.hero-cat.cashmere{width:42%;left:0}.hero-cat.coco{width:40%;left:29%}.hero-cat.cosmo{width:46%;right:0}.hero-badge{width:90px;height:90px;font-size:.76rem}
  .hero-ctas{display:grid}.hero-ctas .btn{justify-content:center}.hero-micro{display:grid;gap:8px}
  .trust-item{padding:15px 8px;font-size:.55rem}.trust-item b{font-size:.95rem}
  .mascots,.collections,.shop,.corporate,.how{padding-block:70px}.mascot-hero{height:390px}
  .collection-mosaic{grid-template-rows:repeat(3,350px)}.occasion-overlay{display:block;inset:auto 10px 10px;padding:17px}.occasion-overlay .btn{margin-top:12px}.coll-row{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.pdesc{font-size:.72rem}.ptile{aspect-ratio:1}.pname{font-size:.82rem}
  .how-grid{grid-template-columns:1fr}.how-card{border-right:0;border-bottom:1px solid var(--hairline)}
  .cross-panel{padding:38px 25px}.cross-panel h2{font-size:2rem}
  .footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
}

/* ── HERO FIX (audit 2026-08-20) ──
   The three cats were absolutely positioned so Cosmo (right:-2%) was sliced off,
   Coco (left:32%) overlapped Cashmere so their cake pops merged into floating
   blobs, and the vertical "THE POP CATS" text collided with Cosmo. Reposition to
   a balanced, fully-contained row on a shared baseline; drop the wordmark behind. */
.hero-cat.cashmere{width:40%;left:0;bottom:0}
.hero-cat.coco{width:37%;left:31%;top:auto;bottom:0;z-index:2}
.hero-cat.cosmo{width:40%;right:0;bottom:0}
.hero-stage::after{z-index:0;right:1px;bottom:4px;color:rgba(255,250,242,.20);font-size:clamp(2.2rem,4.8vw,5rem)}
.hero-badge{right:3%;top:4%}
@media (max-width:880px){
  .hero{min-height:auto}
  .hero-grid{min-height:auto}
  .hero-stage{min-height:340px;height:360px}
  .hero-cat.cashmere,.hero-cat.cosmo{width:37%}
  .hero-cat.coco{width:34%}
  .hero-stage::after{display:none}
}

/* ── CHECKOUT dialog (real order capture, added 2026-08-20) ── */
#checkout{max-width:560px}
.co-summary{background:var(--cream-2,#F6E8D3);border-radius:8px;padding:14px 16px;margin-bottom:18px;font-size:.82rem}
.co-line{display:flex;justify-content:space-between;gap:14px;padding:3px 0}
.co-line span{color:var(--cocoa-soft,#6B4530)}
.co-total{border-top:1px solid rgba(75,42,24,.18);margin-top:7px;padding-top:9px;font-size:.95rem}
.co-total b,.co-line b{font-family:var(--font-display);white-space:nowrap}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:14px}
.co-grid label{display:flex;flex-direction:column;gap:5px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--cocoa-faint,#9A7A64)}
.co-grid label.co-full{grid-column:1 / -1}
.co-grid label span{color:var(--cocoa-faint,#9A7A64);font-weight:600;text-transform:none;letter-spacing:0}
.co-grid input{padding:11px 13px;border:2px solid var(--hairline,#EAD9C2);border-radius:8px;font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--cocoa,#4B2A18);background:#fff;text-transform:none}
.co-grid input:focus{outline:none;border-color:var(--coral,#F59A35)}
.co-check{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:var(--cocoa-soft,#6B4530);margin-bottom:14px;cursor:pointer}
.co-check input{width:auto}
.co-msg{font-size:.8rem;color:#B3261E;margin-top:10px;text-align:center;min-height:1em}
.co-done{text-align:center;padding:8px 4px 4px}
.co-check-mark{width:64px;height:64px;border-radius:50%;background:#2E7D32;color:#fff;font-size:2rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.co-done h3{margin-bottom:8px}
@media(max-width:520px){.co-grid{grid-template-columns:1fr}}

/* Honest placeholder for products with no dedicated photo yet (supplier-pending).
   Never substitute mascot or trio art here — it would read as a real product shot. */
.photo-pending{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(135deg,#f6efe4,#f6efe4 12px,#f1e7d8 12px,#f1e7d8 24px);color:var(--cocoa,#4B2A18);text-align:center}
.photo-pending .pp-mark{font-size:1.5rem;opacity:.5}
.photo-pending .pp-text{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;line-height:1.5;opacity:.75}