/**
 * GUN CLUB HQ — design system
 * =============================================================================
 * Gun Dog Armory DBA "Gun Club HQ". Tenant-owned. Loaded LAST in <head> so it
 * wins the cascade over the TheGunDock platform sheets (theme.min.css,
 * professional-fixes.min.css, product-page.css) without editing them.
 *
 * WHY THIS FILE EXISTS
 * The platform ships ~128KB of CSS built for TheGunDock, and the page templates
 * carry ~180 hardcoded hex literals — including TheGunDock's own #0066CC,
 * #C41E3A and #2C3E50. The previous tenant layer (gdaoc-theme.css) fought that
 * cascade selector-by-selector and lost wherever it didn't explicitly reach.
 * This file replaces it with a token system: one variable per decision, so a
 * brand change is an edit here rather than a hunt through 2,756 PHP files.
 *
 * THE STRUCTURAL IDEA — "the counter"
 * Gun Club HQ cannot use the category-standard product card. The standard card
 * carries image + price + compare-at + star rating + add-to-cart; this catalog
 * has no public price on ~49% of 430,975 SKUs (manufacturer MAP policy), no
 * ratings, and no cart (browse-only). Building the template means designing
 * around holes. So the layout is built on what the business actually does:
 * help someone find one item among 430,975, then start a conversation.
 *   - search replaces the rotating hero carousel
 *   - availability replaces price as the loud element
 *   - "how this works" sits high on the page, not buried in a footer link
 *
 * TYPE — the counters set the face
 * The logo wordmark is condensed and heavy with hard RECTANGULAR counters and
 * squared terminals. Big Shoulders Display is the free face carrying all three
 * at once. TheGunDock uses Roboto Condensed 900 — condensed too, but with
 * rounded/oval counters. Counter shape is the differentiator; do not swap the
 * display face for Oswald/Impact/Roboto Condensed without re-reading this.
 *
 * PALETTE — unchanged from the logo, deliberately
 * The brand designer carried the scheme across from Gun Dog Armory so the
 * rebrand didn't need a new colour system. Charcoal + orange only.
 * =============================================================================
 */

/* ==========================================================================
   01 — TOKENS
   ========================================================================== */
:root {
    /* --- Brand (straight off the logo) --- */
    --gc-ink:          #22262A;   /* logo charcoal — headings, dark bands, footer */
    --gc-ink-2:        #2E3338;   /* raised dark surface */
    --gc-ink-3:        #3A4148;   /* dark hairlines, inactive chips */
    --gc-orange:       #F26A1B;   /* logo orange — THE accent. Actions + state only */
    --gc-orange-deep:  #C6520D;   /* hover/active */
    --gc-orange-soft:  rgba(242, 106, 27, .08);

    /* ACCESSIBILITY — orange used as TEXT on a light ground.
       Measured: #F26A1B on --gc-bone is 2.74:1, which fails WCAG AA outright.
       This darker shade is 4.67:1 and passes. The brand orange is untouched and
       still used at full strength for backgrounds, keylines, borders, and for
       text on the charcoal bands (where #F26A1B measures 4.97:1 and passes).
       Rule of thumb: orange on light = --gc-orange-text, everything else = --gc-orange. */
    --gc-orange-text:  #B84A0A;

    /* --- Ground. Bone, NOT #FFF: TheGunDock is pure white --- */
    --gc-bone:         #F4F2ED;   /* page ground */
    --gc-bone-2:       #EAE7E0;   /* alternating band */
    --gc-card:         #FFFFFF;   /* product tiles — catalog photography is on white */

    /* --- Line + text --- */
    --gc-line:         #DCD8D0;
    --gc-line-2:       #C9C4BA;
    /* Text greys darkened to clear WCAG AA on the bone ground: the previous
       #6B7075 measured 4.47:1 and #8A8F94 only 2.92:1. These are 5.03:1 and
       4.67:1. --gc-dim carries the mono spec labels, which are 10px, so it has
       to pass as normal text rather than large. */
    --gc-text:         #22262A;
    --gc-muted:        #63686D;
    --gc-dim:          #686D72;
    --gc-on-dark:      #F2F4F6;
    --gc-on-dark-mute: #A9B0B6;

    /* --- Availability states. Earthy greens, NOT TheGunDock's #065F46/#27AE60.
           These are the ONLY non-orange accents, and they appear on state
           chips exclusively — never on a button. --- */
    --gc-stock:        #527B1A;
    --gc-low:          #A36306;
    --gc-special:      #63686D;
    --gc-unknown-bg:   #EAE7E0;
    --gc-unknown-fg:   #63686D;

    /* --- Type --- */
    /* 'BigShouldersMetric' is Arial re-scaled to Big Shoulders' measured
       metrics (see fonts.css). It sits directly behind the real face so a page
       that renders before the webfont arrives still lays out identically.
       'Arial Narrow' was removed: it is not present on many Windows installs
       and silently resolves to full-width Arial, which is what overflowed. */
    --gc-display: 'Big Shoulders Display', 'BigShouldersMetric', 'Oswald', Impact, sans-serif;
    --gc-ui:      'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --gc-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* --- Space --- */
    --gc-gutter:  clamp(18px, 4.5vw, 56px);
    --gc-maxw:    1280px;
    --gc-band:    clamp(18px, 2.4vw, 34px);  /* vertical section rhythm — tightened twice, 2026-07-28 */

    /* --- Form --- */
    --gc-radius:    3px;    /* restrained. Not pills, not sharp-zero like the platform */
    --gc-radius-sm: 2px;
    --gc-shadow:    0 6px 22px rgba(34, 38, 42, .10);
    --gc-shadow-lg: 0 14px 40px rgba(34, 38, 42, .16);
}

/* ==========================================================================
   02 — BASE
   ========================================================================== */
body.gc,
body {
    background: var(--gc-bone);
    color: var(--gc-text);
    font-family: var(--gc-ui);
    -webkit-font-smoothing: antialiased;
}

.gc-wrap {
    max-width: var(--gc-maxw);
    margin: 0 auto;
    padding-left: var(--gc-gutter);
    padding-right: var(--gc-gutter);
}

/* Display type. Uppercase is intrinsic to the logo lockup — the wordmark has no
   lowercase, so headings follow it. */
.gc-display,
.gc-h1, .gc-h2, .gc-h3 {
    font-family: var(--gc-display);
    font-weight: 800;
    line-height: .98;
    letter-spacing: .005em;
    text-transform: uppercase;
    margin: 0;
    color: var(--gc-text);
}
.gc-h1 { font-size: clamp(38px, 6.4vw, 76px); font-weight: 900; }
.gc-h2 { font-size: clamp(26px, 3.6vw, 40px); }
.gc-h3 { font-size: clamp(19px, 2.2vw, 25px); }

/* The mono eyebrow is the second signature after the orange. TheGunDock never
   uses a mono register anywhere — it reads technical and it's cheap to repeat. */
.gc-eyebrow {
    display: block;
    font-family: var(--gc-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gc-orange-text);
    margin: 0 0 10px;
}
.gc-eyebrow--quiet { color: var(--gc-dim); }
/* On the charcoal bands the brand orange measures 4.97:1 and passes, so the
   eyebrow returns to full strength there instead of staying darkened. */
.gc-section--dark .gc-eyebrow,
.gc-counter .gc-eyebrow,
.gc-footer .gc-eyebrow { color: var(--gc-orange); }

.gc-lead  { color: var(--gc-muted); font-size: clamp(15px, 1.6vw, 17px); max-width: 66ch; }
.gc-rule  { height: 4px; width: 60px; background: var(--gc-orange); border: 0; margin: 14px 0 0; }

/* Section bands. Alternating bone / white / charcoal is the page rhythm —
   the category convention is white → white → light-grey → white. */
.gc-section        { padding: var(--gc-band) 0; }
.gc-section--alt   { background: var(--gc-bone-2); }
.gc-section--white { background: var(--gc-card); }
.gc-section--dark  { background: var(--gc-ink); color: var(--gc-on-dark); }
.gc-section--dark .gc-h1,
.gc-section--dark .gc-h2,
.gc-section--dark .gc-h3 { color: #fff; }
.gc-section--dark .gc-lead { color: var(--gc-on-dark-mute); }

/* ==========================================================================
   03 — BUTTONS
   Orange owns every action. Nothing else is ever a primary button.
   ========================================================================== */
.gc-btn {
    display: inline-block;
    font-family: var(--gc-display);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: var(--gc-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gc-btn--primary { background: var(--gc-orange); color: var(--gc-ink); border-color: var(--gc-orange); }
.gc-btn--primary:hover,
.gc-btn--primary:focus-visible { background: var(--gc-orange-deep); border-color: var(--gc-orange-deep); color: #fff; }

.gc-btn--ghost { background: transparent; color: var(--gc-ink); border-color: var(--gc-ink); }
.gc-btn--ghost:hover,
.gc-btn--ghost:focus-visible { background: var(--gc-ink); color: #fff; }

.gc-btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.gc-btn--on-dark:hover { background: #fff; color: var(--gc-ink); border-color: #fff; }

.gc-btn--block { display: block; width: 100%; }
.gc-btn--lg    { font-size: 19px; padding: 15px 28px; }
.gc-btn--sm    { font-size: 14px; padding: 9px 16px; }

/* ==========================================================================
   04 — AVAILABILITY CHIP
   The component the whole catalog hangs on. Four HONEST states.
   `--unknown` is the pre-launch default and must stay the default: today
   stock_inventory has 0 rows and the 114,956 products.in_stock flags came over
   in the clone snapshot, backed by nothing. Printing "IN STOCK · SHIPS TODAY"
   off that data would be a claim to customers we cannot stand behind.
   When distributor feeds land, the same component starts showing the others.
   ========================================================================== */
.gc-avail {
    display: inline-block;
    font-family: var(--gc-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: var(--gc-radius-sm);
    white-space: nowrap;
    border: 1px solid transparent;
}
.gc-avail--stock   { background: var(--gc-stock);   color: #fff; }
.gc-avail--low     { background: var(--gc-low);     color: #fff; }
.gc-avail--special { background: var(--gc-special); color: #fff; }
.gc-avail--unknown { background: var(--gc-unknown-bg); color: var(--gc-unknown-fg); border-color: var(--gc-line-2); }

/* ==========================================================================
   05 — HEADER
   Thin charcoal utility strip + search-forward main bar + flat nav.
   No left sidebar category tree — that device is the category tell.
   ========================================================================== */
.gc-utility {
    background: var(--gc-ink);
    color: var(--gc-on-dark-mute);
    font-family: var(--gc-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.gc-utility .gc-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.gc-utility a { color: inherit; text-decoration: none; }
.gc-utility a:hover { color: var(--gc-orange); }
.gc-utility strong { color: var(--gc-orange); font-weight: 700; }

.gc-header { background: var(--gc-card); border-bottom: 1px solid var(--gc-line); }
.gc-header__bar { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); padding-top: 14px; padding-bottom: 14px; }
.gc-header__brand { flex: none; display: block; }
.gc-header__brand img { display: block; max-height: 52px; width: auto; }

/* Square search field with a 2px ink border — the category default is a
   rounded pill with a coloured magnifier button. */
.gc-search { flex: 1; min-width: 0; display: flex; border: 2px solid var(--gc-ink); border-radius: var(--gc-radius-sm); background: #fff; overflow: hidden; }
.gc-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; padding: 11px 14px;
    font-family: var(--gc-ui); font-size: 15px; color: var(--gc-text); background: transparent;
}
.gc-search input::placeholder { color: var(--gc-dim); }
.gc-search button {
    flex: none; border: 0; cursor: pointer; background: var(--gc-orange); color: var(--gc-ink);
    font-family: var(--gc-display); font-weight: 800; font-size: 16px; text-transform: uppercase;
    letter-spacing: .03em; padding: 0 22px;
}
.gc-search button:hover { background: var(--gc-orange-deep); }

.gc-header__actions { flex: none; display: flex; align-items: center; gap: 14px; }

.gc-nav { border-top: 1px solid var(--gc-line); background: var(--gc-card); }
.gc-nav .gc-wrap { display: flex; gap: clamp(14px, 2.6vw, 32px); overflow-x: auto; scrollbar-width: none; }
.gc-nav .gc-wrap::-webkit-scrollbar { display: none; }
.gc-nav a {
    font-family: var(--gc-display); font-weight: 700; font-size: 16px; text-transform: uppercase;
    letter-spacing: .02em; color: var(--gc-text); text-decoration: none;
    padding: 12px 0 9px; border-bottom: 3px solid transparent; white-space: nowrap;
}
.gc-nav a:hover { color: var(--gc-orange-text); }
.gc-nav a[aria-current="page"], .gc-nav a.is-active { border-bottom-color: var(--gc-orange); }

/* ==========================================================================
   06 — THE COUNTER (search hero)
   Replaces the rotating carousel. With 430,975 SKUs and no public prices, the
   most useful thing on the homepage is finding one item — so search IS the
   hero, and catalog depth is the pitch instead of a discount.
   ========================================================================== */
.gc-counter { background: var(--gc-ink); color: #fff; padding: clamp(22px, 3vw, 40px) 0 clamp(18px, 2.2vw, 28px); }
.gc-counter__title { font-family: var(--gc-display); font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(34px, 6.4vw, 72px); margin: 0; color: #fff; }
.gc-counter__title em { font-style: normal; color: var(--gc-orange); }
.gc-counter__sub { color: var(--gc-on-dark-mute); margin: 14px 0 0; font-size: clamp(15px, 1.7vw, 17px); max-width: 56ch; }

.gc-bigsearch { display: flex; margin-top: clamp(14px, 2vw, 22px); border: 3px solid var(--gc-orange); border-radius: var(--gc-radius-sm); background: #fff; overflow: hidden; }
.gc-bigsearch input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: clamp(13px, 1.8vw, 18px) clamp(14px, 2vw, 20px);
    font-family: var(--gc-ui); font-size: clamp(15px, 1.8vw, 18px); color: var(--gc-text);
}
.gc-bigsearch input::placeholder { color: var(--gc-dim); }
.gc-bigsearch button {
    flex: none; border: 0; cursor: pointer; background: var(--gc-orange); color: var(--gc-ink);
    font-family: var(--gc-display); font-weight: 800; font-size: clamp(16px, 2vw, 20px);
    text-transform: uppercase; letter-spacing: .03em; padding: 0 clamp(18px, 3vw, 34px);
}
.gc-bigsearch button:hover { background: var(--gc-orange-deep); }

.gc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.gc-chips a {
    font-family: var(--gc-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--gc-ink-3); color: var(--gc-on-dark-mute); text-decoration: none;
    padding: 6px 11px; border-radius: var(--gc-radius-sm);
}
.gc-chips a:hover { border-color: var(--gc-orange); color: var(--gc-orange); }

/* Catalog depth as the headline number */
.gc-stats { display: flex; flex-wrap: wrap; margin-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--gc-ink-3); padding-top: 18px; }
.gc-stats div { flex: 1 1 150px; border-left: 1px solid var(--gc-ink-3); padding: 0 18px; }
.gc-stats div:first-child { border-left: 0; padding-left: 0; }
.gc-stats b { display: block; font-family: var(--gc-display); font-weight: 900; font-size: clamp(24px, 3.4vw, 36px); color: var(--gc-orange); line-height: 1; }
.gc-stats span { font-family: var(--gc-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8A9197; }

/* ==========================================================================
   07 — HOW THIS WORKS
   Sits high on the page, not in a footer link. A first-time visitor sees no
   prices and assumes the site is broken; explaining it in section two turns
   the oddity into the pitch. (Lifted from Silencer Shop, who solve the same
   problem for NFA paperwork.)
   ========================================================================== */
.gc-steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--gc-line); border-radius: var(--gc-radius); overflow: hidden; background: var(--gc-card); }
.gc-steps > div { padding: clamp(20px, 2.6vw, 30px); border-left: 1px solid var(--gc-line); }
.gc-steps > div:first-child { border-left: 0; }
.gc-steps--2 { grid-template-columns: repeat(2, 1fr); }  /* band without the financing tile */
.gc-steps .gc-steps__n { font-family: var(--gc-mono); font-size: 11px; letter-spacing: .2em; color: var(--gc-orange-text); }
.gc-steps h3 { font-family: var(--gc-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); text-transform: uppercase; margin: 6px 0 5px; }
.gc-steps p { margin: 0; font-size: 14.5px; color: var(--gc-muted); }

/* ==========================================================================
   08 — EDITORIAL CATEGORY BLOCKS
   Asymmetric on purpose. An even NxN grid of identical tiles is the category
   device (and what this site ran before). Varying block size lets photography
   carry weight and makes the page read composed rather than stamped.
   ========================================================================== */
.gc-edit { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: clamp(120px, 14vw, 168px); gap: 10px; }
.gc-edit__cell {
    position: relative; display: flex; align-items: flex-end; overflow: hidden;
    border-radius: var(--gc-radius); background: var(--gc-ink); color: #fff;
    text-decoration: none; padding: 16px;
}
.gc-edit__cell:first-child { grid-row: span 2; }
.gc-edit__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform .4s ease, opacity .25s ease; }
.gc-edit__cell:hover img { transform: scale(1.045); opacity: .74; }
.gc-edit__cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,38,42,.15) 30%, rgba(34,38,42,.86)); }
.gc-edit__cell > * { position: relative; z-index: 1; }
.gc-edit__name { font-family: var(--gc-display); font-weight: 800; font-size: clamp(18px, 2.2vw, 24px); text-transform: uppercase; }
.gc-edit__cell:first-child .gc-edit__name { font-size: clamp(24px, 3.4vw, 38px); }
.gc-edit__kicker { position: absolute; top: 14px; left: 16px; z-index: 1; font-family: var(--gc-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-orange); }

/* ==========================================================================
   09 — PRODUCT CARD
   Deliberately larger and quieter than the category norm. With no price, no
   compare-at and no star rating to cram in, the card can breathe — 3–4 across
   instead of 5–6, bigger photography. The absence is the design opportunity.
   ========================================================================== */
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.gc-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--gc-card); border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius); text-decoration: none; color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gc-card:hover { border-color: var(--gc-orange); box-shadow: var(--gc-shadow); transform: translateY(-2px); }
.gc-card__shot { position: relative; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--gc-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gc-card__shot img { max-width: 88%; max-height: 88%; width: auto; height: auto; object-fit: contain; }
.gc-card__avail { position: absolute; top: 10px; left: 10px; z-index: 2; }
.gc-card__body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 14px 15px 15px; }
.gc-card__brand { font-family: var(--gc-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-dim); }
.gc-card__name { font-weight: 600; font-size: 14.5px; line-height: 1.35; margin: 0; color: var(--gc-text); }
.gc-card__foot { margin-top: auto; display: flex; gap: 8px; }
.gc-card__foot .gc-btn { flex: 1; font-size: 14px; padding: 9px 10px; }
.gc-card__add { flex: 0 0 44px !important; }

/* ==========================================================================
   10 — PRODUCT PAGE
   The quote block is the hero, carrying the visual weight a price normally
   would. Everything needed to act sits above the fold without printing a
   number MAP policy forbids.
   ========================================================================== */
.gc-pdp { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.gc-pdp__gallery { background: var(--gc-card); border: 1px solid var(--gc-line); border-radius: var(--gc-radius); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gc-pdp__gallery img { max-width: 92%; max-height: 92%; object-fit: contain; }
.gc-pdp__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 9px; }
.gc-pdp__thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--gc-line); border-radius: var(--gc-radius-sm); padding: 4px; cursor: pointer; }
.gc-pdp__thumbs img.is-active { border-color: var(--gc-orange); border-width: 2px; }

.gc-buybox { background: var(--gc-card); border: 1px solid var(--gc-line); border-radius: var(--gc-radius); padding: clamp(18px, 2.4vw, 26px); }
.gc-buybox__title { font-family: var(--gc-display); font-weight: 800; font-size: clamp(21px, 2.8vw, 30px); text-transform: uppercase; line-height: 1; margin: 7px 0 0; }
.gc-buybox__meta { margin-top: 11px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gc-buybox__sku { font-family: var(--gc-mono); font-size: 10.5px; color: var(--gc-dim); letter-spacing: .08em; }

.gc-quote { background: var(--gc-bone); border-left: 4px solid var(--gc-orange); border-radius: var(--gc-radius-sm); padding: 14px 16px; margin: 16px 0; }
.gc-quote__big { font-family: var(--gc-display); font-weight: 800; font-size: clamp(18px, 2.2vw, 23px); text-transform: uppercase; line-height: 1.05; }
.gc-quote p { margin: 6px 0 0; font-size: 13.5px; color: var(--gc-muted); }

.gc-trust { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 15px; font-size: 12.5px; color: var(--gc-muted); }
.gc-trust span::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--gc-orange); margin-right: 7px; vertical-align: 1px; }

.gc-specs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 12px; }
.gc-specs td { padding: 9px 0; border-top: 1px solid var(--gc-line); vertical-align: top; }
.gc-specs td:first-child { font-family: var(--gc-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-dim); width: 44%; }

/* ==========================================================================
   11 — ANSWERS (inline FAQ)
   Real questions on the page rather than a link to a FAQ nobody clicks.
   ========================================================================== */
.gc-answers { border-top: 1px solid var(--gc-line); }
.gc-answers details { border-bottom: 1px solid var(--gc-line); }
.gc-answers summary { cursor: pointer; list-style: none; padding: 16px 0; font-family: var(--gc-display); font-weight: 700; font-size: clamp(17px, 1.9vw, 21px); text-transform: uppercase; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.gc-answers summary::-webkit-details-marker { display: none; }
.gc-answers summary::after { content: "+"; font-family: var(--gc-ui); font-weight: 400; font-size: 24px; color: var(--gc-orange-text); line-height: 1; flex: none; }
.gc-answers details[open] summary::after { content: "\2013"; }
.gc-answers p { margin: 0 0 16px; font-size: 15px; color: var(--gc-muted); max-width: 74ch; }

/* ==========================================================================
   12 — FOOTER
   ========================================================================== */
.gc-footer { background: var(--gc-ink); color: var(--gc-on-dark-mute); padding: clamp(36px, 5vw, 60px) 0 28px; }
.gc-footer h4 { font-family: var(--gc-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gc-orange); margin: 0 0 12px; font-weight: 700; }
.gc-footer a { color: var(--gc-on-dark-mute); text-decoration: none; }
.gc-footer a:hover { color: #fff; }
.gc-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.gc-footer__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--gc-ink-3); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   13 — RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .gc-pdp   { grid-template-columns: 1fr; }
    .gc-steps { grid-template-columns: 1fr; }
    .gc-steps > div { border-left: 0; border-top: 1px solid var(--gc-line); }
    .gc-steps > div:first-child { border-top: 0; }
    .gc-edit  { grid-template-columns: 1fr 1fr; }
    .gc-edit__cell:first-child { grid-row: span 1; grid-column: span 2; }
}
@media (max-width: 700px) {
    .gc-header__bar { flex-wrap: wrap; }
    .gc-search { order: 3; flex-basis: 100%; }
    .gc-utility .gc-wrap { justify-content: center; text-align: center; font-size: 9.5px; }
    .gc-stats div { flex-basis: 50%; border-left: 0; padding-left: 0; margin-bottom: 14px; }
    .gc-card__shot { aspect-ratio: 1; }
}
@media (max-width: 480px) {
    .gc-edit { grid-template-columns: 1fr; }
    .gc-edit__cell:first-child { grid-column: span 1; }
}

/* ==========================================================================
   14 — PLATFORM NEUTRALISERS
   The platform sheets and template <style> blocks hardcode TheGunDock's
   palette. These rules stop the worst of it bleeding through on pages not yet
   converted. This is a safety net, NOT the fix — the fix is removing the
   literals at source. Every selector here should eventually become unnecessary.
   ========================================================================== */
a { color: var(--gc-orange-text); }
a:hover { color: var(--gc-orange-deep); }

/* TheGunDock blue #0066CC / #3B82F6 and red #C41E3A appear as hardcoded button
   and link colours across the platform sheets. */
.btn-primary, .button-primary, .add-to-cart, .btn.btn-primary {
    background: var(--gc-orange) !important;
    border-color: var(--gc-orange) !important;
    color: var(--gc-ink) !important;
}
.btn-primary:hover, .button-primary:hover, .add-to-cart:hover {
    background: var(--gc-orange-deep) !important;
    border-color: var(--gc-orange-deep) !important;
}

/* Kill the platform's Roboto Condensed display register wherever it leaks. */
h1, h2, h3, .section-title, .page-title {
    font-family: var(--gc-display);
    text-transform: uppercase;
    letter-spacing: .005em;
}

/* Accessibility: the orange is a mid-tone; ensure focus is always visible. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--gc-orange);
    outline-offset: 2px;
}

/* Respect reduced motion — the editorial tiles animate on hover. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .gc-edit__cell:hover img { transform: none; }
}

/* ==========================================================================
   15 — PLATFORM COMPONENT SKINS
   The platform's .product-card markup is emitted by index.php, category.php,
   search.php, manufacturer.php and caliber.php. Rather than rewrite that markup
   in five templates — which a resync from thegundock/live would revert — we skin
   the platform class here. Every catalog surface picks up the Gun Club HQ card
   at once, and the change lives entirely in a tenant-owned file.
   ========================================================================== */

/* Fewer, larger cards. The category norm is 5–6 dense cards a row carrying
   price + compare-at + star rating. We have none of those, so the card gets to
   breathe instead of showing empty slots. */
.products-grid,
.products-grid-4col {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important;
    gap: clamp(12px, 1.6vw, 20px) !important;
}

.product-card {
    background: var(--gc-card) !important;
    border: 1px solid var(--gc-line) !important;
    border-radius: var(--gc-radius) !important;
    overflow: hidden;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.product-card:hover {
    border-color: var(--gc-orange) !important;
    box-shadow: var(--gc-shadow) !important;
    transform: translateY(-2px);
}
.product-card > a { text-decoration: none; color: inherit; display: block; }

/* Catalog photography ships on white — keep the tile white so it doesn't halo. */
.product-card .product-image {
    background: #fff !important;
    border-bottom: 1px solid var(--gc-line);
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
}
.product-card .product-image img {
    max-width: 100%; max-height: 100%;
    width: auto !important; height: auto !important;
    object-fit: contain;
}

.product-card .product-info { padding: 14px 15px 15px !important; }

.product-card .product-brand {
    font-family: var(--gc-mono) !important;
    font-size: 10px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gc-dim) !important;
    margin: 0 0 6px !important;
    order: -1;
}
.product-card .product-title {
    font-family: var(--gc-ui) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--gc-text) !important;
    margin: 0 0 8px !important;
}
.product-card .product-meta-info,
.product-card .product-model,
.product-card .product-upc {
    font-family: var(--gc-mono) !important;
    font-size: 10px !important;
    letter-spacing: .06em;
    color: var(--gc-dim) !important;
}

/* THE PRICE SLOT — this is the whole design problem in one component.
   ~49% of the catalog is MAP-restricted and the store is browse-only, so this
   slot is usually "no price". Instead of leaving a hole where competitors put a
   number, it carries the availability + quote call to action. */
.product-card .product-price {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid var(--gc-line);
    font-family: var(--gc-display) !important;
    font-size: 18px !important;
    font-weight: 800;
    color: var(--gc-text) !important;
}


/* MAP chip — mono, quiet, explanatory. Not a discount badge. */
.product-card .map-badge,
.map-badge {
    display: inline-block;
    font-family: var(--gc-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--gc-bone-2);
    color: var(--gc-muted);
    border: 1px solid var(--gc-line-2);
    border-radius: var(--gc-radius-sm);
    padding: 3px 7px;
    vertical-align: middle;
}

/* Section headings on catalog pages */
.products-section .section-title,
.gd-section-title {
    font-family: var(--gc-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--gc-text) !important;
}

/* Retire the old boutique-layer hero if any template still emits it. */
.gd-hero { display: none !important; }

/* Card families used by the other catalog surfaces. manufacturer.php emits
   .mfg-prod-card / .mfg-allprod-card, and category.php / caliber.php emit
   .category-card. Their colours were tokenised in the templates already; this
   normalises the geometry and type so every card on the site reads as one
   component rather than three near-misses. */
.category-card,
.mfg-page .mfg-prod-card,
.mfg-page .mfg-allprod-card {
    background: var(--gc-card) !important;
    border: 1px solid var(--gc-line) !important;
    border-radius: var(--gc-radius) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.category-card:hover,
.mfg-page .mfg-prod-card:hover,
.mfg-page .mfg-allprod-card:hover {
    border-color: var(--gc-orange) !important;
    box-shadow: var(--gc-shadow) !important;
    transform: translateY(-2px) !important;
}
.category-card h3,
.mfg-page .mfg-prod-card-body h3 {
    font-family: var(--gc-ui) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    color: var(--gc-text) !important;
}
.category-card .product-count {
    font-family: var(--gc-mono) !important;
    font-size: 10px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gc-dim) !important;
}
/* Stock/price lines on the manufacturer card follow the availability language. */
.mfg-page .mfg-prod-card-body .price,
.mfg-page .mfg-prod-card-body .stock {
    font-family: var(--gc-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gc-muted) !important;
}

/* --- Platform header, reskinned ------------------------------------------
   The template's own <style> block carries 282 !important declarations against
   .header-top / .header-main / .main-nav, so these have to match that weight to
   win. Retiring those inline rules is a follow-up; the note in section 14 applies. */
.site-header .header-top {
    background: var(--gc-ink) !important;
    border-bottom: 0 !important;
    color: var(--gc-on-dark-mute) !important;
    padding: 0 !important;
}
.site-header .header-top .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.site-header .header-top .contact-info,
.site-header .header-top .header-links {
    display: flex !important;
    align-items: center;
    gap: clamp(10px, 2vw, 22px);
    flex-wrap: wrap;
    font-family: var(--gc-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
.site-header .header-top a,
.site-header .header-top span {
    color: var(--gc-on-dark-mute) !important;
    text-decoration: none !important;
    font-family: var(--gc-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
.site-header .header-top a:hover { color: var(--gc-orange) !important; }
.site-header .header-top strong { color: var(--gc-orange) !important; font-weight: 700 !important; }

/* Main bar: white, generous, square search with a 2px ink border. The category
   default is a rounded pill with a coloured magnifier button. */
.site-header .header-main {
    background: var(--gc-card) !important;
    border-bottom: 1px solid var(--gc-line) !important;
}
.site-header .search-bar input,
.site-header .search-bar input[type="text"],
.site-header .search-bar input[type="search"] {
    border: 2px solid var(--gc-ink) !important;
    border-right: 0 !important;
    border-radius: var(--gc-radius-sm) 0 0 var(--gc-radius-sm) !important;
    font-family: var(--gc-ui) !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    background: #fff !important;
    color: var(--gc-text) !important;
}
.site-header .search-bar button {
    background: var(--gc-orange) !important;
    border: 2px solid var(--gc-orange) !important;
    border-radius: 0 var(--gc-radius-sm) var(--gc-radius-sm) 0 !important;
    color: var(--gc-ink) !important;
    font-family: var(--gc-display) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    padding: 0 20px !important;
}
.site-header .search-bar button:hover {
    background: var(--gc-orange-deep) !important;
    border-color: var(--gc-orange-deep) !important;
}

/* Flat nav with an orange underline on the active item — no sidebar tree. */
.site-header .main-nav {
    background: var(--gc-card) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--gc-line) !important;
}
.site-header .main-nav > ul > li > a {
    font-family: var(--gc-display) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    color: var(--gc-text) !important;
    border-bottom: 3px solid transparent !important;
}
.site-header .main-nav > ul > li > a:hover { color: var(--gc-orange-text) !important; }

/* REGRESSION FIX 2026-07-28 — the nav rendered white-on-white and was invisible.
   The platform's chrome CSS sets `.main-nav a { color:#ffffff !important }`
   because its nav bar was dark charcoal. This file overrode the BACKGROUND to
   white (.site-header .main-nav out-specifies .main-nav) but the matching text
   rule used a strict `> ul > li > a` chain that does not match the real markup,
   so the white text survived on a now-white bar.
   Matching the platform's own selector shape fixes it for every link in the nav,
   whatever the nesting. */
.site-header .main-nav a,
.site-header .main-nav a:link,
.site-header .main-nav a:visited,
.site-header .main-nav a:active {
    color: var(--gc-text) !important;
    font-family: var(--gc-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
}
.site-header .main-nav a:hover,
.site-header .main-nav a:focus { color: var(--gc-orange-text) !important; }

/* Dropdown panels sit on white, so their links need the dark treatment too. */
.site-header .main-nav .dropdown-menu a,
.site-header .main-nav .dropdown-menu a:link,
.site-header .main-nav .dropdown-menu a:visited {
    color: var(--gc-text) !important;
    font-family: var(--gc-ui) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.site-header .main-nav > ul > li:hover > a,
.site-header .main-nav > ul > li.active > a { border-bottom-color: var(--gc-orange) !important; }

/* Dropdown panels */
.site-header .main-nav .dropdown-menu {
    background: var(--gc-card) !important;
    border: 1px solid var(--gc-line) !important;
    border-top: 3px solid var(--gc-orange) !important;
    border-radius: 0 0 var(--gc-radius) var(--gc-radius) !important;
    box-shadow: var(--gc-shadow-lg) !important;
}
.site-header .main-nav .dropdown-menu a { font-family: var(--gc-ui) !important; color: var(--gc-text) !important; }
.site-header .main-nav .dropdown-menu a:hover { background: var(--gc-bone) !important; color: var(--gc-orange-text) !important; }

/* --- Product page buy area ------------------------------------------------
   product.php already does the right thing on data honesty: isBrowseOnly()
   suppresses stock and shipping promises, so the price slot renders
   "Ask about availability" instead of a number we're not permitted to publish.
   This makes that slot look like the intended primary action rather than a gap
   where a price failed to load. */

.stock-sku-row,
.product-info-codes,
.product-sku,
.product-code {
    font-family: var(--gc-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--gc-dim) !important;
}

/* Availability chip states, wherever the platform emits them. */
.stock-indicator {
    display: inline-block;
    font-family: var(--gc-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 5px 9px !important;
    border-radius: var(--gc-radius-sm) !important;
    border: 1px solid transparent;
}
.stock-indicator.in-stock     { background: var(--gc-stock) !important;   color: #fff !important; }
.stock-indicator.low-stock    { background: var(--gc-low) !important;     color: #fff !important; }
.stock-indicator.out-of-stock,
.out-of-stock-msg             { background: var(--gc-unknown-bg) !important; color: var(--gc-unknown-fg) !important; border-color: var(--gc-line-2); }

.free-shipping-badge {
    font-family: var(--gc-mono) !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    background: var(--gc-ink) !important;
    color: #fff !important;
    border-radius: var(--gc-radius-sm) !important;
    padding: 5px 9px !important;
}

.product-actions .btn,
.product-actions button,
.product-actions a.button {
    font-family: var(--gc-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    border-radius: var(--gc-radius-sm) !important;
}

.thumbnail-gallery img { border-radius: var(--gc-radius-sm) !important; border: 1px solid var(--gc-line) !important; }
.thumbnail-gallery img.active,
.thumbnail-gallery img:hover { border-color: var(--gc-orange) !important; }

/* --- Footer --------------------------------------------------------------- */
.site-footer, footer.site-footer {
    background: var(--gc-ink) !important;
    color: var(--gc-on-dark-mute) !important;
}
.site-footer a { color: var(--gc-on-dark-mute) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer h3, .site-footer h4, .site-footer .footer-heading {
    font-family: var(--gc-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--gc-orange) !important;
    font-weight: 700 !important;
}



/* Tightening pass 2026-07-28 — the hero's bottom padding was stacking on the next
   section's top padding, leaving ~150px of dead white space. Sections that render
   nothing (an include with no rows to show) now collapse instead of holding
   their padding open. */
.gc-section:empty,
section:empty { padding: 0 !important; margin: 0 !important; }

/* Pull section headings closer to their content. */
.gc-section > .gc-wrap > .gc-eyebrow { margin-bottom: 6px; }
.gc-section > .gc-wrap > .gc-h2 { margin-bottom: 14px; }

/* The featured-products block carried its own generous platform padding. */
.products-section { padding-top: clamp(22px, 3vw, 40px) !important; padding-bottom: clamp(22px, 3vw, 40px) !important; }

/* Ask list removed 2026-07-28 at owner's request. It assumed prices were withheld
   for MAP reasons and would be quoted on request; the real reason they're absent
   is that the store isn't finished. Anything the platform still emits for that
   flow is hidden here rather than by editing platform-master templates, which a
   resync would revert. */
.price-tbd,
.gc-ask-add,
.gc-ask-row,
.gc-ask-fab,
.gc-toast { display: none !important; }

/* With no placeholder in it, an empty price slot shouldn't hold open a border. */
.product-card .product-price:empty { display: none !important; }

/* Second tightening pass: the gap above "Shop by category" was still reading as
   dead space. The section that follows the hero now gets a smaller top padding
   than the general rhythm, since the charcoal hero already provides separation. */
.gc-counter + .gc-section { padding-top: clamp(14px, 1.8vw, 24px); }
.gc-section > .gc-wrap > .gc-eyebrow { margin-bottom: 4px; }
.gc-section > .gc-wrap > .gc-h2 { margin-bottom: 10px; }

/* NAV TYPOGRAPHY 2026-07-28 — the nav read narrow and squished.
   Cause: the platform's .nav-link originally used Roboto Condensed, and the
   rebrand's find-and-replace swapped every Roboto Condensed for var(--gc-display)
   — Big Shoulders Display, which is MORE condensed still. Condensed faces are
   built for headlines; at 15px nav size the counters close up and it reads cramped.
   Nav is functional text, so it gets the UI face (Barlow) at normal width. The
   display face stays where it belongs: headlines, section titles and buttons. */
.site-header .nav-link,
.site-header .nav-link:link,
.site-header .nav-link:visited,
.site-header .nav-link:active,
.site-header .main-nav a,
.site-header .main-nav a:link,
.site-header .main-nav a:visited,
.site-header .main-nav a:active {
    font-family: var(--gc-ui) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding: 12px 22px !important;
    color: var(--gc-text) !important;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .main-nav a:hover,
.site-header .main-nav a:focus {
    color: var(--gc-orange-text) !important;
    background: transparent !important;
}

/* Dropdown items are reading text, not labels — sentence case, no tracking. */
.site-header .main-nav .dropdown-menu a,
.site-header .main-nav .dropdown-menu a:link,
.site-header .main-nav .dropdown-menu a:visited {
    font-family: var(--gc-ui) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 9px 16px !important;
}

/* ==========================================================================
   HOMEPAGE 2026-07 — sections rebuilt from the designer's comp
   (assets/gunclub_hero.png). Layout is hers; tokens are ours.
   ========================================================================== */

/* --- Hero: promise left, bench photo right ------------------------------- */
.gc-hero2 { background: #fff; border-bottom: 1px solid var(--gc-line, #e4e1da); }
.gc-hero2__grid {
    display: grid;
    grid-template-columns: minmax(320px, 5fr) 7fr;
    align-items: center;
    min-height: 440px;
}
.gc-hero2__copy { padding: clamp(28px, 4vw, 56px) clamp(8px, 2vw, 32px) clamp(28px, 4vw, 56px) 0; }
.gc-hero2__eyebrow { color: var(--gc-orange-text); }
.gc-hero2__title {
    font-family: var(--gc-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.9rem, 3.9vw, 3.7rem);
    line-height: .97;
    letter-spacing: .01em;
    color: var(--gc-ink);
    margin: 10px 0 0;
}
.gc-hero2__title em { font-style: normal; color: var(--gc-orange-text); }
@media (min-width: 881px) {
    /* One phrase per line, as in the comp — but only where the column can afford it. */
    .gc-hero2__title { white-space: nowrap; }
}
.gc-hero2__rule {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 14px; color: var(--gc-orange); font-size: 1.25rem; line-height: 1;
}
.gc-hero2__rule::before, .gc-hero2__rule::after {
    content: ""; height: 2px; background: var(--gc-ink); opacity: .18; flex: 0 0 84px;
}
.gc-hero2__rule::after { flex-basis: 34px; }
.gc-hero2__sub { max-width: 42ch; color: var(--gc-dim, #555); font-size: 1.06rem; line-height: 1.55; margin: 0 0 22px; }
.gc-hero2__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.gc-hero2__photo {
    align-self: stretch;
    min-height: 320px;
    background: url('/assets/images/hero-bench.jpg') right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
@media (max-width: 880px) {
    .gc-hero2__grid { grid-template-columns: 1fr; min-height: 0; }
    .gc-hero2__copy { padding: 28px 0 22px; }
    .gc-hero2__photo {
        order: -1; min-height: 200px; border-radius: 8px;
        -webkit-mask-image: none; mask-image: none;
    }
}

/* --- Trust row ------------------------------------------------------------ */
.gc-trustrow { background: #fff; border-bottom: 1px solid var(--gc-line, #e4e1da); }
.gc-trustrow__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; padding: 18px 0;
}
.gc-trustrow__item { display: flex; align-items: center; gap: 12px; padding: 6px 10px; }
.gc-trustrow__item + .gc-trustrow__item { border-left: 1px solid var(--gc-line, #e4e1da); }
.gc-trustrow__item svg { width: 30px; height: 30px; flex: none; fill: var(--gc-ink); opacity: .85; }
.gc-trustrow__item strong {
    display: block; font-family: var(--gc-ui); font-weight: 700;
    font-size: .92rem; letter-spacing: .02em; text-transform: uppercase; color: var(--gc-ink);
}
.gc-trustrow__item span { display: block; font-size: .84rem; color: var(--gc-dim, #555); }
@media (max-width: 880px) {
    .gc-trustrow__grid { grid-template-columns: 1fr 1fr; }
    .gc-trustrow__item + .gc-trustrow__item { border-left: 0; }
}

/* --- Shop by Category (comp 2: labels below the tile, centered heading) ---- */
.gc-catshead {
    text-align: center;
    margin: 0 0 22px;
    position: relative;
}
.gc-catshead::after {
    content: ""; display: block; width: 54px; height: 3px;
    background: var(--gc-orange); margin: 10px auto 0;
}
.gc-tilerow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.gc-tile { display: block; text-decoration: none; outline-offset: 3px; }
.gc-tile__shot {
    position: relative; display: block; aspect-ratio: 1 / .82;
    border-radius: 8px; overflow: hidden; background: var(--gc-card);
    border: 1px solid var(--gc-line);
}
/* Specificity note: professional-fixes.min.css (platform-master, not ours to
   edit) declares `img{max-width:100%!important;height:auto!important}` and an
   `img:not(.icon):not(.logo-img):not([src*=...])` variant weighing (0,3,1).
   This selector outweighs it at (0,4,1); without it, tile photos render at
   natural aspect ratio pinned to the top of the tile. */
.gc-tilerow-section .gc-tilerow .gc-tile img:not(.icon) {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important;
    max-width: none !important;
    object-fit: cover; transition: transform .35s ease; display: block;
}
.gc-tile:hover img, .gc-tile:focus-visible img { transform: scale(1.05); }
.gc-tile__name {
    display: block; text-align: center; margin-top: 10px;
    font-family: var(--gc-ui); font-weight: 700; font-size: .88rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gc-ink);
}
.gc-tile:hover .gc-tile__name { color: var(--gc-orange-deep); }
/* DEALS: the comp's orange hang-tag, drawn rather than shipped as an image. */
.gc-tile__shot--deals {
    background: var(--gc-ink);
    display: flex; align-items: center; justify-content: center;
}
.gc-dealstag {
    position: relative; display: inline-block;
    background: linear-gradient(160deg, var(--gc-orange) 0%, var(--gc-orange-deep) 100%);
    color: #fff; font-family: var(--gc-display); font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(1rem, 1.5vw, 1.45rem);
    padding: .55em 1.1em .55em 1.4em;
    border-radius: 4px;
    transform: rotate(-8deg);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.gc-dealstag::before {
    content: ""; position: absolute; left: .5em; top: 50%;
    width: .34em; height: .34em; border-radius: 50%;
    background: var(--gc-ink); transform: translateY(-50%);
}
@media (max-width: 1080px) { .gc-tilerow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .gc-tilerow { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* --- About band (comp 2: gun owners serving gun owners) --------------------- */
.gc-about { background: var(--gc-bone-2); }
.gc-about__grid {
    display: grid; grid-template-columns: minmax(300px, 2fr) 3fr;
    gap: clamp(20px, 3vw, 44px); align-items: center;
    padding-top: clamp(24px, 3.4vw, 44px); padding-bottom: clamp(24px, 3.4vw, 44px);
}
.gc-about__copy p {
    color: var(--gc-muted); line-height: 1.6; max-width: 40ch;
    margin: 14px 0 20px;
}
.gc-about__photo {
    /* Owner-supplied shot (assets/bwtbo.png, 2026-08-13): the storefront with
       the site open on a laptop and phone beside a packed Gun Club HQ carton.
       It shows the actual claim this section makes — buying online from a real
       shop that then ships it — where the previous counter photo only showed
       the shop. The wall behind even reads "gun owners serving gun owners",
       which is this section's eyebrow verbatim.
       Slightly taller than the old crop so the laptop screen stays legible. */
    align-self: stretch; min-height: 320px;
    background: url('/assets/images/gc/about-online-1000.webp') center / cover no-repeat;
    border-radius: 10px;
}
@media (max-width: 880px) {
    .gc-about__grid { grid-template-columns: 1fr; }
    .gc-about__photo { order: -1; min-height: 200px; }
}

/* --- Popular right now (comp 2: compact product strip) ---------------------- */
.gc-popular { background: var(--gc-card); }
.gc-popular__row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
    gap: 14px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.gc-popcard {
    display: flex; flex-direction: column; scroll-snap-align: start;
    background: var(--gc-card); border: 1px solid var(--gc-line);
    border-radius: 8px; padding: 14px; text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.gc-popcard:hover, .gc-popcard:focus-visible {
    border-color: var(--gc-orange); box-shadow: var(--gc-shadow); transform: translateY(-2px);
}
.gc-popcard__shot { display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 10px; }
.gc-popcard__shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gc-popcard__brand {
    font-family: var(--gc-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gc-dim);
}
.gc-popcard__title {
    font-family: var(--gc-ui); font-weight: 600; font-size: .88rem; line-height: 1.35;
    color: var(--gc-ink); margin: 4px 0 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em;
}
.gc-popcard__cta {
    margin-top: auto; text-align: center;
    background: var(--gc-orange); color: #fff;
    font-family: var(--gc-ui); font-weight: 700; font-size: .78rem;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 9px 10px; border-radius: var(--gc-radius);
    transition: background .15s ease;
}
.gc-popcard:hover .gc-popcard__cta { background: var(--gc-orange-deep); }

/* --- Newsletter band (comp 2) ------------------------------------------------ */
.gc-newsband { background: var(--gc-card); border-top: 1px solid var(--gc-line); }
.gc-newsband__grid {
    display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
    gap: clamp(16px, 3vw, 40px); align-items: center;
    padding-top: clamp(22px, 3vw, 38px); padding-bottom: clamp(22px, 3vw, 38px);
}
.gc-newsband__title {
    font-family: var(--gc-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.08; color: var(--gc-ink);
    margin: 0;
}
.gc-newsband__form { display: flex; }
.gc-newsband__form input[type="email"] {
    flex: 1; min-width: 0; padding: 13px 15px; font-size: 15px;
    font-family: var(--gc-ui); color: var(--gc-ink);
    border: 1px solid var(--gc-line-2); border-right: 0;
    border-radius: var(--gc-radius) 0 0 var(--gc-radius); background: #fff;
}
.gc-newsband__form input[type="email"]:focus { outline: 2px solid var(--gc-orange); outline-offset: -1px; }
.gc-newsband__form button {
    padding: 13px 22px; border: 0; cursor: pointer;
    background: var(--gc-orange); color: #fff;
    font-family: var(--gc-ui); font-weight: 700; font-size: .85rem;
    letter-spacing: .07em; text-transform: uppercase;
    border-radius: 0 var(--gc-radius) var(--gc-radius) 0;
}
.gc-newsband__form button:hover { background: var(--gc-orange-deep); }
.gc-newsband__fine { margin: 8px 0 0; font-size: .78rem; color: var(--gc-dim); }
.gc-newsband__thanks {
    margin: 0; font-family: var(--gc-ui); font-weight: 600; color: var(--gc-stock);
}
@media (max-width: 880px) { .gc-newsband__grid { grid-template-columns: 1fr; } }

/* --- Value row -------------------------------------------------------------- */
.gc-valuerow { background: #fff; border-top: 1px solid var(--gc-line, #e4e1da); border-bottom: 1px solid var(--gc-line, #e4e1da); margin-top: clamp(20px, 3vw, 36px); }
.gc-valuerow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 20px 0; }
.gc-valuerow__grid > div { padding: 6px 14px; }
.gc-valuerow__grid > div + div { border-left: 1px solid var(--gc-line, #e4e1da); }
.gc-valuerow strong {
    display: block; font-family: var(--gc-ui); font-weight: 700; font-size: .92rem;
    letter-spacing: .02em; text-transform: uppercase; color: var(--gc-ink); margin-bottom: 2px;
}
.gc-valuerow span { display: block; font-size: .84rem; line-height: 1.45; color: var(--gc-dim, #555); }
@media (max-width: 880px) {
    .gc-valuerow__grid { grid-template-columns: 1fr 1fr; }
    .gc-valuerow__grid > div + div { border-left: 0; }
}

/* --- Brand strip -------------------------------------------------------------- */
.gc-brandstrip { background: var(--gc-bone); padding: clamp(22px, 3vw, 36px) 0; }
.gc-brandstrip__kicker {
    text-align: center; font-family: var(--gc-ui); font-weight: 700;
    font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gc-ink); margin: 0 0 18px;
}
.gc-brandstrip__kicker::before, .gc-brandstrip__kicker::after { content: "  —  "; color: var(--gc-orange); }
.gc-brandstrip__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px clamp(18px, 3vw, 44px);
}
.gc-brandstrip__list a {
    font-family: var(--gc-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.05rem, 1.6vw, 1.45rem); letter-spacing: .03em;
    color: var(--gc-ink); opacity: .78; text-decoration: none;
    transition: opacity .15s ease, color .15s ease;
}
.gc-brandstrip__list a:hover, .gc-brandstrip__list a:focus-visible { opacity: 1; color: var(--gc-orange-deep); }
.gc-brandstrip__more a { font-family: var(--gc-ui); font-weight: 600; font-size: .9rem; letter-spacing: .08em; color: var(--gc-orange-text); opacity: 1; }

/* --- Featured products head (replaces the gdaoc "In the case" framing) ------ */
.gc-featured { background: var(--gc-card); }
.gc-featured__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.gc-featured__head .gc-eyebrow { margin-bottom: 6px; }
.gc-featured__link {
    font-family: var(--gc-ui); font-weight: 600; font-size: .9rem;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--gc-orange-text); text-decoration: none;
    padding-bottom: 4px; border-bottom: 2px solid var(--gc-orange);
}
.gc-featured__link:hover, .gc-featured__link:focus-visible { color: var(--gc-orange-deep); }
.gc-newsband__error {
    margin: 0 0 8px; font-family: var(--gc-ui); font-weight: 600;
    font-size: .9rem; color: #A03123;
}

/* --- Notify-when-in-stock: on-brand, not TheGunDock red ---------------------
   product-page.css (platform sheet, not ours to edit) paints this panel and
   button in TGD's crimson/red with !important. Equal-specificity !important
   overrides here win on source order — this file loads last. Red on this skin
   is reserved for genuine errors; an out-of-stock notice is a neutral state
   and the CTA is an action, so: charcoal panel language, orange action. */
.notify-stock-section { border-color: var(--gc-line-2) !important; background: var(--gc-bone) !important; }
.out-of-stock-msg { background: var(--gc-bone-2) !important; color: var(--gc-text) !important; }
.notify-btn {
    background: var(--gc-orange) !important;
    border-radius: var(--gc-radius) !important;
}
.notify-btn:hover { background: var(--gc-orange-deep) !important; }
.notify-input-group input[type="email"]:focus { border-color: var(--gc-orange) !important; }


/* ==========================================================================
   CATEGORY CARDS — owner-approved comp (2026-08-12).
   Each card is a single artwork containing photo + orange icon + name +
   subtitle, so the grid only has to size and space them.
   ========================================================================== */
.gc-cats {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 14px; margin-top: 26px;
}
.gc-cat {
  display: block; border-radius: 12px; overflow: hidden; text-decoration: none;
  background: var(--gc-card, #fff);
  box-shadow: 0 1px 3px rgba(34,38,42,.10);
  transition: transform .14s ease, box-shadow .16s ease;
}
/* The seven card artworks are 557px tall but 221-229px WIDE (they were exported
   at slightly different widths). With width:100% in an equal-column grid each
   one scaled by a different factor, so the cards bottomed out at different
   heights and the baked-in labels sat at different baselines - visible as
   uneven white space under some cards. Pinning the ratio makes every card
   render identical height whatever the source measures; the <=1.8% difference
   is absorbed as a ~2px crop at the sides, never at the bottom, so no baked-in
   text is clipped. */
.gc-cat img {
  width: 100%;
  aspect-ratio: 225 / 557;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.gc-cat:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(34,38,42,.18); }
.gc-cat:focus-visible { outline: 3px solid var(--gc-orange, #F26A1B); outline-offset: 2px; }
@media (max-width: 1150px) { .gc-cats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px)  { .gc-cats { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 520px)  { .gc-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; } }


/* ==========================================================================
   HERO — owner-approved comp (2026-08-12).
   The scene is a background image so the headline and CTA remain real text.
   The art's left third is intentionally clear; the copy column sits there and
   the focal point stays visible as the viewport narrows.
   ========================================================================== */
/* professional-fixes.min.css carries a blanket `section { background: #fff }`
   that loads after this file, so the hero must be matched at higher specificity
   (element+class) or its artwork never paints. */
section.gc-hero4 {
  position: relative;
  background: var(--gc-bone, #F4F2ED) !important;   /* beats professional-fixes' blanket section{background:#fff} */
  border-bottom: 1px solid var(--gc-line, #DCD8D0);
}
/* The <h1> is real text for crawlers and screen readers; the artwork carries
   the same words visually. Not display:none — that would hide it from both. */
.gc-hero4__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gc-hero4__desktop { display: block; line-height: 0; }
.gc-hero4__desktop img {
  display: block; width: 100% !important; height: auto !important; max-width: none !important;
}
.gc-hero4__mobile { display: none; }

@media (max-width: 900px) {
  /* Art direction, not just reflow: the comp's baked type is unreadable at
     phone width, so the scene runs as a band and the words become live text. */
  .gc-hero4__desktop { display: none; }
  .gc-hero4__mobile  { display: block; }
  .gc-hero4__photo {
    height: clamp(150px, 34vw, 240px);
    background: url('/assets/images/gc/hero-scene-mobile.webp') center 38% / cover no-repeat;
  }
  .gc-hero4__copy { padding: 20px 0 26px; text-align: center; }
  .gc-hero4__mark { display: block; width: 64px; height: auto; margin: 0 auto 10px; }
  .gc-hero4__title {
    font-family: var(--gc-display, 'Oswald', sans-serif); font-weight: 800;
    font-size: clamp(30px, 8.4vw, 46px); line-height: 1; letter-spacing: -.5px;
    text-transform: uppercase; color: var(--gc-ink, #22262A); margin: 0;
  }
  .gc-hero4__rule {
    width: 132px; height: 4px; border-radius: 3px;
    background: var(--gc-orange, #F26A1B); margin: 12px auto 14px;
  }
  .gc-hero4__tag {
    font-family: var(--gc-display, 'Oswald', sans-serif); font-weight: 600;
    font-size: clamp(16px, 4.6vw, 24px); line-height: 1.22; text-transform: uppercase;
    color: var(--gc-ink, #22262A); margin: 0 0 18px;
  }
  .gc-hero4__tag em { font-style: normal; color: var(--gc-orange-text, #B84A0A); }
  .gc-hero4__cta { font-size: 15px; padding: 13px 30px; }
}


/* ==========================================================================
   MOBILE HEADER ACTIONS — palette fix (2026-08-12 audit).
   The inherited template painted the cart olive green rgb(82,123,26) and the
   account button slate rgb(55,65,81); neither is in the Gun Club HQ palette.
   Matched at html body + class because the template's own overrides use that
   form and would otherwise win.
   ========================================================================== */
html body .mobile-cart-link,
html body a.mobile-cart-link {
  background: var(--gc-orange, #F26A1B) !important;
  color: #fff !important; border-color: var(--gc-orange, #F26A1B) !important;
}
html body .mobile-cart-link:hover { background: var(--gc-orange-deep, #C6520D) !important; }
html body .mobile-account-link,
html body a.mobile-account-link,
html body .mobile-logout-link,
html body a.mobile-logout-link {
  background: var(--gc-ink, #22262A) !important;
  color: #fff !important; border-color: var(--gc-ink, #22262A) !important;
}
html body .mobile-account-link:hover,
html body .mobile-logout-link:hover { background: #2E3338 !important; }
/* the cart count sits on the orange pill, so it needs the dark chip */
html body .mobile-cart-link .cart-badge,
html body .mobile-cart-link .cart-count {
  background: var(--gc-ink, #22262A) !important; color: #fff !important;
}


/* ==========================================================================
   CLUBHOUSE SPECIAL — owner-approved deal board (2026-08-12).
   Copy column on bone, product on the comp's plank shelf. Matched as
   section.gc-clubhouse because professional-fixes.min.css paints every
   <section> white after this file loads.
   ========================================================================== */
section.gc-clubhouse { background: var(--gc-bone, #F4F2ED) !important; padding: 44px 0 0; }





















/* product sits on the comp's plank shelf */


/* trust strip beneath the card */
.gc-clubhouse__trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-top: 18px; padding: 20px 0 44px;
}
.gc-clubhouse__trust > div {
  text-align: center; padding: 0 12px; border-left: 1px solid var(--gc-line, #DCD8D0);
}
.gc-clubhouse__trust > div:first-child { border-left: 0; }
.gc-clubhouse__trust strong {
  display: block; font-family: var(--gc-display, 'Oswald', sans-serif);
  text-transform: uppercase; letter-spacing: 1px; font-size: clamp(12px, 1.05vw, 15px);
  color: var(--gc-ink, #22262A);
}
.gc-clubhouse__trust span { display: block; font-size: clamp(12px, 1vw, 14px); color: var(--gc-muted, #63686D); margin-top: 4px; }

@media (max-width: 900px) {
  
  /* Stage BELOW the copy on mobile. order:-1 put a floating rifle above the
     badge, so the section opened on an unlabelled photo — the Clubhouse mark is
     the thing that has to lead. */
  
  .gc-clubhouse__trust { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .gc-clubhouse__trust > div:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  
  .gc-clubhouse__trust { grid-template-columns: 1fr; }
  .gc-clubhouse__trust > div { border-left: 0; }
  
}


/* ==========================================================================
   AUDIT FIXES (2026-08-13) — same two classes of defect found on Smoke Wagon.
   ========================================================================== */
/* 1. palette leaks the skin could not reach: an emerald in-stock chip and the
      mobile nav's blue wash, both inherited from the platform template. */
html body .in-stock, html body .stock-badge, html body .badge-instock,
html body .gc-stock--in, html body span.in-stock {
  color: var(--gc-ink, #22262A) !important; border-color: var(--gc-line, #DCD8D0) !important;
}
html body .main-nav li.dropdown.mobile-only-nav,
html body .mobile-only-nav {
  background: rgba(242, 106, 27, .12) !important;
  border-top-color: var(--gc-orange, #F26A1B) !important;
}

/* 2. sub-12px text: Google's mobile usability check and plain readability both
      suffer below 12px, so raise the floor on phones/tablets. */
@media (max-width: 820px) {
  .account-text, .cart-text-mobile, .logout-text,
  
  /* tap targets to the 44px Google expects */
  .mobile-account-link, .mobile-cart-link, .mobile-logout-link, .mobile-menu-toggle {
    min-height: 44px !important; display: inline-flex !important;
    align-items: center; justify-content: center;
  }
  .gc-cat, .gc-btn { min-height: 44px; }
}


/* card meta was 10px: matched at the specificity the template uses so the
   accessibility floor actually wins (audit 2026-08-13) */
.product-card .product-brand, .product-card .product-model, .product-card .product-upc,
.gc-popcard .gc-popcard__brand, p.product-brand, div.product-model, div.product-upc {
  font-size: 12px !important;
}
.btn.btn-secondary.btn-block, a.btn.btn-secondary.btn-block { font-size: 12.5px !important; }


/* remaining sub-12px text found at desktop too (audit 2026-08-13): the top
   utility strip, section eyebrows and the product view-count chip. Matched at
   the specificity the template uses so the floor actually applies. */
.header-top .contact-info span, .header-top .header-links a, .header-top strong,
.contact-info span, .header-links a { font-size: 12px !important; }
.gc-eyebrow, span.gc-eyebrow { font-size: 12px !important; }
.badge.badge-views, .product-image .badge { font-size: 12px !important; }

/* ==========================================================================
   MOBILE UX PASS (2026-08-13)
   Measured on a 390x844 viewport with real device emulation, not a resized
   desktop window. Numbers in the comments are what was measured.
   ========================================================================== */
@media (max-width: 900px) {

  /* --- Header: was 241px tall, 29% of the phone screen before ANY content ---
     The template stacked four rows: logo, "Login to My Account" as a full
     button, "Shopping Cart" as another full button, then the search bar. Those
     two text buttons are the whole problem — a phone header wants icons on the
     logo row. They keep their labels for screen readers and their 44px tap
     size; only the visible text is dropped so they sit inline. */
  .header-main .container {
    display: flex !important;
    /* The inherited rule sets flex-direction:column, which is what actually
       stacked these — every child got its own line no matter how narrow it was.
       Widths were never the problem. */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    /* Keep the space the fixed hamburger occupies in the top-right corner —
       without it the cart button slides under the menu button. */
    padding-right: 70px !important;
  }
  .header-main .logo { flex: 1 1 auto !important; order: 1 !important; }
  .mobile-account-link,
  .mobile-logout-link { order: 2 !important; flex: 0 0 auto !important; }
  .cart-widget        { order: 3 !important; flex: 0 0 auto !important; }
  /* The 70px gutter only exists for the hamburger on row one; on its own row
     the search field reclaims it rather than sitting short. */
  .search-bar         { order: 4 !important; flex: 0 0 100% !important; margin-top: 2px !important;
                        width: calc(100% + 60px) !important; margin-right: -60px !important; }

  /* The container reserves padding-right:70px for the fixed hamburger, so the
     usable row is only ~300px. At its inherited 208px the logo plus two 44px
     buttons overflow that and wrap onto separate lines — which is what made the
     header 241px tall. Capping the logo lets all three share one row. */
  .header-main .logo { max-width: 150px !important; }
  .header-main .logo img { max-height: 40px !important; width: auto !important; }

  /* Icon-only, but never smaller than a 44px touch target. */
  .mobile-account-link .account-text,
  .mobile-logout-link  .logout-text,
  .mobile-cart-link    .cart-text-mobile { display: none !important; }
  .mobile-account-link,
  .mobile-logout-link,
  .mobile-cart-link {
    width: 44px !important; min-width: 44px !important; height: 44px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; border-radius: 8px !important; position: relative !important;
  }
  .mobile-account-link::before { content: "\1F464"; font-size: 19px; line-height: 1; }
  .mobile-logout-link::before  { content: "\21AA";  font-size: 21px; line-height: 1; }
  .mobile-cart-link::before    { content: "\1F6D2"; font-size: 19px; line-height: 1; }
  .mobile-cart-link .cart-badge {
    position: absolute !important; top: 2px !important; right: 2px !important;
    min-width: 17px !important; height: 17px !important; line-height: 17px !important;
    font-size: 10px !important; padding: 0 4px !important; border-radius: 9px !important;
  }

  /* --- Category cards: 7 cards stacked 2-up measured 1,614px of scroll ------
     Each was 160x396 — a 1:2.5 sliver, because the card art keeps the desktop
     column proportion. On a phone the photo only needs to identify the
     category, so it goes near-square and the whole block drops to ~700px. */
  .gc-cats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .gc-cat img { aspect-ratio: 1 / 1.08 !important; object-fit: cover !important;
                object-position: center 42% !important; height: auto !important; }
  .gc-cats > .gc-cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gc-cats > .gc-cat:last-child:nth-child(odd) img { aspect-ratio: 2.4 / 1 !important; }

  /* --- Footer / brand-strip links: 19px tall, well under the 44px guidance --
     44 tap targets on the homepage measured under 40px. Padding rather than
     font-size keeps the visual density while making them reliably tappable. */
  .site-footer a,
  .gc-brandstrip__list a { display: inline-block; padding: 9px 2px; }

  /* Badges were 10px — below comfortable reading on a phone. */
  .badge-inline, .product-caliber { font-size: 11.5px !important; }
}

/* --- Cookie consent: it is position:fixed at top=503, so on a 844px screen it
   floats across the middle of the hero. A consent notice belongs out of the
   way at the bottom, where it does not cover the thing it interrupts. --- */
@media (max-width: 900px) {
  #cookieConsent, .cookie-consent, .cookie-banner, [class*="cookie-consent"] {
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important;
    margin: 0 !important; border-radius: 14px 14px 0 0 !important;
    max-height: 62vh !important; overflow-y: auto !important;
    transform: none !important;   /* the banner is centred with translateY; top:auto alone loses to it */
  }
}

/* ==========================================================================
   CLUBHOUSE SPECIAL — matched to the owner's template (2026-08-13 revision).
   The template is explicit about its furniture: the badge sits on a leather
   strap, the product name and description sit in white cards, the three price
   figures sit in their own white wells under ruled labels, and the product
   photo sits on a white dashed-edge card against the plank wall. Those are
   drawn here rather than approximated, so live data lands where the comp puts
   placeholders.
   ========================================================================== */

/* Ruled kicker, centred, matching "— TODAY'S HAND-PICKED DEAL —" */


/* Product name + brand in the template's white cards */


/* Price wells */




/* Stage: the plank wall carries a white card with the template's dashed edge */


@media (max-width: 900px) {
  
  
}

/* Gift-card banner removed from the markup 2026-08-13; its rules are dead but
   live in index.php's inline <style>, which is shared with other layouts. This
   guarantees nothing re-renders it if that block is ever re-included. */
.gift-card-banner { display: none !important; }

/* --- Featured grid: 48 items, five across (owner request 2026-08-13) --------
   The platform grid is .products-grid-4col; five columns is a Gun Club HQ
   choice, so it is set here rather than by editing the shared class. */
@media (min-width: 1100px) {
  .gc-featured .products-grid,
  .gc-featured .products-grid-4col { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .gc-featured .products-grid,
  .gc-featured .products-grid-4col { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 759px) {
  .gc-featured .products-grid,
  .gc-featured .products-grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Footer stamp ----------------------------------------------------------
   The supplied plate, centred on the dark footer. Capped well below its native
   1180px so it reads as a maker's mark rather than a banner. */
.gc-stamp {
    text-align: center;
    padding: 20px 0 6px;
    border-top: 1px solid rgba(255,255,255,.10);
    margin-top: 15px;
}
.gc-stamp img {
    display: block; margin: 0 auto;
    width: min(360px, 78%); height: auto;
    opacity: .96;
    transition: opacity .18s ease, transform .18s ease;
}
.gc-stamp a:hover img, .gc-stamp a:focus-visible img { opacity: 1; transform: translateY(-1px); }
.gc-stamp__build {
    display: inline-block; margin-top: 10px; padding: 2px 8px;
    background: rgba(255,255,255,.10); border-radius: 4px;
    font-size: 10px; color: rgba(255,255,255,.6);
}
@media (max-width: 600px) { .gc-stamp img { width: min(300px, 86%); } }

/* ==========================================================================
   CLUBHOUSE SPECIAL — the template as the panel, live values placed into it.
   Percentages below are measured off assets/clubhouse_template.png (1764x627)
   by scanning for its white placeholder wells; they are not eyeballed.
   ========================================================================== */
section.gc-clubhouse { background: var(--gc-bone, #F4F2ED) !important; padding: 40px 0 0; }

.gc-board {
  position: relative;
  aspect-ratio: 1764 / 627;
  background: url('/assets/images/gc/clubhouse-board.webp') center / 100% 100% no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(34,38,42,.14);
  container-type: inline-size;          /* lets the type scale with the board */
  font-family: var(--gc-ui);
}
.gc-board > * { position: absolute; }

/* --- product name well --- */
.gc-board__name {
  left: 3.9%; top: 40.5%; width: 38.2%; height: 8.6%;
  margin: 0; display: flex; align-items: center;
  font-family: var(--gc-display); font-weight: 800; text-transform: uppercase;
  font-size: 2.25cqw; line-height: 1.06; letter-spacing: .01em; color: var(--gc-ink);
  overflow: hidden;
}
/* --- description well --- */
.gc-board__desc {
  left: 3.9%; top: 52.4%; width: 38.2%; height: 5.2%;
  margin: 0; display: flex; align-items: center;
  font-size: 1.35cqw; line-height: 1.25; color: var(--gc-muted);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* --- the three price wells --- */
.gc-board__now, .gc-board__save, .gc-board__was {
  top: 67.5%; height: 8.4%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gc-display); font-weight: 800; line-height: 1;
}
.gc-board__now  { left: 3.4%;  width: 11.2%; font-size: 2.5cqw;  color: var(--gc-ink); }
.gc-board__save { left: 18.1%; width: 11.2%; font-size: 2.5cqw;  color: var(--gc-orange-deep); }
.gc-board__was  { left: 32.4%; width: 10.9%; font-size: 1.95cqw; color: var(--gc-muted); }
/* --- CTA hit area over the drawn button --- */
.gc-board__cta { left: 2.7%; top: 80.5%; width: 20.5%; height: 13%; border-radius: 6px; }
.gc-board__cta:focus-visible { outline: 3px solid var(--gc-ink); outline-offset: 2px; }
/* --- ENDS IN well --- */
.gc-board__ends {
  left: 31.9%; top: 84.2%; width: 11.2%; height: 6.6%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gc-display); font-weight: 700; font-size: 1.5cqw; color: var(--gc-ink);
}
/* --- product photo, inside the template's dashed card --- */
.gc-board__shot {
  left: 49.3%; top: 5.2%; width: 47.8%; height: 78.5%;
  display: flex; align-items: center; justify-content: center; padding: 2.2%;
}
.gc-board__shot img {
  max-width: 100% !important; max-height: 100% !important;
  width: auto !important; height: auto !important;
  object-fit: contain; mix-blend-mode: multiply;
}

/* --- Below 860px the fixed board cannot hold type legibly, so the artwork
       becomes a header strip and the deal reads as ordinary stacked content. --- */
@media (max-width: 860px) {
  .gc-board {
    aspect-ratio: auto; container-type: normal;
    background: #F6EEE2; padding: 0 0 18px;
  }
  .gc-board > * { position: static; }
  .gc-board::before {
    content: ""; display: block; width: 100%; aspect-ratio: 1764 / 210;
    background: url('/assets/images/gc/clubhouse-board.webp') left top / 100% auto no-repeat;
  }
  .gc-board__shot {
    display: block; width: auto; height: auto; margin: 12px 16px;
    background: #fff; border-radius: 10px; padding: 14px;
    outline: 2px dashed rgba(34,38,42,.25); outline-offset: -8px;
  }
  .gc-board__shot img { max-height: 190px !important; margin: 0 auto; display: block; mix-blend-mode: normal; }
  .gc-board__name { font-size: 20px; padding: 0 16px; margin: 4px 0 6px; height: auto; }
  .gc-board__desc { font-size: 14px; padding: 0 16px; margin: 0 0 12px; height: auto; white-space: normal; }
  .gc-board__now, .gc-board__save, .gc-board__was {
    display: inline-flex; width: auto; height: auto; margin: 0 16px 8px 0; justify-content: flex-start;
  }
  .gc-board__now  { font-size: 26px; }
  .gc-board__save { font-size: 22px; }
  .gc-board__was  { font-size: 17px; text-decoration: line-through; }
  .gc-board__ends { display: none; }
  .gc-board__cta {
    display: block; width: auto; height: auto; margin: 8px 16px 0;
    background: var(--gc-orange); color: #fff; text-align: center;
    padding: 13px 18px; border-radius: 4px;
    font-family: var(--gc-ui); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  }
  .gc-board__cta .visually-hidden { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
}

/* Title well: long catalogue titles must fit the drawn box, not spill out of it.
   Two lines max, ellipsised, sized down a touch so a 30-character name still
   sits inside the artwork's rectangle. */
.gc-board__name {
  font-size: 1.95cqw !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  align-items: unset !important; padding-top: .4%;
}
/* Sits over the template's "TIMEZONE HERE" caption. */
.gc-board__tz {
  /* starts left of the artwork's caption so no sliver of "TIMEZONE HERE" shows */
  left: 30.6%; top: 91.2%; width: 13.2%; height: 5%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gc-ui); font-weight: 600; font-size: 1.02cqw;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gc-muted);
  background: #F6EEE2;
}
/* Give the photo more of its card. */
.gc-board__shot { padding: 1.2% !important; }
@media (max-width: 860px) {
  .gc-board__name { font-size: 20px !important; -webkit-line-clamp: 3; }
  .gc-board__tz { display: none; }
}

/* --- Featured card alignment ------------------------------------------------
   Titles run one to three lines, which pushed the meta block and the CTA to
   different heights and made the grid look ragged. Making the card a column
   flex and giving the title a fixed two-line box puts every button on the same
   baseline, and the price/CTA row is pinned to the bottom of the card. */
.gc-featured .product-card { display: flex !important; flex-direction: column !important; }
.gc-featured .product-card > a { display: flex; flex-direction: column; flex: 1 1 auto; }
.gc-featured .product-info { display: flex; flex-direction: column; flex: 1 1 auto; }
.gc-featured .product-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em; line-height: 1.35; margin-bottom: 6px;
}
.gc-featured .product-meta-info { margin-top: 2px; }
/* price sits directly above the CTA on every card, whatever came before it */
.gc-featured .product-price { margin-top: auto; padding-top: 8px; min-height: 1.2em; }
.gc-featured .btn-block { margin-top: auto; }

/* --- Brand rail: continuous scroll -----------------------------------------
   The track holds the brand list TWICE and animates to translateX(-50%), so at
   the end of a cycle copy 2 sits exactly where copy 1 began and the restart is
   invisible. The markup sets animation-duration inline from the item count
   (~2.3s per brand), so a longer list scrolls proportionally slower rather than
   faster; the 46s here is only the fallback if that inline style is absent.
   Edge fade is a mask, not an overlay gradient, so it works on any background. */
.gc-brandrail {
    position: relative;
    overflow: hidden;
    padding: 6px 0 2px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.gc-brandrail__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    width: max-content;
    /* Spacing is margin-right per item, NOT flex gap. With gap, one copy of the
       list measures 20 items + 20 gaps but translateX(-50%) shifts by only
       20 items + 19.5 gaps, so the loop jumps half a gap every cycle. As a
       trailing margin each copy is exactly 50% of the track and the seam is
       invisible. */
    animation: gc-brandscroll 46s linear infinite;
}
.gc-brandrail__item { flex: 0 0 auto; margin-right: clamp(28px, 5vw, 64px); }
.gc-brandrail__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 58px;
    text-decoration: none;
}
.gc-brandrail__item img {
    max-height: 46px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    /* Brands show in their own colours. An earlier version desaturated these to
       make a mixed set read as one row; it just looked broken. */
    opacity: 1;
    transition: opacity .18s ease, transform .18s ease;
}
.gc-brandrail__word {
    font-family: var(--gc-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    letter-spacing: .03em;
    color: var(--gc-ink);
    opacity: .9;
    transition: opacity .18s ease, color .18s ease;
}
.gc-brandrail__item a:hover img,
.gc-brandrail__item a:focus-visible img {
    transform: scale(1.06);
}
.gc-brandrail__item a:hover .gc-brandrail__word,
.gc-brandrail__item a:focus-visible .gc-brandrail__word {
    opacity: 1;
    color: var(--gc-orange-deep);
}
/* Pause on hover so a customer can actually read and click a logo, and on
   focus-within so keyboard users are not chasing a moving target. */
.gc-brandrail:hover .gc-brandrail__track,
.gc-brandrail:focus-within .gc-brandrail__track { animation-play-state: paused; }

@keyframes gc-brandscroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.gc-brandstrip__more-line { text-align: center; margin: 14px 0 0; }
.gc-brandstrip__more-line a {
    font-family: var(--gc-ui); font-weight: 600; font-size: .9rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--gc-orange-text); text-decoration: none;
    padding-bottom: 3px; border-bottom: 2px solid var(--gc-orange);
}
.gc-brandstrip__more-line a:hover, .gc-brandstrip__more-line a:focus-visible { color: var(--gc-orange-deep); }

/* Motion is decorative here. With reduced motion the rail stops and becomes a
   normal horizontal scroller, so every brand is still reachable. */
@media (prefers-reduced-motion: reduce) {
    .gc-brandrail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gc-brandrail__track { animation: none; }
}

/* --- Licence badge in the dark band ---------------------------------------- */
.gc-ffl-badge {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.14em;
    margin-right: .42em;
    color: var(--gc-orange);
    flex: 0 0 auto;
}

/* 2026-10-08: the search bar clear (x) button keeps its own look. The brand rule above colours EVERY search bar
   button, which turned the x into a large coloured block with a gap beside it on phones. */
html body .search-bar button.search-clear{background:transparent !important;border:0 !important;color:#999 !important;width:28px !important;height:28px !important;padding:0 !important;box-shadow:none !important;}
html body .search-bar button.search-clear:hover{background:#f0f0f0 !important;color:#333 !important;}