/* ============================================================
   BOUTIQUE — Elegant Premium Theme (Fully Responsive)
   Charcoal #1a1a1a · Gold #c9a961 · Cream #faf8f5
   Playfair Display (serif headings) + Inter (body)
   Breakpoints: 1200 · 1024 · 768 · 640 · 480
   ============================================================ */

:root{
  --charcoal:#1a1a1a;
  --ink:#262423;
  --gold:#c9a961;
  --gold-dark:#a8893d;
  --cream:#faf8f5;
  --cream-2:#f3eee6;
  --line:#e7e1d6;
  --muted:#8a8178;
  --danger:#b3261e;
  --ok:#3f7d4f;
  --maxw:1240px;
  --radius:2px;
  --shadow:0 18px 50px -24px rgba(26,26,26,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--charcoal);line-height:1.2;margin:0 0 .4em}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 30px;font:500 13px/1 'Inter',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--charcoal);background:var(--charcoal);color:#fff;
  cursor:pointer;border-radius:var(--radius);transition:.25s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-gold:hover{background:var(--charcoal);border-color:var(--charcoal)}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-sm{padding:10px 20px;font-size:12px}

/* ---------- Topbar ---------- */
.topbar{background:var(--charcoal);color:#e9e2d4;text-align:center;padding:9px 12px;font-size:12px;letter-spacing:.08em}
.topbar p{margin:0}

/* ---------- Header ---------- */
.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:rgba(250,248,245,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px 28px;max-width:var(--maxw);margin:0 auto}
.logo{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;letter-spacing:.04em;color:var(--charcoal);text-align:center;grid-column:2;line-height:1}
.main-nav{display:flex;gap:26px;grid-column:1}
.main-nav a{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);position:relative;padding:4px 0}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s}
.main-nav a:hover::after{right:0}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;grid-column:3}
.icon-link{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.search-mini input{background:transparent;border:none;border-bottom:1px solid var(--line);padding:6px 4px;font-size:13px;font-family:inherit;width:120px;outline:none;transition:.2s}
.search-mini input:focus{border-color:var(--gold);width:160px}
.cart-link{position:relative;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.cart-badge{position:absolute;top:-8px;right:-14px;background:var(--gold);color:#fff;font-size:10px;font-weight:600;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.nav-toggle{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-toggle span{width:22px;height:1.5px;background:var(--charcoal);transition:.3s}

/* Mobile nav overlay */
.nav-close{display:none;background:none;border:none;font-size:24px;cursor:pointer;position:absolute;top:20px;right:24px;color:var(--charcoal);padding:4px 8px}
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;opacity:0;visibility:hidden;transition:.3s}
.nav-overlay.active{opacity:1;visibility:visible}
.mobile-search{display:none;padding:16px 28px;border-top:1px solid var(--line)}
.mobile-search input{width:100%;padding:12px 14px;border:1px solid var(--line);font-family:inherit;font-size:15px;border-radius:var(--radius);background:#fff}
/* ---------- Flash messages ---------- */
.flash{max-width:var(--maxw);margin:18px auto 0;padding:14px 22px;border-radius:var(--radius);font-size:14px;cursor:pointer}
.flash-success{background:#eef6f0;border-left:3px solid var(--ok);color:#2c5a3a}
.flash-info{background:#f0eef6;border-left:3px solid #6b5fb0}
.flash-error{background:#f9eeed;border-left:3px solid var(--danger);color:#7c1d17}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--charcoal);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:.55;background-size:cover;background-position:center}
.hero-inner{position:relative;padding:130px 28px;text-align:center;max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(32px,6vw,72px);color:#fff;letter-spacing:.01em;margin-bottom:.3em}
.hero h1 em{color:var(--gold);font-style:italic}
.hero p{font-size:clamp(14px,2vw,17px);color:#e6dccd;margin-bottom:34px;max-width:520px;margin-left:auto;margin-right:auto}
.hero .btn-gold{padding:16px 40px}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section-head{text-align:center;margin-bottom:54px}
.section-head h2{font-size:clamp(24px,4vw,42px)}
.eyebrow{display:block;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:500}

/* ---------- Product grid & cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s;position:relative;display:flex;flex-direction:column}
.product-card:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-4px)}
.product-thumb{aspect-ratio:4/5;background:var(--cream-2);overflow:hidden;position:relative}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
.product-card:hover .product-thumb img{transform:scale(1.06)}
.badge{position:absolute;top:14px;left:14px;background:var(--charcoal);color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;z-index:2}
.badge-sale{background:var(--danger)}
.product-body{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.product-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;margin:2px 0;color:var(--charcoal)}
.product-name a:hover{color:var(--gold-dark)}
.price-row{margin-top:auto;display:flex;align-items:baseline;gap:10px}
.price{font-size:16px;font-weight:600;color:var(--charcoal)}
.price-old{font-size:13px;color:var(--muted);text-decoration:line-through}
.product-add{margin-top:14px;width:100%;padding:11px;background:transparent;color:var(--charcoal);border:1px solid var(--line);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.25s}
.product-add:hover{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}

/* ---------- Category strip ---------- */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.category-card{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);display:block}
.category-card img{width:100%;height:100%;object-fit:cover;transition:.6s}
.category-card:hover img{transform:scale(1.07)}
.category-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,26,26,.7))}
.category-label{position:absolute;inset:auto 0 0 0;padding:26px;text-align:center;color:#fff;z-index:2}
.category-label h3{color:#fff;margin:0;font-size:24px}
.category-label span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}

/* ---------- Feature strip ---------- */
.features{background:var(--cream-2);padding:48px 0}
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.feature h4{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);margin:0 0 4px}
.feature p{font-size:13px;color:var(--muted);margin:0}
.feature .ico{font-size:24px;margin-bottom:10px;display:block}

/* ---------- Page banner (shop etc) ---------- */
.page-banner{background:var(--charcoal);color:#fff;padding:70px 0;text-align:center}
.page-banner h1{color:#fff;font-size:clamp(28px,5vw,52px)}
.page-banner p{color:#e6dccd;margin:8px 0 0}

/* ---------- Shop layout ---------- */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:60px 0}
.filters h4{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-family:'Inter',sans-serif;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.filter-group{margin-bottom:30px}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:5px 0}
.filter-group input[type=checkbox],.filter-group input[type=radio]{accent-color:var(--gold)}
.filter-toggle-btn{display:none;margin-bottom:20px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:14px;flex-wrap:wrap}
.toolbar select,.toolbar input{padding:10px 12px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:14px}
.toolbar .result-count{color:var(--muted);font-size:14px}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:50px;flex-wrap:wrap}
.pagination a,.pagination span{padding:10px 14px;border:1px solid var(--line);font-size:14px}
.pagination .current{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}

/* ---------- Product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:70px 0}
.gallery-main{aspect-ratio:4/5;background:var(--cream-2);border:1px solid var(--line);overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:12px;margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.gallery-thumbs img{width:80px;height:100px;object-fit:cover;border:1px solid var(--line);cursor:pointer;transition:.25s;flex-shrink:0}
.gallery-thumbs img.active{border-color:var(--gold)}
.detail-cat{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.detail-name{font-size:clamp(26px,4vw,42px);margin:.1em 0 .3em}
.detail-price{font-size:24px;font-weight:600;margin-bottom:8px}
.detail-price .old{font-size:16px;color:var(--muted);text-decoration:line-through;margin-left:10px}
.detail-price .save{display:inline-block;background:var(--gold);color:#fff;font-size:11px;padding:3px 9px;letter-spacing:.1em;margin-left:8px;vertical-align:middle}
.detail-desc{color:#5d544c;line-height:1.8;margin:22px 0}
.option-row{margin:22px 0}
.option-row .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:block}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-width:48px;padding:10px 16px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;letter-spacing:.05em;text-align:center;transition:.2s}
.chip:hover{border-color:var(--charcoal)}
.chip.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.qty-row{display:flex;align-items:center;gap:18px;margin:26px 0}
.qty-control{display:flex;align-items:center;border:1px solid var(--line)}
.qty-control button{width:42px;height:44px;background:transparent;border:none;cursor:pointer;font-size:18px}
.qty-control input{width:50px;height:44px;border:none;text-align:center;font-family:inherit;font-size:15px}
.detail-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stock-ok{color:var(--ok);font-size:13px}
.stock-low{color:var(--danger);font-size:13px}
.meta-list{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.meta-list dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta-list dd{margin:2px 0 14px}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;padding:60px 0}
.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.cart-table th{text-align:left;padding:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--cream-2)}
.cart-table td{padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table .prod-cell{display:flex;gap:16px;align-items:center}
.cart-table .prod-cell img{width:80px;height:100px;object-fit:cover;border:1px solid var(--line)}
.cart-table .prod-cell .pn{font-family:'Playfair Display',serif;font-weight:600;font-size:16px}
.cart-table .prod-cell .ps{font-size:12px;color:var(--muted)}
.qty-small{display:flex;align-items:center;border:1px solid var(--line);width:fit-content}
.qty-small button,.qty-small a{width:30px;height:34px;background:transparent;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;transition:.2s}
.qty-small button:hover,.qty-small a:hover{background:var(--cream-2);color:var(--charcoal)}
.qty-small input{width:38px;text-align:center;border:none;font-family:inherit}
.btn-link{background:none;border:none;color:var(--danger);font-size:13px;cursor:pointer;font-family:inherit;text-decoration:underline}
.summary-box{background:#fff;border:1px solid var(--line);padding:28px;align-self:start;position:sticky;top:120px}
.summary-box h3{margin-top:0}
.summary-row{display:flex;justify-content:space-between;padding:10px 0;font-size:15px}
.summary-row.total{border-top:1px solid var(--line);margin-top:10px;padding-top:18px;font-size:20px;font-weight:600;font-family:'Playfair Display',serif}
.empty-state{text-align:center;padding:90px 20px}
.empty-state .ico{font-size:48px;margin-bottom:20px}

/* ---------- Forms / auth ---------- */
.auth-wrap{max-width:440px;margin:60px auto;padding:40px;background:#fff;border:1px solid var(--line)}
.auth-wrap h1{font-size:32px;text-align:center;margin-top:0}
.auth-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:28px}
.auth-tabs a{padding:10px 22px;border:1px solid var(--line);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.auth-tabs a.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);font-family:inherit;font-size:15px;background:#fff;transition:.2s;border-radius:var(--radius)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--gold)}
.form-field .err{color:var(--danger);font-size:13px;margin-top:5px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hint{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}

/* ---------- Account ---------- */
.account-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:60px 0}
.account-side h3{margin-top:0}
.account-side ul{list-style:none;padding:0;margin:20px 0}
.account-side li a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.04em}
.account-side li a.active,.account-side li a:hover{color:var(--gold-dark)}
.card{background:#fff;border:1px solid var(--line);padding:30px}
.orders-table{width:100%;border-collapse:collapse}
.orders-table th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 10px;border-bottom:1px solid var(--line)}
.orders-table td{padding:14px 10px;border-bottom:1px solid var(--line);font-size:14px}

/* Status badges */
.status{display:inline-block;padding:5px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;white-space:nowrap}
.status-pending{background:#fff4e0;color:#9c6a00}
.status-paid{background:#e6f0ff;color:#2b5fa6}
.status-shipped{background:#efe6ff;color:#5b3fb0}
.status-delivered{background:#eef6f0;color:#2c5a3a}
.status-cancelled{background:#f9eeed;color:#7c1d17}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:40px;padding:60px 0}
.payment-box{background:var(--cream-2);border:1px solid var(--line);padding:24px;margin-top:18px;border-radius:var(--radius)}
.upi-qr{width:170px;height:170px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:14px auto;font-family:monospace;text-align:center;font-size:11px;color:var(--muted);padding:10px}
.order-review{background:#fff;border:1px solid var(--line);padding:24px}
.order-review h3{margin-top:0}

/* ---------- Admin ---------- */
.admin-body{background:#f4f1ec}
.admin-header{background:var(--charcoal);color:#fff;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.admin-header .logo{color:#fff;font-size:22px}
.admin-header nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.admin-header nav a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#e6dccd}
.admin-header nav a:hover{color:var(--gold)}
.admin-layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 64px)}
.admin-side{background:#fff;border-right:1px solid var(--line);padding:24px 0}
.admin-side a{display:block;padding:12px 28px;font-size:14px;color:var(--ink)}
.admin-side a.active,.admin-side a:hover{background:var(--cream-2);border-left:3px solid var(--gold);padding-left:25px;color:var(--charcoal)}
.admin-main{padding:34px 38px}
.admin-main h1{font-size:30px;margin-top:0}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:36px}
.stat-card{background:#fff;border:1px solid var(--line);padding:24px}
.stat-card .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat-card .val{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:var(--charcoal);margin-top:6px}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.admin-table th{text-align:left;background:var(--cream-2);padding:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.admin-table td{padding:14px;border-top:1px solid var(--line);font-size:14px}
.admin-table tr:hover{background:var(--cream)}
.thumb-mini{width:46px;height:58px;object-fit:cover;border:1px solid var(--line)}
.admin-actions a{font-size:13px;margin-right:10px}
.admin-actions .del{color:var(--danger)}
.admin-grid-2{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.admin-status-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.admin-status-tabs a{padding:6px 12px;border:1px solid var(--line);font-size:12px;border-radius:var(--radius)}
.admin-status-tabs a.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.admin-toolbar-form{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}
.admin-toolbar-form input,.admin-toolbar-form select{padding:10px 14px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:14px;border-radius:var(--radius)}
.admin-toolbar-form input{flex:1;min-width:200px}

/* ---------- Misc ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.spacer{height:30px}
.divider{height:1px;background:var(--line);margin:30px 0}
.related{padding:60px 0 90px}
table{max-width:100%}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal);color:#e9e2d4;padding:60px 0 0}
.site-footer .logo{color:#fff;font-size:26px;margin-bottom:6px}
.site-footer h5{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.site-footer li a{color:#c5bfb4;font-size:14px;transition:.2s}
.site-footer li a:hover{color:#fff}
.site-footer .muted{color:#8a8178}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:50px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;text-align:center;font-size:13px}
.footer-bottom p{margin:4px 0}


/* ==========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================== */

/* ---- Large tablets / small desktops (< 1200px) ---- */
@media(max-width:1200px){
  .checkout-layout{grid-template-columns:1fr 340px;gap:30px}
  .admin-main{padding:24px 28px}
}

/* ---- Tablets (< 1024px) ---- */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:30px 40px}
  .product-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .feature-row{grid-template-columns:repeat(2,1fr);gap:24px}
  .shop-layout,.cart-layout,.checkout-layout,.product-detail,.account-layout{grid-template-columns:1fr;gap:30px}
  .filters{order:-1;display:none}
  .filters.open{display:block}
  .filter-toggle-btn{display:flex}
  .summary-box{position:static}
  .checkout-layout{gap:24px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-layout{grid-template-columns:1fr}
  .admin-side{display:flex;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line)}
  .admin-side a{border-left:3px solid transparent;padding:12px 20px;font-size:13px}
  .admin-side a.active,.admin-side a:hover{border-left-color:var(--gold);background:var(--cream-2);padding-left:17px}
  .admin-main{padding:20px}
  .product-body{padding:16px}
  .product-name{font-size:16px}
  .section{padding:60px 0}
  .section-head{margin-bottom:40px}
}

/* ---- Large phones (< 768px) ---- */
@media(max-width:768px){
  .container{padding:0 20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 30px}
  .footer-bottom{text-align:center}

  /* Header → mobile */
  .header-inner{grid-template-columns:auto 1fr auto;gap:12px;padding:14px 20px}
  .main-nav{
    display:none;position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;
    background:#fff;flex-direction:column;padding:80px 28px 28px;gap:0;z-index:60;
    box-shadow:var(--shadow);overflow-y:auto;
    animation:slideIn .3s ease;
  }
  @keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  .main-nav.open{display:flex}
  .main-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
  .nav-close{display:block}
  .nav-overlay.active{opacity:1;visibility:visible}
  .nav-toggle{display:flex;grid-column:1}
  .logo{grid-column:2;text-align:center;font-size:22px}
  .header-actions{grid-column:3;gap:12px}
  .search-mini{display:none}
  .mobile-search{display:block;padding:0 20px 14px}
  .mobile-search input{width:100%;padding:11px 14px;border:1px solid var(--line);font-family:inherit;font-size:14px;border-radius:var(--radius);background:#fff}

  /* Product grid */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .product-body{padding:14px}
  .product-cat{font-size:10px}
  .product-name{font-size:15px}
  .product-add{padding:9px;font-size:10px}
  .price{font-size:14px}

  /* Stat grid */
  .stat-grid{grid-template-columns:1fr 1fr;gap:14px}
  .stat-card{padding:18px}
  .stat-card .val{font-size:24px}

  /* Forms */
  .form-grid{grid-template-columns:1fr;gap:14px}

  /* Product detail */
  .gallery-thumbs img{width:60px;height:75px}
  .detail-name{font-size:clamp(22px,5vw,32px)}
  .detail-actions{flex-direction:column;gap:12px}
  .detail-actions .btn,.detail-actions .btn-gold{width:100%;justify-content:center}

  /* Cart */
  .cart-layout{padding:30px 0}
  .cart-table thead{display:none}
  .cart-table tr{display:flex;flex-direction:column;padding:16px 0;border-bottom:1px solid var(--line)}
  .cart-table td{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:none;width:100%}
  .cart-table td::before{content:attr(data-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:70px}
  .cart-table td[data-label=""]::before{content:""}
  .cart-table td:first-child{order:1}
  .cart-table td:nth-child(2){order:3}
  .cart-table td:nth-child(3){order:2}
  .cart-table td:nth-child(4){order:4}
  .cart-table td:last-child{order:5;justify-content:flex-end}
  .cart-table .prod-cell img{width:70px;height:88px}
  .cart-table .prod-cell .pn{font-size:14px}
  .summary-box{position:static}

  /* Checkout */
  .checkout-layout{padding:30px 0}
  .order-review{position:static}

  /* Account */
  .account-layout{padding:30px 0}
  .account-side ul{display:flex;flex-wrap:wrap;gap:0;margin-bottom:10px}
  .account-side li{flex:0 0 auto}
  .account-side li a{display:inline-block;padding:8px 16px;border-bottom:2px solid var(--line);font-size:13px}

  /* Section spacing */
  .section{padding:50px 0}
  .section-head{margin-bottom:32px}
  .hero-inner{padding:100px 20px}
  .page-banner{padding:50px 0}

  /* Auth */
  .auth-wrap{margin:40px auto;padding:28px 24px;max-width:100%}
  .auth-wrap h1{font-size:26px}

  /* Admin header */
  .admin-header{padding:14px 20px;flex-direction:column;align-items:flex-start}
  .admin-header nav{gap:16px}
}

/* ---- Small phones (< 640px) ---- */
@media(max-width:640px){
  .container{padding:0 16px}
  .feature-row{grid-template-columns:1fr 1fr;gap:20px}
  .feature .ico{font-size:20px}
  .feature h4{font-size:12px}
  .feature p{font-size:12px}
  .category-label h3{font-size:18px}
  .category-label{padding:18px}

  /* Shop toolbar */
  .toolbar{flex-direction:column;align-items:stretch;gap:12px}
  .toolbar>div{display:flex;justify-content:space-between;align-items:center}

  /* Pagination */
  .pagination a,.pagination span{padding:8px 11px;font-size:13px}

  /* Orders table → card layout */
  .orders-table thead{display:none}
  .orders-table tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .orders-table td{display:flex;justify-content:space-between;padding:4px 0;border-bottom:none;font-size:14px;width:100%}
  .orders-table td::before{content:attr(data-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:80px}

  /* Admin tables */
  .admin-table{font-size:13px}
  .admin-table th,.admin-table td{padding:10px 8px;font-size:12px}
  .admin-table .thumb-mini{width:36px;height:46px}
  .admin-grid-2{grid-template-columns:1fr!important;gap:20px}
  .admin-toolbar-form{flex-direction:column}
  .admin-toolbar-form input{min-width:0}
  #orderStatusTabs{grid-template-columns:repeat(3,1fr)!important}
  #orderStatusTabs .stat-card{padding:14px}
  #orderStatusTabs .val{font-size:20px}
  #orderStatusTabs .lbl{font-size:11px}

  /* Admin tables → card layout with data-labels */
  .admin-table thead{display:none}
  .admin-table tbody tr{display:block;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px}
  .admin-table tbody tr:hover{background:var(--cream)}
  .admin-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border:none;font-size:13px;text-align:right}
  .admin-table td::before{content:attr(data-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;flex-shrink:0}
  .admin-table td[data-label=""]::before{content:""}
  .admin-table .admin-actions{justify-content:flex-end;gap:8px}
  .admin-table .thumb-mini{width:40px;height:50px}

  /* Stat grid → single column on very small */
  .stat-grid{grid-template-columns:1fr 1fr}
  #orderStatusTabs{grid-template-columns:repeat(2,1fr)!important}

  /* Checkout */
  .checkout-layout{gap:20px}
  .payment-box{padding:18px}
}

/* ---- Extra small phones (< 480px) ---- */
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;gap:28px;text-align:center}
  .footer-bottom p{font-size:12px}
  .product-grid{grid-template-columns:1fr 1fr;gap:12px}
  .category-grid{grid-template-columns:1fr}
  .hero-inner{padding:70px 16px}
  .hero h1{font-size:clamp(26px,8vw,40px)}
  .hero p{font-size:14px;margin-bottom:24px}
  .hero .btn-gold{padding:14px 32px}
  .container{padding:0 14px}
  .section{padding:40px 0}

  /* Topbar */
  .topbar{font-size:11px;padding:7px 10px}
  .topbar p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Cart table */
  .cart-table .prod-cell img{width:60px;height:76px}

  /* Buttons */
  .btn{padding:12px 22px;font-size:12px}
  .btn-sm{padding:8px 16px;font-size:11px}
}

/* ---- Very small / old phones (< 360px) ---- */
@media(max-width:360px){
  .container{padding:0 12px}
  .logo{font-size:18px}
  .header-actions .icon-link{font-size:10px}
  .product-grid{gap:10px}
  .product-body{padding:10px}
  .product-name{font-size:14px}
  .price{font-size:13px}
  .product-add{padding:8px;font-size:9px}
  .chip{min-width:40px;padding:8px 12px;font-size:12px}
  .qty-control button{width:36px;height:38px;font-size:16px}
  .qty-control input{width:42px;height:38px;font-size:14px}
}

/* ---- Landscape phones ---- */
@media(max-height:500px) and (orientation:landscape){
  .hero-inner{padding:60px 20px}
  .hero h1{font-size:clamp(24px,5vw,48px)}
  .hero p{font-size:13px;margin-bottom:20px}
  .auth-wrap{margin:20px auto;padding:20px}
  .main-nav{padding-top:70px}
}

/* ---- Print styles ---- */
@media print{
  .topbar,.site-header,.nav-toggle,.cart-link,.header-actions,
  .btn,.admin-side,.admin-header nav,.filter-toggle-btn{display:none!important}
  .main-nav{display:none!important}
  body{background:#fff;color:#000}
  .site-footer{background:#eee;color:#333}
}