:root{
  --bg-top:#22170b;
  --bg-bottom:#0c0a07;
  --text:#f4ecd8;
  --muted:#d1c29a;
  --panel:#15110c;
  --line:rgba(255,255,255,.10);
  --gold-1:#fff0c6; --gold-2:#f8d67e; --gold-3:#e4b759; --gold-4:#dca24a; --gold-5:#9e6e27;
  --rose-1:#ffd6e0; --rose-2:#f7a1ab;
  --radius:16px;
  --topbar-h:52px;
  --header-h:64px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 480px at 80% -15%, rgba(255,215,122,.22), transparent 60%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom) 68%);
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:-20%;
  background: radial-gradient(closest-side at 65% 30%, rgba(255,215,122,.18), transparent 70%);
  pointer-events:none; z-index:0; opacity:.9;
  animation:glow 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes glow{
  0%{ transform:translate3d(0,0,0) }
  50%{ transform:translate3d(-4%, 3%, 0) }
  100%{ transform:translate3d(5%, -2%, 0) }
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1180px; margin:0 auto; padding:0 18px; position:relative; z-index:1}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  border-bottom:1px solid var(--line);
  height:var(--topbar-h);
}
.topbar .row{height:100%; display:flex; align-items:center; justify-content:center}
.social{display:flex; gap:14px; align-items:center}
.social a{
  --ring1:#ffe8b1; --ring2:#f0cc71; --ring3:#dca24a;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:#f9e9c9;
  border:2px solid transparent;
  background:
    linear-gradient(#0c0a07,#0c0a07) padding-box,
    conic-gradient(from 0deg, var(--ring1), var(--ring2), var(--ring3), var(--ring1)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.25);
  transition: transform .18s ease, filter .18s ease;
}
.social a:hover{ transform:translateY(-1px); filter:brightness(1.08) }

/* Header */
header.header{
  position:sticky; top:var(--topbar-h); z-index:19;
  height:var(--header-h);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.head-row{height:100%; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.logo{
  width:28px;height:28px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-1), var(--gold-2) 40%, var(--gold-3));
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), inset 0 6px 16px rgba(255,194,45,.25);
}
.actions-top{display:flex; gap:8px; align-items:center}
.icon-btn{
  border:none; cursor:pointer; display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px; color:#1b1204; font-weight:800;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  box-shadow:0 8px 16px rgba(213,166,58,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s ease;
}
.icon-btn:active{ transform:scale(.98) }
.cart-btn{ position:relative }
.cart-btn .count{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; display:grid; place-items:center; background:#e64; color:#fff; font-size:.75rem; font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* Menu sheet */
.sheet{ position:fixed; inset:0; z-index:25; display:none }
.sheet.open{ display:block }
.sheet .mask{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(4px); animation:fade .2s ease}
.sheet .panel{ position:absolute; inset:0; display:grid; place-items:center; animation:pop .22s ease }
.sheet .menu{
  width:min(520px, 92vw); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.sheet .links{display:grid; gap:12px; text-align:center; font-weight:800; font-size:1.1rem}
.sheet .links a, .sheet .links button.as-link{
  padding:.7rem 1rem; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text);
}
.sheet .close{ position:absolute; top:14px; inset-inline-end:14px }

/* Hero */
.hero{padding:14px 0 6px}
.headline{
  font-weight:800; font-size:clamp(28px, 5vw, 46px); line-height:1.06; margin:8px 0 4px;
  background:linear-gradient(92deg, var(--gold-1), var(--gold-3), var(--gold-5));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{color:var(--gold-1); opacity:.92; margin-bottom:8px}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:rgba(255,255,255,.04); padding:.4rem .6rem; border-radius:999px; color:var(--muted); font-size:.92rem}

/* Sections */
.section{padding:16px 0}
.sec-head{display:flex; align-items:end; justify-content:space-between; margin:10px 0 8px}
.sec-title{font-size:1.2rem; font-weight:800}

/* Products grid */
.products{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:600px){ .products{ grid-template-columns: repeat(2, 1fr) } }
@media (min-width:900px){ .products{ grid-template-columns: repeat(3, 1fr) } }
@media (min-width:1200px){ .products{ grid-template-columns: repeat(5, 1fr) } }

.card{
  position:relative; overflow:hidden; border-radius:14px; background:var(--panel);
  border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition: transform .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.18) }
.thumb{position:relative; aspect-ratio:1/1; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08))}
.thumb picture, .thumb img{width:100%; height:100%; object-fit:contain; padding:10%}
.info{padding:10px 12px 12px; display:grid; gap:6px}
.title{font-weight:800}
.muted{color:var(--muted)}
.price{font-weight:800; color:var(--gold-1)}
.highlight{ outline:2px solid rgba(255,215,122,.7); outline-offset:3px; border-radius:14px; transition:outline-color .8s ease }

/* Overlay (minimal blur) */
.actions{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.25);
  opacity:0; transition:opacity .18s ease;
}
.card:hover .actions, .card:focus-within .actions, .card.show-actions .actions{ opacity:1 }
.act-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}

/* Icon buttons (SVG for cross-browser consistency) */
.btn-ico{
  --g1:#ffe8b1; --g2:#e3bb62;
  border:none; cursor:pointer; display:grid; place-items:center;
  width:48px; height:48px; border-radius:999px; color:#1b1204;
  background:
    linear-gradient(180deg, var(--g1), var(--g2)) padding-box,
    conic-gradient(from 0deg, #ffe8b1, #f0cc71, #dca24a, #ffe8b1) border-box;
  border:2px solid transparent;
  box-shadow:0 10px 20px rgba(213,166,58,.35), inset 0 1px 0 rgba(255,255,255,.55);
  transform:translateZ(0);
  animation: pulse 3.6s ease-in-out infinite;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  line-height:0; font-size:0;
}
.btn-ico svg{ width:20px; height:20px; display:block; color:#1b1204; }
.btn-ico:hover{ transform:scale(1.06) }
.btn-ico:active{ transform:scale(.98) }
.btn-eye{ --g1:#ffe8b1; --g2:#e3bb62 }
.btn-cart{ --g1:#ffe4a0; --g2:#dca24a }
.btn-heart{
  --g1:var(--rose-1); --g2:var(--rose-2);
  background:
    linear-gradient(180deg, var(--g1), var(--g2)) padding-box,
    conic-gradient(from 0deg, #ffd6e0, #f7a1ab, #ffd6e0) border-box;
  box-shadow:0 10px 20px rgba(226, 120, 140, .35), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-heart.filled{ filter:saturate(1.05) brightness(1.05); animation: pulseFilled 4s ease-in-out infinite }

@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.04) } }
@keyframes pulseFilled{ 0%,100%{ transform:scale(1.02) } 50%{ transform:scale(1.08) } }

/* Drawer cart */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:24 }
.drawer{
  position:fixed; top:0; right:0; width:min(420px,92vw); height:100vh; background:#141008; color:var(--text);
  border-left:1px solid var(--line); transform:translateX(100%); transition:transform .28s ease; z-index:26;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none }
.drawer-backdrop.open{ opacity:1; pointer-events:auto }
.drawer header{position:sticky; top:0; background:#141008; border-bottom:1px solid var(--line); padding:14px 16px; display:flex; justify-content:space-between; align-items:center}
.drawer .body{padding:14px 16px; flex:1; overflow:auto; display:grid; gap:10px}
.drawer .footer{padding:14px 16px; border-top:1px solid var(--line); display:grid; gap:10px}
.mini{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line)}
.mini img{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#0d0b07}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.qty button{all:unset; cursor:pointer; padding:.3rem .6rem}
.qty input{all:unset; width:36px; text-align:center; padding:.3rem 0}

/* Quick View (full-page blur + strong backdrop) */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:30 }
.modal.open{ display:grid }
.backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation:fade .2s ease;
}
.blur-bg .topbar,
.blur-bg .header,
.blur-bg main,
.blur-bg footer{
  filter: blur(8px);
  transition: filter .18s ease;
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)){
  .backdrop{ background: rgba(0,0,0,.75); }
}

.modal-card{
  position:relative; width:min(920px, 94vw); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:12px;
  animation:pop .22s ease;
}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:900px){ .modal-grid{grid-template-columns:1fr} }
.modal .close{ position:absolute; top:10px; inset-inline-end:10px; border:none; background:transparent; color:var(--text); font-size:22px; cursor:pointer }
.modal .bigpic{background:#0d0b07; border-radius:12px; display:grid; place-items:center; padding:10px}
.modal .details{padding:6px 8px 10px; display:grid; gap:6px}
.specs{display:grid; gap:6px}
.specs .row{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px}
.btn{
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem 1rem; border-radius:999px; font-weight:800; letter-spacing:.2px; min-height:44px; color:#1b1204;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  box-shadow:0 8px 16px rgba(213,166,58,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px) }

/* Info cards */
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }
.card-lite{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:14px; padding:14px}
.stars{color:#ffd978; letter-spacing:1.5px}
.faq .q{font-weight:800}
.faq .a{color:var(--muted)}

.newsletter{display:grid; gap:10px}
.email-row{display:flex; gap:8px; flex-wrap:wrap}
.input{ border:1px solid var(--line); border-radius:999px; padding:.7rem 1rem; background:rgba(255,255,255,.04); color:var(--text); min-width:260px; flex:1 }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg, #eaf9ea, #d5f1d5); color:#0f4d0f; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.6rem 1rem; box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; z-index:40; transition:opacity .2s ease, transform .2s ease;
  font-weight:700;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Animations & helpers */
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{ transform:scale(.96); opacity:.7 } to{ transform:scale(1); opacity:1 } }
.reveal{ opacity:0; transform: translateY(14px); transition:opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform:none }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none }
  .reveal{ transition:none }
  .card:hover{ transform:none }
  .btn:hover{ transform:none }
  .btn-ico{ animation:none }
}

/* Order Status Page */
.order-lookup-form {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
}
#order-results {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.order-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 8px;
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.order-status {
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.9rem;
  color: #fff;
}
.order-status.paid { background: #2a4; }
.order-status.pending { background: #f90; }
}