/* ============================================================
   MARKEDBYLIGHT — 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 photo's native 1916/821 ratio — combined with
     object-position:bottom below, this trims empty steel off the TOP only
     (well above where the lettering starts), so the letters/beam/spark/
     button composition is completely undisturbed, just less tall overall. */
  aspect-ratio: 1916 / 657;
  /* No max-height: a fixed cap would make the box wider-than-ratio on large
     monitors, and since the video is cover-fit anchored to the bottom, that
     extra width trims MORE off the top — eventually clipping the lettering.
     Letting height follow the aspect-ratio keeps the ~20% steel trim constant
     at every width, so the "MARKED BY" composition is never cut. */
  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 */
}
.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 — safely below the spark
   burst — no matter how tall the banner renders at different widths. */
.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;
}

/* ---------- 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; }

/* ---------- 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; }

/* ---------- 9. WORK GRID & PLACEHOLDERS ---------- */
.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:14px; }
.soon p:last-child{ color:var(--muted); font-size:15px; max-width:640px; margin:0 auto; }
.soon span{ color:var(--graphite); }

/* ---------- 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; }
}

/* 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; }

  /* 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. */
  .hero-banner{
    aspect-ratio: 941 / 1044;         /* ~80% 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 letters */
  .hero-cta{
    position:relative; order:2; z-index:2;
    padding:0 22px 12%;
  }

  /* --- 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; }
}