/* =============================================================
   Trident Tools — catalog components
   Companion stylesheet, loaded AFTER css/style.css.
   Extends the Ashley theme with brand / product-catalog UI.
   Source mirror: scss/_trident.scss
   Brand gold: rgba(201, 154, 46, 1)  ·  set --brand per page to
   tint brand-identity elements (brand bar, hero, chips-active).
   ============================================================= */

:root {
    --brand: rgba(201, 154, 46, 1);
    --brand-soft: rgba(201, 154, 46, .12);
}

/* -------------------------------------------
   generic helpers
------------------------------------------- */
.mil-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(201, 154, 46, 1);
    margin-bottom: 20px;
}
.mil-full-height { height: 100%; }
.mil-pos-rel { position: relative; }
.mil-hide { display: none !important; }

/* -------------------------------------------
   logo (image mark replaces the "A." text)
------------------------------------------- */
.mil-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.mil-logo img {
    height: 42px;
    width: auto;
    display: block;
}
/* The fixed frame sits inside the theme's dark-bg "invert" trick, which flips
   the gold logo to blue over dark sections. Render the frame mark as a solid
   silhouette so the invert makes it black-on-light / white-on-dark (matching
   the theme's menu button). The full-colour gold logo is kept in the footer
   and menu overlay, which are not affected by the invert. */
.mil-frame .mil-logo img { filter: brightness(0); }
/* On mobile the frame becomes a solid dark bar (rgba(0,0,0,.95)) with a white
   menu button — so the logo mark must be white there too (invert the silhouette). */
@media screen and (max-width: 1200px) {
    .mil-frame .mil-logo img { filter: brightness(0) invert(1); }
}
.mil-logo .mil-logo-text {
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 20px;
    color: inherit;
}
footer .mil-logo img { height: 66px; }
footer .mil-logo { margin-bottom: 30px; }

/* -------------------------------------------
   dealer / cta band
------------------------------------------- */
.mil-cta-band { position: relative; overflow: hidden; }
.mil-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}
.mil-icon-circle i { color: rgba(201, 154, 46, 1); font-size: 26px; }
/* uploaded image used in place of a Font Awesome glyph — same optical weight */
.mil-icon-circle img { width: 34px; height: 34px; object-fit: contain; }

/* -------------------------------------------
   brand cards (brands cover + home strip)
------------------------------------------- */
.mil-brand-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #fff;
    border: solid 1px rgba(0, 0, 0, .1);
    padding: 50px 45px;
    height: 100%;
    overflow: hidden;
    transition: .4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-brand-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-brand-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, .09);
    transform: translateY(-5px);
}
.mil-brand-card:hover:before { transform: scaleX(1); }

.mil-brand-wordmark {
    font-weight: 800;
    font-size: 32px;
    letter-spacing: .5px;
    color: #000;
    line-height: 1;
    margin-bottom: 8px;
}
/* The brand's own wordmark, in place of the text one. Sized off the type it
   replaces so a card keeps its rhythm whatever the logo's aspect ratio. */
.mil-brand-mark {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
    object-position: left center;
}
.mil-brand-mark-lg { max-height: 60px; max-width: min(100%, 300px); }
/* Colour bands: the originals are dark ink, so flatten them to solid white
   (or solid black on a light brand colour) to keep the wordmark legible. */
.mil-brand-mark-white { filter: brightness(0) invert(1); }
.mil-brand-mark-ink { filter: brightness(0); }
@media screen and (max-width: 768px) {
    .mil-brand-mark-lg { max-height: 46px; max-width: min(100%, 230px); }
}

.mil-brand-wordmark small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand);
    margin-top: 10px;
}
.mil-brand-origin {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(0, 0, 0, .55);
    margin-bottom: 26px;
}
.mil-brand-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 30px;
}
.mil-brand-cats span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .55);
    background: rgba(0, 0, 0, .04);
    padding: 6px 12px;
    border-radius: 40px;
}

/* -------------------------------------------
   category showcase cards (brand landing pages)
------------------------------------------- */
.mil-category-card {
    position: relative;
    display: block;
    overflow: hidden;
    height: 440px;
    background-color: #111;
}
.mil-category-card.mil-feature { height: 480px; }
@media screen and (max-width: 992px) { .mil-category-card { height: 380px; } }

.mil-category-card .mil-cat-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-category-card:hover .mil-cat-img { transform: scale(1.06); }

.mil-category-card:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, 0) 78%);
    z-index: 1;
}
.mil-category-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--brand);
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-category-card:hover:before { transform: scaleX(1); }

.mil-cat-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 45px;
    width: 100%;
    color: #fff;
}
.mil-category-card.mil-feature .mil-cat-content { max-width: 620px; }
@media screen and (max-width: 576px) { .mil-cat-content { padding: 30px; } }

.mil-cat-count {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    opacity: .7;
    margin-bottom: 14px;
}
.mil-cat-name {
    color: #fff;
    margin-bottom: 12px;
}
.mil-cat-desc {
    color: rgba(255, 255, 255, .78);
    margin-bottom: 22px;
    max-width: 460px;
}
.mil-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}
.mil-cat-link i {
    transition: transform .3s cubic-bezier(0, 0, 0.3642, 1);
    color: var(--brand);
}
.mil-category-card:hover .mil-cat-link i { transform: translateX(6px); }

/* -------------------------------------------
   category chips / filters
------------------------------------------- */
.mil-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mil-chip {
    cursor: default;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 26px;
    border-radius: 44px;
    border: solid 1px rgba(0, 0, 0, .15);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    color: #000;
    white-space: nowrap;
    transition: .3s cubic-bezier(0, 0, 0.3642, 1);
}
/* only the interactive filter chips are clickable */
.mil-catfilter .mil-chip { cursor: pointer; }
.mil-catfilter .mil-chip:hover { border-color: var(--brand); }
.mil-chip.mil-active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #000;
}

/* -------------------------------------------
   catalog left sidebar — category nav
------------------------------------------- */
.mil-cat-nav-wrap {
    position: sticky;
    top: 120px;
}
.mil-cat-nav-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, .4);
    margin-bottom: 20px;
    display: block;
}
.mil-cat-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: solid 1px rgba(0, 0, 0, .1);
}
.mil-cat-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 18px 0 18px 20px;
    border: none;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    background: none;
    font-family: inherit;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: color .3s, padding .3s;
}
.mil-cat-nav-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background-color: var(--brand);
    transition: width .3s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-cat-nav-item:hover { color: #000; }
.mil-cat-nav-item:hover:before,
.mil-cat-nav-item.mil-active:before { width: 12px; }
.mil-cat-nav-item.mil-active { color: #000; }
.mil-cat-nav-count {
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .35);
}
.mil-cat-nav-item.mil-active .mil-cat-nav-count { color: var(--brand); }

/* mobile: collapse the sidebar into a horizontal pill row above the grid */
@media screen and (max-width: 992px) {
    .mil-cat-nav-wrap { position: static; margin-bottom: 40px; }
    .mil-cat-nav-title { margin-bottom: 16px; }
    .mil-cat-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border-top: none;
    }
    .mil-cat-nav-item {
        width: auto;
        padding: 10px 20px;
        border: solid 1px rgba(0, 0, 0, .15);
        border-radius: 40px;
    }
    .mil-cat-nav-item:before { display: none; }
    .mil-cat-nav-item.mil-active {
        background-color: var(--brand);
        border-color: var(--brand);
    }
    .mil-cat-nav-item .mil-cat-nav-count { margin-left: 4px; }
}

/* -------------------------------------------
   catalog grid on mobile — bigger thumbnails,
   tighter gutters/rows, smaller product titles
------------------------------------------- */
@media screen and (max-width: 767px) {
    #products > .container { padding-left: 12px; padding-right: 12px; }
    .mil-prod-grid { margin-left: -6px; margin-right: -6px; }
    .mil-prod-grid > .mil-prod-col { padding-left: 6px; padding-right: 6px; }
    .mil-prod-col .mil-portfolio-item { margin-bottom: 26px; }
    .mil-prod-col .mil-labels { margin-bottom: 8px; }
    .mil-prod-col .mil-descr h4 {
        font-size: 15px;
        line-height: 132%;
    }
}

/* -------------------------------------------
   product cards (reuse .mil-portfolio-item; add badge + brand)
------------------------------------------- */
.mil-badge {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    background-color: var(--brand);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 40px;
    box-shadow: 2px 2px 14px #fff;
}
.mil-badge.mil-badge-dark {
    background-color: #000;
    color: #fff;
}
.mil-prod-brand {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(0, 0, 0, .55);
}
.mil-prod-price {
    font-weight: 500;
    color: #000;
    font-size: 18px;
}
/* tighter thumbnail-to-text gap (all sizes) + slightly smaller card title on desktop
   (mobile catalog title is handled by the max-width:767px rule above) */
.mil-portfolio-item .mil-cover-frame { margin-bottom: 18px; }
@media screen and (min-width: 768px) {
    .mil-portfolio-item .mil-descr h4 {
        font-size: 16px;
        line-height: 130%;
    }
}
/* catalog cards: drop the brand/category label row, tighten thumbnail->title gap */
.mil-prod-col .mil-labels { display: none; }
.mil-prod-col .mil-cover-frame { margin-bottom: 12px; }

/* Product photography ships on a white studio background. Multiply drops that
   white into whatever sits behind the card, so covers stop reading as white
   boxes on the grey .mil-soft-bg panel (related products, home, brand bands).
   Scoped to .mil-cover, which only the product-card templates use — the news
   and article covers under .mil-blog-card are full-bleed editorial photos and
   would pick up a grey cast from the same blend. */
.mil-portfolio-item .mil-cover-frame .mil-cover img { mix-blend-mode: multiply; }

/* mix-blend-mode composites only within its own stacking context, and GSAP's
   scroll-reveal transform on .mil-up (plus Swiper's on .swiper-wrapper) makes
   the frame one — so the image has no backdrop to multiply against and the
   white survives. Give the frame itself an opaque colour matching the section
   behind it; the blend then resolves inside the isolated group. */
.mil-portfolio-item .mil-cover-frame { background-color: #fff; }
.mil-soft-bg .mil-portfolio-item .mil-cover-frame { background-color: #f2f2f2; }

/* -------------------------------------------
   product detail — gallery
------------------------------------------- */
.mil-product-gallery { position: relative; }
.mil-product-main {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
    background-color: #f7f7f7;
    margin-bottom: 18px;
}
.mil-product-main img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7%;
    transition: opacity .35s ease;
    mix-blend-mode: multiply;
}
.mil-product-main .mil-zoom-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.mil-product-main .mil-zoom-btn img { position: static; width: 20px; height: 20px; padding: 0; }
.mil-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.mil-thumb {
    cursor: pointer;
    position: relative;
    width: 84px;
    height: 84px;
    padding: 0;
    background-color: #f7f7f7;
    overflow: hidden;
    border: solid 2px transparent;
    transition: .3s;
}
.mil-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    mix-blend-mode: multiply;
}
.mil-thumb:hover { border-color: rgba(0, 0, 0, .18); }
.mil-thumb.mil-active { border-color: var(--brand); }

/* -------------------------------------------
   product detail — summary
------------------------------------------- */
.mil-product-summary { padding-left: 30px; }
.mil-product-summary h1 { font-size: 22px !important; }
@media screen and (max-width: 992px) {
    /* Stacked: the gallery column's own .mil-mb-60 was ALSO spacing these two,
       so the thumbnail strip sat 110px above the product title. One source of
       the gap, not two — this margin-top owns it, the column's is zeroed. */
    .mil-product-summary { padding-left: 0; margin-top: 40px; }
    .mil-gallery-col { margin-bottom: 0; }
}
.mil-availability {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #2e7d32;
}
.mil-availability:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e7d32;
}
.mil-availability.mil-out { color: #b23b3b; }
.mil-availability.mil-out:before { background: #b23b3b; }

.mil-spec-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mil-spec-highlights li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: solid 1px rgba(0, 0, 0, .08);
    font-size: 15px;
    line-height: 150%;
}
.mil-spec-highlights li span:first-child { color: rgba(0, 0, 0, .5); }
.mil-spec-highlights li span:last-child { color: #000; font-weight: 500; text-align: right; }

.mil-enquire-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.mil-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mil-meta-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 0;
    border-bottom: solid 1px rgba(0, 0, 0, .07);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .45);
}
.mil-meta-list li:last-child { border-bottom: none; }
.mil-meta-list li span {
    color: #000;
    font-weight: 500;
    margin-left: auto;
    text-align: right;
}

/* -------------------------------------------
   product details — Description / Specifications / Downloads & Video
   stacked one per row (these were tabs until Aug 2026; everything is on the
   page at once now, so nothing is hidden behind a click or from Ctrl+F)
------------------------------------------- */
.mil-detail-block + .mil-detail-block { margin-top: 90px; }
@media screen and (max-width: 992px) { .mil-detail-block + .mil-detail-block { margin-top: 60px; } }

.mil-detail-title {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 60px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 500;
    color: #000;
}
/* the gold rule that used to mark the active tab, now marking each heading */
.mil-detail-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px;
    height: 2px;
    background: rgba(201, 154, 46, 1);
}
@media screen and (max-width: 992px) { .mil-detail-title { margin-bottom: 40px; } }

/* -------------------------------------------
   specifications table
------------------------------------------- */
.mil-specs-table {
    width: 100%;
    border-collapse: collapse;
}
.mil-specs-table th,
.mil-specs-table td {
    text-align: left;
    padding: 18px 24px;
    font-size: 15px;
    vertical-align: top;
    border-bottom: solid 1px rgba(0, 0, 0, .08);
}
.mil-specs-table th {
    width: 34%;
    font-weight: 500;
    color: rgba(0, 0, 0, .55);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}
.mil-specs-table td { color: #000; }
.mil-specs-table tr:nth-child(odd) { background: rgba(0, 0, 0, .02); }
@media screen and (max-width: 576px) {
    .mil-specs-table th, .mil-specs-table td { padding: 14px 14px; font-size: 14px; }
    .mil-specs-table th { width: 42%; }
}

/* -------------------------------------------
   description content — features / checklist
------------------------------------------- */
.mil-feature .mil-ico {
    font-size: 26px;
    color: rgba(201, 154, 46, 1);
    margin-bottom: 18px;
    display: block;
}
.mil-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mil-check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    line-height: 160%;
}
.mil-check-list li:before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    color: rgba(201, 154, 46, 1);
    font-size: 13px;
}

/* -------------------------------------------
   downloads
------------------------------------------- */
.mil-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    border: solid 1px rgba(0, 0, 0, .1);
    margin-bottom: 15px;
    transition: .3s;
}
.mil-download:hover { border-color: var(--brand); transform: translateX(4px); }
.mil-download .mil-dl-left { display: flex; align-items: center; gap: 18px; }
.mil-download .mil-dl-left i { color: rgba(201, 154, 46, 1); font-size: 22px; }
.mil-download .mil-dl-name { font-weight: 500; color: #000; }
.mil-download .mil-dl-meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .4);
}

/* -------------------------------------------
   responsive video (16:9)
------------------------------------------- */
.mil-video-frame {
    position: relative;
    display: block;             /* the 56.25% aspect box needs a block box (frame is an <a> in the CMS) */
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
}
.mil-video-frame iframe,
.mil-video-frame video,
.mil-video-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
.mil-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}
.mil-video-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.mil-video-play i { color: #000; font-size: 24px; margin-left: 4px; }

/* -------------------------------------------
   product feature badges (eco / mg / pat)
------------------------------------------- */
.mil-product-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.mil-product-flags img {
    display: block;
    height: 48px;
    width: auto;
}

/* article hero cover — standardized 16:9 banner, height-capped (theme default is a taller 65%) */
#news .mil-image-frame.mil-horizontal {
    padding-bottom: 0;
    aspect-ratio: 16 / 9;
    max-height: 520px;
}

/* -------------------------------------------
   brand hero band (brand pages)
------------------------------------------- */
/* Panel height is set per breakpoint from the admin. The template supplies only
   --bh-d/--bh-t/--bh-m (whichever are filled in); --band-h resolves which one
   applies here, so both the panel and the column inside it follow one value and
   an unset size simply inherits the next one up. */
.mil-brand-band {
    --band-h: var(--bh-d, 440px);
    position: relative;
    padding: 70px;
    color: #fff;
    overflow: hidden;
    background: var(--brand);
    min-height: var(--band-h);
}
.mil-brand-band > .mil-vert-between { height: calc(var(--band-h) - 60px); }
@media screen and (max-width: 992px) {
    .mil-brand-band { --band-h: var(--bh-t, var(--bh-d, 440px)); }
}
@media screen and (max-width: 768px) {
    .mil-brand-band { --band-h: var(--bh-m, var(--bh-t, var(--bh-d, 440px))); }
}
/* A blurb typed as several paragraphs renders as several <p> — space them, and
   keep the block flush with the bottom of the band as the single <p> was. */
.mil-brand-band p { margin-bottom: 14px; }
.mil-brand-band p:last-child { margin-bottom: 0; }
.mil-brand-band .mil-brand-glow {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}
@media screen and (max-width: 768px) { .mil-brand-band { padding: 45px 30px; } }

/* -------------------------------------------
   stat / counter strip
------------------------------------------- */
.mil-stat .mil-stat-num {
    font-size: 54px;
    font-weight: 600;
    line-height: 1;
    color: #000;
}
.mil-stat .mil-stat-num .mil-accent { color: rgba(201, 154, 46, 1); }
@media screen and (max-width: 580px) {
    .mil-stat .mil-stat-num { font-size: 34px; }
}
.mil-stat .mil-stat-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1em;
    color: rgba(0, 0, 0, .6);
    margin-top: 12px;
}

/* -------------------------------------------
   3D trident logo (WebGL canvas) — inner-page top banners
   Replaces the decorative dodecahedron polygons. Light banner,
   so no invert concerns; text container sits above via z-index.
------------------------------------------- */
.mil-inner-banner .mil-banner-content {
    position: relative;             /* containing block for the canvas */
}
.mil-inner-banner .mil-banner-content > .container {
    position: relative;
    z-index: 2;                     /* keep breadcrumb + heading above the trident */
}
.mil-trident3d {
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.mil-trident3d.is-ready {
    opacity: 1;
}
@media screen and (max-width: 992px) {
    /* faint watermark behind the stacked banner text on mobile */
    .mil-trident3d {
        width: 68%;
    }
    .mil-trident3d.is-ready {
        opacity: 0.32;
    }
}

/* -------------------------------------------
   Menu slide-out trident (dark bg; fades in with the menu)
------------------------------------------- */
.mil-menu-right-frame .mil-trident3d-menu {
    position: absolute;
    top: 50%;
    right: 0;
    width: 440px;
    height: 520px;
    max-height: 74vh;
    transform: translateY(-50%);
    z-index: 0;
}
.mil-trident3d-menu.is-ready {            /* hidden while the menu is closed */
    opacity: 0;
    transition: opacity 1s ease 0.25s;
}
.mil-menu-frame.mil-active .mil-trident3d-menu.is-ready {
    opacity: 0.9;
}
.mil-menu-frame .mil-menu-right {         /* keep the brand list above the trident */
    position: relative;
    z-index: 1;
}

/* -------------------------------------------
   Vision section: 3D wireframe trident (gray #999)
   in place of the old wireframe dodecahedron polygons
------------------------------------------- */
.mil-trident-anim {
    opacity: 1;                    /* override the .mil-animation 0.2; the wireframe carries its own opacity */
}
.mil-trident-anim .mil-trident3d-vision {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.mil-trident-anim .mil-trident3d-vision.is-ready {
    opacity: 1;
}

/* -------------------------------------------
   brands menu — square logo tile + title
------------------------------------------- */
.mil-menu-list.mil-brand-menu li { margin-bottom: 16px; }
.mil-menu-list.mil-brand-menu li a {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mil-brand-logo {                        /* brand-coloured circle holding a white logo */
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand, #191919);
    overflow: hidden;
    transition: transform .3s cubic-bezier(0, 0, .3642, 1);
}
.mil-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);     /* knock each brand logo out to solid white */
}
.mil-menu-list.mil-brand-menu li a:hover .mil-brand-logo { transform: scale(1.06); }
.mil-brand-logo.mil-brand-logo-all {     /* "view all" — neutral outlined circle with a grid glyph */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 13px;
}
.mil-brand-logo.mil-brand-logo-all svg { width: 100%; height: 100%; opacity: .7; }
.mil-brand-menu-text small {
    color: rgba(255, 255, 255, .38);
    font-weight: 400;
    font-size: .82em;
}

/* -------------------------------------------
   homepage hero — jobsite / tools backdrop
   The template makes .mil-dark-bg look dark with a
   backdrop-filter:invert() layer on ::before. For this
   hero we replace that layer with a real photo instead
   (content already sits above at z-index:3, light-coloured).
------------------------------------------- */
.mil-banner-home { overflow: hidden; background-color: #060606; }
.mil-banner-home.mil-dark-bg::before {   /* take over the invert layer → hero photo, mirrored */
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(../img/photo/hero-tools.jpg) center center / cover no-repeat;
    transform: scaleX(-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 0;
}
.mil-banner-home .mil-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.mil-banner-home::after {            /* darken for headline legibility — heaviest on the left */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6,6,6,.95) 0%, rgba(6,6,6,.82) 30%, rgba(6,6,6,.42) 60%, rgba(6,6,6,.55) 100%),
        linear-gradient(0deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,0) 45%);
    z-index: 1;
}

/* -------------------------------------------
   fixed frame over the home hero
   The hero overrides .mil-dark-bg::before (backdrop-filter: none), which kills
   the theme's invert layer — so the frame's black logo silhouette + black menu
   bars no longer flip to light over the video hero and become invisible.
   js/main.js adds .mil-frame-light while the frame overlaps the hero; light it
   here (full-colour gold mark + white menu bars), then it reverts to the default
   dark silhouette over the light sections below. Desktop only — on mobile the
   frame is already a solid dark bar with a white logo/menu.
------------------------------------------- */
@media screen and (min-width: 1201px) {
    .mil-frame.mil-frame-light .mil-logo img { filter: none; }   /* show the gold brand mark on the dark hero */
    .mil-frame.mil-frame-light .mil-menu-btn span,
    .mil-frame.mil-frame-light .mil-menu-btn span::after,
    .mil-frame.mil-frame-light .mil-menu-btn span::before { background: #fff; }
}

/* -------------------------------------------
   vision / statement band
   This dark section carries two continuously-rendering WebGL trident canvases.
   The theme darkens .mil-dark-bg with a live backdrop-filter: invert(100%) layer;
   compositing that invert *under* a canvas that repaints every animation frame
   makes Chrome flash the whole band white. Give the band a real dark background
   and switch its invert layer off — the flicker source is gone. The fixed frame
   was relying on that invert to stay light here, so js/main.js now lights the
   frame over this band too (same mechanism as the home hero).
------------------------------------------- */
.mil-vision-band { background-color: #060606; }
.mil-vision-band.mil-dark-bg::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* -------------------------------------------

listing search — themed clear button

Chrome/Safari draw a native × inside type=search that only empties the field
(the results below stay on the old query). Hide it and use a real link that
resets the listing. Scoped to .mil-search-form so the footer subscribe form,
which shares .mil-subscribe-form, is untouched.

------------------------------------------- */
.mil-search-form input[type="search"]::-webkit-search-cancel-button,
.mil-search-form input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
/* room for the clear button + the 40px submit circle at right:15px */
.mil-search-form input { padding-right: 108px; }
.mil-search-clear {
    position: absolute;
    top: 50%;
    right: 66px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    color: rgb(128, 128, 128);
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    -webkit-transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
/* Trident gold literals, NOT var(--brand): the listing <section> reassigns --brand
   to the brand's own colour (Vessel #e60012), which would turn this red while the
   submit arrow next to it stays gold. */
.mil-search-clear:hover,
.mil-search-clear:focus-visible {
    background-color: rgba(201, 154, 46, .12);
    color: rgba(201, 154, 46, 1);
    text-decoration: none;
}

/* Product CTA with admin-set colours (Product 2).
   The theme draws this as a pill + a circular arrow badge, so there are four
   independently editable surfaces. Each falls back to the theme's own value
   when its variable is unset, which is why an untouched button looks exactly as
   the designer left it — .mil-cta-tinted is only applied when at least one
   colour has been chosen. */
.mil-cta-tinted {
    background: var(--p2-cta-bg, transparent);
    padding: 10px 22px;
    border-radius: 40px;
}
/* Arrow circle and glyph.
   Qualified with .mil-link so these match the specificity of the theme's own
   .mil-link.mil-dark svg / svg path rules (0,2,1 and 0,2,2) — at equal weight
   this file wins on load order. A bare .mil-cta-tinted svg would lose.
   Fallbacks are the theme's own values, so an unset colour changes nothing.
   Targets the path rather than currentColor because main.js clones the <svg>
   in after load with its fill baked into the stylesheet. */
.mil-link.mil-cta-tinted svg {
    background-color: var(--p2-cta-arrow-bg, rgba(0, 0, 0, .1));
}
.mil-link.mil-cta-tinted svg path {
    fill: var(--p2-cta-arrow-fg, rgb(0, 0, 0));
}

/* ---------------------------------------------------------------------------
   Pagination — windowed pager (helpers.php: pagination_links/pager_window)

   The theme's .mil-pagination just laid every page out in a row, which ran off
   the page once a brand had more than ~12 pages of products. The helper now
   emits a fixed-width window centred on the current page, with first/last and
   ellipses, so the control never exceeds 11 items. These rules replace the
   theme's per-button margin with a flex gap and style the two new pieces:
   the elided-run ellipsis and the greyed-out arrow at either end.
--------------------------------------------------------------------------- */
.mil-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mil-pagination .mil-pagination-btn {
    margin-right: 0;   /* superseded by the flex gap above */
    flex-shrink: 0;
}

/* Elided run of pages */
.mil-pagination-gap {
    display: inline-block;
    width: 24px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    user-select: none;
}

/* Prev on page 1 / next on the last page: kept in place so the row does not
   shift sideways at the ends, but visibly inert. */
.mil-pagination-off {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 560px) {
    .mil-pagination {
        gap: 5px;
    }
    .mil-pagination .mil-pagination-btn {
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    .mil-pagination-gap {
        width: 14px;
        height: 32px;
        line-height: 32px;
    }
    /* Narrow the window to the current page's immediate neighbours so the row
       fits a phone on one line. First, last and the arrows always stay. */
    .mil-pagination-far {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Product overview in the summary column

   The right-hand column used to repeat the first few spec rows
   (.mil-spec-highlights), which the Specifications tab already covers in full.
   It now carries the product overview instead, moved up out of the Description
   tab. Point form, because these are short selling points rather than prose.

   The description is stored in four different shapes across the catalogue:
     290 products  plain text, one point per line  -> ul.mil-overview-list > li
       3 products  rich text authored as <ul>/<ol> -> real list items
       2 products  rich text authored as <p>       -> a paragraph per point
       9 products  empty                           -> nothing renders
   All three visible shapes are normalised to the SAME black bullet below, so a
   point looks like a point no matter how it was typed. Anything relying on the
   browser's own marker is reset to list-style:none first — the theme resets
   markers globally, so a real <ul> would otherwise be inconsistent with the
   other two shapes.

   .mil-spec-highlights above is intentionally kept: nothing renders it today,
   but it is the styling for the key/value pair list if that block is ever
   wanted back.
--------------------------------------------------------------------------- */
.mil-product-overview {
    font-size: 16px;
    line-height: 165%;
}

.mil-overview-list,
.mil-product-overview ul,
.mil-product-overview ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One rule for all three shapes: plain lines, rich <li>, rich <p>. */
.mil-overview-list > li,
.mil-product-overview ul > li,
.mil-product-overview ol > li,
.mil-product-overview > div > p {
    position: relative;
    list-style: none;
    padding: 0 0 0 22px;
    margin: 0 0 14px;
}
.mil-overview-list > li:last-child,
.mil-product-overview ul > li:last-child,
.mil-product-overview ol > li:last-child,
.mil-product-overview > div > p:last-child { margin-bottom: 0; }

.mil-overview-list > li:before,
.mil-product-overview ul > li:before,
.mil-product-overview ol > li:before,
.mil-product-overview > div > p:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
}

/* TinyMCE leaves trailing <br> inside list items for spacing; they double the
   gap the margin above already provides. */
.mil-product-overview li > br:last-child,
.mil-product-overview p > br:last-child { display: none; }

/* ---------------------------------------------------------------------------
   Related products — looping carousel, five across

   Swiper owns the slide widths (slidesPerView), so there is no grid here; see
   js/trident-related.js. The controller fetches six so there is always one more
   than fits on desktop, which is what makes the loop read as scrollable.

   Swiper needs overflow:hidden to clip the off-screen slides, but the cards
   have no bleed, so the row still lines up with the "Related Products" heading.
--------------------------------------------------------------------------- */
.mil-related-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.mil-related-col { min-width: 0; height: auto; }

/* The card's own bottom margin fights the slider's height calc. */
.mil-related-col .mil-portfolio-item { margin-bottom: 0 !important; }

/* Card titles at 16px on every screen. The theme's h4 scale (28px, stepping down
   to 22px on mobile) is sized for section headings; these are product names on a
   ~160px card, where that scale wraps a single name over four lines. */
.mil-related-col .mil-portfolio-item .mil-descr h4 { font-size: 16px; }

/* Arrows — desktop affordance; a mouse gives no hint that a row is draggable. */
.mil-related-nav {
    position: absolute;
    top: 34%;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #000;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    opacity: 0;
    transition: opacity .3s cubic-bezier(0, 0, 0.3642, 1), background .3s;
}
.mil-related-slider:hover .mil-related-nav { opacity: 1; }
.mil-related-nav:hover { background: var(--brand); color: #fff; }
.mil-related-nav i { font-size: 14px; }
.mil-related-prev { left: 0; }
.mil-related-next { right: 0; }

/* Swiper adds this when the ends are reached with loop off. */
.mil-related-nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

/* Dots — the touch affordance. Hidden on desktop where the arrows do the job. */
.mil-related-pagination {
    display: none;
    margin-top: 26px;
    text-align: center;
}
.mil-related-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 5px;
    background: rgba(0, 0, 0, .25);
    opacity: 1;
    transition: background .3s, width .3s;
    border-radius: 40px;
}
.mil-related-pagination .swiper-pagination-bullet-active {
    width: 20px;
    background: var(--brand);
}

/* Nothing to scroll to: no dead controls. .swiper-*-lock is Swiper's own flag
   (watchOverflow) for "all slides already fit", which is how a short set hides
   its arrows and dots at desktop width while keeping them on a phone. */
.mil-related-static .mil-related-nav,
.mil-related-static .mil-related-pagination,
.mil-related-nav.swiper-button-lock,
.mil-related-pagination.swiper-pagination-lock { display: none !important; }

@media screen and (max-width: 992px) {
    /* Touch: swiping is the obvious gesture, so trade arrows for dots. */
    .mil-related-nav { display: none; }
    .mil-related-pagination { display: block; }
}

/* ---------------------------------------------------------------------------
   Breadcrumbs on small screens

   The fixed header (.mil-frame) is exactly 90px tall at <=992px, and the
   theme's .mil-p-120-0 section padding also drops to exactly 90px there — so
   the breadcrumb landed flush against the bottom of the header with a 0px gap.
   (At 1200px the same padding is 120px, giving the 30px of air this restores.)

   Scoped to .mil-p-120-0 because the product page is the only template whose
   breadcrumb sits in a plain section; the other seven put theirs inside
   .mil-banner-content, which already has its own generous spacing and must not
   be pushed down further.
--------------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .mil-p-120-0 .mil-breadcrumbs { margin-top: 30px; }
}

/* Below ~576px the trail is wider than the screen — on a product page the last
   crumb (the model number) was pushed off the right edge and unreachable, as
   the theme sets flex-wrap:nowrap and nothing scrolls. Let it wrap instead. */
@media screen and (max-width: 576px) {
    .mil-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    /* The separator's 15px side margins are too wide once lines can break. */
    .mil-breadcrumbs li:after { margin: 0 9px; }
}

/* ---------------------------------------------------------------------------
   Catalogue button — the quiet twin of .mil-button

   Sits beside "Browse products" on a brand page when that brand has a
   catalogue PDF attached (Admin → Brands → Catalogue PDF). Same pill geometry
   as the theme's button so the pair reads as one control, but grey and
   outlined: browsing the range is the action, reading the book is the option.

   NOT built on .mil-button. That class hard-styles any child <svg> into the
   gold button's black arrow disc — a PDF glyph inside it would be swallowed —
   and .mil-arrow-place is what main.js clones the arrow into, so this
   deliberately carries neither.
--------------------------------------------------------------------------- */
.mil-button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.mil-pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 70px;
    padding: 0 32px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 70px;
    background-color: rgba(0, 0, 0, .04);
    color: rgba(0, 0, 0, .78);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-pdf-button span { white-space: nowrap; }
.mil-pdf-button svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
    opacity: .55;
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
}
.mil-pdf-button:hover {
    background-color: rgba(0, 0, 0, .07);
    border-color: rgba(0, 0, 0, .2);
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
}
.mil-pdf-button:hover svg { opacity: 1; }

/* On a dark section the same button inverts, so it can move with the design. */
.mil-dark-bg .mil-pdf-button,
.mi-invert-fix .mil-pdf-button {
    border-color: rgba(255, 255, 255, .18);
    background-color: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
}
.mil-dark-bg .mil-pdf-button:hover,
.mi-invert-fix .mil-pdf-button:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
    color: rgba(255, 255, 255, 1);
}

/* Matches the theme's own button shrink at this breakpoint (style.css ~line 660),
   so the two stay the same height when they wrap onto separate lines. */
@media screen and (max-width: 992px) {
    .mil-pdf-button {
        height: 60px;
        padding: 0 26px;
    }
}