/* Urban Tactical Firearms - custom store CSS
   Loaded last, so rules here override the Covent Garden theme.
   Lives in WebDAV at content/css/custom.css so it survives theme updates.
   Created 14 August 2026. */

/* Placeholder - no rules yet. This file exists so the theme setting
   has something to load. Day 11 image and layout fixes go below. */

/* ============================================================
   BEGIN UTF-MEGAMENU v4  (2026-08-22)  — COMMITTED DESIGN
   Contained mega panels in the PSA pattern:
     • Guns / Ammo / Optics / Accessories  → category rail on the
       left, "Shop all" buttons, product image tiles, promo card
       on the right rail.
     • Training/Services & Support         → compact link panel
       with a promo card.
     • Blog                                → plain link.
   Panels shrink to fit their content and are centered under the
   nav. Applies from 801px up — the width at which the theme itself
   switches to its horizontal desktop nav. Below that, the mobile
   blocks take over. Keep these two boundaries in sync.
   Pair with the "UTF Megamenu" script v4 (Script Manager).
   CSS is inert without the script — safe to paste on its own.
   Palette: black, white, army green only — no other accent colors.
     --utf-accent      #4B5320 army green (borders, hovers, chevrons)
     --utf-cta         army green → black gradient, sampled from the
                       theme's own Add to Cart buttons
   Rollback: delete everything between BEGIN and END markers.
   ============================================================ */
@media (min-width: 801px) {

  :root {
    --utf-accent: #4B5320;
    --utf-cta: linear-gradient(to right, rgb(75, 83, 32), rgb(0, 0, 0));
    --utf-cta-solid: rgb(75, 83, 32);
  }

  .navPages-container { position: relative; }

  /* ---------- shared panel shell ---------- */
  .utfPanel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e2e2e2;
    border-top: 5px solid var(--utf-accent);   /* thicker than the red
                              version was — green sits closer to black
                              in value, so it needs weight to register */
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
    z-index: 900;
    display: none;
  }
  .utfPanel.on { display: flex; }

  /* ---------- mega panel (category menus) ---------- */
  .utfMega {
    width: auto;
    min-width: 960px;
    max-width: 1120px;
    align-items: stretch;
  }

  .utfRail {
    flex: 0 0 215px;
    background: #fafaf8;   /* lighter than before, so the selected
                              green row separates from the rail */
    padding: 16px 0;
    border-right: 1px solid #e6e6e6;
    max-height: 74vh;      /* long category lists scroll rather than
                              pushing the panel off screen */
    overflow-y: auto;
  }
  .utfRail button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-left: 4px solid transparent;   /* marker slot, filled when
                                             selected — shape carries
                                             the state, not just hue */
    padding: 14px 22px 14px 18px;
    font: 700 12.5px/1.2 Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a1a1a;
    cursor: pointer;
  }
  .utfRail button:hover { background: #f0f0ec; }
  .utfRail button.sel {
    background-image: var(--utf-cta);
    border-left-color: #000;
    color: #fff;
  }

  .utfPane {
    flex: 1 1 auto;
    position: relative;
    padding: 24px 28px 26px;
    min-width: 560px;   /* guarantees the 3-column tile grid below;
                           without it the panel shrink-wraps to 2
                           columns and 6 tiles spill to a 3rd row */
    min-height: 0;
    max-height: 74vh;
    overflow-y: auto;
  }

  /* subcategories past TILE_LIMIT — kept reachable, never hidden */
  .utfMore {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #ededed;
  }
  .utfMore h6 {
    margin: 0 0 12px;
    font: 700 12px Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1a1a1a;
  }
  .utfMore ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3;
    column-gap: 24px;
  }
  .utfMore li { break-inside: avoid; margin: 0 0 9px; }
  .utfMore a {
    font: 400 12.5px Montserrat, Arial, sans-serif;
    color: #2b2b2b;
    text-decoration: none;
  }
  .utfMore a:hover { color: var(--utf-accent); text-decoration: underline; }

  /* terminal "See all X" link, when SHOW_SEE_ALL is on */
  .utfSeeAll {
    display: inline-block;
    margin-top: 14px;
    font: 700 12.5px Montserrat, Arial, sans-serif;
    color: var(--utf-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .utfSeeAll:hover { text-decoration: underline; }

  .utfBtns { display: flex; gap: 14px; margin-bottom: 22px; }
  .utfBtns a {
    flex: 1;
    min-width: 200px;
    white-space: nowrap;
    text-align: center;
    padding: 11px 14px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    font: 600 12.5px Montserrat, Arial, sans-serif;
    color: #1a1a1a;
    text-decoration: none;
  }
  .utfBtns a:hover {
    border-color: var(--utf-cta-solid);
    color: var(--utf-cta-solid);
  }

  .utfTiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* explicit, not auto-fit:
                              auto-fit silently dropped to 2 columns
                              when the pane was a few px short */
    gap: 22px;
  }
  .utfTile { display: block; text-align: center; text-decoration: none; }
  .utfTile span {
    height: 94px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .utfTile img { max-width: 100%; max-height: 92px; object-fit: contain; }
  .utfTile em {
    display: block;
    font: 400 12.5px Montserrat, Arial, sans-serif;
    font-style: normal;
    color: #2b2b2b;
    margin-top: 10px;
  }
  .utfTile:hover em { color: var(--utf-accent); text-decoration: underline; }

  /* ---------- compact panel (Training / Support) ---------- */
  .utfSimple {
    display: none;
    width: 770px;
    padding: 24px 300px 26px 28px;
    min-height: 372px; /* must clear the absolutely positioned card */
  }
  .utfSimple.on { display: block; }
  .utfSimple a.utfLnk {
    display: block;
    font: 700 12.5px Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1a1a1a;
    text-decoration: none;
    margin-bottom: 16px;
  }
  .utfSimple a.utfLnk:hover { color: var(--utf-accent); }
  .utfSimple a.utfLnk:after { content: " \203A"; color: var(--utf-accent); }

  /* ---------- promo card (both panel types) ----------
     On mega panels the card is a flex column, so the panel always
     grows to contain it (a short pane can't push it past the border).
     On the compact panel it stays absolutely positioned, with
     .utfSimple's min-height guaranteeing it fits. */
  .utfPromo {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 262px;
    border: 1px solid #e6e6e6;
    background: #fff;
  }
  .utfMega .utfPromo {
    position: static;
    flex: 0 0 262px;
    align-self: flex-start;
    margin: 24px 26px 24px 0;
  }
  .utfPromo a { display: block; text-decoration: none; }
  .utfPromo img { width: 100%; height: 142px; object-fit: cover; display: block; }
  .utfPromo .utfPh {
    height: 142px;
    background: #20241a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfd3c4;
    font: 700 11px Montserrat, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 14px;
  }
  .utfPromo b {
    display: block;
    font: 800 14px Montserrat, Arial, sans-serif;
    color: #1a1a1a;
    padding: 12px 16px 0;
  }
  .utfPromo i {
    display: block;
    font-style: normal;
    font: 400 12px Montserrat, Arial, sans-serif;
    color: #5c5c5c;
    padding: 4px 16px 0;
    line-height: 1.5;
  }
  .utfCta {
    display: inline-block;
    margin: 12px 16px 16px;
    padding: 11px 18px;
    background-image: var(--utf-cta);
    color: #fff;
    font: 700 12.5px Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 0;
  }
  .utfPromo a:hover .utfCta { opacity: .9; }

  /* hide the theme's own dropdown on menus we've replaced */
  .navPages-item.utf-replaced > .navPage-subMenu { display: none !important; }

}
/* ===== END UTF-MEGAMENU v4 ===== */


/* ============================================================
   BEGIN UTF-MEGAMENU v4 — SMALL LAPTOP
   960–1279px (13"/14" laptops). Same panel, tightened.
   Desktop only — contains no mobile rules.
   ============================================================ */

/* ---------- 1. small laptops (13" / 14") ---------- */
@media (min-width: 960px) and (max-width: 1279px) {
  .utfMega {
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 32px);
  }
  .utfRail { flex: 0 0 180px; padding: 10px 0; max-height: 70vh; }
  .utfRail button { padding: 11px 16px 11px 12px; font-size: 11.5px; }
  .utfPane { padding: 18px 20px 20px; min-width: 452px; max-height: 70vh; }
  .utfBtns { gap: 10px; margin-bottom: 16px; }
  .utfBtns a { min-width: 0; padding: 9px 10px; font-size: 11.5px; }
  .utfTiles { gap: 16px; grid-template-columns: repeat(3, 1fr); }
  .utfTile span { height: 76px; }
  .utfTile img { max-height: 74px; }
  .utfTile em { font-size: 11.5px; margin-top: 7px; }
  .utfMega .utfPromo { flex: 0 0 216px; margin: 18px 18px 18px 0; }
  .utfPromo img, .utfPromo .utfPh { height: 118px; }
  .utfPromo b { font-size: 13px; padding: 10px 14px 0; }
  .utfPromo i { font-size: 11.5px; padding: 4px 14px 0; }
  .utfCta { margin: 10px 14px 14px; padding: 9px 14px; font-size: 11.5px; }
  .utfSimple { width: auto; max-width: calc(100vw - 32px); padding: 20px 250px 22px 22px; min-height: 320px; }
  .utfSimple .utfPromo { width: 216px; top: 18px; right: 18px; }
  .utfMore ul { columns: 2; }
}
/* ===== END UTF-MEGAMENU v4 — SMALL LAPTOP ===== */

/* ============================================================
   BEGIN UTF-MEGAMENU v4 — COMPACT
   801–959px. The theme switches to its horizontal desktop nav at
   801px, so panels have to work from there down.

   Below roughly 910px the rail + pane + promo card no longer fit
   side by side, so at this width the card is dropped and the rail
   narrowed. Tiles stay three across.

   Without this block the panel overflows the viewport between 801
   and 959px — which is where a phone in "Desktop site" mode, and
   most tablets in landscape, actually land.

   Revert: delete everything between these two markers.
   ============================================================ */
@media (min-width: 801px) and (max-width: 959px) {
  .utfMega {
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 24px);
  }
  .utfRail { flex: 0 0 152px; padding: 8px 0; max-height: 68vh; }
  .utfRail button {
    padding: 10px 12px 10px 10px;
    font-size: 10.5px;
    letter-spacing: .02em;
  }
  .utfPane { padding: 14px 16px 16px; min-width: 400px; max-height: 68vh; }
  .utfBtns { gap: 8px; margin-bottom: 12px; }
  .utfBtns a { min-width: 0; padding: 8px; font-size: 10.5px; }
  .utfTiles { gap: 12px; grid-template-columns: repeat(3, 1fr); }
  .utfTile span { height: 64px; }
  .utfTile img { max-height: 62px; }
  .utfTile em { font-size: 11px; margin-top: 6px; }

  /* no room for the card at this width */
  .utfMega .utfPromo { display: none; }

  .utfSimple {
    width: auto;
    max-width: calc(100vw - 24px);
    padding: 18px 20px;
    min-height: 0;
  }
  .utfSimple .utfPromo { display: none; }

  .utfMore ul { columns: 2; }
}
/* ===== END UTF-MEGAMENU v4 — COMPACT ===== */





/* ============================================================
   BEGIN UTF-MEGAMENU v4 — MOBILE CARD
   Styles only the promo card the script adds below the mobile
   menu. Additive — it does not touch the theme's own menu, so it
   carries none of the risk of the full mobile block.
   Remove between these markers to revert.
   ============================================================ */
@media (max-width: 800px) {
  :root {
    --utf-accent: #4B5320;
    --utf-cta: linear-gradient(to right, rgb(75, 83, 32), rgb(0, 0, 0));
  }

  .utfMobilePromo {
    margin: 20px 18px 28px;
    border: 1px solid #e6e6e6;
    background: #fff;
  }
  .utfMobilePromo a { display: block; text-decoration: none; }
  .utfMobilePromo img { width: 100%; height: 150px; object-fit: cover; display: block; }
  .utfMobilePromo .utfPh {
    height: 150px;
    background: #20241a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfd3c4;
    font: 700 11px Montserrat, Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 14px;
  }
  .utfMobilePromo b {
    display: block;
    font: 800 15px Montserrat, Arial, sans-serif;
    color: #1a1a1a;
    padding: 14px 16px 0;
  }
  .utfMobilePromo i {
    display: block;
    font-style: normal;
    font: 400 13px Montserrat, Arial, sans-serif;
    color: #5c5c5c;
    padding: 5px 16px 0;
    line-height: 1.5;
  }
  .utfMobilePromo .utfCta {
    display: block;
    text-align: center;
    margin: 14px 16px 16px;
    padding: 14px 18px;
    background-image: var(--utf-cta);
    color: #fff;
    font: 700 13px Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
}
/* ===== END UTF-MEGAMENU v4 — MOBILE CARD ===== */










/* ============================================================
   BEGIN UTF-MEGAMENU v4 — MOBILE ROWS  (v2)
   Category rows in the theme's mobile menu, PSA shape in your
   colours. Slate background stays.

   v2: the first version made each row a flex container, which
   disturbed the theme's own sizing of the chevron <i><svg> and
   blew it up into a large bordered box over the label. This
   version uses block layout with the chevron absolutely
   positioned, so it cannot interact with the icon at all, and
   pins the icon's size explicitly as a belt-and-braces measure.

   Revert: delete everything between these two markers.
   ============================================================ */
@media (max-width: 800px) {

  :root { --utf-accent: #4B5320; }

  /* ---------- top level: GUNS, AMMO, OPTICS ---------- */
  .navPages-list > .navPages-item > .navPages-action {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 15px 46px 15px 18px;   /* right gap reserves the chevron */
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .navPages-list > .navPages-item > .navPages-action[aria-expanded="true"] {
    background: var(--utf-accent);
  }

  /* ---------- second level: Handguns, Rifles ---------- */
  .navPage-subMenu-list > li > .navPage-subMenu-action {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 13px 46px 13px 30px;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    color: #ebebeb;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .navPage-subMenu-list > li > .navPage-subMenu-action[aria-expanded="true"] {
    background: var(--utf-accent);
    color: #fff;
    font-weight: 700;
  }

  /* ---------- third level, where a group has no tiles ---------- */
  .navPage-subMenu-item-child .navPage-subMenu-list > li > .navPage-subMenu-action {
    padding-left: 42px;
    font-weight: 400;
    font-size: 14px;
    color: #cfcfcf;
  }

  /* ---------- chevron ----------
     Taken out of flow entirely and pinned to the right edge. Size is
     stated on both the <i> and the <svg> so nothing can stretch it. */
  .navPages-action .navPages-action-moreIcon {
    position: absolute !important;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px !important;
    height: 12px !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
    flex: none !important;
  }
  .navPages-action .navPages-action-moreIcon svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    border: 0 !important;
  }

  /* ---------- account rows at the bottom ---------- */
  .navPages-list--user > .navPages-item > .navPages-action {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 13px 18px;
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
    color: #ebebeb;
  }

  .navPages-action:active,
  .navPage-subMenu-action:active { background: rgba(255,255,255,.06); }
}
/* ===== END UTF-MEGAMENU v4 — MOBILE ROWS ===== */






/* ============================================================
   BEGIN UTF-MEGAMENU v4 — MOBILE TILES
   Puts the desktop panel content inside the theme's own mobile
   accordion: "Shop all" buttons and a two-column image grid,
   on white, sitting inside the dark menu.

   The theme still owns expand and collapse. This only hides the
   plain text list inside an expanded group and styles the block
   the script appends in its place.

   Revert: delete everything between these two markers. The menu
   returns to the theme's plain text accordion.
   ============================================================ */
@media (max-width: 800px) {

  :root {
    --utf-accent: #4B5320;
    --utf-cta: linear-gradient(to right, rgb(75, 83, 32), rgb(0, 0, 0));
  }

  /* the theme's text list for a group that now has tiles */
  .utfMHidden { display: none !important; }

  /* white content block inside the dark menu */
  .utfMTiles {
    background: #fff;
    padding: 16px 14px 18px;
  }

  /* Shop all buttons — two visibly distinct buttons, not one box with
     a divider. Primary is filled, secondary outlined, with a real gap. */
  .utfMBtns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 18px;
  }
  .utfMBtns a {
    display: block;
    box-sizing: border-box;
    padding: 13px 14px;
    text-align: center;
    font: 700 14px Montserrat, Arial, sans-serif;
    text-decoration: none;
    border-radius: 4px;
    min-height: 46px;
  }
  /* Primary uses the same green-to-black gradient as the Add to Cart
     buttons, so a menu CTA and a buy button read as the same family.

     Two alternatives, if you want to compare — replace the background
     line below with one of these:
       flat black   background: #111;
       army green   background: var(--utf-accent);

     Flat black gives the most separation from the green open-state bar
     sitting directly above this block. The gradient starts green on the
     left, so it sits closer to that bar than flat black does. */
  .utfMBtnPrimary {
    background: var(--utf-cta);
    color: #fff;
    border: 1px solid transparent;
  }
  .utfMBtnSecondary {
    background: #fff;
    color: #111;
    border: 1px solid #c9c9c9;
  }
  .utfMBtns a:active { opacity: .85; }

  /* two-column tile grid */
  .utfMGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
  }
  .utfMTile {
    display: block;
    text-align: center;
    text-decoration: none;
    min-height: 44px;
  }
  .utfMTile span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    overflow: hidden;
  }
  .utfMTile img {
    max-width: 100%;
    max-height: 94px;
    object-fit: contain;
  }
  .utfMTile em {
    display: block;
    font: 400 14px Montserrat, Arial, sans-serif;
    font-style: normal;
    color: #2b6cb0;
    margin-top: 8px;
    line-height: 1.3;
  }
  .utfMTile:active em { color: var(--utf-accent); }

  /* the rest of the group, past the six that have images */
  .utfMMore {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
  }
  .utfMMore h6 {
    margin: 0 0 12px;
    font: 700 12.5px Montserrat, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #1a1a1a;
  }
  .utfMMore ul { list-style: none; margin: 0; padding: 0; }
  .utfMMore li { margin: 0; border-bottom: 1px solid #f0f0f0; }
  .utfMMore li:last-child { border-bottom: 0; }
  .utfMMore a {
    display: block;
    padding: 12px 2px;
    min-height: 44px;
    box-sizing: border-box;
    font: 400 14.5px Montserrat, Arial, sans-serif;
    color: #2b6cb0;
    text-decoration: none;
  }
  .utfMMore a:active { color: var(--utf-accent); }

  /* narrow phones: keep two columns but tighten */
  @media (max-width: 380px) {
    .utfMTiles { padding: 14px 11px 16px; }
    .utfMGrid { gap: 14px 10px; }
    .utfMTile span { height: 84px; }
    .utfMTile img { max-height: 82px; }
    .utfMTile em { font-size: 13px; }
  }
}
/* ===== END UTF-MEGAMENU v4 — MOBILE TILES ===== */

/* ============================================================
   BEGIN UTF-HOMEPAGE — FEATURED CATEGORY TILES
   The green label under each Featured Categories tile sizes to its
   text, so a two-line name (NJ Compliant Firearms, Defensive
   Shotguns 12ga, Double Action Revolvers) sits taller than a
   one-line one and the row misaligns. Give every label the same
   height — enough for two lines — and centre the text in it.
   Mobile only: on desktop the tiles are wide enough that nothing
   wraps, so those keep their natural height.
   Fixes the row without depending on how long a category name is.
   Revert: delete everything between these two markers.
   ============================================================ */
@media (max-width: 800px) {
  .featuredCategory-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;        /* 2 lines x 24px + 24px padding top and bottom */
    box-sizing: border-box;
    text-align: center;
  }
}
/* ===== END UTF-HOMEPAGE — FEATURED CATEGORY TILES ===== */

/* ============================================================
   BEGIN UTF-HOMEPAGE — PAIRED BANNERS
   The two-up storyboard sections (NJ Conceal Carry / Concealed
   Carry Collection, Shotgun Showdown / All the Ammo) size each
   slide to its own image, so images with different proportions
   give a pair different heights and the bottom edges misalign.
   Force every slide in a two-up section to the same 3:2 shape
   and let the image crop to fill it. 3:2 matches the tallest
   image already in use, so nothing is stretched — the shorter
   ones lose a little off the top and bottom instead.
   Desktop only (801px up): on mobile the two slides stack
   vertically, so there is nothing to align, and the theme lays
   the overlay out differently there — clipping it hid the
   headline and CTA.
   Revert: delete everything between these two markers.
   ============================================================ */
@media (min-width: 801px) {
  .heroStoryboard.show--2 .heroCarousel-slide {
    aspect-ratio: 3 / 2;
    height: auto;
    overflow: hidden;
    position: relative;
  }
  .heroStoryboard.show--2 .heroCarousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* ===== END UTF-HOMEPAGE — PAIRED BANNERS ===== */


/* ============================================================
   BEGIN UTF-ANNOUNCEMENT BAR  (2026-09-03, v2)
   Replaces the Elfsight announcement widget.

   Markup lives in a Page Builder HTML widget dropped into the
   below_header--global region, so it renders on every template
   with no Script Manager entry and no JavaScript at all.

   Palette follows the megamenu: black, white, army green only.
   The Elfsight bar used a red CTA. The green-to-black gradient
   here is the same one the Add to Cart buttons, the megamenu
   promo cards and the mobile menu buttons already use, so the
   bar reads as part of the site rather than a bolt-on. If you
   want the red back, swap the .utf-promo__cta background line
   for  background: #e8312a;  and the hover for  #c9241e.

   No dismiss button by design — the bar is permanent, which is
   what lets it stay script-free.

   v2 changes:
     • text-decoration killed outright. The theme underlines
       links inside content regions, which showed up on both
       the sentence and the button. Stated with !important on
       every state because the theme's rule is more specific
       than a plain class selector.
     • Two copies of the sentence, long and short. Below 600px
       the long one is hidden and the short one shown, which is
       what keeps the bar on a single line on a phone — the
       full sentence plus a button cannot fit under ~380px.
       Keep the short version at 26 characters or fewer.

   CSS is inert without the widget markup — safe to paste alone.

   Revert: delete everything between these two markers, then
   delete the widget in Page Builder.
   ============================================================ */

.utf-promo {
  /* restated so the block works even if pasted on its own */
  --utf-accent: #4B5320;
  --utf-cta: linear-gradient(to right, rgb(75, 83, 32), rgb(0, 0, 0));

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: #000;
  color: #fff;
  padding: 14px 20px;
  text-align: center;
}

/* No underlines anywhere in the bar, in any state. The theme
   underlines links inside Page Builder content regions, so this
   has to be stated loudly or the sentence and button both get
   a line under them. */
.utf-promo,
.utf-promo *,
.utf-promo a,
.utf-promo a:link,
.utf-promo a:visited,
.utf-promo a:hover,
.utf-promo a:focus,
.utf-promo a:active {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.utf-promo__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.utf-promo__text {
  font: 500 15px/1.3 Montserrat, Arial, sans-serif;
  color: #fff;
}

/* long copy on desktop, short copy on phones */
.utf-promo__text--short { display: none; }

.utf-promo__cta {
  display: inline-block;
  padding: 10px 18px;
  background-image: var(--utf-cta);
  color: #fff;
  font: 700 12.5px Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 0;
  border-radius: 4px;
  white-space: nowrap;
}
.utf-promo__cta:hover,
.utf-promo__cta:focus {
  color: #fff;
  opacity: .9;                                   /* same hover treatment
                                                    as the promo cards */
}
.utf-promo__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Page Builder wraps widgets in a container that may carry side
   padding. These two rules let the black bar run edge to edge
   inside it. If the bar already spans the full width on your
   store, they are harmless no-ops. */
[data-content-region="below_header--global"] { padding: 0 !important; }
[data-content-region="below_header--global"] > div { margin: 0 !important; }

@media (max-width: 600px) {
  .utf-promo {
    flex-wrap: nowrap;              /* one line, no exceptions */
    gap: 8px;
    padding: 12px;
  }
  .utf-promo__icon { display: none; }   /* the text needs the room more
                                           than the megaphone does */

  .utf-promo__text--full  { display: none; }
  .utf-promo__text--short { display: inline; }

  .utf-promo__text { font-size: 13px; white-space: nowrap; }
  .utf-promo__cta {
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: 0;
    flex: none;
  }
}

/* very narrow phones (Galaxy Fold, older SE) */
@media (max-width: 340px) {
  .utf-promo__text { font-size: 12px; }
  .utf-promo__cta { padding: 8px 10px; font-size: 10.5px; }
}
/* ===== END UTF-ANNOUNCEMENT BAR ===== */


/* ============================================================
   BEGIN UTF-BRAND CAROUSEL  (2026-09-03, v2)
   Replaces the Elfsight Logo Showcase app under the
   "Shop Popular Brands" heading on the homepage. The heading
   is its own Page Builder widget and is left alone.

   Images live in WebDAV at content/brands/ and are served from
   /content/brands/<slug>.png.

   Every logo is pre-normalised to equal ink AREA and cropped to
   its own content width, then padded vertically to a common 120px
   height. So a wide wordmark is a wide file and a compact mark is
   a narrow one, and the visible gap between any two logos is just
   the CSS gap below — nothing else to tune.

   The earlier version fitted every logo into an identical 400x140
   box and gave each one an identical tile. That looked uneven:
   Bergara and Hi-Point filled their tile edge to edge while Glock
   and Colt floated in the middle of theirs, so equal tiles read as
   unequal gaps. Sizing by ink is what fixes it.

   Run any logo you add later through the same treatment or it will
   sit oddly next to the rest.

   v2 changes:
     • Greyscale-at-rest removed. Logos show in full colour.
     • Click-and-drag for mouse and pen. Touch was already scrolling
       natively; on desktop the arrows were the only way to move the
       strip, and their fixed hop can overshoot a logo.
     • Scroll snap removed and scroll-behavior set to auto. The
       script drives a continuous marquee by writing scrollLeft
       every frame; snap would fight it, and a smooth
       scroll-behavior would animate every one of those writes.
       The arrows pass behavior:'smooth' explicitly instead, so
       they still glide.

   The script clones the logo set once at runtime for a seamless
   loop, pauses on hover, touch, wheel, hidden tab and off-screen,
   and honours prefers-reduced-motion by never starting.

   CSS is inert without the widget markup — safe to paste alone.

   Revert: delete everything between these two markers, then
   delete the widget in Page Builder.
   ============================================================ */

.utf-brands {
  --utf-brand-h: 58px;          /* logo height — the one size dial */
  --utf-brand-gap: 44px;        /* the real gap between logos */
  position: relative;
  padding: 0 46px;              /* room for the arrows to sit in */
  max-width: 1400px;            /* the global region is full-bleed; without
                                   this the strip runs wider than the hero
                                   and the arrows end up out in the margins */
  margin: 0 auto;
  box-sizing: border-box;
}

.utf-brands__track {
  display: flex;
  gap: var(--utf-brand-gap);
  overflow-x: auto;
  scroll-behavior: auto;        /* see v2 note above */
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;
  /* logos fade out at the edges instead of hard-cutting under the
     arrows — a mask, so it works on any background colour */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.utf-brands__track::-webkit-scrollbar { display: none; }

/* Grab-and-drag affordance. The script binds drag for mouse and pen
   only — touch already scrolls natively — so the grab cursor is
   desktop-only by nature. Drag exists because the arrows move in
   fixed hops and can carry a shopper past the logo they were
   reaching for; dragging lets them land on it. */
.utf-brands__track { cursor: grab; }
.utf-brands__track.is-dragging { cursor: grabbing; }
/* stop the browser's own image-drag ghost from hijacking the gesture */
.utf-brands__item img { -webkit-user-drag: none; user-select: none; }

.utf-brands__item {
  flex: 0 0 auto;               /* width comes from the logo, not a tile */
  display: block;
  padding: 4px 0;
  text-decoration: none;
  opacity: .9;
  transition: opacity .18s;
}
.utf-brands__item:hover,
.utf-brands__item:focus-visible { opacity: 1; }
.utf-brands__item img {
  height: var(--utf-brand-h);
  width: auto;
  display: block;
}

/* no underlines on the logo links, same theme rule the
   announcement bar had to fight */
.utf-brands a,
.utf-brands a:hover,
.utf-brands a:focus { text-decoration: none !important; }

.utf-brands__arw {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;                  /* optical centring of the chevron */
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  font: 400 24px/1 Montserrat, Arial, sans-serif;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
/* the arrows are spans, not buttons — Page Builder's HTML widget
   strips <button> elements on save. role="button" plus these two
   lines makes a span behave like one. */
.utf-brands__arw { -webkit-user-select: none; user-select: none; }
.utf-brands__arw:hover { border-color: #4B5320; color: #4B5320; }
.utf-brands__arw--prev { left: 0; }
.utf-brands__arw--next { right: 0; }

@media (max-width: 1023px) {
  .utf-brands { --utf-brand-h: 50px; --utf-brand-gap: 34px; }
}

@media (max-width: 800px) {
  .utf-brands { --utf-brand-h: 42px; --utf-brand-gap: 26px; padding: 0 38px; }
  .utf-brands__arw { width: 32px; height: 32px; font-size: 21px; }
}

@media (max-width: 380px) {
  .utf-brands { --utf-brand-h: 36px; --utf-brand-gap: 22px; padding: 0 32px; }
}
/* ===== END UTF-BRAND CAROUSEL ===== */


/* ============================================================
   BEGIN UTF-FOOTER STORES  (2026-09-03, v2)
   Replaces the Elfsight store-hours widget in the footer.

   That widget ran on a free view quota and deactivated itself
   every week or two, which the August SEO audit caught live —
   the footer was serving the string "Your widget is temporarily
   deactivated" on every page.

   This is plain HTML with no script and no API call. The live
   "open now" status is deliberately gone: the footer appears on
   roughly 15,000 product pages plus every category page, and
   two Google Place Details calls per pageview would trade an
   Elfsight quota for a metered Google Cloud bill that grows
   with traffic. The hours link out to the location pages
   instead, which also feeds internal links to two pages the
   audit flagged as under-linked.

   NAP text here must stay identical to the Google Business
   Profiles and both GunStore schema nodes. If a phone number or
   address changes, it changes in all of those places.

   v2: alignment is now stated instead of inherited. Desktop is
   left-aligned to match the footer column it sits in; phones are
   centred, because the theme centres the whole footer there and
   the logo was the one thing staying pinned to the left edge.

   Revert: delete everything between these two markers.
   ============================================================ */

.utf-stores {
  font: 400 14px/1.5 Montserrat, Arial, sans-serif;
  text-align: left;
}

/* Reuses the header logo at content/img/UTF-Home-Brand.svg. It's an
   SVG, so it scales to any size cleanly — height is the only dial.
   width:auto plus max-width keeps it honest if the SVG's intrinsic
   ratio ever changes. The store name text line was dropped: the
   logo already says who this is. */
.utf-stores__logo {
  display: block;
  width: max-content;
  margin: 0 0 18px;
}
.utf-stores__logo img {
  display: block;
  height: 90px;      /* the one dial — width follows the SVG ratio */
  width: auto;
}

.utf-store { margin-bottom: 20px; }
.utf-store:last-child { margin-bottom: 0; }

.utf-store__name {
  margin: 0 0 8px;
  font: 600 13px Montserrat, Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfd3c4;
}

.utf-store__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.utf-store__list li { margin: 0 0 7px; }
.utf-store__list li:last-child { margin-bottom: 0; }

.utf-store__list a {
  color: #e6e6e6;
  text-decoration: none;
}
.utf-store__list a:hover,
.utf-store__list a:focus { color: #fff; text-decoration: underline; }

/* the hours link is the one thing in the block someone is
   actively looking for, so it gets the accent and the chevron */
.utf-store__hours {
  display: inline-block;
  margin-top: 3px;
  font-weight: 600;
}
.utf-store__hours,
.utf-store__list .utf-store__hours { color: #a8b46a !important; }
.utf-store__hours:hover,
.utf-store__hours:focus { color: #c4d081 !important; }

@media (max-width: 800px) {
  .utf-stores {
    font-size: 15px;                        /* tap targets on phones */
    text-align: center;                     /* the theme centres the footer
                                               on phones — match it */
  }
  .utf-stores__logo { margin: 0 auto 14px; } /* auto side margins centre a
                                               max-content block; text-align
                                               alone can't move it */
  .utf-stores__logo img { height: 74px; }
  .utf-store__list li { margin-bottom: 10px; }
  .utf-store__list a { display: inline-block; padding: 2px 0; }
}
/* ===== END UTF-FOOTER STORES ===== */


/* ============================================================
   BEGIN UTF-FOOTER BADGES  (2026-09-03, v4)
   The footer trust badges in the ssl_site_seal--global region:
   Veteran Owned Business and Support Small Business are plain
   Page Builder image widgets; the Authorize.net seal is injected
   by Authorize.net's own script into a .AuthorizeNetSeal div.

   v4: the badge row follows the text. On desktop the store block
   above it is left-aligned, so a centred badge row floated in the
   middle of the column with nothing lined up to it — the row now
   starts at the left edge with the text. Phones stay centred,
   because everything in the footer is centred there.

   v2 — fixed the footer v1 broke. The store block (UTF-FOOTER
   STORES, above) is an HTML widget in this SAME region, and v1
   flattened every div in the region. That dissolved the store
   block's own wrappers, so the logo, both store names and both
   address lists became loose flex items — centred, side by side,
   wrapping wherever they happened to fall — and the badge-height
   rule shrank the store logo as well. v2 leaves the store
   widget's subtree alone, pins it to a full-width row of its
   own above the badges, and flattens only the Page Builder
   wrappers around the three badges.

   v3 — brings the two badges back. Page Builder's Image widget
   does not show its <img> at all: it paints the picture as a
   background-image on a wrapper div (id="sd-image-<uuid>",
   display:flex, background-size:contain) and keeps the <img>
   inside at opacity:0 purely as a size stencil. v2 flattened
   that wrapper too, so the background had nothing to paint on
   while the invisible <img> still held its slot in the row —
   badges gone, seal pushed off-centre. v3 leaves the sd-image
   wrappers as real boxes. The <img> stays at opacity:0 on
   purpose; sizing it still sizes the box, so --utf-badge-h
   keeps working as the one dial.

   v3 also hides an empty <p> that Page Builder's HTML widget
   leaves next to the store block. At 0x0 it was invisible but
   still counted as a flex item, adding one phantom column gap
   and shifting the whole badge row 13px to the right.

   What the block fixes:

   1. The badges were on two rows. Page Builder put the two image
      widgets in one layout row and the seal in another below.
      display:contents on those layout wrappers collapses the
      nesting so all three end up in a single centred flex row.

   2. The two image widgets had no size constraint, so each
      filled its column — narrower on desktop than on a phone,
      which is why the badges rendered LARGER on mobile. Capping
      height inverts that: one dial per breakpoint, widths follow
      each image's own ratio.

   The Authorize.net seal is deliberately NOT resized. It is a
   fixed 90x72 GIF, so scaling it softens it, and Authorize.net's
   seal terms generally require displaying it unaltered. So the
   seal sets the height and the other two are matched to it.
   Its container is also excluded from the flattening, because
   that div belongs to their script and should keep its own box.

   --utf-badge-h is the only number to touch. The two source
   images are different shapes (621x375 and 350x237), so equal
   height is what makes them read as a set beside the 72px seal.

   Revert: delete everything between these two markers.
   ============================================================ */

[data-content-region="ssl_site_seal--global"] {
  --utf-badge-h: 64px;          /* matched to the 72px seal, minus the
                                   whitespace baked into both images */
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;  /* badges start where the store text
                                   starts; centred on phones below */
  gap: 30px 26px;               /* row gap (store block ↔ badges),
                                   column gap (badge ↔ badge) */
  padding: 10px 0;              /* no side padding, so the store block
                                   lines up with the footer columns */
}

/* Collapse Page Builder's layout wrappers so the badges become the
   flex children. Left alone, in order: .AuthorizeNetSeal and
   anything inside it (owned by Authorize.net's script), the store
   widget with everything inside it, and the sd-image wrappers
   that carry the two badge pictures as backgrounds. */
[data-content-region="ssl_site_seal--global"] div:not(.AuthorizeNetSeal):not(.AuthorizeNetSeal div):not(.utf-stores):not(.utf-stores div):not([id^="sd-image-"]) {
  display: contents !important;
}

/* The two badge boxes. Page Builder's own inline style already makes
   each one display:flex with the picture as a contained background;
   this just stops them stretching or shrinking as flex items. */
[data-content-region="ssl_site_seal--global"] [id^="sd-image-"] {
  flex: 0 0 auto;
}

/* Page Builder's HTML widget leaves an empty <p> beside the store
   block. Zero-size, but still a flex item — and one extra gap. */
[data-content-region="ssl_site_seal--global"] p:empty { display: none; }

/* The store block owns a full row above the badges, whatever order
   the widgets sit in inside Page Builder. */
[data-content-region="ssl_site_seal--global"] .utf-stores {
  flex: 0 0 100%;
  max-width: 100%;
  order: -1;
}

[data-content-region="ssl_site_seal--global"] .AuthorizeNetSeal {
  display: block !important;
  flex: 0 0 auto;
  line-height: 0;               /* kills the inline-image baseline gap */
}

/* our two image widgets only — the seal keeps its native size and
   the store logo keeps the height set in UTF-FOOTER STORES.
   This <img> is the invisible stencil inside each sd-image box, so
   setting its height sets the box, and the background scales with it. */
[data-content-region="ssl_site_seal--global"] img:not([src*="anetseal"]):not(.utf-stores img) {
  display: block;
  height: var(--utf-badge-h) !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 1023px) {
  [data-content-region="ssl_site_seal--global"] { --utf-badge-h: 56px; gap: 28px 22px; }
}

@media (max-width: 800px) {
  [data-content-region="ssl_site_seal--global"] {
    --utf-badge-h: 48px;
    gap: 24px 18px;
    padding: 8px 0;
    justify-content: center;    /* the footer is centred on phones */
  }
}

@media (max-width: 380px) {
  [data-content-region="ssl_site_seal--global"] { --utf-badge-h: 40px; gap: 22px 14px; }
}
/* ===== END UTF-FOOTER BADGES ===== */