/* ==========================================================================
   ELITE CELESTIAL — Enhancements layer
   Illustration styling, signature motion, finer responsive breakpoints.
   Loaded after style.css / admin.css on every page.
   ========================================================================== */

/* ---------- Illustration containers ---------- */
.pc-visual, .gallery-main, .rail-visual, .ed-visual{
  aspect-ratio: 3 / 4;
  height:auto !important;
  min-height:0 !important;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gallery-main{ aspect-ratio:4/5; }
.ed-card:nth-child(1) .ed-visual, .ed-card:nth-child(4) .ed-visual{ aspect-ratio:16/9; }
.pc-visual::after, .gallery-main::after{ content:none !important; } /* retire old monogram overlay */

.ec-illustration{ width:78%; height:78%; overflow:visible; transition:transform 1.1s var(--ease); }
.gallery-thumbs .thumb{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gallery-thumbs .thumb .ec-illustration{ width:60%; height:60%; }
.cart-thumb .ec-illustration{ width:70%; height:70%; }
.rail-visual, .ed-visual{ position:relative; }
.rail-visual::before{ z-index:2; }
.pc-visual:hover .ec-illustration, .rail-item:hover .ec-illustration{ transform:scale(1.05) translateY(-2%); }
.ec-lines .ec-draw{ transition:stroke-dashoffset 1.3s var(--ease), opacity .3s; }
.ec-accent{ fill:var(--gold); opacity:0; transition:opacity 1.4s var(--ease) .5s; }
.ec-illustration.ec-in .ec-accent{ opacity:.08; }
.ec-star{ fill:var(--ivory); opacity:.35; animation:ecTwinkle 3.2s ease-in-out infinite; }
@keyframes ecTwinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.7; } }

/* corner frame — small museum-label ticks for a curated, intentional feel */
.pc-visual::before, .gallery-main::before, .rail-visual::before{
  content:""; position:absolute; inset:14px; pointer-events:none; z-index:1;
  border:1px solid rgba(176,141,87,0);
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 0/16px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/16px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/16px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/1px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/16px 1px no-repeat;
  opacity:.35; transition:opacity var(--dur-fast);
}
.product-card:hover .pc-visual::before, .rail-item:hover .rail-visual::before{ opacity:.8; }

/* ---------- Tilt interaction (JS sets --rx/--ry/--tz) ---------- */
.tilt{
  --rx:0deg; --ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* ---------- Hero interactive spotlight + parallax ---------- */
.hero{ --mx:50%; --my:40%; }
.hero-aurora{
  background:
    radial-gradient(600px 500px at var(--mx) var(--my), rgba(216,184,118,.16), transparent 60%),
    radial-gradient(48% 38% at 22% 24%, rgba(176,141,87,.22), transparent 60%),
    radial-gradient(38% 30% at 82% 18%, rgba(36,27,47,.9), transparent 65%),
    radial-gradient(60% 50% at 50% 100%, rgba(176,141,87,.10), transparent 70%);
  transition:background .4s linear;
}
.hero-content, .hero-scroll{ transform:translateY(calc(var(--scrollY,0) * -0.12px)); }

/* ---------- Fly-to-bag ghost ---------- */
.ec-fly{
  position:fixed; z-index:5000; pointer-events:none;
  width:46px; height:56px; border-radius:4px;
  background:linear-gradient(200deg,var(--ink-soft),var(--aubergine));
  border:1px solid var(--gold);
  transition:transform .7s cubic-bezier(.3,.6,.3,1), opacity .7s ease;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-bright); font-family:var(--serif); font-size:.9rem;
}
.icon-btn.bump{ animation:ecBump .4s ease; }
@keyframes ecBump{ 0%{transform:scale(1);} 35%{transform:scale(1.28);} 100%{transform:scale(1);} }
.badge.pulse{ animation:ecPulse .5s ease; }
@keyframes ecPulse{ 0%{ box-shadow:0 0 0 0 rgba(216,184,118,.6);} 100%{ box-shadow:0 0 0 10px rgba(216,184,118,0);} }

/* ---------- Page transition ---------- */
body{ opacity:1; transition:opacity .32s ease; }
body.ec-exit{ opacity:0; }

/* ---------- Count-up target ---------- */
.count-up{ display:inline-block; }

/* ---------- Table horizontal scroll on small screens ---------- */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll table{ min-width:640px; }

/* ---------- Sticky offsets tied to real header height ---------- */
.filters, .summary-box, .admin-sidebar{ top:calc(var(--header-h, 84px) + 24px); }
.rail-item, .ed-card{ isolation:isolate; }

/* ---------- Reveal without translate for illustrated cards (avoids double-motion) ---------- */
.reveal-fade{ opacity:0; transition:opacity .8s var(--ease); }
.reveal-fade.in{ opacity:1; }

/* ==========================================================================
   Finer responsive breakpoints
   ========================================================================== */

/* Large desktop / ultra-wide: cap density so grids don't stretch thin */
@media (min-width:1600px){
  :root{ --container:1400px; }
  .product-grid{ grid-template-columns:repeat(4,1fr); }
}

/* Tablet landscape */
@media (max-width:1100px){
  .panel-grid{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Tablet portrait */
@media (max-width:820px){
  .hero{ min-height:82vh; padding-top:6.5rem; }
  .hero-scroll{ display:none; }
  .section{ padding:4.5rem var(--gutter); }
  .product-detail{ gap:2.4rem; }
  .cart-layout{ gap:2rem; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
}

/* Large phones */
@media (max-width:560px){
  .header-inner{ height:72px; }
  .brand{ font-size:1.1rem; }
  .header-actions{ gap:1rem; }
  .hero{ padding:5.5rem var(--gutter) 3.5rem; min-height:78vh; }
  .hero .eyebrow{ font-size:.66rem; }
  .hero p.lede{ font-size:.95rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:.8rem; }
  .editorial-grid{ gap:1rem; }
  .value-grid{ gap:1.2rem; }
  .newsletter{ flex-direction:column; align-items:stretch; text-align:center; }
  .n-form{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .modal-box{ padding:1.4rem; }
  .kpi-grid{ grid-template-columns:1fr; }
  .admin-main{ padding:1.2rem; }
  .admin-topbar h1{ font-size:1.3rem; }
  .admin-search{ width:140px; }
  .checkout-steps{ gap:1rem; flex-wrap:wrap; }
}

/* Small phones */
@media (max-width:380px){
  .hero h1{ font-size:2.2rem; }
  .container{ padding-inline:16px; }
  .btn{ padding:.85em 1.4em; font-size:.8rem; }
  .marquee-track span{ font-size:.9rem; gap:2rem; }
}

/* Respect reduced motion for all additions here too */
@media (prefers-reduced-motion: reduce){
  .ec-illustration, .tilt, .hero-content, .hero-scroll, .ec-fly{ transition:none !important; animation:none !important; }
  body{ transition:none !important; }
}