/* wp-content/themes/gtmotor/assets/css/mast.css
   ============================================================================
   GT Motorcycles — navigation header (redesign)
   Tokens live in base.css (--c-primary, --brand-*, --c-active-brand, spacing).
   This file styles: two-tier header, hover dropdown panels, Option-A phone
   pill, cart/account icons, mini-cart drawer, mobile off-canvas drawer, and
   the sticky/scrolled compact state.
   The sticky mechanism, fixed-fallback and brand-swap logo swap are PRESERVED
   (mast.js drives .is-scrolled / .is-fixed / the spacer and the logo swap).
   ========================================================================== */

:root {
  --mast-bg: 255,255,255;       /* r,g,b for the solid scrolled bar */

  /* Header-local design tokens (8px grid + a small type scale) */
  --hdr-radius: 12px;
  --hdr-radius-pill: 96px;
  --hdr-tint: #F5F4F6;                        /* neutral row/hover tint */
  --hdr-accent-tint: rgba(52,46,55,.06);      /* faint accent wash on GT default */
  --hdr-muted: #6B6670;
  --hdr-shadow-panel: 0 12px 32px rgba(20,16,24,.14), 0 2px 6px rgba(20,16,24,.08);
  --hdr-shadow-sticky: 0 6px 18px rgba(20,16,24,.09);
  --hdr-shadow-drawer: -16px 0 40px rgba(20,16,24,.20);
  --hdr-ease: cubic-bezier(.4,0,.2,1);
  --hdr-dur: 200ms;
}

/* Brand-context accent wash (matches the base.css body.brand-* accents) */
body.brand-ducati   { --hdr-accent-tint: rgba(203,21,23,.07); }
body.brand-honda    { --hdr-accent-tint: rgba(204,0,0,.07); }
body.brand-yamaha   { --hdr-accent-tint: rgba(0,20,137,.07); }
body.brand-kawasaki { --hdr-accent-tint: rgba(91,183,21,.09); }

/* === Mast shell + sticky mechanism (PRESERVED) ========================== */
.mast {
  position: relative;
  z-index: 10;
  overflow: visible;
}

.mast-top {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border);
}
.mast-top__row { padding: 16px 0; }

/* Sticky bar (wins over Bootstrap's relative navbar) */
.mast-nav,
.mast-nav.navbar {
  position: sticky;
  top: 0;
  z-index: 5000;
  background: #fff;
  border: 0;
  transition: background-color var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease);
}
.mast-nav .container { padding-top: 8px; padding-bottom: 8px; }

/* Transparent over a hero until scrolled */
.has-hero .mast,
.has-hero .mast-nav.navbar,
.has-explorer .mast,
.has-explorer .mast-nav.navbar { background: transparent; }

/* Solid on scroll + fixed fallback (compact, white, subtle shadow).
   Specificity here must beat `.has-hero .mast-nav.navbar` so the homepage
   header goes solid once scrolled. */
body.is-scrolled .mast-nav.navbar,
body.is-scrolled .mast-nav,
.mast-nav.navbar.is-fixed,
.mast-nav.is-fixed {
  background: rgba(var(--mast-bg), 1);
  box-shadow: var(--hdr-shadow-sticky);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
body.is-scrolled .mast-nav .container { padding-top: 4px; padding-bottom: 4px; }

/* WP admin bar offsets */
@media (min-width:783px) { body.admin-bar .mast-nav { top: 32px; } }
@media (max-width:782px) { body.admin-bar .mast-nav { top: 46px; } }

/* Avoid clipping that breaks sticky */
.mast > .mast-nav > .container { overflow: visible; }
.mast, .mast-nav { contain: none !important; }

/* Fixed fallback (when sticky is defeated by ancestor transforms) */
.mast-nav.is-fixed {
  position: fixed;
  top: var(--admin-offset, 0px);
  left: 0;
  right: 0;
  z-index: 5000;
}
.mast-nav-spacer { height: var(--nav-h, 56px); }

/* Global layout safety nets (PRESERVED) */
html, body { height: auto !important; }
#page, .site, .wp-site-blocks {
  display: block !important;
  min-height: auto !important;
  flex: none !important;
}
main, #primary, .site-main, .content-area,
.woocommerce-account .woocommerce { flex: none !important; }

/* === Top tier: logo · socials · phone =================================== */
.mast-top__right { gap: 24px; }

.socials { gap: 16px; }
.social {
  display: grid;
  place-items: center;
  color: var(--hdr-muted);
  transition: transform var(--hdr-dur) var(--hdr-ease), opacity var(--hdr-dur) var(--hdr-ease);
  opacity: .82;
}
.social:hover { transform: translateY(-1px); opacity: 1; }
.social img { width: 20px; height: 20px; }

/* Phone button — OPTION A: filled accent pill, white text/icon.
   Inherits the dynamic brand accent (GT dark default; brand colour on brand pages). */
.phone-btn {
  gap: 8px;
  font-family: "Figtree", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 9px 18px;
  border-radius: var(--hdr-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease), filter var(--hdr-dur) var(--hdr-ease);
}
.phone-btn--a {
  background: var(--c-active-brand, var(--c-primary));
  color: #fff;
  border: 1.5px solid var(--c-active-brand, var(--c-primary));
}
.phone-btn--a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(52,46,55,.22);
  filter: brightness(1.06);
  color: #fff;
}
.phone-btn svg { color: inherit; flex: none; }

/* === Main tier: nav links spread + right cluster ======================== */
.gtm-nav-wrap { flex: 1 1 auto; min-width: 0; }

.navbar-nav.gtm-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.gtm-nav .nav-item { position: relative; }

.gtm-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text);
  padding: 16px 12px;
  border-radius: 8px;
  position: relative;
  transition: color var(--hdr-dur) var(--hdr-ease);
}
.gtm-nav .nav-link .caret {
  width: 14px; height: 14px; opacity: .7;
  transition: transform var(--hdr-dur) var(--hdr-ease);
}
.gtm-nav .nav-link:hover,
.gtm-nav .nav-link:focus-visible { color: var(--c-active-brand, var(--c-primary)); }
.gtm-has-panel:hover .nav-link .caret,
.gtm-has-panel.is-open .nav-link .caret { transform: rotate(180deg); }

/* Underline indicator — space RESERVED so weight/underline never reflow the row */
.gtm-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 3px;
  background: var(--c-active-brand, var(--c-primary));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hdr-dur) var(--hdr-ease);
}
.gtm-nav .nav-link:hover::after,
.gtm-nav .nav-link:focus-visible::after { transform: scaleX(1); }

/* ACTIVE page — 900 weight + solid accent underline (no size change) */
.gtm-nav .nav-link.is-active { color: var(--c-primary); }
.gtm-nav .nav-link.is-active .nav-link__t { font-weight: 900; }
.gtm-nav .nav-link.is-active::after { transform: scaleX(1); }
/* Reserve the 900-weight width via a bold ghost stacked in the same grid cell.
   The label span and its ghost overlap (grid 1x1), so the cell is always sized
   to the boldest state, so switching 600<->900 never nudges the row horizontally
   and the pseudo-element underline never changes height. */
.gtm-nav .nav-link__t {
  display: inline-grid;
  grid-template: 1fr / 1fr;
}
.gtm-nav .nav-link__t > span { grid-area: 1 / 1; }
.gtm-nav .nav-link__t::before {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 900;
  visibility: hidden;
  pointer-events: none;
}

/* Right cluster: divider + icons pushed to the far right */
.gtm-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 32px;
  flex: none;
}
.gtm-nav-actions__divider {
  width: 1px; height: 28px;
  background: var(--c-border);
  margin-right: 4px;
}

/* Icon buttons (cart + account) ~23px, unified hit area */
.icon-btn,
.header-icon-link.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  color: var(--c-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease);
}
.icon-btn:hover,
.header-icon-link.icon-btn:hover { background: var(--hdr-tint); color: var(--c-active-brand, var(--c-primary)); }
.icon-btn svg { width: 23px; height: 23px; }

/* Cart badge (red — never the accent), hidden when count is 0 */
.header-icon-link.cart-contents { position: relative; }
.cart-count-bubble {
  position: absolute;
  top: 5px; right: 5px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E00003;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Account dropdown (Bootstrap) — styled to match the .gtm-panel language ===
   Popper is disabled on the toggle (data-bs-display="static"), so the menu is
   positioned with our own CSS: a white panel under the icon at the right edge,
   with the same shadow/radius/entrance-animation and row hovers as the nav
   mega-dropdowns. Scoped to .account-dropdown-wrapper so nothing leaks. */
.gtm-nav-actions .dropdown-toggle::after { display: none !important; }

.account-dropdown-wrapper { position: relative; }

/* Keep the trigger tinted while its menu is open (matches icon-btn:hover) */
.account-dropdown-wrapper .dropdown-toggle.show {
  background: var(--hdr-tint);
  color: var(--c-active-brand, var(--c-primary));
}

/* The panel */
.account-dropdown-wrapper .dropdown-menu {
  position: absolute;
  inset: auto 0 auto auto;          /* pin to the right edge under the icon */
  top: calc(100% + 8px);
  left: auto;
  z-index: 60;
  min-width: 232px;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--hdr-radius);
  box-shadow: var(--hdr-shadow-panel);
  /* entrance animation, gated on .show below */
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--hdr-dur) var(--hdr-ease),
              transform var(--hdr-dur) var(--hdr-ease),
              visibility var(--hdr-dur);
}
.account-dropdown-wrapper .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The menu is a <ul>; strip list markers regardless of Bootstrap reset */
.account-dropdown-wrapper .dropdown-menu,
.account-dropdown-wrapper .dropdown-menu li {
  list-style: none;
  margin: 0;
}
.account-dropdown-wrapper .dropdown-menu { padding-left: 8px; }

/* Subtle pointer connecting the panel to the icon */
.account-dropdown-wrapper .dropdown-menu::before,
.account-dropdown-wrapper .dropdown-menu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 14px;
  width: 0; height: 0;
  border: 7px solid transparent;
}
.account-dropdown-wrapper .dropdown-menu::before {
  border-bottom-color: var(--c-border);
}
.account-dropdown-wrapper .dropdown-menu::after {
  margin-bottom: -1px;
  border-bottom-color: #fff;
}

/* Eyebrow header inside the panel (mirrors .gtm-panel__eyebrow) */
.account-dropdown-wrapper .account-menu__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hdr-muted);
  padding: 8px 12px 6px;
}

/* Link rows (mirror .gtm-row) */
.account-dropdown-wrapper .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 9px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background var(--hdr-dur) var(--hdr-ease),
              color var(--hdr-dur) var(--hdr-ease);
}
.account-dropdown-wrapper .dropdown-item svg {
  width: 18px; height: 18px;
  flex: none;
  color: var(--hdr-muted);
  transition: color var(--hdr-dur) var(--hdr-ease);
}
.account-dropdown-wrapper .dropdown-item:hover,
.account-dropdown-wrapper .dropdown-item:focus,
.account-dropdown-wrapper .dropdown-item:focus-visible {
  background: var(--hdr-accent-tint);
  color: var(--c-active-brand, var(--c-primary));
}
.account-dropdown-wrapper .dropdown-item:hover svg,
.account-dropdown-wrapper .dropdown-item:focus svg,
.account-dropdown-wrapper .dropdown-item:focus-visible svg {
  color: var(--c-active-brand, var(--c-primary));
}
.account-dropdown-wrapper .dropdown-item:active {
  background: var(--hdr-accent-tint);
  color: var(--c-active-brand, var(--c-primary));
}

/* Sign-out row reads a touch quieter until hovered */
.account-dropdown-wrapper .dropdown-item--signout { color: var(--hdr-muted); }

/* Divider (mirror .gtm-panel__sep) */
.account-dropdown-wrapper .dropdown-divider {
  height: 1px;
  margin: 8px;
  padding: 0;
  border: 0;
  background: var(--c-border);
  opacity: 1;
}

/* === Brand swap (PRESERVED logo-swap contract) ========================== */
.brand-swap { display: flex; align-items: center; gap: .5rem; }
.brand-swap img { display: block; }

/* Desktop: icon only after scroll */
@media (min-width:992px) {
  .brand-swap .brand-full { display: none !important; }
  .brand-swap .brand-icon { display: none; }
  body.is-scrolled .brand-swap .brand-icon { display: block; }

  /* Collapse brand gutter until scroll so HOME aligns with the full logo above */
  body:not(.is-scrolled) .mast-nav .brand-swap {
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
  }
  body.is-scrolled .mast-nav .brand-swap {
    flex: 0 0 44px;
    width: 44px;
    margin-right: 16px;
  }

  /* Nav links SPREAD full-width across the bar; icons set off at the far right */
  .gtm-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
  }
}

/* Mobile/tablet (<992px): top tier is hidden, so the nav brand shows the
   FULL logo only, never the monogram (that is a desktop-scrolled-only device).
   Fixes the double-logo (full + monogram both showing) reported below 992px. */
@media (max-width: 991.98px) {
  .brand-swap .brand-icon { display: none !important; }
  .brand-swap .brand-full { display: block; max-width: 180px; height: auto; }
}

/* === Hover dropdown panels (desktop >=992px) ============================ */
.gtm-panel {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 60;
  min-width: 288px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--hdr-radius);
  box-shadow: var(--hdr-shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--hdr-dur) var(--hdr-ease), transform var(--hdr-dur) var(--hdr-ease), visibility var(--hdr-dur);
}
@media (max-width:991.98px) { .gtm-panel { display: none; } }

/* Open on hover OR when JS marks .is-open (keyboard). A bridge keeps the
   gap between link and panel hoverable so it doesn't flicker shut. */
.gtm-panel::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0; height: 8px;
}
@media (min-width:992px) {
  .gtm-has-panel:hover > .gtm-panel,
  .gtm-has-panel.is-open > .gtm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.gtm-panel__group { padding: 4px 0; }
.gtm-panel__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hdr-muted);
  padding: 8px 12px 4px;
}
.gtm-panel__sep { height: 1px; background: var(--c-border); margin: 8px; }

.gtm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 9px;
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease);
}
.gtm-row__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.gtm-row__label { font-size: 15px; font-weight: 600; letter-spacing: .01em; flex: 1; }
.gtm-row__chev {
  width: 16px; height: 16px;
  opacity: 0;
  transform: translateX(-4px);
  color: var(--c-active-brand, var(--c-primary));
  transition: opacity var(--hdr-dur) var(--hdr-ease), transform var(--hdr-dur) var(--hdr-ease);
}
.gtm-row:hover,
.gtm-row:focus-visible { background: var(--hdr-accent-tint); color: var(--c-active-brand, var(--c-primary)); }
.gtm-row:hover .gtm-row__chev,
.gtm-row:focus-visible .gtm-row__chev { opacity: 1; transform: translateX(0); }
.gtm-row--cta { color: var(--c-primary); }
.gtm-row--cta .gtm-row__label { font-weight: 700; }

/* --- Second-level brand->services flyout (nested dropdown) -------------- */
/* A brand row is a parent: the .gtm-row__link is the visible row; the
   .gtm-subpanel opens to its right on hover (or when JS adds .is-open). */
.gtm-row--parent { position: relative; padding: 0; display: block; }
.gtm-row__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 9px;
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease);
}
.gtm-row--parent:hover > .gtm-row__link,
.gtm-row--parent.is-open > .gtm-row__link,
.gtm-row__link:focus-visible { background: var(--hdr-accent-tint); color: var(--c-active-brand, var(--c-primary)); }
/* the parent chevron is always visible (it signals a flyout) and points right */
.gtm-row__chev--persist { opacity: .6; transform: none; }
.gtm-row--parent:hover > .gtm-row__link .gtm-row__chev--persist,
.gtm-row--parent.is-open > .gtm-row__link .gtm-row__chev--persist { opacity: 1; transform: translateX(2px); }

.gtm-subpanel {
  position: absolute;
  top: -9px;              /* align first sub-row with the parent row */
  left: 100%;
  z-index: 70;
  min-width: 240px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--hdr-radius);
  box-shadow: var(--hdr-shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity var(--hdr-dur) var(--hdr-ease), transform var(--hdr-dur) var(--hdr-ease), visibility var(--hdr-dur);
}
/* hover bridge so the diagonal move to the flyout doesn't drop the hover */
.gtm-subpanel::before {
  content: "";
  position: absolute;
  top: 0; left: -10px; width: 10px; height: 100%;
}
@media (min-width: 992px) {
  .gtm-row--parent:hover > .gtm-subpanel,
  .gtm-row--parent.is-open > .gtm-subpanel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@media (max-width: 991.98px) { .gtm-subpanel { display: none; } }

/* external-link indicator (Material "call_made") on external service rows */
.gtm-external-icon {
  font-size: 15px;
  line-height: 1;
  color: var(--hdr-muted);
  flex: none;
  transition: color var(--hdr-dur) var(--hdr-ease), transform var(--hdr-dur) var(--hdr-ease);
}
.gtm-row--external:hover .gtm-external-icon,
.gtm-row--external:focus-visible .gtm-external-icon { color: var(--c-active-brand, var(--c-primary)); transform: translate(1px,-1px); }

/* === Overlay + drawers (mini-cart + mobile menu share the overlay) ====== */
.gtm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(20,16,24,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hdr-dur) var(--hdr-ease), visibility var(--hdr-dur);
}
.gtm-overlay[hidden] { display: block; }   /* keep it in flow so the transition runs */
.gtm-overlay.is-open { opacity: 1; visibility: visible; }

.gtm-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 9600;
  height: 100%;
  width: min(420px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;                    /* keep closed drawer out of tab order + AT */
  transition: transform var(--hdr-dur) var(--hdr-ease), visibility var(--hdr-dur);
  box-shadow: var(--hdr-shadow-drawer);
  will-change: transform;
}
.gtm-drawer.is-open { transform: translateX(0); visibility: visible; }

.gtm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--c-border);
  flex: none;
}
.gtm-drawer__title { font-size: 18px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: var(--c-primary); }
.gtm-drawer__close {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--c-text);
  transition: background var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease);
}
.gtm-drawer__close:hover { background: var(--hdr-tint); color: var(--c-active-brand, var(--c-primary)); }

/* mini-cart inner regions */
.gtm-minicart__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gtm-minicart__count-live { display: none; }
.gtm-minicart__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.gtm-minicart__foot { flex: none; padding: 20px 24px 24px; border-top: 1px solid var(--c-border); background: #F7F6F8; }

/* cart line items */
.gtm-cart-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-border);
}
.gtm-cart-item__thumb {
  width: 72px; height: 72px;
  border-radius: 10px;
  flex: none;
  overflow: hidden;
  background: linear-gradient(135deg,#efedf1,#dcd9e0);
  display: block;
}
.gtm-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gtm-cart-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gtm-cart-item__name {
  font-size: 14px; font-weight: 700; color: var(--c-primary); line-height: 1.3;
  text-decoration: none;
}
.gtm-cart-item__name:hover { color: var(--c-active-brand, var(--c-primary)); }
.gtm-cart-item__meta { font-size: 13px; color: var(--hdr-muted); font-variant-numeric: tabular-nums; }
.gtm-cart-item__price { font-size: 14px; font-weight: 700; color: var(--c-text); margin-top: auto; font-variant-numeric: tabular-nums; }
.gtm-cart-item__remove {
  align-self: flex-start;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--hdr-muted);
  display: grid;
  place-items: center;
  flex: none;
  text-decoration: none;
  transition: background var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease);
}
.gtm-cart-item__remove:hover { background: #FBECEC; color: #E00003; }

.gtm-cart-subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 0 8px;
}
.gtm-cart-subtotal__label { font-size: 14px; font-weight: 600; color: var(--hdr-muted); letter-spacing: .02em; }
.gtm-cart-subtotal__value { font-size: 20px; font-weight: 900; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.gtm-cart-subtotal__value .amount { font-weight: 900; }
.gtm-cart-vat { font-size: 12px; color: var(--hdr-muted); font-weight: 400; margin: 0 0 16px; }

.gtm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease), border-color var(--hdr-dur) var(--hdr-ease), transform var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease);
}
.gtm-btn--fill {
  background: var(--c-active-brand, var(--c-primary));
  color: #fff;
  border-color: var(--c-active-brand, var(--c-primary));
}
.gtm-btn--fill:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(52,46,55,.24); filter: brightness(1.06); color: #fff; }
.gtm-btn.gtm-btn--outline { background: #fff; color: var(--c-active-brand, var(--c-primary)); border: 1.5px solid var(--c-active-brand, var(--c-primary)); }
.gtm-btn.gtm-btn--outline:hover { background: var(--c-active-brand, var(--c-primary)); color: #fff; border-color: var(--c-active-brand, var(--c-primary)); }
.gtm-btn--auto { width: auto; padding-left: 28px; padding-right: 28px; }
/* Auto buttons that are direct children of a centred section-inner (flex column, align stretch) must not stretch full-width */
.gtm-section-inner > .gtm-btn--auto { align-self: center; }
.gtm-btn + .gtm-btn { margin-top: 12px; }
.gtm-minicart__actions { display: flex; gap: 10px; margin-top: 4px; }
.gtm-minicart__actions .gtm-btn { flex: 1; min-width: 0; margin: 0; text-align: center; }
@media (max-width: 767.98px) {
  .gtm-minicart__actions { flex-direction: column; }
  .gtm-minicart__actions .gtm-btn { width: 100%; flex: none; }
}

/* empty cart state */
.gtm-cart-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 64px 24px;
}
.gtm-cart-empty__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--hdr-tint);
  display: grid; place-items: center;
  color: var(--hdr-muted);
}
.gtm-cart-empty__icon svg { width: 34px; height: 34px; }
.gtm-cart-empty__title { font-size: 18px; font-weight: 700; color: var(--c-primary); margin: 0; }
.gtm-cart-empty__text { font-size: 14px; color: var(--hdr-muted); max-width: 34ch; margin: 0; }

/* === Mobile: hamburger + off-canvas drawer + accordions ================= */
.gtm-mobile-actions { margin-left: auto; gap: 4px; }
.gtm-hamburger {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--c-primary);
}
.gtm-hamburger svg { width: 26px; height: 26px; }

.gtm-mobile-drawer { width: min(360px, 86vw); }
.gtm-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-primary);
  flex: none;
}
.gtm-mobile-drawer__logo img { width: 180px; height: auto; }
.gtm-mobile-drawer__close {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
}
.gtm-mobile-drawer__body { flex: 1; overflow-y: auto; padding: 8px 0; }

.gtm-mnav { list-style: none; margin: 0; padding: 0; }
.gtm-mnav__item { border-bottom: 1px solid var(--c-border); }
.gtm-mnav__link,
.gtm-mnav__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.gtm-mnav__link { justify-content: flex-start; }
.gtm-mnav__toggle { justify-content: space-between; }
.gtm-mnav__link.is-active,
.gtm-mnav__toggle.is-active { color: var(--c-active-brand, var(--c-primary)); }
.gtm-mnav__link.is-active {
  box-shadow: inset 4px 0 0 var(--c-active-brand, var(--c-primary));
}
.gtm-mnav__toggle .caret {
  width: 20px; height: 20px;
  color: var(--hdr-muted);
  transition: transform var(--hdr-dur) var(--hdr-ease);
}
.gtm-mnav__item.is-open .gtm-mnav__toggle .caret { transform: rotate(180deg); }
.gtm-mnav__item.is-open .gtm-mnav__toggle { color: var(--c-active-brand, var(--c-primary)); }

.gtm-msub {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--hdr-dur) var(--hdr-ease);
  background: var(--hdr-tint);
}
.gtm-mnav__item.is-open .gtm-msub { max-height: 360px; }
.gtm-msub a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px 8px 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
}
.gtm-msub a:hover { color: var(--c-active-brand, var(--c-primary)); }
.gtm-msub .gtm-row__dot { width: 9px; height: 9px; }

/* --- Mobile nested brand->services accordion --------------------------- */
.gtm-msub-brand { border-top: 1px solid var(--c-border); }
.gtm-msub-brand:first-child { border-top: 0; }
.gtm-msub-brand__row { display: flex; align-items: center; }
/* brand hub link takes the row; the toggle button sits at the end */
.gtm-msub-brand__row .gtm-msub-brand__link { flex: 1; }
.gtm-msub-brand__toggle {
  flex: none;
  width: 48px;
  min-height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--hdr-muted);
}
.gtm-msub-brand__toggle .caret { width: 20px; height: 20px; transition: transform var(--hdr-dur) var(--hdr-ease); }
.gtm-msub-brand.is-open .gtm-msub-brand__toggle { color: var(--c-active-brand, var(--c-primary)); }
.gtm-msub-brand.is-open .gtm-msub-brand__toggle .caret { transform: rotate(180deg); }

.gtm-msub2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--hdr-dur) var(--hdr-ease);
}
.gtm-msub-brand.is-open .gtm-msub2 { max-height: 320px; }
.gtm-msub2 a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 48px;   /* deeper indent than brand level */
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
}
.gtm-msub2 a:hover { color: var(--c-active-brand, var(--c-primary)); }
.gtm-msub2 .gtm-external-icon { font-size: 14px; margin-left: 2px; }

.gtm-mobile-drawer__foot {
  flex: none;
  border-top: 1px solid var(--c-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gtm-mphone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: var(--hdr-radius-pill);
  background: var(--c-active-brand, var(--c-primary));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.gtm-mphone svg { color: inherit; }
.gtm-mfoot-row { display: flex; align-items: center; justify-content: space-between; }
.gtm-msocials { display: flex; gap: 16px; }
.gtm-msocials .social img { width: 24px; height: 24px; }

/* Lock body scroll while a drawer is open (JS toggles the class) */
body.gtm-no-scroll { overflow: hidden; }

/* Accessible focus ring for header controls */
.gtm-nav .nav-link:focus-visible,
.gtm-row:focus-visible,
.icon-btn:focus-visible,
.phone-btn:focus-visible,
.gtm-drawer__close:focus-visible,
.gtm-hamburger:focus-visible,
.gtm-mnav__link:focus-visible,
.gtm-mnav__toggle:focus-visible,
.gtm-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,46,55,.18), 0 0 0 1px var(--c-active-brand, var(--c-primary));
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mast-nav, .gtm-panel, .gtm-drawer, .gtm-overlay, .gtm-msub,
  .gtm-nav .nav-link::after, .caret, .gtm-row__chev {
    transition-duration: .001ms !important;
  }
}