:root{
  --rouge: #7a1f1f;
  --rouge-vif: #a3271f;
  --terre: #c98a4b;
  --creme: #f7f1e6;
  --creme-2: #efe6d4;
  --encre: #2b211c;
  --ok: #4a6b4d;
  --radius: 14px;
  --maxw: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: "Georgia", "Iowan Old Style", serif;
  background:var(--creme);
  color:var(--encre);
  line-height:1.6;
}
h1,h2,h3{font-family: "Palatino Linotype", Georgia, serif; letter-spacing:.02em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* NAV */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(247,241,230,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(122,31,31,.15);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
}
.logo{
  font-size:1.5rem; font-weight:700; color:var(--rouge);
  text-decoration:none; letter-spacing:.08em; text-transform:uppercase;
}
.logo span{color:var(--terre); font-weight:400; font-size:.6em; display:block; letter-spacing:.15em; text-transform:none;}
.navlinks{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.navlinks a{
  text-decoration:none; color:var(--encre); font-size:.95rem;
  border-bottom:2px solid transparent; padding-bottom:3px; transition:border-color .2s;
}
.navlinks a:hover{border-color:var(--terre);}
.navtoggle{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--rouge);}

/* HERO */
.hero{
  position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:url('images/zerbiya-hemra/img1.jpg') center 30%/cover no-repeat;
  filter:saturate(1.05);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,33,28,.55) 0%, rgba(43,33,28,.35) 45%, rgba(43,33,28,.75) 100%);
}
.hero-content{position:relative; z-index:2; padding:40px 24px; max-width:780px;}
.hero-content .kicker{
  text-transform:uppercase; letter-spacing:.3em; font-size:.78rem; color:var(--creme-2);
  margin-bottom:14px; display:block;
}
.hero-content h1{font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 18px; text-shadow:0 2px 18px rgba(0,0,0,.35);}
.hero-content p{font-size:1.15rem; margin:0 0 30px; color:#f1e8d8;}
.btn{
  display:inline-block; padding:14px 30px; border-radius:999px; text-decoration:none;
  font-size:.95rem; letter-spacing:.03em; font-weight:600; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--rouge-vif); color:#fff;}
.btn-primary:hover{box-shadow:0 8px 20px rgba(163,39,31,.35);}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.7);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* SECTION GENERIC */
section{padding:80px 0;}
.section-head{text-align:center; max-width:680px; margin:0 auto 52px;}
.section-head .kicker{
  text-transform:uppercase; letter-spacing:.25em; font-size:.75rem; color:var(--terre); font-weight:700;
}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); margin:10px 0 14px; color:var(--rouge);}
.section-head p{color:#5a4d43; font-size:1.05rem;}

/* STORY */
.story{background:var(--creme-2);}
.story-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.story-media{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px rgba(43,33,28,.18);}
.story-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;}
.story-text h3{color:var(--rouge); font-size:1.4rem; margin-top:0;}
.story-text p{color:#4a3f37;}
.story-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px;
}
.fact{
  background:#fff; border-radius:12px; padding:18px 14px; text-align:center;
  box-shadow:0 6px 16px rgba(43,33,28,.08);
}
.fact .n{font-size:1.5rem; font-weight:700; color:var(--rouge-vif); display:block;}
.fact .l{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#7a6c60;}

/* COLLECTION */
.collection-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:36px;
}
.card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 28px rgba(43,33,28,.10);
  display:flex; flex-direction:column;
}
.card-main{position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee; cursor:pointer;}
.card-main img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.card-main:hover img{transform:scale(1.05);}
.badge{
  position:absolute; top:14px; left:14px; background:rgba(122,31,31,.9); color:#fff;
  padding:5px 12px; border-radius:999px; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
}
.view-more{
  position:absolute; bottom:14px; right:14px; background:rgba(255,255,255,.92); color:var(--rouge);
  padding:6px 14px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.03em;
}
.thumbs{display:flex; gap:8px; padding:10px 14px; background:#faf6ee; flex-wrap:wrap;}
.thumbs img{
  width:52px; height:52px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; opacity:.75; transition:opacity .15s, border-color .15s;
}
.thumbs img:hover, .thumbs img.active{opacity:1; border-color:var(--rouge-vif);}
.thumbs .more-count{
  width:52px; height:52px; border-radius:8px; background:var(--creme-2); color:var(--rouge);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700;
}
.card-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-body h3{margin:0; font-size:1.25rem; color:var(--encre);}
.card-body h3 a{text-decoration:none; color:inherit;}
.card-body h3 a:hover{color:var(--rouge-vif);}
.card-body .desc{color:#5a4d43; font-size:.95rem; flex:1;}
.card-meta{display:flex; flex-wrap:wrap; gap:8px; font-size:.78rem; color:#7a6c60;}
.card-meta span{background:var(--creme-2); padding:4px 10px; border-radius:999px;}
.price-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:6px;
  border-top:1px dashed #e2d6c3; padding-top:14px; flex-wrap:wrap; gap:10px;
}
.price{font-size:1.05rem; font-weight:700; color:var(--rouge-vif);}
.price small{display:block; font-weight:400; font-size:.7rem; color:#8a7c6f; text-transform:uppercase; letter-spacing:.04em;}
.order-btns{display:flex; gap:8px;}
.icon-btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
  font-size:.8rem; text-decoration:none; font-weight:600;
}
.icon-btn.wa{background:#25D366; color:#fff;}
.icon-btn.mail{background:var(--encre); color:#fff;}
.icon-btn.outline{background:transparent; border:1.5px solid var(--rouge); color:var(--rouge);}

/* AUTHENTICITY */
.authenticity{background:var(--rouge); color:#f7ede1;}
.authenticity .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px;}
.auth-item h4{margin:0 0 8px; font-size:1.05rem; color:#f2c896;}
.auth-item p{margin:0; font-size:.92rem; color:#ecdcc9;}

/* CONTACT */
.contact{background:var(--creme-2);}
.contact-box{
  background:#fff; border-radius:var(--radius); padding:44px; text-align:center;
  box-shadow:0 12px 30px rgba(43,33,28,.1); max-width:640px; margin:0 auto;
}
.contact-box h2{color:var(--rouge); margin-top:0;}
.contact-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:24px;}

footer{
  background:var(--encre); color:#cfc4b6; padding:34px 0; text-align:center; font-size:.85rem;
}
footer a{color:#e8dcc9; text-decoration:none;}

/* LIGHTBOX */
.lightbox{
  position:fixed; inset:0; background:rgba(20,15,12,.92); z-index:100;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:88vw; max-height:86vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute; top:20px; right:26px; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none;
  color:#fff; font-size:1.8rem; width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.lightbox-arrow:hover{background:rgba(255,255,255,.28);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
.lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#f1e8d8; font-size:.85rem; letter-spacing:.05em;
}

/* PRODUCT PAGE */
.breadcrumb{
  font-size:.85rem; color:#7a6c60; padding:20px 0 0;
}
.breadcrumb a{text-decoration:none; color:var(--rouge-vif);}
.breadcrumb a:hover{text-decoration:underline;}
.product{padding:36px 0 70px;}
.product-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
.gallery-main{
  position:relative; border-radius:var(--radius); overflow:hidden; background:#eee;
  box-shadow:0 18px 40px rgba(43,33,28,.16); aspect-ratio:4/3; cursor:zoom-in;
}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:none;
  color:var(--rouge); font-size:1.4rem; width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.gallery-arrow.prev{left:14px;} .gallery-arrow.next{right:14px;}
.gallery-count{
  position:absolute; bottom:14px; right:14px; background:rgba(43,33,28,.72); color:#fff;
  padding:5px 12px; border-radius:999px; font-size:.75rem;
}
.gallery-thumbs{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.gallery-thumbs img{
  width:76px; height:76px; object-fit:cover; border-radius:10px; cursor:pointer;
  border:2px solid transparent; opacity:.7; transition:opacity .15s, border-color .15s;
}
.gallery-thumbs img:hover, .gallery-thumbs img.active{opacity:1; border-color:var(--rouge-vif);}
.product-info h1{color:var(--rouge); font-size:2rem; margin:6px 0 14px;}
.product-info .longdesc p{color:#4a3f37; font-size:1rem;}
.spec-list{list-style:none; margin:22px 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.spec-list li{font-size:.88rem; color:#4a3f37; border-bottom:1px dashed #e2d6c3; padding-bottom:8px;}
.spec-list li b{display:block; color:#8a7c6f; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-bottom:3px;}
.product-order{
  background:#fff; border-radius:var(--radius); padding:22px 24px; margin-top:24px;
  box-shadow:0 10px 26px rgba(43,33,28,.1);
}
.product-order .price{font-size:1.3rem;}
.product-order .order-btns{margin-top:14px;}
.other-products{background:var(--creme-2); padding:60px 0;}
.other-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; margin-top:30px;}
.other-card{
  background:#fff; border-radius:12px; overflow:hidden; text-decoration:none; color:var(--encre);
  box-shadow:0 6px 18px rgba(43,33,28,.08); transition:transform .15s;
}
.other-card:hover{transform:translateY(-3px);}
.other-card img{aspect-ratio:4/3; object-fit:cover; width:100%;}
.other-card .oc-name{padding:10px 12px; font-size:.85rem; font-weight:600;}
.back-link{display:inline-block; margin-top:10px; font-size:.9rem; color:var(--rouge-vif); text-decoration:none;}
.back-link:hover{text-decoration:underline;}

@media (max-width:900px){
  .product-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .story-grid{grid-template-columns:1fr;}
  .navlinks{
    position:fixed; top:64px; right:0; left:0; background:var(--creme);
    flex-direction:column; padding:20px 24px; gap:16px; display:none;
    border-bottom:1px solid rgba(122,31,31,.15);
  }
  .navlinks.open{display:flex;}
  .navtoggle{display:block;}
}