/* ============================================================
   AL HADI STORE — FULL 3D THEME (2026)
   Loads after style.css. Pure visual/interaction layer — every
   selector below targets existing classes/IDs only. No app.js
   logic, form, or element ID is touched, so cart/checkout/admin/
   Firebase keep working exactly as before.
   ============================================================ */

:root{
  --z1: 0 1px 1px rgba(0,0,0,.25);
  --z2: 0 10px 22px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  --z3: 0 34px 70px -20px rgba(0,0,0,.68), 0 12px 26px -8px rgba(0,0,0,.5);
  --glass-bg: rgba(255,255,255,.75);
  --glass-line: rgba(214,39,44,.18);
  --gold-glow: rgba(214,39,44,.35);
  --accent-glow: rgba(214,39,44,.25);
}

@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }
body{ perspective: 1800px; }

/* ================= HEADER — glass + depth ================= */
.header{
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: var(--z2);
}
.brand img{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.brand:hover img{ transform: translateY(-2px) rotateY(10deg) scale(1.04); }
.searchbar{ box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03); transition: box-shadow .25s, transform .25s; }
.searchbar:focus-within{ box-shadow: inset 0 2px 6px rgba(0,0,0,.3), 0 0 0 4px var(--gold-glow); transform: translateY(-1px); }
.icon-btn{ transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; border-radius: 12px; }
.icon-btn:hover{ transform: translateY(-3px) translateZ(6px); box-shadow: var(--z1); }

.catbar{ perspective: 900px; }
#catNav a, #catNav button{ transition: transform .25s ease, box-shadow .25s ease; }
#catNav a:hover, #catNav button:hover{ transform: translateY(-3px) translateZ(6px); }

/* ================= BUTTONS — beveled 3D press ================= */
.btn{
  position: relative; transform-style: preserve-3d;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 0 rgba(0,0,0,.28), 0 12px 22px -8px rgba(0,0,0,.5);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease;
}
.btn-gold{ box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 0 #8B1A1F, 0 14px 26px -8px var(--gold-glow); }
.btn:hover{ transform: translateY(-3px); }
.btn-gold:hover{ box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 9px 0 #8B1A1F, 0 22px 36px -10px var(--gold-glow); }
.btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 2px 0 rgba(0,0,0,.28), 0 6px 12px -6px rgba(0,0,0,.5); }

/* ================= HERO — layered 3D parallax + mesh glow ================= */
.hero-banner{ perspective: 1400px; min-height: 340px; border-radius: 24px; box-shadow: var(--z3); }
.hero-slide{ transform-style: preserve-3d; }
.hero-slide img{ transition: transform .7s cubic-bezier(.2,.8,.2,1); transform: scale(1.04) translateZ(0); }
.hero-slide.active:hover img{ transform: scale(1.12) translateZ(-40px); }
.hero-text{ transform: translateZ(60px); transform-style: preserve-3d; padding: 52px 48px; max-width: 580px; }
.hero-kicker{ display:inline-block; padding:6px 14px; border:1px solid var(--gold-glow); border-radius:999px; background:rgba(255,255,255,.14); transform: translateZ(30px); }
.hero-text h2{ font-size: clamp(2rem, 4.4vw, 2.8rem); text-shadow: 0 16px 34px rgba(0,0,0,.6); transform: translateZ(20px); }
.hero-text p{ transform: translateZ(14px); }
.hero-text .btn{ transform: translateZ(48px); }
@media(max-width:640px){ .hero-banner{ min-height: 250px; } .hero-text{ padding: 28px; transform: translateZ(30px); } }

.hero-banner::before, .hero-banner::after{
  content:''; position:absolute; width: 260px; height: 260px; border-radius: 50%;
  filter: blur(70px); opacity:.4; pointer-events:none; z-index:0; animation: floatOrb 10s ease-in-out infinite;
}
.hero-banner::before{ background: var(--gold); top:-70px; right: 6%; }
.hero-banner::after{ background: #FF5A5F; bottom:-80px; left: 4%; animation-delay: 2.6s; }
@keyframes floatOrb{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(0,-24px,44px); } }

/* ================= CATEGORY CIRCLES — floating 3D discs ================= */
.cat-circles-row{ perspective: 900px; }
.cat-circle{ transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.cat-circle .ring{
  box-shadow: var(--z1), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .2s;
}
.cat-circle:hover{ transform: translateY(-4px); }
.cat-circle:hover .ring{ transform: translateY(-2px) rotateX(12deg) scale(1.05); box-shadow: var(--z2); }
.cat-circle.active .ring{ box-shadow: var(--z2), 0 0 0 4px var(--gold-glow); }

.cat-tabs button{ transition: transform .2s ease, box-shadow .2s ease; }
.cat-tabs button:hover{ transform: translateY(-2px); box-shadow: var(--z1); }

/* ================= PRODUCT CARDS — interactive tilt ================= */
.product-grid, .row, .home-row{ perspective: 1200px; }
.pcard{
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  box-shadow: var(--z1);
  transition: transform .12s ease-out, box-shadow .3s ease;
  position: relative; will-change: transform; border-radius: 16px; overflow: hidden;
}
.pcard:hover{ box-shadow: var(--z3); z-index: 3; }
.pcard-img{ position: relative; overflow: hidden; transform: translateZ(0); }
.pcard-img img{ transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pcard-img img{ transform: scale(1.09) translateZ(20px); }
.pcard-img::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.24), transparent 55%);
  opacity:0; transition: opacity .25s ease; pointer-events:none;
}
.pcard:hover .pcard-img::after{ opacity:1; }
.badge-disc, .badge-tag{ box-shadow: 0 6px 14px -4px rgba(0,0,0,.5); transform: translateZ(18px); }
.pcard-body{ transform: translateZ(2px); }
.pcard-add{ transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.pcard:hover .pcard-add{ transform: translateZ(16px) translateY(-1px); box-shadow: var(--z1); }
.wish, .cmp-btn{ transition: transform .2s ease; }
.wish:hover, .cmp-btn:hover{ transform: translateZ(14px) scale(1.1); }

.pcard{ opacity:1; transform: translateY(0) rotateX(0) rotateY(0); }
.pcard.in-view{ animation: cardRise .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cardRise{ to{ opacity:1; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0) translateZ(0); } }

/* ================= SALE MARQUEE — ticket depth ================= */
.marquee{ box-shadow: inset 0 2px 6px rgba(0,0,0,.4), var(--z1); }

/* ================= MODALS / DRAWERS — glass depth ================= */
.cart-drawer, .modal, .modal-box, #productModal .modal-box, #checkoutModal .modal-box{
  box-shadow: var(--z3) !important;
}
.modal-box, .cart-drawer{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ================= SECTION SCROLL REVEAL ================= */
.section-reveal{ opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.section-reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ================= FOOTER — subtle depth ================= */
footer, .footer{ box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

/* ================= REDUCED MOTION / TOUCH FALLBACK ================= */
@media (prefers-reduced-motion: reduce){
  .hero-banner::before, .hero-banner::after{ animation:none; }
  .pcard, .section-reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
}
@media (hover: none){
  .pcard{ opacity:1; transform:none; }
  .hero-text{ transform:none; }
  .section-reveal{ opacity:1; transform:none; }
}

/* Stability fixes: product details must remain visible and clickable on mobile. */
.modal.open .modal-bg{z-index:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
.modal.open .modal-box{z-index:10 !important; pointer-events:auto !important; opacity:1 !important; visibility:visible;}
.modal:not(.open){ pointer-events:none !important; }
#productModal.open .modal-box{transform:none !important; filter:none !important;}