/* ──────────────────────────────────────────────────────────
   LuxeMart — App Experience Layer (v6)
   Adds: mobile bottom tab bar, elegant 3D depth/tilt, page
   transitions, PWA install prompt, refined micro-interactions.
   Purely additive — does not touch cart/checkout/pricing markup.
   ────────────────────────────────────────────────────────── */

:root{
  --lbn-h: 62px;
  --lbn-safe: env(safe-area-inset-bottom, 0px);
}

/* ── Smooth, app-like base feel ── */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Momentum scrolling + no rubber-band flash on iOS */
body{ -webkit-overflow-scrolling:touch; overscroll-behavior-y:none; }

/* View-transition-style fade when supported (app.js triggers this) */
::view-transition-old(root){ animation: lux-fade-out .18s ease both; }
::view-transition-new(root){ animation: lux-fade-in .22s ease both; }
@keyframes lux-fade-out{ to{ opacity:0; transform:scale(.992); } }
@keyframes lux-fade-in{ from{ opacity:0; transform:scale(1.006); } }

/* ══════════════════ BOTTOM APP NAVIGATION ══════════════════ */
#lux-bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--lbn-h) + var(--lbn-safe));
  padding-bottom:var(--lbn-safe);
  display:none;
  align-items:stretch;
  justify-content:space-around;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-top:1px solid var(--border);
  z-index:850;
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
}
[data-theme="light"] #lux-bottom-nav{
  background:rgba(250,250,250,.88);
  box-shadow:0 -8px 30px rgba(0,0,0,.08);
}

.lbn-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  border:none; background:none; cursor:pointer;
  color:var(--gray);
  text-decoration:none;
  font-family:inherit;
  position:relative;
  transition:color var(--t2), transform var(--t);
  -webkit-tap-highlight-color:transparent;
}
.lbn-item:active{ transform:scale(.9); }
.lbn-icon{ font-size:21px; line-height:1; position:relative; display:flex; }
.lbn-label{ font-size:9.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }

.lbn-item.is-active{ color:var(--accent); }
.lbn-item.is-active .lbn-icon{ transform:translateY(-1px); }
.lbn-item.is-active::before{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:18px; height:2px; border-radius:2px; background:var(--accent);
}

/* Center "search" tab reads as a raised FAB — signature native-app touch */
.lbn-search .lbn-icon--fab{
  width:44px; height:44px; margin-top:-22px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#080808;
  font-size:19px;
  box-shadow:0 10px 24px rgba(232,255,0,.35), 0 0 0 4px var(--bg);
  transition:transform var(--t2), box-shadow var(--t2);
}
.lbn-search:active .lbn-icon--fab{ transform:scale(.92) translateY(1px); }
.lbn-search .lbn-label{ margin-top:1px; }

.lbn-badge{
  position:absolute; top:-6px; right:-9px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px;
  background:var(--sale); color:#fff;
  font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--bg1);
}

@media (max-width: 860px){
  #lux-bottom-nav{ display:flex; }
  body{ padding-bottom:calc(var(--lbn-h) + var(--lbn-safe)); }

  /* Let toasts, back-to-top, and the sticky add-to-cart bar clear the tab bar */
  #lux-toasts{ bottom:calc(var(--lbn-h) + var(--lbn-safe) + 12px); top:auto; }
  #lux-btt{ bottom:calc(var(--lbn-h) + var(--lbn-safe) + 16px); }
  .lux-sticky-atc{ padding-bottom:calc(14px + var(--lbn-safe)); }
  .lux-sticky-atc.show ~ #lux-bottom-nav,
  body:has(.lux-sticky-atc.show) #lux-bottom-nav{ transform:translateY(100%); }
  #lux-mobile-nav{ padding-bottom:var(--lbn-h); }
}

/* ══════════════════ ELEGANT 3D DEPTH (DTC-style, subtle) ══════════════════ */

/* Perspective wrapper applied via JS to product cards / hero / category tiles */
.lux-tilt{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.lux-tilt-wrap{ perspective:1200px; }
.lux-tilt:hover{ box-shadow:0 24px 48px -12px rgba(0,0,0,.45); }
[data-theme="light"] .lux-tilt:hover{ box-shadow:0 24px 48px -16px rgba(0,0,0,.18); }

/* Depth shine sweep on hover — the "premium glass" cue used by DTC fashion sites */
.lux-tilt{ position:relative; overflow:hidden; }
.lux-tilt::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.09) 50%, transparent 60%);
  transform:translateX(-120%);
  pointer-events:none;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.lux-tilt:hover::after{ transform:translateX(120%); }

@media (pointer:coarse), (prefers-reduced-motion: reduce){
  .lux-tilt{ transform:none !important; }
}

/* Buttons — soft depth + ripple, matches editorial/premium tone (no gimmicks) */
.lux-btn{ position:relative; overflow:hidden; }
.lux-btn .lux-ripple{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  animation:lux-ripple .55s ease-out forwards;
  pointer-events:none;
}
[data-theme="light"] .lux-btn .lux-ripple{ background:rgba(0,0,0,.12); }
@keyframes lux-ripple{ to{ transform:scale(2.6); opacity:0; } }

/* Product card image parallax-lift on hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .lux-pcard:hover .lux-pcard__img1,
  .lux-cat-card:hover img{
    transform:scale(1.05) translateY(-2px);
  }
}

/* ══════════════════ PWA INSTALL BANNER ══════════════════ */
#lux-install-banner{
  position:fixed; left:14px; right:14px; bottom:calc(var(--lbn-h) + var(--lbn-safe) + 12px);
  z-index:860;
  display:flex; align-items:center; gap:12px;
  background:var(--bg1); border:1px solid var(--border2);
  border-radius:var(--r4);
  padding:12px 14px;
  box-shadow:var(--sh3);
  transform:translateY(140%);
  transition:transform var(--tss);
}
#lux-install-banner.show{ transform:translateY(0); }
#lux-install-banner .lib-icon{
  width:40px; height:40px; border-radius:var(--r3); flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; color:#080808; font-size:18px;
}
#lux-install-banner .lib-text{ flex:1; min-width:0; }
#lux-install-banner .lib-title{ font-size:13px; font-weight:700; color:var(--white); }
#lux-install-banner .lib-sub{ font-size:11.5px; color:var(--gray); }
#lux-install-banner .lib-actions{ display:flex; gap:8px; flex:none; }
#lux-install-banner button{
  border:none; cursor:pointer; font-weight:700; font-size:12px;
  border-radius:999px; padding:8px 14px;
}
#lux-install-banner .lib-install{ background:var(--accent); color:#080808; }
#lux-install-banner .lib-dismiss{ background:transparent; color:var(--gray); }

@media (min-width:861px){
  #lux-install-banner{ left:auto; right:24px; bottom:24px; width:320px; }
}

/* ══════════════════ MISC APP POLISH ══════════════════ */

/* Page-level fade-in so client-side nav feels instant, not jarring */
#lux-content{ animation:lux-page-in .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes lux-page-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* Pull-to-refresh affordance (used only inside standalone/installed app mode) */
#lux-ptr{
  position:fixed; top:0; left:50%; transform:translate(-50%,-100%);
  width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#080808;
  display:flex; align-items:center; justify-content:center;
  z-index:1200; transition:transform .2s ease;
  font-size:15px;
}
#lux-ptr.show{ transform:translate(-50%, 14px); }
#lux-ptr.spin i{ animation:lux-spin .6s linear infinite; }
@keyframes lux-spin{ to{ transform:rotate(360deg); } }

/* Standalone (installed) mode gets extra top padding for iOS status bar */
@media all and (display-mode: standalone){
  #lux-header{ padding-top:env(safe-area-inset-top,0); height:calc(var(--hh) + env(safe-area-inset-top,0)); }
}