:root{
  --navy:#2B3040; --navy-deep:#1C1F2A; --cream:#F3E8DA; --cream-soft:#FAF5EE;
  --ink:#211F1C; --gold:#A9824F; --gold-soft:#D8C4A0; --line: rgba(33,31,28,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Manrope', sans-serif; background:var(--cream-soft); color:var(--ink);}
h1,h2,h3,.serif{font-family:'Fraunces', serif; font-weight:500;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
.topbar{background:var(--navy-deep); color:var(--cream); text-align:center; font-size:13px; padding:9px 12px;}
header{position:sticky; top:0; z-index:60; background:rgba(250,245,238,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:78px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo svg{width:30px; height:30px;}
.logo-text{font-family:'Fraunces', serif; font-size:22px;}
.logo-text small{display:block; font-size:9px; letter-spacing:.35em; font-weight:600; color:var(--gold); margin-top:-2px;}
nav.menu{display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
nav.menu a{font-size:13.5px; font-weight:600;}
.hamburger-btn{background:none; border:none; font-size:20px; cursor:pointer; line-height:1;}
.side-overlay{position:fixed; inset:0; background:rgba(28,31,42,.5); z-index:90; opacity:0; pointer-events:none; transition:opacity .3s ease;}
.side-overlay.open{opacity:1; pointer-events:auto;}
.side-menu{position:fixed; top:0; left:0; height:100%; width:320px; max-width:86vw; background:var(--cream-soft); z-index:95; transform:translateX(-100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:2px 0 24px rgba(0,0,0,.08);}
.side-menu.open{transform:translateX(0);}
.side-menu-head{display:flex; align-items:center; justify-content:space-between; padding:22px; border-bottom:1px solid var(--line);}
.side-links{flex:1; overflow-y:auto; padding:10px 22px; display:flex; flex-direction:column;}
.side-links a{padding:12px 0; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--line);}
.side-menu-foot{padding:18px 22px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px;}
.side-menu-foot a{padding:8px 0; font-size:13.5px; font-weight:600; color:var(--gold);}
.collections-title{text-align:center; font-size:18px; letter-spacing:.06em; font-weight:700; margin-bottom:36px;}
.collections-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 14px;}
.collection-item{text-align:center; display:block;}
.collection-item .icon-box{width:64%; max-width:150px; aspect-ratio:1/1; background:#fff; border-radius:50%; overflow:hidden; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; transition:opacity .2s ease; box-shadow:0 0 0 1px var(--line);}
.collection-item:hover .icon-box{opacity:.85;}
.collection-item svg{width:70%; height:70%; stroke:var(--ink); fill:none; stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round;}
.collection-item .icon-box img{width:100%; height:100%; object-fit:cover;}
.collection-item .cname{font-size:14.5px; font-weight:700; font-family:'Manrope',sans-serif;}
.breadcrumb{font-size:12.5px; color:#8a8577; margin-bottom:16px;}
.breadcrumb a{text-decoration:underline;}
.btn-primary{background:var(--gold); color:var(--navy-deep); padding:14px 26px; font-weight:700; font-size:14px; border-radius:2px; display:inline-block;}
.btn-ghost{border:1px solid var(--line); color:var(--ink); padding:13px 24px; font-weight:600; font-size:14px; border-radius:2px; display:inline-block;}
.hero h1{font-size:clamp(34px,5vw,58px); line-height:1.05;}
.hero em{color:var(--gold-soft); font-style:italic;}
section{padding:70px 0;}
.kicker{font-size:12px; letter-spacing:.14em; color:var(--gold); font-weight:700; margin-bottom:8px;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; gap:16px;}
.view-all{font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap;}
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.product-card{display:block;}
.product-media{aspect-ratio:3/4; border-radius:4px; margin-bottom:12px; background:linear-gradient(150deg,#4a5170,#2B3040); overflow:hidden;}
.product-media img{width:100%; height:100%; object-fit:cover; display:block;}
.product-name{font-weight:600; font-size:14.5px;}
.product-cat{font-size:12px; color:#8a8577;}
.product-price{font-weight:700; color:var(--navy);}
.badge-promo{display:inline-block; background:var(--gold); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:2px; margin-bottom:6px;}
.strip{background:var(--navy); color:var(--cream);}
.strip .wrap{display:flex; justify-content:space-between; padding:26px 28px; flex-wrap:wrap; gap:18px;}
.strip-item{display:flex; align-items:center; gap:12px; font-size:13.5px;}
.strip-item svg{width:22px; height:22px; stroke:var(--gold-soft); fill:none; stroke-width:1.5; flex-shrink:0;}
.strip-item b{display:block; font-size:14px; font-family:'Fraunces',serif; font-weight:500;}
.promo-band{background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:50px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.promo-band h3{font-size:clamp(20px,2.6vw,28px); max-width:480px; margin-top:4px;}
footer{background:var(--navy); color:rgba(243,232,218,.8); padding:60px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(243,232,218,.12);}
.media-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; font-family:'Fraunces',serif; font-weight:500; font-size:16px; line-height:1.3; color:rgba(243,232,218,.94);}
.media-label span{display:block; font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.14em; font-weight:700; margin-top:6px; color:var(--gold-soft);}
.product-media, .product-media-lg{position:relative;}
.foot-col h4{color:var(--cream); margin-bottom:14px;}
.foot-col a, .foot-col p{display:block; margin-bottom:10px; font-size:13.5px;}
.foot-social{display:flex; gap:12px; margin-top:18px;}
.foot-social a{width:36px; height:36px; border:1px solid rgba(243,232,218,.25); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.foot-social svg{width:16px; height:16px; stroke:var(--cream); fill:none; stroke-width:1.6;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; color:rgba(243,232,218,.5); flex-wrap:wrap; gap:10px;}
.form-box{max-width:520px; margin:0 auto;}
.form-box label{display:block; font-size:13px; font-weight:700; margin:14px 0 6px;}
.form-box input, .form-box textarea, .form-box select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:3px; font-family:inherit; font-size:14px;}
.swatch{width:26px; height:26px; border-radius:50%; display:inline-block; margin-right:6px; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer;}
.size-btn{display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:3px; margin:0 6px 6px 0; font-size:13px; font-weight:600; cursor:pointer;}

/* ---------- product modal (matching the HTML demo) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(28,31,42,.55); z-index:98; opacity:0; pointer-events:none; transition:opacity .3s ease; display:flex; align-items:center; justify-content:center; padding:24px;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{background:var(--cream-soft); border-radius:8px; max-width:760px; width:100%; max-height:88vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; transform:scale(.94); transition:transform .3s ease;}
.modal-overlay.open .modal-box{transform:scale(1);}
.modal-media{aspect-ratio:3/4; position:relative;}
.modal-info{padding:36px; position:relative;}
.modal-info h3{font-size:24px; margin:8px 0 10px;}
.modal-info .price{font-size:18px; font-weight:700; color:var(--navy); margin-bottom:20px;}
.opt-label{font-size:12.5px; font-weight:700; letter-spacing:.04em; margin-bottom:10px; margin-top:20px; text-transform:uppercase; color:#6b6659;}
.swatches{display:flex; gap:10px;}
.swatch.selected{border-color:var(--navy);}
.size-btn.selected{background:var(--navy); color:var(--cream); border-color:var(--navy);}
.qty-row{display:flex; align-items:center; gap:14px;}
.qty-stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:3px;}
.qty-stepper button{width:38px; height:38px; font-size:16px; background:none; border:none; cursor:pointer;}
.qty-stepper span, .qty-stepper input{width:36px; text-align:center; font-weight:700; font-size:14px; border:none; background:none;}
.modal-add{margin-top:26px; width:100%; border:none; cursor:pointer;}
.modal-close{position:absolute; top:18px; right:18px; width:34px; height:34px; background:var(--cream-soft); border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; font-size:16px;}
@media(max-width:700px){ .modal-box{grid-template-columns:1fr;} }
table.admin-table{width:100%; border-collapse:collapse;}
table.admin-table th, table.admin-table td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:13.5px;}
.alert{padding:12px 16px; border-radius:4px; margin-bottom:20px; font-size:14px;}
.alert-success{background:#e5f3ea; color:#1e5b34;}
.alert-error{background:#fbe6e4; color:#8a2a20;}

/* ---------- hero (full, matching the HTML demo) ---------- */
.hero{position:relative; background:var(--navy); color:var(--cream); overflow:hidden; min-height:80vh; display:flex; align-items:center; padding:0;}
.hero-bg-mark{position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:60vh; opacity:.07; pointer-events:none;}
.hero-inner{position:relative; z-index:2; width:100%; padding:80px 28px; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.hero-eyebrow{font-size:12.5px; letter-spacing:.18em; color:var(--gold-soft); font-weight:600; margin-bottom:22px;}
.hero h1{font-size:clamp(40px, 5.4vw, 68px); line-height:1.04; font-weight:500;}
.hero h1 em{font-style:italic; color:var(--gold-soft);}
.hero p.lead{margin-top:24px; font-size:16.5px; line-height:1.7; max-width:440px; color:rgba(243,232,218,.8);}
.hero-ctas{display:flex; gap:16px; margin-top:38px;}
.btn-ghost{border:1px solid rgba(243,232,218,.35); color:var(--cream); padding:15px 28px; font-weight:600; font-size:14px; border-radius:2px;}
.hero-visual{position:relative;}
.hero-card{aspect-ratio:3/4; border-radius:6px; overflow:hidden; position:relative; background:radial-gradient(120% 90% at 15% 0%, rgba(216,196,160,.35), transparent 60%), linear-gradient(155deg, #3a4056 0%, #2B3040 55%, #1C1F2A 100%); border:1px solid rgba(243,232,218,.12);}
.hero-card img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-card-tag{position:absolute; left:20px; bottom:20px; background:var(--cream); color:var(--navy-deep); padding:10px 16px; font-size:12.5px; font-weight:700; border-radius:2px;}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr; padding:60px 24px;} .hero-visual{max-width:320px;} }

/* ---------- newsletter ---------- */
.newsletter{background:var(--navy-deep); color:var(--cream); text-align:center;}
.newsletter h2{font-size:clamp(26px,3vw,34px); margin-bottom:14px;}
.newsletter p{color:rgba(243,232,218,.7); margin-bottom:30px;}
.news-form{display:flex; max-width:440px; margin:0 auto; border:1px solid rgba(243,232,218,.3); border-radius:2px; overflow:hidden;}
.news-form input{flex:1; background:transparent; border:none; padding:15px 18px; color:var(--cream); font-size:14px;}
.news-form input::placeholder{color:rgba(243,232,218,.5);}
.news-form button{background:var(--gold); color:var(--navy-deep); padding:15px 24px; font-weight:700; font-size:13.5px; border:none; cursor:pointer;}
/* ---------- admin dashboard shell ---------- */
.admin-shell{display:flex; min-height:100vh; background:var(--cream-soft);}
.admin-sidebar{width:260px; background:var(--navy-deep); color:var(--cream); display:flex; flex-direction:column; flex-shrink:0;}
.admin-brand{padding:28px 24px; font-family:'Fraunces',serif; font-size:22px; border-bottom:1px solid rgba(243,232,218,.1);}
.admin-brand span{color:var(--gold); font-size:13px; font-weight:600; margin-left:6px;}
.admin-nav{flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:2px;}
.admin-nav a{padding:12px 14px; border-radius:6px; font-size:14.5px; font-weight:600; color:rgba(243,232,218,.75);}
.admin-nav a:hover{background:rgba(243,232,218,.06); color:var(--cream);}
.admin-nav a.active{background:rgba(243,232,218,.1); color:var(--gold);}
.admin-sidebar-foot{padding:16px 24px 26px; border-top:1px solid rgba(243,232,218,.1); display:flex; flex-direction:column; gap:12px;}
.admin-sidebar-foot a{font-size:13.5px; color:rgba(243,232,218,.6);}
.admin-sidebar-foot button{background:none; border:none; color:var(--gold); font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; padding:0; font-family:inherit;}
.admin-main{flex:1; padding:44px 48px; overflow-x:auto;}
.admin-main h1{font-size:30px; margin-bottom:30px; font-weight:500;}
.admin-main h2{font-size:20px; margin-bottom:18px; font-weight:500;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:44px;}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px;}
.stat-card .stat-label{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#8a8577; margin-bottom:10px; font-weight:600;}
.stat-card .stat-value{font-size:30px; font-family:'Fraunces',serif; color:var(--gold);}
@media(max-width:900px){ .admin-shell{flex-direction:column;} .admin-sidebar{width:100%;} .stat-grid{grid-template-columns:repeat(2,1fr);} }
.logo-icon {
  height: 40px;
  width: auto;
  display: block;
}