/*
 * Tool Picker — Global Site Styles
 * File: tp-global.css  |  Place in: /wp-content/themes/astra-child/
 * v1.3.1 — fixes mega-menu top offset when WP admin bar is visible
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Inter:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root {
    --tp-amber:      #f59e0b;
    --tp-amber-dk:   #d97706;
    --tp-amber-text: #b45309;   /* small amber text on light backgrounds: 5:1 on white (6 Oct 2026). #d97706 stays for fills, borders and hovers */
    --At:            #b45309;   /* the same, for the templates' own token sets */
    --tp-amber-lt:   #fef3c7;
    --tp-black:      #0f0f0f;
    --tp-bg:         #f5f5f4;
    --tp-surface:    #ffffff;
    --tp-surface-2:  #f9fafb;
    --tp-border:     #e5e7eb;
    --tp-border-dk:  #d1d5db;
    --tp-text:       #111827;
    --tp-text-2:     #374151;
    --tp-text-3:     #6b7280;
    --tp-text-4:     #9ca3af;
    --tp-green:      #16a34a;
    --tp-red:        #dc2626;
    --tp-fH:         'Barlow Condensed', sans-serif;
    --tp-fB:         'Inter', sans-serif;
    --tp-max:        1280px;
    --tp-rad:        8px;
    --tp-rad-lg:     12px;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    background-color: var(--tp-bg) !important;
    color: var(--tp-text) !important;
    font-family: var(--tp-fB) !important;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════
   HIDE ASTRA DEFAULT HEADER & FOOTER
═══════════════════════════════════════════════════════════ */
#masthead, .site-header, .ast-site-header-wrap,
.main-header-bar, .ast-main-header-wrap,
#ast-fixed-header, .site-footer, #colophon,
.ast-site-footer-wrap, footer.site-footer {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.tp-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--tp-black);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--tp-fB);
}

/* When the WP admin bar is visible, push our sticky header below it
   so it doesn't slide underneath at the top of the page */
body.admin-bar .tp-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .tp-header { top: 46px; }
}

.tp-header::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--tp-amber);
}
/* Tier 1: logo + search (60px) */
.tp-header-top { background: var(--tp-black); }
.tp-header-top-inner {
    max-width: var(--tp-max);
    margin: 0 auto;
    padding: 0 28px;
    height: 72px;
    display: grid;
    grid-template-columns: 1fr minmax(0, 620px) 1fr;
    align-items: center;
    gap: 24px;
}
.tp-logo { grid-column: 1; justify-self: start; }
.tp-menu-toggle { grid-column: 3; justify-self: end; }

/* Tier 2: primary nav (48px) */
.tp-header-nav-row {
    background: #171717;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Logo */
.tp-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.tp-logo-clip { display: contents; }
.tp-logo-img { height: 64px; width: auto; display: block; object-fit: contain; }

/* Primary nav */
.tp-nav {
    max-width: var(--tp-max);
    margin: 0 auto;
    padding: 0 13px; /* 28 container - 15 link padding, so first/last items sit under the container edges */
    height: 48px;
    display: flex;
    align-items: stretch;
    gap: 4px;
}
/* Split the nav: Tools/Batteries/Brands/Advice left; About and Contact pushed right.
   Compare moved up beside the search with My Tools (header A, 6 Oct 2026). */
.tp-nav > .tp-nav-push { margin-left: auto; }

.tp-nav > a,
.tp-nav-dropdown > a,
.tp-mega-trigger {
    font-family: var(--tp-fB);
    font-size: 15px;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
    padding: 0 15px;
    transition: color 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    box-shadow: inset 0 0 0 0 var(--tp-amber);
}
.tp-nav > a:hover,
.tp-nav-dropdown:hover > a,
.tp-mega-wrap:hover .tp-mega-trigger { color: #fff; }
.tp-nav > a.active,
.tp-nav-dropdown > a.active,
.tp-mega-trigger.active {
    color: var(--tp-amber);
    box-shadow: inset 0 -3px 0 0 var(--tp-amber);
}

.tp-nav-chevron {
    width: 14px; height: 14px;
    transition: transform 0.2s;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MEGA MENU — JS-driven via .tp-mega-open class
═══════════════════════════════════════════════════════════ */
.tp-mega-wrap {
    position: static;
    display: flex;
    align-items: stretch;
}

/* Invisible bridge between trigger and panel */
.tp-mega-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 117px;
    height: 12px;
    pointer-events: none;
    z-index: 998;
}
.tp-mega-wrap:has(.tp-mega-panel.tp-mega-open)::after,
.tp-mega-wrap.tp-mega-hover::after {
    pointer-events: auto;
}

/* The mega panel itself
   Default position assumes no WP admin bar.
   Two-tier header: 3px stripe + 72px tier 1 + 48px tier 2 = panel starts at y=123. */
.tp-mega-panel {
    display: none;
    position: fixed;
    top: 123px;
    left: 0;
    right: 0;
    background: #161616;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 2px solid var(--tp-amber);
    box-shadow: 0 20px 48px rgba(0,0,0,0.6);
    z-index: 9999;
}
.tp-mega-panel.tp-mega-open { display: block; }

/* ── WP Admin Bar offsets ──
   When logged in, the admin bar takes 32px (or 46px on mobile) at the top.
   The sticky header is pushed down by that amount, so the fixed panel
   must follow. (The mega menu only shows >=900px, where the admin bar is 32px.) */
body.admin-bar .tp-mega-panel       { top: 155px; } /* 32 + 123 */
body.admin-bar .tp-mega-wrap::after { top: 149px; } /* 32 + 117 */
@media screen and (max-width: 782px) {
    body.admin-bar .tp-mega-panel       { top: 169px; } /* 46 + 123 */
    body.admin-bar .tp-mega-wrap::after { top: 163px; } /* 46 + 117 */
}

/* Trigger highlight when panel is open */
.tp-mega-wrap:has(.tp-mega-panel.tp-mega-open) .tp-mega-trigger {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

/* Inner grid */
.tp-mega-inner {
    max-width: var(--tp-max);
    margin: 0 auto;
    padding: 24px 28px 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}

.tp-mega-col {
    padding: 0 20px 8px 0;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.tp-mega-col:last-child  { border-right: none; padding-right: 0; }
.tp-mega-col:not(:first-child) { padding-left: 20px; }

/* ── Brands / Batteries mega panels (same system as Tools) ── */
.tp-mega-panel-brands .tp-mega-inner { grid-template-columns: repeat(4, 1fr); }

/* Amber column heading used by the Brands/Batteries panels */
.tp-mega-hd {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tp-amber);
    margin-bottom: 12px;
    min-height: 14px;
}

/* Brand row with logo chip */
.tp-mega-brand {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 7px 0 !important;
}
/* Brand tiles are pre-built 480x200 (2.4:1) images that carry their own
   background colour, so the chip adds no background, padding or white box. */
.tp-mega-brand-logo {
    width: 108px; height: 45px;
    flex-shrink: 0;
    border-radius: 4px;
    display: block;
    overflow: hidden;
    line-height: 0;
}
.tp-mega-brand-logo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Feature link (Platform Finder) */
.tp-mega-feature {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: var(--tp-amber) !important;
    font-weight: 600;
}
.tp-mega-feature svg { width: 17px; height: 17px; flex-shrink: 0; }
.tp-mega-feature:hover { color: #fbbf24 !important; }

.tp-mega-spacer {
    visibility: hidden;
    pointer-events: none;
    display: block;
}

.tp-mega-section-hd {
    display: block;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    text-decoration: none !important;
    margin-bottom: 10px;
    padding: 0 0 8px !important;
    background: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: color 0.15s;
}
.tp-mega-section-hd:hover { color: var(--tp-amber) !important; }

.tp-mega-col-title {
    display: block;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--tp-amber) !important;
    text-decoration: none !important;
    margin-bottom: 5px;
    padding: 3px 0 !important;
    background: none !important;
    transition: color 0.15s;
}
.tp-mega-col-title:hover { color: #fbbf24 !important; }

.tp-mega-col a:not(.tp-mega-col-title):not(.tp-mega-section-hd):not(.tp-mega-spacer) {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.15s;
    white-space: nowrap;
}
.tp-mega-col a:not(.tp-mega-col-title):not(.tp-mega-section-hd):not(.tp-mega-spacer):hover {
    color: #ffffff;
}

.tp-mega-footer {
    max-width: var(--tp-max);
    margin: 0 auto;
    padding: 12px 28px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tp-mega-all {
    font-size: 12px; font-weight: 600;
    color: var(--tp-amber) !important;
    text-decoration: none;
}
.tp-mega-all:hover { color: #fbbf24 !important; }
.tp-mega-footer-sep   { color: rgba(255,255,255,0.15); }
.tp-mega-footer-label { font-size: 11px; font-weight: 500; color: #4b5563; text-transform: uppercase; letter-spacing: 0.5px; }
.tp-mega-footer a:not(.tp-mega-all) {
    font-size: 12px; font-weight: 500; color: #6b7280;
    text-decoration: none; padding: 2px 8px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
    transition: background 0.15s, color 0.15s;
}
.tp-mega-footer a:not(.tp-mega-all):hover { background: rgba(255,255,255,0.08); color: #d1d5db; }

/* ═══════════════════════════════════════════════════════════
   EMPTY CATEGORIES AND BRANDS IN THE NAV  (.tp-nav-soon)
   Categories and brands with nothing in them are rendered by
   header.php as a <span>, not an <a>, so they cannot be clicked.

   They need their own colour and metrics because every rule above
   that styles a nav item targets the ELEMENT (`.tp-mega-col a`,
   `.tp-mobile-nav a.mob-sub`) rather than the class. A <span>
   therefore picks up none of it and falls back to the body colour,
   which is near-black: invisible on the dark panel.

   One knob controls the whole effect: `opacity` below. The base
   colour is the live link colour, so raising or lowering the
   opacity moves the greyed items closer to or further from the
   ones that work, and the amber headings fade with them.
═══════════════════════════════════════════════════════════ */
.tp-nav-soon {
    display: flex !important;          /* block-level, so list items stack */
    align-items: center;
    gap: 7px;
    font-family: var(--tp-fB);
    font-size: 13px;
    font-weight: 400;
    color: #cbd5e1;                    /* headings keep their own !important colour */
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.55;
    cursor: default;
    pointer-events: none;              /* not clickable, not focusable by mouse */
}

/* Said once in the panel footer rather than badged on every greyed item. */
.tp-mega-footer-note {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
}

/* Match the padding of the link each greyed item sits beside, so the
   column rhythm does not break where one appears. */
.tp-mega-col .tp-nav-soon                    { padding: 4px 0; }
.tp-mega-footer .tp-nav-soon                 { display: inline-flex !important; font-size: 12px; font-weight: 500;
                                               padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); }
.tp-mobile-nav .mob-sub.tp-nav-soon          { padding: 8px 12px 8px 20px; }
.tp-mobile-nav .mob-all.tp-nav-soon          { padding: 7px 12px 7px 20px; font-size: 12px; font-weight: 600; }
.tp-mobile-nav .mob-acc-parent.tp-nav-soon   { padding: 7px 12px; font-size: 12px; font-weight: 600; }

/* "soon" tag on a mobile accordion header whose whole section is empty */
.mob-acc-toggle .tp-nav-soon-tag {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: 100px;
    padding: 1px 5px;
    margin-left: 8px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════
   BRANDS DROPDOWN — JS class .tp-submenu-open
═══════════════════════════════════════════════════════════ */
.tp-nav-dropdown { position: relative; display: flex; align-items: stretch; }

.tp-nav-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: -10px;
    top: 100%;
    height: 10px;
    pointer-events: none;
}
.tp-nav-dropdown:has(.tp-nav-submenu.tp-submenu-open)::after {
    pointer-events: auto;
}

.tp-nav-dropdown:has(.tp-submenu-open) > a { color: #fff; background: rgba(255,255,255,0.06); }
.tp-nav-dropdown:has(.tp-submenu-open) .tp-nav-chevron { transform: rotate(180deg); opacity: 1; }

.tp-nav-submenu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--tp-rad-lg);
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    z-index: 9999;
}
.tp-nav-submenu.tp-submenu-open { display: block; }

.tp-nav-submenu a {
    display: flex; align-items: center;
    padding: 4px 12px; border-radius: 4px;
    font-size: 13px; font-weight: 400; color: #9ca3af;
    text-decoration: none; white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.tp-nav-submenu a:hover { color: #ffffff; background: transparent; }
.tp-submenu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 6px; }
.tp-submenu-all { color: var(--tp-amber) !important; font-weight: 600 !important; }
.tp-submenu-all:hover { color: #fbbf24 !important; background: transparent !important; }

/* ═══════════════════════════════════════════════════════════
   GROUPED SUBMENU (Batteries dropdown — two columns by tier)
═══════════════════════════════════════════════════════════ */
.tp-nav-submenu-grouped {
    display: none;
    min-width: 460px;
    padding: 14px;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}
.tp-nav-submenu-grouped.tp-submenu-open { display: grid; }
.tp-submenu-col { display: flex; flex-direction: column; }
.tp-submenu-hd {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    background: transparent !important;
    padding: 3px 12px 6px !important;
    margin-bottom: 5px;
    border-bottom: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.tp-nav-submenu-grouped a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.tp-nav-submenu-grouped a:hover { color: #ffffff; background: transparent; }
.tp-submenu-feature {
    color: var(--tp-amber) !important;
    font-weight: 600 !important;
    margin-top: 2px;
}
.tp-submenu-feature:hover { color: #fbbf24 !important; background: transparent !important; }
.tp-submenu-feature svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    stroke: var(--tp-amber);
}
.tp-nav-submenu-grouped .tp-submenu-divider {
    margin: 6px 6px;
}

/* ═══════════════════════════════════════════════════════════
   COMPARE BADGE
═══════════════════════════════════════════════════════════ */
.nav-compare { position: relative; }
.nav-compare-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--tp-amber); color: var(--tp-black);
    font-size: 10px; font-weight: 700;
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   HEADER RIGHT — search + mobile toggle
═══════════════════════════════════════════════════════════ */
.tp-search {
    grid-column: 2;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--tp-rad);
    height: 46px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.tp-search:focus-within { box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.tp-search-icon { width: 18px; height: 18px; color: #9ca3af; margin-left: 14px; flex-shrink: 0; pointer-events: none; }
.tp-search .tp-search-input {
    flex: 1; min-width: 0;
    background: transparent;
    color: #111827; font-family: var(--tp-fB); font-size: 14px;
    padding: 0 12px; height: 100%;
    -webkit-appearance: none; appearance: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0;
}
.tp-search .tp-search-input:focus,
.tp-search .tp-search-input:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.tp-search-input::placeholder { color: #9ca3af; }
.tp-search-btn {
    flex-shrink: 0; height: 100%; border: none;
    background: var(--tp-amber); color: #111;
    font-family: var(--tp-fB); font-size: 14px; font-weight: 600;
    padding: 0 22px; cursor: pointer; transition: background 0.15s;
}
.tp-search-btn:hover { background: var(--tp-amber-dk); }

/* ═══════════════════════════════════════════════════════════
   USP TRUST STRIP
═══════════════════════════════════════════════════════════ */
.tp-usp-strip { background: #fafaf9; border-bottom: 1px solid #e5e7eb; }
.tp-usp-inner {
    max-width: var(--tp-max);
    margin: 0 auto;
    padding: 11px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}
.tp-usp {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--tp-fB); font-size: 13px; font-weight: 500;
    color: #374151; white-space: nowrap;
}
.tp-usp svg { width: 19px; height: 19px; color: var(--tp-amber); flex-shrink: 0; }

.tp-menu-toggle {
    display: none; background: transparent;
    border: 1px solid rgba(255,255,255,0.12); border-radius: var(--tp-rad);
    color: #fff; padding: 7px; cursor: pointer;
    align-items: center; justify-content: center; transition: background 0.15s;
}
.tp-menu-toggle svg { width: 20px; height: 20px; }
.tp-menu-toggle:hover { background: rgba(255,255,255,0.08); }

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
═══════════════════════════════════════════════════════════ */
.tp-mobile-nav {
    display: none; flex-direction: column;
    background: #1a1a1a; border-top: 1px solid rgba(255,255,255,0.08);
    padding: 12px 16px; max-height: 85vh; overflow-y: auto;
}
.tp-mobile-nav.open { display: flex; }

.tp-mobile-nav > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 12px; font-size: 14px; font-weight: 500; color: #d1d5db;
    text-decoration: none; border-radius: var(--tp-rad);
    border-top: 1px solid rgba(255,255,255,0.05); transition: background 0.15s;
}
.tp-mobile-nav > a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.tp-mobile-nav > a.active { color: var(--tp-amber); }

.mob-search { margin-bottom: 8px; }
.mob-search input {
    width: 100%; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); border-radius: var(--tp-rad);
    color: #fff; font-family: var(--tp-fB); font-size: 13px; padding: 9px 12px; outline: none;
}
.mob-search input::placeholder { color: #6b7280; }

.mob-accordion { border-top: 1px solid rgba(255,255,255,0.06); }
.mob-acc-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px; background: none; border: none;
    color: #d1d5db; font-family: var(--tp-fB); font-size: 14px; font-weight: 500;
    cursor: pointer; text-align: left; transition: color 0.15s;
}
.mob-acc-toggle:hover { color: #fff; }
.mob-acc-toggle svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s; opacity: 0.5; }
.mob-acc-toggle.open svg { transform: rotate(180deg); opacity: 1; }
.mob-acc-toggle.open { color: var(--tp-amber); }
.mob-acc-toggle-sub { font-size: 13px; padding: 9px 12px 9px 16px; color: #9ca3af; }
.mob-acc-toggle-sub:hover { color: #fff; }
.mob-acc-toggle-sub.open { color: var(--tp-amber); }

.mob-acc-panel { display: none; flex-direction: column; padding-bottom: 6px; }
.mob-acc-panel.open { display: flex; }

.mob-accordion-nested {
    border-top: none; margin-left: 8px;
    border-left: 2px solid rgba(255,255,255,0.06); margin: 2px 0;
}

.mob-acc-parent {
    display: block; padding: 7px 12px;
    font-size: 12px; font-weight: 600; color: var(--tp-amber) !important;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px;
}
.tp-mobile-nav a.mob-sub {
    padding: 8px 12px 8px 20px; font-size: 13px; color: #9ca3af;
    border-top: none; display: block; text-decoration: none;
}
.tp-mobile-nav a.mob-sub:hover { color: #fff; background: rgba(255,255,255,0.04); }
.tp-mobile-nav a.mob-all {
    font-size: 12px; font-weight: 600; color: var(--tp-amber) !important;
    padding: 7px 12px 7px 20px; border-top: none; margin-bottom: 4px; display: block; text-decoration: none;
}
.tp-mobile-nav .mob-acc-hd {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    background: transparent !important;
    padding: 12px 12px 6px 20px !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    visibility: visible !important;
    opacity: 1 !important;
}
.tp-mobile-nav .mob-acc-hd:first-child { border-top: none; margin-top: 0; padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   FOOTER — class names match footer.php exactly
═══════════════════════════════════════════════════════════ */
.tp-footer {
    background: var(--tp-black);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: var(--tp-fB);
    color: #9ca3af;
}
.tp-footer-top { border-bottom: 1px solid rgba(255,255,255,0.07); }
.tp-footer-top-inner {
    max-width: var(--tp-max); margin: 0 auto; padding: 44px 28px 36px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px;
}
.fp-logo { display: inline-block; text-decoration: none; margin-bottom: 18px; }
.fp-logo-img {
    height: 56px;
    width: auto;
    max-width: 200px;
    display: block;
    object-fit: contain;
}
.fp-tagline { font-size: 13px; line-height: 1.65; color: #9ca3af; max-width: 260px; margin: 0 0 18px; }
.fp-social { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-social a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    flex: 0 0 36px;
    border-radius: var(--tp-rad);
    background: rgba(255,255,255,0.06);
    color: #9ca3af;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    box-sizing: border-box;
    padding: 0;
}
.fp-social a:hover { background: var(--tp-amber); color: var(--tp-black); }
.fp-social a svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
    display: block;
    flex-shrink: 0;
}
.fp-col-title { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.fp-col ul { list-style: none; margin: 0; padding: 0; }
.fp-col ul li { margin-bottom: 9px; }
.fp-col ul li a { font-size: 13px; color: #a1a1aa; text-decoration: none; transition: color 0.15s; }
.fp-col ul li a:hover { color: var(--tp-amber); }

.tp-footer-mid { border-bottom: 1px solid rgba(255,255,255,0.05); }
.tp-footer-mid-inner { max-width: var(--tp-max); margin: 0 auto; padding: 20px 28px; }
.fp-disclaimer { font-size: 11.5px; line-height: 1.7; color: #8b8f98; margin: 0 0 8px; }
.fp-disclaimer:last-child { margin: 0; }
.fp-disclaimer a { color: #b4b8c0; text-decoration: none; }
.fp-disclaimer a:hover { color: var(--tp-amber); }

.tp-footer-bottom-inner {
    max-width: var(--tp-max); margin: 0 auto; padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
}
.fp-copyright { font-size: 12px; color: #8b8f98; margin: 0; }
.fp-copyright span { color: var(--tp-amber); }
/* Company details line (trading disclosure), 22 Sep 2026 */
.fp-company { font-size: 11px; line-height: 1.6; color: #8b8f98; margin: 0; }
.fp-bottom-links { display: flex; gap: 16px; }
.fp-bottom-links a { font-size: 12px; color: #4b5563; text-decoration: none; transition: color 0.15s; }
.fp-bottom-links a:hover { color: var(--tp-amber); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .tp-header-nav-row { display: none; }
    .tp-mega-wrap::after { display: none; }
    .tp-footer-top-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .tp-footer-top-inner .fp-brand { grid-column: 1 / -1; }

    /* Tier 1: logo + hamburger on row 1, full-width search on row 2 */
    .tp-header-top-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .tp-logo        { order: 1; }
    .tp-menu-toggle { order: 2; display: flex; margin-left: auto; }
    .tp-search      { order: 3; display: flex; flex-basis: 100%; width: 100%; }

    /* USP strip: rotate one at a time on mobile (JS toggles .is-active) */
    .tp-usp-inner {
        position: relative;
        display: block;
        height: 20px;
        overflow: hidden;
    }
    .tp-usp {
        position: absolute;
        inset: 0;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        opacity: 0;
        transition: opacity .45s ease;
        pointer-events: none;
    }
    .tp-usp.is-active { opacity: 1; }
    /* reduced-motion fallback: stacked list, all visible, no rotation */
    .tp-usp-inner.tp-usp-static { position: static; display: flex; flex-direction: column; align-items: flex-start; height: auto; gap: 11px; overflow: visible; }
    .tp-usp-inner.tp-usp-static .tp-usp { position: static; inset: auto; justify-content: flex-start; align-items: center; opacity: 1; white-space: normal; }
}
@media (max-width: 560px) {
    .tp-header-top-inner { padding-left: 16px; padding-right: 16px; }
    .tp-usp-inner { padding: 12px 16px; }
    .tp-logo-img { height: 42px; }
    .tp-footer-top-inner { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .tp-footer-mid-inner,
    .tp-footer-bottom-inner { padding-left: 16px; padding-right: 16px; }
}


/* ═══════════════════════════════════════════════════════════
   STANDARD PAGE CONTENT — heading contrast fix
   Privacy Policy, Cookie Policy and Terms render inside
   .entry-content on the light page background (--tp-bg). A global
   heading colour was landing on their headings and leaving them
   near-white / unreadable. Force brand ink so all content-page
   headings are visible. Body text already inherits --tp-text.
═══════════════════════════════════════════════════════════ */
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4,
body .entry-content h5,
body .entry-content h6 {
    color: var(--tp-text) !important;
}

/* Page H1 title (the page header, OUTSIDE .entry-content) had the same
   near-white issue on the light background. Force brand ink. */
body .entry-title,
body h1.entry-title,
body .ast-single-entry-title .entry-title {
    color: var(--tp-text) !important;
}

/* Cookie Policy title column, matches Privacy/Terms */
.entry-content .tp-legal-head {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 64px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Cookie Policy: constrain the Complianz declaration to the legal-page column */
.entry-content #cmplz-document {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Legal pages hold the 760px column (T-329, 7 Oct 2026). Astra's
   .entry-content[data-ast-blocks-layout] > * { max-width: content width }
   outranked the blocks' own .tp-legal { max-width: 760px }, so Privacy,
   Terms, Affiliate and the Cookie Policy's section 11 ran 1200px wide. */
.entry-content[data-ast-blocks-layout] > .tp-legal,
.entry-content[data-ast-blocks-layout] > .tp-legal-head,
.entry-content[data-ast-blocks-layout] > .tp-cookie-extra {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Legal pages on phones keep a 16px side margin (T-336, 9 Oct 2026).
   Nothing in the chain (.tp-legal, .entry-content, article, main) had side
   padding, so the text ran edge to edge at 375px on all four pages. */
@media (max-width: 800px) {
    .entry-content[data-ast-blocks-layout] > .tp-legal,
    .entry-content[data-ast-blocks-layout] > .tp-legal-head,
    .entry-content[data-ast-blocks-layout] > .tp-cookie-extra,
    .entry-content #cmplz-document {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    /* Cookie Policy section 11 (10 Oct 2026): the block's own <style> sits
       later in the page and sets padding: 8px 0 56px with the same weight as
       the rule above, so it won. body adds the weight it needs. */
    body .entry-content[data-ast-blocks-layout] > .tp-cookie-extra,
    body .entry-content .tp-cookie-extra {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
}

/* Cookie Policy: zero any residual indent on the body's text elements */
.entry-content #cmplz-document p,
.entry-content #cmplz-document h2,
.entry-content #cmplz-document h3 {
    padding-left: 0;
    margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════
   FILTER KIT (5 Oct 2026)
   One look for every filter panel on the site. The rules:
   1. White panel, rounded, amber top edge; group labels small,
      uppercase, dark amber.
   2. Amber marks what you've chosen. On brand and platform pages
      the platform buttons use the brand's colour instead (--BRC).
   3. The box inside a panel filters that list as you type (funnel
      icon, "Filter …"). Only the header box searches the site.
   4. Either-or choices are a switch (.tpf-seg); option lists are
      chips or ticks; long lists are a dropdown (.tpf-sel).
   5. Brands are logo tiles (tp_brand_logo_tile()): dark, turning
      to the brand's colours on hover and when chosen.
═══════════════════════════════════════════════════════════ */
.tpf-panel{background:#fff;border:1px solid #e5e7eb;border-top:4px solid var(--tp-amber);border-radius:16px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.35);padding:16px 18px;font-family:'Inter',system-ui,sans-serif;box-sizing:border-box;}
.tpf-panel *{box-sizing:border-box;}
.tpf-l{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-amber-text,#b45309);margin:0 0 7px;line-height:1.2;}
.tpf-row{display:flex;gap:14px 18px;align-items:flex-end;flex-wrap:wrap;}
.tpf-row + .tpf-row,.tpf-block + .tpf-block{margin-top:14px;}
.tpf-q{display:flex;align-items:center;gap:10px;border:1.5px solid var(--tp-amber);border-radius:12px;padding:0 14px;background:#fffdf5;
  transition:box-shadow .15s;flex:1 1 260px;min-width:0;margin:0;cursor:text;}
.tpf-q:focus-within{box-shadow:0 0 0 3px rgba(245,158,11,.22);}
.tpf-q svg{width:17px;height:17px;color:var(--tp-amber-dk);flex:none;}
.tpf-q input{flex:1;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
  font:500 14px 'Inter',system-ui,sans-serif!important;color:#111827!important;padding:11px 0!important;margin:0!important;height:auto!important;}
.tpf-q input::placeholder{color:#6b7280;opacity:1;}
.tpf-q-hint{font-size:11px;font-weight:600;color:#9ca3af;white-space:nowrap;}
.tpf-seg{display:inline-flex;flex-wrap:wrap;background:#f5f5f4;border-radius:10px;padding:3px;gap:2px;}
.tpf-seg button,.tpf-seg a{border:0;background:transparent;border-radius:8px;padding:7px 12px;font:600 12.5px 'Inter',system-ui,sans-serif;
  color:#374151;cursor:pointer;text-decoration:none;line-height:1.2;white-space:nowrap;}
.tpf-seg button:hover,.tpf-seg a:hover{color:#111827;background:rgba(255,255,255,.7);}
.tpf-seg .is-on{background:var(--tp-amber)!important;color:#111!important;font-weight:700;}
.tpf-sel{border:1px solid #d1d5db!important;border-radius:10px!important;padding:9px 34px 9px 12px!important;font:600 13px 'Inter',system-ui,sans-serif!important;
  background-color:#fff!important;color:#111827!important;height:auto!important;width:auto;max-width:100%;margin:0!important;min-width:150px;}
.tpf-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #e5e7eb;border-radius:999px;padding:7px 13px;
  font:600 12.5px 'Inter',system-ui,sans-serif;background:#fff;color:#374151;cursor:pointer;text-decoration:none;white-space:nowrap;}
.tpf-chip em,.tpf-chip span{font-style:normal;color:#6b7280;font-weight:500;}
.tpf-chip:hover{border-color:var(--tp-amber);color:#111827;}
.tpf-chip.is-on{background:var(--tp-amber);border-color:var(--tp-amber);color:#111;}
.tpf-chip.is-on em,.tpf-chip.is-on span{color:#111;}
.tpf-tog{display:inline-flex;gap:8px;align-items:center;font:600 13px 'Inter',system-ui,sans-serif;color:#374151;cursor:pointer;user-select:none;margin:0;}
.tpf-tog input{position:absolute;opacity:0;pointer-events:none;}
.tpf-tog i{width:34px;height:20px;border-radius:99px;background:#d1d5db;position:relative;transition:background .15s;flex:none;}
.tpf-tog i:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;}
.tpf-tog input:checked + i{background:var(--tp-amber);}
.tpf-tog input:checked + i:after{left:17px;}
.tpf-tog input:focus-visible + i{box-shadow:0 0 0 3px rgba(245,158,11,.3);}
/* platform buttons on brand-coloured pages */
.tpf-bp{display:inline-flex;align-items:center;border:2px solid var(--BRC,#3a3a3a);border-radius:8px;padding:6px 11px;
  font:700 12px 'Inter',system-ui,sans-serif;background:#fff;color:#111827;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.1;}
.tpf-bp:hover{background:#f9fafb;}
.tpf-bp.is-on{background:var(--BRC,#3a3a3a);color:var(--BRT,#fff);}
/* brand logo tiles */
.tpf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;}
.tpf-tiles.is-sm{grid-template-columns:repeat(3,1fr);gap:6px;}
.tpf-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#fff;
  border:1.5px solid #e5e7eb;border-radius:12px;height:62px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
  font-family:'Inter',system-ui,sans-serif;text-decoration:none;color:#111827;}
.tpf-tile-sm{height:44px;padding:6px 8px;border-radius:10px;}
.tpf-tile img{display:block;max-height:22px;max-width:100%;width:auto;object-fit:contain;}
.tpf-tile-sm img{max-height:15px;}
.tpf-tile .tpf-c{display:none;}
.tpf-tile .tpf-dk{filter:grayscale(1) brightness(.25);}
.tpf-tile:hover .tpf-m,.tpf-tile.is-on .tpf-m{display:none;}
.tpf-tile:hover .tpf-c,.tpf-tile.is-on .tpf-c{display:block;}
.tpf-tile-txt{font-weight:800;font-size:12px;line-height:1.15;text-align:center;}
.tpf-tile-sub{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;line-height:1;}
.tpf-tile-sm .tpf-tile-sub{font-size:7px;letter-spacing:.06em;}
.tpf-tile:hover .tpf-tile-sub.is-green,.tpf-tile.is-on .tpf-tile-sub.is-green{color:#00843d;}
.tpf-tile-n{position:absolute;right:6px;bottom:3px;font-style:normal;font-size:10px;font-weight:700;color:#6b7280;}
.tpf-tile-sm .tpf-tile-n{font-size:9px;right:4px;bottom:2px;}
.tpf-tile:hover{border-color:var(--tp-amber);}
.tpf-tile.is-on{border-color:var(--tp-amber);background:var(--tp-amber-lt);box-shadow:0 0 0 2px var(--tp-amber) inset;}
.tpf-tile.is-on:after{content:"\2713";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--tp-amber);
  color:#111;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.tpf-tile[aria-disabled="true"]{opacity:.35;pointer-events:none;}
@media (max-width:640px){
  .tpf-panel{padding:14px;}
  .tpf-tiles{grid-template-columns:repeat(3,1fr);}
  .tpf-sel{width:100%;}
  .tpf-row > div{width:100%;}
  .tpf-seg{display:flex;}
  .tpf-q-hint{display:none;}
}

/* ═══════════════════════════════════════════════════════════
   COMPACT BATTERY / KIT / CHARGER CARD (5 Oct 2026)
   tp_power_card_compact_html(): platform pages, Batteries & chargers
═══════════════════════════════════════════════════════════ */
.tpc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px;}
.tpc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;color:#111827;transition:border-color .15s,box-shadow .15s,transform .15s;}
.tpc-card:hover{border-color:var(--tp-amber);box-shadow:0 6px 18px rgba(0,0,0,.07);}
.tpc-card.is-featured{border-color:var(--tp-amber);}
.tpc-card.is-hidden{display:none;}
.tpc-cover{position:absolute;inset:0;z-index:1;}
.tpc-cmp,.tpc-btn,.tpc-all,.tpc-aff,.tpc-aff a{position:relative;z-index:2;}
.tpc-cmp{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.95);border:1px solid #e5e7eb;
  border-radius:99px;padding:3px 9px 3px 5px;font-size:10.5px;font-weight:600;color:#374151;cursor:pointer;margin:0;}
.tpc-cmp input{position:absolute;opacity:0;pointer-events:none;}
.tpc-cmp i{width:14px;height:14px;border:1.5px solid #d1d5db;border-radius:4px;background:#fff;}
.tpc-cmp.is-on{background:var(--tp-amber);border-color:var(--tp-amber-dk);color:#111;}
.tpc-cmp.is-on i{background:#111;border-color:#111;}
.tpc-cmp.is-off{opacity:.4;}
.tpc-img{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid #f3f4f6;background:#fff;}
.tpc-img img{max-width:100%;max-height:100%;object-fit:contain;}
.tpc-img.is-plate{background:#111;}
.tpc-plate{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:34px;color:var(--tp-amber);letter-spacing:.5px;text-align:center;line-height:1;}
.tpc-ah{position:absolute;left:8px;top:8px;background:#111;color:#fff;font-weight:800;font-size:12px;padding:3px 7px;border-radius:6px;}
.tpc-flag{position:absolute;left:8px;bottom:8px;background:var(--tp-amber);color:#111;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;}
.tpc-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:3px;flex:1;}
.tpc-brand{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-amber-text,#b45309);}
.tpc-name{font-weight:700;font-size:14px;line-height:1.3;}
.tpc-kit{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fef3c7;color:#92400e;border-radius:4px;padding:1px 5px;vertical-align:2px;}
.tpc-plat{align-self:flex-start;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;margin:2px 0;}
.tpc-spec{font-size:11.5px;color:#6b7280;line-height:1.4;}
.tpc-contents{font-size:11.5px;color:#374151;line-height:1.4;}
.tpc-cross{font-size:11px;color:#3730a3;background:#eef2ff;border-radius:6px;padding:5px 7px;line-height:1.35;margin-top:4px;}
.tpc-buy{margin-top:auto;padding-top:8px;}
.tpc-price{font-weight:800;font-size:17px;line-height:1.1;}
.tpc-price small{font-size:11px;font-weight:600;color:#6b7280;}
.tpc-meta{font-size:10.5px;color:#6b7280;margin-top:2px;line-height:1.35;}
.tpc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:#6b7280;}
.tpc-go{font-weight:700;color:#111827;}
.tpc-card:hover .tpc-go{color:var(--tp-amber-text,#b45309);}
.tpc-btn{display:inline-block;margin-top:8px;background:var(--tp-amber);color:#111!important;font-weight:700;font-size:12px;border-radius:6px;padding:6px 10px;text-decoration:none!important;}
.tpc-btn:hover{background:var(--tp-amber-dk);}
.tpc-all{margin-top:6px;font-size:11.5px;}
.tpc-all summary{cursor:pointer;font-weight:700;color:var(--tp-amber-text,#b45309);}
.tpc-of{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid #f3f4f6;}
.tpc-of small{display:block;color:#6b7280;font-size:10px;}
.tpc-of a{font-weight:700;color:var(--tp-amber-text,#b45309);text-decoration:none;white-space:nowrap;}
.tpc-aff{display:block;margin-top:6px;font-size:10.5px;color:#6b7280;}
.tpc-none{font-size:12px;color:#6b7280;}
.tpc-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:14px;background:#111827;color:#fff;
  padding:11px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);font:600 13px 'Inter',system-ui,sans-serif;}
.tpc-bar[hidden]{display:none;}
.tpc-bar strong{color:var(--tp-amber);}
.tpc-bar button{background:none;border:0;color:#9ca3af;text-decoration:underline;cursor:pointer;font:inherit;font-size:12px;}
.tpc-bar a{background:var(--tp-amber);color:#111!important;text-decoration:none!important;font-weight:700;padding:7px 14px;border-radius:999px;}
@media (max-width:640px){
  .tpc-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .tpc-bar{left:12px;right:12px;transform:none;border-radius:14px;justify-content:space-between;}
}

/* ═══════════════════════════════════════════════════════════
   BATTERIES MENU BY BRAND (5 Oct 2026): header.php .tpbm
   One block per brand with its white logo; a side column with
   the Finder, all platforms, Batteries & chargers and compare.
═══════════════════════════════════════════════════════════ */
.tp-mega-panel-batteries .tp-mega-inner.tpbm{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;padding-top:24px;padding-bottom:26px;}
.tpbm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 26px;align-content:start;}
.tpbm-b{min-width:0;}
.tpbm .tpbm-logo{display:flex!important;align-items:center;height:30px;margin:0 0 10px;padding:0!important;}
.tpbm .tpbm-logo img{height:26px;width:auto;max-width:130px;object-fit:contain;object-position:left center;display:block;opacity:.95;transition:opacity .15s;}
.tpbm .tpbm-logo img.is-filter{filter:brightness(0) invert(1);}
.tpbm .tpbm-logo:hover img{opacity:1;}
.tpbm .tpbm-logo span{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:22px;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.tpbm a.tpbm-p{display:flex!important;justify-content:space-between;align-items:baseline;gap:8px;color:#d1d5db!important;font-size:13.5px;padding:6px 0!important;
  border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none!important;white-space:nowrap;transition:color .15s;}
.tpbm a.tpbm-p span{overflow:hidden;text-overflow:ellipsis;}
.tpbm a.tpbm-p small{color:#6b7280;font-size:11px;flex:none;}
.tpbm a.tpbm-p:hover{color:var(--tp-amber)!important;}
.tpbm-side{border-left:1px solid rgba(255,255,255,.08);padding-left:24px;display:flex;flex-direction:column;gap:10px;}
.tpbm-side .tp-mega-hd{margin-bottom:2px;}
.tpbm a.tpbm-feat{display:block;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:12px 14px!important;
  font-weight:700;font-size:14px;color:#fff!important;text-decoration:none!important;white-space:normal;}
.tpbm a.tpbm-feat:hover{border-color:var(--tp-amber);}
.tpbm a.tpbm-feat small{display:block;font-weight:500;color:#d1d5db;font-size:12px;margin-top:3px;}
.tpbm a.tpbm-l{display:block;color:#fff!important;font-size:13.5px;font-weight:600;text-decoration:none!important;padding:4px 0!important;white-space:normal;}
.tpbm a.tpbm-l:hover{color:var(--tp-amber)!important;}
.tpbm a.tpbm-l small{display:block;color:#9ca3af;font-weight:500;font-size:11.5px;margin-top:1px;}
@media (max-width:1180px){.tpbm-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.tpbm a.tpbm-l.tpbm-main{font-size:15px;font-weight:800;color:var(--tp-amber)!important;}
.tpbm a.tpbm-l.tpbm-main:hover{color:#fbbf24!important;}

/* Filter kit additions for the category pages (5 Oct 2026) */
.tpf-ticks{display:flex;flex-direction:column;gap:2px;}
.tpf-ticks.is-scroll{max-height:236px;overflow-y:auto;scrollbar-width:thin;margin-right:-6px;padding-right:6px;}
.tpf-tick{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:7px;cursor:pointer;margin:0;font:500 12.5px 'Inter',system-ui,sans-serif;color:#374151;line-height:1.3;}
.tpf-tick:hover{background:#fffbeb;color:#111827;}
.tpf-tick input{position:absolute;opacity:0;pointer-events:none;}
.tpf-tick i{width:16px;height:16px;flex:none;border:1.5px solid #d1d5db;border-radius:4px;background:#fff;position:relative;transition:background .12s,border-color .12s;}
.tpf-tick input:checked + i{background:var(--tp-amber);border-color:var(--tp-amber-dk);}
.tpf-tick input:checked + i:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #111;border-width:0 2px 2px 0;transform:rotate(45deg);}
.tpf-tick input:focus-visible + i{box-shadow:0 0 0 3px rgba(245,158,11,.3);}
.tpf-tick span{flex:1;min-width:0;}
.tpf-tick input:checked ~ span{color:#111827;font-weight:700;}
.tpf-tick em{font-style:normal;font-size:11px;color:#9ca3af;}
.tpf-tick.is-off{opacity:.4;cursor:not-allowed;}
.tpf-chips{display:flex;flex-wrap:wrap;gap:6px;}
.tpf-chip:disabled{opacity:.4;cursor:not-allowed;}
.tpf-seg.is-fill{display:flex;width:100%;}
.tpf-seg.is-fill > *{flex:1 1 auto;text-align:center;padding:7px 6px;}
.tpf-seg button:disabled{opacity:.35;cursor:not-allowed;background:transparent!important;}
.tpf-seg em{font-style:normal;font-weight:500;color:#6b7280;font-size:11px;}
.tpf-seg .is-on em{color:#111;}
.tpf-price{display:grid;grid-template-columns:1fr auto 1fr auto;gap:6px;align-items:center;}
.tpf-price > span{font-size:11.5px;color:#6b7280;}
.tpf-go{border:0;border-radius:8px;background:var(--tp-amber);color:#111;font:700 12.5px 'Inter',system-ui,sans-serif;padding:8px 11px;cursor:pointer;}
.tpf-go:hover{background:var(--tp-amber-dk);}

/* ═══════════════════════════════════════════════════════════
   TOOLS AND BRANDS MENUS, LIVE ONLY (5 Oct 2026): header.php
   .tpnm (tools) and .tpnb (brands), same look as the Batteries
   menu (.tpbm). Side column reuses .tpbm-side / .tpbm-l.
═══════════════════════════════════════════════════════════ */
.tp-mega-panel-tools .tp-mega-inner.tpnm,
.tp-mega-panel-brands .tp-mega-inner.tpnb{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;padding-top:24px;padding-bottom:26px;}
.tpnm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;align-items:start;}
.tpnm-col{min-width:0;}
.tpnm-g + .tpnm-g{margin-top:18px;}
.tpnm a.tpnm-gh{display:flex!important;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px!important;font-weight:800!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tp-amber)!important;padding:0 0 8px!important;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px;text-decoration:none!important;white-space:nowrap;}
.tpnm a.tpnm-gh span{color:#6b7280;font-weight:600;letter-spacing:0;font-size:11px;}
.tpnm a.tpnm-gh:hover{color:#fbbf24!important;}
.tpnm a.tpnm-t{display:flex!important;justify-content:space-between;align-items:baseline;gap:8px;color:#d1d5db!important;font-size:13.5px!important;padding:6px 0!important;
  border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none!important;white-space:nowrap;transition:color .15s;}
.tpnm a.tpnm-t small{color:#6b7280;font-size:11px;flex:none;}
.tpnm a.tpnm-t:hover{color:var(--tp-amber)!important;}
.tpnm-chips{display:flex;flex-wrap:wrap;gap:6px;}
.tpnm-chips a{font-size:12px;font-weight:600;color:#e5e7eb!important;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:5px 10px;text-decoration:none!important;}
.tpnm-chips a:hover{border-color:var(--tp-amber);color:#fff!important;}
.tpnb-h{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9ca3af;margin:0 0 8px;}
.tpnb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.tpnb a.tpnb-t{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:74px;padding:8px!important;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04);text-decoration:none!important;transition:border-color .15s,background .15s;}
.tpnb a.tpnb-t:hover{border-color:var(--tp-amber);background:rgba(245,158,11,.10);}
.tpnb-t img{display:block;max-height:24px;max-width:88%;width:auto;object-fit:contain;opacity:.94;}
.tpnb-t img.is-filter{filter:brightness(0) invert(1);}
.tpnb-t b{color:#fff;font-size:13px;}
.tpnb-t small{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9ca3af;line-height:1;}
.tpnb-t em{font-style:normal;font-size:11px;color:#9ca3af;}
.tpnb-soon{font-size:12.5px;color:#9ca3af;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;}
.tpnb-soon b{color:#d1d5db;font-weight:600;}
@media (max-width:1180px){.tpnm-cols{grid-template-columns:repeat(3,minmax(0,1fr));}.tpnb-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* About and Contact sit quieter than the shopping menus */
.tp-nav > a.tp-nav-quiet{color:#9ca3af;font-weight:500;font-size:14px;}
.tp-nav > a.tp-nav-quiet:hover{color:#fff;}
.tp-nav > a.tp-nav-quiet.active{color:var(--tp-amber);}
/* Keyboard focus shows on the triggers */
.tp-mega-trigger:focus-visible,.tp-nav > a:focus-visible{outline:2px solid var(--tp-amber);outline-offset:-4px;border-radius:6px;}
/* Phone menu */
.tp-mobile-nav a.mob-sub small,.tp-mobile-nav a.mob-grp small{color:#6b7280;font-size:11px;}
.tp-mobile-nav a.mob-sub{display:flex;justify-content:space-between;gap:10px;}
.tp-mobile-nav a.mob-grp{padding-left:16px!important;color:#d1d5db;}
.tp-mobile-nav .mob-soon{display:block;font-size:12px;color:#6b7280;padding:8px 12px 4px 20px;}
.tp-mobile-nav .mob-small{display:flex;gap:18px;padding:12px 12px 4px;border-top:1px solid rgba(255,255,255,0.06);}
.tp-mobile-nav .mob-small a{font-size:13px;color:#9ca3af;text-decoration:none;}
.tp-mobile-nav .mob-small a:hover{color:#fff;}

/* ── Breadcrumb strip (6 Oct 2026) ─────────────────────────────────────
   One style on every browse page, from tp_breadcrumb_html() in
   tp-seo-tidy.php (the same trail Google reads). Tool, battery and compare
   pages use their "‹ back" link instead. */
.tp-bc{background:#111;border-bottom:1px solid rgba(255,255,255,.08);font-family:'Inter',sans-serif;}
.tp-bc-w{max-width:1240px;margin:0 auto!important;padding:10px 28px!important;list-style:none!important;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.62);}
.tp-bc-w li{display:flex;align-items:center;margin:0!important;padding:0!important;list-style:none!important;min-width:0;}
.tp-bc-w li::before{content:none!important;}
.tp-bc-w li+li::before{content:'›'!important;display:inline-block;margin:0 8px;color:rgba(255,255,255,.3);}
.tp-bc-w a{color:#f59e0b!important;text-decoration:none!important;font-weight:500;}
.tp-bc-w a:hover{color:#fff!important;}
.tp-bc-w [aria-current]{color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw;}
@media(max-width:780px){.tp-bc-w{padding:9px 16px!important;font-size:12px;}}

/* Footer "All tools ›" style links (6 Oct 2026) */
.fp-col ul li a.fp-more { color: #f59e0b; font-weight: 600; }
.fp-col ul li a.fp-more:hover { color: #fff; }

/* ── MailerLite sign-up form (6 Oct 2026, T-017) ─────────────────────
   One style for the embed from tp_signup_form_html() (functions.php), on
   the homepage band and /newsletter/, both dark. The form's own heading and
   intro are hidden; the page supplies its own. */
.tp-ml .ml-embedded{width:100%;min-height:10px;}
.tp-ml .ml-embedded *,.tp-ml .ml-embedded *::before,.tp-ml .ml-embedded *::after{font-family:var(--fB,'Inter',sans-serif)!important;}
.tp-ml .ml-embedded .ml-form-embedContainer,
.tp-ml .ml-embedded .ml-form-embedWrapper,
.tp-ml .ml-embedded .ml-form-embedBody,
.tp-ml .ml-embedded .ml-form-embedContent,
.tp-ml .ml-embedded .ml-form-formContent,
.tp-ml .ml-embedded form{
  background:transparent!important;border:0!important;box-shadow:none!important;
  max-width:100%!important;padding:0!important;margin:0!important;
}
.tp-ml .ml-embedded .ml-form-embedContent h4,
.tp-ml .ml-embedded .ml-form-embedContent > p,
.tp-ml .ml-embedded .ml-form-embedContent .ml-form-embedContentTitle{display:none!important;}
.tp-ml .ml-embedded input[type="text"],
.tp-ml .ml-embedded input[type="email"],
.tp-ml .ml-embedded .ml-form-fieldRow input,
.tp-ml .ml-embedded .ml-field-group input{
  width:100%!important;background:#1c1c1c!important;color:#fff!important;
  border:1px solid #333!important;border-radius:var(--rad)!important;
  padding:13px 15px!important;font-size:16px!important;margin-bottom:10px!important;box-shadow:none!important;
}
.tp-ml .ml-embedded input::placeholder{color:#777!important;opacity:1!important;}
.tp-ml .ml-embedded input:focus{border-color:var(--A,#f59e0b)!important;outline:none!important;}
.tp-ml .ml-embedded .ml-form-embedPermissions,
.tp-ml .ml-embedded .ml-form-embedPermissions p,
.tp-ml .ml-embedded .ml-form-checkboxRow label,
.tp-ml .ml-embedded .ml-form-checkboxRow .label-description,
.tp-ml .ml-embedded .ml-form-checkboxRow p{color:#e8e0d0!important;font-size:13px!important;line-height:1.55!important;}
.tp-ml .ml-embedded p,
.tp-ml .ml-embedded label,
.tp-ml .ml-embedded span,
.tp-ml .ml-embedded li,
.tp-ml .ml-embedded div[class*="Permissions"],
.tp-ml .ml-embedded div[class*="privacy"],
.tp-ml .ml-embedded div[class*="Privacy"]{color:#d6d3d1!important;}
.tp-ml .ml-embedded a{color:var(--A,#f59e0b)!important;text-decoration:underline!important;}
.tp-ml .ml-embedded button span,
.tp-ml .ml-embedded button *{color:#111!important;}
.tp-ml .ml-embedded input[type="checkbox"]{accent-color:var(--A,#f59e0b)!important;width:16px!important;height:16px!important;}
.tp-ml .ml-embedded button.primary,
.tp-ml .ml-embedded .ml-form-embedSubmit button,
.tp-ml .ml-embedded .ml-form-embedSubmitLoad{
  background:var(--A,#f59e0b)!important;color:#111!important;
  font-family:var(--fH)!important;font-weight:900!important;font-size:18px!important;
  letter-spacing:1px!important;text-transform:uppercase!important;
  border:0!important;border-radius:var(--rad)!important;padding:14px 28px!important;
  width:100%!important;cursor:pointer!important;margin-top:4px!important;
}
.tp-ml .ml-embedded button.primary:hover,
.tp-ml .ml-embedded .ml-form-embedSubmit button:hover{background:var(--Ad,#d97706)!important;}
.tp-ml .ml-embedded .ml-form-successBody,
.tp-ml .ml-embedded .ml-form-successContent h4,
.tp-ml .ml-embedded .ml-form-successContent p{color:#fff!important;}


/* ═══════════════════════════════════════════════════════════
   HEADER A: "your stuff" beside the search (6 Oct 2026, Rob)
   Compare and My Tools with counts from the browser. Icon-only
   on phones, beside the menu button; 44px targets.
═══════════════════════════════════════════════════════════ */
.tp-hdr-mine { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.tp-hdr-btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 14px; border-radius: var(--tp-rad);
    border: 1px solid rgba(255,255,255,0.16); color: #fff !important;
    font-family: var(--tp-fB); font-size: 14px; font-weight: 600; text-decoration: none !important;
    white-space: nowrap; transition: background .15s, border-color .15s;
}
.tp-hdr-btn svg { flex-shrink: 0; }
.tp-hdr-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.tp-hdr-btn:focus-visible { outline: 3px solid var(--tp-amber); outline-offset: 2px; }
.tp-hdr-btn.active { border-color: var(--tp-amber); }
.tp-hdr-mt { background: var(--tp-amber); border-color: var(--tp-amber); color: #111 !important; font-weight: 700; }
.tp-hdr-mt:hover { background: #fbbf24; border-color: #fbbf24; }
.tp-hdr-mt.active { box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
.tp-hdr-btn .tp-hdr-n,
.tp-hdr-btn .nav-compare-badge {
    position: static; width: auto; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 99px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tp-amber); color: #111; font-size: 12px; font-weight: 700; line-height: 1;
}
.tp-hdr-mt .tp-hdr-n { background: #111; color: var(--tp-amber); }
.tp-hdr-n[hidden] { display: none !important; }
/* The count sits dead centre (8 Oct 2026, Rob): Inter's digits ride high in
   their line box, so trim the box to the figures' own height. */
.tp-hdr-btn .tp-hdr-n,
.tp-hdr-btn .nav-compare-badge { font-variant-numeric: tabular-nums; text-box: trim-both cap alphabetic; padding-left: 5px; padding-right: 5px; }
.tp-hdr-mt.has-alert::after { content: ''; position: absolute; top: -4px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 2px var(--tp-black); }
@media (max-width: 1100px) and (min-width: 901px) {
    .tp-hdr-btn { padding: 0 11px; }
    .tp-hdr-cmp .tp-hdr-lbl { display: none; }
}
@media (max-width: 900px) {
    .tp-hdr-mine    { order: 2; margin-left: auto; gap: 4px; }
    .tp-menu-toggle { order: 3; margin-left: 0; width: 44px; height: 44px; }
    .tp-search      { order: 4; }
    .tp-hdr-btn     { width: 44px; padding: 0; justify-content: center; border-color: transparent; }
    .tp-hdr-mt      { background: transparent; border-color: transparent; color: var(--tp-amber) !important; }
    .tp-hdr-mt:hover,
    .tp-hdr-btn:hover { background: rgba(255,255,255,0.08); }
    .tp-hdr-lbl     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tp-hdr-btn .tp-hdr-n,
    .tp-hdr-btn .nav-compare-badge { position: absolute; top: 2px; right: 0; height: 18px; min-width: 18px; padding: 0 5px; font-size: 11px; }
    .tp-hdr-mt .tp-hdr-n { background: var(--tp-amber); color: #111; }
}

/* ═══════════════════════════════════════════════════════════
   "I OWN THIS" PANEL (tool and pack pages, tp-mytools.js)
═══════════════════════════════════════════════════════════ */
.tp-own { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 10px; font-family: var(--tp-fB); }
.tp-own-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tp-own-btn {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
    border-radius: 10px; background: #111; color: #fff; font: 700 15px var(--tp-fB);
}
.tp-own .tp-own-btn:hover, .tp-own .tp-own-btn:focus { background: #262626; color: #fff; }   /* beats the theme's button:hover (black text) */
.tp-own-btn:focus-visible { outline: 3px solid var(--tp-amber); outline-offset: 2px; }
.tp-own-btn .tp-own-i-on { display: none; }
.tp-own.is-on .tp-own-btn { background: var(--tp-amber-lt); color: #78350f; box-shadow: inset 0 0 0 1px #fcd34d; }
.tp-own.is-on .tp-own-btn:hover, .tp-own.is-on .tp-own-btn:focus { background: #fde68a; color: #78350f; }
.tp-own.is-on .tp-own-btn .tp-own-i-add { display: none; }
.tp-own.is-on .tp-own-btn .tp-own-i-on { display: inline; }
.tp-own-qty { display: inline-flex; align-items: center; border: 1px solid #d1d5db; border-radius: 10px; overflow: hidden; background: #fff; }
.tp-own-qty[hidden] { display: none; }
.tp-own-qty button { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font: 700 20px var(--tp-fB); color: #111; }
.tp-own .tp-own-qty button:hover, .tp-own .tp-own-qty button:focus { background: #f3f4f6; color: #111; }
.tp-own-qty button:focus-visible { outline: 3px solid var(--tp-amber); outline-offset: -3px; }
.tp-own-n { min-width: 28px; text-align: center; font: 700 16px var(--tp-fB); color: #111; }
.tp-own-note { font-size: 13px; color: #6b7280; }
.tp-own-note a { color: var(--tp-amber-text) !important; font-weight: 700; text-decoration: underline; }
.tp-own.is-on .tp-own-note { display: none; }
.tp-own-fit { border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.tp-own-fit[hidden] { display: none; }
.tp-own-fit.is-yes { background: #ecfdf5; border: 1px solid #a7f3d0; color: #14532d; }
.tp-own-fit.is-none { background: #f9fafb; border: 1px solid #e5e7eb; color: #4b5563; }
.tp-own-fit.is-none a { color: var(--tp-amber-text) !important; font-weight: 700; }
.tp-own-fit-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tp-own-fit-h svg { background: #16a34a; color: #fff; border-radius: 99px; padding: 3px; width: 22px; height: 22px; box-sizing: border-box; }
.tp-own-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-own-chip { font-size: 12px; background: #fff; border: 1px solid #a7f3d0; padding: 3px 9px; border-radius: 99px; }

/* Toast shared by My Tools */
.tp-mt-toast {
    position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); z-index: 10050;
    display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
    background: #111; color: #fff; font: 600 14px var(--tp-fB); padding: 12px 16px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.tp-mt-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tp-mt-toast a, .tp-mt-toast button { all: unset; cursor: pointer; color: var(--tp-amber) !important; font-weight: 700; padding: 4px 0; }
.tp-mt-toast a:focus-visible, .tp-mt-toast button:focus-visible { outline: 2px solid var(--tp-amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tp-mt-toast { transition: none; } }
@media (max-width: 900px) { body:has(.tpx-bar) .tp-mt-toast, body:has(.tp-mt-bar) .tp-mt-toast { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ── "Fits my batteries" on tool listings (6 Oct 2026) ──────────────────
   The strip above the results and the line on each card, filled in by
   tp-mytools.js from the batteries in the visitor's My Tools. */
.tp-mtf{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 16px;padding:12px 14px;border-radius:12px;font:500 14.5px/1.45 'Inter',system-ui,sans-serif;background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;}
.tp-mtf[hidden]{display:none;}
.tp-mtf.is-none{background:#f9fafb;border-color:#e5e7eb;color:#374151;}
.tp-mtf.is-hint{background:#fff;border:1px dashed #d1d5db;color:#374151;}
.tp-mtf-i{flex:none;width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;}
.tp-mtf.is-none .tp-mtf-i,.tp-mtf.is-hint .tp-mtf-i{background:#e5e7eb;color:#374151;}
.tp-mtf-t{flex:1 1 240px;min-width:0;}
.tp-mtf-t b{font-weight:800;}
.tp-mtf-t a,.tp-mtf-a{color:inherit!important;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.tp-mtf-a{color:var(--tp-amber-text,#b45309)!important;min-height:44px;display:inline-flex;align-items:center;}
.tp-mtf .tp-mtf-sw{min-height:44px;font-size:14px;font-weight:700;color:#14532d;}
.tp-mtf .tp-mtf-sw input:checked + i{background:#16a34a;}
.tp-mtf .tp-mtf-sw input:focus-visible + i{box-shadow:0 0 0 3px rgba(22,163,74,.35);}
.tp-mtf .tp-mtf-x,.tp-mtf .tp-mtf-x:hover,.tp-mtf .tp-mtf-x:focus{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:#6b7280!important;background:transparent!important;margin-left:auto;}
.tp-mtf .tp-mtf-x:hover{background:#f3f4f6!important;color:#111!important;}
.tp-mtf .tp-mtf-x:focus-visible{outline:3px solid var(--tp-amber);outline-offset:1px;}
.tc-fit{display:inline-flex;align-items:center;gap:5px;font:700 12px/1.3 'Inter',system-ui,sans-serif;color:#15803d;}
@media (max-width:640px){
  .tp-mtf{padding:12px;gap:8px 12px;}
  /* Phones: the switch sits to the right of the text, its label underneath, so the strip stays one row. */
  .tp-mtf.is-yes{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;}
  .tp-mtf.is-yes .tp-mtf-sw{flex-direction:column;gap:4px;min-height:0;font-size:11.5px;line-height:1.2;text-align:center;max-width:76px;}
}

/* ═══════════════════════════════════════════════════════════
   WISH LIST BUTTONS (8 Oct 2026, tp-mytools.js)
   Heart on battery, kit and charger cards; a worded button on battery pages.
═══════════════════════════════════════════════════════════ */
.tp-wish { all: unset; box-sizing: border-box; cursor: pointer; color: #be185d; font-family: var(--tp-fB); }
.tp-wish svg { display: block; flex: none; }
.tp-wish.is-on svg path { fill: currentColor; }
.tp-wish:focus-visible { outline: 3px solid var(--tp-amber); outline-offset: 2px; }
.tpc-wish.tp-wish { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 99px; background: rgba(255,255,255,.95); border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; }
.tpc-wish.tp-wish:hover, .tpc-wish.tp-wish:focus { background: #fff; color: #be185d; border-color: #f9a8d4; }
.tpc-wish.tp-wish.is-on { background: #fdf2f8; border-color: #f9a8d4; }
.tp-wish-box.tp-wish { flex: 1 1 auto; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; color: #111827; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 12px; font-weight: 800; font-size: 15px; line-height: 1.2; }
.tp-wish-box.tp-wish svg { color: #be185d; }
.tp-wish-box.tp-wish small { font-size: 12px; font-weight: 500; color: #6b7280; }
.tp-wish-box.tp-wish:hover, .tp-wish-box.tp-wish:focus { background: #fff; color: #111827; border-color: var(--tp-amber); }
.tp-wish-box.tp-wish.is-on, .tp-wish-box.tp-wish.is-on:hover, .tp-wish-box.tp-wish.is-on:focus { background: #fdf2f8; color: #be185d; border-color: #f9a8d4; }