/* ============================================================
   পণ্য ভিলা — style.css  v2.0
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,500&display=swap');

:root {
  --primary:      #B5451B;
  --primary-dk:   #8B3214;
  --primary-lt:   #D4622E;
  --accent:       #F4A225;
  --accent-dk:    #D48A10;
  --bg:           #FFFDF8;
  --bg-warm:      #FFF5E6;
  --bg-dark:      #1A0F0A;
  --text:         #2C1810;
  --text-muted:   #6B4C3B;
  --text-light:   #A07060;
  --border:       #E8D5C0;
  --white:        #FFFFFF;
  --success:      #2E7D32;
  --error:        #C62828;
  --info:         #1565C0;
  --shadow-sm:    0 2px 8px rgba(44,24,16,.08);
  --shadow:       0 4px 20px rgba(44,24,16,.12);
  --shadow-lg:    0 8px 40px rgba(44,24,16,.18);
  --radius:       14px;
  --radius-sm:    8px;
  --radius-pill:  50px;
  --transition:   .25s ease;
  --font:         'Hind Siliguri', sans-serif;
  --font-display: 'Playfair Display', serif;
  --header-h:     70px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden }
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
button,input,select,textarea { font-family:inherit }

/* ── Layout ── */
.container { max-width:1200px; margin:0 auto; padding:0 20px }
.section    { padding:72px 0 }
.section-sm { padding:48px 0 }

/* ── Typography ── */
.section-title {
  font-family:var(--font-display); font-size:clamp(1.7rem,3.5vw,2.6rem);
  text-align:center; margin-bottom:.4rem; color:var(--text);
}
.section-sub {
  text-align:center; color:var(--text-muted); font-size:.95rem;
  margin-bottom:3rem; line-height:1.6;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 26px; border-radius:var(--radius-pill); font-family:var(--font);
  font-size:.9rem; font-weight:600; cursor:pointer; border:2px solid transparent;
  transition:var(--transition); text-decoration:none; white-space:nowrap;
}
.btn-primary  { background:var(--primary); color:#fff; border-color:var(--primary) }
.btn-primary:hover  { background:var(--primary-dk); border-color:var(--primary-dk); transform:translateY(-2px); box-shadow:0 6px 20px rgba(181,69,27,.35) }
.btn-accent   { background:var(--accent); color:var(--text); border-color:var(--accent) }
.btn-accent:hover   { background:var(--accent-dk); border-color:var(--accent-dk); transform:translateY(-2px) }
.btn-outline  { background:transparent; color:var(--primary); border-color:var(--primary) }
.btn-outline:hover  { background:var(--primary); color:#fff }
.btn-white    { background:#fff; color:var(--primary); border-color:#fff }
.btn-white:hover    { background:var(--bg-warm) }
.btn-sm       { padding:7px 16px; font-size:.82rem }
.btn-full     { width:100% }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important }

/* ── Badges ── */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.7rem; font-weight:700; letter-spacing:.3px }
.badge-new  { background:var(--accent); color:var(--text) }
.badge-sale { background:var(--primary); color:#fff }
.badge-hot  { background:#E53935; color:#fff }

/* ── Alerts ── */
.alert { padding:13px 18px; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.88rem; display:flex; align-items:center; gap:10px }
.alert-success { background:#E8F5E9; color:var(--success); border-left:4px solid var(--success) }
.alert-error   { background:#FFEBEE; color:var(--error);   border-left:4px solid var(--error)   }
.alert-info    { background:#E3F2FD; color:var(--info);    border-left:4px solid var(--info)    }
.alert-warning { background:var(--bg-warm); color:#E65100;  border-left:4px solid var(--accent)  }

/* ── Forms ── */
.form-group         { margin-bottom:16px }
.form-group label   { display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--text) }
.form-control {
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.9rem; background:var(--bg); color:var(--text); outline:none; transition:var(--transition);
}
.form-control:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(181,69,27,.1) }
textarea.form-control { min-height:110px; resize:vertical }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-text { font-size:.77rem; color:var(--text-muted); margin-top:4px }
.form-check { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.88rem }
.form-check input { accent-color:var(--primary); width:16px; height:16px }

/* ── Breadcrumb ── */
.breadcrumb { padding:14px 0; font-size:.8rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:4px; align-items:center }
.breadcrumb a { color:var(--primary) }
.breadcrumb a:hover { text-decoration:underline }
.breadcrumb-sep { opacity:.5 }

/* ── Topbar ── */
.topbar {
  background:var(--bg-dark); color:#C4A08A; font-size:.76rem; padding:7px 0;
  text-align:center; overflow:hidden;
}
.topbar .container { display:flex; justify-content:center; gap:24px; flex-wrap:wrap }
.topbar span { display:flex; align-items:center; gap:5px }

/* ── Header ── */
.site-header {
  background:#fff; border-bottom:1px solid var(--border); position:sticky;
  top:0; z-index:1000; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition);
}
.site-header.scrolled { box-shadow:var(--shadow) }
.header-inner { display:flex; align-items:center; gap:16px; padding:0 20px; height:var(--header-h) }
/* Logo */
.logo { display:flex; align-items:center; gap:11px; flex-shrink:0 }
.logo-mark {
  width:46px; height:46px; background:var(--primary); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1rem; box-shadow:0 3px 10px rgba(181,69,27,.3); flex-shrink:0;
}
.logo-text { display:flex; flex-direction:column; line-height:1.1 }
.logo-bn   { font-size:1.25rem; font-weight:700; color:var(--primary) }
.logo-en   { font-size:.7rem; color:var(--text-muted); font-family:var(--font-display); font-style:italic }
/* Nav */
.main-nav { margin-left:auto }
.main-nav ul { list-style:none; display:flex; gap:4px }
.main-nav a  { display:block; padding:7px 13px; border-radius:8px; font-size:.88rem; font-weight:500; color:var(--text); transition:var(--transition) }
.main-nav a:hover, .main-nav a.active { background:var(--bg-warm); color:var(--primary) }
.has-dropdown { position:relative }
.dropdown {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); min-width:190px; padding:6px 0; z-index:200;
}
.dropdown a { padding:10px 18px; display:block; border-radius:0 }
.has-dropdown:hover > .dropdown { display:block }
/* Header Actions */
.header-actions { display:flex; align-items:center; gap:6px; margin-left:16px }
.icon-btn {
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.05rem; background:var(--bg-warm); border:none;
  cursor:pointer; transition:var(--transition); color:var(--text); text-decoration:none; position:relative;
}
.icon-btn:hover { background:var(--primary); color:#fff }
.cart-badge {
  position:absolute; top:-3px; right:-3px; background:var(--accent); color:var(--text);
  font-size:.6rem; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:var(--transition) }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:998 }

/* ── Hero ── */
.hero {
  background:linear-gradient(135deg,var(--bg-dark) 0%,#3A1608 55%,#6B2810 100%);
  position:relative; overflow:hidden; min-height:88vh; display:flex; align-items:center;
}
.hero-pattern {
  position:absolute; inset:0; opacity:.06;
  background-image:radial-gradient(circle, #F4A225 1px, transparent 1px);
  background-size:30px 30px;
}
.hero-inner { position:relative; z-index:2; padding:80px 0; width:100% }
.hero-grid  { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; background:rgba(244,162,37,.15);
  border:1px solid rgba(244,162,37,.4); color:var(--accent); padding:6px 16px;
  border-radius:var(--radius-pill); font-size:.78rem; font-weight:600; margin-bottom:1.4rem;
}
.hero h1 { font-family:var(--font-display); font-size:clamp(2.2rem,4.5vw,3.8rem); color:#fff; line-height:1.22; margin-bottom:1rem }
.hero h1 em { color:var(--accent); font-style:italic }
.hero-desc { color:#C4A08A; font-size:.98rem; line-height:1.85; margin-bottom:2rem; max-width:480px }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap }
.hero-stats { display:flex; gap:32px; margin-top:3rem; flex-wrap:wrap }
.stat-item .stat-num { font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--accent); display:block; line-height:1 }
.stat-item .stat-lbl { font-size:.75rem; color:#A07060; margin-top:4px }
/* Hero visual */
.hero-visual { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.hv-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:22px 18px; text-align:center; color:#fff;
  backdrop-filter:blur(8px); transition:var(--transition);
}
.hv-card:hover { background:rgba(255,255,255,.12); transform:translateY(-5px) }
.hv-card:nth-child(even) { margin-top:22px }
.hv-card .hv-icon { font-size:2.6rem; margin-bottom:10px }
.hv-card h4 { font-size:.85rem; font-weight:600 }
.hv-card p  { font-size:.74rem; color:#9A8070; margin-top:4px }

/* ── Categories ── */
.cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px }
.cat-card {
  background:#fff; border:2px solid var(--border); border-radius:var(--radius);
  padding:28px 18px; text-align:center; transition:var(--transition);
  box-shadow:var(--shadow-sm); display:block; color:var(--text);
}
.cat-card:hover { border-color:var(--primary); transform:translateY(-6px); box-shadow:var(--shadow) }
.cat-card .cat-icon { font-size:3rem; margin-bottom:12px; display:block }
.cat-card h3  { font-weight:600; font-size:1rem; margin-bottom:4px }
.cat-card span { font-size:.78rem; color:var(--text-muted) }

/* ── Products Grid ── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:2.5rem }
.filter-btn {
  padding:8px 20px; border-radius:var(--radius-pill); border:2px solid var(--border);
  background:#fff; color:var(--text-muted); font-family:var(--font); font-size:.83rem;
  cursor:pointer; transition:var(--transition); font-weight:500;
}
.filter-btn:hover, .filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary) }
/* Product Card */
.product-card {
  background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  transition:var(--transition); box-shadow:var(--shadow-sm);
}
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(181,69,27,.2) }
.product-img {
  position:relative; aspect-ratio:1; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-warm),#F0E0C8);
  display:flex; align-items:center; justify-content:center;
}
.product-img .p-emoji { font-size:5rem; opacity:.55; pointer-events:none }
.product-img img  { width:100%; height:100%; object-fit:cover; transition:transform .45s ease }
.product-card:hover .product-img img  { transform:scale(1.07) }
.p-badges { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px }
.p-actions {
  position:absolute; top:10px; right:10px; display:flex; flex-direction:column;
  gap:6px; opacity:0; transition:var(--transition);
}
.product-card:hover .p-actions { opacity:1 }
.p-act-btn {
  width:34px; height:34px; border-radius:50%; background:#fff;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; cursor:pointer; transition:var(--transition); text-decoration:none; color:var(--text);
}
.p-act-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary) }
.product-info { padding:15px }
.p-cat  { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px }
.p-name { font-size:.92rem; font-weight:600; color:var(--text); margin-bottom:7px; line-height:1.4 }
.p-name a { color:inherit }
.p-rating { display:flex; align-items:center; gap:6px; margin-bottom:9px; font-size:.78rem; color:var(--text-muted) }
.p-stars  { color:var(--accent); letter-spacing:-1px }
.p-price  { display:flex; align-items:baseline; gap:9px; margin-bottom:11px }
.price-now { font-size:1.15rem; font-weight:700; color:var(--primary) }
.price-old { font-size:.82rem; color:var(--text-light); text-decoration:line-through }
.btn-add-cart {
  width:100%; padding:9px; background:var(--primary); color:#fff; border:none;
  border-radius:var(--radius-sm); font-family:var(--font); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.btn-add-cart:hover { background:var(--primary-dk) }
.btn-add-cart.added { background:var(--success) }

/* ── Promo Banner ── */
.promo-banner {
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent-dk) 100%);
  padding:64px 0; position:relative; overflow:hidden;
}
.promo-banner::before {
  content:''; position:absolute; right:-120px; top:-120px; width:450px; height:450px;
  border-radius:50%; background:rgba(255,255,255,.06);
}
.promo-banner::after {
  content:''; position:absolute; left:-80px; bottom:-80px; width:300px; height:300px;
  border-radius:50%; background:rgba(0,0,0,.08);
}
.promo-inner { position:relative; z-index:2 }
.promo-banner h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,3rem); color:#fff; margin-bottom:.8rem }
.promo-banner p  { color:rgba(255,255,255,.85); margin-bottom:2rem; max-width:500px }
.promo-timer { display:flex; gap:14px; margin-bottom:2.2rem; flex-wrap:wrap }
.timer-block {
  background:rgba(0,0,0,.2); border-radius:10px; padding:12px 18px;
  text-align:center; color:#fff; min-width:72px; backdrop-filter:blur(4px);
}
.t-num { font-family:var(--font-display); font-size:2rem; font-weight:700; display:block; line-height:1 }
.t-lbl { font-size:.68rem; opacity:.8; margin-top:4px; display:block }

/* ── Features ── */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px }
.feat-card { text-align:center; padding:28px 18px }
.feat-icon { font-size:2.4rem; margin-bottom:12px; display:block }
.feat-card h3 { font-size:.95rem; font-weight:700; margin-bottom:6px }
.feat-card p  { font-size:.82rem; color:var(--text-muted); line-height:1.6 }

/* ── Testimonials ── */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px }
.testi-card {
  background:#fff; border-radius:var(--radius); padding:26px; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); transition:var(--transition);
}
.testi-card:hover { box-shadow:var(--shadow); transform:translateY(-3px) }
.testi-stars { color:var(--accent); font-size:1.1rem; margin-bottom:12px }
.testi-text  { color:var(--text-muted); font-size:.88rem; line-height:1.8; margin-bottom:16px; font-style:italic }
.testi-author { display:flex; align-items:center; gap:11px }
.testi-avatar {
  width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0;
}
.testi-name { font-weight:600; font-size:.88rem }
.testi-loc  { font-size:.76rem; color:var(--text-muted) }

/* ── Shop page ── */
.shop-hero { background:var(--bg-warm); padding:44px 0; text-align:center; border-bottom:1px solid var(--border) }
.shop-hero h1 { font-family:var(--font-display); font-size:2.4rem }
.shop-layout  { display:grid; grid-template-columns:250px 1fr; gap:28px; padding:44px 0 }
/* Sidebar */
.sidebar {
  background:#fff; border-radius:var(--radius); border:1px solid var(--border);
  padding:22px; height:fit-content; position:sticky; top:calc(var(--header-h) + 14px);
}
.sidebar-title { font-size:1rem; font-weight:700; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--border) }
.sidebar-section { margin-bottom:22px }
.sidebar-section h4 { font-size:.82rem; font-weight:700; color:var(--text-muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px }
.sidebar-links { list-style:none }
.sidebar-links li { margin-bottom:6px }
.sidebar-links a {
  display:block; padding:7px 10px; border-radius:var(--radius-sm); font-size:.85rem;
  color:var(--text); transition:var(--transition);
}
.sidebar-links a:hover, .sidebar-links a.active { background:var(--bg-warm); color:var(--primary); font-weight:600 }
.shop-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px }
.shop-count  { font-size:.85rem; color:var(--text-muted) }
.sort-select {
  padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font); font-size:.83rem; background:#fff; cursor:pointer; outline:none;
}
.sort-select:focus { border-color:var(--primary) }
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted) }
.empty-state .empty-icon { font-size:4.5rem; margin-bottom:16px; opacity:.45 }

/* ── Product Detail ── */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; padding:44px 0 }
.gallery-main {
  aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--bg-warm);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
  margin-bottom:12px; font-size:8rem;
}
.gallery-main img { width:100%; height:100%; object-fit:cover }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.g-thumb {
  aspect-ratio:1; border-radius:8px; background:var(--bg-warm); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  cursor:pointer; transition:var(--transition); overflow:hidden;
}
.g-thumb:hover, .g-thumb.active { border-color:var(--primary) }
.g-thumb img { width:100%; height:100%; object-fit:cover }
.detail-title   { font-family:var(--font-display); font-size:1.9rem; margin-bottom:12px }
.detail-meta    { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; font-size:.85rem; color:var(--text-muted) }
.detail-price   { font-size:2rem; font-weight:700; color:var(--primary) }
.detail-old     { font-size:.95rem; color:var(--text-light); text-decoration:line-through; margin-left:10px }
.detail-discount{ background:var(--primary); color:#fff; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:8px }
.detail-desc    { color:var(--text-muted); line-height:1.9; margin:16px 0 22px }
.detail-info-box { background:var(--bg-warm); border-radius:10px; padding:14px 18px; margin-bottom:20px; font-size:.83rem }
.detail-info-box span { margin-right:16px }
/* Qty */
.qty-wrap { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; width:fit-content; margin-bottom:18px }
.qty-btn  { width:38px; height:38px; background:var(--bg-warm); border:none; cursor:pointer; font-size:1.1rem; transition:var(--transition) }
.qty-btn:hover { background:var(--primary); color:#fff }
.qty-input { width:48px; height:38px; border:none; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); text-align:center; font-size:.95rem }
/* Tabs */
.tabs-nav { display:flex; border-bottom:1px solid var(--border); margin-top:48px }
.tab-btn {
  padding:13px 24px; border:none; background:none; font-family:var(--font); font-size:.88rem;
  font-weight:600; cursor:pointer; color:var(--text-muted); border-bottom:2px solid transparent;
  transition:var(--transition); margin-bottom:-1px;
}
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary) }
.tab-pane { display:none; padding:24px 0 }
.tab-pane.active { display:block }
/* Reviews */
.review-item { padding:16px 0; border-bottom:1px solid var(--border) }
.review-item:last-child { border:none }
.review-header { display:flex; justify-content:space-between; margin-bottom:6px; flex-wrap:wrap; gap:8px }
.reviewer-name { font-weight:600; font-size:.88rem }
.review-date   { font-size:.75rem; color:var(--text-muted) }
.review-comment { font-size:.85rem; color:var(--text-muted); line-height:1.7 }

/* ── Cart ── */
.cart-layout  { display:grid; grid-template-columns:1fr 340px; gap:26px; padding:44px 0 }
.cart-table   { background:#fff; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden }
.cart-table table { width:100%; border-collapse:collapse }
.cart-table th { background:var(--bg-warm); padding:12px 16px; text-align:left; font-size:.78rem; font-weight:700; color:var(--text-muted); border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.4px }
.cart-table td { padding:15px 16px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:.88rem }
.cart-table tr:last-child td { border:none }
.cart-prod-thumb { width:56px; height:56px; border-radius:8px; background:var(--bg-warm); display:flex; align-items:center; justify-content:center; font-size:1.7rem; flex-shrink:0 }
.cart-prod-name  { font-weight:600; font-size:.88rem; line-height:1.3 }
.cart-prod-cat   { font-size:.74rem; color:var(--text-muted); margin-top:2px }
.cart-remove     { background:none; border:none; color:var(--error); cursor:pointer; font-size:1rem; padding:4px; transition:var(--transition) }
.cart-remove:hover { transform:scale(1.2) }
/* Summary */
.cart-summary { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:22px; height:fit-content; position:sticky; top:calc(var(--header-h) + 14px) }
.summary-title { font-size:1rem; font-weight:700; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border) }
.summary-row   { display:flex; justify-content:space-between; margin-bottom:10px; font-size:.88rem }
.summary-total { display:flex; justify-content:space-between; font-size:1.05rem; font-weight:700; color:var(--primary); border-top:1px solid var(--border); padding-top:12px; margin-top:4px }
.coupon-row    { display:flex; gap:8px; margin:14px 0 }
.coupon-row input { flex:1 }
.free-del-bar  { background:var(--bg-warm); border-radius:8px; padding:10px 14px; font-size:.78rem; color:var(--text-muted); margin-bottom:12px }

/* ── Checkout ── */
.checkout-grid { display:grid; grid-template-columns:1fr 360px; gap:26px; padding:44px 0 }
.checkout-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:26px; margin-bottom:18px }
.checkout-card h3 { font-size:1rem; font-weight:700; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--border) }
/* Payment methods */
.payment-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.payment-label {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:2px solid var(--border); border-radius:10px; cursor:pointer; transition:var(--transition);
}
.payment-label:has(input:checked) { border-color:var(--primary); background:rgba(181,69,27,.04) }
.payment-label input { accent-color:var(--primary) }
.payment-icon  { font-size:1.5rem }
.payment-name  { font-weight:600; font-size:.88rem }
.payment-sub   { font-size:.72rem; color:var(--text-muted) }

/* ── Auth pages ── */
.auth-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:40px 20px }
.auth-card {
  width:100%; max-width:440px; background:#fff; border-radius:var(--radius);
  border:1px solid var(--border); padding:38px; box-shadow:var(--shadow);
}
.auth-logo { text-align:center; margin-bottom:24px }
.auth-title { font-family:var(--font-display); font-size:2rem; text-align:center; margin-bottom:.4rem }
.auth-sub   { text-align:center; color:var(--text-muted); margin-bottom:24px; font-size:.88rem }
.auth-divider { text-align:center; color:var(--text-muted); font-size:.82rem; margin:14px 0; position:relative }
.auth-divider::before,.auth-divider::after { content:''; position:absolute; top:50%; width:42%; height:1px; background:var(--border) }
.auth-divider::before { left:0 }
.auth-divider::after  { right:0 }
.auth-link  { text-align:center; margin-top:16px; font-size:.85rem; color:var(--text-muted) }
.auth-link a { color:var(--primary); font-weight:600 }

/* ── Account ── */
.account-layout { display:grid; grid-template-columns:240px 1fr; gap:24px; padding:44px 0 }
.account-sidebar { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:0; overflow:hidden; height:fit-content; position:sticky; top:calc(var(--header-h)+14px) }
.account-profile { padding:24px; text-align:center; border-bottom:1px solid var(--border) }
.account-avatar { width:68px; height:68px; border-radius:50%; background:var(--primary); color:#fff; font-size:1.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 12px }
.account-name  { font-weight:700 }
.account-email { font-size:.78rem; color:var(--text-muted) }
.account-menu  { list-style:none; padding:8px 0 }
.account-menu a { display:flex; align-items:center; gap:10px; padding:11px 20px; font-size:.87rem; color:var(--text); transition:var(--transition) }
.account-menu a:hover,.account-menu a.active { background:var(--bg-warm); color:var(--primary) }
.account-stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px }
.stat-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:18px; text-align:center }
.stat-card .sc-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--primary) }
.stat-card .sc-lbl { font-size:.76rem; color:var(--text-muted) }
.order-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:14px; overflow:hidden }
.order-card-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; background:var(--bg-warm) }
.order-card-body { padding:14px 18px }
.order-id   { font-weight:700; color:var(--primary); font-size:.9rem }
.order-date { font-size:.76rem; color:var(--text-muted) }
.order-items-list { font-size:.82rem; color:var(--text-muted) }

/* ── Status badges ── */
.status { padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700 }
.status-pending    { background:#FFF3E0; color:#E65100 }
.status-processing { background:#E3F2FD; color:#1565C0 }
.status-shipped    { background:#EDE7F6; color:#4527A0 }
.status-delivered  { background:#E8F5E9; color:#1B5E20 }
.status-cancelled  { background:#FFEBEE; color:#B71C1C }

/* ── Contact ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:40px }
.contact-info-card { background:var(--primary); border-radius:var(--radius); padding:38px; color:#fff }
.contact-info-card h2 { font-family:var(--font-display); font-size:2rem; margin-bottom:.8rem }
.contact-info-card p  { opacity:.85; margin-bottom:2rem; line-height:1.7; font-size:.9rem }
.c-item { display:flex; gap:14px; margin-bottom:22px; align-items:flex-start }
.c-icon { width:40px; height:40px; background:rgba(255,255,255,.15); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem }
.c-text h4 { font-weight:600; font-size:.88rem; margin-bottom:2px }
.c-text p  { opacity:.8; font-size:.82rem; line-height:1.5 }
.contact-form-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:36px; box-shadow:var(--shadow) }
.contact-form-card h2 { font-family:var(--font-display); font-size:1.9rem; margin-bottom:.4rem }
.contact-form-card p  { color:var(--text-muted); margin-bottom:1.8rem; font-size:.88rem }

/* ── Admin ── */
.admin-body { background:#F4F1EC }
.admin-wrap { display:flex; min-height:100vh }
.admin-aside {
  width:240px; background:var(--bg-dark); flex-shrink:0; position:fixed;
  left:0; top:0; height:100vh; overflow-y:auto; z-index:200;
  display:flex; flex-direction:column;
}
.aside-logo { padding:20px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0 }
.aside-nav  { flex:1; padding:12px 0 }
.aside-nav a {
  display:flex; align-items:center; gap:12px; padding:11px 20px; color:#C4A08A;
  font-size:.86rem; font-weight:500; transition:var(--transition); text-decoration:none;
}
.aside-nav a:hover,.aside-nav a.active { background:rgba(181,69,27,.3); color:var(--accent) }
.aside-nav a .ni { font-size:1.05rem; width:20px; text-align:center }
.aside-nav .nav-sep { padding:8px 20px 4px; font-size:.7rem; color:#5A4030; text-transform:uppercase; letter-spacing:.8px; font-weight:700 }
.admin-main { margin-left:240px; flex:1; display:flex; flex-direction:column; min-height:100vh }
.admin-topbar { background:#fff; border-bottom:1px solid var(--border); padding:0 24px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100 }
.admin-topbar h1 { font-size:1.2rem; font-weight:700 }
.admin-content { padding:24px; flex:1 }
/* Admin stats */
.admin-stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin-bottom:24px }
.asc { background:#fff; border-radius:var(--radius); border:1px solid var(--border); padding:20px; display:flex; align-items:center; gap:14px }
.asc-icon { width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0 }
.asc-icon.orange { background:rgba(181,69,27,.1) }
.asc-icon.yellow { background:rgba(244,162,37,.12) }
.asc-icon.green  { background:rgba(46,125,50,.1) }
.asc-icon.blue   { background:rgba(21,101,192,.1) }
.asc-val { font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--text); line-height:1 }
.asc-lbl { font-size:.76rem; color:var(--text-muted); margin-top:4px }
/* Admin table card */
.admin-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; margin-bottom:22px }
.admin-card-head { padding:15px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border) }
.admin-card-head h3 { font-size:.95rem; font-weight:700 }
.admin-card-head a  { font-size:.8rem; color:var(--primary) }
.admin-table { width:100%; border-collapse:collapse }
.admin-table th { background:var(--bg-warm); padding:10px 16px; text-align:left; font-size:.76rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border) }
.admin-table td { padding:13px 16px; border-bottom:1px solid var(--border); font-size:.85rem; vertical-align:middle }
.admin-table tr:last-child td { border:none }
.admin-table tr:hover td { background:#FAFAF8 }
.tbl-responsive { overflow-x:auto }

/* ── Footer ── */
.site-footer { background:var(--bg-dark); color:#A07060 }
.footer-top  { padding:56px 0 36px }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px }
.footer-logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:14px }
.footer-about { font-size:.83rem; line-height:1.8; color:#6A5040; margin-bottom:18px }
.footer-social { display:flex; gap:10px }
.social-btn { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.07); color:#A07060; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:var(--transition); text-decoration:none; font-weight:700 }
.social-btn:hover { background:var(--primary); color:#fff }
.footer-col h4 { color:#E0C8A0; font-size:.88rem; font-weight:700; margin-bottom:16px }
.footer-links { list-style:none }
.footer-links li { margin-bottom:8px }
.footer-links a { font-size:.82rem; color:#6A5040; transition:var(--transition) }
.footer-links a:hover { color:var(--accent) }
.footer-contact li { font-size:.82rem; color:#6A5040; margin-bottom:8px; list-style:none; display:flex; gap:6px }
.nl-form { display:flex; margin-top:12px; overflow:hidden; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.1) }
.nl-form input { flex:1; padding:10px 13px; background:rgba(255,255,255,.06); border:none; color:#E0D0C0; font-family:var(--font); font-size:.8rem; outline:none }
.nl-form button { padding:0 14px; background:var(--primary); border:none; color:#fff; cursor:pointer; font-size:.9rem; transition:var(--transition) }
.nl-form button:hover { background:var(--accent); color:var(--text) }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:18px 0 }
.footer-bottom .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px }
.footer-bottom p   { font-size:.76rem }
.payment-icons { display:flex; gap:6px }
.payment-icons span { background:rgba(255,255,255,.07); padding:3px 9px; border-radius:5px; font-size:.7rem; font-weight:600 }

/* ── Scroll to top ── */
.scroll-top {
  position:fixed; bottom:22px; right:22px; width:42px; height:42px;
  background:var(--primary); color:#fff; border:none; border-radius:50%;
  font-size:1rem; cursor:pointer; box-shadow:var(--shadow); z-index:900;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px); transition:var(--transition);
}
.scroll-top.show { opacity:1; transform:translateY(0) }
.scroll-top:hover { background:var(--primary-dk); transform:translateY(-2px) }

/* ── Utility ── */
.text-center { text-align:center }
.mt-1 { margin-top:.4rem } .mt-2 { margin-top:.8rem } .mt-3 { margin-top:1.5rem } .mt-4 { margin-top:2.5rem }
.mb-1 { margin-bottom:.4rem } .mb-2 { margin-bottom:.8rem } .mb-3 { margin-bottom:1.5rem } .mb-4 { margin-bottom:2.5rem }
.d-flex { display:flex } .gap-2 { gap:.5rem } .gap-3 { gap:1rem } .align-center { align-items:center }
.flex-wrap { flex-wrap:wrap }
.fw-bold { font-weight:700 }

/* ── Animations ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }
@keyframes spin    { to { transform:rotate(360deg) } }
.fade-up { opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease }
.fade-up.in { opacity:1; transform:translateY(0) }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width:1024px) {
  .hero-grid     { grid-template-columns:1fr; text-align:center }
  .hero-btns     { justify-content:center }
  .hero-stats    { justify-content:center }
  .hero-visual   { display:none }
  .shop-layout   { grid-template-columns:1fr }
  .sidebar       { position:static }
  .detail-grid   { grid-template-columns:1fr }
  .cart-layout   { grid-template-columns:1fr }
  .checkout-grid { grid-template-columns:1fr }
  .contact-grid  { grid-template-columns:1fr }
  .footer-grid   { grid-template-columns:1fr 1fr }
  .account-layout{ grid-template-columns:1fr }
  .account-sidebar { position:static }
  .admin-aside   { display:none }
  .admin-main    { margin-left:0 }
}
@media (max-width:768px) {
  :root { --header-h:60px }
  .topbar .container { gap:10px; font-size:.7rem }
  .main-nav {
    position:fixed; top:0; left:0; width:280px; height:100vh; background:#fff;
    z-index:999; flex-direction:column; padding:70px 0 30px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .3s ease; margin:0;
    box-shadow:var(--shadow-lg); display:flex !important;
  }
  .main-nav.open { transform:translateX(0) }
  .main-nav ul   { flex-direction:column; padding:0 16px; gap:2px }
  .main-nav a    { padding:12px 14px }
  .has-dropdown:hover > .dropdown { display:none }
  .hamburger { display:flex }
  .nav-overlay.open { display:block }
  .form-row      { grid-template-columns:1fr }
  .payment-grid  { grid-template-columns:1fr }
  .footer-grid   { grid-template-columns:1fr }
  .products-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px }
  .product-info  { padding:11px }
  .p-name        { font-size:.84rem }
  .cats-grid     { grid-template-columns:repeat(2,1fr) }
  .features-grid { grid-template-columns:repeat(2,1fr) }
  .testi-grid    { grid-template-columns:1fr }
  .account-stat-cards { grid-template-columns:repeat(2,1fr) }
  .cart-table th:nth-child(3),
  .cart-table td:nth-child(3) { display:none }
  .footer-bottom .container { flex-direction:column; text-align:center }
}
@media (max-width:480px) {
  .header-inner  { padding:0 14px }
  .logo-bn       { font-size:1.1rem }
  .logo-mark     { width:38px; height:38px; font-size:.9rem }
  .cats-grid     { grid-template-columns:repeat(2,1fr) }
  .promo-timer   { gap:10px }
  .timer-block   { min-width:60px; padding:10px 12px }
  .t-num         { font-size:1.6rem }
  .admin-stat-cards { grid-template-columns:1fr 1fr }
}