/* ===========================================================
   Silk N Siren Femme — Design tokens
   Colour:  --wine (deep brand burgundy), --wine-light (accent),
            --blush (page bg), --cream (card bg), --ink (text)
   Type:    'Playfair Display' (serif display), 'Jost' (sans body),
            'Cormorant Garamond' italic (eyebrow / accent)
   Signature: scalloped lace-edge divider + hanger bullet, echoing
              the lace trim on the garments themselves.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Cormorant+Garamond:ital@1&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --wine: #7A2340;
  --wine-deep: #4E1729;
  --wine-light: #B5567C;
  --blush: #FBEEF0;
  --blush-deep: #F3DEE2;
  --cream: #FFFBF8;
  --ink: #2A1620;
  --ink-soft: #6E5560;
  --gold: #C79A5D;
  --radius: 2px;
  --shadow: 0 10px 30px -12px rgba(122,35,64,0.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--blush);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Playfair Display', serif;
  color:var(--wine-deep);
  margin:0 0 .4em;
  letter-spacing:.01em;
}

.eyebrow{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.25rem;
  color:var(--wine-light);
  letter-spacing:.04em;
  margin-bottom:.25em;
  display:block;
}

.tracked{
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:500;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* -------------------- scalloped divider (signature element) -------------------- */
.scallop{
  width:100%;
  height:16px;
  background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--wine) 9.5px);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: center top;
}
.scallop.flip{transform:rotate(180deg);}
.scallop.on-blush{background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--blush) 9.5px);}
.scallop.on-cream{background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--cream) 9.5px);}
.scallop.on-wine{background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--wine-deep) 9.5px);}

/* -------------------- top notice bar -------------------- */
.notice-bar{
  background:var(--wine-deep);
  color:var(--blush);
  text-align:center;
  padding:9px 16px;
  font-size:.78rem;
  letter-spacing:.08em;
}
.notice-bar b{color:var(--gold);}

/* -------------------- nav -------------------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--blush);
  border-bottom:1px solid var(--blush-deep);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  header.site{
    background:rgba(251,238,240,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:16px;
  max-width:1180px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand-mark{width:38px;height:38px;}
.brand-word{font-family:'Playfair Display', serif; font-weight:700; font-size:1.35rem; color:var(--wine-deep); line-height:1; white-space:nowrap;}
.brand-sub{display:block; font-family:'Jost'; font-size:.55rem; letter-spacing:.2em; color:var(--wine-light); margin-top:2px; white-space:nowrap;}

.nav-links{display:flex; gap:clamp(16px,2.4vw,34px); align-items:center; flex-wrap:nowrap;}
.nav-links a{
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); position:relative; padding:4px 0; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--wine); transition:width .25s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--wine);}

.nav-cta{
  background:var(--wine); color:#fff; padding:10px 20px;
  border-radius:999px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--wine); transition:background .2s, color .2s; flex:none; white-space:nowrap;
}
.nav-cta:hover{background:var(--wine-deep);}

.nav-toggle{display:none; background:none; border:0; font-size:1.5rem; color:var(--wine-deep); flex:none;}

/* Medium widths: keep links but drop the tagline and tighten gaps before the hamburger takes over */
@media (max-width:1080px){
  .brand-sub{display:none;}
}

@media (max-width:900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--cream); z-index:40;
    flex-direction:column; align-items:flex-start; padding:24px; gap:18px;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.2);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform .2s ease, opacity .2s ease, visibility .2s;
    border-bottom:1px solid var(--blush-deep);
  }
  .nav-links.open{transform:translateY(0); opacity:1; visibility:visible;}
  .nav-cta{display:none;}
  .nav-toggle{display:block;}
}

/* -------------------- hero -------------------- */
.hero{
  position:relative;
  padding:56px 0 76px;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem, 4.3vw, 3.6rem);
  line-height:1.08;
}
.hero h1 em{color:var(--wine); font-style:italic;}
.hero p.lede{
  color:var(--ink-soft); font-size:1.05rem; max-width:46ch; margin:18px 0 28px;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--wine);
  transition:all .2s ease;
}
.btn-primary{background:var(--wine); color:#fff;}
.btn-primary:hover{background:var(--wine-deep); border-color:var(--wine-deep);}
.btn-ghost{background:transparent; color:var(--wine);}
.btn-ghost:hover{background:var(--wine); color:#fff;}

.hero-badges{display:flex; gap:26px; margin-top:38px; flex-wrap:wrap;}
.hero-badges div{font-size:.75rem; color:var(--ink-soft); letter-spacing:.04em;}
.hero-badges strong{display:block; font-family:'Playfair Display'; color:var(--wine-deep); font-size:1.15rem;}

.hero-collage{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.hero-collage img{
  width:100%; height:100%; object-fit:cover; border-radius:2px;
  box-shadow:var(--shadow);
}
.hero-collage .tall{grid-row:span 2; aspect-ratio:3/4.1;}
.hero-collage .short{aspect-ratio:3/2.35;}
.hero-tag{
  position:absolute; bottom:-18px; left:-18px; background:var(--cream);
  padding:14px 20px; box-shadow:var(--shadow); max-width:230px;
  font-size:.78rem; color:var(--ink-soft); border-left:3px solid var(--wine);
}
.hero-tag b{display:block; color:var(--wine-deep); font-family:'Playfair Display'; font-size:1rem;}

/* -------------------- section shell -------------------- */
section{padding:76px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 44px;}
.section-head h2{font-size:clamp(1.8rem,3vw,2.4rem);}
.section-head p{color:var(--ink-soft);}

/* -------------------- strip / trust bar -------------------- */
.strip{
  background:var(--wine-deep); color:var(--blush); padding:28px 0;
}
.strip .container{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;
}
.strip-item{display:flex; align-items:center; gap:10px; font-size:.85rem; letter-spacing:.03em;}
.strip-item .dot{width:6px;height:6px;background:var(--gold); border-radius:50%; flex:none;}

/* -------------------- category cards (home) -------------------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.cat-card{
  position:relative; border-radius:2px; overflow:hidden; aspect-ratio:3/3.7;
  box-shadow:var(--shadow);
}
.cat-card img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease;}
.cat-card:hover img{transform:scale(1.06);}
.cat-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(78,23,41,0) 40%, rgba(46,13,24,.86) 100%);
}
.cat-card-label{
  position:absolute; left:0; right:0; bottom:0; padding:20px; z-index:2;
  color:#fff;
}
.cat-card-label .eyebrow{color:var(--gold); font-size:1.05rem;}
.cat-card-label h3{color:#fff; font-size:1.15rem; margin:0;}
@media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr;}}

/* -------------------- shop filters -------------------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:40px;
}
.filter-chip{
  padding:10px 20px; border-radius:999px; border:1px solid var(--wine-light);
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--wine);
  background:transparent; transition:all .2s ease;
}
.filter-chip.active,.filter-chip:hover{background:var(--wine); color:#fff; border-color:var(--wine);}

.search-row{
  max-width:420px; margin:0 auto 34px; position:relative;
}
.search-row input{
  width:100%; padding:13px 18px; border-radius:999px; border:1px solid var(--blush-deep);
  background:var(--cream); font-family:'Jost'; font-size:.9rem; color:var(--ink);
}
.search-row input:focus{outline:2px solid var(--wine-light); outline-offset:2px;}

/* -------------------- catalogue: horizontal scroll rows -------------------- */
.catalogue-root{display:flex; flex-direction:column;}
.category-block{margin-bottom:52px;}
.category-block:last-child{margin-bottom:0;}
.category-block-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:18px; flex-wrap:wrap;
}
.category-block-head h3{font-size:1.3rem; margin:0;}
.cat-count{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.scroll-arrows{display:flex; gap:8px;}
.scroll-arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--wine-light);
  background:var(--cream); display:flex; align-items:center; justify-content:center;
  color:var(--wine); flex:none; padding:0;
}
.scroll-arrow svg{width:16px; height:16px;}
.scroll-arrow:hover{background:var(--wine); color:#fff;}

.scroll-row{
  display:flex; gap:20px; overflow-x:auto; padding:4px 4px 22px;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.scroll-row::-webkit-scrollbar{height:7px;}
.scroll-row::-webkit-scrollbar-track{background:var(--blush-deep); border-radius:999px;}
.scroll-row::-webkit-scrollbar-thumb{background:var(--wine-light); border-radius:999px;}

.scroll-row .card{
  flex:0 0 240px; scroll-snap-align:start;
}
@media (max-width:560px){
  .scroll-row .card{flex-basis:186px;}
  .scroll-arrows{display:none;} /* touch-scroll is the primary interaction on small screens */
}

.card{
  background:var(--cream); border-radius:2px; overflow:hidden;
  box-shadow:0 6px 18px -10px rgba(122,35,64,.22);
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--blush-deep);}
.card-media img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.05);}
.card-cat{
  position:absolute; top:12px; left:12px; background:rgba(255,251,248,.92);
  color:var(--wine); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-body h3{font-size:1.02rem; margin:0; line-height:1.3;}
.card-desc{font-size:.8rem; color:var(--ink-soft); flex:1; margin:0 0 8px;}
.card-meta{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.card-price{font-family:'Playfair Display'; font-weight:700; color:var(--wine-deep); font-size:1.15rem;}
.card-size{font-size:.7rem; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase;}
.card-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 8px; border-radius:999px; background:var(--wine); color:#fff;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--wine);
  transition:background .2s; flex:1; white-space:nowrap;
}
.card-btn:hover{background:var(--wine-deep);}
.card-btn svg{width:14px;height:14px;flex:none;}

.card-actions{display:flex; gap:8px;}
.card-btn-cart{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 8px; border-radius:999px; background:transparent; color:var(--wine);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--wine-light);
  transition:background .2s, color .2s; flex:1; white-space:nowrap;
}
.card-btn-cart:hover{background:var(--wine); color:#fff;}
.card-btn-cart svg{width:14px;height:14px;flex:none;}

.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink-soft);
}

/* -------------------- how pre-order works -------------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.step{text-align:center; padding:0 12px;}
.step-num{
  width:46px;height:46px;border-radius:50%; border:1px solid var(--wine);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  font-family:'Playfair Display'; color:var(--wine); font-size:1.05rem;
}
.step h3{font-size:1rem; margin-bottom:6px;}
.step p{font-size:.85rem; color:var(--ink-soft); margin:0;}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr); row-gap:34px;}}

/* -------------------- about -------------------- */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.about-grid img{border-radius:2px; box-shadow:var(--shadow);}
.about-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px;}
.about-list li{display:flex; gap:12px; font-size:.92rem; color:var(--ink-soft);}
.about-list .hanger{flex:none; width:20px; height:20px; color:var(--wine); margin-top:2px;}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;}}

/* -------------------- order / whatsapp section -------------------- */
.order-section{
  background:var(--wine-deep); color:var(--blush);
}
.order-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.order-grid h2{color:#fff;}
.order-grid .eyebrow{color:var(--gold);}
.order-grid p{color:rgba(251,238,240,.82);}
.order-card{
  background:var(--cream); color:var(--ink); border-radius:2px; padding:30px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.4);
}
.order-card h3{color:var(--wine-deep); font-size:1.2rem;}
.order-form label{display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:16px 0 6px;}
.order-form input, .order-form select, .order-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--blush-deep); border-radius:2px;
  font-family:'Jost'; font-size:.9rem; background:#fff; color:var(--ink);
}
.order-form textarea{min-height:88px; resize:vertical;}
.order-form input:focus, .order-form select:focus, .order-form textarea:focus{
  outline:2px solid var(--wine-light); outline-offset:1px;
}
.order-form button{width:100%; margin-top:22px;}
.order-note{font-size:.72rem; color:var(--ink-soft); margin-top:12px;}

.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:58px;height:58px;border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
}
.wa-float svg{width:28px;height:28px;}
body.cart-open .wa-float{display:none;}

/* -------------------- cart -------------------- */
.cart-toggle{
  position:relative; background:none; border:0; color:var(--wine-deep);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none;
}
.cart-toggle svg{width:22px; height:22px;}
.cart-toggle.pulse{animation:cart-pulse .4s ease;}
@keyframes cart-pulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.22);}
  100%{transform:scale(1);}
}
.cart-badge{
  position:absolute; top:-2px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--wine); color:#fff; font-size:.65rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

.cart-overlay{
  position:fixed; inset:0; background:rgba(42,22,32,.45); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
}
.cart-overlay.open{opacity:1; visibility:visible;}

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px, 100vw); z-index:80;
  background:var(--cream); box-shadow:-14px 0 34px -16px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s ease;
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--blush-deep); flex:none;
}
.cart-drawer-head h3{margin:0; font-size:1.15rem;}
.cart-close{background:none; border:0; font-size:1.6rem; line-height:1; color:var(--ink-soft); padding:0 4px;}
.cart-close:hover{color:var(--wine);}

.cart-items{flex:1; overflow-y:auto; padding:10px 22px;}
.cart-item{
  display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--blush-deep);
}
.cart-item img{width:56px; height:70px; object-fit:cover; border-radius:2px; flex:none;}
.cart-item-info{flex:1; display:flex; flex-direction:column; gap:4px;}
.cart-item-info h4{margin:0; font-size:.88rem; font-family:'Jost'; font-weight:500; color:var(--ink); line-height:1.3;}
.cart-item-size{font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.cart-item-row{display:flex; align-items:center; justify-content:space-between; margin-top:4px;}
.cart-item-price{font-family:'Playfair Display'; font-weight:700; color:var(--wine-deep); font-size:.9rem;}
.cart-item-remove{background:none; border:0; color:var(--ink-soft); font-size:1.2rem; line-height:1; flex:none; padding:0 2px;}
.cart-item-remove:hover{color:#b3261e;}

.qty-stepper{
  display:flex; align-items:center; gap:10px; border:1px solid var(--blush-deep);
  border-radius:999px; padding:2px 10px;
}
.qty-stepper button{background:none; border:0; color:var(--wine); font-size:1rem; line-height:1; width:16px;}
.qty-stepper span{font-size:.82rem; min-width:14px; text-align:center;}

.cart-drawer-footer{padding:18px 22px 22px; border-top:1px solid var(--blush-deep); flex:none;}
.cart-subtotal-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.cart-subtotal-row span{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.cart-subtotal-row strong{font-family:'Playfair Display'; font-size:1.3rem; color:var(--wine-deep);}
#cart-checkout.disabled{pointer-events:none; opacity:.5;}

@media (max-width:480px){
  .cart-drawer{width:100vw;}
}

/* -------------------- footer -------------------- */
footer{background:var(--wine-deep); color:rgba(251,238,240,.85); padding-top:56px;}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:40px;
}
.footer-brand .brand-word{color:#fff;}
.footer-brand p{font-size:.85rem; color:rgba(251,238,240,.72); max-width:32ch; margin-top:12px;}
footer h4{font-family:'Jost'; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
footer ul a{font-size:.86rem; color:rgba(251,238,240,.85);}
footer ul a:hover{color:var(--gold);}
.social-row{display:flex; gap:12px; margin-top:16px;}
.social-row a{
  width:38px;height:38px;border-radius:50%; border:1px solid rgba(251,238,240,.35);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{border-color:var(--gold); color:var(--gold);}
.footer-bottom{
  border-top:1px solid rgba(251,238,240,.15); padding:18px 0; font-size:.75rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:rgba(251,238,240,.6);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* -------------------- misc pages: about/contact hero -------------------- */
.page-hero{
  padding:52px 0 40px; text-align:center; background:var(--blush-deep);
}
.page-hero .eyebrow{justify-content:center; display:flex;}

/* -------------------- utilities -------------------- */
.mt-0{margin-top:0;}
.hidden{display:none !important;}
:focus-visible{outline:2px solid var(--wine); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-collage{order:-1; margin-bottom:8px;}
  .hero-tag{position:static; margin-top:16px; max-width:none; border-left:none; border-top:3px solid var(--wine);}
  .order-grid{grid-template-columns:1fr;}
  .steps{row-gap:30px;}
}