/* Brand fonts are self-hosted; source and license are bundled alongside them. */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("poppins-400.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("poppins-900.woff2") format("woff2");
}

/*
 * Metric-matched fallback for Poppins (font-display: swap): a local Arial/Helvetica (or the
 * metric-compatible Liberation Sans / Arimo) scaled to Poppins' average glyph width and given
 * Poppins' ascent, descent and line gap, so text wraps and sits the same before and after the
 * swap (no layout shift). size-adjust: Poppins/Arial average width per weight, measured
 * (400 ≈ 1.12, 600 ≈ 1.065, 700–900 ≈ 1.095); overrides: Poppins 1050/350/100 per 1000 em
 * divided by size-adjust.
 */
@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"), local("LiberationSans"), local("Arimo");
  size-adjust: 112.16%;
  ascent-override: 93.62%;
  descent-override: 31.21%;
  line-gap-override: 8.92%;
}

@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
  size-adjust: 106.5%;
  ascent-override: 98.59%;
  descent-override: 32.86%;
  line-gap-override: 9.39%;
}

@font-face {
  font-family: "Poppins Fallback";
  font-style: normal;
  font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
  size-adjust: 109.5%;
  ascent-override: 95.89%;
  descent-override: 31.96%;
  line-gap-override: 9.13%;
}

/* Bricks' theme style sets body and headings to "Poppins" without a fallback (the browser's
 * default serif until the swap); the same stack with the matched fallback. */
body,
h1, h2, h3, h4, h5, h6 {
  font-family: Poppins, "Poppins Fallback", Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------------
 * Design tokens (docs/style-guide.md). Brand colours (--dino-red, -ink, -white,
 * -surface, -muted, -line) are Bricks global variables; the rest live here.
 * Page CSS should use var(--dino-…) instead of repeating values.
 * Fluid sizes run linearly from 390px to 1440px viewports.
 * ------------------------------------------------------------------ */
:root {
  --dino-red-hover: #a30000;
  --dino-control-line: #737a80;
  --dino-focus: #005fcc;
  --dino-ink-hover: #2a2d2f; /* .dino-button--dark hover */
  --dino-muted-2: #9aa0a4; /* placeholder/monogram grey, decorative only */
  /* Type */
  --dino-h1: clamp(2.625rem, 2.1607rem + 1.9048vw, 3.875rem); /* 42 → 62px */
  --dino-h1-lh: 1.08;
  --dino-h1-page: clamp(2rem, 1.7214rem + 1.1429vw, 2.75rem); /* 32 → 44px, Woo page titles */
  --dino-h2: clamp(1.875rem, 1.6429rem + 0.9524vw, 2.5rem); /* 30 → 40px */
  --dino-h2-lh: 1.15;
  --dino-card-title: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem); /* 20 → 22px, H3 */
  --dino-card-title-weight: 600;
  --dino-card-title-lh: 1.25;
  --dino-stat: clamp(2.125rem, 1.8929rem + 0.9524vw, 2.75rem); /* 34 → 44px, big-stat numbers */
  --dino-heading-min: 1.125rem; /* 18px: no heading smaller */
  --dino-body: 1rem;
  --dino-body-lh: 1.65;
  --dino-small: 0.875rem; /* meta only, never body copy */
  --dino-label: 0.875rem;
  --dino-label-ls: 0.1em;
  /* Motion */
  --dino-speed: 0.2s;
  --dino-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, text-decoration-color 0.2s ease;
  /* Controls */
  --dino-radius: 4px;
  --dino-btn-fs: 1rem;
  --dino-btn-fw: 600;
  --dino-btn-lh: 1.25;
  --dino-btn-pad: 14px 24px;
  --dino-btn-min-h: 48px;
  --dino-input-min-h: 48px;
  --dino-input-border: 1px solid var(--dino-control-line);
  --dino-tap: 44px;
  /* Cards */
  --dino-card-radius: 8px;
  --dino-card-border: 1px solid var(--dino-line, #dadddd);
  --dino-card-shadow: 0 1px 2px rgb(8 9 9 / 6%);
  --dino-card-shadow-hover: 0 14px 30px rgb(8 9 9 / 12%);
  --dino-card-lift: translateY(-4px);
  --dino-card-speed: 0.25s;
  --dino-photo-shadow: 0 24px 48px rgb(8 9 9 / 18%); /* CTA panels, hero/section photos */
  /* Aliases already used by page CSS. */
  --dino-h1-size: var(--dino-h1);
  --dino-h2-size: var(--dino-h2);
  --dino-card-title-size: var(--dino-card-title);
}

/* Focus: blue ring with a light halo on light surfaces; dark bands swap both. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--dino-focus-ring, var(--dino-focus));
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--dino-focus-halo, var(--dino-white, #fff));
}
.dino-dark,
#brx-footer {
  --dino-focus-ring: var(--dino-white, #fff);
  --dino-focus-halo: var(--dino-ink, #080909);
}

/* Type scale. Element selectors outrank nothing but Bricks' own h1/h2 defaults. */
body {
  font-size: var(--dino-body);
  line-height: var(--dino-body-lh);
}
h1 { font-size: var(--dino-h1); font-weight: 900; line-height: var(--dino-h1-lh); }
h2 { font-size: var(--dino-h2); font-weight: 900; line-height: var(--dino-h2-lh); }
h3 { font-size: var(--dino-card-title); font-weight: var(--dino-card-title-weight); line-height: var(--dino-card-title-lh); }
:is(h4, h5, h6) { font-size: var(--dino-heading-min); line-height: 1.3; }
:where(.woocommerce-page, .dino-b2b-container) h1 { font-size: var(--dino-h1-page); }
/* Bricks global classes (same specificity, this file loads later). */
.dino-heading.brxe-heading { font-size: var(--dino-h2); line-height: var(--dino-h2-lh); }
h1.dino-heading.brxe-heading { font-size: var(--dino-h1); line-height: var(--dino-h1-lh); }
.dino-card-title.brxe-heading,
:where(#brx-content) .dino-card-title:not(:nth-child(0)) {
  font-size: var(--dino-card-title);
  font-weight: var(--dino-card-title-weight);
  line-height: var(--dino-card-title-lh);
}
.dino-copy.brxe-text-basic { font-size: var(--dino-body); line-height: var(--dino-body-lh); }
:where(.dino-label, .dino-eyebrow) {
  font-size: var(--dino-label);
  font-weight: 600;
  letter-spacing: var(--dino-label-ls);
  line-height: 1.45;
  text-transform: uppercase;
}
/* Eyebrow → heading → text: one rhythm on every section (eyebrow 1.2em + the 24px stack gap,
   then 24px to the text). Bricks' typography margins (p 0 0 1.2em, last p 0, and
   `p:last-of-type + h2` 1.2em on top) made it depend on DOM order: 17, 41 or 72px. Text
   columns that Bricks left at gap:normal get the container's 24px gap. */
#brx-content .dino-eyebrow:has(+ :is(h1, h2)) { margin-block: 0 1.2em; }
#brx-content .dino-eyebrow + :is(h1, h2) { margin-block-start: 0; }
#brx-content .brxe-block:has(> .dino-eyebrow + :is(h1, h2)) { row-gap: var(--dino-stack-gap, 24px); }

/* Auto-hyphenation only in long words, never in short ones ("go-karts", "Ansprechpart-ner"). */
:is(h1, h2, h3) { hyphenate-limit-chars: 10 4 4; }

/* Links in running text: underlined, red on hover. */
:where(#brx-content) :where(p, .brxe-text li, .brxe-post-content li, .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text, .b2bking_registration_form label) a:where(:not(.button, .dino-button, .bricks-button, .dino-card-link)),
:where(.woocommerce-terms-and-conditions-link, .woocommerce-privacy-policy-link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(#brx-content) :where(p, .brxe-text li, .brxe-post-content li, .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text, .b2bking_registration_form label) a:where(:not(.button, .dino-button, .bricks-button, .dino-card-link)):hover,
:where(.woocommerce-terms-and-conditions-link, .woocommerce-privacy-policy-link):hover {
  color: var(--dino-red, #c00);
  text-decoration-thickness: 2px;
}

/* One transition speed for interactive elements (cards keep their slower lift in ux.css). */
:where(a, button, summary, input, select, textarea) { transition: var(--dino-transition); }

/* Inputs. */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="image"], [type="file"], [type="color"]), select, textarea) {
  min-height: var(--dino-input-min-h);
  border: var(--dino-input-border);
  border-radius: var(--dino-radius);
  font-size: 1rem;
}
:where(.woocommerce, .woocommerce-page) :where(input, select, textarea, button) {
  font-family: Poppins, "Poppins Fallback", Arial, Helvetica, sans-serif;
}

.woocommerce form .form-row :is(input.input-text, textarea, select),
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce .quantity .qty,
.woocommerce :is(.coupon, .checkout_coupon) .input-text {
  min-height: var(--dino-input-min-h);
  border: var(--dino-input-border);
  border-radius: var(--dino-radius);
  background: var(--dino-white, #fff);
  color: var(--dino-ink, #080909);
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.5;
}

.woocommerce form .form-row .select2-container .select2-selection--single {
  padding: 8px 4px;
}

.woocommerce form .form-row .select2-selection--single .select2-selection__arrow {
  height: 46px;
}

/* Buttons: one system for Bricks (.dino-button), Woo and B2BKing buttons, the header
 * call CTA and shop CTAs. Variants: .dino-button--secondary (outlined), .dino-button--dark. */
.dino-button.brxe-button,
:where(#brx-content) .dino-button:not(:nth-child(0)),
.woocommerce :is(a.button, button.button, input.button),
:is(.button, .checkout-button, .single_add_to_cart_button, .woocommerce-form-login__submit, .wc-block-components-button, .dino-b2b-cta, .dino-engine-banner-cta),
#dino-header a.dino-call-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dino-btn-min-h);
  padding: var(--dino-btn-pad);
  border: 1px solid transparent;
  border-radius: var(--dino-radius);
  background-color: var(--dino-red, #c00);
  color: var(--dino-white, #fff);
  font-family: Poppins, "Poppins Fallback", Arial, Helvetica, sans-serif;
  font-size: var(--dino-btn-fs);
  font-weight: var(--dino-btn-fw);
  line-height: var(--dino-btn-lh);
  text-align: center;
  text-decoration: none;
  transition: var(--dino-transition);
}
.dino-button.brxe-button:hover,
.woocommerce :is(a.button, button.button, input.button):hover,
:is(.button, .checkout-button, .single_add_to_cart_button, .woocommerce-form-login__submit, .wc-block-components-button, .dino-b2b-cta, .dino-engine-banner-cta):hover,
#dino-header a.dino-call-cta:hover {
  background-color: var(--dino-red-hover);
  color: var(--dino-white, #fff);
}
.dino-button.dino-button--secondary { border-color: currentColor; background-color: transparent; color: var(--dino-ink, #080909); }
.dino-button.dino-button--secondary:hover { background-color: var(--dino-ink, #080909); color: var(--dino-white, #fff); }
.dino-dark .dino-button.dino-button--secondary { color: var(--dino-white, #fff); }
.dino-dark .dino-button.dino-button--secondary:hover { background-color: var(--dino-white, #fff); color: var(--dino-ink, #080909); }
.dino-button.dino-button--dark { background-color: var(--dino-ink, #080909); color: var(--dino-white, #fff); }
.dino-button.dino-button--dark:hover { background-color: var(--dino-ink-hover); color: var(--dino-white, #fff); }
.woocommerce :is(a.button, button.button, input.button):disabled,
.woocommerce :is(a.button, button.button, input.button).disabled { background-color: var(--dino-red, #c00); opacity: 0.5; }

/* Cards. ux.css adds the hover lift. */
:where(.dino-card, .dino-product-card, .dino-cat-tile, .dino-model-card) {
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
  box-shadow: var(--dino-card-shadow);
}

/* Tap targets ≥44px on touch layouts (padding/min-size, not font size). */
@media (max-width: 767px) {
  #brx-footer a.brxe-text-link,
  :where(.brxe-woocommerce-breadcrumbs, .woocommerce-breadcrumb, .brxe-breadcrumbs) a,
  :where(.dino-shop-sidebar) a.brxe-text-link,
  :where(.dino-shop-help) a,
  :where(.woocommerce-cart-form) .product-name a,
  :where(.woocommerce-LostPassword) a,
  .woocommerce-pagination .page-numbers:is(a, span),
  .brxe-pagination .page-numbers:is(a, span) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dino-tap);
    min-height: var(--dino-tap);
  }
  :where(.woocommerce-cart-form) .product-name a,
  :where(.woocommerce-LostPassword) a,
  :where(.dino-shop-help) a { justify-content: flex-start; }
  label.woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--dino-tap);
  }
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  min-width: var(--dino-tap);
  min-height: var(--dino-tap);
}

.woocommerce :is(.price, .amount) {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Compact header language disclosure and direct call action. */
#dino-header .dino-header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
#dino-header .dino-language-switcher { position: relative; }
#dino-header .dino-language-switcher summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--dino-control-line, #737a80);
  border-radius: var(--dino-radius);
  color: var(--dino-ink, #080909);
  background: white;
  font-size: var(--dino-btn-fs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: var(--dino-transition);
}
#dino-header .dino-language-switcher summary::-webkit-details-marker { display: none; }
#dino-header .dino-language-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
#dino-header .dino-language-switcher[open] .dino-language-chevron {
  transform: translateY(2px) rotate(225deg);
}
#dino-header .dino-language-switcher ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0; /* the switcher sits at the right of the header: open towards the page */
  z-index: 100;
  min-width: 160px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--dino-line, #dadddd);
  border-radius: 4px;
  background: white;
  box-shadow: 0 8px 24px rgb(8 9 9 / 12%);
  list-style: none;
}
#dino-header .dino-language-switcher a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 2px;
  color: var(--dino-ink, #080909);
  font-size: var(--dino-small);
  text-decoration: none;
}
#dino-header .dino-language-switcher a[aria-current="page"] {
  font-weight: 600;
  background: var(--dino-surface, #f3f4f4);
}
#dino-header .dino-language-switcher :is(summary, a):hover {
  background: var(--dino-surface, #f3f4f4);
}
#dino-header a.dino-call-cta { white-space: nowrap; } /* metrics: button system above */

/* ------------------------------------------------------------------
 * Header layout: sticky (Bricks template setting "Sticky on scroll"),
 * compact once the page scrolls, native Bricks Nav (nested) dropdowns and
 * mobile off-canvas menu. Breakpoints follow Bricks: 991 / 767 / 478px.
 * ------------------------------------------------------------------ */
#brx-header.brx-sticky { background: var(--dino-white, #fff); }
#dino-header {
  position: relative;
  transition: box-shadow 0.2s ease; /* no padding/width transitions: they would animate on every viewport resize */
}
#brx-header.brx-sticky.scrolling #dino-header {
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 6px 20px rgb(8 9 9 / 10%);
}
#brx-header.brx-sticky.scrolling #dino-logo { width: 132px; }
#dino-header-inner { gap: 16px; }
#dino-account { flex-shrink: 0; margin-inline-start: auto; }
#dino-account > * { flex-shrink: 0; }
#dino-nav .brx-nav-nested-items > li > a,
#dino-nav .brx-submenu-toggle > a { white-space: nowrap; }
@media (min-width: 1200px) {
  #dino-nav .brx-nav-nested-items { flex-wrap: nowrap; }
  #dino-header #dino-nav.brxe-nav-nested > #dino-menu-toggle { display: none; }
}
#dino-account > .brxe-shortcode,
#dino-account > .brxe-wpml-language-switcher { display: flex; width: auto; }

/* Top-level links and dropdown labels: red underline grows on hover, focus and current page. */
#dino-nav .brx-nav-nested-items { gap: 4px 20px; }
#dino-nav .brx-nav-nested-items > li > a,
#dino-nav .brx-submenu-toggle > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 4px;
  color: var(--dino-ink, #080909);
  text-decoration: none;
  transition: color 0.2s ease;
}
#dino-nav .brx-nav-nested-items > li > a::after,
#dino-nav .brx-submenu-toggle > a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  height: 2px;
  background: var(--dino-red, #c00);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
#dino-nav .brx-nav-nested-items > li > a:is(:hover, :focus-visible, [aria-current="page"])::after,
#dino-nav .brx-submenu-toggle:is(:hover, .aria-current) > a::after,
#dino-nav .brx-submenu-toggle > a:focus-visible::after,
#dino-nav .brxe-dropdown.open > .brx-submenu-toggle > a::after { transform: scaleX(1); }
#dino-nav .brx-nav-nested-items > li > a:hover,
#dino-nav .brx-submenu-toggle > a:hover { color: var(--dino-red, #c00); }
#dino-nav .brx-submenu-toggle { gap: 0; }
#dino-nav .brx-submenu-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 48px;
  padding: 0 4px;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
#dino-nav .brx-submenu-toggle button svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
#dino-nav .brxe-dropdown.open > .brx-submenu-toggle button svg { transform: rotate(180deg); }

/* Desktop dropdown panels (Bricks opens them on hover, focus and button click). */
#dino-nav .brx-dropdown-content {
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--dino-line, #dadddd);
  border-top: 3px solid var(--dino-red, #c00);
  border-radius: 0 0 4px 4px;
  background: var(--dino-white, #fff);
  box-shadow: 0 12px 28px rgb(8 9 9 / 12%);
  font-size: 15px;
  font-weight: 600;
}
#dino-nav .brx-dropdown-content a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 2px;
  color: var(--dino-ink, #080909);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, padding 0.2s ease;
}
#dino-nav .brx-dropdown-content a:is(:hover, :focus-visible) {
  background: var(--dino-surface, #f3f4f4);
  color: var(--dino-red, #c00);
  padding-inline-start: 18px;
}
#dino-nav .brx-dropdown-content a[aria-current="page"] { color: var(--dino-red, #c00); }

/* Header search: a disclosure whose panel spans the header width. */
#dino-header .dino-header-search { position: static; }
#dino-header .dino-header-search > summary,
#dino-header a.dino-cart-link,
#dino-nav.brxe-nav-nested > #dino-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--dino-line, #dadddd);
  border-radius: var(--dino-radius);
  background: var(--dino-white, #fff);
  color: var(--dino-ink, #080909);
  font-size: var(--dino-btn-fs);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: var(--dino-transition);
}
#dino-header .dino-header-search > summary::-webkit-details-marker { display: none; }
#dino-header .dino-header-search > summary:hover,
#dino-header .dino-header-search[open] > summary,
#dino-header a.dino-cart-link:hover,
#dino-menu-toggle:hover {
  border-color: var(--dino-ink, #080909);
  background: var(--dino-surface, #f3f4f4);
}
#dino-header .dino-header-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 16px 40px;
  border-top: 1px solid var(--dino-line, #dadddd);
  border-bottom: 3px solid var(--dino-red, #c00);
  background: var(--dino-white, #fff);
  box-shadow: 0 12px 24px rgb(8 9 9 / 10%);
}
#dino-header .dino-header-search[open] .dino-header-search-panel { animation: dino-drop-in 0.2s ease; }
#dino-header .dino-header-search form {
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}
#dino-header .dino-header-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--dino-control-line, #737a80);
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
}
#dino-header .dino-header-search button[type="submit"] {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--dino-red, #c00);
  color: var(--dino-white, #fff);
  font: inherit;
  font-size: var(--dino-btn-fs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--dino-transition);
}
#dino-header .dino-header-search button[type="submit"]:hover { background: var(--dino-red-hover, #a30000); }

/* Cart link with item-count badge (hidden while the cart is empty). */
#dino-header a.dino-cart-link { position: relative; }
#dino-header .dino-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--dino-white, #fff);
  border-radius: 10px;
  background: var(--dino-red, #c00);
  color: var(--dino-white, #fff);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#dino-header a.dino-cart-link[data-count="0"] .dino-cart-count { display: none; }
#dino-header a.dino-cart-link.dino-cart-bump .dino-cart-count { animation: dino-bump 0.4s ease; }
#dino-header .dino-account-link { white-space: nowrap; }
/* Search and cart are icon buttons; their names come from aria-label. */
#dino-header :is(.dino-cart-text, .dino-header-search-text) { display: none; }
#dino-header .dino-header-search > summary,
#dino-header a.dino-cart-link { padding: 0; }

@keyframes dino-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes dino-bump {
  50% { transform: scale(1.35); }
}
@keyframes dino-slide-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

/* Mobile-menu-only entries (account, call) show in the off-canvas below 768px. */
@media (min-width: 768px) {
  #dino-nav li:has(> .dino-nav-mobile-only),
  #dino-nav .dino-nav-mobile-only { display: none; }
}

/* Below 1200px (nav-nested custom breakpoint): burger + off-canvas panel from the right. */
@media (max-width: 1199px) {
  #dino-nav { order: 3; }
  #dino-header-inner { gap: 8px; }
  #dino-menu-toggle { color: var(--dino-ink, #080909); }
  /* Bricks bars are 40px wide by default; fit them inside the 48px button. */
  #dino-header #dino-menu-toggle .brxa-wrap,
  #dino-header .brx-toggle-div .brxa-wrap { width: 24px; height: 18px; }
  #dino-header #dino-menu-toggle :is(.brxa-inner, .brxa-inner::before, .brxa-inner::after),
  #dino-header .brx-toggle-div :is(.brxa-inner, .brxa-inner::before, .brxa-inner::after) { width: 24px; height: 2px; }
  #dino-header #dino-menu-toggle .brxa-inner::before { top: -7px; }
  #dino-header #dino-menu-toggle .brxa-inner::after { bottom: -7px; }
  #dino-nav.brx-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(8 9 9 / 45%);
  }
  #dino-nav.brx-open .brx-nav-nested-items {
    left: auto;
    width: min(380px, 88vw);
    justify-content: flex-start;
    padding: 72px 24px 32px;
    box-shadow: -12px 0 32px rgb(8 9 9 / 20%);
    animation: dino-slide-in 0.25s ease;
    font-size: 17px;
  }
  #dino-nav.brx-open .brx-nav-nested-items > li { border-bottom: 1px solid var(--dino-line, #dadddd); }
  #dino-nav.brx-open .brx-nav-nested-items > li:has(> .brx-toggle-div) { border: 0; }
  #dino-nav.brx-open .brx-nav-nested-items > li > a,
  #dino-nav.brx-open .brx-submenu-toggle > a { min-height: 52px; flex: 1 1 auto; }
  #dino-nav.brx-open .brx-submenu-toggle button { min-width: 52px; min-height: 52px; }
  #dino-nav.brx-open .brx-submenu-toggle button svg { width: 14px; height: 14px; }
  #dino-nav.brx-open .brx-dropdown-content {
    padding: 0 0 8px 12px;
    border: 0;
    box-shadow: none;
    font-size: 16px;
  }
  #dino-nav.brx-open .brx-toggle-div {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    color: var(--dino-ink, #080909);
  }
  #dino-nav.brx-open a.dino-nav-call { color: var(--dino-red, #c00); }
  #dino-header .dino-header-search-panel { padding: 12px 24px; }
}

@media (max-width: 767px) {
  #dino-header a.dino-call-cta,
  #dino-header .dino-account-link { display: none; }
  #dino-header #dino-menu-toggle { padding: 0; }
  #dino-header .dino-language-switcher summary { min-width: 56px; padding: 0 16px; gap: 6px; }
  #dino-header .dino-header-search-panel { padding: 12px 16px; }
  #brx-header.brx-sticky.scrolling #dino-logo { width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  #dino-nav.brx-open .brx-nav-nested-items,
  #dino-header .dino-header-search[open] .dino-header-search-panel,
  #dino-header a.dino-cart-link.dino-cart-bump .dino-cart-count { animation: none; }
}

/* Visually hidden labels (same contract as WordPress core's class). */
:where(#dino-header, .dino-usps, .dino-cat-tiles) .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  word-wrap: normal !important;
}

/* Narrow phones (≤478px): five header controls must fit 328px. */
@media (max-width: 478px) {
  #dino-header #dino-logo { width: 100px; }
  #brx-header.brx-sticky.scrolling #dino-header #dino-logo { width: 92px; }
  #dino-header #dino-header-inner,
  #dino-header #dino-account { gap: 6px; }
  #dino-header #dino-menu-toggle { box-sizing: border-box; width: 48px; min-width: 48px; }
}

/* Header/footer meta text: never below the small-text token. */
#dino-header #dino-account,
#brx-footer #dino-footer-small { font-size: var(--dino-small); }
@media (max-width: 379px) {
  #dino-header .dino-language-switcher summary { padding: 0 10px; }
}