/* ===================================================
   COZY-LUXE — shared design system
   =================================================== */
:root{
  --ivory:#F8F5EF;
  --white:#FFFFFF;
  --espresso:#2B2118;
  --espresso-2:#231b13;
  --gold:#C8A45A;
  --gold-soft:#E4CE9E;
  --gold-deep:#9C7A3B;
  --line: rgba(43,33,24,0.12);
  --muted: rgba(43,33,24,0.55);
  --success:#4C7C59;
  --danger:#B24B3C;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--ivory); color:var(--espresso);
  font-family:'Lato', sans-serif; font-weight:300; line-height:1.7;
}
h1,h2,h3,h4{font-family:'Playfair Display', serif; font-weight:500;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
.wrap{max-width:1280px; margin:0 auto; padding:0 5vw;}

/* ---------- utility bar ---------- */
.utility-bar{
  background:var(--espresso); color:var(--gold-soft);
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 5vw; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
}
.utility-bar .right{display:flex; gap:26px; color:rgba(228,206,158,0.85);}
.utility-bar .right span{display:flex; align-items:center; gap:6px;}

/* ---------- header ---------- */
header.site-header{
  background:var(--white); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 5vw; position:sticky; top:0; z-index:100;
}
.logo-block{display:flex; align-items:center;}
.logo-img{height:96px; width:auto; flex-shrink:0;}

nav.main-nav ul{display:flex; gap:38px; list-style:none;}
nav.main-nav a{
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  padding-bottom:22px; border-bottom:2px solid transparent;
}
nav.main-nav a.active{color:var(--gold-deep); border-color:var(--gold);}

.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
  flex-shrink:0;
}
.icon-btn{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  color:var(--espresso);
  flex-shrink:0;
}
.cart-badge{
  position:absolute; top:-8px; right:-9px; background:var(--gold); color:var(--espresso);
  font-size:9px; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.whatsapp-pill{
  background:#25D366;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  white-space:nowrap;
  transition:background .25s ease, transform .25s ease;
}
.whatsapp-pill:hover{
  background:#1EBE5A;
  transform:scale(1.06);
}

/* ---------- mobile menu (hamburger + slide-down nav panel) ---------- */
/* Hidden by default (desktop). Only .menu-toggle's display flips to
   flex below 1000px, inside the media query further down this file. */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:24px;
  height:20px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--espresso);
  transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.mobile-nav a{
  padding:16px 5vw;
  border-bottom:1px solid var(--line);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--espresso);
}
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav.open{ display:flex; }

/* ---------- buttons ---------- */
.btn{
  padding:15px 28px; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; border:1px solid transparent;
  transition:.25s ease;
}
.btn-dark{background:var(--espresso); color:var(--white);}
.btn-dark:hover{background:var(--espresso-2);}
.btn-outline-light{border-color:rgba(255,255,255,0.5); color:var(--white); background:transparent;}
.btn-outline-dark{border-color:var(--espresso); color:var(--espresso); background:transparent;}
.btn-outline-dark:hover{background:var(--espresso); color:var(--white);}
.btn-gold{background:var(--gold); color:var(--espresso);}
.btn-gold:hover{background:var(--gold-soft);}
.btn-block{width:100%; justify-content:center;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- breadcrumb ---------- */
.breadcrumb{
  padding:20px 5vw; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); background:var(--white); border-bottom:1px solid var(--line);
}
.breadcrumb a:hover{color:var(--gold-deep);}
.breadcrumb .sep{margin:0 8px; opacity:.5;}
.breadcrumb .current{color:var(--espresso); font-weight:700;}

/* ---------- page header banner ---------- */
.page-banner{
  background:linear-gradient(120deg,#2B2118,#3a2c1c 55%,#5b4527);
  color:var(--white); text-align:center; padding:70px 5vw;
}
.page-banner .eyebrow{font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; font-weight:700;}
.page-banner h1{font-size:clamp(28px,4vw,42px);}

/* ---------- generic sections ---------- */
section{padding:90px 5vw;}
.center-head{text-align:center; margin-bottom:50px;}
.center-head .flourish{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px;}
.center-head .flourish .bar{width:34px; height:1px; background:var(--gold-deep); opacity:.55;}
.center-head .flourish .diamond{width:5px; height:5px; background:var(--gold); transform:rotate(45deg);}
.center-head h2{font-size:clamp(26px,3vw,36px); text-transform:uppercase; letter-spacing:0.02em;}
.center-head p{font-style:italic; color:var(--muted); margin-top:10px; font-size:14.5px;}

/* ---------- collections grid ---------- */
.collections-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1280px; margin:0 auto 40px;}
.coll-card{background:var(--white); border:1px solid var(--line); text-align:center; padding-bottom:20px; cursor:pointer; transition:.3s;}
.coll-card:hover{border-color:var(--gold-soft); transform:translateY(-3px);}
.coll-photo{aspect-ratio:1/1; position:relative; overflow:hidden; background-size:cover; background-position:center;}
.coll-badge{
  width:52px; height:52px; border-radius:50%; background:var(--white); border:2px solid var(--gold-soft);
  display:flex; align-items:center; justify-content:center; margin:-26px auto 14px; position:relative; z-index:2;
  color:var(--gold-deep); font-size:20px;
}
.coll-card h4{font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700;}
.coll-card .count{font-size:11px; color:var(--muted); margin-top:4px;}
.view-all-wrap{text-align:center;}

/* swatches (photography placeholders) */
.sw{width:100%; height:100%;}
.sw1{background:linear-gradient(135deg,#3a2c1c,#8a6a3f 60%,#E4CE9E);}
.sw2{background:linear-gradient(135deg,#231b13,#5b4527 60%,#C8A45A);}
.sw3{background:linear-gradient(135deg,#2B2118,#6b5230 65%,#F8F5EF);}
.sw4{background:linear-gradient(135deg,#3a2c1c,#9C7A3B 55%,#E4CE9E);}
.sw5{background:linear-gradient(135deg,#231b13,#4a3623 55%,#8a6a3f);}
.sw6{background:linear-gradient(135deg,#2B2118,#5b4527 60%,#C8A45A);}
.sw7{background:linear-gradient(135deg,#3a2c1c,#6b5230 65%,#E4CE9E);}
.sw8{background:linear-gradient(135deg,#231b13,#9C7A3B 55%,#F8F5EF);}

/* ---------- product grid / cards ---------- */
.products-strip{background:var(--white);}
.products-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1280px; margin:0 auto;}
.products-grid.cols-6{grid-template-columns:repeat(6,1fr); gap:16px;}
.product-card{border:1px solid var(--line); background:var(--white); transition:.3s;}
.product-card:hover{border-color:var(--gold-soft);}
.product-photo{aspect-ratio:4/5; position:relative; overflow:hidden;}
.product-photo .tag{
  position:absolute; top:10px; left:10px; background:var(--espresso); color:var(--white);
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 10px; font-weight:700;
}
.product-info{padding:16px 14px 20px;}
.product-info .pname{font-size:14.5px; font-weight:700; margin-bottom:4px;}
.product-info .pvariant{font-size:10.5px; color:var(--muted); margin-bottom:10px; display:block; min-height:13px;}
.price-row{margin-bottom:14px; font-size:13px;}
.price-row .old{text-decoration:line-through; color:var(--muted); margin-right:8px; font-size:11.5px;}
.price-row .new{color:var(--gold-deep); font-weight:700;}
.btn-view{
  display:block; text-align:center; border:1px solid var(--espresso); padding:9px; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase; font-weight:700; transition:.3s;
}
.btn-view:hover{background:var(--espresso); color:var(--white);}

/* ---------- filter bar (collection page) ---------- */
.filter-bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  max-width:1280px; margin:0 auto 40px; padding-bottom:24px; border-bottom:1px solid var(--line);
}
.filter-bar select{
  padding:10px 14px; border:1px solid var(--line); background:var(--white); font-size:12.5px;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--espresso);
}
.result-count{font-size:12.5px; color:var(--muted);}

/* ---------- why choose / policy rows ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; max-width:1200px; margin:0 auto; background:var(--line);}
.why-card{background:var(--ivory); padding:36px 26px; text-align:center;}
.why-icon-badge{
  width:46px; height:46px; border-radius:50%; background:var(--white); border:1px solid var(--gold-soft);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--gold-deep);
}
.why-card h4{font-size:13px; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:10px; font-weight:700;}
.why-card p{font-size:12.5px; color:var(--muted); line-height:1.6;}

.policy-row{background:var(--white); border-bottom:1px solid var(--line);}
.policy-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1200px; margin:0 auto;}
.policy-item{display:flex; gap:14px; align-items:flex-start;}
.policy-item .picon{color:var(--gold-deep); flex-shrink:0; margin-top:2px;}
.policy-item h5{font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:5px; font-weight:700;}
.policy-item p{font-size:12px; color:var(--muted);}

/* ---------- newsletter ---------- */
.newsletter-bar{
  background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:44px 6vw; flex-wrap:wrap; gap:24px;
}
.newsletter-left{display:flex; align-items:center; gap:16px;}
.newsletter-left h4{font-size:16px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;}
.newsletter-left p{font-size:13px; color:var(--muted);}
.newsletter-form{display:flex; border:1px solid var(--line);}
.newsletter-form input{border:none; outline:none; padding:15px 20px; font-size:13.5px; width:280px;}
.newsletter-form button{background:var(--espresso); color:var(--white); border:none; padding:0 26px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--espresso-2); color:rgba(248,245,239,0.75); padding:70px 5vw 0;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:36px; max-width:1280px; margin:0 auto 50px;}
.footer-logo-block{display:flex; align-items:center; margin-bottom:16px;}
.footer-logo-img{height:78px; width:auto;}
.footer-tag{font-size:9px; letter-spacing:0.18em; color:var(--gold-soft);}
footer p.desc{font-size:12.5px; line-height:1.7; max-width:230px; margin-bottom:20px;}
.socials{display:flex; gap:12px;}
.social-icon{width:30px; height:30px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px;}
.footer-col h5{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:20px;}
.footer-col a{display:block; font-size:12.5px; margin-bottom:12px; color:rgba(248,245,239,0.7);}
.footer-contact-item{display:flex; gap:10px; font-size:12px; margin-bottom:14px; align-items:flex-start;}
.footer-contact-item .fi{color:var(--gold); flex-shrink:0; margin-top:2px;}
.footer-cta{background:var(--gold); color:var(--espresso); padding:11px 18px; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; display:inline-flex; gap:8px; align-items:center; margin-top:6px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1); padding:22px 0; display:flex; justify-content:space-between; font-size:11.5px; color:rgba(248,245,239,0.5); max-width:1280px; margin:0 auto; flex-wrap:wrap; gap:10px;}

/* ---------- forms (checkout / contact) ---------- */
.form-group{margin-bottom:20px;}
.form-group label{display:block; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; color:var(--muted); font-weight:700;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); background:var(--white);
  font-size:14px; color:var(--espresso); outline:none; transition:.25s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--gold);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}

/* ---------- steps ---------- */
.step-track{display:flex; justify-content:center; gap:0; margin-bottom:56px;}
.step{display:flex; align-items:center; gap:10px;}
.step .dot{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--muted);
}
.step.active .dot{border-color:var(--gold); background:var(--gold); color:var(--espresso);}
.step.done .dot{border-color:var(--gold-deep); background:var(--gold-deep); color:var(--white);}
.step span.label{font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-right:26px;}
.step.active span.label{color:var(--espresso); font-weight:700;}
.step-line{width:60px; height:1px; background:var(--line); margin:0 10px;}

/* ---------- misc ---------- */
.empty-state{text-align:center; padding:80px 5vw;}
.empty-state h3{font-size:22px; margin-bottom:14px;}
.empty-state p{color:var(--muted); margin-bottom:30px;}

.qty-selector{display:flex; align-items:center; border:1px solid var(--line); width:fit-content;}
.qty-selector button{background:none; border:none; width:38px; height:40px; font-size:16px; color:var(--espresso);}
.qty-selector input{width:44px; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); font-size:14px; padding:8px 0;}

.toast{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--espresso); color:var(--white); padding:16px 26px; font-size:13px;
  opacity:0; pointer-events:none; transition:.35s; z-index:999; display:flex; align-items:center; gap:10px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media(max-width:1000px){
  nav.main-nav, .utility-bar .right{display:none;}
  .menu-toggle{display:flex;}
  .collections-grid{grid-template-columns:repeat(2,1fr);}
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .products-grid.cols-6{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .policy-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  section{padding:60px 5vw;}
}