/* ===================================================================
   Glass In Action — v4 design system
   Dark, moody, photography-led — matching the actual studio lighting
   of Igal's own product photography (dark backdrop, dramatic glow).
   Type: Inter, clean and modern, no poster/brutalist treatment.
   Warm gold accent pulled from the glass itself, used sparingly.
=================================================================== */
:root{
  --bg:        #04102F;
  --panel:     #14203F;
  --panel-2:   #1A2645;
  --ink:       #f4f2ec;
  --dim:       #a6a9b2;
  --gold:      #d9a441;
  --gold-soft: rgba(217,164,65,0.14);
  --line:      rgba(244,242,236,0.20);
  --radius:    14px;
  --max:       1280px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:'Inter',-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.02em; margin:0 0 .4em; color:var(--ink); }
.mono{ font-family:'IBM Plex Mono',monospace; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
button{ font-family:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; background:none; border:none; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

.eyebrow{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.hero .eyebrow{ font-size:.95rem; text-shadow:0 2px 10px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95); }

/* ---------- Nav ---------- */
.site-nav{ position:sticky; top:0; z-index:50; background:rgba(11,13,18,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-weight:800; font-size:1.32rem; display:inline-flex; align-items:center; gap:.55rem; }
.logo-icon{ height:52px; width:auto; display:block; }
.nav-links{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; font-size:.9rem; }
.nav-links a{ opacity:.78; transition:opacity .2s, color .2s; }
.nav-links a:hover{ opacity:1; color:var(--gold); }
.nav-right{ display:flex; align-items:center; gap:1.4rem; }
.cart-btn{ background:var(--gold); color:#1a1206; border:none; padding:.65rem 1.2rem; border-radius:100px; font-size:.82rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.cart-count{ background:#1a1206; color:var(--gold); border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800; }

@media (max-width:760px){
  .site-nav .wrap{ flex-wrap:wrap; height:auto; padding:.8rem 0; row-gap:.6rem; }
  .logo{ font-size:1.15rem; }
  .logo-icon{ height:38px; }
  .nav-right{ gap:.8rem; }
  .nav-links{
    order:3; width:100%; gap:1.1rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
    font-size:.8rem; padding-top:.7rem; border-top:1px solid var(--line); white-space:nowrap;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
}

/* ---------- Hero: dark, moody, full photo ---------- */
.hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; background-position:center 35%;
  opacity:0; transition:opacity 1.6s ease;
}
.hero-bg.active{ opacity:1; }
.hero-video-panel{
  position:absolute; z-index:2; right:5%; top:50%; transform:translateY(-50%);
  width:min(360px, 30vw); padding:3rem;
  background:radial-gradient(ellipse at center, rgba(11,13,18,0.75) 0%, rgba(11,13,18,0.5) 40%, rgba(11,13,18,0.15) 65%, transparent 85%);
}
.hero-video-frame{ position:relative; }
.hero-video-frame video{
  width:100%; display:block; transform:scale(1.2);
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at center, black 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 55% 60% at center, black 30%, transparent 78%);
  filter:brightness(0.9) contrast(1.05);
}
.hero-video-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  color:#fff; font-size:.85rem; font-weight:600; text-align:center;
  padding:1.2rem .8rem .8rem; background:linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.hero-photo-tag{ position:absolute; z-index:2; left:5%; bottom:6%; font-size:.72rem; color:var(--dim); background:rgba(11,13,18,0.5); padding:.35rem .7rem; border-radius:100px; backdrop-filter:blur(4px); }
.hero-actions .btn-outline{ background:rgba(11,13,18,0.55); border-color:rgba(255,255,255,0.75); backdrop-filter:blur(6px); }
.hero-actions .btn-outline:hover{ background:var(--gold); border-color:var(--gold); color:#1a1206; }
@media (max-width:900px){ .hero-video-panel{ display:none; } }
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:rgba(11,13,18,0.5);
}
.hero h1{ text-shadow:0 4px 24px rgba(0,0,0,0.7); font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:1.05; max-width:16ch; margin-top:.6rem; }
.hero-inner{ position:relative; z-index:2; padding:5rem 0; }
.hero p{ max-width:52ch; color:#e8e6e0; margin-top:1.2rem; text-shadow:0 2px 12px rgba(0,0,0,0.6); }
.hero-tagline{ position:relative; font-size:1.25rem; line-height:1.55; color:#f0efe9; margin-top:1.6rem; max-width:46ch; padding-left:1.4rem; text-shadow:0 2px 12px rgba(0,0,0,0.6); }
.hero-tagline-mark{ position:absolute; left:0; top:.15em; bottom:.3em; width:3px; background:linear-gradient(180deg, var(--gold), transparent); }
.hero-tagline-sub{ display:inline-block; margin-top:.7rem; font-size:.82em; color:#c8c6c0; font-weight:400; }
.hero-emphasis{ color:var(--gold); font-weight:700; }
.hero-story-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; margin-left:1.4rem;
  font-size:.85rem; font-weight:600; color:var(--gold); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid rgba(217,164,65,0.4);
}
.hero-story-link span{ transition:transform .2s; display:inline-block; }
.hero-story-link:hover span{ transform:translateX(3px); }
.hero-actions{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }

@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.hero .eyebrow, .hero h1, .hero-tagline, .hero-inner > a, .hero-actions{
  opacity:0; animation:heroFadeUp .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero .eyebrow{ animation-delay:.1s; }
.hero h1{ animation-delay:.22s; }
.hero-tagline{ animation-delay:.36s; }
.hero-inner > a{ animation-delay:.5s; }
.hero-actions{ animation-delay:.62s; }

.btn{ display:inline-block; padding:.9rem 1.7rem; border-radius:100px; font-size:.92rem; font-weight:700; transition:all .2s var(--ease); border:1.5px solid transparent; }
.btn-solid{ background:var(--gold); color:#1a1206; }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 8px 24px var(--gold-soft); }
.btn-outline{ border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Sections ---------- */
section{ padding:5rem 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.section-head h1, .section-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin:0; }
.section-head p{ color:var(--dim); max-width:44ch; margin:0; font-size:.98rem; }

/* Category pills */
.cat-tabs{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.path-bar{ display:flex; gap:.8rem; margin-bottom:2rem; flex-wrap:wrap; }
.path-chip{ display:flex; align-items:center; gap:.5rem; padding:.65rem 1.2rem; border-radius:100px; background:var(--gold); color:#1a1206; border:none; font-size:.82rem; font-weight:700; }
.path-chip:hover{ background:#e0913f; }
.cat-tab{ background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:.6rem 1.2rem; border-radius:100px; font-size:.85rem; font-weight:600; transition:all .2s; }
.cat-tab.active, .cat-tab:hover{ background:var(--gold); color:#1a1206; border-color:var(--gold); }

/* ---------- Product cards: modern, dark, glowing product shots ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.6rem; }
.card{ display:block; background:var(--panel); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s; }
.card:hover{ transform:translateY(-4px); border-color:rgba(217,164,65,0.4); }
.card-media{
  aspect-ratio:1/1; overflow:hidden; position:relative;
  background:radial-gradient(ellipse at center, var(--panel) 0%, var(--bg) 100%);
  display:flex; align-items:center; justify-content:center;
}
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding:1.2rem 1.3rem 1.4rem; }
.card-body h4{ font-size:1.05rem; margin-bottom:.2rem; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:.9rem; }
.price{ font-weight:700; color:var(--gold); font-size:1.02rem; }
/* The Amazon-style "buy box": price + primary action boxed off from
   descriptive content, in its own sticky column, so it's visible on
   page load and stays visible while scrolling, and never gets confused
   with the actual descriptive/step content around it. Used on the
   product page, the Customizer, and the commission form's own
   configuration summary. */
.buy-box{ position:sticky; top:96px; border:3px solid rgba(244,242,236,0.35); border-radius:14px; background:var(--panel); padding:1.3rem; min-width:0; }
.card-foot span:last-child{ font-size:.82rem; color:var(--dim); }

/* Gallery grid (Frank Stella section, homepage) */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:10px; }
.gallery-grid > div{ overflow:hidden; border-radius:10px; background:var(--panel); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.gallery-grid > div:hover img{ transform:scale(1.06); }
.gallery-grid .tall{ grid-row:span 2; }
.gallery-grid .wide{ grid-column:span 2; }
@media (max-width:860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } }

/* Frank Stella page-specific */
.frank-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start; }
.frank-hero p{ font-size:1.03rem; line-height:1.75; margin-bottom:1.1rem; color:var(--dim); }
.frank-links{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.frank-link{ display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.3rem; border-radius:100px; background:var(--gold); color:#1a1206; border:none; font-weight:700; font-size:.85rem; transition:all .2s; }
.frank-link:hover{ background:#e0913f; transform:translateY(-2px); }
.frank-link:hover{ border-color:var(--gold); color:var(--gold); }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; background:var(--panel); border-radius:var(--radius); overflow:hidden; }
.video-embed iframe{ width:100%; height:100%; border:none; }

/* ---------- Order / Commission form ---------- */
.form-card{ max-width:680px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 2.2rem; }
@media (max-width:600px){ .form-card{ padding:1.4rem 1.3rem; } }
.field{ margin-bottom:1.5rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.6rem; color:var(--dim); }
.field input[type=text], .field input[type=email], .field textarea, .field select{
  width:100%; background:#ffffff; border:1px solid var(--line); color:#1a2540; border-radius:10px;
  padding:.85rem 1rem; font-family:inherit; font-size:.95rem;
}
.field textarea{ min-height:120px; resize:vertical; }
/* Browsers force a white/yellow autofill background that ignores our
   dark theme unless overridden like this, textareas are never
   autofilled so they were never affected. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0px 1000px var(--panel) inset !important;
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink);
  transition:background-color 5000s ease-in-out 0s;
}
.dropzone{ border:1.5px dashed var(--line); border-radius:var(--radius); padding:2rem 1.2rem; text-align:center; font-size:.88rem; color:var(--dim); transition:all .2s; }
.dropzone.drag{ border-color:var(--gold); color:var(--gold); }
.dropzone input{ display:none; }
.thumb-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.thumb{ width:64px; height:64px; overflow:hidden; border-radius:8px; border:1px solid var(--line); }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.ref-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; margin-top:1rem; }
.ref-opt{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:10px; border:2px solid transparent; cursor:pointer; }
.ref-opt img{ width:100%; height:100%; object-fit:cover; }
.ref-opt.selected{ border-color:var(--gold); }
.ref-opt.none-opt{ display:flex; align-items:center; justify-content:center; background:var(--panel); font-size:.75rem; text-align:center; padding:.5rem; font-weight:600; }

/* ---------- Cart drawer ---------- */
.cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s; z-index:90; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .3s var(--ease); z-index:91; display:flex; flex-direction:column; }
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ padding:1.4rem 1.6rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.6rem; }
.cart-item{ display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.cart-item .thumb{ width:56px; height:56px; flex-shrink:0; }
.cart-item-info{ flex:1; font-size:.85rem; }
.cart-item-info .meta{ color:var(--dim); font-size:.76rem; }
.cart-item-remove{ background:none; border:none; color:var(--dim); font-size:.76rem; text-decoration:underline; padding:0; margin-top:.3rem; }
.cart-foot{ padding:1.4rem 1.6rem; border-top:1px solid var(--line); }
.cart-line{ display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:.5rem; }
.cart-line.total{ font-size:1.05rem; font-weight:700; margin-top:.8rem; }
.empty-cart{ color:var(--dim); font-size:.9rem; text-align:center; padding:3rem 0; }
.shipping-note{ font-size:.74rem; color:var(--dim); margin-top:.6rem; }

/* Collage card media: several small real photos instead of one blown-up image */
.card-collage{ aspect-ratio:16/10; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; background:var(--line); overflow:hidden; }
.card-collage img{ width:100%; height:100%; object-fit:cover; }

footer{ padding:3rem 0 6.5rem; font-size:.85rem; color:var(--dim); border-top:1px solid var(--line); }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }

@media (max-width:860px){
  .frank-hero{ grid-template-columns:1fr; }
}

/* Shared lightbox: click-to-zoom with pan, used on any product image */
.gia-lightbox{ position:fixed; inset:0; background:rgba(6,7,10,0.96); z-index:200; display:none; align-items:center; justify-content:center; }
.gia-lightbox.open{ display:flex; }
.gia-lb-stage{ position:relative; width:90vw; height:82vh; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; }
.gia-lb-stage img{ max-width:100%; max-height:100%; user-select:none; -webkit-user-drag:none; transition:transform .15s ease-out; cursor:grab; }
.gia-lb-stage img.dragging{ transition:none; cursor:grabbing; }
.gia-lb-btn{ position:absolute; z-index:210; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; cursor:pointer; backdrop-filter:blur(4px); }
.gia-lb-btn:hover{ background:rgba(255,255,255,0.2); }
.gia-lb-close{ top:2vw; right:2vw; }
.gia-lb-zoom-controls{ position:absolute; bottom:2vw; left:50%; transform:translateX(-50%); display:flex; gap:.6rem; z-index:210; }
.gia-lb-zoom-controls .gia-lb-btn{ position:static; width:42px; height:42px; font-size:1.1rem; }

/* ---------- General mobile pass ---------- */
@media (max-width:600px){
  .wrap{ padding:0 16px; }
  h1{ font-size:1.8rem; }
  h2{ font-size:1.5rem; }
  .btn{ padding:.8rem 1.3rem; font-size:.85rem; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1rem; }
  .choice-btn{ padding:.55rem .9rem; font-size:.8rem; }
  .swatch-circle{ width:38px; height:38px; }
  .section-head{ margin-bottom:1.2rem; }
  table.catalog{ font-size:.78rem; }
  .gia-lb-stage{ width:96vw; height:70vh; }
  .gia-lb-btn{ width:40px; height:40px; font-size:1.1rem; }
  .gia-lb-zoom-controls{ bottom:4vw; }
}
/* Every admin table needs to scroll horizontally on narrow screens
   rather than squeeze illegibly, wrap it once here so it applies
   wherever a .catalog table is used. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* iOS automatically zooms the whole page in when a focused input's font
   is under 16px, then zooms back out on blur, that's exactly the "page
   jumps back and forth on any text box" symptom. This existed before but
   only applied under 600px width (misses an iPad or any touch laptop at
   a wider viewport) and had no !important (loses to any inline
   font-size, which most of these inputs have). Global and forced now. */
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], select, textarea{ font-size:16px !important; }