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

:root{
  --bg-dark:#171512;
  --bg-cream:#FBF7F0;
  --gold:#C6A15B;
  --gold-deep:#9C7A3C;
  --maroon:#5C1A2B;
  --text-dark:#221F1B;
  --text-light:#F7F1E6;
  --line:rgba(198,161,91,0.35);
  --radius:2px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:'Jost', sans-serif;
  background:var(--bg-cream);
  color:var(--text-dark);
  font-weight:400;
  line-height:1.6;
}

h1,h2,h3,h4,.brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:0.02em;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

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

/* ---------- Divider signature ---------- */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin:14px 0 34px;
}
.divider::before, .divider::after{
  content:''; height:1px; width:60px; background:var(--line);
}
.divider span{
  font-size:11px; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold-deep);
}

/* ---------- Header ---------- */
header.site-header{
  background:var(--bg-dark);
  color:var(--text-light);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar{
  background:var(--maroon); color:var(--text-light);
  text-align:center; font-size:12px; letter-spacing:0.08em;
  padding:7px 0; text-transform:uppercase;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.brand{
  font-size:28px; color:var(--text-light);
  display:flex; align-items:baseline; gap:6px;
}
.brand em{ color:var(--gold); font-style:normal; }
.brand small{
  font-family:'Jost', sans-serif; font-size:9px; letter-spacing:0.3em;
  color:var(--gold-deep); text-transform:uppercase; margin-left:8px;
}
nav.main-nav ul{ display:flex; gap:32px; }
nav.main-nav a{
  font-size:14px; letter-spacing:0.04em; text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
nav.main-nav a:hover{ color:var(--gold); }
.nav-icons{ display:flex; align-items:center; gap:20px; }
.nav-icons a{ font-size:14px; letter-spacing:0.03em; position:relative;}
.cart-badge{
  background:var(--gold); color:var(--bg-dark); font-size:11px; font-weight:600;
  border-radius:50%; padding:1px 6px; margin-left:4px;
}
.mobile-toggle{ display:none; }

@media(max-width:860px){
  nav.main-nav{ display:none; }
  .mobile-toggle{ display:block; font-size:22px; background:none; border:none; color:var(--text-light); }
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg, var(--bg-dark) 0%, #2b241c 100%);
  color:var(--text-light);
  padding:90px 0 100px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  border:1px solid var(--line);
}
.hero::before{
  content:'';
  position:absolute; right:-40px; top:-40px;
  width:280px; height:280px; border-radius:50%;
  border:1px solid var(--line);
}
.hero-inner{ max-width:620px; position:relative; z-index:2; }
.hero-eyebrow{
  color:var(--gold); text-transform:uppercase; letter-spacing:0.3em; font-size:12px; margin-bottom:18px; display:block;
}
.hero h1{
  font-size:56px; line-height:1.1; margin-bottom:22px;
}
.hero h1 em{ color:var(--gold); font-style:italic; }
.hero p{ font-size:17px; color:#d8d0c2; max-width:480px; margin-bottom:32px; }

.btn{
  display:inline-block; padding:14px 34px; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
  border:1px solid var(--gold); transition:all .25s ease; background:transparent;
}
.btn-gold{ background:var(--gold); color:var(--bg-dark); border-color:var(--gold); }
.btn-gold:hover{ background:transparent; color:var(--gold); }
.btn-outline{ color:var(--text-light); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-maroon{ background:var(--maroon); color:var(--text-light); border-color:var(--maroon); }
.btn-maroon:hover{ opacity:0.88; }
.btn-block{ display:block; width:100%; text-align:center; }
.btn-sm{ padding:9px 18px; font-size:11px; }

/* ---------- Section titles ---------- */
.section{ padding:70px 0; }
.section-title{ text-align:center; margin-bottom:8px; font-size:34px; }
.section-title em{ color:var(--gold); font-style:italic; }
.section-sub{ text-align:center; color:#7a7268; font-size:14px; max-width:520px; margin:0 auto; }

/* ---------- Category strip ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:40px;
}
.cat-card{
  text-align:center; padding:30px 14px; background:#fff;
  border:1px solid var(--line); transition:.25s;
}
.cat-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.cat-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:var(--bg-cream); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--gold-deep);
}
.cat-card h4{ font-size:17px; font-weight:600; }

@media(max-width:860px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Faceted product card (signature element) ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:40px;
}
@media(max-width:1024px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px;} }

.product-card{
  background:#fff;
  border:1px solid var(--line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  position:relative;
  transition:.3s ease;
}
.product-card:hover{ box-shadow:0 14px 34px rgba(23,21,18,0.12); transform:translateY(-5px); }
.product-thumb{
  aspect-ratio:1/1; background:var(--bg-cream); overflow:hidden; position:relative;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.badge-discount{
  position:absolute; top:12px; left:12px; background:var(--maroon); color:var(--text-light);
  font-size:11px; padding:4px 10px; letter-spacing:0.05em;
}
.badge-featured{
  position:absolute; top:12px; right:12px; background:var(--gold); color:var(--bg-dark);
  font-size:10px; padding:4px 8px; text-transform:uppercase; letter-spacing:0.08em;
}
.product-info{ padding:18px 18px 20px; }
.product-info .cat{ font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold-deep); }
.product-info h3{ font-size:19px; margin:6px 0 8px; font-weight:600; }
.price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.price-now{ font-size:18px; font-weight:600; color:var(--maroon); font-family:'Cormorant Garamond',serif;}
.price-old{ font-size:14px; color:#a39a8c; text-decoration:line-through; }

/* ---------- Forms ---------- */
.form-box{
  max-width:480px; margin:60px auto; background:#fff; padding:40px;
  border:1px solid var(--line);
}
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13px; margin-bottom:6px; color:#5a5348; letter-spacing:0.02em;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border:1px solid #ddd4c4; font-family:'Jost',sans-serif;
  font-size:14px; background:#fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--gold);
}
.form-row{ display:flex; gap:16px; }
.form-row .form-group{ flex:1; }

.alert{ padding:14px 18px; margin-bottom:20px; font-size:14px; border-left:3px solid; }
.alert-success{ background:#eef7ec; border-color:#4c8c4a; color:#2c5c2a; }
.alert-danger{ background:#fbeceb; border-color:var(--maroon); color:var(--maroon); }

/* ---------- Cart table ---------- */
.cart-table{ width:100%; border-collapse:collapse; background:#fff; }
.cart-table th, .cart-table td{
  padding:16px; text-align:left; border-bottom:1px solid var(--line); font-size:14px;
}
.cart-table th{ text-transform:uppercase; font-size:11px; letter-spacing:0.08em; color:var(--gold-deep); }
.cart-prod{ display:flex; gap:14px; align-items:center; }
.cart-prod img{ width:64px; height:64px; object-fit:cover; }
.qty-input{ width:60px; padding:8px; border:1px solid #ddd4c4; text-align:center; }
.remove-link{ color:var(--maroon); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; }
.cart-summary{
  background:#fff; border:1px solid var(--line); padding:26px; max-width:360px; margin-left:auto;
}
.cart-summary .row{ display:flex; justify-content:space-between; margin-bottom:12px; font-size:14px; }
.cart-summary .total{ font-size:20px; font-weight:600; font-family:'Cormorant Garamond', serif; color:var(--maroon); }

/* ---------- Footer ---------- */
footer{
  background:var(--bg-dark); color:#c9c1b3; padding:60px 0 24px; margin-top:80px;
}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-grid h4{ color:var(--gold); font-size:15px; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.08em; font-family:'Jost'; font-weight:500;}
.footer-grid p, .footer-grid a{ font-size:13.5px; color:#a89f8f; display:block; margin-bottom:10px; }
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; text-align:center; font-size:12px; color:#786f60;
}
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ background:var(--bg-cream); padding:16px 0; font-size:13px; border-bottom:1px solid var(--line); }
.breadcrumb a{ color:var(--gold-deep); }

/* ---------- Product detail ---------- */
.pd-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:50px 0; }
.pd-image{ background:#fff; border:1px solid var(--line); aspect-ratio:1/1; overflow:hidden;}
.pd-image img{ width:100%; height:100%; object-fit:cover; }
.pd-info .cat{ font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--gold-deep); }
.pd-info h1{ font-size:34px; margin:10px 0 16px; }
.pd-info .material{ font-size:13px; color:#7a7268; margin-bottom:18px; }
.pd-price{ display:flex; align-items:baseline; gap:14px; margin-bottom:24px; }
.pd-price .now{ font-size:30px; color:var(--maroon); font-family:'Cormorant Garamond', serif; font-weight:600;}
.pd-price .old{ font-size:18px; color:#a39a8c; text-decoration:line-through; }
.pd-desc{ font-size:15px; color:#4a463e; margin-bottom:28px; line-height:1.8; }
.qty-selector{ display:flex; align-items:center; gap:0; border:1px solid #ddd4c4; width:fit-content; margin-bottom:24px;}
.qty-selector button{ width:38px; height:42px; background:#fff; border:none; font-size:16px; cursor:pointer; }
.qty-selector input{ width:50px; height:42px; border:none; border-left:1px solid #ddd4c4; border-right:1px solid #ddd4c4; text-align:center; }
.stock-info{ font-size:13px; margin-bottom:20px; color:#4c8c4a; }
.stock-info.low{ color:var(--maroon); }

/* ---------- Admin ---------- */
.admin-body{ background:#f1ede4; font-family:'Jost', sans-serif; }
.admin-wrap{ display:flex; min-height:100vh; }
.admin-sidebar{ width:230px; background:var(--bg-dark); color:var(--text-light); padding:24px 0; }
.admin-sidebar .brand{ font-size:22px; padding:0 24px 24px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.admin-sidebar a{ display:block; padding:12px 24px; font-size:14px; color:#cfc7b8; }
.admin-sidebar a:hover, .admin-sidebar a.active{ background:rgba(198,161,91,0.12); color:var(--gold); border-left:3px solid var(--gold); }
.admin-main{ flex:1; padding:34px 40px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
.stat-card{ background:#fff; padding:22px; border:1px solid var(--line); border-left:3px solid var(--gold); }
.stat-card .num{ font-size:30px; font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--bg-dark);}
.stat-card .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:#8a8172; }
table.admin-table{ width:100%; background:#fff; border-collapse:collapse; }
table.admin-table th, table.admin-table td{ padding:12px 14px; border-bottom:1px solid #eee6d6; font-size:13.5px; text-align:left; }
table.admin-table th{ background:#faf7f0; text-transform:uppercase; font-size:11px; letter-spacing:0.06em; color:var(--gold-deep); }
.status-pill{ padding:4px 12px; font-size:11px; border-radius:12px; text-transform:uppercase; letter-spacing:0.04em; }
.status-Pending{ background:#fdf0d5; color:#a06c00; }
.status-Confirmed{ background:#e2eefb; color:#1a5fa0; }
.status-Shipped{ background:#eae2fb; color:#5b2ca0; }
.status-Delivered{ background:#e2f7e2; color:#1f7a1f; }
.status-Cancelled{ background:#fbe2e2; color:#a01f1f; }
.action-links a{ font-size:12px; margin-right:10px; color:var(--gold-deep); }
.action-links a.del{ color:var(--maroon); }

@media(max-width:900px){
  .hero h1{ font-size:38px; }
  .pd-wrap{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .admin-wrap{ flex-direction:column; }
  .admin-sidebar{ width:100%; }
}
