/* ==========================================================================
   Dahlonega Armory — page chrome (header, nav, best sellers, benefits, footer)

   Implements Creation Station job 20260902-234359_refine_b3486 exactly:
   every px below is copied from that job's LAYOUT_MAP.json / DESIGN_SPEC.md,
   NOT estimated off the raster comp. tools/verify_design_fidelity.py measures
   these against the built page, so do not "clean up" the numbers.

   Owner (Ken) deltas applied on top of the comp are marked KEN-#n.
   Loads after brand-20 (tokens). Scoped under .da-* so it cannot collide with
   theme.css; the handful of platform selectors that must be suppressed are
   grouped in "legacy suppression" at the bottom.
   ========================================================================== */

/* ---------- shared shell ------------------------------------------------- */
.da-wrap        { width: min(100% - 64px, var(--container-xl)); max-width: var(--container-xl); margin-inline: auto; }
.da-wrap--wide  { width: min(100% - 96px, var(--container-xl)); max-width: var(--container-xl); margin-inline: auto; }

.da-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.da-chrome a { text-decoration: none; }
.da-chrome :focus-visible,
.da-footer :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* =========================================================================
   Section 1 — Top Brand Utility Header            (spec height 304px)
   ========================================================================= */
.da-topband {
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 62%),
        linear-gradient(180deg, var(--color-navy-dark) 0%, var(--color-navy) 42%);
    color: var(--color-white);
}
/* min-height, NEVER height. At 1024-1179 the content of this band is 396px tall against a fixed
   304px box, so 92px of header painted ON TOP of the white search bar below it. At 768-1023 the
   same fault is worse: 380px of content in a 250px box, 130px of spill, 28 overlapping elements,
   and "Contact Us Here" plus "Follow Us:" rendered 100% occluded and unclickable. The phone
   breakpoint was already correct (height:auto below 768) - the two larger bands were not.
   ⚠ This is also why four items measured white-on-white at ratio 1.00: the container was broken,
   not the colours. Do not change those colours again. */
.da-topband__grid {
    min-height: 304px;
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0 28px;
}

/* left intro / store block */
.da-topband__left { max-width: 360px; padding-top: 6px; }
.da-intro       { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 400; line-height: 1.2; color: var(--color-white); margin: 0; }
.da-intro__hi   { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--color-gold); line-height: 1.2; margin-top: 2px; }
.da-infoblock   { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.da-infoblock__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--color-gold); }
.da-infoblock__label { font-size: var(--text-md); font-weight: 700; color: var(--color-white); margin: 0; }
.da-infoblock__body  { font-size: var(--text-md); font-weight: 400; line-height: 1.35; color: var(--color-white); margin: 0; }
/* KEN-#1 web-special notice sits under the retail address */
.da-webspecial       { margin-top: var(--space-3); }
.da-webspecial__label{ font-size: var(--text-md); font-weight: 700; color: var(--color-gold); margin: 0; }
.da-webspecial__body { font-size: var(--text-md); font-weight: 400; line-height: 1.35; color: var(--color-white); margin: 0; }

/* centre logo */
.da-topband__logo { width: 280px; height: 248px; display: flex; align-items: flex-start; justify-content: center; }
.da-topband__logo img { width: 244px; max-height: 248px; object-fit: contain; }

/* right utility block */
/* Spec rows are "auto 1fr" with a 42px gap, but the comp stacks THREE things on
   the right: utility links, then the cart/wishlist pair, then customer service.
   Rows become auto/auto/1fr and the spec's 42px gap + 8px mini-cart offset are
   applied as margins so both published numbers still hold. */
.da-topband__right { display: grid; grid-template-rows: auto auto 1fr; row-gap: 0; align-items: start; }
.da-utility { display: flex; justify-content: flex-end; gap: var(--space-8); min-height: 44px; align-items: center; }
.da-utility a {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; font-size: var(--text-md); font-weight: 600; color: var(--color-white);
}
.da-utility a:hover { color: var(--color-gold); }
.da-utility svg { width: 20px; height: 20px; flex: 0 0 auto; }
.da-utility .da-ico-q     { color: var(--color-gold); }
.da-utility .da-ico-user,
.da-utility .da-ico-lock  { color: var(--color-gold); }

.da-minicarts { display: flex; justify-content: flex-end; gap: var(--space-6); margin-top: 8px; }
.da-minicart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-white); }
.da-minicart:hover { transform: translateY(-1px); }
.da-minicart svg { width: 26px; height: 26px; }
.da-minicart__badge {
    position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: var(--radius-pill); background: var(--color-gold); color: var(--color-navy-dark);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.da-minicarts__sep { width: 1px; align-self: center; height: 24px; background: rgba(255,255,255,0.28); }

.da-cs { justify-self: end; width: 430px; margin-top: 42px; display: grid; grid-template-columns: 1fr auto; column-gap: 42px; align-items: end; }
/* ⚠ THE COLOUR HERE IS LOAD BEARING - DO NOT RELY ON INHERITANCE.
   .da-topband sets color:var(--color-white) and every sibling in this header declares white
   explicitly. These two did not, because they are <p> elements: theme.css has
   `p { color: var(--color-text-secondary) }` and professional-fixes.min.css forces
   `--color-text-secondary:#555555 !important`. A direct rule on p beats an inherited colour, so
   "Customer Service:" and the hours rendered #555 on #002B46 navy - about 2:1, barely legible
   (Brad 2026-09-28: "this text has poor contrast to the background too").
   Declared explicitly, exactly as the siblings do. */
.da-cs__label { font-size: var(--text-md); font-weight: 700; margin: 0 0 2px; color: var(--color-white); }
.da-cs__hours { font-size: var(--text-md); line-height: 1.35; margin: 0 0 var(--space-2); color: var(--color-white); }
.da-cs__row   { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.da-cs__row svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-gold); }
.da-cs__row a { color: var(--color-white); font-size: var(--text-md); }
.da-cs__row a:hover { color: var(--color-gold); }
.da-cs__contact a { color: var(--color-gold); font-weight: 600; }
.da-cs__contact a:hover { text-decoration: underline; }

.da-social { display: flex; align-items: center; gap: var(--space-3); }
/* Same trap as .da-cs__label above: a <p>/<span> in the dark header picks up
   professional-fixes' #555 via `p { color: var(--color-text-secondary) }` instead of inheriting
   the band's white. Declared explicitly, like the .da-social a sibling below. */
.da-social__label { font-size: var(--text-md); font-weight: 400; white-space: nowrap; color: var(--color-white); }
.da-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-white); }
.da-social a:hover { color: var(--color-gold); }
.da-social svg { width: 24px; height: 24px; }

/* =========================================================================
   Section 2 — White Search / Home / Quick Links Bar   (spec height 96px)
   ========================================================================= */
.da-searchbar { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
/* THE MINIMUM USED TO BE 1184px (280 + 420 + 420 + 2x32 gap) INSIDE A 960px WRAP. Between 1024
   and 1247 the quick-links column ran off the right edge - "Specials" 59px past it and "Used
   Firearms" 192px past, entirely invisible and unreachable - and professional-fixes� site-wide
   html,body{overflow-x:hidden} turned what would have been a scrollbar into silent clipping.
   minmax(0,1fr) + auto lets the middle column shrink instead of forcing the row wide; min-width:0
   on the children is required because grid items default to min-width:auto and refuse to shrink
   below their content. The same bug was found and fixed at 768 in this file months ago; the
   1024-1247 band was simply never re-tested. */
.da-searchbar__grid {
    min-height: 96px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: center;
}
.da-searchbar__grid > * { min-width: 0; }
.da-home { display: flex; align-items: center; gap: 10px; height: 44px; font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.da-home:hover { color: var(--color-gold-ink); }
.da-home svg { width: 22px; height: 22px; color: var(--color-navy); flex: 0 0 auto; }

.da-search { width: 100%; max-width: 560px; justify-self: center; }
.da-search__form {
    position: relative; display: flex; align-items: center;
    height: 54px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: var(--color-white); box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.da-search__form:focus-within { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(253,187,0,0.24); }
.da-search__input {
    flex: 1 1 auto; height: 100%; padding: 0 56px 0 28px;
    border: 0; background: transparent; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; color: var(--color-ink);
}
.da-search__input:focus { outline: none; }
.da-search__input::placeholder { color: var(--color-muted); }
.da-search__btn {
    position: absolute; right: 0; width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer; color: var(--color-ink);
    border-radius: var(--radius-pill);
}
.da-search__btn:hover { color: var(--color-gold-ink); }
.da-search__btn svg { width: 22px; height: 22px; }

.da-quicklinks { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-5); }
.da-quicklinks a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; color: var(--color-ink);
}
.da-quicklinks a:hover { color: var(--color-gold-ink); }
.da-quicklinks__sep { width: 1px; height: 20px; background: var(--color-border); flex: 0 0 auto; }

/* =========================================================================
   Section 3 — Primary Category Bar                 (spec height 76px)
   ========================================================================= */
.da-catbar { background: var(--color-navy); }
.da-catbar__grid { height: 76px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
.da-catbar__item {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 76px;
    font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-white); text-align: center;
}
.da-catbar__item::after {
    content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 5px; background: var(--color-gold); transition: width .18s ease;
}
.da-catbar__item:hover { color: var(--color-gold); }
.da-catbar__item:hover::after { width: 70%; }
.da-catbar__item.is-active { color: var(--color-white); }
.da-catbar__item.is-active::after { width: 108px; }
.da-catbar__item:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -4px; }

/* =========================================================================
   Section 4 — Best Sellers
   ========================================================================= */
.da-bestsellers { background: var(--color-white); padding: 20px 0 44px; }
.da-bestsellers__inner { position: relative; }
.da-sechead { width: 100%; text-align: center; margin-bottom: 14px; }
.da-sechead__titlerow { display: inline-grid; grid-template-columns: 52px auto 52px; gap: var(--space-6); align-items: center; }
.da-sechead__rule { width: 52px; height: 4px; background: var(--color-gold); }
.da-sechead__title {
    font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700;
    line-height: 1; letter-spacing: 0.02em; color: var(--color-ink-navy);
    text-transform: uppercase; margin: 0;
}
.da-sechead__sub { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); margin: var(--space-2) 0 0; }

.da-pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 18px; }

.da-card {
    height: 386px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 18px 18px 16px;
    display: grid;
    /* Spec rows were 172/58/34/28/44. The 28px price row could not hold a 22px
       price AND a 14px MSRP line, so price and MSRP overlapped on every card
       that had both; and the 58px name row let a 3rd title line render before
       clipping. Re-cut to give each row its real content height — total still
       lands on the approved 386px card. */
    grid-template-rows: 172px 36px 20px 46px 44px;
    row-gap: 8px;
    align-items: center;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.da-pgrid[hidden] { display: none; }
.da-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.da-card__imgwrap { width: 100%; height: 172px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.da-card__imgwrap img { max-width: 100%; max-height: 160px; object-fit: contain; transition: transform .18s ease; }
.da-card:hover .da-card__imgwrap img { transform: scale(1.025); }
/* Height is FIXED (not min-height) and overflow hidden, so a long distributor
   title is hard-clipped at two lines instead of leaking a partial third line
   over the spec row. 14px x 1.28 x 2 = 36px. */
.da-card__name {
    text-align: center; height: 36px; margin: 0; overflow: hidden;
    font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700;
    line-height: 1.28; text-transform: uppercase; color: var(--color-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.da-card__name a { color: inherit; }
.da-card__name a:hover { color: var(--color-gold-ink); }
.da-card__spec {
    text-align: center; font-family: var(--font-body); font-size: var(--text-sm);
    color: var(--color-muted); margin: 0; height: 20px; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis;
}
.da-card__prices { text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.da-card__price { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-price-red); display: block; line-height: 1.1; }
.da-card__price--phrase { font-size: var(--text-md); color: var(--color-navy); }
.da-card__msrp { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); display: block; }
.da-card__actions { display: grid; grid-template-columns: 1fr 44px; gap: 10px; align-items: center; }
.da-btn-cart {
    height: 36px; border: 0; border-radius: var(--radius-xs); cursor: pointer;
    background: var(--color-navy); color: var(--color-white);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
}
.da-btn-cart:hover { background: var(--color-navy-dark); }
.da-btn-cart[disabled], .da-btn-cart.is-disabled { background: var(--color-muted-light); color: var(--color-muted); cursor: not-allowed; }
.da-btn-wish {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer; color: var(--color-muted);
}
.da-btn-wish:hover, .da-btn-wish.is-on { color: var(--color-gold-ink); }
.da-btn-wish svg { width: 22px; height: 22px; }

.da-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 64px; display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer; color: var(--color-navy); border-radius: var(--radius-sm);
}
.da-carousel-arrow:hover { background: rgba(0,43,70,0.06); }
.da-carousel-arrow--prev { left: -46px; }
.da-carousel-arrow--next { right: -46px; }
.da-carousel-arrow svg { width: 26px; height: 34px; }

/* "Show More" — the owner asked for 3 rows up front plus progressive loading
   instead of the comp's paged carousel dots. */
.da-showmore-wrap { margin-top: 26px; display: flex; justify-content: center; }
.da-showmore {
    min-height: 48px; padding: 0 38px; cursor: pointer;
    border: 2px solid var(--color-navy); border-radius: var(--radius-xs);
    background: var(--color-white); color: var(--color-navy);
    font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: background .16s ease, color .16s ease;
}
.da-showmore:hover { background: var(--color-navy); color: var(--color-white); }
.da-showmore[disabled] { opacity: .6; cursor: default; }
.da-showmore__spinner {
    width: 16px; height: 16px; border-radius: 50%; display: none;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: da-spin .7s linear infinite;
}
.da-showmore.is-loading .da-showmore__spinner { display: inline-block; }
@keyframes da-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .da-showmore__spinner { animation: none; }
    .da-card, .da-card__imgwrap img { transition: none; }
}

.da-dots { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.da-dot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--color-muted-light); }
.da-dot.is-active { background: var(--color-navy); }

/* Content pages that use the skin (store-policies.php, our-ffl.php) */
.da-policylist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.da-policylist__item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 18px 20px; }
.da-policylist__item:hover { border-color: var(--color-gold); box-shadow: var(--shadow-card); }
.da-policylist__link { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-navy); }
.da-policylist__link:hover { color: var(--color-gold-ink); }
.da-policylist__blurb { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); margin: 6px 0 0; line-height: 1.45; }

.da-prose { max-width: 760px; margin-inline: auto; font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink); }
.da-prose h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink-navy); margin: 28px 0 10px; }
.da-prose ul, .da-prose ol { margin: 0 0 16px 22px; padding: 0; }
.da-prose li { margin-bottom: 8px; }
.da-prose a { color: var(--color-gold-ink); text-decoration: underline; }
.da-prose a:hover { color: var(--color-navy); }

@media (max-width: 767px) {
    .da-policylist { grid-template-columns: 1fr; }
}

.da-panel {
    min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--text-md); color: var(--color-ink); text-align: center; padding: var(--space-6);
}

/* Category-page card wishlist heart (2026-09-03) — parity with the old category
   page. Positioned over the image, outside the card's <a>. Uses the header's
   existing delegated .da-btn-wish handler + localStorage, so no new JS. */
.product-card { position: relative; }
.da-cat-wish {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: 50%;
    background: rgba(255,255,255,0.92); color: var(--color-muted); cursor: pointer; padding: 0;
    transition: color .15s ease, border-color .15s ease;
}
.da-cat-wish:hover, .da-cat-wish.is-on { color: var(--color-gold-ink); border-color: var(--color-gold-ink); }
.da-cat-wish.is-on svg { fill: var(--color-gold-ink); }
.da-cat-wish svg { width: 18px; height: 18px; }

/* =========================================================================
   Section 5 — Service Benefit Strip                (spec height 144px)
   ========================================================================= */
.da-benefits { background: var(--color-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.da-benefits__grid { height: 144px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.da-benefit {
    display: grid; grid-template-columns: 72px 1fr; column-gap: 18px; align-items: center;
    padding-inline: 24px; border-right: 1px solid var(--color-border);
}
.da-benefit:last-child { border-right: 0; }
.da-benefit__icon { width: 54px; height: 54px; color: var(--color-ink); }
.da-benefit__icon svg { width: 54px; height: 54px; stroke: currentColor; stroke-width: 2; fill: none; }
.da-benefit__text { max-width: 210px; }
.da-benefit__title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; text-transform: uppercase; color: var(--color-ink); margin: 0 0 var(--space-1); }
.da-benefit__copy  { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; color: var(--color-ink); margin: 0; }

/* =========================================================================
   Section 6 — Footer
   ========================================================================= */
.da-footer {
    background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
    color: var(--color-white);
    padding: 34px 0 28px;
}
.da-footer__cols { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.1fr; gap: 38px; padding-bottom: 26px; }
.da-footer__col + .da-footer__col { border-left: 1px solid rgba(255,255,255,0.22); padding-left: 38px; }
.da-footer__title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: 700; text-transform: uppercase; color: var(--color-gold); margin: 0 0 var(--space-4); letter-spacing: 0.02em; }
.da-footer__copy { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; line-height: 1.55; color: var(--color-white); margin: 0; }
.da-footer__logo { width: 126px; margin-top: 14px; display: block; }
.da-footer__list { list-style: none; margin: 0; padding: 0; }
.da-footer__list li + li { margin-top: var(--space-2); }
.da-footer__list a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; line-height: 1.55; color: var(--color-white); }
.da-footer__list a:hover { color: var(--color-gold); }
.da-storeinfo { display: grid; row-gap: var(--space-3); }
.da-storeinfo__row { display: grid; grid-template-columns: 28px 1fr; align-items: start; column-gap: var(--space-2); }
.da-storeinfo__row svg { width: 18px; height: 18px; margin-top: 3px; color: var(--color-gold); }
.da-storeinfo__row p, .da-storeinfo__row a { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--color-white); margin: 0; }
.da-storeinfo__row a:hover { color: var(--color-gold); }
.da-footer .da-social a { width: 32px; height: 32px; }
.da-footer__bottom { border-top: 1px solid rgba(255,255,255,0.22); padding-top: 16px; text-align: center; }
.da-footer__bottom p { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(255,255,255,0.86); margin: 0; }

/* =========================================================================
   Responsive — breakpoints and values are the spec's, not invented
   ========================================================================= */

/* ---- 1024px–1199px : best sellers drops to 4 columns, arrows move inside -- */
@media (max-width: 1199px) {
    .da-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .da-carousel-arrow { background: rgba(255,255,255,0.86); box-shadow: var(--shadow-card); }
    .da-carousel-arrow--prev { left: 0; }
    .da-carousel-arrow--next { right: 0; }
}

/* ---- 768px–1023px : tablet ------------------------------------------- */
@media (max-width: 1023px) {
    .da-wrap, .da-wrap--wide { width: calc(100% - 32px); }

    .da-topband__grid { min-height: 250px; height: auto; grid-template-columns: 1fr 190px 1fr; column-gap: 24px; padding: 24px 0; }
    .da-topband__logo { width: 190px; height: auto; }
    .da-topband__logo img { width: 180px; }
    /* Grid items default to min-width:auto, so the utility row's min-content
       (3 links + 32px gaps ~= 420px) refused to shrink and pushed the right
       column 11px past the viewport at 768 — invisible, because the platform
       sets html,body{overflow-x:hidden !important}, so it silently CLIPPED
       "Login" and the cart badge instead of scrolling. */
    .da-topband__right { row-gap: var(--space-5); min-width: 0; }
    .da-utility { min-width: 0; flex-wrap: wrap; gap: var(--space-4); }
    .da-utility a { font-size: var(--text-sm); }
    .da-minicarts { min-width: 0; gap: var(--space-4); }
    /* "Follow Us" is the `auto` track and cannot shrink, so at 768 it still ran
       115px past the edge (clipped, not scrolled — see overflow-x note above).
       Stack the customer-service block instead of side-by-side at tablet. */
    .da-cs { width: 100%; min-width: 0; margin-top: var(--space-5); grid-template-columns: 1fr; row-gap: var(--space-3); }
    .da-social { flex-wrap: wrap; }
    .da-cs__label, .da-cs__hours, .da-cs__row a { font-size: var(--text-sm); }
    .da-social__label { font-size: var(--text-sm); }

    .da-searchbar__grid { grid-template-columns: 220px minmax(0, 1fr) auto; column-gap: 16px; }
    .da-search { max-width: 420px; }
    .da-search__form { height: 50px; }
    .da-search__btn { height: 50px; }
    .da-quicklinks { gap: 12px; }

    .da-catbar__item { font-size: var(--text-sm); }

    .da-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .da-card { height: 370px; grid-template-rows: 158px 58px 34px 28px 44px; }
    .da-card__imgwrap { height: 158px; }
    .da-carousel-arrow { display: none; }

    .da-benefits__grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .da-benefit { min-height: 116px; }
    .da-benefit:nth-child(2n) { border-right: 0; }
    .da-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }

    .da-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .da-footer__col + .da-footer__col { border-left: 0; padding-left: 0; }
    .da-footer__col:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 20px; }
}

/* ---- 768px exactly : best sellers is allowed 2 columns ---------------- */
@media (max-width: 800px) {
    .da-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* ---- <768px : stacked mobile ----------------------------------------- */
@media (max-width: 767px) {
    /*
     * MOBILE HEADER — COMPACTED 2026-09-03. The full desktop store block (logo,
     * tagline, retail address, web special, account links, customer-service hours,
     * email, Follow-Us, cart) stacked into an ~850px WALL on an iPhone: the entire
     * first screen was header chrome before the search bar or a single product.
     * High-end mobile shows branding + account + cart up top and pushes the store
     * NAP / hours / social to the footer (they are all present there already).
     * So on phones we KEEP: logo, tagline, the "online only" web-special line (the
     * owner's key message), the account/login row and the cart icons; and HIDE the
     * retail address, the customer-service block and the social row.
     */
    .da-topband__grid {
        height: auto; min-height: 0;
        grid-template-columns: 1fr; row-gap: 10px;
        padding: 14px 0 12px; text-align: center;
    }
    .da-topband__logo  { order: 1; width: 100%; height: auto; justify-content: center; }
    .da-topband__logo img { width: 108px; max-height: 92px; }
    .da-topband__left  { order: 2; max-width: 100%; text-align: center; padding-top: 0; }
    .da-intro          { font-size: var(--text-sm); line-height: 1.25; }
    .da-intro__hi      { font-size: var(--text-md); margin-top: 0; }
    .da-topband__right { display: contents; }

    /* Retail address + customer-service + social all live in the footer on mobile. */
    .da-infoblock__icon,
    .da-infoblock__label,
    .da-infoblock__body,
    .da-cs__hours,
    .da-cs__contact,
    .da-cs__row,
    .da-cs__label,
    .da-social { display: none !important; }

    /* Keep only the owner's "Web Special: online only" line, compact. */
    .da-infoblock  { display: block; justify-content: center; text-align: center; margin-top: 2px; }
    .da-webspecial { margin-top: 0; }
    .da-webspecial__label { display: inline; font-size: var(--text-xs); }
    .da-webspecial__body  { display: inline; font-size: var(--text-xs); }
    .da-cs { display: none; }

    /* Account / login: one centered wrapping row, each link sized to its text. */
    .da-utility {
        order: 3; display: flex; flex-wrap: wrap; justify-content: center;
        gap: 8px 16px; margin-top: 4px;
    }
    .da-utility a { min-height: 36px; font-size: var(--text-sm); }
    .da-utility svg { width: 15px; height: 15px; }
    .da-social { justify-content: center; }
    .da-social a { width: 40px; height: 40px; }
    .da-minicarts { order: 5; justify-content: center; gap: 24px; margin-top: var(--space-2); }

    /* Section 2 */
    .da-searchbar__grid { height: auto; grid-template-columns: 1fr; row-gap: 12px; padding-block: 14px; }
    .da-searchbar .da-wrap { width: calc(100% - 24px); }
    .da-home { order: 1; justify-content: center; }
    .da-search { order: 2; width: 100%; max-width: none; }
    .da-search__form { height: 48px; }
    .da-search__btn { height: 48px; width: 48px; }
    .da-search__input { font-size: var(--text-sm); padding: 0 50px 0 20px; }
    .da-quicklinks { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
    .da-quicklinks a { min-height: 40px; justify-content: center; text-align: center; font-size: var(--text-sm); }
    .da-quicklinks__sep { display: none; }

    /* Section 3 — contained horizontal scroll, page must not overflow */
    .da-catbar .da-wrap { width: 100%; }
    .da-catbar__grid {
        height: auto; display: flex; overflow-x: auto; scroll-snap-type: x proximity;
        padding-inline: 12px; -webkit-overflow-scrolling: touch;
    }
    .da-catbar__item { flex: 0 0 auto; min-width: 150px; min-height: 58px; padding-inline: 16px; scroll-snap-align: start; }
    .da-catbar__item.is-active::after { width: 82px; height: 4px; }

    /* Section 4 */
    .da-bestsellers { padding: 18px 0 32px; }
    .da-bestsellers .da-wrap--wide { width: calc(100% - 24px); }
    .da-sechead__titlerow { grid-template-columns: 32px auto 32px; gap: 10px; }
    .da-sechead__rule { width: 32px; }
    .da-sechead__title { font-size: var(--text-2xl); }
    .da-sechead__sub { font-size: var(--text-sm); }
    .da-pgrid { grid-template-columns: 1fr; gap: 14px; }
    .da-card { height: auto; min-height: 346px; padding: 14px; grid-template-rows: 150px auto auto auto 44px; }
    .da-card__imgwrap { height: 150px; }
    .da-card__imgwrap img { max-height: 140px; }
    .da-card__name { -webkit-line-clamp: 3; }
    .da-card__price { font-size: var(--text-lg); }
    .da-btn-cart { height: 44px; }
    .da-dot { width: 10px; height: 10px; }

    /* Section 5 */
    .da-benefits .da-wrap--wide { width: calc(100% - 24px); }
    .da-benefits__grid { grid-template-columns: 1fr; padding-block: 10px; }
    .da-benefit { grid-template-columns: 56px 1fr; min-height: 88px; padding: 12px 4px; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .da-benefit:last-child { border-bottom: 0; }
    .da-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
    .da-benefit__icon, .da-benefit__icon svg { width: 44px; height: 44px; }
    .da-benefit__title { font-size: var(--text-sm); }

    /* Section 6 */
    .da-footer { padding: 28px 0 22px; }
    .da-footer .da-wrap--wide { width: calc(100% - 32px); }
    .da-footer__cols { grid-template-columns: 1fr; gap: 24px; padding-bottom: 22px; }
    .da-footer__col + .da-footer__col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 20px; }
    .da-footer__logo { width: 112px; }
    .da-footer__bottom p { font-size: var(--text-xs); line-height: 1.5; }
}

@media (max-width: 639px) {
    .da-carousel-arrow { display: none; }
}

/* =========================================================================
   Legacy suppression — the TGD chrome this skin replaces.
   The markup is gone from includes/header.php / footer.php, but theme.css
   still ships rules (several with !important) that would otherwise re-style
   or re-space our new bands. Suppress by selector, never by editing theme.css.
   ========================================================================= */
/* --- professional-fixes.min.css overrides -------------------------------
   That file is linked AFTER the brand-*.css glob (includes/header.php:246)
   and re-skins the site with !important, so it silently beat this skin:

     .site-footer,.footer,footer { background:#2c3e50 !important }   navy lost
     .site-footer h2..h4         { color:#ffffff !important }        gold lost
     .site-footer p,li,a         { color:#e0e0e0 !important }
     .site-footer a:hover        { color:#ff6b35 !important }        TGD orange
     .site-footer svg,footer svg { width/height 24px !important }
     h1..h6,.product-title       { font-family:'Roboto Condensed' !important }
     body                        { font-family:'Roboto' !important }
     * { letter-spacing:0 !important }

   The last three are why every heading rendered in Roboto Condensed instead
   of Oswald. Do not edit professional-fixes.min.css — it is shared platform
   code with no build step; override by selector here instead. Each rule below
   is specific enough (two classes) to outrank the platform's element/one-class
   selectors at equal !important weight.
   ------------------------------------------------------------------------ */
.da-chrome .da-intro,
.da-chrome .da-catbar__item,
.da-bestsellers .da-sechead__title,
.da-bestsellers .da-card__name,
.da-benefits .da-benefit__title,
.da-footer .da-footer__title {
    font-family: var(--font-heading) !important;
}
.da-chrome .da-home,
.da-chrome .da-quicklinks a,
.da-chrome .da-search__input,
.da-bestsellers .da-sechead__sub,
.da-bestsellers .da-card__spec,
.da-bestsellers .da-card__msrp,
.da-benefits .da-benefit__copy,
.da-footer .da-footer__copy,
.da-footer .da-footer__list a,
.da-footer .da-storeinfo__row p,
.da-footer .da-storeinfo__row a {
    font-family: var(--font-body) !important;
}
.da-chrome .da-catbar__item { letter-spacing: 0.04em !important; }
.da-bestsellers .da-sechead__title { letter-spacing: 0.02em !important; color: var(--color-ink-navy) !important; }
.da-bestsellers .da-card__name { color: var(--color-ink) !important; }
.da-bestsellers .da-card__price { color: var(--color-price-red) !important; }
.da-bestsellers .da-card__price--phrase { color: var(--color-navy) !important; }
.da-bestsellers .da-card__msrp { color: var(--color-muted) !important; }
.da-benefits .da-benefit__title { color: var(--color-ink) !important; }

/* footer: restore the approved navy, gold headings and white body text */
footer.site-footer.da-footer {
    background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-dark) 100%) !important;
    color: var(--color-white) !important;
}
.da-footer .da-footer__title { color: var(--color-gold) !important; }
.da-footer .da-footer__copy,
.da-footer .da-footer__list a,
.da-footer .da-storeinfo__row p,
.da-footer .da-storeinfo__row a,
.da-footer .da-social__label { color: var(--color-white) !important; }
.da-footer .da-footer__list a:hover,
.da-footer .da-storeinfo__row a:hover,
.da-footer .da-social a:hover { color: var(--color-gold) !important; }
.da-footer .da-footer__bottom p { color: rgba(255,255,255,0.86) !important; }
/* platform forces every footer svg to 24px; our icons are sized per slot */
.da-footer .da-storeinfo__row svg { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; }
.da-footer .da-social svg { width: 24px !important; height: 24px !important; }
.da-footer .da-footer__logo { max-width: 126px !important; height: auto !important; }

.da-chrome .container { max-width: none !important; padding: 0 !important; width: auto !important; }
.site-header.da-chrome { background: none !important; box-shadow: none !important; border: 0 !important; }
/* REMOVED 2026-09-03 — this blanket `body.da-skin { display:none }` list was a
   belt-and-braces guard for the old homepage bands, but body.da-skin is on EVERY
   page, and two of those class names are shared platform classes:

     .features-section  wraps the product DESCRIPTION on product.php — it hid the
                        real description on all 76,555 products that have one.
     .products-section  wraps the product grids on category.php, caliber.php and
                        includes/related-products.php — it hid those too.

   The guard was never needed: index.php no longer emits the hero / tabbed
   products / gift-card / features / blog bands, and the TheGunDock
   header-top / header-main / main-nav markup was deleted from header.php. Kill
   the markup, don't blanket-hide class names you don't own. */

/* ===== Store announcement band (2026-09-04) — clean, professional, below primary nav ===== */
.da-announce{background:#f3f6fb;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;}
.da-announce__inner{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 16px;flex-wrap:wrap;text-align:center;}
.da-announce__pill{background:#b8860b;color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;flex:0 0 auto;}
.da-announce__text{color:#1a2c4e;font-weight:700;font-size:14.5px;}
.da-announce__cta{color:#b91c1c;font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap;flex:0 0 auto;}
.da-announce__cta:hover{text-decoration:underline;}
@media (max-width:600px){.da-announce__inner{gap:8px;padding:8px 12px;}.da-announce__text{font-size:13px;}}

/* =========================================================================
   Section 9 — Mobile touch and input guards                    (2026-09-29)

   professional-fixes.css puts its 44px tap-target rule and its 16px input
   rule inside @media (max-width: 480px) ONLY. The result measured on a real
   device emulation is an inversion: targets get WORSE as the screen gets
   bigger. On cart.php the qty buttons are 44px at 390 and 32x32 at 768; the
   Remove button is 44px at 390 and 64x23 at 768. Phones in landscape and
   every small tablet land in that unprotected 481-1024 band.

   iOS zooms the page when a focused field is under 16px, and the 480px rule
   also omits password, number, date and textarea from its selector list -
   so the checkout create-account password fields (14px) and every review
   textarea (15px) zoom on focus, on the two pages where that is most
   disruptive.

   ⚠ LOADED BEFORE professional-fixes.min.css, so these only win where that
   file declares nothing. That is the case here: outside its 480px block it
   sets no font-size or min-height on these elements. Inside it, both files
   say the same thing.
   ========================================================================= */
@media (max-width: 1024px) {
    button, input[type="submit"], input[type="button"], .btn, a.btn,
    .pagination-btn, .cat-chip, .qty-btn, .btn-remove {
        min-height: 44px;
        min-width: 44px;
    }
    .da-footer a, .footer-links a, .da-quicklinks a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}
/* Unconditional: a 14px field zooms iOS at every width, not only under 480. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    font-size: 16px;
}