/* =========================================================================
 * Bodyguard design system (components on top of Lejon)
 * Graphic profile from bodyguard.se (fonts, red, sharp corners).
 * Layout: light e-commerce, inspired by bodyguard.nu (Nova) and krisskydd.se.
 * Tokens live in theme.css.mustache :root
 * ========================================================================= */

/* Typography */
.font-display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: .95;
    text-transform: uppercase;
}
.font-mono {
    font-family: var(--font-mono);
}
.overline {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--bg-accent);
}
.tabular {
    font-variant-numeric: tabular-nums;
}

/* Section titles: Anton, moderate size */
.section-title,
[data-qb-element="products"] > div > h2,
[data-qb-element="categories"] h2[data-qb-setting="title"],
[data-qb-element="blog"] h2[data-qb-setting="title"],
[data-qb-element="usp"] h2[data-qb-setting="title"],
[data-qb-element="productslider"] h2,
[data-qb-setting="use_productpage_rp"] h2,
[data-qb-area="category"] h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
}

/* Surfaces */
.section-dark {
    background-color: var(--bg-ink);
    color: var(--bg-surface);
}
.section-surface {
    background-color: var(--bg-surface);
    color: var(--bg-ink);
}
.hairline {
    border-color: var(--bg-line);
}

/* Buttons */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 2rem;
    background: var(--bg-accent);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border: 1px solid var(--bg-accent);
    transition: background .2s var(--ease-out), transform .12s var(--ease-out);
}
.btn-brand:hover {
    background: var(--bg-accent-bright);
    border-color: var(--bg-accent-bright);
}
.btn-brand:active {
    transform: scale(.98);
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 2rem;
    background: transparent;
    color: var(--bg-ink);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border: 1px solid var(--bg-ink);
    transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out);
}
.btn-ghost:hover {
    background: var(--bg-ink);
    color: var(--bg-paper);
}
.btn-ghost:active {
    transform: scale(.98);
}
@media (prefers-reduced-motion: reduce) {
    .btn-ghost {
        transition: none;
    }
}

/* Reveal on scroll (opt-in with [data-reveal]) */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn-brand {
        transition: none;
    }
}

/* Campaign bar: red ticker that scrolls on its own */
#campaignbar .marquee {
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}
#campaignbar .marquee__track {
    display: inline-flex;
    animation: bodyguard-marquee 45s linear infinite;
}
#campaignbar .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    padding: .6rem .9rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-campaignbar);
}
#campaignbar .marquee__item::after {
    content: "";
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex-shrink: 0;
}
@keyframes bodyguard-marquee {
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    #campaignbar .marquee__track {
        animation: none;
    }
}

/* Header: white bar, uppercase nav */
#main-nav {
    border-bottom: 1px solid var(--bg-line);
}
#main-nav nav a,
#main-nav nav button {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
#main-nav nav a.active {
    color: var(--bg-accent);
}
#main-nav .logo-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    gap: .2rem;
}
#main-nav .logo-block img {
    width: auto;
    padding-right: 0;
}
#main-nav .logo-tagline {
    text-align: center;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--bg-body-text);
    white-space: nowrap;
}
#main-nav .header-flag {
    display: block;
    width: 1.5rem;
    height: auto;
}
#main-nav .cart-bubble {
    background-color: var(--bg-accent-bright);
}
/* Centre the desktop menu between logo and icons, never overlapping either */
@media (min-width: 1024px) {
    /* logo column keeps its own width so the menu gets the rest */
    #main-nav .container > div > div:first-child {
        flex-grow: 0;
    }
    #main-nav [data-qb-element="desktop_nav_large"] {
        flex: 1 1 auto;
        justify-content: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    #main-nav [data-qb-element="desktop_nav_large"] > div > ul {
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* Product page */
.product-layout {
    display: grid;
    /* minmax(0, …) stops the image swiper and the column from growing each other without limit */
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}
@media (min-width: 1024px) {
    .product-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
        align-items: start;
    }
    .buy-panel {
        position: sticky;
        top: calc(var(--header-offset, 5rem) + 1rem);
    }
}
.buy-panel {
    background: var(--bg-paper);
    color: var(--bg-ink);
    border: 1px solid var(--bg-line);
    padding: 2rem;
}
.buy-panel h1 {
    font-size: 1.75rem;
}
.buy-panel .price-now {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    color: var(--bg-ink);
}
.buy-panel .price-before {
    font-family: var(--font-mono);
    font-size: 1rem;
    text-decoration: line-through;
    color: #6b6b6b;
}
.buy-panel .has-before .price-now {
    color: var(--bg-accent);
}
.buy-panel .stock-ok {
    color: #1f7a45;
}
.buy-panel .stock-no {
    color: var(--bg-accent);
}
.buy-panel .border-foreground {
    border-color: var(--bg-line);
    opacity: 1;
}
.buy-panel .bg-card {
    background-color: transparent;
}
.buy-panel .text-primary {
    color: var(--bg-accent);
}
.buy-panel .qs-cart-submit {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    background-color: var(--bg-accent);
    border-color: var(--bg-accent);
}
.buy-panel .qs-cart-submit.hover-opacity:hover {
    opacity: 1;
    background-color: var(--bg-accent-bright);
}

/* Variant chips: sharp, red when active */
.buy-panel label[for^="radio-"] {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-color: var(--bg-line);
    color: var(--bg-ink);
}
.buy-panel label[for^="radio-"].border-primary {
    border-color: var(--bg-accent);
    background-color: var(--bg-accent);
    color: #fff;
}

/* Trust row */
.trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--bg-line);
}
.trust-row > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.trust-row svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--bg-accent);
}
.trust-row strong {
    font-family: var(--font-head);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.trust-row span {
    font-size: .8125rem;
    color: var(--bg-body-text);
}
@media (max-width: 480px) {
    .trust-row {
        grid-template-columns: 1fr;
    }
    .trust-row > div {
        flex-direction: row;
        align-items: baseline;
        gap: .5rem;
    }
}

/* Spec table (product datafields) */
/* Video dialog (YouTube links, e.g. the hero button) */
.video-dialog {
    width: min(960px, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.video-dialog::backdrop {
    background: rgba(13, 13, 13, .85);
}
.video-dialog__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-ink);
}
.video-dialog__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-dialog__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.video-dialog__cta {
    display: flex;
    width: max-content;
    margin: 1.25rem auto 0;
}

/* Bulk offer picker (4 för 3) */
.bulk-offer {
    display: grid;
    gap: .625rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}
.bulk-offer__tier {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid var(--bg-line);
    background: var(--bg-paper);
    cursor: pointer;
    transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out);
}
.bulk-offer__tier:hover {
    border-color: var(--bg-charcoal);
}
.bulk-offer__tier.is-selected {
    border-color: var(--bg-accent);
    background: #fdf3f3;
    box-shadow: inset 0 0 0 1px var(--bg-accent);
}
.bulk-offer__tier:has(input:focus-visible) {
    outline: 2px solid var(--bg-accent);
    outline-offset: 2px;
}
.bulk-offer__radio {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--bg-chrome-mid);
    border-radius: 50%;
}
.bulk-offer__tier.is-selected .bulk-offer__radio {
    border-color: var(--bg-accent);
    box-shadow: inset 0 0 0 3px var(--bg-paper);
    background: var(--bg-accent);
}
.bulk-offer__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    flex: 1;
    min-width: 0;
}
.bulk-offer__title {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--bg-ink);
}
.bulk-offer__sub {
    font-size: .8125rem;
    color: var(--bg-body-text);
}
.bulk-offer__badge {
    margin-top: .375rem;
    padding: .2rem .5rem;
    background: var(--bg-accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.bulk-offer__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}
.bulk-offer__now {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.1;
    color: var(--bg-ink);
}
.bulk-offer__before {
    font-family: var(--font-mono);
    font-size: .75rem;
    text-decoration: line-through;
    color: #6b6b6b;
}
@media (prefers-reduced-motion: reduce) {
    .bulk-offer__tier {
        transition: none;
    }
}
.buy-panel__specs {
    margin-top: 1.25rem;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--bg-body-text);
}

/* Reviews: lifted like krisskydd (big summary, verified cards) */
.reviews-block .reviews-total-large svg {
    width: 1.5rem;
    height: 1.5rem;
}
.reviews-block .reviews-total-large {
    font-family: var(--font-head);
    font-weight: 700;
}
.review-card {
    background: var(--bg-paper);
    border: 1px solid var(--bg-line);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.review-card .verified {
    color: #1f7a45;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.review-card .qb-review-star-active {
    color: var(--bg-accent);
}
.review-card p.italic {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.6;
}
@media (max-width: 640px) {
    .review-card {
        flex-direction: column;
        gap: 1rem;
    }
    .review-card .w-40 {
        width: 100%;
    }
}
/* Star rows on product cards and in the buy panel */
[data-qb-selector="product-apps-reviews-item-reviews"] svg,
.reviews-total svg {
    color: var(--bg-accent);
}

/* Product cards: white with hairline, price in Anton */
.product[data-qb-selector="product-item"] {
    border: 1px solid var(--bg-line);
    transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.product[data-qb-selector="product-item"]:hover {
    border-color: var(--bg-ink);
    transform: translateY(-2px);
}
.product h3 {
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.product [data-qb-element="product_lists_show_price"] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bg-ink);
}
.product .text-discounted-price {
    color: var(--bg-accent) !important;
}
.product .qs-cart-submit {
    color: var(--bg-accent);
}

/* Hero banners: image with dark gradient, Anton title */
[data-qb-element="banners"] [data-qb-setting^="subtitle_"] {
    /* sits on a photo, so red reads poorly; white with a shadow carries */
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    line-height: 1.5;
    text-transform: uppercase;
    opacity: 1;
    color: #fff;
    max-width: 34rem;
    margin-bottom: 1.25rem;
    padding-left: .85rem;
    border-left: 2px solid var(--bg-accent-bright);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
[data-qb-element="banners"] h2[data-qb-setting^="title_"] {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
[data-qb-element="banners"] span[data-qb-setting^="button_text_"] {
    display: inline-block;
    padding: .9rem 1.75rem;
    background: var(--bg-accent);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
[data-qb-element="banners"] span[data-qb-setting^="button_text_"] + svg {
    display: none;
}
[data-qb-element="banners"] .opacity-50:has(> [data-qb-setting^="button_text_"]) {
    opacity: 1;
}
[data-qb-element="banners"] [class*="banner-"] {
    background-color: var(--bg-charcoal);
}
[data-qb-element="banners"] .bg-black.opacity-40 {
    opacity: .6;
    background: linear-gradient(90deg, rgba(13,13,13,.9) 0%, rgba(13,13,13,.45) 55%, rgba(13,13,13,.1) 100%);
}

/* USP strips: light surface, red icons */
section[data-qb-element="usp"].py-16 {
    background-color: var(--bg-surface);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
[data-qb-element="usp"] .mr-8 {
    margin-right: .875rem;
}
[data-qb-element="usp"] .w-10.h-10 {
    width: 2rem;
    height: 2rem;
}
[data-qb-element="usp"] h3.mt-2 {
    margin-top: .25rem;
    margin-bottom: .125rem;
}
[data-qb-element="usp"] p.leading-6 {
    line-height: 1.25rem;
}
/* Two per row on phones instead of four stacked */
@media (max-width: 767px) {
    [data-qb-element="usp"] .flex-wrap > div {
        width: 50%;
        margin-bottom: .75rem;
        padding: 0 .5rem;
    }
    [data-qb-element="usp"] .mr-8 {
        margin-right: .5rem;
    }
}
[data-qb-element="usp"] .divide-gray-400\/40 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--bg-line);
}
[data-qb-element="usp"] h3 {
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
[data-qb-element="usp"] p {
    opacity: 1;
    color: var(--bg-body-text);
}
[data-qb-element="usp"] svg.text-accent {
    color: var(--bg-accent);
}

/* Footer payment logos sit untiled on the dark footer; Visa's navy wordmark vanishes there, so it goes white */
[data-qb-setting="use_footer_paymentmethods"] img[src*="payment-visa"] {
    filter: brightness(0) invert(1);
}

/* Info pages (Utbytesgaranti, Polisintyg): the designed HTML lives in the page content in admin,
   so the default page frame steps aside when it finds .infopage */
.page-default:has(.infopage) {
    padding: 0;
}
.page-default:has(.infopage) .page-default__title {
    display: none;
}
.page-default:has(.infopage) > .container,
.page-default:has(.infopage) .max-w-4xl {
    max-width: none;
    padding: 0;
}
/* the theme zeroes padding on nested containers; the infopage sections need the normal gutter to line up with the header */
.page-default .infopage .container {
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .page-default .infopage .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 1024px) {
    .page-default .infopage .container {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.infopage__hero {
    background: var(--bg-ink);
    color: var(--bg-paper);
    padding: 4.5rem 0 4rem;
    border-bottom: 4px solid var(--bg-accent);
}
.infopage__kicker {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--bg-accent-bright);
    margin-bottom: 1rem;
}
.infopage__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.infopage__lead {
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 2rem;
}
.infopage__why .container {
    display: grid;
    gap: 1.5rem 4rem;
    padding-top: 4rem;
    padding-bottom: 1rem;
}
@media (min-width: 1024px) {
    .infopage__why .container {
        grid-template-columns: 5fr 6fr;
        align-items: start;
    }
}
.infopage__statement {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--bg-ink);
    border-left: 4px solid var(--bg-accent);
    padding-left: 1.25rem;
}
.infopage__why-text p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--bg-body-text);
}
.infopage__why-text a {
    color: var(--bg-accent);
    text-decoration: underline;
}
.infopage__why-text p + p {
    margin-top: 1rem;
}
.infopage__steps {
    padding: 4rem 0;
}
.infopage__heading {
    text-align: center;
    margin-bottom: 2.5rem;
}
.infopage__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.infopage__step {
    background: var(--bg-paper);
    border: 1px solid var(--bg-line);
    border-top: 3px solid var(--bg-accent);
    padding: 1.75rem 1.5rem;
}
.infopage__num {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--bg-accent);
    margin-bottom: 1rem;
}
.infopage__step h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--bg-ink);
    margin-bottom: .5rem;
}
.infopage__step p {
    color: var(--bg-body-text);
    line-height: 1.6;
}
.infopage__compare {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.infopage__col {
    background: var(--bg-paper);
    border: 1px solid var(--bg-line);
    border-top: 3px solid var(--bg-charcoal);
    padding: 1.75rem 1.5rem;
}
.infopage__col--yes {
    border-top-color: var(--bg-accent);
}
.infopage__col h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--bg-ink);
}
.infopage__col-sub {
    font-size: .875rem;
    color: var(--bg-body-text);
    margin-bottom: 1.25rem;
}
.infopage__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.infopage__col li {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    padding: .6rem 0;
    border-top: 1px solid var(--bg-line);
    color: var(--bg-ink);
}
.infopage__col li::before {
    flex-shrink: 0;
    width: 1rem;
    font-weight: 700;
}
.infopage__col--no li::before {
    content: "\2715";
    color: var(--bg-body-text);
}
.infopage__col--yes li::before {
    content: "\2713";
    color: var(--bg-accent);
}
.infopage__source {
    margin-top: 1rem;
    font-size: .8125rem;
    color: var(--bg-body-text);
    text-align: center;
}
.infopage__doc-wrap {
    padding-bottom: 4rem;
}
.infopage__doc {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-ink);
    color: var(--bg-paper);
    border-left: 4px solid var(--bg-accent);
    padding: 2rem;
}
.infopage__doc .infopage__kicker {
    margin-bottom: .5rem;
}
.infopage__doc-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.infopage__doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
}
.infopage__doc-meta dt {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.infopage__doc-meta dd {
    margin: 0;
    font-size: .9375rem;
}
.infopage__facts {
    background: var(--bg-surface);
    padding: 2rem 0;
}
.infopage__factlist {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.infopage__factlist strong {
    display: block;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--bg-ink);
}
.infopage__factlist span {
    font-size: .875rem;
    color: var(--bg-body-text);
}
.infopage__cta {
    padding: 4rem 0;
    text-align: center;
}
.infopage__cta .section-title {
    margin-bottom: 1rem;
}
.infopage__cta-text {
    color: var(--bg-body-text);
    margin-bottom: 1.75rem;
}

/* Accessibility fixes found by Lighthouse */
/* opacity-50/40 on white lands at 3.6:1 and 2.7:1; use a colour that clears 4.5:1 */
.product span[data-qb-element="product_lists_show_from_label"] {
    opacity: 1;
    color: var(--bg-body-text);
}
.product .line-through {
    opacity: 1;
    color: #6b6b6b;
}

/* Stock badges: the theme's green on pale green is 3.02:1, WCAG AA wants 4.5:1 */
.product span[data-qb-element="product_lists_show_stockstatus"],
.product span.product-current-stock-status,
span.product-current-stock-status {
    color: #15803d;
}
.buy-panel .stock-ok {
    color: #15803d;
}
/* Footer column headings sit after an h2, so they must not look like an h5 jump */
[data-qb-area="footer"] h2.footer__heading {
    font-size: .75rem;
}

/* Blog cards */
.blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--bg-line);
    padding-bottom: 1.5rem;
    transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.blog-item__link {
    display: block;
    height: 100%;
}
.blog-item__link:hover .blog-item {
    border-color: var(--bg-ink);
    transform: translateY(-2px);
}
.blog-item__title {
    margin-bottom: .75rem;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1.3;
}
.blog-item__excerpt {
    flex: 1;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--bg-body-text);
}
.blog-item__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--bg-accent);
}
.blog-item__more::after {
    content: "\2192";
    transition: transform .2s var(--ease-out);
}
.blog-item__link:hover .blog-item__more::after {
    transform: translateX(3px);
}
.blog-more {
    margin-top: 2.5rem;
    text-align: center;
}

/* Contact page */
.contact-head {
    max-width: 42rem;
    margin: 0 auto 3rem;
    text-align: center;
}
.contact-head .section-title {
    margin-top: .5rem;
}
.contact-head__text {
    margin-top: 1rem;
    color: var(--bg-body-text);
}
.contact-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .contact-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
    }
}
.contact-field {
    margin-bottom: 1.25rem;
}
.contact-field-row {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .contact-field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.contact-field label {
    display: block;
    margin-bottom: .4rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--bg-body-text);
}
.contact-field input,
.contact-field textarea {
    display: block;
    width: 100%;
    padding: .85rem 1rem;
    background: var(--bg-paper);
    border: 1px solid var(--bg-line);
    color: var(--bg-ink);
    font-size: 1rem;
    transition: border-color .15s var(--ease-out);
}
.contact-field textarea {
    resize: vertical;
    min-height: 9rem;
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--bg-accent);
    box-shadow: none;
}
.contact-submit {
    width: 100%;
    margin-top: .5rem;
}
.contact-card {
    background: var(--bg-surface);
    padding: 2rem;
}
.contact-card__intro {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bg-line);
    line-height: 1.6;
}
.contact-card__row + .contact-card__row {
    margin-top: 1.5rem;
}
.contact-card__row .overline {
    display: block;
    margin-bottom: .3rem;
    color: var(--bg-body-text);
}
.contact-card__row a {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--bg-accent);
}
.contact-card__row a:hover {
    color: var(--bg-ink);
}
.contact-card__social a {
    color: var(--bg-ink);
}

/* Testimonials */
.testimonials__title {
    text-align: center;
    margin-bottom: 2.5rem;
}
.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 1023px) {
    .testimonials__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 639px) {
    .testimonials__grid {
        grid-template-columns: 1fr;
    }
}
.testimonial {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 1.75rem;
    background: var(--bg-surface);
}
.testimonial__stars {
    color: var(--bg-accent);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .15em;
}
.testimonial blockquote {
    margin: 0;
    flex: 1;
    font-size: 1.0625rem;
    line-height: 1.6;
}
.testimonial blockquote::before {
    content: "\201D";
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: .6;
    color: var(--bg-accent);
    opacity: .25;
    margin-bottom: .5rem;
}
.testimonial figcaption {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bg-line);
}
.testimonial__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.testimonial__verified {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: #1f7a45;
}

/* Police incidents: the toolbox script ships its own ticker styles, nothing to do here */

/* Category page hero: title on the category image */
/* Category copy: intro under the hero, long SEO text as its own panel after the products */
.category-intro {
    max-width: 44rem;
    margin: 0 auto 3.5rem;
    text-align: center;
}
.category-intro::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0 auto 1.25rem;
    background: var(--bg-accent);
}
.category-intro p {
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--bg-ink);
}
.category-intro p + p {
    margin-top: .75rem;
}
/* With a category image the intro joins it as a dark caption strip, so image and text read as one block */
.category-hero:has(+ .category-intro) {
    margin-bottom: 0;
}
.category-hero + .category-intro {
    max-width: none;
    margin: 0 0 3.5rem;
    padding: 1.75rem 1.5rem 2rem;
    background: var(--bg-ink);
    border-bottom: 3px solid var(--bg-accent);
    text-align: left;
}
.category-hero + .category-intro::before {
    margin: 0 0 1rem;
}
.category-hero + .category-intro p {
    max-width: 48rem;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, .85);
}
@media (min-width: 768px) {
    .category-hero + .category-intro {
        padding: 2.25rem 3rem 2.5rem;
    }
    .category-hero + .category-intro p {
        font-size: 1.25rem;
    }
}
.category-seo {
    margin-top: 4rem;
    padding: 2.5rem 1.5rem;
    background: var(--bg-surface);
    border-top: 3px solid var(--bg-accent);
}
@media (min-width: 768px) {
    .category-seo {
        padding: 3.5rem 3rem;
    }
}
.category-seo__inner {
    max-width: 46rem;
    margin: 0 auto;
}
.category-seo h2,
.category-seo h3,
.category-seo h4 {
    margin: 2rem 0 .75rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--bg-ink);
}
.category-seo__inner > :first-child {
    margin-top: 0;
}
/* editors often write the heading as a bold opening paragraph instead of an h-tag */
.category-seo__inner > p:first-child > strong:first-child {
    display: block;
    margin-bottom: .25rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
    line-height: 1.2;
    text-transform: uppercase;
}
.category-seo p {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: var(--bg-body-text);
}
.category-seo strong {
    color: var(--bg-ink);
}
.category-seo ul,
.category-seo ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: var(--bg-body-text);
}
.category-seo ul {
    list-style: square;
}
.category-seo ol {
    list-style: decimal;
}
.category-seo li {
    margin-bottom: .375rem;
    line-height: 1.7;
}
.category-seo li::marker {
    color: var(--bg-accent);
}
.category-seo a {
    color: var(--bg-accent);
    text-decoration: underline;
}

.category-hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-charcoal);
    aspect-ratio: 16 / 9;
}
.aspect-16\/9 {
    aspect-ratio: 16 / 9;
}
.category-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.category-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,13,13,0) 40%, rgba(13,13,13,.45) 100%);
}
.category-hero__title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    padding: .6rem 1.5rem;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .7);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    background: rgba(13, 13, 13, .25);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    max-width: calc(100% - 2rem);
}
/* Category tiles */
[data-qb-element="categories"] h2:not([data-qb-setting]) {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
[data-qb-element="categories"] .bg-gray-400 {
    background-color: var(--bg-charcoal);
}

/* Blog cards */
[data-qb-element="blog"] article {
    border: 1px solid var(--bg-line);
}
[data-qb-element="blog"] article h3 {
    font-family: var(--font-head);
    font-weight: 800;
}

/* Footer: dark */
.uc-seal {
    width: 280px;
    max-width: 100%;
    height: auto;
}
[data-qb-area="footer"] h5 {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--bg-accent-bright);
}