/*
 * ALTO Theme — Base Styles
 * Resets, animations, utility classes.
 * CSS variables (:root) are injected dynamically by PHP (functions.php → alto_customiser_css)
 * so colours and fonts update live from the Customiser.
 */

/* ═══════════════════════════════════════════════
   THEME GRADIENT — EDIT ONLY THESE TWO LINES
   Every gradient on the site updates instantly.
═══════════════════════════════════════════════ */
/* CSS variables — static fallbacks. PHP (alto_customiser_css) overrides these per-site. */
:root {
    --grad-a:     #f97316;
    --grad-b:     #7c3aed;
    --grad-angle: 135deg;
    --grad:       linear-gradient(135deg, #f97316 0%, #7c3aed 100%);
    --offer-a:    #059669;
    --offer-b:    #0d9488;
    --grad-green: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    --white:  #ffffff;
    --bg:     #f7f7f5;
    --black:  #111111;
    --dark:   #1a1a1a;
    --body:   #505050;
    --light:  #909090;
    --border: #e2e2e2;
    --card:   #f3f3f1;
    --price:  #c2410c;
    --green:  #15803d;
    /* Glow variables — overridden by PHP via alto_customiser_css */
    --glow-a:    #f97316;
    --glow-b:    #7c3aed;
    --glow-int:  0.5;
    --fh:     'Barlow Condensed', sans-serif;
    --fb:     'Barlow', sans-serif;
    --nav-top:  44px;  /* height of cookie bar when shown */
    --nav-h:    66px;
    --total-h:  110px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--dark); font-family:var(--fb); overflow-x:hidden; }

/* ── GRAD BAR ────────────────────────────── */
.grad-bar    { display:block; height:4px; background:var(--grad); border-radius:2px; margin-top:8px; }
.grad-bar-sm { height:3px; margin-top:6px; }

/* ── PHOTO SLOT ──────────────────────────── */
.photo-slot { background:#f0efec; border:2px dashed #ccc; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:background .2s; }
.photo-slot:hover { background:#e6e5e0; border-color:#aaa; }
.ps-icon { font-size:24px; opacity:.45; }
.ps-text { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#aaa; }

/* ── ANIMATIONS ──────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

.rv { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
.rv.go { opacity:1; transform:translateY(0); }
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s} .rv.d4{transition-delay:.4s}

/* ══ EVENT BANNER ════════════════════════ */
/* Event banner removed in v9 */

/* ══ NAV — FULLY RESPONSIVE ══════════════
   Desktop: logo | links | cart
   Tablet:  logo | hamburger + cart
   Mobile:  full-screen drawer
══════════════════════════════════════════ */
nav {
  position:fixed; top:var(--nav-top); left:0; right:0;
  height:var(--nav-h); z-index:500;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; transition:box-shadow .3s;
}
nav.scrolled { box-shadow:0 2px 16px rgba(0,0,0,.07); }

.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.logo-badge {
  width:57px; height:57px; border-radius:15px;
  border:2px solid rgba(255,255,255,.15); background:var(--grad);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:all .3s; overflow:hidden; position:relative; flex-shrink:0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--grad-b) 30%, transparent);
}
/* Footer logo — 10% bigger than previous 44px */
.logo-badge-sm {
  width:48px; height:48px; border-radius:13px;
}
.logo-badge::before { content:''; position:absolute; inset:0; border-radius:14px; background:rgba(255,255,255,.12); opacity:0; transition:opacity .3s; }
.logo-badge:hover::before { opacity:1; }
.lb-letter { font-family:var(--fh); font-size:22px; font-weight:900; color:#fff; line-height:1; position:relative; z-index:1; }
.lb-sub    { font-size:5.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7); position:relative; z-index:1; }
/* Custom logo image — fills the badge, object-fit contain so it's never cropped */
.logo-badge-img { background: transparent; border-color: transparent; box-shadow: none; }
.lb-custom-img  { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; }
.nav-brand-name {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.nav-wordmark { font-family:var(--fh); font-size:20px; font-weight:900; letter-spacing:.04em; color:var(--dark); text-transform:uppercase; }

/* Desktop nav links — hidden; hamburger is the universal nav on all screen sizes */
.nav-links { display:none; }
/* Hamburger: visible on ALL screen sizes — desktop, iPad, mobile */
.nav-hamburger {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}

/* Nav right group */
.nav-right { display:flex; align-items:center; gap:12px; }

.nav-cart {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--border); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s; position:relative; flex-shrink:0;
}
.nav-cart:hover { border-color:var(--grad-b); background:rgba(124,58,237,.05); }
.nav-cart svg { width:17px; height:17px; stroke:var(--dark); fill:none; stroke-width:1.8; }
.cart-badge {
  position:absolute; top:-5px; right:-5px;
  width:18px; height:18px; border-radius:50%;
  background:var(--grad); color:var(--white);
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.cart-badge.on { opacity:1; }

/* Hamburger button — hidden on desktop */
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--dark); border-radius:2px;
  transition:transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-drawer {
  position:fixed; top:calc(var(--nav-top) + var(--nav-h)); left:0; right:0;
  background:var(--white); border-bottom:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  transform:translateY(-110%); opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
  z-index:490;
  padding:20px 24px 28px;
}
.nav-drawer.open { transform:translateY(0); opacity:1; }
.nav-drawer a {
  display:block; font-family:var(--fh); font-size:22px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--dark);
  text-decoration:none; padding:12px 0;
  border-bottom:1px solid var(--border);
  transition:color .25s;
}
.nav-drawer a:last-child { border-bottom:none; }
.nav-drawer a:hover { color:var(--grad-b); }