/* =================================================================
   LuvEco — Shop stylesheet v2
   Direction: Oliver Bonas energy — joyful, colourful, feminine,
   gift-shop browse. Colour-blocked category worlds.
   ================================================================= */

:root {
  --green:#3F4A35; --green-dk:#2C3525;
  --magenta:#9B2F63; --magenta-soft:#F3DDE8;
  --mustard:#E0A92E; --mustard-soft:#F8ECCF;
  --coral:#E07856; --coral-soft:#F9E0D6;
  --sage:#7A9764; --sage-soft:#E4EBDB;
  --teal:#2F7A7A; --teal-soft:#D5E8E6;
  --ink:#2C3525; --ink-soft:#5E6353;
  --cream:#F7F1E1; --cream-deep:#F0E7D0; --white:#FFFFFF; --border:#E8DFC8;
  --display:'Fraunces','Cormorant Garamond',Georgia,serif;
  --body:'Mulish','Inter',system-ui,sans-serif;
  --t-hero:clamp(2.75rem,6vw,4.75rem); --t-h2:clamp(1.9rem,3.5vw,2.85rem);
  --t-h3:1.2rem; --t-body:1.0625rem; --t-sm:.9375rem; --t-xs:.8125rem;
  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;
  --r-sm:8px; --r-md:16px; --r-lg:28px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(44,53,37,0.06); --shadow-md:0 8px 24px rgba(44,53,37,0.10); --shadow-lg:0 18px 50px rgba(44,53,37,0.16);
  --max:1280px; --header-h:76px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{margin:0;font-family:var(--body);font-size:var(--t-body);line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;height:auto;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto;}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--s5);}
@media (min-width:768px){.container{padding:0 var(--s8);}}

h1,h2,h3,h4{font-family:var(--display);color:var(--green);margin:0;line-height:1.08;font-weight:var(--w-semi);}
h1{font-size:var(--t-hero);letter-spacing:-0.02em;}
h2{font-size:var(--t-h2);letter-spacing:-0.01em;}
h3{font-size:var(--t-h3);font-family:var(--body);font-weight:var(--w-bold);letter-spacing:0;}
h1 em,h2 em{font-style:italic;font-weight:var(--w-reg);}
.eyebrow{font-family:var(--body);font-size:var(--t-xs);font-weight:var(--w-bold);letter-spacing:0.18em;text-transform:uppercase;margin:0 0 var(--s4);}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--s4) var(--s10);border-radius:var(--r-pill);font-family:var(--body);font-weight:var(--w-bold);font-size:var(--t-sm);letter-spacing:0.01em;transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;border:2px solid transparent;text-align:center;line-height:1;}
.btn-primary{background:var(--green);color:var(--cream);}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--green-dk);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-coral{background:var(--coral);color:var(--white);}
.btn-coral:hover,.btn-coral:focus-visible{background:#cc6645;transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;color:var(--green);border-color:var(--green);}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--green);color:var(--cream);}
.btn-small{padding:var(--s3) var(--s6);font-size:var(--t-xs);background:var(--green);color:var(--cream);border-radius:var(--r-pill);font-weight:var(--w-bold);}
.btn-small:hover,.btn-small:focus-visible{background:var(--green-dk);}
.btn-full{width:100%;}
.link-underline{font-weight:var(--w-bold);color:var(--green);border-bottom:2px solid currentColor;padding-bottom:2px;font-size:var(--t-sm);}
.link-underline:hover{color:var(--coral);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:var(--r-sm);}

.announce{background:var(--green);color:var(--cream);text-align:center;}
.announce p{margin:0;padding:var(--s3) var(--s4);font-size:var(--t-xs);font-weight:var(--w-semi);letter-spacing:0.04em;}
.announce strong{color:var(--mustard);}

.site-header{position:sticky;top:0;z-index:50;background:rgba(247,241,225,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);min-height:var(--header-h);}
.logo img{width:150px;}
@media (min-width:768px){.logo img{width:172px;}}
.site-nav{display:none;gap:var(--s6);font-weight:var(--w-bold);font-size:var(--t-sm);}
.site-nav a{color:var(--ink);position:relative;padding:var(--s2) 0;}
.site-nav a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2.5px;border-radius:2px;background:var(--coral);transition:width .2s ease;}
.site-nav a:hover::after,.site-nav a:focus-visible::after{width:100%;}
@media (min-width:980px){.site-nav{display:flex;}}
.cart-button{position:relative;color:var(--ink);padding:var(--s2);display:flex;}
.cart-count{position:absolute;top:-3px;right:-5px;background:var(--coral);color:#fff;font-size:.6875rem;font-weight:var(--w-bold);min-width:19px;height:19px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;padding:0 5px;}

.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 20%,var(--magenta-soft) 0%,transparent 40%),radial-gradient(circle at 88% 80%,var(--teal-soft) 0%,transparent 42%),var(--cream);}
.hero-inner{display:grid;grid-template-columns:1fr;gap:var(--s10);align-items:center;padding-top:var(--s16);padding-bottom:var(--s16);}
.hero-text h1{margin-bottom:var(--s5);}
.hero-text .eyebrow{color:var(--magenta);}
.hero-sub{font-size:1.1875rem;color:var(--ink-soft);max-width:46ch;margin:0 0 var(--s8);}
.hero-cta{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;}
.hero-media{position:relative;}
.hero-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/6;background:var(--white);box-shadow:var(--shadow-lg);border:10px solid var(--white);}
.hero-frame img{width:100%;height:100%;object-fit:cover;}
.hero-frame.media-missing img{display:none;}
.hero-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s6);text-align:center;background:radial-gradient(circle at 30% 25%,var(--magenta-soft),transparent 60%),radial-gradient(circle at 75% 80%,var(--teal-soft),transparent 60%),var(--cream-deep);}
.hero-frame.media-missing .hero-ph{display:flex;}
.hero-ph img{width:62%;max-width:240px;}
.hero-ph p{margin:0;font-size:var(--t-xs);color:var(--ink-soft);font-weight:var(--w-semi);}
.hero-ph span{font-family:monospace;font-size:.6875rem;color:var(--ink-soft);opacity:.7;}
.hero-dot{position:absolute;border-radius:50%;z-index:2;}
.hero-dot.d1{width:60px;height:60px;background:var(--mustard);top:-18px;right:36px;}
.hero-dot.d2{width:38px;height:38px;background:var(--magenta);bottom:48px;left:-16px;}
.hero-dot.d3{width:26px;height:26px;background:var(--teal);top:40%;right:-12px;}
@media (min-width:900px){.hero-inner{grid-template-columns:1.05fr .95fr;gap:var(--s16);padding-top:var(--s24);padding-bottom:var(--s24);}}

.trust{background:var(--green);color:var(--cream);}
.trust-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4) var(--s10);padding:var(--s5) 0;text-align:center;}
.trust-inner p{margin:0;font-size:var(--t-sm);font-weight:var(--w-semi);}
.trust-inner span{opacity:0.8;font-weight:var(--w-reg);}

.cat-band{padding:var(--s20) 0;}
.cat-band .container{display:grid;grid-template-columns:1fr;gap:var(--s10);align-items:center;}
.cat-head .eyebrow{color:var(--band-strong);}
.cat-head h2{margin-bottom:var(--s3);}
.cat-head p{color:var(--ink-soft);margin:0 0 var(--s6);max-width:42ch;}
.cat-band.world-magenta{background:var(--magenta-soft);--band-strong:var(--magenta);}
.cat-band.world-coral{background:var(--coral-soft);--band-strong:var(--coral);}
.cat-band.world-teal{background:var(--teal-soft);--band-strong:var(--teal);}
.cat-band.world-mustard{background:var(--mustard-soft);--band-strong:#b5841f;}
.cat-band.world-sage{background:var(--sage-soft);--band-strong:#5e7a48;}
.cat-products{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);}
@media (min-width:560px){.cat-products{grid-template-columns:repeat(3,1fr);gap:var(--s5);}}
.pcard{background:var(--white);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.pcard-photo{position:relative;aspect-ratio:1/1;background:var(--cream-deep);overflow:hidden;}
.pcard-photo img{width:100%;height:100%;object-fit:cover;}
.pcard-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);color:var(--band-strong);text-align:center;padding:var(--s4);}
.pcard-photo.photo-missing .pcard-ph{display:flex;}
.pcard-ph svg{opacity:0.55;}
.pcard-ph p{margin:0;font-size:var(--t-xs);color:var(--ink-soft);}
.pcard-ph span{font-family:monospace;font-size:.6875rem;opacity:.65;word-break:break-all;}
.pcard-tag{position:absolute;top:var(--s3);left:var(--s3);background:var(--band-strong);color:#fff;font-size:.6875rem;font-weight:var(--w-bold);padding:var(--s1) var(--s3);border-radius:var(--r-pill);letter-spacing:0.03em;z-index:1;}
.pcard-info{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1;}
.pcard-info h3{font-size:1rem;}
.pcard-blurb{font-size:var(--t-xs);color:var(--ink-soft);margin:0;flex:1;line-height:1.5;}
.pcard-buy{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2);}
.pcard-price{font-family:var(--display);font-size:1.3rem;font-weight:var(--w-semi);color:var(--green);}
@media (min-width:900px){.cat-band .container{grid-template-columns:0.85fr 2.15fr;gap:var(--s16);}.cat-band.flip .cat-head{order:2;}}

.story{padding:var(--s24) 0;background:var(--green);color:var(--cream);}
.story .container{display:grid;grid-template-columns:1fr;gap:var(--s12);align-items:center;}
.story-media{display:flex;justify-content:center;}
.story-media img{width:100%;max-width:340px;border-radius:50%;background:var(--cream);padding:var(--s4);}
.story-text .eyebrow{color:var(--mustard);}
.story-text h2{color:var(--cream);margin-bottom:var(--s5);}
.story-text p{opacity:0.9;margin:0 0 var(--s4);max-width:52ch;}
.story-text .btn{margin-top:var(--s4);}
@media (min-width:900px){.story .container{grid-template-columns:0.85fr 1.15fr;gap:var(--s16);}}

.gift{padding:var(--s20) 0;background:linear-gradient(120deg,var(--magenta-soft),var(--mustard-soft),var(--teal-soft));}
.gift-inner{text-align:center;max-width:620px;margin:0 auto;}
.gift .eyebrow{color:var(--magenta);}
.gift h2{margin-bottom:var(--s4);}
.gift p{color:var(--ink-soft);margin:0 0 var(--s8);font-size:1.0625rem;}

.news{padding:var(--s20) 0;background:var(--coral);color:#fff;}
.news-inner{text-align:center;max-width:560px;margin:0 auto;}
.news h2{color:#fff;margin-bottom:var(--s3);}
.news p{opacity:0.95;margin:0 0 var(--s8);}
.news-form{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;}
.news-form input{flex:1;min-width:220px;padding:var(--s4) var(--s6);border-radius:var(--r-pill);border:2px solid transparent;font-family:var(--body);font-size:var(--t-sm);background:#fff;color:var(--ink);}
.news-form .btn{background:var(--green);color:var(--cream);}
.news-form .btn:hover{background:var(--green-dk);}
.news-note{margin-top:var(--s5);font-size:var(--t-xs);opacity:0.95;}

.footer{background:var(--green-dk);color:var(--cream);padding:var(--s16) 0 var(--s8);}
.footer-top{display:grid;grid-template-columns:1fr;gap:var(--s12);margin-bottom:var(--s12);}
@media (min-width:768px){.footer-top{grid-template-columns:1fr 2fr;gap:var(--s16);}}
.footer-logo{font-family:var(--display);font-size:1.9rem;font-weight:var(--w-semi);letter-spacing:0.04em;margin:0 0 var(--s2);color:var(--cream);}
.footer-tag{font-family:var(--display);font-style:italic;opacity:0.85;margin:0;max-width:26ch;}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);}
.footer-nav h4{font-family:var(--body);text-transform:uppercase;letter-spacing:0.1em;font-size:var(--t-xs);color:var(--mustard);margin:0 0 var(--s4);font-weight:var(--w-bold);}
.footer-nav a{display:block;font-size:var(--t-sm);padding:var(--s2) 0;opacity:0.85;}
.footer-nav a:hover{opacity:1;color:var(--mustard);}
.footer-base{border-top:1px solid rgba(247,241,225,0.18);padding-top:var(--s8);text-align:center;}
.footer-base p{font-size:var(--t-xs);opacity:0.65;margin:0;}

.cart-overlay{position:fixed;inset:0;background:rgba(44,53,37,0.45);z-index:90;opacity:0;transition:opacity .3s ease;}
.cart-overlay.open{opacity:1;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--cream);z-index:100;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;box-shadow:var(--shadow-lg);}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s6);border-bottom:1px solid var(--border);}
.cart-head h2{font-size:1.5rem;}
.cart-close{font-size:1.25rem;color:var(--ink);padding:var(--s2);line-height:1;}
.cart-delivery{margin:0;padding:var(--s3) var(--s6);font-size:var(--t-xs);background:var(--mustard-soft);color:var(--ink-soft);text-align:center;font-weight:var(--w-semi);}
.cart-delivery.unlocked{background:var(--sage-soft);color:#4e6b3c;}
.cart-delivery:empty{display:none;}
.cart-items{flex:1;overflow-y:auto;padding:var(--s4) var(--s6);}
.cart-empty{text-align:center;color:var(--ink-soft);padding:var(--s16) var(--s4);}
.cart-empty a{display:block;margin:var(--s4) auto 0;color:var(--green);border-bottom:2px solid var(--green);width:fit-content;font-weight:var(--w-bold);}
.cart-item{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--border);}
.cart-item-name{margin:0;font-size:var(--t-sm);font-weight:var(--w-bold);}
.cart-item-price{margin:0;font-size:var(--t-xs);color:var(--ink-soft);}
.cart-item-qty{display:flex;align-items:center;gap:var(--s2);}
.cart-item-qty button{width:28px;height:28px;border-radius:var(--r-pill);background:var(--white);border:1.5px solid var(--border);color:var(--ink);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;}
.cart-item-qty button:hover{background:var(--cream-deep);}
.cart-item-qty span{min-width:18px;text-align:center;font-size:var(--t-sm);font-weight:var(--w-semi);}
.cart-item-line{margin:0;font-weight:var(--w-bold);font-size:var(--t-sm);min-width:54px;text-align:right;}
.cart-foot{padding:var(--s6);border-top:1px solid var(--border);background:var(--white);}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 var(--s2);}
.cart-subtotal strong{font-family:var(--display);font-size:1.5rem;color:var(--green);}
.cart-small{font-size:var(--t-xs);color:var(--ink-soft);margin:0 0 var(--s4);}
#checkout-note{margin-top:var(--s3);margin-bottom:0;padding:var(--s3);background:var(--mustard-soft);border-radius:var(--r-sm);line-height:1.5;}
