/* 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. Desktop only (min-width 1025px) — mobile menu untouched.
   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: 1025px) {

  :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
   1025–1279px (13"/14" laptops). Same panel, tightened.
   Desktop only — contains no mobile rules.
   ============================================================ */

/* ---------- 1. small laptops (13" / 14") ---------- */
@media (min-width: 1025px) 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 — 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: 1024px) {
  :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: 1024px) {

  :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: 1024px) {

  :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 ===== */