/* ZEEFA design system — edit the tokens below to restyle the whole site */
:root{
  --lavender:#E6DDF0; --lilac:#C9B5DA; --cream:#F8F4EC; --white:#fff;
  --plum:#493F4B; --taupe:#D8C8B5;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
  --max:1240px; --pad:clamp(1.25rem,4vw,3rem); --gap:clamp(1rem,2vw,1.75rem);
  --section:clamp(3.5rem,8vw,7rem); --ease:.4s cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1rem/1.7 var(--sans);color:var(--plum);background:var(--cream);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.9rem,7vw,6rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:1.45rem}
p{max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--section) 0}
.section--lav{background:var(--lavender)}
.section--white{background:var(--white)}
.lead{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.45}
.muted{opacity:.72}

/* Buttons & links */
.btn{display:inline-block;padding:.95rem 2.2rem;border:1px solid var(--plum);background:var(--plum);color:var(--cream);font-size:.92rem;letter-spacing:.06em;transition:background var(--ease),color var(--ease)}
.btn:hover{background:transparent;color:var(--plum)}
.btn--ghost{background:transparent;color:var(--plum)}
.btn--ghost:hover{background:var(--plum);color:var(--cream)}
.link{border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity var(--ease)}
.link:hover{opacity:.6}

/* Announcement bar + header */
.announce{background:var(--plum);color:var(--lavender);text-align:center;font-size:.85rem;letter-spacing:.05em;padding:.6rem var(--pad)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,244,236,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(73,63,75,.12)}
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:76px}
.logo{font-family:var(--serif);font-size:2rem;font-weight:500;letter-spacing:.3em;margin-right:-.3em;text-align:center}
.nav ul{display:flex;gap:clamp(1rem,2.5vw,2.25rem);font-size:.93rem}
.nav a{position:relative;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-tag{justify-self:end;font-family:var(--serif);font-style:italic;font-size:1.05rem}
.nav-toggle{display:none;justify-self:start;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:.5rem 0}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1.05fr;min-height:min(86vh,760px);background:var(--lavender)}
.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:1.6rem;padding:var(--pad) clamp(1.25rem,6vw,5.5rem)}
.hero__img{min-height:420px}
.hero h1{margin-left:-.04em}

/* Section heads */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.head--center{display:block;text-align:center}
.head--center p{margin:1rem auto 0}

/* Product grid & cards */
.grid{display:grid;gap:var(--gap) var(--gap)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card__img{aspect-ratio:4/5;overflow:hidden;background:var(--lavender)}
.card__img img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.04)}
.card__body{padding-top:.9rem}
.card__cat{font-size:.82rem;opacity:.65}
.card__name{font-family:var(--serif);font-size:1.35rem;line-height:1.2}
.card__price{font-size:.95rem}
.badge{display:inline-block;font-size:.78rem;padding:.2rem .7rem;background:var(--white);border:1px solid var(--taupe)}

/* Categories */
.cat{position:relative;aspect-ratio:3/4;overflow:hidden;display:block}
.cat img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cat:hover img{transform:scale(1.05)}
.cat span{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(248,244,236,.92);padding:.8rem 1rem;font-family:var(--serif);font-size:1.4rem;display:flex;justify-content:space-between}

/* Split layouts, banner */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.split--flip>:first-child{order:2}
.split__img{aspect-ratio:4/5;max-height:720px;overflow:hidden}
.stack{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.banner{position:relative;min-height:70vh;display:grid;align-items:end;color:var(--cream)}
.banner img{position:absolute;inset:0}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(73,63,75,.78),rgba(73,63,75,.05) 65%)}
.banner .wrap{position:relative;z-index:1;padding-bottom:clamp(2rem,6vw,4.5rem)}

/* Newsletter (visual only) */
.news{text-align:center}
.news__form{display:flex;max-width:520px;margin:2rem auto 0;border-bottom:1px solid var(--plum)}
.news__field{flex:1;text-align:left;padding:.9rem 0;opacity:.6}
.news__btn{padding:.9rem 0 .9rem 1rem;font-family:var(--serif);font-size:1.2rem}

/* Page head, filters */
.page-head{background:var(--lavender);padding:clamp(3rem,7vw,6rem) 0;text-align:center}
.page-head p{margin:1.2rem auto 0}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.5rem}
.pill{padding:.45rem 1.2rem;border:1px solid var(--taupe);font-size:.9rem;transition:background var(--ease)}
.pill:hover,.pill--on{background:var(--plum);color:var(--cream);border-color:var(--plum)}

/* Product detail */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.gallery__main{grid-column:1/-1;aspect-ratio:4/5;overflow:hidden}
.gallery__thumb{aspect-ratio:1;overflow:hidden}
.pdp__info{position:sticky;top:110px;display:flex;flex-direction:column;gap:1.3rem}
.price{font-size:1.4rem}
.swatches{display:flex;gap:.7rem}
.swatch{width:34px;height:34px;border-radius:50%;border:1px solid rgba(73,63,75,.3);outline:1px solid transparent;outline-offset:3px}
.swatch--on{outline-color:var(--plum)}
.soon{display:inline-block;align-self:flex-start;padding:.9rem 2.2rem;border:1px solid var(--plum);font-family:var(--serif);font-size:1.3rem;font-style:italic;background:var(--lavender)}
.spec{border-top:1px solid rgba(73,63,75,.18);padding-top:1rem}
.spec h3{font-size:1.2rem;margin-bottom:.4rem}
.spec li{padding:.15rem 0;font-size:.95rem}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.contact dl{display:grid;gap:1.4rem}
.contact dt{font-family:var(--serif);font-size:1.3rem}
.ph-box{border:1px dashed var(--lilac);padding:.6rem 1rem;display:inline-block;background:var(--white)}

/* Footer */
.site-footer{background:var(--plum);color:var(--lavender);padding:clamp(3rem,6vw,5rem) 0 2rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.site-footer .logo{text-align:left;font-size:1.8rem;color:var(--cream)}
.site-footer h3{font-family:var(--sans);font-size:.95rem;font-weight:500;margin-bottom:.8rem;color:var(--cream)}
.site-footer li{padding:.2rem 0;font-size:.93rem}
.site-footer a:hover{color:var(--cream)}
.footer__base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(230,221,240,.2);font-size:.82rem;opacity:.75;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* Responsive */
@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .pdp__info{position:static}
}
@media(max-width:820px){
  .site-header .wrap{grid-template-columns:1fr auto 1fr;min-height:64px}
  .logo{font-size:1.6rem}
  .header-tag{display:none}
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid rgba(73,63,75,.12);display:none;padding:1rem var(--pad) 1.5rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:.4rem;font-size:1.05rem}
  .hero,.split,.pdp,.contact{grid-template-columns:1fr}
  .hero__img{order:-1;min-height:0;aspect-ratio:4/4.2}
  .split--flip>:first-child{order:0}
  .grid--3{grid-template-columns:1fr 1fr}
  .head{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .grid--4,.grid--3{gap:1.25rem .75rem}
  .card__name{font-size:1.15rem}
  .footer__grid{grid-template-columns:1fr}
  .banner{min-height:60vh}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}