/* ============================================================
   XARAKSE PANO — style.css
   ------------------------------------------------------------
   CONTENTS
     1. Palette & tokens      (change colors here)
     2. Base & typography
     3. Header
     4. Buttons
     5. Hero + laser beam
     6. Sections & headings
     7. Cards (For you / For business)
     8. On-site tiles
     9. Work grid & placeholders
    10. Coming soon
    11. Contact & form
    12. Footer
    13. Reveal animation & reduced motion
    14. Responsive
    15. Featured product cards (index) & product pages (products/)
   ============================================================ */

/* ---------- 1. PALETTE & TOKENS — derived from the logo ----------
   Brushed steel plate · engraved graphite letters · laser gold.   */
:root{
  --steel-0:  #eef0f2;   /* page background — light brushed steel */
  --steel-1:  #e4e7ea;   /* panels / alternate sections */
  --steel-2:  #d4d8dc;   /* deeper metal, placeholder stripes */
  --edge:     #c6cbd0;   /* hairline borders */
  --graphite: #2f3336;   /* primary text — the engraved letters */
  --muted:    #676d73;   /* secondary text */
  --gold:     #e2a63e;   /* laser gold — buttons, accents */
  --gold-deep:#a4761f;   /* darker gold — eyebrows, small accents */
  --hot:      #fff3dd;   /* white-hot core of the beam */

  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(47,51,54,.06), 0 10px 28px rgba(47,51,54,.08);
  --shadow-lift: 0 2px 4px rgba(47,51,54,.08), 0 18px 40px rgba(47,51,54,.14);
}

/* ---------- 2. BASE & TYPOGRAPHY ---------- */
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
/* Safety net: never let a stray wide element push the page wider than the
   screen (which on phones makes the browser zoom out to a tiny desktop view).
   overflow-x:hidden on the root clips any accidental horizontal overflow. */
html, body{ overflow-x:hidden; }
body{
  color:var(--graphite);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* brushed-metal surface: soft sheen + faint horizontal striations */
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
      transparent 1px, transparent 4px),
    linear-gradient(180deg, #f3f4f6 0%, var(--steel-0) 30%, #e6e9ec 100%);
  background-attachment: fixed;
}
h1,h2,h3{
  font-family:'Jost', sans-serif;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.18;
}
/* engraved-into-metal effect, like the logo lettering */
h1,h2{
  text-shadow: 0 -1px 1px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.75);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
/* Visually hidden but readable by search engines & screen readers (used for
   the hero H1, whose visible wordmark lives inside the video). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* wrap long words/URLs instead of letting them overflow their container */
p, li, h1, h2, h3, a{ overflow-wrap:break-word; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep);
}

/* Registration-mark corners — the alignment ticks a laser traces before a job */
.reg{ position:relative; }
.reg::before, .reg::after{
  content:""; position:absolute; width:13px; height:13px; pointer-events:none;
  opacity:.55;
}
.reg::before{ top:9px; left:9px; border-top:1px solid var(--gold-deep); border-left:1px solid var(--gold-deep); }
.reg::after{ bottom:9px; right:9px; border-bottom:1px solid var(--gold-deep); border-right:1px solid var(--gold-deep); }

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-block; padding:13px 28px;
  font-size:14px; letter-spacing:.04em;
  border:1px solid var(--edge); border-radius:3px;
  transition:background .15s ease, border-color .15s ease,
             color .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn-gold{
  background:linear-gradient(180deg, #edb455, var(--gold));
  border-color:#c78f2e; color:#231a08; font-weight:500;
  box-shadow:0 1px 2px rgba(47,51,54,.15);
}
.btn-gold:hover{ background:linear-gradient(180deg, #f2bd63, #e6ad48); transform:translateY(-1px); box-shadow:var(--shadow-card); }
.btn-ghost{ background:rgba(251,252,253,.72); color:var(--graphite); }
.btn-ghost:hover{ border-color:var(--muted); }
.btn-sm{ padding:9px 20px; font-size:13px; }

/* ---------- 3 & 5. HERO BANNER (full-bleed image; content inside it) ----------
   The banner holds an art-directed <picture> (portrait on mobile, landscape on
   desktop) as a filling layer, with the nav pinned to the top strip and the
   CTAs to the bottom strip — both over the empty steel, clear of the letters.
   Height follows the landscape image's ratio, capped so it never gets too tall. */
.hero-banner{
  position:relative;
  width:100%;
  /* Shorter box than the artwork's native 1672/941 ratio — combined with
     object-position:bottom below, this trims empty steel off the TOP only
     (well above where the lettering starts), so the wordmark/beam/spark/ring/
     button composition is completely undisturbed, just less tall overall.
     730 of the 941 source rows are kept (~22% of empty top steel trimmed),
     which puts the wordmark at ~22% and the ring's bottom edge at ~77% of the
     banner — the same placement the old 1916x821 artwork had, so the nav still
     clears the letters and the CTA still lands under the engraved logo.
     Steel above the wordmark works out to ~9.6% of the banner WIDTH, which is
     what keeps the nav clear of the letters at every width. */
  aspect-ratio: 1672 / 730;
  /* A FIXED max-height must never be used here: it would make the box
     wider-than-ratio on large monitors, and since the video is cover-fit and
     bottom-anchored, that trims MORE off the top — eventually clipping the
     lettering. This cap is width-relative instead, so what it guarantees is
     constant: the wordmark always keeps ~112px of steel above it for the nav,
     however wide the monitor. It only bites past ~1150px (a 1440px laptop is
     unchanged), where it stops the 16:9 artwork from ballooning the banner. */
  max-height: calc(34vw + 112px);
  /* The floor matters on narrow desktops/tablets: a taller-than-ratio box shows
     MORE of the source, which pushes the wordmark down away from the nav (at
     768px the ratio alone would leave only ~60px of steel above the letters —
     less than the nav is tall). 420px is the shortest floor that still never
     scales the video up enough to clip its left/right edges. */
  min-height:420px;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-bottom:1px solid var(--edge);
}
/* the video fills the banner behind the nav/CTAs, on every breakpoint */
.hero-img{ position:absolute; inset:0; z-index:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; cursor:pointer; }
/* soft dark scrim along the top so the nav links read cleanly on the metal */
.hero-banner::before{
  content:""; position:absolute; top:0; left:0; right:0; height:120px;
  z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,20,22,.42), rgba(20,20,22,0));
}

/* Top strip: nav over the empty steel above the letters */
.hero-banner .nav{
  position:relative; z-index:2;
  width:100%; max-width:1180px; margin:0 auto;
  padding:22px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  font-family:'Jost', sans-serif; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; font-size:15px;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.45);   /* legible on the metal */
}
/* The wordmark is two controls (see the nav markup): XARAKSE links home, PANO
   opens the bio popup. The button needs font:inherit because buttons don't
   inherit type styling from their parent the way the <a> does. */
.brand-pano{
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  background:none; border:0; padding:0; margin:0;
  cursor:pointer;
  /* inline-block so transform applies at all — it is ignored on plain inline
     boxes — and left origin so the growth pushes right, away from XARAKSE
     rather than overlapping it. transform+color only, so this animates on the
     compositor and never reflows the nav around it. */
  display:inline-block;
  transform-origin:left center;
  transition:transform .18s ease, color .18s ease;
}
/* 1.36 = double the growth the first version had (it grew by 18%, this grows
   by 36%). Still transform-only, so the nav around it never reflows. */
.brand-pano:hover,
.brand-pano:focus-visible{ transform:scale(1.36); color:var(--gold); }
@media (prefers-reduced-motion: reduce){
  .brand-pano{ transition:color .18s ease; }
  .brand-pano:hover, .brand-pano:focus-visible{ transform:none; }
}
.nav-links{ display:flex; align-items:center; gap:26px; font-size:14px; color:#f4f4f2; }
.nav-links a{ text-shadow:0 1px 4px rgba(0,0,0,.45); transition:color .15s ease; }
.nav-links a:hover{ color:var(--gold); }
.nav-cta{ color:#231a08; text-shadow:none; }
.nav-cta:hover{ color:#231a08; }
/* Language toggle (EL / EN) sitting at the end of the nav */
.nav-lang{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:.08em;
  color:#f4f4f2; border:1px solid rgba(244,244,242,.55); border-radius:4px;
  padding:5px 9px; text-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:color .15s ease, border-color .15s ease;
}
.nav-lang:hover{ color:var(--gold); border-color:var(--gold); }

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:8px;
  background:rgba(238,240,242,.7); border:1px solid var(--edge); border-radius:4px;
  cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--graphite); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}

/* Bottom strip: CTAs anchored by PERCENTAGE (not fixed padding), so they
   land at the same relative spot on the image — in the bare steel below the
   engraved ring — no matter how tall the banner renders at different widths.
   Because the video is width-fitted and bottom-anchored, that steel band is
   always (941-770)/1672 ≈ 10.2% of the banner's WIDTH tall, so on narrow
   desktops it shrinks and the offset has to come down with it (see the
   761–980px override further down). */
.hero-cta{
  position:absolute; left:0; right:0; bottom:7%; z-index:2;
  width:100%; max-width:1180px; margin:0 auto;
  padding:0 32px;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

/* Sits between the real products and the sample photo groups, once per
   homepage — sets expectations before the visitor scrolls into the gallery,
   so the disclaimer only has to be said once, not repeated per section. */
.showcase-note{
  max-width:640px; margin:8px auto 48px;
  padding-top:32px;
  border-top:1px solid var(--edge);
  text-align:center;
}
.showcase-note p{ color:var(--muted); font-size:14px; line-height:1.7; }
.showcase-note strong{ color:var(--graphite); font-weight:600; }

/* ---------- 6. SECTIONS & HEADINGS ---------- */
section{ padding:88px 24px; }
section.alt{
  background:var(--steel-1);
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
}
.sec-head{ text-align:center; margin-bottom:54px; }
.sec-head .eyebrow{ margin-bottom:14px; }
.sec-head h2{ font-size:clamp(24px, 3.2vw, 34px); }
.sec-head p{ color:var(--muted); max-width:560px; margin:14px auto 0; }
/* sub-heading that introduces a second group inside the same section */
.sec-head-sub{ margin-top:72px; }

/* ---------- 7. CARDS ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
}
/* two-up FEATURED variant (premium products) — bigger than normal cards,
   whole card is a link. Sizing lives here; extras in section 15. */
.cards-featured{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:1000px;            /* wider than the old 720px → bigger cards */
  margin:0 auto;
  gap:26px;
}
.card{
  background:#f4f5f7;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.card-img{ aspect-ratio:4/3; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding:22px 22px 26px; }
.card-body h3{ font-size:16px; letter-spacing:.12em; margin-bottom:10px; }
.card-body p{ color:var(--muted); font-size:14.5px; }

/* SHOWCASE variant — the photos in images/showcase/ are square crops, so these
   cards carry a 1:1 image where the product cards above carry a 4:3 one. With
   two or three cards the grid gives each one about half the row, which is why
   these read bigger than the old four-up placeholder rows. */
.cards-showcase .card-img{ aspect-ratio:1/1; }
/* these cards are a single caption line with no paragraph beneath it, so the
   title's own bottom margin (meant to separate it from that paragraph) is
   dropped — otherwise the card ends in an odd stretch of empty padding. */
.cards-showcase .card-body h3{ margin-bottom:0; }
/* ---------- 8. ON-SITE TILES ---------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:18px;
}
.tile{
  background:#f4f5f7;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:28px 24px;
  box-shadow:var(--shadow-card);
}
.tile h3{ font-size:15px; letter-spacing:.12em; margin-bottom:10px; }
.tile p{ color:var(--muted); font-size:14px; }
/* The on-site section is the only one with no photographs — it sells a service,
   not an object. These mono numerals give it the visual rhythm the images give
   the other sections, so it reads as designed rather than as missing art. */
.tile-num{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em;
  color:var(--gold-deep);
  margin-bottom:14px;
}
/* centred button closing a section (used under the on-site tiles) */
.section-cta{ text-align:center; margin-top:40px; }

/* ---------- 9. GALLERY, WORK GRID & PLACEHOLDERS ---------- */
/* Photo gallery (the Personalized section): square tiles, each a <figure> with
   a one-line caption. auto-fit means the row count follows the viewport, so
   adding or removing a <figure> needs no CSS change. */
.gallery{
  display:grid;
  /* auto-fit here is only the fallback for the instant before js/script.js
     runs (and for the rare visitor with JS off): it packs as many 190px+
     tiles per row as fit, but leaves whatever's left over as a short last
     row — which is exactly the uneven-row look this was written to avoid.
     The script measures the actual photo count and picks a column count
     that divides evenly (or as close as the available width allows) instead,
     overriding this via an inline style — see "Gallery: balance rows" there. */
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:20px;
}
.gallery figure{ margin:0; }
.gallery img{
  display:block; width:100%;
  aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--edge);
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery figure:hover img{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.gallery figcaption{
  margin-top:12px;
  font-size:13.5px; color:var(--muted); text-align:center;
}

/* One highlighted tile: a soft rainbow ring on the colour-engraving example,
   so the eye lands on it without the tile shouting. The gradient sits in the
   image's own transparent border, painted by the border-box layer underneath
   — which means it follows the same rounded corners as every other tile
   (border-image would square them off) and needs no extra wrapper element.
   Colours are pulled toward the site's muted palette rather than full
   saturation, so it reads as an accent, not a sticker. */
.gallery-highlight img{
  border:3px solid transparent;
  background:
    linear-gradient(var(--steel-1), var(--steel-1)) padding-box,
    linear-gradient(115deg, #d99a3c, #cf6152, #9c5bb5, #4f86c6, #4da585, #d99a3c) border-box;
}

/* Click-to-zoom on the sample photos: js/script.js moves each qualifying img
   INSIDE a .zoom-trigger button (the button becomes the image's new direct
   parent), rather than overlaying a separate absolutely-positioned button on
   top of it. That matters here specifically: these grids are CSS Grid with
   the default align-items:stretch, so a short row-mate gets stretched to
   match its tallest sibling — an earlier version of this that sized a
   wrapper via height:100% inherited that stretched height too, which left no
   room for the figcaption below it and pushed captions down into the next
   row. A button sized purely by aspect-ratio (driven only by its own WIDTH)
   is immune to that: it can't inherit a stretched height it never asked for. */
.zoom-trigger{
  display:block; width:100%; aspect-ratio:1/1;
  padding:0; border:0; border-radius:inherit;
  background:transparent; color:transparent;
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.zoom-trigger:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:-3px;
}

/* Popup zoom for the sample photos above (js/script.js). Deliberately its own
   component, not a reuse of js/product.js's .lightbox — that one is a
   full-screen viewer built for browsing a product's whole photo set; this is
   a much smaller "here's that photo, bigger" popup, so it needs its own,
   much more modest sizing. Click anywhere on the dimmed backdrop (outside
   the card) to close, same as the product lightbox. */
.photo-zoom{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(18,19,20,.72);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.photo-zoom.open{ opacity:1; pointer-events:auto; }
.photo-zoom-card{
  position:relative;
  max-width:min(560px, 100%);
  max-height:100%;
  background:var(--steel-0);
  border-radius:10px;
  padding:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.photo-zoom-img{
  display:block;
  max-width:100%;
  max-height:min(560px, 72vh);
  width:auto; height:auto;
  border-radius:5px;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.photo-zoom-close{
  position:absolute; top:-14px; right:-14px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; font-family:'Work Sans', sans-serif;
  color:#fff;
  background:var(--graphite);
  border:2px solid var(--steel-0);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.photo-zoom-close:hover{ background:#000; }
.photo-zoom-close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.photo-zoom-prev, .photo-zoom-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; font-family:'Work Sans', sans-serif;
  color:#fff;
  background:rgba(20,20,22,.55);
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  cursor:pointer;
  opacity:.75;
  transition:opacity .15s ease, background .15s ease;
}
.photo-zoom-prev:hover, .photo-zoom-next:hover{ opacity:1; background:rgba(20,20,22,.75); }
.photo-zoom-prev:focus-visible, .photo-zoom-next:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.photo-zoom-prev{ left:8px; }
.photo-zoom-next{ right:8px; }

@media (prefers-reduced-motion: reduce){
  .photo-zoom{ transition:none; }
}

@media (max-width:480px){
  .photo-zoom{ padding:14px; }
  .photo-zoom-card{ padding:10px; }
  .photo-zoom-close{ top:-12px; right:-12px; width:30px; height:30px; font-size:17px; }
  .photo-zoom-prev, .photo-zoom-next{ width:34px; height:34px; font-size:18px; }
}

/* ---------- BIO POPUP (the PANO half of the wordmark) ----------
   Same overlay treatment and card width as the photo zoom above, but its own
   component: the content here is a portrait plus prose that has to be able to
   scroll, not a single image that must not. */
.bio-popup{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(18,19,20,.72);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.bio-popup.open{ opacity:1; pointer-events:auto; }
.bio-popup[hidden]{ display:none; }
.bio-card{
  position:relative;
  max-width:min(560px, 100%);
  max-height:100%;
  overflow-y:auto;
  background:var(--steel-0);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:30px 28px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.bio-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; font-family:'Work Sans', sans-serif;
  color:var(--muted);
  background:none; border:1px solid var(--edge); border-radius:50%;
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.bio-close:hover{ color:var(--graphite); border-color:var(--muted); }
.bio-head{ display:flex; align-items:center; gap:18px; margin-bottom:18px; padding-right:34px; }
.bio-photo{
  width:92px; height:92px; flex:none;
  object-fit:cover; border-radius:50%;
  border:1px solid var(--edge);
}
.bio-head .eyebrow{ margin-bottom:4px; }
.bio-name{ font-size:20px; }
/* direct child only, so the eyebrow inside .bio-head keeps its own colour */
.bio-body > p{ color:var(--muted); font-size:15px; line-height:1.75; }

@media (max-width:480px){
  .bio-popup{ padding:14px; }
  .bio-card{ padding:24px 20px; }
  .bio-head{ gap:14px; }
  .bio-photo{ width:72px; height:72px; }
  .bio-name{ font-size:18px; }
}

/* ---------- LASER-SPARK CURSOR (js/cursor.js) ----------
   The script only runs for a real mouse and only when reduced motion is not
   requested, and it adds .laser-cursor-on to <body> itself — so with JS off,
   on touch, or under reduced motion none of this applies and the normal
   cursor is untouched. */
@media (pointer: fine){
  body.laser-cursor-on, body.laser-cursor-on *{ cursor:none; }
  /* The one affordance worth keeping natively: a caret in the contact form,
     where knowing exactly where text will land actually matters. */
  body.laser-cursor-on input, body.laser-cursor-on textarea{ cursor:text; }
}
.laser-layer{
  position:fixed; inset:0; z-index:300;   /* above the popups (200) */
  pointer-events:none;
}
.laser-layer.is-out{ opacity:0; }
.laser-dot{
  position:absolute; top:0; left:0;
  /* JS writes only transform here, so the scale on hover lives on the core
     below rather than fighting it for the same property. */
  will-change:transform;
}
.laser-core{
  position:absolute;
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%;
  background:radial-gradient(circle, var(--hot) 0%, var(--gold) 42%, rgba(226,166,62,0) 72%);
  transition:transform .15s ease;
}
/* the cross-flare that reads as a spark rather than a plain dot */
.laser-core::before, .laser-core::after{
  content:""; position:absolute; left:50%; top:50%;
}
.laser-core::before{
  width:24px; height:1px; margin:-.5px 0 0 -12px;
  background:linear-gradient(90deg, rgba(255,243,221,0), var(--hot), rgba(255,243,221,0));
}
.laser-core::after{
  width:1px; height:24px; margin:-12px 0 0 -.5px;
  background:linear-gradient(180deg, rgba(255,243,221,0), var(--hot), rgba(255,243,221,0));
}
.laser-dot.is-active .laser-core{ transform:scale(1.5); }

.laser-spark{
  position:absolute; top:0; left:0;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--hot);
  box-shadow:0 0 5px 1px rgba(226,166,62,.85);
  animation-name:laser-spark-fly;
  animation-timing-function:cubic-bezier(.2,.7,.4,1);
  animation-fill-mode:forwards;
  will-change:transform, opacity;
}
/* Start point and travel both come in as custom properties from the script,
   so each spark's whole flight is a single composited animation. */
@keyframes laser-spark-fly{
  from{
    transform:translate3d(var(--x), var(--y), 0) scale(1);
    opacity:1;
  }
  to{
    transform:translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 0) scale(.25);
    opacity:0;
  }
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
}
.ph{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,
    var(--steel-1) 0 12px, var(--steel-2) 12px 24px);
  color:var(--muted);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-align:center;
  padding:12px;
}
.work-ph{ aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--edge); }

/* ---------- 10. COMING SOON ---------- */
.soon{
  text-align:center;
  padding:56px 24px;
  border-top:1px solid var(--edge);
}
.soon .eyebrow{ margin-bottom:18px; }
/* Each item is a small pill, not inline text — the same rounded-border,
   monospace-label language as .nav-lang (the EN/EL toggle) and .tile-num,
   so this reads as one more piece of the site's own vocabulary rather than
   a plain announcement line. The gold dot echoes the laser-spark accent
   used throughout without pulling in an icon set. */
.soon-list{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px;
  margin:0 0 18px;
  padding:0;
}
.soon-list li{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px; letter-spacing:.04em;
  color:var(--graphite);
  background:#f4f5f7;
  border:1px solid var(--edge);
  border-radius:999px;
  padding:8px 16px;
  transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.soon-list li::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold-deep);
  flex:none;
}
.soon-list li:hover{
  border-color:var(--gold-deep); color:var(--gold-deep);
  transform:translateY(-1px);
}
.soon-note{ color:var(--muted); font-size:14px; max-width:520px; margin:0 auto; }

/* ---------- 11. CONTACT & FORM ---------- */
.contact-box{
  background:#f4f5f7;
  border:1px solid var(--edge);
  border-radius:10px;
  box-shadow:var(--shadow-card);
  padding:54px 46px;
  display:grid; grid-template-columns:1fr 1fr; gap:52px;
}
.contact-info h2{ font-size:24px; margin:14px 0 16px; }
.contact-lead{ color:var(--muted); font-size:15px; margin-bottom:30px; }
.contact-lines{ list-style:none; padding:0; }
.contact-lines li{
  padding:13px 0; border-top:1px solid var(--edge);
  font-size:15px; display:flex; gap:16px; align-items:baseline;
}
.contact-lines .k{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); min-width:88px;
}
.contact-lines a:hover{ color:var(--gold-deep); }

form{ display:flex; flex-direction:column; gap:16px; }
label{ font-size:13px; color:var(--muted); display:block; margin-bottom:6px; }
label .opt{ opacity:.7; }
input, select, textarea{
  width:100%; padding:12px 14px;
  background:#fbfcfd; color:var(--graphite);
  border:1px solid var(--edge); border-radius:3px;
  font-family:'Work Sans', sans-serif; font-size:15px;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--gold); outline:none;
  box-shadow:0 0 0 3px rgba(226,166,62,.18);
}
textarea{ min-height:120px; resize:vertical; }

/* File upload: style the browser's default control so it fits the theme */
input[type="file"]{ padding:9px 12px; font-size:14px; cursor:pointer; }
input[type="file"]::file-selector-button{
  margin-right:12px; padding:8px 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.04em;
  background:var(--steel-1); color:var(--graphite);
  border:1px solid var(--edge); border-radius:3px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
input[type="file"]::file-selector-button:hover{ border-color:var(--gold); background:#eef0f2; }

/* Small helper line under a field (e.g. the reference-photo hint) */
.field-hint{ font-size:12.5px; color:var(--muted); margin-top:6px; }

form .btn{ align-self:flex-start; }
.form-status{ font-size:14px; min-height:1.4em; color:var(--gold-deep); }
.form-status.err{ color:#a03434; }

/* ---------- 12. FOOTER ---------- */
footer{
  padding:36px 24px 52px;
  text-align:center;
  color:var(--muted); font-size:13px;
  border-top:1px solid var(--edge);
  background:var(--steel-1);
}
footer p{ margin:4px 0; }

/* ---------- 13. REVEAL & REDUCED MOTION ---------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none; }
  .card, .card:hover, .btn, .btn:hover{ transform:none; transition:none; }
}

/* ---------- 14. RESPONSIVE ----------
   Breakpoints, largest to smallest:
     980px  — tablet: contact form stacks
     760px  — mobile: hamburger menu, tune banner & spacing
     480px  — small phone: single-column products, stacked CTAs
   The layout is fluid by default (grids use auto-fit + clamp), so these
   only handle the few spots that need explicit help. */

/* Tablet */
@media (max-width:980px){
  .contact-box{ grid-template-columns:1fr; padding:40px 30px; gap:34px; }
}

/* Narrow desktop / tablet — the landscape video is still in use here, but the
   banner is short, so both strips need trimming to stay off the artwork.
   The steel above the wordmark scales with WIDTH (~9.6% of it), so below
   ~1250px it is no longer taller than a full-padding nav. */
@media (min-width:761px) and (max-width:1250px){
  .hero-banner .nav{ padding:14px 24px; }
}
/* Five section links + the contact button + the language toggle need about
   770px of nav; below that they wrap onto a second line and land on the hero
   lettering. Tightening the spacing (not dropping links) buys back ~100px,
   which covers the gap down to the 760px hamburger breakpoint — the Greek
   labels are the long ones, so they set the limit. */
@media (min-width:761px) and (max-width:1000px){
  .nav-links{ gap:16px; font-size:13px; }
  .nav-links .nav-cta{ padding:8px 14px; }
  .nav-lang{ padding:4px 7px; font-size:11.5px; }
}
/* The steel band under the engraved ring is ~10.2% of the banner width — only
   ~75-100px here — so the 7%-of-height offset would push the button against the
   ring. Centre the button in that band instead: 10.2vw is the band's height and
   51px is the button's, so half the remainder sits above and half below. */
@media (min-width:761px) and (max-width:980px){
  .hero-cta{ bottom:calc((10.2vw - 51px) / 2); }
}

/* Mobile */
@media (max-width:760px){
  section{ padding:60px 20px; }
  .sec-head{ margin-bottom:40px; }
  .sec-head-sub{ margin-top:56px; }

  /* featured product cards are large — stack them early so each stays big */
  .cards-featured{ grid-template-columns:1fr; max-width:480px; }

  /* The gallery keeps two per row on phones: seven full-width squares would be
     an endless scroll, and these are small objects that read fine at half width. */
  .gallery{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .gallery figcaption{ margin-top:8px; font-size:12.5px; }

  /* On phones the portrait image IS the banner, shown in full. Its empty
     steel — top strip above the beam, bottom area below "MARKED BY" — is
     where the nav and CTAs sit, overlaid inside the image, clear of the
     lettering and ray. Same overlay approach as desktop, portrait artwork. */
  /* On phones the portrait image fills the banner. Same technique as
     desktop: a shorter box + object-position:bottom trims empty steel off
     the TOP only, leaving the letters/beam/spark/CTA composition intact.
     1200 of the native 1672 rows are kept, which clears the nav from the
     wordmark and leaves the lower ~45% of the banner as bare steel for the
     CTA — i.e. the button sits under the engraved logo, as before. */
  .hero-banner{
    aspect-ratio: 941 / 1200;         /* ~72% of the native portrait height */
    max-height:none; min-height:0;
    height:auto;
    flex-direction:column; justify-content:space-between;
  }
  .hero-img{ position:absolute; inset:0; z-index:0; }   /* fills the banner */
  .hero-banner .nav{ position:relative; order:0; z-index:4; padding:16px 20px; }
  /* CTAs overlaid in the lower steel zone — big bottom padding lifts them
     up off the image's bottom edge into the empty steel below the ring.
     That band is (1672-1100)/941 ≈ 61% of the banner WIDTH tall (percentage
     padding resolves against width too, so this scales with it). 19% here,
     plus the ~9%-of-width lift the inherited `bottom:7%` still applies to this
     now-relative box, leaves the button in that band with a little more room
     below than above — the same balance the old artwork had. */
  .hero-cta{
    position:relative; order:2; z-index:2;
    padding:0 22px 19%;
  }

  /* --- Hamburger menu --- */
  .nav-toggle{ display:flex; z-index:60; }

  /* Full-screen overlay menu: fixed to the viewport, fully opaque, above
     everything. This is the reliable mobile pattern — no bleed-through from
     the banner or the CTA buttons, and it never scrolls with the page. */
  .nav-links{
    display:none;
    position:fixed; inset:0; z-index:50;
    flex-direction:column; justify-content:center; align-items:stretch;
    gap:6px;
    padding:80px 28px 40px;
    background:var(--steel-0);        /* solid — nothing shows through */
    color:var(--graphite);            /* dark text: this is a light panel,
                                          not the metal image, so the white
                                          on-image color would be invisible */
  }
  .nav-links.open{ display:flex; }        /* JS adds .open on tap */
  .nav-links a{
    padding:18px 8px; width:100%;
    font-size:20px; letter-spacing:.06em;
    color:var(--graphite);
    text-shadow:none;
    border-bottom:1px solid var(--edge);
  }
  .nav-cta{
    margin-top:20px; text-align:center;
    font-size:16px; border-bottom:none;
  }

  /* animate hamburger into an X when open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* --- Contact form: comfortable on small screens --- */
  .contact-box{ padding:32px 20px; border-radius:8px; }
  .contact-info h2{ font-size:22px; }
  .contact-lines li{ flex-direction:column; gap:2px; }   /* label above value */
  .contact-lines .k{ min-width:0; }
  form .btn{ width:100%; text-align:center; }            /* full-width send */
}

/* Small phone */
@media (max-width:480px){
  /* CTAs stack full-width and become easy tap targets */
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; text-align:center; }

  .brand{ font-size:13px; letter-spacing:.14em; }
}

/* ============================================================
   15. FEATURED PRODUCT CARDS (index) & PRODUCT PAGES (products/)
   ============================================================ */

/* ---- 15a. Featured cards on the home page ----
   The whole card is an <a>. Base .card styles already apply;
   these lines make it bigger and add the "view details" cue. */
.cards-featured .card-img{ aspect-ratio:4/3; font-size:13px; }
.card-link{ color:inherit; }
.card-link .card-body{ padding-bottom:20px; }
.card-more{
  display:inline-block; margin-top:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.08em;
  color:var(--gold-deep);
  transition:transform .15s ease;
}
.card-link:hover .card-more{ transform:translateX(4px); }

/* ---- 15b. Product page header ----
   No banner image here — plain light steel. A clear Back button sits on the
   left; the brand on the right goes home. Dark text (not the hero's white). */
.p-head{
  border-bottom:1px solid var(--edge);
  background:rgba(244,245,247,.65);
}
.p-nav{
  max-width:1100px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.p-nav .brand{ color:var(--graphite); text-shadow:none; }
/* the Back button reuses .btn .btn-ghost .btn-sm; this just tightens spacing */
.back-btn{ font-family:'IBM Plex Mono', monospace; letter-spacing:.06em; }

/* ---- 15c. Product page layout: gallery left, details right ---- */
.product-page main{ padding:56px 0 96px; }
.product-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:56px;
  align-items:start;
}

/* ---- 15d. Gallery: big window + horizontal thumbnail strip ---- */
.pv-main{
  position:relative;                /* anchors the prev/next arrows (js/product.js adds them) */
  aspect-ratio:1/1;                 /* big square viewer */
  border:1px solid var(--edge);
  border-radius:var(--radius);
  overflow:hidden;
  background:#f4f5f7;
  box-shadow:var(--shadow-card);
  font-size:14px;                   /* placeholder label size */
}
.pv-main img{ width:100%; height:100%; object-fit:cover; }
/* shown once a real photo is loaded (js/product.js adds this) — hints it opens larger */
.pv-main.zoomable{ cursor:zoom-in; }
.pv-main.zoomable:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

/* Wraps the thumbnail strip so the small scroll-arrows (js/product.js,
   only added when there's more than one photo) sit either side of it. */
.pv-thumbs-wrap{ display:flex; align-items:center; gap:6px; margin-top:12px; }
.pv-thumbs-wrap .pv-thumbs{ margin-top:0; flex:1; min-width:0; } /* margin now lives on the wrapper */

.pv-thumbs{
  display:flex; gap:10px;
  margin-top:12px;
  overflow-x:auto;                  /* strip scrolls sideways if it overflows */
  padding:2px 2px 8px;              /* room for the focus ring + scrollbar */
}
.pv-thumb{
  flex:0 0 76px;                    /* fixed-size squares, never squashed */
  aspect-ratio:1/1;
  padding:0;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  overflow:hidden;
  background:none;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pv-thumb .ph{ width:100%; height:100%; font-size:13px; }
.pv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-thumb:hover{ border-color:var(--gold); }
.pv-thumb.active{                   /* the one currently in the big window */
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(226,166,62,.35);
}

/* ---- 15e. Details column ---- */
.p-info h1{
  font-size:clamp(26px, 3.4vw, 36px);
  margin:12px 0 6px;
}
.p-price{
  font-family:'Jost', sans-serif;
  font-size:26px; font-weight:400; letter-spacing:.04em;
  color:var(--graphite);
  margin:6px 0 20px;
}
.p-price span{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.08em;
  color:var(--muted);
}
.p-lead{ font-size:16.5px; margin-bottom:22px; }
.p-specs{
  list-style:none; padding:0; margin:0 0 28px;
}
.p-specs li{
  padding:11px 0 11px 24px;
  border-top:1px solid var(--edge);
  font-size:14.5px; color:var(--muted);
  position:relative;
}
/* small gold tick standing in for a bullet — matches the reg-mark motif */
.p-specs li::before{
  content:""; position:absolute; left:2px; top:1.35em;
  width:9px; height:9px;
  border-left:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep);
}
.p-cta{ margin-bottom:18px; }
.p-note{ font-size:13.5px; color:var(--muted); max-width:420px; }

/* ---- 15f. Gallery navigation arrows (js/product.js adds these; only
     when there are 2+ photos, so a single-photo gallery stays plain) ---- */

/* Prev/next over the big photo. Shared base class also used by the
   lightbox's own arrows (section 16) so both stay visually consistent. */
.pv-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; font-family:'Work Sans', sans-serif;
  color:#fff;
  background:rgba(20,20,22,.4);
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  cursor:pointer;
  opacity:.55;                      /* discreet by default... */
  transition:opacity .15s ease, background .15s ease;
  z-index:2;                        /* sits above the photo underneath it */
}
.pv-main:hover .pv-arrow,
.pv-arrow:hover,
.pv-arrow:focus-visible{ opacity:.95; }  /* ...clearer on hover/focus/touch */
.pv-arrow:hover{ background:rgba(20,20,22,.6); }
.pv-arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pv-arrow-prev{ left:10px; }
.pv-arrow-next{ right:10px; }

/* Small scroll arrows beside the thumbnail strip — hidden entirely
   unless the strip actually overflows (js/product.js toggles [hidden]),
   and greyed out at whichever end has nothing further to scroll to. */
.pv-scroll{
  flex:0 0 auto;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1;
  color:var(--graphite);
  background:#f4f5f7;
  border:1px solid var(--edge);
  border-radius:50%;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, opacity .15s ease;
}
.pv-scroll:hover{ border-color:var(--gold); background:#eef0f2; }
.pv-scroll:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.pv-scroll:disabled{ opacity:.3; cursor:default; pointer-events:none; }
.pv-scroll[hidden]{ display:none; }   /* explicit: overrides our own .pv-scroll{display:flex} */

/* ---- 15g. Product page responsive ----
   Matches the main page's approach and breakpoints (760px mobile,
   480px small phone) so the two feel like one site. */

/* Tablet / large phone: stack the two columns, ease the outer padding */
@media (max-width:860px){
  .product-grid{ grid-template-columns:1fr; gap:34px; }
  .product-page main{ padding:40px 0 72px; }
  /* Once stacked, the square photo would dominate a narrow screen — cap it
     and centre it so it stays a comfortable, professional size. */
  .pv{ max-width:460px; margin:0 auto; }
  .p-info{ max-width:560px; margin:0 auto; }   /* keep text measure readable */
  .p-cta .btn{ width:100%; text-align:center; }
}

/* Mobile: header, padding and gallery tuned for phones */
@media (max-width:760px){
  .p-nav{ padding:14px 20px; gap:14px; }
  .back-btn{ padding:8px 14px; font-size:12px; }   /* compact, still an easy tap */
  .p-nav .brand{ font-size:13px; letter-spacing:.14em; }

  .product-page main{ padding:28px 0 64px; }
  .product-page .wrap{ padding:0 20px; }           /* match main-page side padding */

  .pv-thumb{ flex-basis:64px; }                    /* slightly smaller thumbs fit more in view */
  .pv-arrow{ width:42px; height:42px; }            /* comfortable touch target */
  .pv-arrow{ opacity:.9; }                         /* no hover on touch — keep them visible */
}

/* Small phone: scale the type and spacing down a notch */
@media (max-width:480px){
  .product-page main{ padding:20px 0 56px; }
  .pv{ max-width:none; }                            /* photo goes edge-to-edge within the wrap */

  .p-info{ margin-top:4px; }
  .p-info h1{ font-size:clamp(23px, 7vw, 28px); }
  .p-price{ font-size:23px; margin:6px 0 18px; }
  .p-lead{ font-size:15.5px; margin-bottom:20px; }
  .p-specs{ margin-bottom:24px; }
  .p-specs li{ font-size:14px; }

  .pv-arrow{ width:38px; height:38px; font-size:18px; }
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; font-size:22px; }

  /* footer: looser line spacing so the long legal lines don't feel cramped */
  footer{ padding:32px 20px 44px; font-size:12.5px; line-height:1.7; }
  footer p{ margin:6px 0; }
}

/* ============================================================
   16. LIGHTBOX (click-to-enlarge on product photos)
   ------------------------------------------------------------
   Built once in js/product.js and appended to <body> — this CSS is
   all that's needed to style it; no HTML to maintain per page.
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:48px;
  background:rgba(18,19,20,.92);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width:92vw; max-height:92vh;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute; top:20px; right:24px;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; font-family:'Work Sans', sans-serif;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  cursor:pointer;
  transition:background .15s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.2); }
.lightbox-close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Prev/next inside the lightbox — reuses the .pv-arrow base style (section 15f)
   so they match the arrows on the page behind it, just a bit larger since
   there's more room on a full-screen overlay. Only added when there's more
   than one photo (js/product.js). */
.lightbox-prev, .lightbox-next{
  width:46px; height:46px;
  font-size:24px;
  opacity:.7;
}
.lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }

@media (prefers-reduced-motion: reduce){
  .lightbox{ transition:none; }
}

@media (max-width:480px){
  .lightbox{ padding:20px; }
  .lightbox-close{ top:12px; right:12px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

/* ============================================================
   17. PRODUCT PAGE MOBILE HARDENING
   ------------------------------------------------------------
   Product pages reuse <section> elements, but they must not inherit the
   homepage's large section padding. The rules below deliberately scope
   every adjustment to .product-page so the homepage remains unchanged.
   ============================================================ */
.product-page{
  min-height:100vh;
  min-height:100dvh;
}

/* Critical reset: prevents the homepage's 88px/60px section padding from
   creating the oversized empty bands visible on narrow product pages. */
.product-page section{ padding:0; }

.p-head{
  position:relative;
  z-index:30;
  background:rgba(244,245,247,.94);
  -webkit-backdrop-filter:saturate(130%) blur(12px);
          backdrop-filter:saturate(130%) blur(12px);
}
.p-nav{ min-height:68px; }
.back-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.pv{ min-width:0; }
.pv-main{
  isolation:isolate;
  touch-action:pan-y pinch-zoom;
}
.pv-main > img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  transition:opacity .16s ease;
}
.pv-main.is-loading > img{ opacity:.84; }

/* Full-area, accessible zoom target. It is a sibling of the arrow buttons,
   rather than making the whole gallery an interactive element containing
   other buttons. */
.pv-zoom{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  color:transparent;
  cursor:zoom-in;
  touch-action:pan-y pinch-zoom;
  -webkit-tap-highlight-color:transparent;
}
.pv-zoom:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:-5px;
}

.pv-arrow{ z-index:3; }
.pv-counter{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
  min-width:48px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(20,20,22,.58);
  color:#fff;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  line-height:1;
  letter-spacing:.04em;
  text-align:center;
  pointer-events:none;
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
}

.pv-thumbs{
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.pv-thumb{
  min-height:44px;
  scroll-snap-align:start;
  touch-action:manipulation;
}
.pv-thumb[aria-current="true"]{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(226,166,62,.35);
}

.lightbox[hidden]{ display:none; }
.lightbox{
  min-height:100vh;
  min-height:100dvh;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.lightbox-img{
  user-select:none;
  -webkit-user-drag:none;
}

/* Stacked product layout: use a shorter gallery window so photos, title,
   price and the primary action all appear much sooner on mobile/tablet. */
@media (max-width:860px){
  .product-grid{ gap:26px; }
  /* Explicit width prevents a short thumbnail list from shrink-wrapping the
     gallery and a long list from forcing it wider than the viewport. */
  .product-page .pv{ width:100%; }
  .pv-main{ aspect-ratio:4 / 3; }
  .p-info{ width:100%; }
}

@media (max-width:760px){
  .product-page{
    background-attachment:scroll;
    -webkit-text-size-adjust:100%;
  }

  .p-head{
    position:sticky;
    top:0;
    padding-top:env(safe-area-inset-top, 0px);
    box-shadow:0 1px 0 rgba(47,51,54,.08);
  }
  .p-nav{
    min-height:60px;
    padding:8px 16px;
    gap:12px;
  }
  .back-btn{
    min-height:44px;
    padding:8px 13px;
    font-size:12px;
  }
  .p-nav .brand{
    min-width:0;
    font-size:12.5px;
    letter-spacing:.12em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .product-page main{ padding:18px 0 56px; }
  .product-page .wrap{ padding:0 16px; }
  .product-grid{ gap:22px; }

  .pv-main{
    aspect-ratio:4 / 3;
    border-radius:8px;
  }
  .pv-thumbs-wrap{
    gap:0;
    margin-top:10px;
  }
  .pv-thumbs{
    gap:8px;
    padding:2px 1px 4px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .pv-thumbs::-webkit-scrollbar{ display:none; }
  .pv-thumb{
    flex-basis:60px;
    border-radius:5px;
  }
  /* Touch users can drag the rail directly; removing desktop-only rail
     arrows gives the thumbnails the full available screen width. */
  .pv-scroll{ display:none; }

  .pv-arrow{
    width:44px;
    height:44px;
    opacity:.92;
  }
  .pv-arrow-prev{ left:8px; }
  .pv-arrow-next{ right:8px; }
  .pv-counter{ right:8px; bottom:8px; }

  .p-info h1{ margin-top:10px; }
  .p-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:3px 8px;
  }
  .p-lead{ line-height:1.6; }
  .p-cta{ margin-bottom:16px; }
  .p-cta .btn{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .lightbox{
    padding:
      max(18px, env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      max(18px, env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px));
  }
  .lightbox-close{
    top:max(10px, env(safe-area-inset-top, 0px));
    right:max(10px, env(safe-area-inset-right, 0px));
  }
  .lightbox-prev{ left:max(6px, env(safe-area-inset-left, 0px)); }
  .lightbox-next{ right:max(6px, env(safe-area-inset-right, 0px)); }
}

@media (max-width:480px){
  .product-page main{ padding:14px 0 48px; }
  .product-page .wrap{ padding:0 14px; }
  .product-grid{ gap:18px; }

  .p-nav{ padding-inline:12px; }
  .p-info{ margin-top:0; }
  .p-info h1{
    font-size:clamp(23px, 7vw, 28px);
    letter-spacing:.11em;
  }
  .p-price span{
    flex-basis:100%;
    margin-top:1px;
  }
  .p-specs li{
    padding-top:10px;
    padding-bottom:10px;
  }
  .pv-thumb{ flex-basis:56px; }
  .pv-counter{ font-size:10.5px; }
}

@media (max-width:350px){
  .product-page .wrap{ padding:0 12px; }
  .p-nav{ gap:8px; }
  .back-btn{ padding-inline:10px; font-size:11.5px; }
  .p-nav .brand{ font-size:11px; letter-spacing:.09em; }
  .pv-arrow{ width:42px; height:42px; }
}

@media (prefers-reduced-motion: reduce){
  .pv-main > img{ transition:none; }
}