/* ═══════════════════════════════════════════
   ALMAAR — Premium Streetwear
   Dark + Gold / Serif + Sans / Rounded
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #070707;
  --surface: #0c0c0c;
  --card: #111111;
  --elevated: #181818;

  --text: #f5f5f0;
  --text-2: #9a9a95;
  --text-3: #555550;

  --gold: #c8a97e;
  --gold-l: #ddc4a0;
  --gold-d: #a08560;
  --beige: #e8d5b7;

  --grad: linear-gradient(135deg, var(--gold-l), var(--gold), var(--gold-d));
  --grad-text: linear-gradient(135deg, var(--beige), var(--gold));
  --glow: rgba(200, 169, 126, 0.08);

  --border: #1a1a1a;
  --border-h: #252525;

  --serif: 'Cormorant Garamond', serif;
  --sans: 'DM Sans', sans-serif;

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --r: 14px;
  --r-sm: 8px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-weight: 400; }
::selection { background: var(--gold); color: #000; }
a { color: inherit; text-decoration: none; }

#three-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ── LOADER ── */
.loader {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.5rem;
}
.loader .lo {
  font-family: var(--serif); font-size: 2rem;
  background: var(--grad-text); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: 0.1em;
  opacity: 0; animation: fi .5s ease .15s forwards;
}
.loader .bar {
  width: 36px; height: 2px; border-radius: 2px;
  background: var(--border); overflow: hidden;
  opacity: 0; animation: fi .3s ease .35s forwards;
}
.loader .bar::after {
  content: ''; display: block; width: 100%; height: 100%;
  background: var(--grad); border-radius: 2px;
  animation: sl .9s ease-in-out infinite;
}
.loader.hide { animation: fo .5s ease forwards; }
@keyframes fi { to { opacity: 1 } }
@keyframes sl { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes fo { to { opacity:0; visibility:hidden; pointer-events:none } }

/* ═══ NAV ═══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 2.5rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(7,7,7,0.5);
  backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.4s;
}
nav.scrolled { background: rgba(7,7,7,0.92); }
.logo {
  font-family: var(--serif); font-size: 1.25rem;
  background: var(--grad-text); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  text-decoration: none; letter-spacing: 0.08em;
}
.logo img { display: none; }
.nav-c { display: flex; gap: 2.5rem; list-style: none; }
.nav-c a {
  font-size: 0.78rem; font-weight: 500; color: var(--text-3);
  transition: color 0.25s; letter-spacing: 0.02em;
}
.nav-c a:hover, .nav-c a.on { color: var(--text); }
.nav-r { display: flex; align-items: center; gap: 1rem; }
.bag {
  position: relative; color: var(--text-3); transition: color 0.25s;
  display: flex; align-items: center; cursor: pointer; background: none; border: none;
}
.bag:hover { color: var(--text); }
.bag svg { width: 20px; height: 20px; }
.bag-dot {
  position: absolute; top: -2px; right: -5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); display: none;
}
.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; z-index: 1001; }
.ham span { width: 20px; height: 1.5px; background: var(--text); transition: 0.3s; display: block; }
.ham.active span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.ham.active span:nth-child(2) { opacity: 0; }
.ham.active span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }

/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.3s var(--ease); border: none;
  letter-spacing: 0.01em;
}
.btn-g {
  background: var(--grad); color: #000;
  box-shadow: 0 2px 12px var(--glow);
}
.btn-g:hover { box-shadow: 0 6px 24px rgba(200,169,126,0.18); transform: translateY(-1px); }
.btn-o {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-h);
}
.btn-o:hover { border-color: var(--gold-d); color: var(--gold-l); }
.btn .ar { transition: transform 0.2s; font-style: normal; }
.btn:hover .ar { transform: translateX(3px); }

/* ═══ SECTIONS ═══ */
.section { padding: 7rem 2.5rem; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.s-label { font-size: 0.72rem; font-weight: 500; color: var(--gold); margin-bottom: 0.6rem; letter-spacing: 0.06em; }
.s-title { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; line-height: 1.1; }
.s-title em { font-style: italic; color: var(--gold-l); }
.s-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3.5rem; }

/* ═══ PRODUCT CARDS ═══ */
.p-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.p-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  transition: all 0.5s var(--ease);
}
.p-card:hover {
  border-color: var(--border-h);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(200,169,126,0.04);
}
.p-img {
  aspect-ratio: 3/4; position: relative; overflow: hidden;
  background: var(--surface);
}
.p-gallery {
  position: absolute; inset: 0;
}
.p-img .icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 6.5rem; transition: transform 1s var(--ease);
}
.p-card:hover .icon { transform: scale(1.04); }
.p-tag {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.3rem 0.8rem; border-radius: 6px;
  background: rgba(200,169,126,0.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(200,169,126,0.15);
  color: var(--gold-l); font-size: 0.65rem; font-weight: 600;
  z-index: 2;
}
.p-sizes {
  position: absolute; top: 1rem; right: 1rem;
  display: flex; gap: 4px; z-index: 2;
  opacity: 0; transform: translateY(-5px);
  transition: all 0.35s var(--ease);
}
.p-card:hover .p-sizes { opacity: 1; transform: translateY(0); }
.p-sizes span {
  padding: 0.22rem 0.45rem; border-radius: 5px;
  background: rgba(7,7,7,0.75); backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  font-size: 0.6rem; font-weight: 500; color: var(--text-2);
}
.p-cta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem; z-index: 2;
  background: linear-gradient(transparent, rgba(7,7,7,0.92));
  transform: translateY(100%); transition: transform 0.45s var(--ease);
}
.p-card:hover .p-cta { transform: translateY(0); }
.p-cta .btn { width: 100%; justify-content: center; border-radius: var(--r-sm); }

.p-info { padding: 1.5rem 1.6rem 1.8rem; }
.p-cat { font-size: 0.65rem; font-weight: 600; color: var(--gold); margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.p-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; }
.p-desc { font-size: 0.8rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.2rem; font-weight: 400; }
.p-foot { display: flex; justify-content: space-between; align-items: center; }
.p-price { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; }
.p-colors { display: flex; gap: 6px; }
.p-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); transition: border-color 0.2s, transform 0.2s;
}
.p-dot:hover { border-color: var(--gold-d); transform: scale(1.2); }
.size-chip { background: rgba(7,7,7,0.7); backdrop-filter: blur(6px); }
.size-chip:hover { border-color: var(--gold) !important; color: var(--gold-l) !important; }

/* ═══ DIVIDER ═══ */
.divider {
  height: 1px; max-width: 1200px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border-h), transparent);
  position: relative; z-index: 1;
}

/* ═══ NEWSLETTER ═══ */
.nl {
  padding: 6rem 2rem; text-align: center;
  position: relative; z-index: 1;
}
.nl h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; margin-bottom: 0.5rem; }
.nl p { color: var(--text-3); font-size: 0.85rem; margin-bottom: 2rem; font-weight: 400; }
.nl-form {
  display: flex; max-width: 400px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s;
}
.nl-form:focus-within { border-color: var(--gold-d); box-shadow: 0 0 0 3px var(--glow); }
.nl-form input {
  flex: 1; padding: 0.82rem 1rem; border: none; background: transparent;
  color: var(--text); font-family: var(--sans); font-size: 0.82rem; outline: none;
}
.nl-form input::placeholder { color: var(--text-3); }
.nl-form button {
  padding: 0.82rem 1.5rem; background: var(--grad); border: none;
  color: #000; font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  cursor: pointer; transition: opacity 0.3s; letter-spacing: 0.02em;
}
.nl-form button:hover { opacity: 0.88; }

/* ═══ FOOTER ═══ */
footer {
  border-top: 1px solid var(--border);
  padding: 4rem 2.5rem 1.8rem; position: relative; z-index: 1;
}
.f-grid { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 2.5rem; max-width: 1200px; margin: 0 auto 3rem; }
.f-logo {
  font-family: var(--serif); font-size: 1.4rem;
  background: var(--grad-text); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.8rem;
}
.f-desc { color: var(--text-3); font-size: 0.8rem; line-height: 1.75; max-width: 260px; }
.f-col h4 { font-size: 0.72rem; font-weight: 600; color: var(--text-2); margin-bottom: 1rem; letter-spacing: 0.03em; }
.f-col a { display: block; color: var(--text-3); font-size: 0.8rem; margin-bottom: 0.5rem; transition: color 0.25s; }
.f-col a:hover { color: var(--text); }
.f-bot {
  max-width: 1200px; margin: 0 auto; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; color: var(--text-3);
}
.f-soc { display: flex; gap: 1.8rem; }
.f-soc a { color: var(--text-3); transition: color 0.25s; font-weight: 500; }
.f-soc a:hover { color: var(--text); }

/* ═══ CART ═══ */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 5000; opacity: 0; visibility: hidden; transition: all 0.3s; }
.overlay.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; width: 380px; max-width: 90vw; height: 100vh;
  background: var(--bg); border-left: 1px solid var(--border); z-index: 5001;
  transform: translateX(100%); transition: transform 0.5s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.dr-top { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--border); }
.dr-top h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.dr-x { background: none; border: none; color: var(--text-3); font-size: 1.1rem; cursor: pointer; transition: color 0.2s; }
.dr-x:hover { color: var(--text); }
.dr-body { flex: 1; overflow-y: auto; padding: 0.8rem 1.5rem; }
.dr-empty { text-align: center; padding: 4rem 1rem; color: var(--text-3); font-size: 0.85rem; }
.cart-i { display: flex; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cart-i-img { width: 52px; height: 66px; background: var(--elevated); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.cart-i-info { flex: 1; }
.cart-i-n { font-size: 0.82rem; font-weight: 500; margin-bottom: 0.15rem; }
.cart-i-p { font-size: 0.78rem; color: var(--gold); font-weight: 600; }
.cart-i-rm { background: none; border: none; color: var(--text-3); font-size: 0.65rem; cursor: pointer; transition: color 0.2s; align-self: flex-start; }
.cart-i-rm:hover { color: #e74c3c; }
.dr-foot { padding: 1.3rem 1.5rem; border-top: 1px solid var(--border); }
.dr-total { display: flex; justify-content: space-between; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem; }
.dr-total .amt { color: var(--gold-l); }
.dr-foot .btn { width: 100%; justify-content: center; }

.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  background: var(--elevated); border: 1px solid var(--border-h);
  border-radius: var(--r-sm); padding: 0.75rem 1.4rem;
  font-size: 0.78rem; color: var(--text);
  transform: translateY(60px); opacity: 0;
  transition: all 0.4s var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* FORMS */
.fg { margin-bottom: 1.5rem; }
.fg label { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-2); margin-bottom: 0.4rem; }
.fg input, .fg textarea, .fg select {
  width: 100%; padding: 0.82rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--card); color: var(--text);
  font-family: var(--sans); font-size: 0.82rem;
  transition: border-color 0.3s, box-shadow 0.3s; outline: none;
}
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--gold-d); box-shadow: 0 0 0 3px var(--glow); }
.fg textarea { resize: vertical; min-height: 120px; }
.fg select option { background: var(--bg); }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.rv { opacity: 0; transform: translateY(18px); transition: all 0.7s var(--ease); }
.rv.vis { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.06s; }
.d2 { transition-delay: 0.12s; }

/* RESPONSIVE */

/* Canvas on mobile */
@media (max-width: 900px) {
  #three-bg { opacity: 0.7; }
}
@media (max-width: 600px) {
  #three-bg { opacity: 0.5; }
}

@media (max-width: 900px) {
  nav { padding: 0 1.2rem; height: 56px; }
  .nav-c { display: none; }
  .nav-c.open {
    display: flex; flex-direction: column; position: fixed;
    inset: 0; background: var(--bg); z-index: 999;
    justify-content: center; align-items: center; gap: 2.5rem;
    padding: 2rem;
  }
  .nav-c.open li { list-style: none; }
  .nav-c.open a { font-size: 1.1rem; color: var(--text-2); text-decoration: none; }
  .nav-c.open a:hover { color: var(--text); }
  .ham { display: flex; z-index: 1001; }
  .section { padding: 4rem 1.5rem; }
  .p-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .fr { grid-template-columns: 1fr; }

  /* Hero */
  .hero { min-height: 85vh; padding: 5rem 1.5rem; }
  .h-brand { font-size: clamp(2rem,8vw,3rem) !important; }
  .h-title { font-size: clamp(1.4rem,5vw,2rem); }
  .h-sub { font-size: 0.82rem; max-width: 90%; }
  .met-row { gap: 1.5rem; }
  .met-v { font-size: 1.2rem; }

  /* About stories */
  .story { grid-template-columns: 1fr !important; }
  .s-vis {
    min-height: 200px !important;
    border-left: none !important; border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .s-txt { padding: 2rem 1.5rem; }

  /* Collection specs */
  .specs { grid-template-columns: 1fr 1fr; }

  /* Values */
  .vals { grid-template-columns: 1fr; }

  /* Contact */
  .ct { grid-template-columns: 1fr !important; gap: 2rem; }

  /* Product cards — compact 2-col mobile style */
  .p-card { max-width: 100%; border-radius: 10px; }
  .p-img { min-height: 180px; border-radius: 10px 10px 0 0; }
  .p-info { padding: .8rem .9rem 1rem; }
  .p-cat { font-size: .6rem; margin-bottom: .15rem; }
  .p-name { font-size: .88rem; margin-bottom: .2rem; line-height: 1.2; }
  .p-desc { display: none; }
  .p-foot { margin-top: .3rem; }
  .p-price { font-size: .82rem; }
  .p-colors .p-dot { width: 14px; height: 14px; }
  .p-tag { font-size: .55rem; padding: .2rem .5rem; top: 6px; left: 6px; }
  .p-sizes { display: none; }
  .p-cta { display: none; }
  .wish-btn { width: 28px; height: 28px; top: 6px; right: 6px; }
  .wish-btn svg { width: 14px; height: 14px; }
  .size-chip { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }

  /* Cart drawer — fullscreen on mobile */
  .drawer { width: 100%; max-width: 100vw; }

  /* Newsletter */
  .nl { padding: 3rem 1.5rem; }
  .nl h3 { font-size: 1.4rem; }
  .nl-form { flex-direction: column; border: none; gap: 0.6rem; }
  .nl-form input { border: 1px solid var(--border); border-radius: var(--r-sm); min-height: 44px; }
  .nl-form button { border-radius: var(--r-sm); min-height: 44px; }

  /* Form inputs — 44px touch target */
  .fg input, .fg textarea, .fg select { min-height: 44px; font-size: 16px; /* prevent iOS zoom */ }
  .btn { min-height: 44px; }

  /* Footer */
  .f-grid { gap: 2rem; }
  footer { padding: 3rem 1.5rem 1.5rem; }
}

@media (max-width: 600px) {
  .f-grid { grid-template-columns: 1fr; }
  .f-bot { flex-direction: column; gap: 0.8rem; text-align: center; }
  .hero { min-height: 80vh; padding: 4rem 1.2rem; }
  .h-brand { font-size: clamp(1.6rem,7vw,2.4rem) !important; }
  .h-title { font-size: clamp(1.1rem,4.5vw,1.6rem); }
  .section { padding: 3rem 1rem; }
  .p-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .p-img { min-height: 155px; }
  .p-info { padding: .6rem .7rem .8rem; }
  .p-name { font-size: .78rem; }
  .p-price { font-size: .75rem; }
  .p-cat { font-size: .55rem; }
  .met-row { flex-direction: column; gap: 1rem; }
  .met { text-align: center; }
  .specs { grid-template-columns: 1fr; }

  /* Typography scale down */
  h1 { font-size: clamp(1.4rem,5vw,2rem) !important; }
  .page-hero h1, .ah h1, .sh h1, .dh h1 { font-size: clamp(1.6rem,6vw,2.2rem) !important; }

  /* Quote section */
  .fq { font-size: 1rem; padding: 2rem 1.5rem; }

  /* Toast — above bottom nav on phones */
  .toast { bottom: 1rem; right: 1rem; left: 1rem; text-align: center; }

  /* Safe area for notch phones */
  nav { padding: 0 max(1.2rem, env(safe-area-inset-left)); }
  footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}

/* WhatsApp Floating Button */
.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(37,211,102,.35);z-index:999;transition:transform .2s,box-shadow .2s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(37,211,102,.45)}
@media(max-width:600px){.wa-float{bottom:1rem;right:1rem;width:50px;height:50px}.wa-float svg{width:24px;height:24px}}

/* ═══ FEATURE 1: Product Image Zoom on Hover ═══ */
.p-img-zoom{overflow:hidden;cursor:crosshair}
.p-img-zoom img{transition:transform .4s ease}
.p-img-zoom:hover img{transform:scale(1.8)}
.pd-main-img{overflow:hidden;cursor:zoom-in}
.pd-main-img.zoomed{cursor:zoom-out}
.pd-main-img img.zoom-active{transform-origin:var(--zx,50%) var(--zy,50%);transform:scale(2)}

/* ═══ FEATURE 2: Wishlist ═══ */
.wish-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:4;transition:all .2s}
.wish-btn:hover{background:rgba(0,0,0,.7);transform:scale(1.1)}
.wish-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;transition:all .2s}
.wish-btn.liked svg{fill:#ef4444;stroke:#ef4444}
.wish-page{max-width:1100px;margin:0 auto;padding:6rem 2.5rem 4rem;position:relative;z-index:1}
.wish-empty{text-align:center;padding:3rem;color:var(--text-3)}

/* ═══ FEATURE 3: Recently Viewed ═══ */
.rv-section{position:relative;z-index:1;padding:2.5rem 2.5rem 1rem;max-width:1200px;margin:0 auto}
.rv-section h3{font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-bottom:1rem;color:var(--text-2)}
.rv-scroll{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rv-scroll::-webkit-scrollbar{height:4px}
.rv-scroll::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:2px}
.rv-item{flex:0 0 160px;scroll-snap-align:start;cursor:pointer;transition:transform .2s}
.rv-item:hover{transform:translateY(-2px)}
.rv-item img{width:100%;height:200px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)}
.rv-item-name{font-size:.72rem;margin-top:.4rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-item-price{font-size:.7rem;color:var(--gold);font-weight:600}
@media(max-width:600px){.rv-section{padding:2rem 1.2rem .5rem}.rv-item{flex:0 0 130px}.rv-item img{height:165px}}

/* ═══ FEATURE 4: Size Quiz Modal ═══ */
.sq-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.sq-bg.show{display:flex}
.sq-modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:2rem;width:480px;max-width:92vw;max-height:88vh;overflow-y:auto}
.sq-step{display:none}.sq-step.active{display:block}
.sq-title{font-family:var(--serif);font-size:1.2rem;font-weight:400;margin-bottom:.3rem}
.sq-sub{font-size:.78rem;color:var(--text-3);margin-bottom:1.2rem}
.sq-options{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sq-opt{padding:.9rem;border:1px solid var(--border);border-radius:8px;text-align:center;cursor:pointer;transition:all .2s;font-size:.82rem}
.sq-opt:hover{border-color:var(--gold-d);color:var(--text)}
.sq-opt.sel{border-color:var(--gold);background:rgba(200,169,126,.06);color:var(--gold-l)}
.sq-result{text-align:center;padding:1.5rem 0}
.sq-result-size{font-family:var(--serif);font-size:3rem;color:var(--gold-l);margin:.5rem 0}
.sq-result-note{font-size:.8rem;color:var(--text-2)}
.sq-nav{display:flex;justify-content:space-between;margin-top:1.3rem;padding-top:.8rem;border-top:1px solid var(--border)}
.sq-nav button{padding:.5rem 1.2rem;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--elevated);color:var(--text)}
.sq-nav .sq-next{background:var(--grad);color:#000;border:none}

/* ═══ FEATURE 5: Instagram Feed ═══ */
.ig-section{position:relative;z-index:1;padding:3rem 0;overflow:hidden}
.ig-head{text-align:center;margin-bottom:1.5rem;padding:0 2rem}
.ig-head h3{font-family:var(--serif);font-size:1.3rem;font-weight:400}
.ig-head h3 em{font-style:italic;color:var(--gold-l)}
.ig-head p{font-size:.78rem;color:var(--text-3);margin-top:.3rem}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.ig-item{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .4s}
.ig-item:hover img{transform:scale(1.06);filter:brightness(1.1)}
.ig-item::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.4));opacity:0;transition:opacity .3s}
.ig-item:hover::after{opacity:1}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ig-grid{grid-template-columns:repeat(2,1fr)}}

/* ═══ FEATURE 6: Advanced Analytics (Admin) — handled in admin CSS ═══ */

/* ═══ FEATURE 7: Loyalty Toast ═══ */
.loyalty-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;background:rgba(200,169,126,.1);border:1px solid rgba(200,169,126,.2);border-radius:12px;font-size:.65rem;color:var(--gold-l);font-weight:600}

/* ═══ ANNOUNCEMENT BAR ═══ */
.announce-bar{background:var(--gold);color:#000;text-align:center;padding:.45rem 1rem;font-size:.68rem;font-weight:600;display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;z-index:100;position:relative}
.announce-sep{opacity:.4}
@media(max-width:600px){.announce-bar{font-size:.6rem;padding:.35rem .8rem}.announce-sep{display:none}.announce-bar{flex-direction:column;gap:.1rem}}

/* ═══ SEARCH ═══ */
.search-toggle{background:none;border:none;color:var(--text-2);cursor:pointer;padding:4px;transition:color .2s}
.search-toggle:hover{color:var(--gold)}
.search-ov{position:fixed;top:0;left:0;right:0;background:rgba(7,7,7,.95);backdrop-filter:blur(12px);z-index:1100;padding:1.5rem 2rem;transform:translateY(-100%);transition:transform .3s var(--ease);display:flex;justify-content:center}
.search-ov.show{transform:translateY(0)}
.search-box{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;width:100%;max-width:600px}
.search-box input{flex:1;background:none;border:none;color:var(--text);font-size:.9rem;outline:none;font-family:var(--sans)}
.search-box input::placeholder{color:var(--text-3)}

/* ═══ BACK TO TOP ═══ */
.btt{position:fixed;bottom:5rem;right:1.5rem;width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--gold);font-size:1rem;cursor:pointer;z-index:90;opacity:0;transform:translateY(20px);transition:all .3s;display:flex;align-items:center;justify-content:center}
.btt.show{opacity:1;transform:translateY(0)}
.btt:hover{background:var(--elevated);border-color:var(--gold-d)}
@media(max-width:600px){.btt{bottom:4.5rem;right:1rem;width:36px;height:36px;font-size:.85rem}}

/* ═══ QUICK VIEW ═══ */
.qv-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:1000;display:none;align-items:center;justify-content:center}
.qv-bg.show{display:flex}
.qv-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.8rem;width:700px;max-width:94vw;max-height:90vh;overflow-y:auto;position:relative;animation:qvIn .25s ease}
@keyframes qvIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.qv-close{position:absolute;top:.8rem;right:.8rem;background:var(--elevated);border:1px solid var(--border);color:var(--text);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;z-index:2}
.qv-close:hover{border-color:var(--gold-d)}
.qv-btn{top:44px!important}
@media(max-width:600px){.qv-box{padding:1.2rem}.qv-content>div{grid-template-columns:1fr!important}}

/* ═══ LAZY LOADING ═══ */
img[loading="lazy"]{opacity:0;transition:opacity .4s}
img[loading="lazy"].loaded,img[loading="lazy"][complete]{opacity:1}

/* Nav adjustment for announcement bar */
nav{top:28px}
nav.scrolled{top:0}
@media(max-width:600px){nav{top:38px}}