/* =========================================================================
   LAUGO ARMS BRASIL — Product / internal pages
   Faithful to laugoarmsusa.com product pages. Loads AFTER site.css (reuses
   the same :root tokens). Adds a squared techno face for section titles.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  --font-techno: 'Chakra Petch', 'Saira Condensed', sans-serif;
}

/* Push content below the fixed header */
.has-fixed-header { padding-top: var(--header-h); }

/* ---- Section title (techno, wide tracking) ---- */
.section-title {
  font-family: var(--font-techno);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin: 0;
  line-height: 1.1;
}
.section-title--blue { color: #cdd6e0; }
.section-sub {
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--red-bright);
  letter-spacing: 0.02em;
  margin: 14px 0 0;
}
.section-lead {
  text-align: center;
  max-width: 60ch;
  margin: 18px auto 0;
  font-size: 15px;
  color: var(--t-2);
  line-height: 1.7;
}

/* =========================================================================
   PRODUCT HERO
   ========================================================================= */
.product-hero {
  position: relative;
  min-height: 86vh;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(40,40,44,0.55) 0%, transparent 60%),
    url('texture-cracked.svg'),
    #050505;
  background-size: auto, cover, auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) var(--pad) clamp(32px, 5vw, 64px);
  overflow: hidden;
}
.product-hero__lockup { position: relative; z-index: 3; margin-bottom: 8px; }
.lockup-alien {
  font-family: var(--font-techno);
  font-weight: 700;
  font-size: clamp(56px, 12vw, 150px);
  letter-spacing: 0.06em;
  line-height: 0.9;
  color: #fff;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 0.04em;
}
/* striped E to echo the Alien wordmark */
.lockup-alien .striped {
  position: relative;
  background: repeating-linear-gradient(0deg, #fff 0 0.14em, transparent 0.14em 0.26em);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lockup-sub {
  font-family: var(--font-techno);
  font-weight: 500;
  font-size: clamp(16px, 2.4vw, 30px);
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
.lockup-sub::before, .lockup-sub::after { content: ""; height: 1px; width: clamp(40px, 12vw, 150px); background: rgba(255,255,255,0.35); }
.lockup-tertiary {
  font-family: var(--font-techno); font-weight: 400;
  font-size: clamp(12px, 1.6vw, 20px); letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--t-3); margin-top: 12px;
}
.product-hero__media {
  position: relative; z-index: 2;
  width: 100%; max-width: 1000px; margin-top: clamp(16px, 3vw, 40px);
  aspect-ratio: 16/9;
}
.product-hero__media image-slot { width: 100%; height: 100%; }

/* =========================================================================
   INTRO
   ========================================================================= */
.intro { padding: clamp(56px, 8vw, 100px) 0; background: #000; }

/* =========================================================================
   FEATURE TILES
   ========================================================================= */
.feature-tiles { padding: 0 0 clamp(56px, 8vw, 100px); background: #000; }
.feature-tiles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.ftile { display: flex; flex-direction: column; gap: 14px; }
.ftile__media { aspect-ratio: 1; border: 1px solid var(--line); overflow: hidden; background: #111; }
.ftile__media image-slot { width: 100%; height: 100%; }
.ftile h4 { margin: 4px 0 0; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.ftile p { margin: 0; text-align: center; font-size: 13px; color: var(--t-3); line-height: 1.55; }

/* =========================================================================
   VIDEO ROW
   ========================================================================= */
.video-row { background: #000; padding: 0 0 clamp(40px, 6vw, 72px); }
.video-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.vid { position: relative; aspect-ratio: 16/9; background: #0c0c0d; border: 1px solid var(--line); overflow: hidden; }
.vid image-slot { width: 100%; height: 100%; }
.vid__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent); pointer-events: none; }
.vid__bar strong { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: 0.02em; }
.vid__bar span { font-family: var(--font-techno); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-3); }
.vid__play { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; cursor: pointer; }
.vid__play i {
  width: 68px; height: 48px; border-radius: 10px; background: #f00; display: grid; place-items: center;
  transition: transform .2s var(--ease);
}
.vid:hover .vid__play i { transform: scale(1.08); }
.vid__play svg { width: 26px; height: 26px; fill: #fff; }
.vid__yt { position: absolute; right: 14px; bottom: 12px; z-index: 5; font-size: 11px; color: #fff; display: flex; align-items: center; gap: 6px; opacity: .85; }

/* =========================================================================
   SPEC BAR
   ========================================================================= */
.spec-bar { background: #000; padding: clamp(36px, 5vw, 56px) 0 0; }
.spec-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.spec-bar__cell { text-align: center; padding: 6px 16px 26px; }
.spec-bar__cell .label { font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.spec-bar__cell .value { font-size: 15px; color: var(--t-2); }
.spec-bar__rule { height: 3px; background: var(--red-bright); width: 100%; max-width: 760px; margin: 0 auto; }

/* =========================================================================
   AVAILABLE CONFIGURATIONS
   ========================================================================= */
.configs { background: #1a1a1c; padding: clamp(56px, 8vw, 100px) 0; }
.configs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: clamp(36px, 5vw, 56px); }
.kit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.kit__media { width: 100%; aspect-ratio: 4/3; display: grid; place-items: center; }
.kit__media image-slot { width: 100%; height: 100%; }
.kit__name { font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: #fff; }
.kit__desc { font-size: 12.5px; color: var(--t-3); line-height: 1.5; }
.kit__note { font-family: var(--font-techno); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-4); }
.btn-buy {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 22px; background: var(--red-bright); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background .18s var(--ease);
}
.btn-buy:hover { background: var(--red); }
.btn-buy--soon { background: transparent; border: 1px solid var(--red-bright); color: var(--red-bright); }
.btn-buy--soon:hover { background: var(--red-bright); color: #fff; }

/* configs variant: 2 big + 3 + 3 (Creator) */
.configs__rows { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-direction: column; gap: clamp(20px, 3vw, 36px); }
.configs__row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); }
.configs__row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 32px); }
.kit--wide .kit__media { aspect-ratio: 16/9; }
.kit--empty .kit__media { border: 1px solid var(--line); background: #131315; }

/* =========================================================================
   ALIEN ADVANTAGE
   ========================================================================= */
.advantage {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.85)),
    url('texture-cracked.svg'), #060606;
  background-size: auto, cover, auto;
  padding: clamp(56px, 8vw, 100px) 0;
}
.advantage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: clamp(40px, 6vw, 64px); }
.adv { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.adv__icon { width: 78px; height: 64px; }
.adv h4 { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.adv p { margin: 0; font-size: 13.5px; color: var(--t-2); line-height: 1.6; max-width: 34ch; }

/* =========================================================================
   OPTIC PLATE SYSTEM
   ========================================================================= */
.plates { background: #000; padding: clamp(56px, 8vw, 100px) 0; }
.plates__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(36px, 5vw, 56px); }
.plate { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.plate__name { font-family: var(--font-techno); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.plate__name.dim { color: var(--t-4); }
.plate__media { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--line); background: #0d0d0e; overflow: hidden; }
.plate__media image-slot { width: 100%; height: 100%; }

/* =========================================================================
   PREVIOUS LIMITED EDITIONS
   ========================================================================= */
.prev-editions { background: #000; padding: clamp(48px, 7vw, 90px) 0 clamp(64px, 9vw, 110px); text-align: center; }
.prev-editions h3 { font-family: var(--font-ui); font-weight: 700; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin: clamp(28px,4vw,44px) 0 0; }
.prev-editions .note { font-family: var(--font-techno); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-3); margin-top: 26px; }
.prev-editions .note a { color: var(--red-bright); }

@media (max-width: 1080px) {
  .feature-tiles__grid { grid-template-columns: repeat(2, 1fr); }
  .configs__grid { grid-template-columns: repeat(2, 1fr); }
  .plates__grid { grid-template-columns: repeat(3, 1fr); }
  .advantage__grid { grid-template-columns: 1fr; gap: 40px; }
  .video-row__grid { grid-template-columns: 1fr; }
  .configs__row-3 { grid-template-columns: 1fr; }
  .configs__row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .feature-tiles__grid { grid-template-columns: 1fr; }
  .configs__grid { grid-template-columns: 1fr; }
  .plates__grid { grid-template-columns: repeat(2, 1fr); }
  .spec-bar__grid { grid-template-columns: 1fr; gap: 4px; }
}