/* ==========================================================================
   Keys Gun Shop — brand skin (Creation Station v10 / BUILD_SPEC v6)
   Loaded from includes/header.php AFTER the base theme so these win the ties.
   Tokens: canvas #FFFFFF · ink #171717 · accent green #2E5F00 · surface #F7F7F5
           border #DDDDDD · Oswald headings / Inter body.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root{
  --ks-canvas:#FFFFFF; --ks-ink:#171717; --ks-green:#2E5F00; --ks-green-d:#244a00;
  --ks-surface:#F7F7F5; --ks-border:#DDDDDD; --ks-muted:#6b6f66; --ks-green-l:#3e7d0a;
}

/* ---- fonts must actually win: base theme sets body{font-family:'Roboto' !important} ---- */
html body,
html body p, html body li, html body a, html body span, html body div,
html body input, html body button, html body select, html body textarea{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .ks-hero-title, html body .ks-sec-head, html body .ks-cat-name,
html body .ks-daily-tag, html body .ks-daily-price, html body .ks-fact-label,
html body .product-title{
  font-family:'Oswald','Arial Narrow',Arial,sans-serif !important;
}

/* primary buttons -> Keys green */
html body .btn, html body a.btn, html body .btn-primary, html body .btn-add-to-cart,
html body input[type="submit"], html body .search-bar button{
  background:var(--ks-green) !important; border-color:var(--ks-green) !important; color:#fff !important;
}
html body .btn:hover, html body a.btn:hover, html body .btn-primary:hover,
html body .btn-add-to-cart:hover, html body .search-bar button:hover{ background:var(--ks-green-d) !important; }

/* ============================ HERO ============================
   The base theme has  section{background:#fff !important}  which wipes any
   background-image via the shorthand. Beat it with higher specificity + longhand
   !important so the clean hero art actually renders. */
/* The hero is simply the image as a visual block; the logo/headline/CTA are HTML
   overlaid on its white-left zone. No scrim (that produced a hard visual line).
   `contain` shows the whole image with the white background filling any gap, so
   there is no crop and no seam. */
/* 2026-09-07: the `keys-hero-nodiag.png` rule that used to sit here has been removed.
   It was dead — every one of its five declarations was overridden by the clean-plate
   rule further down this file (same specificity, both !important, later wins), so the
   browser never used it. It outlived its purpose on 2026-09-02 when the clean plate
   replaced the diagonal art, and then misled a defect report into citing a rule that
   was not in effect. The live hero rule is the CLEAN PLATE block below. */
.ks-hero{ position:relative; min-height:500px; display:flex; align-items:center; }
.ks-hero-logo{ max-width:240px !important; height:auto !important; }
.ks-hero-inner{ position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto;
  padding:40px 48px; box-sizing:border-box; }
.ks-hero-copy{ max-width:560px; }
.ks-hero-logo{ display:block; width:auto; max-width:360px; height:auto; margin:0 0 22px; }
.ks-hero-title{ margin:0 0 14px; color:var(--ks-ink); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,50px); line-height:1.02; letter-spacing:.4px; }
.ks-hero-accent{ color:var(--ks-green); }
.ks-hero-sub{ margin:0 0 24px; color:#3a3f38; font-size:clamp(14px,1.5vw,18px); line-height:1.5; max-width:440px; }
.ks-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.ks-hero-cta .btn{ padding:14px 30px; font-size:15px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; border-radius:4px; }
/* Specificity note (2026-09-02): the shared rule above is `html body a.btn` (0,0,2,3) and also
   uses !important, so a plain `.ks-btn-outline.btn` (0,0,2,0) LOST and the label rendered white
   on white — an invisible button. Match the shared selector's shape so this wins. */
html body a.ks-btn-outline.btn, .ks-btn-outline.btn{
  background:#fff !important; color:var(--ks-green) !important;
  border:2px solid var(--ks-green) !important; }
html body a.ks-btn-outline.btn:hover, .ks-btn-outline.btn:hover{
  background:var(--ks-surface) !important; color:var(--ks-green-d) !important; }

/* ============================ SHARED SECTION SHELL ============================ */
.ks-sec{ max-width:1440px; margin:0 auto; padding:0 48px; box-sizing:border-box; }
.ks-sec-head{ text-align:center; margin:0 0 20px; font-size:clamp(20px,2.4vw,28px);
  color:var(--ks-ink); text-transform:uppercase; letter-spacing:.5px; }

/* ---- trust facts (strip = 3-up, footer = 4-up), shared block ---- */
.ks-fact{ display:flex; align-items:center; gap:13px; padding:14px 12px; }
.ks-fact-ic{ width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--ks-green); display:flex; align-items:center; justify-content:center; }
.ks-fact-ic svg{ width:18px; height:18px; color:var(--ks-green); }
.ks-fact-body{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.ks-fact-label{ color:var(--ks-ink); font-weight:700; font-size:14px; letter-spacing:.6px; text-transform:uppercase; }
.ks-fact-sub{ color:var(--ks-muted); font-size:13px; word-break:break-word; }
.ks-fact-sub a{ color:var(--ks-green) !important; text-decoration:none; }

.ks-trust{ background:var(--ks-surface); border-top:1px solid var(--ks-border); border-bottom:1px solid var(--ks-border); }
.ks-trust-inner{ max-width:1440px; margin:0 auto; padding:14px 48px; box-sizing:border-box;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ============================ DAILY FEATURE ============================ */
.ks-daily{ padding:32px 0 8px; }
.ks-daily-card{ position:relative; border:2px solid var(--ks-green); border-radius:6px; background:#fff;
  padding:26px 26px 26px; display:flex; align-items:center; gap:28px; }
.ks-daily-tag{ position:absolute; top:-1px; left:-1px; background:var(--ks-green); color:#fff;
  font-weight:700; letter-spacing:.6px; text-transform:uppercase; font-size:13px; padding:8px 18px;
  border-radius:6px 0 8px 0; }
.ks-daily-media{ flex:0 0 auto; width:230px; height:190px; border:1px solid var(--ks-border); border-radius:4px;
  background:var(--ks-surface); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ks-daily-media img{ max-width:100%; max-height:100%; object-fit:contain; }
.ks-daily-body{ flex:1 1 auto; min-width:0; }
.ks-daily-body h3{ margin:0 0 8px; font-size:24px; text-transform:uppercase; }
.ks-daily-body h3 a{ color:var(--ks-ink) !important; }
.ks-daily-desc{ color:#3a3f38; font-size:15px; margin:0 0 10px; }
.ks-daily-price{ color:var(--ks-green); font-weight:700; font-size:18px; margin:0 0 4px; }
.ks-daily-avail{ color:var(--ks-muted); font-size:13px; }
.ks-daily-cta{ flex:0 0 auto; }
.ks-daily-cta .btn{ padding:14px 26px; }

/* ============================ CATEGORY STRIP (art tiles) ============================
   2026-09-08: tiles now carry the approved Keys 4:3 renders (pack v2 LOCKED). The
   art replaces the prior typographic SVG icon; the .ks-cat-art wrapper is a single
   fixed-height object-fit:contain envelope so all 8 cards keep identical heights no
   matter the art's letterboxing (acceptance: consistent card heights at every bp).
   The art is on white and merges into the white card per the pack's fit contract. */
.ks-cats{ padding:30px 0 8px; }
.ks-cats-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:12px; }
.ks-cat{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
  min-height:120px; padding:14px 10px; background:#fff; border:1px solid var(--ks-border); border-radius:4px;
  text-decoration:none; text-align:center; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ks-cat:hover{ border-color:var(--ks-green); box-shadow:0 6px 16px rgba(46,95,0,.14); transform:translateY(-3px); }
.ks-cat-art{ width:100%; height:96px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ks-cat-art img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.ks-cat-name{ color:var(--ks-ink); font-weight:600; font-size:13.5px; line-height:1.15; }
.ks-cat-shop{ color:var(--ks-green); font-size:12px; font-weight:700; }

/* ============================ BEST SELLERS ============================ */
.ks-best{ padding:30px 0 36px; }
.ks-best-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.ks-card{ display:flex; flex-direction:column; border:1px solid var(--ks-border); border-radius:4px; background:#fff; overflow:hidden; }
.ks-card-img{ aspect-ratio:1/1; background:var(--ks-surface); display:flex; align-items:center; justify-content:center; }
.ks-card-img img{ width:100%; height:100%; object-fit:contain; }
.ks-card-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.ks-card-title{ color:var(--ks-ink); font-size:14px; line-height:1.3; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.ks-card-brand{ color:var(--ks-muted); font-size:12px; }
.ks-card-price{ color:var(--ks-green); font-weight:700; font-size:14px; margin-top:auto; }
.ks-card-price .price-tbd{ color:var(--ks-muted); font-weight:600; }
.ks-card .btn{ margin:0 12px 12px; padding:10px; font-size:13px; }

/* ============================ LIVE-SECTION STATES ============================ */
.ks-state{ border:1px dashed var(--ks-border); border-radius:6px; padding:34px 22px; text-align:center;
  background:var(--ks-surface); color:#3a3f38; }
.ks-state p{ margin:0 0 12px; font-size:15px; }
.ks-state-error{ border-color:#e6c9c9; background:#fdf6f6; }
.ks-state-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ks-state-link{ display:inline-block; padding:8px 16px; border:1px solid var(--ks-green); border-radius:4px;
  color:var(--ks-green) !important; font-weight:700; font-size:13px; text-decoration:none; }
.ks-state-link:hover{ background:var(--ks-green); color:#fff !important; }
.ks-skel{ position:relative; overflow:hidden; background:#eceee8; border-radius:4px; }
.ks-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:ksShimmer 1.2s infinite; }
@keyframes ksShimmer{ 100%{ transform:translateX(100%); } }
.ks-skel-line{ height:12px; margin:0 0 9px; }
.ks-card.ks-skel-card .ks-card-img{ background:#eceee8; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .ks-cats-grid{ grid-template-columns:repeat(4,1fr); }
  .ks-best-grid{ grid-template-columns:repeat(2,1fr); }
  .ks-hero{ background-position:78% center; }
  .ks-sec, .ks-hero-inner, .ks-trust-inner{ padding-left:28px; padding-right:28px; }
}
@media (max-width:767px){
  /* 2026-09-07: removed a dead `background-image:none` override here. It was written to
     hide the OLD diagonal art on phones, but the later unconditional clean-plate rule beat
     it, so the plate has been showing on phones since 2026-09-02 — which is the intent now:
     the <=768px block at the end of this file scrims it so the live text stays readable. */
  .ks-hero{ min-height:0; }
  .ks-hero::before{ display:none; }
  .ks-hero-inner{ padding:26px 18px; }
  .ks-hero-copy{ max-width:100%; }
  .ks-hero-cta .btn{ flex:1 1 auto; text-align:center; }
  .ks-trust-inner{ grid-template-columns:1fr; padding:10px 18px; }
  .ks-daily-card{ flex-direction:column; align-items:stretch; text-align:center; }
  .ks-daily-media{ width:100%; }
  .ks-cats-grid{ grid-template-columns:repeat(2,1fr); }
  .ks-best-grid{ grid-template-columns:1fr; }
  .ks-sec{ padding-left:18px; padding-right:18px; }
}

/* focus ring + reduced motion */
html body a:focus-visible, html body button:focus-visible, html body .ks-cat:focus-visible,
html body input:focus-visible{ outline:3px solid var(--ks-green-l) !important; outline-offset:2px !important; border-radius:3px; }
@media (prefers-reduced-motion:reduce){
  .ks-cat, .ks-hero-cta .btn{ transition:none !important; }
  .ks-cat:hover{ transform:none !important; }
  .ks-skel::after{ animation:none !important; }
}

/* 2026-09-01: Keys hero now uses the Keys-supplied branded banner image (headline, Keys logo,
   and Shop Now baked into the art). Full-width responsive image; the whole banner links to
   firearms. Retires the old CSS background (diagonal) + HTML copy overlay. The image scales
   proportionally and never crops, so it is mobile-safe at every width. */
/* 2026-09-02: CLEAN PLATE + LIVE HTML COPY (job 20260902-091440_dropin_87a54).
   Replaces the baked-text banner: that copy could not reflow and shrank to unreadable on a
   phone. The plate keeps the left ~40% light, so the headline sits there on desktop and the
   art stays visible to its right. On mobile the plate moves behind a light scrim and the copy
   stacks full width — text stays crisp at every size because it is real text. */
html body .ks-hero{
  background-image:url('/assets/images/keys-hero-clean.png') !important;
  background-size:cover !important; background-position:78% center !important;
  background-repeat:no-repeat !important; background-color:#f4f5f3 !important;
  min-height:clamp(320px,30vw,460px) !important;
  display:flex !important; align-items:center !important; padding:0 !important; position:relative;
}
html body .ks-hero::before{ display:none !important; }
.ks-hero-inner{ position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto;
  padding:40px 48px; }
.ks-hero-copy{ max-width:560px; }
.ks-hero-title{ margin:0 0 14px; color:var(--ks-ink); font-weight:700; text-transform:uppercase;
  line-height:1.04; font-size:clamp(28px,4.2vw,54px); }
.ks-hero-accent{ color:var(--ks-green); }
.ks-hero-sub{ margin:0 0 24px; color:#3a3f38; font-size:clamp(14px,1.5vw,18px); line-height:1.5;
  max-width:440px; }
.ks-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.ks-hero-cta .btn{ padding:14px 30px; font-size:15px; font-weight:700; letter-spacing:.5px; }

/* Phone: art recedes behind a light scrim so the real text stays readable. */
@media (max-width:768px){
  html body .ks-hero{ background-position:72% center !important; min-height:0 !important; }
  html body .ks-hero::after{ content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(246,247,245,.96) 0%, rgba(246,247,245,.88) 55%, rgba(246,247,245,.55) 100%); }
  .ks-hero-inner{ padding:30px 20px; }
  .ks-hero-copy{ max-width:100%; }
  .ks-hero-cta .btn{ flex:1 1 auto; text-align:center; }
}

/* 2026-09-01: the header logo was too small at 72px for the Keys ~1.4:1 mark. Bump on
   desktop. !important beats the non-important inline 72px rule in header.php; the mobile
   media-query rules (also !important, later in source order) still win, so the phone logo
   stays compact. max-width:none removes theme.css's 180px width cap so height drives it. */
.site-header .logo img{ max-height:104px !important; max-width:none !important;
  width:auto !important; height:auto !important; }

/* 2026-09-07: BAKED BANNER (supersedes the 2026-09-02 clean-plate rule above).
   Brad supplied a new hero render with the headline, subhead and SHOP NOW button painted
   into the artwork, and directed it be deployed as-is. The live HTML copy layer is therefore
   hidden — leaving it visible would render "Gear You Can Trust" twice, overlapping.

   Sizing: the banner is 2000x750 (8:3). The hero's height is driven by `aspect-ratio` and
   the image is laid in at `100% auto`, so the full frame is always visible and the baked
   headline and button can never be cropped at any viewport width. The previous rule used
   `cover` + `min-height:clamp(320px,30vw,460px)`, which crops vertically — harmless for a
   text-free plate, but it would have cut the headline off above ~1900px wide.

   KNOWN TRADEOFF, accepted by Brad: baked copy cannot reflow, so on a phone the headline
   and subhead scale down with the image rather than staying at a readable size. This is the
   defect the 2026-09-02 clean plate was built to fix. It returns until the text-free plate
   arrives — spec and request in
   2adata/assets/design-handoffs/keys-gun-shop/HERO_REPLACEMENT_REQUEST_20260907.md

   ASSET NOTE: keys-hero-banner-20260907.webp is a lossy 2000x750 client-side transcode of
   the supplied comp, not a production master, and it is under the 2560x962 the hero wants.
   Replace it with the clean plate when that lands. The prior plate is preserved at
   keys-hero-clean.png (+ .bak-20260907-preswap); reverting is this block plus the copy rule.
*/
html body .ks-hero{
  background-image:url('/assets/images/keys-hero-banner-20260907.webp') !important;
  background-size:100% auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-color:#f4f5f3 !important;
  min-height:0 !important;
  aspect-ratio:8 / 3;
  padding:0 !important;
  position:relative;
}
html body .ks-hero::before,
html body .ks-hero::after{ display:none !important; }

/* The copy is in the artwork now. Kept in the markup and hidden here so that deleting one
   rule restores the 2026-09-02 arrangement in full. */
html body .ks-hero .ks-hero-copy{ display:none !important; }
html body .ks-hero .ks-hero-inner{ padding:0 !important; }

/* The painted SHOP NOW button is not a control. The whole banner links to firearms, which is
   what the 2026-09-01 banner build did before the clean plate replaced it. */
html body .ks-hero .ks-hero-link{ position:absolute; inset:0; z-index:3; display:block; }

@media (max-width:768px){
  /* The <=768px scrim above exists to keep live HTML text readable over the plate. There is
     no live text now, so the scrim would only wash out the artwork. */
  html body .ks-hero{ background-position:center top !important; aspect-ratio:8 / 3; }
  html body .ks-hero::after{ display:none !important; }
  html body .ks-hero .ks-hero-inner{ padding:0 !important; }
}