/* ---------- Golden Pink Theme ---------- */
:root{
  --gold: #d4af37; --gold-2:#c39a2c;
  --rose: #efb2c5; --rose-deep:#d58aa6;
  --ink:#0a0a0a; --ink-2:#111;
  --text:#f5f5f5; --muted:#cfcfcf;
  --bg: radial-gradient(1200px 800px at 20% -10%, rgba(239,178,197,0.18) 0%, rgba(239,178,197,0.08) 30%, transparent 65%),
        radial-gradient(900px 600px at 80% 10%, rgba(212,175,55,0.20) 0%, rgba(212,175,55,0.10) 35%, transparent 70%),
        #0b0b0b;
  --card:#121213; --card-2:#161617;
  --ring: 0 0 0 1px rgba(212,175,55,.35), 0 6px 24px rgba(239,178,197,.06);
  --shadow:0 10px 30px rgba(0,0,0,.30);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0; background:var(--bg); color:var(--text); font-family:"Poppins",system-ui; }
h1,h2,h3,h4{font-family:"Playfair Display",serif; letter-spacing:.2px}
a{ color:var(--rose); text-decoration:none }

/* Header */
.header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:10px clamp(14px,3vw,28px); background:rgba(10,10,10,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(212,175,55,.2);
}
.site-logo img{ width:160px; height:auto; display:block; }
@media (max-width:640px){ .site-logo img{ width:120px; } }
.icon-btn{ background:none; border:0; color:var(--text); font-size:20px; cursor:pointer; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn.cart #cartCount{ font-size:.82rem; background:linear-gradient(180deg,var(--rose),var(--rose-deep)); color:#101;
  padding:2px 6px; border-radius:999px; margin-left:6px; }

/* Hero tiles */
.hero{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; padding:16px clamp(14px,3vw,28px); }
.hero-tile{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(212,175,55,.2); box-shadow:var(--shadow); }
.hero-tile img{ width:100%; height:320px; object-fit:cover; display:block; }
.hero-caption{ position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
@media (max-width:820px){ .hero{ grid-template-columns:1fr; } .hero-tile img{ height:260px; } }

/* Controls */
.container{ padding:0 clamp(14px,3vw,28px) 40px; }
.controls{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin:16px 0; flex-wrap:wrap; }
.tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.tabs .tab{
  background:linear-gradient(180deg, rgba(239,178,197,.18), rgba(239,178,197,.06));
  border:1px solid rgba(212,175,55,.35); color:var(--text);
  padding:8px 14px; border-radius:999px; cursor:pointer; backdrop-filter: blur(6px);
}
.tabs .tab.active{ background:linear-gradient(180deg, rgba(212,175,55,.35), rgba(212,175,55,.15)); box-shadow:var(--ring); }
.search{ min-width:240px; background:#0e0e10; color:var(--text); border-radius:12px; padding:10px 12px; border:1px solid rgba(212,175,55,.25); }
.search::placeholder{ color:#b8b8b8 }

/* Grid / Cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.card{ background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(212,175,55,.22); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover{ transform:translateY(-2px); border-color: rgba(212,175,55,.42); box-shadow:0 18px 40px rgba(0,0,0,.35); }

.card-media{ position:relative; height:260px; overflow:hidden; background:#0f0f10; }
.gallery-img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-btn{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px;
  border-radius:999px; border:0; color:#fff; line-height:36px; font-size:20px; cursor:pointer; background:rgba(0,0,0,.45); z-index:3; }
.gal-btn.prev{ left:8px } .gal-btn.next{ right:8px }
.dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index:3 }
.dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer }
.dot.on{ background:#fff }

.card-body{ padding:14px 14px 16px }
.title{ font:600 1.08rem/1.3 "Playfair Display",serif }
.price-line{ display:flex; align-items:center; gap:10px; margin-top:4px }
.price{ font-weight:700 }
.compare{ color:var(--muted); text-decoration:line-through }
.actions{ margin-top:12px; position:relative; z-index:4 }

/* Buttons */
.btn{ appearance:none; border:1px solid rgba(212,175,55,.5);
  background:linear-gradient(180deg, rgba(212,175,55,.35), rgba(212,175,55,.15));
  color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600 }
.btn:hover{ border-color:rgba(239,178,197,.6); box-shadow:var(--ring) }
.btn.primary{ background:linear-gradient(180deg, var(--rose), var(--rose-deep)); color:#101; border:1px solid rgba(0,0,0,.15) }

/* Cart panel */
.cart-panel{ position:fixed; inset:auto 0 0 auto; width:min(440px,92vw); max-height:100vh; overflow:auto;
  background:linear-gradient(180deg,var(--ink-2),#0e0e0f); border-left:1px solid rgba(212,175,55,.25);
  box-shadow: -18px 0 40px rgba(0,0,0,.45); transform:translateX(100%); transition:transform .25s ease; z-index:9998 }
.cart-panel.open{ transform:translateX(0) }
.cart .cart-head{ display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid rgba(212,175,55,.18) }
.cart-row{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:12px 16px }
.cart-title{ font-weight:500 }
.cart-total{ display:flex; justify-content:space-between; padding:16px; border-top:1px solid rgba(212,175,55,.18) }

/* Quick View modal */
.qv.hidden{ display:none }
.qv{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:9999 }
.qv-box{ background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(212,175,55,.25);
  width:min(900px,92vw); border-radius:16px; display:grid; grid-template-columns:1.2fr 1fr; overflow:hidden; box-shadow:var(--shadow); position:relative }
.qv-media img{ width:100%; height:100%; object-fit:cover; display:block }
.qv-body{ padding:18px }
.qv-close{ position:absolute; top:14px; right:14px; background:#000; color:#fff; border:0; width:36px; height:36px; border-radius:999px; cursor:pointer }
@media (max-width:820px){ .qv-box{ grid-template-columns:1fr } }
/* overlay & hidden */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9000; }
.hidden{ display:none !important; }

/* side menu */
.side-menu{
  position:fixed; inset:0 auto 0 0; width:min(320px,90vw);
  background:linear-gradient(180deg,var(--ink-2),#0e0e0f);
  border-right:1px solid rgba(212,175,55,.25);
  box-shadow:18px 0 40px rgba(0,0,0,.45);
  transform:translateX(-100%); transition:transform .25s ease; z-index:10000;
}
.side-menu.open{ transform:translateX(0); }
.side-menu-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(212,175,55,.18) }
.side-menu-list{ list-style:none; margin:0; padding:10px 12px; }
.side-menu-list a{ display:block; padding:10px 12px; border-radius:10px; color:var(--text); border:1px solid transparent; }
.side-menu-list a:hover{ border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.08) }

/* search drawer */
.search-bar{
  position:sticky; top:60px; z-index:8000;
  display:flex; gap:8px; align-items:center;
  padding:10px clamp(14px,3vw,28px);
  background:linear-gradient(180deg, rgba(239,178,197,.12), rgba(239,178,197,.04));
  border-bottom:1px solid rgba(212,175,55,.2);
  backdrop-filter: blur(8px);
}
#searchInput{
  flex:1; background:#0e0e10; color:var(--text); border-radius:12px; padding:10px 12px; border:1px solid rgba(212,175,55,.25);
}

/* ensure cart close is visible */
.cart .cart-head .icon-btn{
  font-size:18px; background:#000; border:1px solid rgba(212,175,55,.3); border-radius:10px; padding:6px 10px;
}

/* Quick View gallery + options */
.qv-media{ position:relative; }
.qv-btn{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:0;
  color:#fff; line-height:36px; font-size:20px; cursor:pointer; background:rgba(0,0,0,.45); z-index:3; }
.qv-btn.prev{ left:8px } .qv-btn.next{ right:8px }
.qv-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index:3 }
.qv-dots .dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer }
.qv-dots .dot.on{ background:#fff }
.opt{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.opt select{ background:#0e0e10; color:var(--text); border:1px solid rgba(212,175,55,.25); border-radius:10px; padding:8px 10px; }

/* cart meta (size/color) */
.cart-meta{ font-size:.85rem; opacity:.8 }

/* footer */
.footer{ margin-top:24px; border-top:1px solid rgba(212,175,55,.2); background:linear-gradient(180deg,var(--card),var(--card-2)); }
.foot-inner{ display:flex; gap:20px; justify-content:space-between; padding:18px clamp(14px,3vw,28px); flex-wrap:wrap; }
.foot-copy{ padding:10px clamp(14px,3vw,28px) 18px; opacity:.8 }
.footer a{ color:var(--rose) }
.footer a{ color:var(--rose) }

/* Smooth in-page anchor scroll (Collections, Contact) */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 76px; } /* offset for sticky header */

/* Ensure the cart drawer feels solid on mobile */
.cart-panel { overscroll-behavior: contain; }

/* Cart qty buttons (− / +) */
.cart-qty { display:flex; align-items:center; gap:10px; }
.qbtn{
  width:32px; height:32px; border-radius:10px; border:1px solid rgba(212,175,55,.35);
  background:#0e0e10; color:var(--text); cursor:pointer; line-height:32px; font-weight:700;
}
.qbtn:hover{ box-shadow: var(--ring); }

/* Empty-state text */
.empty{ text-align:center; opacity:.8; padding:20px 10px; }

/* Quick View: make next/prev buttons always visible over images */
.qv-media { background:#0f0f10; min-height:260px; }
.qv-media img{ background:#0f0f10; }

/* Improve tap targets in the side menu on mobile */
.side-menu-list a{ min-height:40px; display:flex; align-items:center; }