/**
 * GommeGo premium theme layer.
 *
 * Performance rules:
 * - Inter is inherited from Hummingbird and already served locally.
 * - No external font, icon or CSS request.
 * - Decorative graphics use CSS or inline SVG.
 * - Below-the-fold home sections use content-visibility where supported.
 */

:root,
[data-bs-theme="light"] {
  --gg-blue: #024884;
  --gg-blue-dark: #013a6b;
  --gg-blue-deep: #012e55;
  --gg-blue-surface: #052b49;
  /* Versione A 23/09/2026: la luce azzurra che sfuma da un angolo, uguale su tutte le superfici
     blu piene (header, footer, misura del fianco, alternative, avvisi). Si usa sempre sopra
     il colore pieno: `background: var(--gg-blue-glow), var(--gg-blue-surface)`. I controlli
     piccoli (bottoni, caselle, focus) restano a tinta piatta. */
  --gg-blue-glow: radial-gradient(ellipse 70% 120% at 0% 0%, rgb(46 124 196 / 38%), rgb(46 124 196 / 0%) 70%);
  --gg-orange: #ff8500;
  /* 03/09/2026 — alzato da #e67700 ad #a85400: su bianco e sulle superfici chiare
     (#f4f7fa, #eef3f7) il kicker e le label arancioni stavano a 2,6-3,0:1 di contrasto
     (audit Lighthouse color-contrast); #a85400 sta a 4,6-4,95:1. Sulle superfici scure
     il kicker usa gia' la variante dedicata .gg-kicker--light (#ffd6a8). */
  --gg-orange-dark: #a85400;
  --gg-orange-ink: #b85c00;
  --gg-cyan: #2fb5d2;
  --gg-ink: #10253a;
  --gg-muted: #607286;
  --gg-soft: #f4f8fb;
  --gg-border: #dbe5ee;
  --gg-radius-sm: 10px;
  --gg-radius: 16px;
  --gg-radius-lg: 24px;
  --gg-shadow-sm: 0 10px 30px rgb(1 46 85 / 8%);
  --gg-shadow: 0 22px 60px rgb(1 46 85 / 12%);
  --gg-type-body: 1rem;
  --gg-type-control: .875rem;
  --gg-type-meta: .8125rem;
  --gg-type-label: .75rem;
  --gg-type-heading-weight: 600;
  --gg-type-strong-weight: 700;
  --gg-type-tracking-tight: -.02em;
  --gg-type-tracking-label: .08em;

  --bs-primary: #024884;
  --bs-primary-rgb: 2, 72, 132;
  --bs-primary-text-emphasis: #013a6b;
  --bs-primary-bg-subtle: #e7f0f7;
  --bs-primary-border-subtle: #aac3d8;
  --bs-secondary: #ff8500;
  --bs-secondary-rgb: 255, 133, 0;
  --bs-secondary-text-emphasis: #633300;
  --bs-secondary-bg-subtle: #fff0df;
  --bs-secondary-border-subtle: #ffc98e;
  --bs-info: #2fb5d2;
  --bs-info-rgb: 47, 181, 210;
  --bs-link-color: #024884;
  --bs-link-color-rgb: 2, 72, 132;
  --bs-link-hover-color: #013a6b;
  --bs-link-hover-color-rgb: 1, 58, 107;
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-body-color: #10253a;
  --bs-body-bg: #fff;
  --bs-border-radius: .625rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-color: #dbe5ee;
}

/* Smooth solo per chi non riduce il motion: rispetta prefers-reduced-motion e
   mantiene affidabile lo scrollIntoView degli strumenti di automazione. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Shell catalogo: la sidebar resta su tutti i listati, ma usa lo spazio per filtri e
   navigazione; i risultati del finder usano tre colonne, più larghe, perché marca e
   modello devono restare leggibili. */
.layout-left-column .products,
.gg-listing-with-sidebar .products,
.ggo-results .products {
  grid-template-columns: minmax(0, 1fr);
}

.gg-catalog-navigation__brand {
  display: grid;
  gap: .2rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gg-border);
}

.gg-catalog-navigation__brand span {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gg-muted);
}

.gg-catalog-navigation__brand strong {
  font-size: 1.12rem;
  color: var(--gg-blue-deep);
}

.gg-catalog-navigation__brand a {
  width: fit-content;
  min-height: 36px;
  padding-top: .45rem;
  font-weight: 650;
  color: var(--gg-blue);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.gg-catalog-navigation__title {
  margin-bottom: .55rem;
}

.gg-catalog-navigation__title-link {
  font-size: 1rem;
  font-weight: 750;
  color: var(--gg-blue-deep);
  text-decoration: none;
}

.gg-catalog-navigation__list {
  display: grid;
  gap: .15rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gg-catalog-navigation__list .gg-catalog-navigation__list {
  padding-left: .75rem;
  margin-top: .15rem;
  border-left: 1px solid var(--gg-border);
}

.gg-catalog-navigation__link {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: .35rem .5rem;
  color: var(--gg-ink);
  text-decoration: none;
  border-radius: var(--gg-radius-sm);
}

.gg-catalog-navigation__link:hover,
.gg-catalog-navigation__link:focus-visible {
  color: var(--gg-blue-deep);
  background: var(--gg-soft);
}

.gg-catalog-navigation__toggle {
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  margin-bottom: 1rem;
}

#search-filters details.facet > summary {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

#search-filters details.facet > summary::-webkit-details-marker {
  display: none;
}

#search-filters details.facet > summary::after {
  content: "+";
  color: var(--gg-blue);
}

#search-filters details.facet[open] > summary::after {
  content: "−";
}

#left-column .custom-checkbox input[type="checkbox"] {
  accent-color: var(--gg-blue);
}

@media (min-width: 768px) {
  .layout-left-column .products,
  .gg-listing-with-sidebar .products,
  .ggo-results .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.layout-left-column:is(#category, #manufacturer, #supplier, #best-sales, #new-products, #prices-drop, #search) .columns-container > .row,
  body#search .gg-listing-with-sidebar > .row {
    align-items: flex-start;
  }

  body.layout-left-column:is(#category, #manufacturer, #supplier, #best-sales, #new-products, #prices-drop, #search) #left-column,
  body#search .gg-listing-with-sidebar #left-column {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex: 0 0 16.5rem;
    flex-direction: column;
    gap: 1rem;
    align-self: flex-start;
    width: 16.5rem;
    max-height: calc(100vh - 7rem);
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-radius: var(--gg-radius);
    box-shadow: var(--gg-shadow-sm);
  }

  body.layout-left-column:is(#category, #manufacturer, #supplier, #best-sales, #new-products, #prices-drop, #search) #center-column,
  body#search .gg-listing-with-sidebar #center-column {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  #left-column .ps-facetedsearch {
    order: 1;
    margin: 0;
  }

  #left-column .gg-catalog-navigation {
    order: 2;
    margin: 0;
  }
}

@media (min-width: 992px) {
  .layout-left-column .products,
  .gg-listing-with-sidebar .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .ggo-results .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 1.15rem;
  }

  .layout-left-column #js-product-list-top .products__selection,
  .gg-listing-with-sidebar #js-product-list-top .products__selection {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    min-height: 44px;
    margin-bottom: 1rem;
  }

  .layout-left-column #js-product-list-top .products__sort,
  .gg-listing-with-sidebar #js-product-list-top .products__sort {
    flex-wrap: nowrap;
    order: initial;
  }

  .layout-left-column #js-product-list-top .products__sort-dropdown:not(.ggo-per-page),
  .gg-listing-with-sidebar #js-product-list-top .products__sort-dropdown:not(.ggo-per-page) {
    min-width: 11rem;
  }

  .ggo-results #js-product-list-top .products__selection {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1rem;
  }

  .ggo-results #js-product-list-top .products__sort {
    flex-wrap: nowrap;
    justify-content: flex-end;
    order: initial;
  }

  .ggo-results #js-product-list-top .products__sort-dropdown:not(.ggo-per-page) {
    flex: 1 1 11rem;
    min-width: 0;
  }
}

body {
  color: var(--gg-ink);
  font-size: var(--gg-type-body);
  font-family: var(--bs-body-font-family);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--bs-body-font-family);
  font-weight: var(--gg-type-heading-weight);
  letter-spacing: var(--gg-type-tracking-tight);
  text-wrap: balance;
}

a {
  text-underline-offset: .18em;
}

::selection {
  color: #fff;
  background: var(--gg-blue);
}

.btn {
  min-height: 42px;
  font-size: var(--gg-type-control);
  font-weight: 600;
  border-radius: 10px;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #024884;
  --bs-btn-border-color: #024884;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #013a6b;
  --bs-btn-hover-border-color: #013a6b;
  --bs-btn-active-bg: #012e55;
  --bs-btn-active-border-color: #012e55;
  --bs-btn-disabled-bg: #024884;
  --bs-btn-disabled-border-color: #024884;
  box-shadow: 0 8px 20px rgb(2 72 132 / 16%);
}

.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-secondary,
.btn-accent {
  --bs-btn-color: #012e55;
  --bs-btn-bg: #ff8500;
  --bs-btn-border-color: #ff8500;
  --bs-btn-hover-color: #012e55;
  --bs-btn-hover-bg: #ff9828;
  --bs-btn-hover-border-color: #ff9828;
  --bs-btn-active-color: #012e55;
  --bs-btn-active-bg: #e67700;
  --bs-btn-active-border-color: #e67700;
  --bs-btn-disabled-color: #012e55;
  --bs-btn-disabled-bg: #ff8500;
  --bs-btn-disabled-border-color: #ff8500;
}

.btn-outline-primary {
  --bs-btn-color: #024884;
  --bs-btn-border-color: #aac3d8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #024884;
  --bs-btn-hover-border-color: #024884;
  --bs-btn-active-bg: #013a6b;
  --bs-btn-active-border-color: #013a6b;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--gg-blue);
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--gg-blue);
}

.form-check-input:checked {
  background-color: var(--gg-blue);
  border-color: var(--gg-blue);
}

.product-price,
.price {
  color: var(--gg-blue);
}

/* Header */
.header {
  box-shadow: 0 10px 28px rgb(1 46 85 / 8%);
}

/* In home displayNavFullWidth contains the whole finder. The theme's generic
 * sticky header must not pin that full section to the viewport. */
body#index #header.js-sticky-header {
  position: relative;
  top: auto;
}

/* In home l'header contiene il finder: la sua ombra cadeva sotto la scheda, a tutta larghezza, e
 * disegnava una fascia grigia fra il blu e il bianco. L'ombra della scheda basta. */
body#index #header {
  box-shadow: none;
}

/* Header — versione A 23/09/2026: barra utility nello stesso blu della hero, azioni sobrie
 * (l'arancio resta al contatore del carrello e al segnale del menu), logo contenuto nella riga
 * principale invece che sospeso sopra la hero. */
.gg-header-top {
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--gg-blue-glow), var(--gg-blue-surface);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 10%);
}

.gg-header-top__row {
  min-height: 38px;
  gap: 1.25rem;
  font-size: .73rem;
  letter-spacing: .008em;
}

.gg-header-top__contact,
.gg-header-top__account,
.gg-header-top__account > div,
.gg-header-top .ps-customersignin,
.gg-header-top .ps-shoppingcart {
  display: flex;
  align-items: center;
}

.gg-header-top__contact {
  gap: .25rem;
}

.gg-header-top__account {
  gap: .35rem;
}

.gg-header-top a {
  color: #fff;
  text-decoration: none;
}

.gg-header-top a:hover,
.gg-header-top a:focus-visible {
  color: #fff;
}

.gg-header-top .ps-contactinfo__email,
.gg-header-top .header-block__action-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .65rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.gg-header-top .ps-contactinfo__email {
  padding-left: 0;
  border-right: 1px solid rgb(255 255 255 / 26%);
}

.gg-header-top .header-block__action-btn {
  gap: .4rem;
  color: #fff !important;
  background: transparent;
  border-radius: 7px;
  transition: background-color .18s ease;
}

.gg-header-top .header-block__action-btn:hover,
.gg-header-top .header-block__action-btn:focus-visible {
  color: #fff !important;
  background: rgb(255 255 255 / 12%);
}

.gg-header-top .header-block__action-btn .material-icons,
.gg-header-top .header-block__icon {
  font-size: 1.05rem;
  color: rgb(255 255 255 / 85%);
}

.gg-header-top .header-block__badge {
  display: inline-grid;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border-radius: 999px;
  place-items: center;
}

.gg-header-top__facebook {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  min-height: 32px;
  padding: .35rem .65rem;
  color: #fff !important;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 7px;
  transition: background-color .18s ease;
}

.gg-header-top__facebook::before {
  display: grid;
  width: 17px;
  height: 17px;
  color: var(--gg-blue-deep);
  font-size: .82rem;
  font-weight: 800;
  content: "f";
  background: #fff;
  border-radius: 50%;
  place-items: center;
}

.gg-header-top__facebook:hover,
.gg-header-top__facebook:focus-visible {
  color: #fff !important;
  background: rgb(255 255 255 / 14%);
}

.header-bottom {
  position: relative;
  z-index: 2;
  padding: .35rem 0;
  overflow: visible;
  background: #fff;
  border-bottom: 1px solid var(--gg-border);
}

/* In home la hero blu segue subito: il bordo sarebbe una riga in piu' fra bianco e blu.
 * Livello sopra il configuratore (z-index 5, in primo piano sulla pagina): altrimenti il
 * sottomenu «Pneumatici» si apre sotto la hero e sembra non arrivare mai. */
body#index .header-bottom {
  z-index: 6;
  border-bottom: 0;
}

.header-bottom__row {
  min-height: 56px;
}

.header-bottom__brand {
  display: flex;
  align-items: center;
}

.header-bottom .navbar-brand {
  padding: 0;
}

.header-bottom .navbar-brand .logo,
.header-bottom .logo {
  width: auto;
  max-width: 155px;
  max-height: 44px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.header-bottom .menu-top a,
.header-bottom .top-menu a,
.header-bottom nav a,
.header-bottom .menu a,
.header-bottom .nav-link,
.header-bottom .header-block__action-btn {
  color: var(--gg-ink);
}

.header-bottom .menu-top a:hover,
.header-bottom nav a:hover,
.header-bottom .menu a:hover,
.header-bottom .nav-link:hover,
.header-bottom .header-block__action-btn:hover {
  color: var(--gg-blue);
}

/* Menu dell'header in Barlow 600 (scelta di Tiziano, 23/09/2026): il tono tecnico delle scritte
 * automobilistiche, self-hosted. Solo latin, un solo peso. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.header-bottom .ps-mainmenu__tree-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .55rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  color: var(--gg-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}

.header-bottom .ps-mainmenu__tree-link::after {
  position: absolute;
  right: .55rem;
  bottom: .25rem;
  left: .55rem;
  height: 3px;
  content: "";
  background: var(--gg-orange);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;
  transition: opacity .16s ease, transform .16s ease;
}

.header-bottom .ps-mainmenu__tree-link:hover,
.header-bottom .ps-mainmenu__tree-link:focus-visible {
  color: var(--gg-blue);
}

.header-bottom .ps-mainmenu__tree-link:hover::after,
.header-bottom .ps-mainmenu__tree-link:focus-visible::after,
.header-bottom .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link::after,
.header-bottom .ps-mainmenu__tree-link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-bottom .ps-mainmenu__tree-link:focus-visible {
  outline: 3px solid rgb(2 72 132 / 24%);
  outline-offset: 2px;
  border-radius: 6px;
}

.header-bottom .ps-mainmenu__tree-dropdown-toggle {
  min-width: 36px;
  min-height: 44px;
  padding: .45rem .2rem .45rem 0;
  color: var(--gg-ink);
}

.header-bottom .nav-link {
  font-size: var(--gg-type-control);
  font-weight: 600;
}

.header-bottom .nav-link.active,
.header-bottom .nav-link:active,
.header-bottom .nav-link:active:hover {
  color: var(--gg-blue);
}

.header-bottom .expand-more,
.header-bottom .material-icons {
  color: currentcolor;
}

.header-bottom .header-block {
  border-radius: 10px;
}

.header-bottom .header-block__action-btn {
  border-radius: 10px;
}

.header-bottom .header-block__action-btn:hover {
  background: var(--gg-soft);
}

.header-bottom .header-block__badge {
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
}

.header-bottom .ps-searchbar__input {
  min-height: 42px;
  background: #f6f9fb;
  border-color: #e2e9ef;
  border-radius: 12px;
}

.header-bottom .ps-searchbar__input:focus {
  background: #fff;
}

.gg-search {
  margin-block: .3rem;
}

.gg-search__field {
  position: relative;
  display: block;
}

.gg-search__field svg {
  position: absolute;
  top: 50%;
  left: .85rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--gg-ink);
  pointer-events: none;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 2;
  transform: translateY(-50%);
}

.gg-search__field input {
  width: min(28rem, 34vw);
  min-height: 42px;
  padding: .55rem 1rem .55rem 2.7rem;
  color: var(--gg-ink);
  background: #f3f7fa;
  border: 1px solid #d3dfe8;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.gg-search__field input:focus {
  background: #fff;
  border-color: var(--gg-blue);
  outline: 0;
  box-shadow: 0 0 0 .25rem rgb(2 72 132 / 12%);
}

/* Suggerimenti di ricerca testuale (change add-search-suggestions) */

[data-gg-search] {
  position: relative;
}

.gg-suggest {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  left: 0;
  z-index: 1070;
  max-height: min(60vh, 26rem);
  margin: 0;
  padding: .3rem;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--gg-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgb(1 46 85 / 18%);
}

.gg-suggest[hidden] {
  display: none;
}

.gg-suggest__link {
  display: flex;
  gap: .625rem;
  align-items: center;
  padding: .4rem .55rem;
  color: var(--gg-ink);
  text-decoration: none;
  border-radius: 8px;
}

.gg-suggest__link img {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.gg-suggest__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gg-suggest__ean {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: #5a7186;
  letter-spacing: .02em;
}

.gg-suggest__item--active .gg-suggest__link,
.gg-suggest__link:hover {
  color: var(--gg-blue);
  background: var(--gg-soft);
}

.gg-suggest__item--action .gg-suggest__link {
  font-weight: 650;
  color: var(--gg-blue);
}

.gg-suggest__item--all .gg-suggest__link {
  justify-content: center;
  padding-block: .55rem;
  font-weight: 650;
  color: var(--gg-orange);
  border-top: 1px solid var(--gg-border);
  border-radius: 0 0 8px 8px;
}

/* Mobile: il dropdown vive dentro il pannello, sotto campo e pulsante. */
.gg-search-mobile__panel .gg-suggest {
  position: static;
  grid-column: 1 / -1;
  max-height: min(55vh, 22rem);
  margin: 0 -.75rem -.75rem;
  border: 0;
  border-top: 1px solid var(--gg-border);
  border-radius: 0 0 14px 14px;
  box-shadow: none;
}


.gg-header-utility {
  gap: .2rem;
  min-width: 0;
  padding-left: .25rem;
}

.gg-header-utility__contact,
.gg-header-utility__account,
.gg-header-utility__account > div,
.gg-header-utility .ps-customersignin,
.gg-header-utility .ps-shoppingcart {
  display: flex;
  align-items: center;
}

.gg-header-utility__account {
  gap: .1rem;
}

.gg-header-utility .ps-contactinfo__email,
.gg-header-utility .header-block__action-btn {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .45rem .5rem;
  font-size: .67rem;
  font-weight: 650;
  line-height: 1;
  color: var(--gg-ink);
  text-decoration: none;
  border-radius: 10px;
  white-space: nowrap;
}

.gg-header-utility .ps-contactinfo__email:hover,
.gg-header-utility .header-block__action-btn:hover {
  color: var(--gg-blue);
  background: var(--gg-soft);
}

.gg-header-utility .header-block__icon {
  margin: 0;
  font-size: 1.15rem;
}

.gg-header-utility .header-block__badge {
  position: static;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .25rem;
  font-size: .62rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 999px;
  transform: none;
}

/* Hummingbird collassa il menu principale sotto 1200px, ma la shell GommeGo
   conserva spazio sufficiente gia' dal desktop compatto. Manteniamo quindi la
   navigazione orizzontale da 992px e riserviamo l'hamburger a tablet/mobile. */
@layer utilities {
  @media (min-width: 992px) and (max-width: 1199px) {
    /* Il padre assegna `order: -1` al modulo e sposta il menu davanti al logo.
       Nel desktop compatto GommeGo conserva invece la sequenza logo → menu → ricerca. */
    .header-bottom .ps-mainmenu.ps-mainmenu--desktop {
      order: 0;
    }

    .header-bottom .ps-mainmenu__desktop {
      display: block !important;
    }

    .header-bottom .ps-mainmenu__mobile-toggle {
      display: none !important;
    }
  }
}

/* Il menu nativo riserva la parte destra del pannello ai figli delle categorie.
   Le quattro tipologie GommeGo non ne hanno: sul desktop diventano quindi scelte
   dirette a tutta larghezza, senza lasciare un grande spazio bianco. */
@media (min-width: 1200px) {
  .gg-header-top__row {
    min-height: 40px;
  }

  .header-bottom {
    padding-block: .5rem;
  }

  .header-bottom__row {
    position: relative;
    min-height: 60px;
  }

  .header-bottom__logo {
    width: calc(190px + var(--bs-gutter-x) * .5);
    height: auto;
    padding-right: 0;
  }

  .header-bottom__brand {
    width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .header-bottom .navbar-brand .logo,
  .header-bottom .logo {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
  }

  .header-bottom .navbar-brand {
    width: 100%;
    max-width: none;
    max-height: none;
  }

  .header-bottom .ps-mainmenu.ps-mainmenu--desktop {
    display: flex;
    align-items: center;
    margin-left: 1.75rem;
  }

  .header-bottom .ps-mainmenu__tree {
    flex-wrap: nowrap;
    gap: .2rem;
    align-items: center;
  }

  .header-bottom .ps-mainmenu__tree-item-wrapper {
    align-items: center;
  }

  .header-bottom .ps-mainmenu__tree-link {
    min-height: 48px;
    padding: .65rem .65rem;
    font-size: 1.0625rem;
  }

  .header-bottom .ps-mainmenu__tree-link::after {
    right: .65rem;
    left: .65rem;
  }

  .header-bottom .ps-mainmenu__tree-dropdown-toggle {
    min-width: 44px;
    min-height: 48px;
    margin-left: -.55rem;
    padding-right: .35rem;
  }

  .gg-search__field input {
    width: min(20rem, 24vw);
  }

  .header-bottom .ps-mainmenu__tree-item:hover > .js-sub-menu,
  .header-bottom .ps-mainmenu__tree-item:focus-within > .js-sub-menu {
    display: block !important;
  }

  .header-bottom .ps-mainmenu__tree-item > .submenu {
    box-shadow: 0 18px 36px rgb(1 46 85 / 18%);
  }

  .header-bottom .ps-mainmenu__tree-item > .submenu .submenu__left {
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
    padding-block: 1rem;
    border: 0;
  }

  .header-bottom .ps-mainmenu__tree-item > .submenu .submenu__left-item {
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 1rem;
    color: var(--gg-blue-deep);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    background: var(--gg-soft);
    border: 1px solid var(--gg-border);
    border-radius: 12px;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  }

  .header-bottom .ps-mainmenu__tree-item > .submenu .submenu__left-item:hover,
  .header-bottom .ps-mainmenu__tree-item > .submenu .submenu__left-item:focus-visible {
    color: #fff;
    background: var(--gg-blue);
    border-color: var(--gg-blue);
    transform: translateY(-2px);
  }

  .header-bottom .ps-mainmenu__tree-item > .submenu .submenu__right {
    display: none;
  }
}

/* Fra 1200 e 1399 px il container Bootstrap resta largo 1140 px, mentre logo (fino a 336 px) e
   ricerca (24vw) crescono con la finestra: alla navigazione restavano ~490 px e «Centri di
   montaggio» finiva a capo, portando la fascia da 56 a 99 px (segnalato il 21/09/2026).
   Qui logo e ricerca cedono spazio al menu; da 1400 px in su, dove il container passa a 1320,
   valgono le misure piene definite sopra. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-bottom__logo {
    width: calc(170px + var(--bs-gutter-x) * .5);
  }

  .header-bottom .ps-mainmenu.ps-mainmenu--desktop {
    min-width: 0;
    margin-left: 1.25rem;
  }

  .header-bottom .ps-mainmenu__tree-link {
    padding-inline: .5rem;
    font-size: .9375rem;
  }

  .header-bottom .ps-mainmenu__tree-link::after {
    right: .5rem;
    left: .5rem;
  }

  .header-bottom .ps-mainmenu__tree-dropdown-toggle {
    min-width: 36px;
    margin-left: -.4rem;
  }

  .gg-search__field input {
    width: clamp(9rem, 14vw, 13rem);
  }
}

@media (max-width: 1199px) {
  .gg-header-utility__contact,
  .gg-header-utility .header-block__title {
    display: none !important;
  }

  .gg-search__field input {
    width: min(20rem, 30vw);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .gg-search__field input {
    width: clamp(12rem, 19vw, 15rem);
  }
}

.gg-search-mobile {
  position: static;
  width: 42px;
  min-height: 42px;
  padding: 0;
  color: var(--gg-ink);
  border-radius: 10px;
}

.gg-search-mobile summary {
  display: grid;
  width: 42px;
  min-height: 42px;
  cursor: pointer;
  border-radius: 10px;
  list-style: none;
  place-items: center;
}

.gg-search-mobile summary::-webkit-details-marker {
  display: none;
}

.gg-search-mobile summary:hover,
.gg-search-mobile[open] summary {
  color: var(--gg-blue);
  background: var(--gg-soft);
}

.gg-search-mobile summary svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 2;
}

.gg-search-mobile__panel {
  position: absolute;
  top: calc(100% - 2px);
  right: .75rem;
  left: .75rem;
  z-index: 1060;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--gg-border);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgb(1 46 85 / 18%);
}

.gg-search-mobile__panel input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: .6rem .85rem;
  color: var(--gg-ink);
  background: #f6f9fb;
  border: 1px solid #dbe5ee;
  border-radius: 10px;
}

.gg-search-mobile__panel input[type="search"]:focus {
  background: #fff;
  border-color: var(--gg-blue);
  outline: 0;
  box-shadow: 0 0 0 .2rem rgb(2 72 132 / 12%);
}

.gg-search-mobile__panel button {
  min-width: 76px;
  padding: .55rem .9rem;
  font-weight: 700;
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border: 0;
  border-radius: 10px;
}

.header-nav-full-width {
  background: var(--gg-blue-deep);
}

.header-nav-full-width > .blockreassurance {
  display: none;
}

/* Homepage foundation */
body#index .wrapper {
  padding-top: 0;
}

body#index .page:not(body) {
  padding-bottom: 0;
}

.page-content--home {
  display: block;
  gap: 0;
}

.gg-home {
  overflow: hidden;
  background: #fff;
}

.ggo-finder :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, small, strong, em),
.gg-home :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, small, strong, em),
.ggo-finder__lede {
  -webkit-user-select: text;
  user-select: text;
}

.ggo-finder button,
.ggo-finder button * {
  -webkit-user-select: none;
  user-select: none;
}

/* Chromium puo' avviare l'auto-scroll del documento durante la selezione
 * sotto il Finder. La classe esiste soltanto per la durata del drag mouse. */
html.gg-text-selection-active,
html.gg-text-selection-active body#index {
  overflow: hidden !important;
}

.gg-section {
  position: relative;
  padding: clamp(2.75rem, 4.2vw, 4rem) 0;
}

.gg-section--soft {
  background: var(--gg-soft);
}

@supports (content-visibility: auto) {
  .gg-home .gg-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

.gg-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.gg-section-heading--center {
  display: block;
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.gg-section-heading h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.125rem);
  font-weight: var(--gg-type-strong-weight);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--gg-blue-deep);
}

.gg-section-heading p {
  max-width: 560px;
  margin: 0;
  line-height: 1.65;
  color: var(--gg-muted);
}

.gg-section-heading--center p {
  margin: 1rem auto 0;
}

.gg-editorial-link {
  font-weight: 700;
  color: var(--gg-blue);
  text-decoration: underline;
  text-decoration-color: rgb(19 83 129 / 35%);
  text-underline-offset: .16em;
}

.gg-editorial-link:hover,
.gg-editorial-link:focus-visible {
  color: var(--gg-blue-deep);
  text-decoration-color: currentcolor;
}

.gg-editorial-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--gg-orange);
  outline-offset: 3px;
}

/* Pagine stagione (/pneumatici-invernali ecc.): le guide della stagione in una riga sopra la
   lista, discrete ma visibili (23/09/2026). */
.ggo-season__guida {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: baseline;
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  background: #eef4fa;
  border-radius: 10px;
}

.ggo-season__guida-title {
  color: var(--gg-blue-deep);
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-weight: 600;
}

.ggo-season__guida-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}

.gg-button {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: .75rem 1rem .75rem 1.2rem;
  font-size: var(--gg-type-control);
  font-weight: var(--gg-type-strong-weight);
  color: var(--gg-blue-deep);
  text-decoration: none;
  background: var(--gg-orange);
  border: 1px solid var(--gg-orange);
  border-radius: 11px;
  box-shadow: 0 10px 24px rgb(255 133 0 / 22%);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.gg-button span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  background: rgb(255 255 255 / 35%);
  border-radius: 7px;
  place-items: center;
}

.gg-button:hover {
  color: var(--gg-blue-deep);
  background: #ff9828;
  border-color: #ff9828;
  box-shadow: 0 14px 30px rgb(255 133 0 / 28%);
  transform: translateY(-2px);
}

.gg-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--gg-blue);
}

.gg-button--light {
  color: var(--gg-blue-deep);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
}

.gg-button--light:hover {
  color: #fff;
  background: var(--gg-cyan);
  border-color: var(--gg-cyan);
}

.gg-button--outline {
  color: var(--gg-blue);
  background: #fff;
  border-color: #b8ccdc;
  box-shadow: none;
}

.gg-button--outline:hover {
  color: #fff;
  background: var(--gg-blue);
  border-color: var(--gg-blue);
}

.gg-section-action {
  margin-top: 2rem;
  text-align: center;
}

.gg-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  color: var(--gg-blue);
  background: #e9f3fa;
  border-radius: 11px;
  place-items: center;
}

.gg-icon--orange {
  color: var(--gg-blue-deep);
  background: #fff0df;
}

.gg-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Versione A 23/09/2026: in home il configuratore e' una scheda in primo piano che esce dalla
 * hero blu e sporge sulla pagina bianca. La sezione resta blu per intero; la scheda scende oltre il
 * bordo con un margine negativo, e l'overflow verticale e' libero perche' ombra e sporgenza non
 * vengano tagliate (quello orizzontale resta chiuso per la fotografia). Solo la home: il finder
 * compatto delle altre pagine resta com'e'. */
body#index {
  --gg-finder-overhang: 9rem;
}

body#index .ggo-finder:not(.ggo-finder--compact) {
  z-index: 5;
  padding-bottom: 0;
  overflow: clip visible;
  background: linear-gradient(to bottom, var(--gg-blue-surface) 0 calc(100% - var(--gg-finder-overhang)), transparent calc(100% - var(--gg-finder-overhang)));
}

/* Il finder vive dentro la fascia `header-nav-full-width`, blu per intero: in home diventa
 * trasparente, e il blu lo disegna soltanto la sezione del finder. */
body#index .header-nav-full-width {
  background: transparent;
}

/* La fotografia misura l'intera sezione: con la hero `static` il suo riferimento diventa il
 * container, e si ferma dove finisce il blu invece di scendere sulla pagina. */
body#index .ggo-finder:not(.ggo-finder--compact) .ggo-finder__hero {
  position: static;
}

body#index .ggo-finder:not(.ggo-finder--compact) .ggo-finder__guided-visual {
  height: calc(100% - var(--gg-finder-overhang));
}

/* La hero prende la stessa luce di tutte le superfici blu del sito: il bagliore in alto a sinistra
 * sopra la velatura che scurisce la fotografia (23/09/2026). */
body#index .ggo-finder:not(.ggo-finder--compact) .ggo-finder__guided-picture::after {
  background:
    var(--gg-blue-glow),
    linear-gradient(90deg, rgb(5 43 73 / 76%) 0%, rgb(5 43 73 / 20%) 54%, transparent 78%);
}

/* Da 1200px la foto e' un riquadro a destra (guida alla lettura del fianco, modulo gommegofinder):
 * la luce blu passa sull'intera hero, e la velatura resta sul solo bordo sinistro della foto. */
@media (min-width: 1200px) {
  body#index .ggo-finder:not(.ggo-finder--compact) .ggo-finder__guided-visual {
    background: var(--gg-blue-glow);
  }

  body#index .ggo-finder:not(.ggo-finder--compact) .ggo-finder__guided-picture::after {
    background: linear-gradient(90deg, rgb(5 43 73 / 70%) 0%, rgb(5 43 73 / 10%) 45%, transparent 60%);
  }
}

/* La scheda galleggia sul bianco: l'ombra ha spread negativo e resta sotto la scheda invece di
 * allargarsi ai lati, dove disegnava una fascia grigia fra il blu e il bianco (23/09/2026). */
body#index .ggo-finder:not(.ggo-finder--compact) .ggo-finder__surface {
  margin-bottom: calc(-1 * var(--gg-finder-overhang));
  padding: clamp(1.25rem, 2.2vw, 2.25rem);
  border: 1px solid rgb(1 46 85 / 12%);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgb(1 46 85 / 8%),
    0 14px 24px -10px rgb(1 46 85 / 22%),
    0 56px 72px -36px rgb(1 46 85 / 55%);
}

body#index .gg-home-assurance .gg-trust__panel {
  padding-top: calc(var(--gg-finder-overhang) + 4rem);
}

/* Trust rail — versione A 23/09/2026: una riga quieta sotto il finder, senza pannello né
 * divisori; il finder sovrapposto al bordo della hero fa gia' da raccordo. */
.gg-trust {
  position: relative;
  z-index: 2;
  background: #fff;
}

.gg-home-assurance .gg-trust__panel {
  padding-bottom: .5rem;
}

.gg-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.gg-trust__item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}

.gg-trust__item > span:last-child {
  min-width: 0;
}

a.gg-trust__item:hover strong {
  color: var(--gg-blue);
  text-decoration: underline;
  text-underline-offset: .18em;
}

a.gg-trust__item:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 4px;
}

.gg-trust__item .gg-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9px;
}

.gg-trust__item .gg-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.gg-trust__item strong,
.gg-trust__item small {
  display: block;
}

.gg-trust__item strong {
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--gg-blue-deep);
}

.gg-trust__item small {
  margin-top: .15rem;
  font-size: var(--gg-type-meta);
  line-height: 1.4;
  color: var(--gg-muted);
}

/* Sul telefono una voce per riga: in due colonne i titoli andavano a capo e la frase di vendita
 * spariva. Quattro righe compatte costano poco sotto il configuratore. */
@media (max-width: 767px) {
  .gg-trust__grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .gg-trust__item {
    align-items: center;
  }
}

/* Category cards */
.gg-categories {
  background:
    radial-gradient(circle at 100% 0, rgb(47 181 210 / 10%), transparent 30rem),
    #fff;
}

.gg-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.gg-category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 1.15rem;
  overflow: hidden;
  color: var(--gg-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid #e0e8ef;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgb(1 46 85 / 5%);
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gg-category-card::before {
  position: absolute;
  inset: auto -25% -45% auto;
  width: 190px;
  aspect-ratio: 1;
  content: "";
  background: #eef6fb;
  border-radius: 50%;
  transition: background-color .18s ease, transform .18s ease;
}

.gg-category-card:hover {
  color: var(--gg-ink);
  border-color: #9dbcd3;
  box-shadow: 0 18px 42px rgb(1 46 85 / 12%);
  transform: translateY(-5px);
}

.gg-category-card:hover::before {
  background: #fff0df;
  transform: scale(1.12);
}

.gg-category-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--gg-blue);
}

.gg-category-card__index {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: #95a5b4;
}

.gg-category-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 7rem;
  height: 7rem;
  margin: 1.25rem auto 1.1rem;
  color: var(--gg-blue);
  background: var(--gg-soft);
  border-radius: 50%;
  place-items: center;
  transition: color .18s ease, background-color .18s ease;
}

.gg-category-card:hover .gg-category-card__icon {
  color: var(--gg-blue-deep);
  background: #eaf4fa;
}

.gg-category-card__icon svg {
  width: 4.1rem;
  height: 4.1rem;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.gg-category-card__copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.gg-category-card__copy strong,
.gg-category-card__copy small {
  display: block;
}

.gg-category-card__copy strong {
  font-size: 1.05rem;
  color: var(--gg-blue-deep);
}

.gg-category-card__copy small {
  margin-top: .35rem;
  font-size: .7rem;
  line-height: 1.45;
  color: var(--gg-muted);
}

.gg-category-card__arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: grid;
  width: 2rem;
  height: 2rem;
  font-size: .9rem;
  color: var(--gg-blue);
  background: #fff;
  border: 1px solid #dbe5ee;
  border-radius: 8px;
  place-items: center;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.gg-category-card:hover .gg-category-card__arrow {
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border-color: var(--gg-orange);
}

/* Product modules */
.gg-section--products {
  background: #fff;
  border-top: 1px solid #edf2f6;
  border-bottom: 1px solid #edf2f6;
}

.gg-section--novita .products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.4vw, 1.15rem);
}

.gg-section--products .module-products.container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.gg-section--products .section-title {
  position: relative;
  padding-top: 1.2rem;
  margin-bottom: 2rem;
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--gg-blue-deep);
  text-align: left;
}

.gg-section--products .section-title::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--gg-orange-dark);
  text-transform: uppercase;
}

.gg-section--products .ps-bestsellers .section-title::before {
  content: "I più scelti";
}

.gg-section--products .ps-featuredproducts .section-title::before {
  content: "In evidenza";
}

.gg-section--products .module-products__list {
  margin: 0;
}

.gg-section--products .product-miniature__inner {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e9f0;
  border-radius: 14px;
  transition: border-color .18s ease, transform .18s ease;
}

.gg-section--products .product-miniature__inner:hover {
  border-color: #a8c1d5;
  box-shadow: none;
  transform: translateY(-3px);
}

.gg-section--products .product-miniature__top {
  padding: .85rem;
  background: #f5f7f8;
}

.gg-section--products .product-miniature__image {
  mix-blend-mode: multiply;
}

/* Fondo skeleton sotto le miniature lazy: durante lo scroll il riquadro non resta
   bianco vuoto; a caricamento avvenuto il JPG opaco copre il proprio box. */
.product-miniature__image {
  background: var(--gg-soft);
}

/* Il ripiego occupa lo stesso riquadro delle foto vere: quelle sono 261x261 servite a
   `width: 100%` dal padre, quindi qui niente cap in pixel ne' centratura in un box piu' basso,
   altrimenti la card senza foto ufficiale si vede piu' piccola delle vicine. */
.gg-product-image--fallback .product-miniature__image-link {
  position: relative;
  display: block;
  overflow: hidden;
}

.gg-product-image--fallback .product-miniature__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: normal;
}

.product-miniature__image-container.gg-product-image--fallback,
.page-product .product__no-image.gg-product-image--fallback,
.page-product .carousel-item.gg-product-image--fallback {
  position: relative;
}

.product-miniature__image-container.gg-product-image--fallback::after,
.page-product .product__no-image.gg-product-image--fallback::after,
.page-product .carousel-item.gg-product-image--fallback::after {
  position: absolute;
  z-index: 2;
  top: .6rem;
  right: .6rem;
  padding: .3rem .5rem;
  color: var(--gg-blue-deep);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  content: "Immagine generica";
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--gg-border);
  border-radius: .375rem;
  box-shadow: none;
}

/* Stessa regola in scheda: il carosello con foto vere e' `aspect-ratio: 1` con l'immagine a
   `100%/100%` (vedi `.page-product .ggo-product-media__image`). Il ripiego lo ricalca. */
.page-product .product__no-image.gg-product-image--fallback {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.page-product .product__no-image.gg-product-image--fallback .ggo-product-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.gg-section--products .product-miniature__bottom {
  padding: 1rem;
}

.gg-section--products .product-miniature__title {
  font-size: var(--gg-type-control);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gg-blue-deep);
}

.gg-section--products .gg-product-title__model {
  font-size: var(--gg-type-control);
}

.gg-section--products .product-miniature__price {
  font-size: 1rem;
  font-weight: var(--gg-type-strong-weight);
  color: var(--gg-blue);
}

.gg-section--products .product-miniature__add {
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border-color: var(--gg-orange);
  box-shadow: none;
}

.gg-section--products .product-miniature__add:hover {
  color: var(--gg-blue-deep);
  background: #ff9828;
  border-color: #ff9828;
}

.gg-section--products .module-products__buttons {
  margin-top: 2rem;
  text-align: center;
}

/* Catalog explorer — versione A 23/09/2026: due colonne chiare su fondo tenue, misure e
 * marchi come tessere bianche. Niente pannello navy: il blu resta a hero e montaggio. */
.gg-catalog {
  color: var(--gg-ink);
  background: #e8eef4;
  border-top: 1px solid var(--gg-border);
}

.gg-catalog__heading p {
  color: var(--gg-muted);
}

.gg-catalog__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.gg-catalog__sizes,
.gg-catalog__brands {
  min-width: 0;
}

.gg-catalog__subheading {
  margin-bottom: .875rem;
}

.gg-catalog__subheading h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--gg-type-strong-weight);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--gg-blue-deep);
}

.gg-popular__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
}

.gg-popular__list a {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: .75rem .875rem;
  color: var(--gg-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
  transition: border-color .16s ease;
}

.gg-popular__measure {
  display: flex;
  gap: .12em;
  align-items: baseline;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.gg-popular__separator {
  color: var(--gg-muted);
  font-weight: 400;
}

.gg-popular__rim {
  margin-left: .3em;
  color: var(--gg-orange-dark);
}

.gg-popular__arrow {
  display: grid;
  flex: 0 0 auto;
  color: var(--gg-muted);
  place-items: center;
}

.gg-popular__arrow svg,
.gg-catalog__brands-all svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gg-popular__list a:hover {
  border-color: var(--gg-blue);
}

.gg-popular__list a:hover .gg-popular__arrow {
  color: var(--gg-blue);
}

.gg-popular__list a:focus-visible,
.gg-brands__grid a:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 2px;
}

.gg-brands__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .625rem;
}

.gg-brands__grid a {
  display: grid;
  place-items: center;
  min-height: 4rem;
  padding: .5rem .875rem;
  color: var(--gg-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
  transition: border-color .16s ease;
}

.gg-brand__logo-wrap {
  display: flex;
  align-items: center;
  width: min(100%, 8.5rem);
  height: 2.25rem;
}

.gg-brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}

.gg-brands__grid a:hover {
  border-color: var(--gg-blue);
}

.gg-catalog__brands-all {
  width: 100%;
  margin-top: .875rem;
}

.gg-catalog__guide {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .25rem;
  margin-right: 1.25rem;
  font-size: var(--gg-type-meta);
}

@media (max-width: 991px) {
  .gg-catalog__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .gg-popular__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gg-brands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mounting — versione A 23/09/2026: testo allineato a sinistra come il resto della home. */
.gg-mounting {
  background: #fff;
}

.gg-home .gg-mounting {
  z-index: 4;
  overflow: visible;
  content-visibility: visible;
}

.gg-mounting__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  color: #fff;
  background:
    radial-gradient(circle at 80% 58%, rgb(46 124 196 / 55%) 0, rgb(46 124 196 / 0%) 38%),
    linear-gradient(135deg, #0a3b66 0%, var(--gg-blue-surface) 55%, #03223b 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 2px 4px rgb(1 46 85 / 10%),
    0 18px 36px -8px rgb(1 46 85 / 28%),
    0 48px 96px -16px rgb(1 46 85 / 36%);
}

/* Versione A 23/09/2026 — il raggio di ricerca: cerchi concentrici centrati sul gommista, che
 * sfumano verso i bordi. Disegnati nel fondo del pannello, sotto testi e fotografia. */
.gg-mounting__panel::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: repeating-radial-gradient(circle at 80% 58%, rgb(255 255 255 / 0%) 0 63px, rgb(255 255 255 / 9%) 63px 64px);
  border-radius: inherit;
  -webkit-mask-image: radial-gradient(circle at 80% 58%, #000 0, rgb(0 0 0 / 0%) 62%);
  mask-image: radial-gradient(circle at 80% 58%, #000 0, rgb(0 0 0 / 0%) 62%);
}

.gg-mounting__copy,
.gg-mounting__steps {
  position: relative;
  z-index: 2;
}

.gg-mounting__mechanic {
  display: none;
}

.gg-mounting__copy h2 {
  max-width: 520px;
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #fff;
}

.gg-mounting__copy p {
  max-width: 46ch;
  margin: 0 0 1.5rem;
  line-height: 1.55;
  color: #c6d5e1;
}

.gg-mounting__steps {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: mounting-step;
}

.gg-mounting__steps > li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .85rem;
  align-items: center;
  padding: .65rem 0;
}

.gg-mounting__steps > li + li::before {
  position: absolute;
  top: calc(-50% + 1.2rem);
  bottom: calc(50% + 1.2rem);
  left: 1.2rem;
  width: 2px;
  content: "";
  background: linear-gradient(to bottom, rgb(255 133 0 / 70%), rgb(255 133 0 / 25%));
  transform: translateX(-1px);
}

.gg-mounting__steps > li > span {
  display: grid;
  grid-row: 1;
  width: 2.4rem;
  height: 2.4rem;
  font-size: .72rem;
  font-weight: 800;
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgb(255 133 0 / 16%), 0 8px 18px rgb(0 0 0 / 25%);
  place-items: center;
}

.gg-mounting__steps strong {
  font-size: .9375rem;
  color: #fff;
}

.gg-mounting__steps small {
  font-size: .7rem;
  line-height: 1.5;
  color: #c6d5e1;
}

@media (min-width: 1200px) {
  /* Versione A 23/09/2026, compatta: il pannello stringe sul testo invece di tenere 32rem di
     altezza, e il gommista, piu' alto del pannello, sporge sopra il bordo e appoggia la testa
     sulla sezione precedente (effetto voluto da Tiziano). Lo spazio sopra la sezione si riduce
     di conseguenza: lo occupa lui. */
  .gg-mounting {
    padding-top: clamp(2.75rem, 3.5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 3.5vw, 3.25rem);
  }

  .gg-mounting__panel {
    /* Versione A 23/09/2026: la terza colonna ha la larghezza fissa del gommista e i passaggi
       quella del proprio testo, cosi' restano accanto a lui su ogni larghezza di schermo; lo
       spazio in piu' va alla colonna del testo. Prima le colonne crescevano in `fr` e sui
       monitor larghi si apriva un vuoto fra passaggi e gommista. */
    grid-template-columns: minmax(0, 1fr) auto 25rem;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-block: clamp(2.5rem, 3.5vw, 3.25rem);
  }

  .gg-mounting__mechanic {
    position: absolute;
    top: auto;
    right: 3.25rem;
    bottom: 0;
    z-index: 5;
    display: block;
    align-self: end;
    justify-self: end;
    width: auto;
    height: 31rem;
    margin: 0;
    pointer-events: none;
    transform: none;
  }

  .gg-mounting__steps {
    transform: translateX(1.5rem);
  }

  .gg-mounting__mechanic picture,
  .gg-mounting__mechanic-image {
    display: block;
    width: auto;
    height: 100%;
  }

  .gg-mounting__mechanic-image {
    filter: drop-shadow(0 1.75rem 1.5rem rgb(7 33 66 / 24%));
  }

  .gg-mounting__mechanic::after {
    position: absolute;
    right: 8%;
    bottom: -.6rem;
    left: 4%;
    z-index: -1;
    height: 2.4rem;
    content: "";
    background: radial-gradient(ellipse at center, rgb(0 10 20 / 55%) 0, rgb(0 10 20 / 0%) 70%);
  }

}

/* Footer link-first: quattro colonne SEO, fascia servizi, fondo legale.
 * Versione A 23/09/2026: stessa struttura e stessi link; profondita' con una luce dall'alto a
 * sinistra (la stessa del pannello centri), filetto arancio a tutta larghezza, fondo legale su
 * una fascia piu' scura. Solo gradienti CSS, nessuna immagine. */
.footer__main {
  position: relative;
  padding-block: 2.35rem 0;
  overflow: hidden;
  color: #dbe7f1;
  background-color: var(--gg-blue-surface);
  background-image:
    var(--gg-blue-glow),
    linear-gradient(to bottom, #073760, var(--gg-blue-surface) 45%);
  border-top: 0;
}

.footer__main::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--gg-orange) 0, var(--gg-orange) 22%, rgb(255 133 0 / 0%) 75%);
}

.footer__main-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3.25rem);
  row-gap: 1.65rem;
  padding-bottom: 1.35rem;
  margin-inline: 0;
}

.footer__main-top > .footer-block {
  grid-column: span 3;
  width: auto;
  max-width: none;
  padding: 0;
  margin-bottom: 0;
}

.footer__main-top > .ps-customeraccountlinks,
.footer__main-top > .ps-contactinfo,
.footer__main-top > .gg-footer__quicklinks {
  grid-column: span 6;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.footer__main-top > .ps-contactinfo:not(:has(.footer-block__content > *)) {
  display: none;
}

/* Quattro elementi da `span 4` non stanno in dodici colonne: il quarto andava a capo da solo e
   lasciava due terzi di riga vuoti — il footer «disperso» segnalato il 23/09/2026. A `span 3` la
   seconda fascia si chiude in una riga sola, con la stessa larghezza di colonna della prima. */
.footer__main-top:has(> .ps-contactinfo .footer-block__content > *) > .ps-customeraccountlinks,
.footer__main-top:has(> .ps-contactinfo .footer-block__content > *) > .ps-contactinfo,
.footer__main-top:has(> .ps-contactinfo .footer-block__content > *) > .gg-footer__quicklinks {
  grid-column: span 3;
}

.footer__main-top > .gg-footer__quicklinks {
  padding-top: 1.4rem !important;
}

.gg-footer__quicklinks-title {
  margin-bottom: .8rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #fff;
  text-transform: none;
}

.gg-footer__quicklinks-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: .25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gg-footer__quicklinks-list a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: .65rem;
  padding: .3rem .85rem;
  font-size: var(--gg-type-meta);
  font-weight: 650;
  line-height: 1.45;
  color: #fff;
  text-decoration: none;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.gg-footer__quicklinks-list a::after {
  font-size: 1rem;
  line-height: 1;
  color: var(--gg-orange);
  content: "→";
}

.gg-footer__quicklinks-list a:hover {
  color: #fff;
  background: rgb(255 133 0 / 14%);
  border-color: var(--gg-orange);
}

.footer-block__title,
.footer-block__title a {
  margin-bottom: .8rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #fff;
  text-transform: none;
}

.footer-block__list a,
.footer-block a,
.ps-contactinfo__infos,
.ps-contactinfo__phone a,
.ps-contactinfo__email a {
  font-size: var(--gg-type-meta);
  line-height: 1.6;
  color: #dbe7f1;
}

@media (min-width: 768px) {
  .footer__main-top > .footer-block > .footer-block__title,
  .footer__main-top > .ps-customeraccountlinks .footer-block__title,
  .footer__main-top > .ps-contactinfo .footer-block__title,
  .gg-footer__quicklinks-title {
    padding-bottom: .5rem;
    background: linear-gradient(var(--gg-orange), var(--gg-orange)) left bottom / 1.5rem 2px no-repeat;
  }
}

/* «Il tuo account» porta il titolo dentro un link: il margine del titolo non va ripetuto sul link,
   altrimenti la colonna parte piu' in basso delle altre. */
.footer-block__title > a {
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.footer-block__list a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-block: .2rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  transition: color .16s ease, text-decoration-color .16s ease;
}

.footer-block__list a:hover,
.footer-block a:hover,
.ps-contactinfo__phone a:hover,
.ps-contactinfo__email a:hover {
  color: #fff;
  text-decoration-color: var(--gg-orange);
}

.footer__main a:focus-visible,
.footer__main button:focus-visible,
.footer__main input:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
  box-shadow: none;
}

.gg-footer__closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: end;
  padding-block: 1.1rem 1.1rem;
  background: #031d33;
  /* Fascia a tutta larghezza senza uscire dal container: l'ombra piena la estende ai bordi e il
     clip la taglia in verticale; l'overflow del footer contiene il resto. */
  box-shadow: 0 0 0 100vmax #031d33;
  clip-path: inset(0 -100vmax);
}

.gg-footer__closing--with-payments {
  /* La colonna dei marchi prende esattamente la larghezza della sua riga (`auto`), cosi' i
     metodi restano su una riga sola invece di andare a capo; il resto va alla riga legale. */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

.gg-footer__payments {
  min-width: 0;
}

.gg-footer__payments-title {
  margin: 0 0 .65rem;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #fff;
}

.gg-footer__payment-marks {
  display: flex;
  /* Una riga sola: i metodi accettati si leggono in un colpo d'occhio, non a capo. Sotto i
     992px la fascia torna ad andare a capo, dove una riga sola li renderebbe illeggibili. */
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
}

.gg-footer__payment-marks img,
.gg-footer__payment-marks svg {
  display: block;
  width: auto;
  max-width: 5.5rem;
  height: 1.75rem;
  object-fit: contain;
  /* I loghi ufficiali dei circuiti sono trasparenti e quasi tutti scuri (Visa e Amex sono blu
     notte): sul blu pieno del footer sparirebbero. La pastiglia bianca e' il modo in cui i
     circuiti stessi chiedono di esporli su fondo scuro. */
  box-sizing: content-box;
  padding: .2rem .35rem;
  background-color: #fff;
  border-radius: .25rem;
}

.gg-footer__bottom {
  min-width: 0;
  font-size: .78rem;
  color: #aec0cf;
}

.gg-footer__legal {
  min-width: 0;
}

.footer__main .copyright {
  max-width: 82ch;
  margin: 0;
  color: #aec0cf;
}

/* General product/listing polish */
.product-miniature__inner {
  border: 1px solid var(--gg-border);
  border-radius: 15px;
  transition: border-color .16s ease;
}

.product-miniature__title {
  --gg-product-title-block-size: 2.9em;

  display: block;
  min-block-size: var(--gg-product-title-block-size);
  line-height: 1.45;
  color: var(--gg-blue-deep);
  text-decoration: none;
}

.product-miniature__title:has(.gg-product-title__brand),
.product-miniature__title:has(.gg-product-title__model) {
  display: grid;
  gap: .18rem;
  min-block-size: 0;
  max-block-size: none;
  overflow: visible;
  font-weight: 400;
  line-height: 1.3;
}

/*
 * Il modello sta in due righe, come ci stava il titolo unico prima di lui.
 *
 * Passando alla forma marca+modello la griglia ha preso `max-block-size: none; overflow:
 * visible`, e con essa i nomi lunghi hanno ripreso a crescere: misurati sul listato 205/55 R16,
 * «Bridgestone Turanza ER300A-1 Rft Mfs *» arrivava a **cinque righe**, e le card della stessa
 * riga finivano alte 61 px una e 124 px l'altra. Il nome intero resta comunque leggibile per
 * chi usa uno screen reader: sta nell'`aria-label` dell'ancora, che non viene troncato.
 */
.gg-product-title__model {
  display: -webkit-box;
  max-block-size: calc(2 * 1.3em);
  overflow: hidden;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gg-product-title__brand {
  font-size: var(--gg-type-meta);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--gg-muted);
}

.gg-product-title__model {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--gg-blue-deep);
}

.gg-product-title__size {
  font-size: var(--gg-type-control);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--gg-ink);
}

/* Prima del progressive enhancement lo slot e' gia' stabile; dopo il wrapping
   il clamp vive sullo span interno, cosi' l'overflow non ritaglia l'overlay
   ::after che rende cliccabile l'intera card. */
.product-miniature__title:not(:has(> .gg-product-title__text)):not(:has(.gg-product-title__model)) {
  max-block-size: var(--gg-product-title-block-size);
  overflow: hidden;
}

.gg-product-title__text {
  display: -webkit-box;
  max-block-size: var(--gg-product-title-block-size);
  overflow: hidden;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-miniature__price {
  color: var(--gg-blue);
}

.product-flags .product-flag {
  border-radius: 6px;
}

/* Percorso di navigazione: Hummingbird porta una fascia grigia, slash e allineamento
   spezzato tra link e voce corrente. Lo storico usava slash su fondo trasparente
   (archivio-storico/themes/gommego/_dev/css/theme.scss:193-221) e nascondeva il
   breadcrumb sotto sm; qui resta visibile e diventa il modo per tornare indietro. */
.breadcrumb__wrapper {
  margin-bottom: .75rem;
  background: transparent;
  border-bottom: 1px solid var(--gg-border);
}

.breadcrumb {
  --bs-breadcrumb-divider: "›";
  --bs-breadcrumb-divider-color: var(--gg-muted);
  --bs-breadcrumb-item-active-color: var(--gg-muted);
  align-items: center;
  min-height: 44px;
  padding-block: .15rem;
  overflow: visible;
  font-size: var(--gg-type-meta);
  font-weight: 400;
  line-height: 1.3;
  color: var(--gg-muted);
  flex-wrap: wrap;
  gap: .15rem .35rem;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  padding: 0;
  white-space: normal;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-flex;
  align-items: center;
  height: 1em;
  padding: 0 .2rem 0 0;
  float: none;
  font-weight: 400;
  line-height: 1;
  color: var(--gg-muted);
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .1rem;
  font-weight: var(--gg-type-heading-weight);
  color: var(--gg-blue);
  text-decoration: none;
}

.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  color: var(--gg-blue-dark);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.breadcrumb-item:first-child .breadcrumb-link {
  gap: .35rem;
}

.breadcrumb-item:first-child .breadcrumb-link::before {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.breadcrumb-item:last-child,
.breadcrumb-item.active {
  color: var(--gg-muted);
  font-weight: 400;
}

@media (min-width: 768px) {
  .breadcrumb__wrapper {
    margin-bottom: 1rem;
  }
}

@media (max-width: 1199px) {
  .gg-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gg-category-card {
    min-height: 250px;
  }

}

@media (max-width: 991px) {
  .gg-section-heading {
    display: block;
  }

  .gg-section-heading > p {
    margin-top: 1rem;
  }

  .gg-mounting__panel {
    grid-template-columns: 1fr;
  }

  .gg-section--novita .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 767px) {
  .header-bottom__row {
    min-height: 54px;
  }

  .header-bottom .navbar-brand .logo,
  .header-bottom .logo {
    max-width: 125px;
    max-height: 37px;
  }

  .header-bottom .ps-mainmenu__mobile-toggle .menu-toggle,
  .gg-search-mobile,
  .gg-search-mobile summary,
  .header-bottom #_mobile_ps_customersignin .header-block__action-btn,
  .header-bottom #_mobile_ps_shoppingcart .header-block__action-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .header-bottom #_mobile_ps_customersignin,
  .header-bottom #_mobile_ps_shoppingcart {
    width: 44px;
    padding-right: 0;
    padding-left: 0;
  }

  .header-bottom #_mobile_ps_customersignin .header-block__action-btn,
  .header-bottom #_mobile_ps_shoppingcart .header-block__action-btn {
    width: 44px;
    height: 44px;
  }

  .gg-section {
    padding: 2.5rem 0;
  }

  .gg-section-heading {
    margin-bottom: 1.5rem;
  }

  .gg-section-heading h2 {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
  }

  .gg-categories__grid {
    grid-template-columns: 1fr;
  }

  .gg-category-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .9rem;
    align-items: center;
    min-height: 0;
    padding: 1rem;
  }

  .gg-category-card::before,
  .gg-category-card__index {
    display: none;
  }

  .gg-category-card__icon {
    width: 4.3rem;
    height: 4.3rem;
    margin: 0;
  }

  .gg-category-card__icon svg {
    width: 2.8rem;
    height: 2.8rem;
  }

  .gg-category-card__copy {
    margin: 0;
  }

  .gg-category-card__arrow {
    position: static;
  }

  .gg-section--products .section-title {
    font-size: 2rem;
  }

  .footer__main {
    padding-top: 2rem;
  }

  .footer__main-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 1.4rem;
  }

  .gg-footer__closing,
  .gg-footer__closing--with-payments {
    grid-template-columns: minmax(0, 1fr);
  }

  .gg-footer__payment-marks {
    flex-wrap: wrap;
  }

  .gg-footer__bottom {
    width: calc(100% - 4.25rem);
  }

  .footer__main-top > .footer-block,
  .footer__main-top > .ps-customeraccountlinks,
  .footer__main-top > .ps-contactinfo,
  .footer__main-top > .gg-footer__quicklinks {
    grid-column: 1;
    width: 100%;
    max-width: none;
    padding-top: 0;
    border-top: 1px solid rgb(255 255 255 / 16%);
  }

  .footer-block__title--toggle {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .footer-block__title,
  .footer-block__title a,
  .gg-footer__quicklinks-title {
    font-size: .875rem;
  }

  .footer-block__title--toggle button {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .footer-block__content {
    padding-bottom: .5rem;
  }

  .footer-block__list a {
    width: 100%;
    min-height: 44px;
    padding-block: .55rem;
  }
}

@media (max-width: 359px) {
  .gg-popular__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .header-bottom .navbar-brand .logo,
  .header-bottom .logo {
    max-width: 106px;
    max-height: 32px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .footer__main-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__main-top > .footer-block,
  .footer__main-top > .ps-customeraccountlinks,
  .footer__main-top > .ps-contactinfo {
    grid-column: span 1;
  }

  .gg-footer__quicklinks {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .gg-mounting__panel {
    padding: 1.2rem;
  }

  /* Otto schede in colonna erano circa 5.000px da scorrere: sul telefono diventano una fila
     orizzontale con aggancio, e la scheda successiva si intravede a destra. */
  .gg-section--novita .products {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: .25rem;
  }

  .gg-section--novita .products::-webkit-scrollbar {
    display: none;
  }

  .gg-section--novita .product-miniature {
    scroll-snap-align: start;
  }

  .gg-footer__quicklinks-list {
    gap: .4rem;
  }

  .gg-footer__quicklinks-list a {
    font-size: .8125rem;
  }

}

/**
 * WP-69 — progressive enhancement del link globale «Torna all'inizio» di Hummingbird.
 * Il link resta raggiungibile da tastiera anche in cima grazie a `visually-hidden-focusable`.
 */
.gg-back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1030;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 .5rem 1.25rem rgb(2 72 132 / 28%);
  transform: translateY(.5rem);
  transition: opacity 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

.gg-back-to-top--visible,
.gg-back-to-top:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.gg-back-to-top--visible:hover {
  box-shadow: 0 .7rem 1.5rem rgb(2 72 132 / 36%);
  transform: translateY(-.125rem);
}

.gg-back-to-top:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--gg-blue);
}

.gg-back-to-top__icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (forced-colors: active) {
  .btn:focus-visible,
  .form-control:focus,
  .form-select:focus,
  .form-check-input:focus,
  .gg-button:focus-visible,
  .gg-category-card:focus-visible,
  .gg-back-to-top:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }

  .page-product .ggo-product-page *,
  .page-product .ggo-product-page *::before,
  .page-product .ggo-product-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/**
 * WP-32 — selettore «risultati per pagina» (catalog/_partials/sort-orders.tpl).
 *
 * `.products__sort` è un flex con `gap`, e `.products__sort-dropdown` del padre ha
 * `flex-grow: 1`: due dropdown affiancati si spartirebbero la riga a metà, mentre questo
 * contiene due cifre. Qui si toglie solo la crescita — nessun `!important`, nessuna
 * riscrittura del layout del padre.
 */
.products__sort-dropdown.ggo-per-page {
  flex-grow: 0;
}

.products__sort-dropdown.ggo-per-page .products__sort-dropdown-button {
  white-space: nowrap;
}

/* Il finder espone già il conteggio contestuale sotto l'H1. Il contatore generico
   di Hummingbird ripete subito dopo «Ci sono N prodotti»: una sola informazione,
   senza alterare categorie o altri listati. display:none lo rimuove anche
   dall'albero accessibile, evitando la stessa duplicazione agli screen reader. */
.ggo-results #js-product-list-top .products__count {
  display: none;
}

/**
 * Badge stagione — componente tecnico `Battistrada stagionale`.
 *
 * Il dato continua ad arrivare da `$product.flags`, ma il markup dedicato evita di confondere la
 * stagione con la fascia commerciale. Il pittogramma e' decorativo: non riproduce 3PMSF o M+S.
 */
.product-flags .ggo-season-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.875rem;
  margin: 0;
  padding: .2rem .5rem .2rem .3rem;
  color: #fff;
  background: var(--ggo-season-surface);
  border: 1px solid var(--ggo-season-surface);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .16);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}

/* Stagione e fascia marca presidiano gli angoli diagonali della miniatura: sono informazioni
   distinte, non una singola etichetta composta. */
.product-flags:has(.ggo-season-badge) {
  inset: .5rem;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
}

.product-flags:has(.ggo-season-badge) .ggo-season-badge {
  position: absolute;
  inset-block-start: .25rem;
  inset-inline-start: 0;
}

.product-flags:has(.ggo-season-badge) .ggo-brand-tier--card {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
}

/* Sulla PDP i badge seguono la cornice ottica centrale della gomma, non i margini bianchi del
   canvas. Gli inset proporzionali funzionano anche sulla cover fallback e liberano lo zoom. */
.page-product .product__carousel > .product-flags,
.page-product .product__no-image > .product-flags {
  z-index: 2;
  inset-block: clamp(3rem, 15%, 5.25rem);
  inset-inline: clamp(3rem, 15%, 5.25rem);
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  pointer-events: none;
}

.page-product .product-flags > .ggo-brand-tier--card {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
}

.ggo-season-badge__icon {
  display: block;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}

.ggo-season-badge__value {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

.ggo-season-badge--summer {
  --ggo-season-surface: #b45309;
}

.ggo-season-badge--winter {
  --ggo-season-surface: #1d4ed8;
}

.ggo-season-badge--all-season {
  --ggo-season-surface: #0f766e;
}

@media (forced-colors: active) {
  .product-flags .ggo-season-badge {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }

  .ggo-season-badge__icon {
    forced-color-adjust: none;
  }
}

/**
 * Fascia commerciale — `Fianco Radiale`.
 *
 * Il micro-segno SVG usa quattro tasselli per la scala di marca; il testo resta sempre esplicito.
 * La silhouette asimmetrica ricorda una targhetta sul fianco senza simulare sigilli o medaglie.
 */
.ggo-brand-tier {
  --ggo-tier-ink: #102a56;
  --ggo-tier-accent: #c8841a;
  --ggo-tier-surface: #fff8e9;
  --ggo-tier-border: #e8cb91;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: .55rem;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: .25rem 0 .75rem;
  padding: .38rem .8rem .38rem .42rem;
  color: var(--ggo-tier-ink);
  background: var(--ggo-tier-surface);
  border: 1px solid var(--ggo-tier-border);
  border-radius: 10px 18px 18px 10px;
}

.ggo-brand-tier__icon {
  grid-area: icon;
  display: block;
  flex: none;
  width: 2.375rem;
  height: 2.375rem;
}

.ggo-brand-tier__label {
  grid-area: label;
  color: color-mix(in srgb, var(--ggo-tier-ink) 80%, white);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.1;
  text-transform: uppercase;
}

.ggo-brand-tier__value {
  grid-area: value;
  min-width: 0;
  color: var(--ggo-tier-ink);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.ggo-brand-tier--card {
  grid-template-areas: "icon value";
  gap: .38rem;
  margin: 0;
  padding: .25rem .62rem .25rem .3rem;
  border-radius: 8px 15px 15px 8px;
}

.ggo-brand-tier--card .ggo-brand-tier__icon {
  width: 1.75rem;
  height: 1.75rem;
}

.ggo-brand-tier--card .ggo-brand-tier__value {
  font-size: .75rem;
  line-height: 1;
}

.ggo-brand-tier--detail {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  width: auto;
  margin: .75rem 0 0;
  padding: .75rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--gg-border);
  border-radius: 0;
}

.ggo-brand-tier--detail .ggo-brand-tier__label {
  color: var(--gg-muted);
  font-size: var(--gg-type-label);
  letter-spacing: 0;
  text-transform: none;
}

.ggo-brand-tier--detail .ggo-brand-tier__value {
  font-size: var(--gg-type-control);
}

.ggo-brand-tier--premium {
  --ggo-tier-ink: #102a56;
  --ggo-tier-accent: #c8841a;
  --ggo-tier-surface: #fff8e9;
  --ggo-tier-border: #e8cb91;
}

.ggo-brand-tier--qualita-prezzo {
  --ggo-tier-ink: #0b5357;
  --ggo-tier-accent: #e36f25;
  --ggo-tier-surface: #effafa;
  --ggo-tier-border: #acd7d8;
}

.ggo-brand-tier--economica {
  --ggo-tier-ink: #704700;
  --ggo-tier-accent: #d6971c;
  --ggo-tier-surface: #fff8e8;
  --ggo-tier-border: #e6cd94;
}

.ggo-brand-tier--budget {
  --ggo-tier-ink: #334155;
  --ggo-tier-accent: #df6f2f;
  --ggo-tier-surface: #f5f7fa;
  --ggo-tier-border: #c5cfdb;
}

@media (forced-colors: active) {
  .ggo-brand-tier {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }

  .ggo-brand-tier__label,
  .ggo-brand-tier__value {
    color: CanvasText;
  }
}

/* Ogni pneumatico e' nuovo: fallback visivo se una superficie salta il filtro del presenter. */
.product-flags .badge.new {
  display: none;
}

/**
 * WP-32 §3.1 — l'etichetta UE nella miniatura (`catalog/_partials/eu-label.tpl`).
 *
 * Tre voci in riga sotto il titolo, che vanno a capo quando la card si stringe: sotto i 400px la
 * griglia del padre mette due card affiancate da 164px, e tre chip su una riga sola le farebbero
 * straripare. Nessun `!important` e nessuna regola sulle classi del padre: si aggiunge, non si
 * combatte. Le icone hanno width/height nell'HTML, quindi non spostano niente mentre caricano.
 */
.ggo-eu-label {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  list-style: none;
  margin: .375rem 0 0;
  padding: 0;
}

.ggo-eu-label__item {
  align-items: center;
  color: var(--bs-secondary-color, #6c757d);
  cursor: default;
  display: inline-flex;
  font-size: .8125rem;
  gap: .1875rem;
  line-height: 1.2;
}

.ggo-eu-label__icon {
  flex: 0 0 auto;
  height: 18px;
  width: auto;
}

.ggo-eu-label__value {
  font-weight: 600;
  white-space: nowrap;
}

/**
 * Il riepilogo UE nella rail della scheda prodotto usa la stessa variante compatta delle
 * card (icone + valori): una sola riga di dati. I valori crescono appena rispetto al
 * listato, le ancore restano target da 44 px.
 */
.ggo-eu-summary .ggo-eu-label {
  margin: 0;
  gap: .25rem 1.25rem;
}

.ggo-eu-summary .ggo-eu-label__item {
  font-size: var(--gg-type-control);
  gap: .35rem;
}

.ggo-eu-summary .ggo-eu-label__icon {
  height: 20px;
}

.ggo-eu-summary .ggo-eu-label__value {
  color: var(--gg-blue-deep);
  font-size: 1.125rem;
  font-weight: 700;
}

.ggo-eu-label__value--missing {
  color: var(--gg-muted);
}

/**
 * WP-33 area 1 — la pagina non trovata (404 e 410).
 *
 * Il padre centra tutto (`container--limited-md text-center`) perché la sua 404 è tre righe di
 * testo. Qui dentro c'è il configuratore, che è una griglia di campi: la colonna torna larga e il
 * testo dei campi torna allineato a sinistra, o le etichette ballano sotto i menu a tendina.
 */
.page-content--not-found .gg-404__lead {
  max-width: 44rem;
  margin-inline: auto;
  color: var(--gg-muted);
}

.page-content--not-found .gg-404__finder {
  max-width: 62rem;
  margin: 1.75rem auto 1.25rem;
  text-align: left;
}

.gg-404__families {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-block: 1.25rem;
}

.gg-404__families a {
  padding: .45rem 1rem;
  font-weight: 600;
  color: var(--gg-blue);
  text-decoration: none;
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: 999px;
}

.gg-404__families a:hover,
.gg-404__families a:focus {
  color: #fff;
  background: var(--gg-blue);
  border-color: var(--gg-blue);
}

/**
 * WP-33 area 2 — la pagina contatti.
 *
 * Il form a sinistra, i dati del negozio a destra: su una pagina di contatto le due cose si
 * guardano, non si scorrono una dopo l'altra. Sotto `lg` la colonna dei dati passa sotto il form,
 * e il riquadro resta leggibile perché non dipende dall'altezza del vicino.
 */
.gg-contact {
  gap: 1.5rem 0;
}

.gg-contact__card {
  padding: 1.5rem;
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-lg, 16px);
}

.gg-contact__card-title {
  margin-bottom: .75rem;
  color: var(--gg-blue);
}

.gg-contact__address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: 1.6;
}

.gg-contact__list {
  display: grid;
  gap: .5rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.gg-contact__label {
  display: block;
  font-size: var(--gg-type-label);
  font-weight: 600;
  letter-spacing: var(--gg-type-tracking-label);
  color: var(--gg-muted);
  text-transform: uppercase;
}

.gg-contact__faq {
  margin: 0;
  font-size: .9375rem;
  color: var(--gg-muted);
}

/* WP-34 — il configuratore sulla pagina di una marca. Il compatto porta già il proprio
   `padding-bottom`; qui serve solo staccarlo dal titolo e dalle descrizioni del padre. */
.gg-brand-finder {
  margin-top: 1.5rem;
}

/** Scheda prodotto — “Conferma tecnica”. Mobile: colonna unica con ordine visuale
    identità → immagine → azione → dettagli; il DOM porta la rail prima della foto,
    così titolo e azioni precedono gli strumenti immagine anche da tastiera. */
.page-product .ggo-product-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.25rem;
}

.page-product .ggo-product-hero,
.page-product .ggo-product-rail {
  display: contents;
}

.page-product .ggo-product-identity-panel {
  order: 1;
  min-width: 0;
}

.page-product .ggo-product-main {
  order: 2;
  min-width: 0;
}

.page-product .ggo-product-media {
  min-width: 0;
}

.page-product .ggo-product-decision {
  order: 3;
  display: grid;
  gap: 1.375rem;
  min-width: 0;
}

.page-product .ggo-product-page > :not(.ggo-product-hero):not(.ggo-product-sections) {
  order: 5;
  margin-top: calc(clamp(2rem, 4vw, 3.5rem) - 1.25rem);
}

.page-product .ggo-product-heading {
  min-width: 0;
}

.page-product .product__name {
  max-width: 22ch;
  margin: 0 0 .75rem;
  color: var(--gg-ink);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.page-product .product__description-short {
  max-width: 62ch;
  margin: .75rem 0 0;
  color: var(--gg-muted);
  font-size: var(--gg-type-control);
}

.page-product .product__actions {
  min-width: 0;
  margin: 0;
}

/* Acquisto: prezzo unitario presenter-only, stato nativo, quantità e una CTA. */
.ggo-buy-box {
  display: grid;
  gap: .875rem;
  padding: 1.25rem 1.375rem;
  margin: 0;
  background: #fff;
  border: 1px solid rgb(1 46 85 / 14%);
  border-radius: 18px;
  box-shadow:
    0 2px 4px rgb(1 46 85 / 8%),
    0 18px 40px -12px rgb(1 46 85 / 22%);
}

.ggo-buy-box__price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.ggo-buy-box__eyebrow,
.ggo-buy-box__pfu,
.ggo-buy-box__tax,
.ggo-buy-box__price-meta {
  margin: 0;
}

.ggo-buy-box__eyebrow {
  font-size: var(--gg-type-label);
  font-weight: 600;
  color: var(--gg-muted);
}

.ggo-buy-box__amount {
  margin: .25rem 0 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(2.25rem, 4.4vw, 2.875rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gg-blue-deep);
}

.ggo-buy-box__pfu {
  color: var(--gg-blue-deep);
}

.ggo-buy-box__price-meta {
  display: grid;
  gap: .15rem;
  font-size: var(--gg-type-label);
  color: var(--gg-muted);
  text-align: right;
}

.ggo-buy-box__availability {
  display: flex;
  gap: .25rem .75rem;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--gg-blue-deep);
  font-size: .875rem;
}

.ggo-buy-box__availability span {
  color: var(--gg-muted);
}

.ggo-buy-box__shipping {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  margin: 0;
  font-size: .875rem;
  color: var(--gg-blue-deep);
}

.ggo-buy-box__shipping span {
  color: var(--gg-muted);
}

.ggo-buy-box__purchase {
  display: grid;
  grid-template-columns: minmax(8.5rem, .8fr) minmax(11rem, 1.2fr);
  gap: .875rem;
  align-items: end;
  padding-block: .875rem;
  border-block: 1px solid var(--gg-border);
}

.ggo-buy-box__quantity {
  display: grid;
  gap: .35rem;
}

.ggo-buy-box__label {
  font-size: var(--gg-type-label);
  font-weight: 600;
  color: var(--gg-blue-deep);
}

.ggo-buy-box__quantity .product__quantity {
  min-width: 8.5rem;
}

.ggo-buy-box__submit {
  width: 100%;
  min-height: 48px;
}

/* La CTA d'acquisto usa l'arancio delle azioni principali GommeGo (come «Vedi N pneumatici» nel
 * configuratore); il blu restava confuso con i link. */
.ggo-buy-box .ggo-buy-box__submit.btn {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border-color: var(--gg-orange);
  border-radius: 11px;
  box-shadow: 0 10px 24px rgb(255 133 0 / 26%);
}

.ggo-buy-box .ggo-buy-box__submit.btn:hover,
.ggo-buy-box .ggo-buy-box__submit.btn:focus-visible {
  color: var(--gg-blue-deep);
  background: #ff9828;
  border-color: #ff9828;
}

.ggo-buy-box .ggo-buy-box__submit.btn:focus-visible {
  outline: 3px solid var(--gg-blue);
  outline-offset: 2px;
}

.ggo-buy-box .quantity-button__group > .btn,
.ggo-buy-box .quantity-button__group > input {
  min-height: 44px;
}

.ggo-buy-box .quantity-button__group > .btn {
  min-width: 44px;
}

.ggo-buy-box__support {
  display: flex;
  gap: .75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ggo-buy-box__terms {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--gg-blue);
  font-size: var(--gg-type-label);
  font-weight: 600;
  text-underline-offset: .18em;
}

@media (max-width: 575.98px) {
  .ggo-buy-box__purchase {
    grid-template-columns: minmax(0, 1fr);
  }

  .ggo-buy-box__quantity .product__quantity,
  .ggo-buy-box .quantity-button__group {
    width: 100%;
    min-width: 0;
  }

  .ggo-buy-box__price {
    align-items: start;
    flex-direction: column;
  }

  .ggo-buy-box__price-meta {
    text-align: left;
  }
}

.page-product .product__images {
  width: 100%;
  max-width: 35rem;
  margin-bottom: 0;
  margin-inline: auto;
}

.page-product .product__carousel {
  background:
    radial-gradient(circle at 50% 42%, #fff 0, #fff 38%, rgb(255 255 255 / 0%) 72%),
    linear-gradient(180deg, #eef3f8 0%, #f7f9fc 100%);
  border: 1px solid var(--gg-border);
  border-radius: 18px;
}

.page-product .product__carousel .carousel-item {
  aspect-ratio: 1;
}

.page-product .ggo-product-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-product .ggo-product-media__zoom,
.page-product .product__carousel :where(.carousel-control-prev, .carousel-control-next),
.page-product .product__thumbnail {
  min-width: 44px;
  min-height: 44px;
}

.page-product .product__thumbnails-list {
  padding-block: .75rem 0;
}

.page-product .ggo-product-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  order: 4;
  width: min(100%, 72rem);
  margin-block: calc(clamp(2rem, 4vw, 3.5rem) - 1.25rem) 0;
  margin-inline: auto;
}

.ggo-eu-summary {
  display: grid;
  gap: .375rem;
  padding-block: .75rem;
  border-block: 1px solid var(--gg-border);
}

.ggo-eu-summary__head {
  display: flex;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.ggo-eu-summary__title {
  margin: 0;
  color: var(--gg-muted);
  font-size: var(--gg-type-label);
  font-weight: 600;
}

.ggo-eu-summary__help {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-block: -10px;
  font-size: var(--gg-type-label);
}

.ggo-eu-summary__missing {
  margin: 0;
  font-size: var(--gg-type-label);
  color: var(--gg-muted);
}

.ggo-product-section {
  padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
  border-top: 1px solid var(--gg-border);
  scroll-margin-block-start: 5rem;
}

.ggo-product-section:first-child {
  border-top: 0;
}

.ggo-product-section__title {
  margin: 0 0 1rem;
  color: var(--gg-blue-deep);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
}

.ggo-product-specs {
  margin: 0;
}

.ggo-product-specs__list,
.ggo-product-specs__identity dl {
  padding: 0;
  margin: 0;
}

.ggo-product-specs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
}

.ggo-product-specs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: baseline;
  min-height: 2.75rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--gg-border);
}

.ggo-product-specs__item dt,
.ggo-product-specs__identity dt {
  font-size: var(--gg-type-label);
  font-weight: 500;
  color: var(--gg-muted);
}

.ggo-product-specs__item dd,
.ggo-product-specs__identity dd {
  margin: 0;
  font-weight: 700;
  color: var(--gg-ink);
  text-align: right;
}

.ggo-product-specs__identity {
  margin-top: 1.5rem;
}

.ggo-product-specs__identity h3 {
  margin: 0 0 .5rem;
  font-size: .9375rem;
}

.ggo-product-specs__identity dl {
  display: flex;
  gap: .5rem 1.5rem;
  flex-wrap: wrap;
}

.ggo-product-specs__identity dl > div {
  display: flex;
  gap: .5rem;
  align-items: baseline;
}

.ggo-product-specs__identity a {
  color: var(--gg-blue);
}

.ggo-product-specs__empty {
  margin: 0;
  color: var(--gg-muted);
}

@media (max-width: 575.98px) {
  .ggo-product-specs__list {
    grid-template-columns: 1fr;
  }

  .ggo-product-specs__item {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .ggo-product-specs__item dd {
    overflow-wrap: anywhere;
    text-align: left;
  }

  .ggo-product-specs__identity dl {
    display: grid;
    gap: .375rem;
  }

  .ggo-product-specs__identity dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .125rem;
  }

  .ggo-product-specs__identity dd {
    overflow-wrap: anywhere;
    text-align: left;
  }
}

/* Desktop: flusso a due colonne sull'intera pagina. Foto e sezioni tecniche
   scorrono a sinistra; identità e blocco decisionale formano una rail continua a
   destra, con la decisione stabile mentre si leggono i dati. Niente piu' vuoto
   sotto l'immagine. La rail puo' superare la viewport: scorre internamente, come
   i filtri del listato. */
@media (min-width: 992px) {
  .page-product .ggo-product-page {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 26rem);
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 0;
    align-items: start;
  }

  .page-product .ggo-product-rail {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 1000;
    align-self: stretch;
    min-width: 0;
  }

  .page-product .ggo-product-main {
    grid-column: 1;
    grid-row: 1;
  }

  .page-product .ggo-product-sections {
    grid-column: 1;
    width: auto;
    margin: clamp(2rem, 3vw, 2.75rem) 0 0;
  }

  .page-product .ggo-product-decision {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
    overflow-y: auto;
  }

  .page-product .ggo-product-page > :not(.ggo-product-hero):not(.ggo-product-sections) {
    grid-column: 1 / -1;
  }

  .page-product .product__images {
    max-width: 35rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .page-product .ggo-product-media {
    max-width: 32.5rem;
    margin-inline: auto;
  }
}

/* Filtri categoria (ps_facetedsearch, override del tema figlio):
   sezioni <details> collassabili, liste lunghe scrollabili invece di
   occupare tutta la colonna. */
#search-filters details.facet {
  border-bottom: 1px solid var(--gg-border);
  padding-block: 0.35rem;
}

#search-filters details.facet > summary {
  cursor: pointer;
  padding: 0.4rem 0;
  color: var(--gg-ink);
  list-style-position: inside;
}

#search-filters details.facet > summary:hover {
  color: var(--gg-blue);
}

#search-filters .facet-values {
  max-height: 16rem;
  margin: 0 0 0.5rem;
  padding: 0 0.25rem 0 0;
  overflow-y: auto;
  list-style: none;
}

/* Scheda prodotto — «Continua la ricerca» e blocco montaggio (27/08). */
.gg-product-links {
  margin: 0;
}

.gg-product-links__title {
  margin: 0 0 .75rem;
}

.gg-product-links__list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gg-product-links__item {
  border-bottom: 1px solid var(--gg-border);
}

.gg-product-links__link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding-block: .65rem;
  font-size: var(--gg-type-control);
  font-weight: 600;
  color: var(--gg-blue);
  text-decoration: none;
}

.gg-product-links__link::after {
  content: "→";
}

.gg-product-links__link:hover,
.gg-product-links__link:focus-visible {
  color: var(--gg-blue-deep);
}

.gg-product-links__link--change {
  color: var(--gg-orange-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--gg-orange);
  text-decoration-thickness: .125rem;
  text-underline-offset: .25em;
}

.gg-product-links__link--change:hover,
.gg-product-links__link--change:focus-visible {
  color: var(--gg-blue-deep);
  text-decoration-color: var(--gg-orange-dark);
}

.gg-product-links__link--change::after {
  color: var(--gg-orange-ink);
}

.ggo-mounting-action {
  padding: 1.25rem;
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
}

.ggo-mounting-action__title {
  margin: 0;
  color: var(--gg-blue-deep);
  font-size: 1rem;
  font-weight: 700;
}

.ggo-mounting-action__text {
  margin: .35rem 0 1rem;
  color: var(--gg-muted);
  font-size: var(--gg-type-control);
}

.ggo-mounting-action__link {
  min-height: 44px;
  align-items: center;
  font-weight: 600;
  text-underline-offset: .18em;
}

.ggo-mounting-action--primary .ggo-mounting-action__link {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   UIX Premium Performance — rifiniture P1, progressive e circoscritte.
   -------------------------------------------------------------------------- */

/* Card prodotto: il link titolo diventa una superficie unica soltanto quando
   custom.js ha verificato che la card non contenga azioni concorrenti. */
.product-miniature__actions {
  text-align: center;
}

.product-miniature__inner.gg-product-card--linked {
  position: relative;
  transition: border-color .16s ease;
}

.product-miniature__inner.gg-product-card--linked .product-miniature__title::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  border-radius: inherit;
}

.product-miniature__inner.gg-product-card--linked:has(.product-miniature__title:focus-visible) {
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
}

.product-miniature__inner.gg-product-card--linked .product-miniature__title:focus-visible {
  outline: 0;
}

@media (hover: hover) and (pointer: fine) {
  .product-miniature__inner:hover {
    border-color: rgb(2 72 132 / 38%);
    box-shadow: none;
    transform: none;
  }

  .product-miniature__inner:hover .product-miniature__image {
    transform: none;
  }

  .product-miniature__inner:hover .product-miniature__top {
    border-end-start-radius: var(--bs-border-radius);
    border-end-end-radius: var(--bs-border-radius);
  }

  .gg-section--products .product-miniature__inner:hover {
    box-shadow: 0 8px 26px rgb(1 46 85 / 5%);
  }
}

.ggo-results .product-miniature__bottom {
  padding: 1rem 1rem 1.05rem;
}

.ggo-results .product-miniature__details {
  min-height: 40px;
  padding: .35rem 0 0;
  font-size: var(--gg-type-control);
  font-weight: 600;
  color: var(--gg-blue);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ggo-results .product-miniature__details:hover,
.ggo-results .product-miniature__details:focus-visible {
  color: var(--gg-blue-deep);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ggo-results #search-filters > .h6,
.ggo-results #search-filters .text-uppercase.h6 {
  margin-bottom: 1rem;
  font-size: var(--gg-type-label);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gg-muted);
  text-transform: none;
}

.ggo-results #search-filters .facet-title {
  margin-bottom: .55rem;
  font-size: var(--gg-type-control);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gg-blue-deep);
  text-transform: none;
}

.ggo-results #search-filters .facet-label a {
  font-size: var(--gg-type-meta);
  font-weight: 400;
  line-height: 1.35;
  color: var(--gg-ink);
}

/* Finder: controlli nativi riconoscibili, liste dense ma governabili e colonna
   filtri sempre disponibile su desktop. */
.ggo-results #search-filters .facet {
  padding-block: .75rem;
  border-bottom: 1px solid var(--gg-border);
}

.ggo-results #search-filters .facet-title {
  margin-bottom: .6rem;
  color: var(--gg-blue-deep);
  letter-spacing: .01em;
  text-transform: none;
}

.ggo-results #search-filters .facet-values {
  max-height: 16rem;
  padding-right: .35rem;
  margin-bottom: 0;
  overflow-y: auto;
  scrollbar-color: var(--gg-border) transparent;
  scrollbar-width: thin;
}

.ggo-results #search-filters .facet-label {
  display: flex;
  gap: .55rem;
  align-items: center;
  min-height: 2rem;
}

.ggo-results .custom-checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gg-blue);
  cursor: pointer;
}

.ggo-results .products__sort-dropdown-button {
  min-height: 44px;
  border-color: var(--gg-border);
  border-radius: var(--gg-radius-sm);
}

.ggo-results .products__sort-dropdown-button:hover,
.ggo-results .products__sort-dropdown-button:focus-visible {
  color: var(--gg-blue-deep);
  background: var(--gg-soft);
  border-color: var(--gg-blue);
}

@media (min-width: 992px) {
  .ggo-results__filters {
    position: sticky;
    top: 5.5rem;
    align-self: start;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Scheda prodotto: collegamenti lineari e target touch, senza chip o icone generiche. */
.gg-product-links__link:focus-visible,
.ggo-mounting-action__link:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
}

.ps-sharebuttons__link {
  display: grid;
  width: 44px;
  height: 44px;
  color: var(--gg-blue);
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: 50%;
  place-items: center;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.ps-sharebuttons__link:hover,
.ps-sharebuttons__link:focus-visible {
  color: #fff;
  background: var(--gg-blue);
  border-color: var(--gg-blue);
}

.gg-reviews__viewport:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 3px;
}

/* ==========================================================================
   Icon font Material Icons — subset (performance, 02/09/2026)
   --------------------------------------------------------------------------
   Il font completo del padre pesa 122 KB e veniva precaricato su ogni pagina
   per ~59 glifi realmente usati. Qui si dichiara un subset da ~2,9 KB
   (assets/fonts/material-icons-subset.woff2) con unicode-range sui soli
   codepoint presenti nel front office (inventario del 02/09: entita' &#x…;
   dei template gommego + hummingbird + gommegofinder, degli override di
   modulo dentro i temi — menu mobile E5D2 incluso — e dei JS di modulo come
   psshipping E558; icone dinamiche di qty-input E145/E15B/E5CA/E5CD e
   disponibilita' E5CA/E002/E14B).
   Questa regola sta DOPO quella del padre nel bundle CCC: per i caratteri nel
   range vince il subset; per qualunque glifo fuori range il browser ricade
   sul @font-face originale e scarica il font pieno solo all'occorrenza
   (residuo noto: la ligatura testuale "chevron_right" di
   hummingbird/templates/catalog/_partials/quickview.tpl:86, che richiede le
   lettere ASCII escluse dal subset). N.B.: il CCC di PrestaShop INCORPORA il
   woff2 come data URI nel bundle (e' piccolo): nessuna richiesta separata e
   nessun preload nel head — il file .woff2 resta solo come sorgente rigenerabile.
   Rigenerare con:
   python3 -m fontTools.subset <font-padre> --flavor=woff2 --unicodes=<lista> \
     --layout-features='rlig,liga,dlig' --no-hinting --desubroutinize
   ========================================================================== */

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/material-icons-subset.woff2") format("woff2");
  unicode-range: U+E001-E002, U+E0B0, U+E0BE, U+E0CD, U+E145, U+E148, U+E14B-E14C, U+E151-E153, U+E158, U+E15B, U+E254, U+E2C4, U+E313-E316, U+E415, U+E417, U+E547, U+E54E, U+E558, U+E5C4-E5C5, U+E5C8, U+E5CA-E5CD, U+E5D2, U+E853-E854, U+E860, U+E86C, U+E872, U+E876, U+E879, U+E87D, U+E88A, U+E88E-E88F, U+E8AD, U+E8B0-E8B1, U+E8B6, U+E8CC, U+E8DB-E8DC, U+E8F4, U+E916, U+EF3A, U+F00F, U+F02E, U+F05B, U+F090, U+F1CC;
}

/* ==========================================================================
   Pagine CMS: guide, pagine marca, pagine di servizio, indice di categoria
   --------------------------------------------------------------------------
   Struttura: templates/cms/page.tpl e templates/cms/category.tpl.
   Stesso gesto della home: testata blu a tutta larghezza (.gg-doc-hero) con la
   luce in alto a sinistra, e un foglio bianco (.gg-doc__sheet) che sale sopra
   la testata come il configuratore sospeso. Da 1200px a destra l'indice della
   pagina, che segue la lettura, e la ricerca per misura.
   Titoli in Barlow 600 (gia' precaricato per l'header): nessun font in piu'.
   Il markup del contenuto arriva dal DB ed e' legacy: qui si rende leggibile
   senza toccare i contenuti.
   ========================================================================== */

body#cms {
  --gg-doc-overhang: clamp(2rem, 5vw, 4.5rem);
  --gg-doc-pad: clamp(1.25rem, 4vw, 3.5rem);
  --gg-doc-main: 50rem;
  --gg-doc-side: 17rem;
  --gg-doc-gap: clamp(2rem, 3vw, 3.5rem);
}

/* la testata esce dal container: niente scroll orizzontale. Sul body non basta, Chrome non
   propaga clip alla finestra; sul main si', e clip (a differenza di hidden) lascia funzionare
   l'indice sticky. */
body#cms main {
  overflow-x: clip;
}

body#cms .breadcrumb__wrapper {
  margin-bottom: 0;
}

body#cms .wrapper {
  padding-top: 0;
}

/* Testata ------------------------------------------------------------------- */

.gg-doc-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, var(--gg-doc-main));
  justify-content: center;
  padding-block: clamp(2.25rem, 5vw, 4rem) calc(var(--gg-doc-overhang) + clamp(1.75rem, 3vw, 2.5rem));
  color: #fff;
}

.gg-doc-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--gg-blue-glow), var(--gg-blue-surface);
}

.gg-doc-hero > * {
  grid-column: 1;
  padding-inline: var(--gg-doc-pad);
}

/* Scena per argomento e logo marca: solo da 1200px, nello spazio a destra del titolo. La foto
   arriva al bordo dello schermo e sfuma nel blu verso il testo. */
.gg-doc-hero__scene {
  display: none;
}

/* sotto 1200px il logo marca e' una piccola targa sopra il titolo: il testo delle pagine marca non
   lo ripete piu' (CMS 35-62 rifatte il 23/09/2026) e pesa pochi KB */
.gg-doc-hero > .gg-doc-hero__logo {
  display: grid;
  width: 8.5rem;
  aspect-ratio: 16 / 9;
  padding: .6rem .8rem;
  margin: 0 var(--gg-doc-pad) .9rem;
  background: #fff;
  border-radius: 10px;
  place-items: center;
}

.gg-doc-hero__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (min-width: 1200px) {
  .gg-doc-hero::before {
    z-index: -2;
  }

  /* la foto ha bisogno di altezza: le testate corte (pagine di servizio, titoli brevi) crescono */
  .gg-doc-hero--scene {
    min-height: clamp(21rem, 25vw, 24rem);
    align-content: start;
  }

  .gg-doc-hero > .gg-doc-hero__scene {
    position: absolute;
    z-index: -1;
    top: 0;
    right: calc(50% - 50vw);
    bottom: 0;
    display: block;
    width: min(52vw, 900px);
    padding: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  }

  .gg-doc-hero__scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }

  /* il logo sta nella fascia a destra, sulla colonna dell'indice */
  .gg-doc-hero > .gg-doc-hero__logo {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 1.5rem;
    margin: 0;
    background: #fff;
    border-radius: var(--gg-radius);
    box-shadow: 0 24px 48px -20px rgb(0 0 0 / 55%);
    place-items: center;
  }

  .gg-doc-hero__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* il logo e' salito in testata: nel testo non si ripete */
  .gg-article__body--logo-in-hero > :first-child:is(a:has(> img:only-child), img) {
    display: none;
  }
}

.gg-doc-hero__kicker {
  margin: 0 0 .6rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffb057;
}

/* la misura la da la colonna: un max-width qui conteneva anche il padding del blocco e
   lasciava al testo 500 px su 690, mandando a capo titoli da due righe */
.gg-doc-hero__title {
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(2.125rem, 3.8vw, 3.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}

.gg-doc-hero__meta {
  margin: 1rem 0 0;
  font-size: var(--gg-type-control);
  color: rgb(255 255 255 / 74%);
}

/* guide sui test ADAC: il marchio a sinistra, fonte e tempo di lettura su due righe */
.gg-doc-hero__meta--adac {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .9rem;
  align-items: center;
  margin-top: 1.25rem;
}

.gg-doc-hero__adac {
  grid-row: span 2;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 4px;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 55%);
}

.gg-doc-hero__source {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

/* Foglio e colonna laterale ------------------------------------------------ */

/* Sotto 1200px il foglio e' l'intero .gg-doc: indice chiuso in cima, testo,
   ricerca per misura in fondo. */
.gg-doc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--gg-doc-main);
  margin: calc(var(--gg-doc-overhang) * -1) auto clamp(3rem, 6vw, 5rem);
  padding: var(--gg-doc-pad);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgb(1 46 85 / 8%), 0 14px 24px -10px rgb(1 46 85 / 22%), 0 56px 72px -36px rgb(1 46 85 / 55%);
}

.gg-doc__sheet {
  order: 1;
  padding: 0;
}

.gg-doc__aside {
  display: contents;
}

.gg-toc {
  order: 0;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gg-border);
}

.gg-doc__finder {
  order: 2;
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
}

@media (min-width: 1200px) {
  .gg-doc-hero {
    grid-template-columns: minmax(0, var(--gg-doc-main)) var(--gg-doc-side);
    column-gap: var(--gg-doc-gap);
  }

  .gg-doc {
    display: grid;
    grid-template-columns: minmax(0, var(--gg-doc-main)) var(--gg-doc-side);
    column-gap: var(--gg-doc-gap);
    justify-content: center;
    align-items: start;
    max-width: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .gg-doc__sheet {
    grid-area: 1 / 1;
    padding: var(--gg-doc-pad);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgb(1 46 85 / 8%), 0 14px 24px -10px rgb(1 46 85 / 22%), 0 56px 72px -36px rgb(1 46 85 / 55%);
  }

  /* la colonna comincia sotto la testata, sul bianco */
  .gg-doc__aside {
    grid-area: 1 / 2;
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: calc(var(--gg-doc-overhang) + 1.5rem);
  }

  .gg-toc {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .gg-toc__summary {
    pointer-events: none;
  }

  .gg-toc__summary::after {
    display: none;
  }

  .gg-doc__finder {
    margin: 0;
  }

  /* pagina di servizio senza indice: la colonna vuota non resta, il foglio va al centro */
  body#cms:has(.gg-doc--service .gg-toc[hidden]) :is(.gg-doc-hero, .gg-doc) {
    grid-template-columns: minmax(0, var(--gg-doc-main));
  }

  body#cms:has(.gg-doc--service .gg-toc[hidden]) .gg-doc__aside {
    display: none;
  }
}

/* Indice della pagina ------------------------------------------------------- */

.gg-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gg-blue-deep);
  cursor: pointer;
  list-style: none;
}

.gg-toc__summary::-webkit-details-marker {
  display: none;
}

.gg-toc__summary::after {
  content: "";
  width: .6rem;
  height: .6rem;
  margin-right: .35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .2s ease;
}

.gg-toc__details[open] > .gg-toc__summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.gg-toc__summary:focus-visible {
  outline: 3px solid var(--gg-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.gg-toc__list {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--gg-border);
}

.gg-toc__list a {
  position: relative;
  display: block;
  padding: .45rem 0 .45rem 1rem;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--gg-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.gg-toc__list a::before {
  content: "";
  position: absolute;
  top: .35rem;
  bottom: .35rem;
  left: -2px;
  width: 2px;
  background: var(--gg-orange);
  transform: scaleY(0);
  transition: transform .2s ease;
}

.gg-toc__list a:hover {
  color: var(--gg-blue);
}

.gg-toc__list a[aria-current="true"] {
  font-weight: 600;
  color: var(--gg-blue-deep);
}

.gg-toc__list a[aria-current="true"]::before {
  transform: scaleY(1);
}

.gg-toc__list a:focus-visible {
  outline: 3px solid var(--gg-blue);
  outline-offset: -3px;
  border-radius: 4px;
}

/* Ricerca per misura -------------------------------------------------------- */

.gg-doc__finder-title {
  margin: 0 0 .4rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--gg-blue-deep);
}

.gg-doc__finder-text {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--gg-muted);
}

.gg-doc__finder-cta {
  justify-content: center;
  width: 100%;
}

.gg-doc__finder-cta:focus-visible {
  outline-color: var(--gg-blue);
  box-shadow: none;
}

/* Corpo articolo ------------------------------------------------------------ */

.gg-article__body {
  max-width: 68ch;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gg-ink);
}

.gg-article__body > *:first-child {
  margin-top: 0;
}

.gg-article__body p {
  margin: 0 0 1.15em;
}

/* paragrafo d'apertura, quando il testo comincia senza titolo */
.gg-article__body > p:first-child {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--gg-blue-deep);
}

/*
 * I contenuti importati possono conservare markup Word (`Mso*`) e stili inline.
 * Si neutralizzano soltanto le proprieta tipografiche dei nodi testuali: misure
 * e geometrie inline di immagini e tabelle restano intatte.
 */
.gg-article__body :where(p, li, dt, dd)[style],
.gg-article__body :where(p, li, dt, dd) :where(span, font)[style],
.gg-article__body :where(p, li, dt, dd)[class*="Mso"],
.gg-article__body :where(p, li, dt, dd) [class*="Mso"],
.gg-article__body :where(blockquote, figcaption) :where(span, font)[style] {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

.gg-article__body p[style],
.gg-article__body p[class*="Mso"] {
  margin: 0 0 1.15em !important;
  line-height: inherit !important;
  text-align: left !important;
}

/* Word separava i paragrafi con righe vuote e margini a zero: si rispetta lo zero,
   altrimenti le righe vuote raddoppiano gli spazi */
.gg-article__body p[style*="margin:0cm"],
.gg-article__body p[style*="margin: 0cm"] {
  margin: 0 0 .35em !important;
}

.gg-article__body :where(li, dt, dd)[style],
.gg-article__body :where(li, dt, dd)[class*="Mso"] {
  line-height: inherit !important;
  text-align: left !important;
}

.gg-article__body :where(strong, b) {
  font-weight: 700;
}

/* distanziatori legacy (<p><br></p>, titoli vuoti): niente vuoti d'aria */
.gg-article__body p:empty,
.gg-article__body p:has(> br:only-child),
.gg-article__body h2:empty,
.gg-article__body h2:has(> br:only-child),
.gg-article__body h3:empty,
.gg-article__body h3:has(> br:only-child) {
  display: none;
}

.gg-article__body a {
  color: var(--gg-blue);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: rgb(2 72 132 / 35%);
  text-underline-offset: .18em;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.gg-article__body a:hover,
.gg-article__body a:focus-visible {
  color: var(--gg-orange-dark);
  text-decoration-color: currentColor;
}

/* Titoli interni ------------------------------------------------------------
   Il contenuto usa h1 o h2 per le sezioni: stessa resa, e una riga sottile
   sopra segna l'inizio di ogni sezione. */

.gg-article__body :where(h1, h2, h3, h4) {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-weight: 600;
  color: var(--gg-blue-deep);
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

.gg-article__body :where(h1, h2, h3, h4)[style] {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif) !important;
  color: var(--gg-blue-deep) !important;
  text-align: left !important;
}

.gg-article__body :where(h1, h2, h3, h4) :where(span, font)[style] {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

.gg-article__body :where(h1, h2) {
  margin: 2.25rem 0 .75rem;
  padding-top: 2rem;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  border-top: 1px solid var(--gg-border);
}

.gg-article__body h3 {
  margin: 1.9rem 0 .5rem;
  font-size: 1.3125rem;
  line-height: 1.25;
}

.gg-article__body h4 {
  margin: 1.6rem 0 .4rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* il primo titolo apre il foglio: niente riga ne' spazio sopra */
.gg-article__body > :where(h1, h2, h3):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Liste ---------------------------------------------------------------------- */

.gg-article__body ul,
.gg-article__body ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}

.gg-article__body li {
  margin-bottom: .5em;
  padding-left: .25em;
}

.gg-article__body li::marker {
  color: var(--gg-orange);
  font-weight: 700;
}

/* Immagini e figure ------------------------------------------------------------ */

.gg-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gg-radius);
}

.gg-article__body figure {
  margin: 2rem 0;
}

.gg-article__body figure img {
  display: block;
  width: 100%;
  box-shadow: var(--gg-shadow-sm);
}

.gg-article__body figcaption {
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gg-muted);
  text-align: center;
}

/* figure svuotate dal recupero contenuti (commenti img-mancante): via */
.gg-article__body figure:has(a:empty),
.gg-article__body figure:empty {
  display: none;
}

/* Citazioni --------------------------------------------------------------------- */

.gg-article__body blockquote {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gg-blue-deep);
  border-left: 3px solid var(--gg-orange);
}

.gg-article__body blockquote p {
  margin-bottom: .6em;
}

/* Tabelle ------------------------------------------------------------------------ */

.gg-article__body table {
  width: 100%;
  margin: 2rem 0;
  font-size: .95rem;
  line-height: 1.5;
  border-collapse: collapse;
  border-radius: var(--gg-radius-sm);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--gg-border);
}

.gg-article__body th,
.gg-article__body td {
  padding: .7rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gg-border);
}

.gg-article__body thead th,
.gg-article__body tr:first-child th {
  font-weight: 700;
  color: #fff;
  background: var(--gg-blue-dark);
}

.gg-article__body tbody tr:nth-child(even) {
  background: var(--gg-soft);
}

.gg-article__body tbody tr:hover {
  background: #e9f2f9;
}

/* tabelle legacy larghe: scroll orizzontale controllato su mobile */
.gg-article__body table {
  display: block;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .gg-article__body table {
    display: table;
  }
}

/* Separatori ----------------------------------------------------------------------- */

.gg-article__body hr {
  margin: 2.5rem auto;
  width: 5rem;
  border: 0;
  border-top: 3px solid var(--gg-border);
  border-radius: 2px;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Pattern legacy delle pagine hub (es. /content/31-approfondimenti):
   - elenco rapido: tanti <ul> da un solo <li> con un link → chip;
   - anteprime articolo: figure + h3 + p + link "LEGGI DI PIÙ" figlio diretto
     della sezione → card con CTA.
   Le griglie gg-index-grid restano griglie anche con una voce sola (pagine marca, CMS 35-62).
   -------------------------------------------------------------------------- */

.gg-article__body > ul:not(.gg-index-grid):has(> li:only-child) {
  display: inline-flex;
  padding: 0;
  margin: 0 .5rem .75rem 0;
  list-style: none;
}

.gg-article__body > ul:not(.gg-index-grid):has(> li:only-child) > li {
  margin: 0;
  padding: .55rem 1.05rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gg-blue-dark);
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.gg-article__body > ul:not(.gg-index-grid):has(> li:only-child) > li > a {
  display: inline;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.gg-article__body > ul:not(.gg-index-grid):has(> li:only-child) > li:has(> a:hover),
.gg-article__body > ul:not(.gg-index-grid):has(> li:only-child) > li:has(> a:focus-visible) {
  color: #fff;
  background: var(--gg-blue);
  border-color: var(--gg-blue);
}

/* il blocco di chip finisce dove iniziano le anteprime (prima figure) */
.gg-article__body > figure:first-of-type {
  margin-top: 1.25rem;
}

/* link CTA figli diretti ("LEGGI DI PIÙ") — non vale per le ancore che
   contengono immagini (loghi marca, anteprime): quelle restano figure pulite */
.gg-article__body > a:not(:has(img)) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1.1rem;
  margin: 0 0 2rem;
  font-size: var(--gg-type-control);
  font-weight: 700;
  text-decoration: none;
  color: var(--gg-blue);
  background: #fff;
  border: 1.5px solid var(--gg-blue);
  border-radius: 11px;
  transition: background .15s ease, color .15s ease;
}

.gg-article__body > a:not(:has(img)):hover,
.gg-article__body > a:not(:has(img)):focus-visible {
  color: #fff;
  background: var(--gg-blue);
}

/* FAQ: le domande erano interruttori di un accordion (href="javascript:;") il cui script
   non esiste piu'. Restano domande, non pulsanti. */
.gg-article__body > a[href^="javascript"] {
  display: block;
  min-height: 0;
  margin: 1.75rem 0 .5rem;
  padding: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gg-blue-deep);
  background: none;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

/* ancore con immagini (loghi marca, anteprime): niente sottolineatura,
   l'immagine respira al centro della colonna */
.gg-article__body > a:has(img) {
  display: block;
  margin: 1.5rem 0;
  text-align: center;
  text-decoration: none;
}

.gg-article__body > a:has(img) img {
  display: inline-block;
  max-height: 120px;
  width: auto;
  box-shadow: none;
}

/* i titoli delle anteprime (h3 con link) si comportano da titoli card */
.gg-article__body > h3 > a,
.gg-article__body > h2 > a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.gg-article__body > h3 > a:hover,
.gg-article__body > h3 > a:focus-visible,
.gg-article__body > h2 > a:hover,
.gg-article__body > h2 > a:focus-visible {
  color: var(--gg-orange-dark);
}

/* Legenda della ricerca (CMS 7) --------------------------------------------
   La sigla del fianco scomposta nei campi della ricerca, poi i campi come
   termine e definizione, con il valore dell'esempio accanto. */

.gg-article__body .gg-legend-code {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .75rem 1.1rem;
  margin: 1.25rem 0 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--gg-blue-glow), var(--gg-blue-surface);
  border-radius: var(--gg-radius);
}

.gg-legend-code__part {
  display: grid;
  gap: .45rem;
}

.gg-legend-code__part strong,
.gg-legend-code__sep {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
}

.gg-legend-code__part strong {
  padding-bottom: .35rem;
  border-bottom: 3px solid var(--gg-orange);
}

.gg-legend-code__part > span {
  font-size: var(--gg-type-meta);
  line-height: 1.2;
  color: rgb(255 255 255 / 76%);
}

.gg-legend-code__sep {
  margin-inline: -.5rem;
  color: rgb(255 255 255 / 45%);
}

.gg-article__body .gg-legend {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  margin: .5rem 0 1.5rem;
}

.gg-legend > dt,
.gg-legend > dd {
  margin: 0;
  padding-block: .95rem;
  border-top: 1px solid var(--gg-border);
}

.gg-legend > dt {
  padding-right: 1rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gg-blue-deep);
}

.gg-legend__example {
  display: inline-block;
  margin-right: .45rem;
  padding: .05rem .5rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gg-blue);
  background: var(--gg-soft);
  border: 1px solid var(--gg-border);
  border-radius: 6px;
}

.gg-article__body .gg-legend-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.5rem;
  margin: 1rem 0 1.5rem;
}

.gg-article__body .gg-legend-tables table {
  display: table;
  margin: 0;
}

.gg-legend-tables caption {
  padding: 0 0 .5rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gg-blue-deep);
  text-align: left;
  caption-side: top;
}

@media (max-width: 575.98px) {
  /* la sigla resta su una riga: e' il punto della legenda */
  .gg-article__body .gg-legend-code {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .5rem;
    margin-inline: calc(var(--gg-doc-pad) * -.5);
    padding: 1.1rem .9rem;
  }

  .gg-legend-code__part strong,
  .gg-legend-code__sep {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
  }

  .gg-legend-code__part > span {
    font-size: .6875rem;
  }

  .gg-legend-code__sep {
    margin-inline: -.35rem;
  }

  /* con la misura attenuata (CMS 16) la misura sta sopra, carico e velocita' sotto */
  .gg-article__body .gg-legend-code:has(.gg-legend-code__part--dim) {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem 1.5rem;
  }

  .gg-legend-code__part--dim {
    flex-basis: 100%;
  }

  .gg-legend-code__part strong {
    white-space: nowrap;
  }

  .gg-article__body .gg-legend {
    grid-template-columns: 1fr;
  }

  .gg-legend > dd {
    padding-top: 0;
    border-top: 0;
  }
}

/* la misura attenuata quando la pagina parla solo di una parte della sigla (CMS 16) */
.gg-legend-code__part--dim strong {
  color: rgb(255 255 255 / 50%);
  border-bottom-color: rgb(255 255 255 / 18%);
}

/* Tabelle degli indici (CMS 16): coppie valore / significato in griglia, i valori da auto
   in evidenza. Una griglia al posto di una tabella da 70 righe: si legge a colpo d'occhio. */
.gg-article__body .gg-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: .5rem;
  margin: 1rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.gg-article__body .gg-index-grid > li {
  display: grid;
  gap: .1rem;
  margin: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--gg-border);
  border-radius: 10px;
}

.gg-index-grid strong {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gg-muted);
}

.gg-index-grid span {
  font-size: var(--gg-type-meta);
  line-height: 1.3;
  color: var(--gg-muted);
}

.gg-article__body .gg-index-grid > li.is-common {
  background: #eaf2f9;
  border-color: #b8d0e6;
}

.gg-index-grid .is-common strong {
  color: var(--gg-blue-deep);
}

.gg-index-grid .is-common span {
  color: var(--gg-ink);
}

@media (max-width: 575.98px) {
  .gg-article__body .gg-index-grid {
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: .4rem;
  }

  .gg-article__body .gg-index-grid > li {
    padding: .45rem .55rem;
  }

  .gg-index-grid span {
    font-size: .75rem;
    white-space: nowrap;
  }
}

/* domande e risposte: la domanda sopra, la risposta sotto, a tutta misura */
.gg-article__body .gg-legend--faq {
  grid-template-columns: minmax(0, 1fr);
}

.gg-legend--faq > dd {
  padding-top: 0;
  border-top: 0;
}

/* Liste numerate del contenuto: il padre toglie i numeri, ma un elenco numerato e' una
   sequenza di passi e il numero e' l'informazione. */
.gg-article__body ol {
  counter-reset: gg-passo;
  padding-left: 0;
  list-style: none;
}

.gg-article__body ol > li {
  position: relative;
  padding-left: 2.4rem;
  counter-increment: gg-passo;
}

.gg-article__body ol > li::before {
  content: counter(gg-passo);
  position: absolute;
  top: .05em;
  left: 0;
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--gg-blue);
  border-radius: 50%;
  place-items: center;
}

/* un elenco con una voce sola non e' una sequenza (CMS 14): niente «1» isolato */
.gg-article__body ol > li:only-child {
  padding-left: 0;
}

.gg-article__body ol > li:only-child::before {
  display: none;
}

/* griglia di sigle che portano a una pagina (CMS 25, modelli per la pioggia): tutta la cella e'
   il link */
.gg-article__body .gg-index-grid.gg-index-grid--links {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

@media (max-width: 575.98px) {
  .gg-article__body .gg-index-grid.gg-index-grid--links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gg-article__body .gg-index-grid--links > li {
  padding: 0;
}

.gg-article__body .gg-index-grid--links a {
  display: grid;
  align-content: start;
  gap: .1rem;
  height: 100%;
  padding: .7rem .85rem;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color .15s ease;
}

.gg-index-grid--links strong {
  font-size: 1.125rem;
  color: var(--gg-blue);
}

/* nei link la didascalia e' una frase (CMS 18, «Semperit, gruppo Continental»): su mobile va a capo
   invece di uscire dalla cella come le sigle brevi */
.gg-article__body .gg-index-grid--links span {
  white-space: normal;
}

.gg-article__body .gg-index-grid--links a:hover {
  background: var(--gg-soft);
}

.gg-article__body .gg-index-grid--links a:hover strong {
  color: var(--gg-blue-deep);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.gg-article__body .gg-index-grid--links a:focus-visible {
  outline: 3px solid var(--gg-blue);
  outline-offset: 2px;
}

/* il logo al posto del nome (CMS 34, sottomarche): stessa altezza per loghi di proporzioni diverse */
.gg-article__body .gg-index-grid--loghi > li {
  background: #fff;
}

.gg-article__body .gg-index-grid--loghi a {
  justify-items: center;
  gap: .4rem;
  text-align: center;
}

.gg-article__body .gg-index-grid--loghi img {
  width: 100%;
  max-width: 10rem;
  height: 3.5rem;
  margin: 0;
  object-fit: contain;
}

.gg-article__body .gg-index-grid--loghi span {
  font-size: .8125rem;
}

/* indice delle guide (CMS 31): la foto e' la carta. Il titolo sta sulla foto, nella zona blu che
   le scene hanno gia' a sinistra o in basso; ogni gruppo apre con la sua guida principale in largo
   (scena intera 768/1024) e continua con riquadri ritagliati sul soggetto (cms-scene/card/, 480x300).
   Griglia a 12 colonne: 2 o 4 riquadri vanno a due per riga, 3 a tre, cosi' nessuna riga resta zoppa. */
.gg-article__body .gg-index-grid.gg-index-grid--foto {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .6rem;
}

.gg-article__body .gg-index-grid--foto > li {
  grid-column: span 4;
  padding: 0;
  overflow: hidden;
  background: var(--gg-ink);
  border: 0;
}

.gg-article__body .gg-index-grid--foto:has(> .is-lead):has(> li:nth-child(3):last-child) > li:not(.is-lead),
.gg-article__body .gg-index-grid--foto:has(> .is-lead):has(> li:nth-child(5):last-child) > li:not(.is-lead),
.gg-article__body .gg-index-grid--foto:not(:has(> .is-lead)):has(> li:nth-child(2):last-child) > li,
.gg-article__body .gg-index-grid--foto:not(:has(> .is-lead)):has(> li:nth-child(4):last-child) > li {
  grid-column: span 6;
}

.gg-article__body .gg-index-grid--foto > li.is-lead {
  grid-column: 1 / -1;
}

.gg-article__body .gg-index-grid--foto a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 0;
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  color: #fff;
  isolation: isolate;
}

.gg-article__body .gg-index-grid--foto .is-lead a {
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 26rem);
  aspect-ratio: 21 / 9;
  align-content: center;
}

.gg-article__body .gg-index-grid--foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: right center;
}

/* velo per la leggibilita': dal basso sui riquadri, da sinistra sulla guida principale */
.gg-article__body .gg-index-grid--foto a::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(to top, rgb(6 24 46 / 92%) 0%, rgb(6 24 46 / 55%) 42%, rgb(6 24 46 / 0%) 72%);
}

.gg-article__body .gg-index-grid--foto .is-lead a::after {
  background: linear-gradient(to right, rgb(6 24 46 / 90%) 0%, rgb(6 24 46 / 62%) 38%, rgb(6 24 46 / 0%) 68%);
}

.gg-article__body .gg-index-grid--foto strong {
  grid-row: 2;
  padding: 0 .9rem;
  font-size: 1.125rem;
  line-height: 1.15;
  color: #fff;
}

.gg-article__body .gg-index-grid--foto span {
  grid-row: 3;
  padding: .2rem .9rem .8rem;
  color: rgb(255 255 255 / 78%);
}

.gg-article__body .gg-index-grid--foto .is-lead strong {
  grid-row: auto;
  padding: 0 1.5rem;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}

.gg-article__body .gg-index-grid--foto .is-lead span {
  grid-row: auto;
  padding: .35rem 1.5rem 0;
  font-size: .9375rem;
}

.gg-article__body .gg-index-grid--foto a:hover {
  background: transparent;
}

.gg-article__body .gg-index-grid--foto a:hover strong {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--gg-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.gg-article__body .gg-index-grid--foto a:focus-visible {
  outline-offset: -3px;
  outline-color: var(--gg-orange);
}

@media (max-width: 575.98px) {
  .gg-article__body .gg-index-grid.gg-index-grid--foto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gg-article__body .gg-index-grid--foto > li,
  .gg-article__body .gg-index-grid--foto:has(> .is-lead):has(> li:nth-child(3):last-child) > li:not(.is-lead),
  .gg-article__body .gg-index-grid--foto:has(> .is-lead):has(> li:nth-child(5):last-child) > li:not(.is-lead),
  .gg-article__body .gg-index-grid--foto:not(:has(> .is-lead)):has(> li:nth-child(2):last-child) > li,
  .gg-article__body .gg-index-grid--foto:not(:has(> .is-lead)):has(> li:nth-child(4):last-child) > li {
    grid-column: span 1;
  }

  /* numero dispari di riquadri piccoli: l'ultimo prende la riga intera invece di restare solo
     (con la guida principale in testa i piccoli partono dal secondo posto) */
  .gg-article__body .gg-index-grid--foto:has(> .is-lead) > li:last-child:nth-child(even),
  .gg-article__body .gg-index-grid--foto:not(:has(> .is-lead)) > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .gg-article__body .gg-index-grid--foto:has(> .is-lead) > li:last-child:nth-child(even) a,
  .gg-article__body .gg-index-grid--foto:not(:has(> .is-lead)) > li:last-child:nth-child(odd) a {
    aspect-ratio: 2 / 1;
  }

  .gg-article__body .gg-index-grid--foto .is-lead a {
    aspect-ratio: 16 / 10;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
  }

  .gg-article__body .gg-index-grid--foto .is-lead a::after {
    background: linear-gradient(to top, rgb(6 24 46 / 92%) 0%, rgb(6 24 46 / 50%) 50%, rgb(6 24 46 / 0%) 80%);
  }

  .gg-article__body .gg-index-grid--foto .is-lead strong,
  .gg-article__body .gg-index-grid--foto .is-lead span {
    padding-inline: .9rem;
  }

  .gg-article__body .gg-index-grid--foto .is-lead span {
    padding-bottom: .9rem;
  }

  .gg-article__body .gg-index-grid--foto strong {
    font-size: 1rem;
  }

  /* sul telefono il riquadro piccolo tiene solo il titolo: la riga sotto e' nella pagina guida */
  .gg-article__body .gg-index-grid--foto > li:not(.is-lead) span {
    display: none;
  }

  .gg-article__body .gg-index-grid--foto > li:not(.is-lead) strong {
    padding-bottom: .75rem;
  }
}

.gg-article__body .gg-index-grid--foto img,
.gg-article__body .gg-steps img {
  border-radius: 0;
}

/* i cinque passi della guida all'acquisto (CMS 32): e' davvero una sequenza, quindi il numero resta,
   ma sta sulla foto; ogni passo porta alla sua sezione. Sul telefono la fila scorre di lato. */
.gg-article__body ol.gg-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  margin: 1.25rem 0 2rem;
}

.gg-article__body ol.gg-steps > li {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--gg-ink);
  border-radius: 10px;
}

.gg-article__body ol.gg-steps > li::before {
  top: .6rem;
  left: .6rem;
  z-index: 1;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1.0625rem;
  color: var(--gg-ink);
  background: var(--gg-orange);
}

.gg-article__body .gg-steps a {
  position: relative;
  display: grid;
  height: 100%;
  aspect-ratio: 3 / 4;
  align-content: end;
  padding: .7rem;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.gg-article__body .gg-steps img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.gg-article__body .gg-steps a::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(to top, rgb(6 24 46 / 90%) 0%, rgb(6 24 46 / 40%) 45%, rgb(6 24 46 / 5%) 75%);
}

.gg-article__body .gg-steps strong {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.15;
}

.gg-article__body .gg-steps a:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--gg-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.gg-article__body .gg-steps a:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: -3px;
}

/* Le sezioni raggiunte dai passi non finiscono sotto l'intestazione fissa: ci pensa gia'
   Hummingbird, che mette su <html> scroll-padding-top = altezza dell'header + 16px. Qui c'era
   anche uno scroll-margin-top di 6rem, che si sommava: il titolo arrivava ~100px sotto l'header
   (tests/e2e/pagine-cms.spec.ts, «telefono: indice chiuso in cima»). Tolto il 25/09/2026. */

@media (max-width: 575.98px) {
  .gg-article__body ol.gg-steps {
    grid-template-columns: none;
    grid-auto-columns: 38%;
    grid-auto-flow: column;
    margin-inline: calc(var(--gg-doc-pad, 1rem) * -1);
    padding: 0 var(--gg-doc-pad, 1rem) .25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gg-doc-pad, 1rem);
    scrollbar-width: none;
  }

  .gg-article__body ol.gg-steps > li {
    scroll-snap-align: start;
  }
}

/* i tre valori dell'etichetta UE con le icone ufficiali, le stesse della scheda prodotto (CMS 32) */
.gg-article__body .gg-eu-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.gg-article__body .gg-eu-guide > li {
  display: grid;
  align-content: start;
  gap: .3rem;
  margin: 0;
  padding: 1rem;
  background: var(--gg-soft);
  border-radius: 10px;
}

.gg-article__body .gg-eu-guide img {
  width: auto;
  height: 3.75rem;
  margin-bottom: .35rem;
  border-radius: 0;
}

.gg-article__body .gg-eu-guide strong {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--gg-ink);
}

.gg-article__body .gg-eu-guide span {
  font-size: var(--gg-type-meta);
  line-height: 1.4;
  color: var(--gg-muted);
}

@media (max-width: 575.98px) {
  .gg-article__body .gg-eu-guide {
    grid-template-columns: none;
  }

  .gg-article__body .gg-eu-guide > li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: .9rem;
  }

  .gg-article__body .gg-eu-guide img {
    grid-row: span 2;
    width: 100%;
    height: auto;
    margin: 0;
  }
}

/* due casi alla pari (CMS 21, con il cerchio o senza): stessa colonna, nessun segno + o - */
.gg-procon.gg-procon--pari .gg-procon__col {
  border-top-color: var(--gg-blue);
}

/* piu' specifico della regola .gg-procon li::before, che nel file viene dopo */
.gg-procon.gg-procon--pari li::before {
  content: "";
  top: .6rem;
  left: .35rem;
  font-size: 1rem;
  width: .4rem;
  height: .4rem;
  background: var(--gg-blue);
  border-radius: 50%;
}

/* sigle con un nome accanto (CMS 15, marcature runflat): celle piu' larghe */
.gg-article__body .gg-index-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

/* Pro e contro (CMS 15): un confronto, quindi due colonne affiancate con il segno che dice
   da che parte sta ogni voce. */
.gg-article__body .gg-procon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
  margin: 1rem 0 1.75rem;
}

.gg-procon__col {
  padding: 1.1rem 1.25rem .4rem;
  background: var(--gg-soft);
  border-top: 3px solid var(--gg-blue);
  border-radius: 4px 4px var(--gg-radius-sm) var(--gg-radius-sm);
}

.gg-procon__col--contro {
  border-top-color: var(--gg-orange);
}

.gg-article__body .gg-procon h3 {
  margin: 0 0 .6rem;
  font-size: 1.1875rem;
}

.gg-article__body .gg-procon ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gg-article__body .gg-procon li {
  position: relative;
  margin: 0 0 .75rem;
  padding-left: 1.5rem;
  line-height: 1.55;
}

.gg-procon li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.gg-procon__col--pro li::before {
  content: "+";
  color: var(--gg-blue);
}

.gg-procon__col--contro li::before {
  content: "\2212";
  color: var(--gg-orange-dark);
}

/* Indice di categoria (templates/cms/category.tpl) ------------------------ */

.gg-doc-hero--index,
.gg-doc--index {
  --gg-doc-main: 64rem;
}

@media (min-width: 1200px) {
  .gg-doc-hero--index,
  .gg-doc--index {
    grid-template-columns: minmax(0, var(--gg-doc-main));
  }
}

.gg-doc-index__title {
  margin: 2.25rem 0 .75rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--gg-blue-deep);
}

.gg-doc-index__title:first-child {
  margin-top: 0;
}

.gg-doc-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gg-doc-index--brands {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.gg-doc-index__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding-block: .6rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gg-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--gg-border);
  transition: color .15s ease, border-color .15s ease;
}

.gg-doc-index__link:hover {
  color: var(--gg-blue-deep);
  border-bottom-color: var(--gg-orange);
}

.gg-doc-index__link:focus-visible {
  outline: 3px solid var(--gg-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile --------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .gg-article__body {
    font-size: 1rem;
  }

  .gg-article__body > p:first-child {
    font-size: 1.0625rem;
  }

  .gg-doc {
    border-radius: 18px;
  }
}

/* ==========================================================================
   Pagina /produttori (brand wall)
   Il nome testuale sotto il logo è ridondante quando il logo c'è: lo togliamo
   con font-size: 0 (il link stretched-link resta attivo e la card cliccabile).
   Eccezione: le card SENZA logo (placeholder it-default) tengono il nome,
   è la loro unica etichetta.
   ========================================================================== */

#manufacturer .brand__infos {
  font-size: 0;
  margin: 0;
}

#manufacturer .brand:has(.brand__img[src*="it-default"]) .brand__infos {
  font-size: initial;
}
/* Gruppi marchi CMS: wrapper semantico esplicito, senza euristiche sulle foto editoriali. */
.gg-brand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem .75rem;
  width: 100%;
  margin: .75rem 0 1.25rem;
}

.gg-brand-grid > a:has(img),
.gg-brand-grid > img,
.gg-brand-grid__item {
  min-width: 0;
}

.gg-brand-grid > a:has(img),
.gg-brand-grid > img {
  min-height: 7rem;
  margin: 0;
  padding: .75rem;
}

.gg-brand-grid > a:has(img) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gg-brand-grid > a > figure {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
}

.gg-brand-grid > a img,
.gg-brand-grid > img,
.gg-brand-grid__item > img {
  display: block;
  width: 100%;
  height: 4.5rem;
  max-height: 4.5rem;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.gg-brand-grid__item {
  display: grid;
  grid-template-rows: 5.5rem auto;
  align-content: start;
}

.gg-brand-grid__item > img {
  margin: 0;
  padding: .5rem .75rem;
}

.gg-brand-grid__item > a {
  display: flex;
  min-height: 2.75rem;
  padding: .45rem .35rem;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.gg-brand-grid > a:not(:has(img)) {
  grid-column: 1 / -1;
  min-height: 2.75rem;
  justify-self: start;
}

@media (max-width: 991.98px) {
  .gg-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .gg-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .5rem;
  }
}

/* ==========================================================================
   Scheda prodotto — change `refactor-product-page-ux`
   L'analisi competitor del 29/08/2026 ha trovato la scheda muta su tre delle
   quattro domande che fanno comprare. Questi blocchi sono le risposte.
   Il colore che porta significato vive solo nelle scale UE: tutto il resto
   resta sulla palette del marchio, o l'evidenza si perde nel rumore.
   ========================================================================== */

/* La marca: riconoscibile prima di essere letta, e sopra il modello — fra titolo e misura
   spezzava la lettura del dato che conta. Vive dentro l'H1 (21/09/2026), quindi il distacco di
   riga lo fa `display: block`: e' uno `span`, perche' un `h1` accetta solo contenuto di frase. */
.ggo-product-brand {
  display: block;
  margin-block: 0 .5rem;
  line-height: 1.2;
}

.ggo-product-brand__link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.ggo-product-brand__name {
  color: var(--gg-blue);
  font-size: .875rem;
  font-weight: 700;
}

/* I modelli di una marca: un elenco di link, non una griglia di schede. Deve stare compatto
   perche' Hankook ne ha 80, e deve restare leggibile perche' e' anche la mappa con cui Google
   raggiunge quelle pagine. */
.ggo-brand-models {
  margin: 1.5rem 0 2rem;
}

.ggo-brand-models__title {
  margin: 0 0 .75rem;
  color: var(--gg-blue-deep);
  font-size: 1.125rem;
  font-weight: 700;
}

.ggo-brand-models__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ggo-brand-models__list a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--gg-border, #d8dee8);
  border-radius: 999px;
  color: var(--gg-blue);
  font-size: .875rem;
  text-decoration: none;
}

.ggo-brand-models__list a:hover,
.ggo-brand-models__list a:focus-visible {
  border-color: var(--gg-blue);
  background: #f4f7fc;
}

.ggo-brand-models__count {
  color: var(--gg-muted);
  font-size: .8125rem;
}

/* «Tutte le misure di X»: il link che porta alla pagina di modello. Discreto, perche' non e' la
   chiamata all'azione della scheda — ma presente su tutte le schede, perche' e' la maglia che
   tiene in piedi le pagine di modello. */
.ggo-product-model-link {
  margin: -.25rem 0 1rem;
  font-size: .9375rem;
}

.ggo-product-model-link a {
  color: var(--gg-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* la guida alla marca segue «Tutte le misure di»: stessa voce, a ridosso */
.ggo-product-model-link + .ggo-product-model-link--guide {
  margin-top: -.6rem;
}

.ggo-size-signature__value {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem;
  padding-block-end: .625rem;
  color: var(--gg-blue-deep);
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  line-height: 1;
}

.ggo-size-signature__value::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: clamp(2.75rem, 30%, 4.5rem);
  height: .1875rem;
  content: "";
  background: var(--gg-orange);
  border-radius: 999px;
}

.ggo-size-signature__part[data-part="diameter"],
.ggo-size-signature__part[data-part="load"] {
  margin-inline-start: .5ch;
}

.ggo-size-signature__part {
  white-space: nowrap;
}

.ggo-size-signature__sep {
  color: var(--gg-muted);
  font-weight: 400;
}

.ggo-product-context {
  display: flex;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.ggo-product-context__item {
  display: flex;
  gap: .35rem;
  align-items: baseline;
}

.ggo-product-context__item dt {
  color: var(--gg-muted);
  font-size: var(--gg-type-label);
}

.ggo-product-context__item dd {
  margin: 0;
  color: var(--gg-ink);
  font-size: var(--gg-type-control);
  font-weight: 700;
}

.ggo-size-guide__lead {
  max-width: 58ch;
  margin: -.5rem 0 1rem;
  color: var(--gg-muted);
  font-size: var(--gg-type-control);
}

/* Scheda — versione A 23/09/2026: la misura come e' stampata sul fianco, in Barlow su blu, con
 * ogni parte sottolineata in arancio; la legenda sotto usa le stesse colonne, cosi' ogni
 * spiegazione cade sotto il proprio numero. */
.ggo-size-code {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 1.5rem 0 1.25rem;
  color: #fff;
  background: var(--gg-blue-glow), var(--gg-blue-surface);
  border-radius: var(--gg-radius) var(--gg-radius) 0 0;
}

.ggo-size-code__part {
  position: relative;
  display: flex;
  justify-content: center;
  padding-inline: .5rem;
}

.ggo-size-code__part b {
  padding-bottom: .35rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  border-bottom: 3px solid var(--gg-orange);
}

.ggo-size-code__part--after-slash::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: rgb(255 255 255 / 45%);
  content: "/";
  transform: translateX(-50%);
}

.ggo-size-signature__legend {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--gg-border);
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-sm);
}

.ggo-size-code + .ggo-size-signature__legend {
  border-top: 0;
  border-radius: 0 0 var(--gg-radius) var(--gg-radius);
}

.ggo-size-signature__entry {
  min-width: 0;
  padding: .875rem .75rem;
  text-align: center;
  background: #fff;
}

.ggo-size-signature__entry dt {
  margin-bottom: .35rem;
  color: var(--gg-muted);
  font-size: var(--gg-type-label);
  font-weight: 500;
}

.ggo-size-signature__entry dd {
  margin: 0;
  color: var(--gg-ink);
  font-size: var(--gg-type-control);
  font-weight: 600;
}

/* Le marcature tecniche restano testo esplicito, non una collana di pill. */
.ggo-product-marks {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.ggo-product-marks__item {
  display: flex;
  gap: .35rem;
  align-items: baseline;
  font-size: var(--gg-type-label);
}

.ggo-product-marks__item strong {
  color: var(--gg-blue-deep);
  font-weight: 600;
}

.ggo-product-marks__item span {
  color: var(--gg-muted);
}

/* Sigla con guida (23/09/2026): tutta la voce e' il link, il «?» dice che c'e' una spiegazione */
.ggo-product-marks__link {
  display: inline-flex;
  gap: .35rem;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

.ggo-product-marks__link span:not(.ggo-product-marks__help) {
  text-decoration: underline dotted;
  text-underline-offset: .2em;
}

.ggo-product-marks__help {
  display: inline-grid;
  width: 1.1rem;
  height: 1.1rem;
  align-self: center;
  color: var(--gg-blue);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid currentcolor;
  border-radius: 50%;
  place-items: center;
}

.ggo-product-marks__link:hover span:not(.ggo-product-marks__help),
.ggo-product-marks__link:focus-visible span:not(.ggo-product-marks__help) {
  color: var(--gg-blue);
}

.ggo-size-guide__more {
  margin: 1rem 0 0;
  color: var(--gg-muted);
  font-size: var(--gg-type-meta);
}

.ggo-size-guide__more a {
  color: var(--gg-blue);
  font-weight: 600;
}

/* I pittogrammi UE portano al blocco che li spiega. */
.ggo-eu-label__anchor {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  gap: .25rem;
  color: inherit;
  text-decoration: none;
}

.ggo-eu-label__anchor:hover .ggo-eu-label__value,
.ggo-eu-label__anchor:focus-visible .ggo-eu-label__value {
  color: var(--gg-blue);
  text-decoration: underline;
}

/* L'etichetta UE spiegata: l'unico punto in cui il colore porta significato. */
.ggo-eu-explained {
  margin: 0;
  padding: 0;
  scroll-margin-block-start: 5rem;
}

.ggo-eu-explained__intro {
  margin: 0 0 1rem;
  max-inline-size: 60ch;
  color: var(--gg-muted);
  font-size: var(--gg-type-control);
}

.ggo-eu-explained__grid {
  display: grid;
  gap: 0;
}

.ggo-eu-explained__item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--gg-border);
  scroll-margin-block-start: 5rem;
}

.ggo-eu-explained__item:first-child {
  padding-top: 0;
}

.ggo-eu-explained__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ggo-eu-explained__item-title {
  margin: 0 0 .2rem;
  color: var(--gg-ink);
  font-size: var(--gg-type-control);
  font-weight: 600;
  letter-spacing: 0;
}

.ggo-eu-explained__value {
  margin: 0 0 .5rem;
  color: var(--gg-blue);
  font-size: 1.375rem;
  font-weight: var(--gg-type-strong-weight);
}

.ggo-eu-explained__text {
  margin: .6rem 0 0;
  color: var(--gg-muted);
  font-size: var(--gg-type-meta);
  line-height: 1.5;
}

.ggo-eu-explained__more {
  margin: 1rem 0 0;
  font-size: var(--gg-type-meta);
}

/* L'etichetta a sinistra, le parole a destra: l'immagine dice quanto vale il pneumatico,
   il testo dice che cosa cambia per chi guida. Le scale ad hoc che stavano qui sono state
   sostituite dall'etichetta disegnata nel layout del regolamento (`eu-label-card.tpl`). */
.ggo-eu-explained__layout {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.ggo-eu-card {
  margin: 0;
}

/* Vettoriale: nitida a ogni densita' di schermo senza servire un file. */
.ggo-eu-card__svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 15rem;
  block-size: auto;
}

/* La dicitura di provenienza resta una riga quieta a piede della sezione. */
.ggo-eu-registry {
  margin: 1rem 0 0;
  padding-top: .75rem;
  max-inline-size: 52ch;
  color: var(--gg-muted);
  font-size: var(--gg-type-label);
  line-height: 1.45;
  border-top: 1px solid var(--gg-border);
}

.ggo-eu-explained__more a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* Cambio misura: il configuratore che c'e' gia', puntato su questa misura. */
.ggo-size-switch {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--gg-border);
}

.ggo-size-switch__title {
  margin: 0 0 .25rem;
  color: var(--gg-blue-deep);
  font-size: 1.125rem;
  font-weight: var(--gg-type-heading-weight);
}

.ggo-size-switch__lead {
  margin: 0 0 .85rem;
  max-inline-size: 60ch;
  color: var(--gg-muted);
  font-size: var(--gg-type-control);
}

.ggo-size-switch :where(button, select, input, .ts-control) {
  min-height: 44px;
}

/* La misura nella card del listato: fuori dal titolo, cosi' il troncamento a
   due righe non se la mangia quando il nome del modello e' lungo. */
.ggo-product-card__size {
  margin: .1rem 0 .35rem;
}

/* Sotto i 46rem l'etichetta passa sopra i testi invece di stringersi accanto a loro. */
@media (max-width: 46rem) {
  .ggo-size-signature__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .ggo-size-signature__entry {
    text-align: left;
  }

  .ggo-eu-explained__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .ggo-size-signature__value {
    font-size: 1.75rem;
  }

  .ggo-size-signature__legend {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Avviso di vetrina: reso da `gommeshowcase` sull'hook nativo `displayBanner`,
   incapsulato dal tema in `.header-banner`. Fascia sottile, contrasto AAA, nessun
   colore d'allarme: informa, non allerta. */
.gg-showcase-notice {
  padding: .5rem 1rem;
  background: var(--gg-blue-glow), var(--gg-blue-deep);
  color: #fff;
  text-align: center;
}

.gg-showcase-notice__text {
  display: inline-block;
  max-width: 60ch;
  font-size: var(--gg-type-meta);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
}

@media (width <= 575.98px) {
  .gg-showcase-notice {
    padding: .45rem .75rem;
  }

  .gg-showcase-notice__text {
    font-size: var(--gg-type-label);
  }
}

/* ---------------------------------------------------------------------------
 * gommealternatives — teaser ancora di prezzo sotto la buy box ed evidenze di
 * fascia nel blocco «Alternative nella stessa misura» (change
 * `add-size-alternatives`, iterazione UX 2026-09-08). Il markup è del modulo;
 * qui c'e' solo la presentazione, sulle convenzioni pill del tema.
 * ------------------------------------------------------------------------- */

/* Confronto di alternative — change `update-size-alternatives-comparison` (23/09/2026): fino a
 * quattro schede, ognuna con il motivo in testa. Una riga su desktop, scorrevole su mobile. */
.ggo-alternatives__intro {
  margin: -.5rem 0 1.25rem;
  color: var(--gg-muted);
}

.ggo-alternatives__list {
  display: grid;
  grid-template-columns: repeat(var(--ggo-alt-cols, 4), minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ggo-alternatives__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ggo-alternatives__reason {
  display: grid;
  gap: .1rem;
  min-height: 3.5rem;
  padding: .6rem .8rem;
  margin: 0 0 -1px;
  color: #fff;
  background: var(--gg-blue-glow), var(--gg-blue-surface);
  border-radius: 15px 15px 0 0;
}

.ggo-alternatives__reason strong {
  font-size: .9375rem;
  line-height: 1.25;
}

.ggo-alternatives__reason span {
  font-size: var(--gg-type-meta);
  color: #ffc98a;
}

.ggo-alternatives__item .product-miniature {
  flex: 1;
}

.ggo-alternatives__item .product-miniature__inner {
  height: 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ggo-alternatives__more {
  margin: 1.5rem 0 0;
}

/* Il rimando a tutta la misura come ultima scheda della riga, quando le alternative sono meno di
   quattro: stesso passo e stessa altezza delle schede, in blu come la testata dei motivi. */
/* Foto: la gomma indicata dal guanto del gommista, gia' usata dalla hero (32 KB in AVIF). Non
   porta nessuna misura stampata, quindi vale su ogni scheda. Il testo sta in basso, su una
   sfumatura blu che lo tiene leggibile sopra la foto. */
.ggo-alternatives__all {
  display: flex;
  min-width: 0;
  min-height: 22rem;
  flex-direction: column;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1.5rem 1.25rem;
  overflow: hidden;
  color: #fff;
  background-color: var(--gg-blue-surface);
  background-image:
    linear-gradient(to bottom, rgb(5 43 73 / 0%) 25%, rgb(5 43 73 / 85%) 58%, var(--gg-blue-surface) 78%),
    url("../img/hero/scelta-guidata-v1-768.webp");
  background-image:
    linear-gradient(to bottom, rgb(5 43 73 / 0%) 25%, rgb(5 43 73 / 85%) 58%, var(--gg-blue-surface) 78%),
    image-set(url("../img/hero/scelta-guidata-v1-768.avif") type("image/avif"), url("../img/hero/scelta-guidata-v1-768.webp") type("image/webp"));
  background-repeat: no-repeat;
  background-position: center, 42% 0;
  background-size: 100% 100%, auto 62%;
  border-radius: 15px;
}

.ggo-alternatives__all-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
  color: #fff;
  text-decoration: none;
}

.ggo-alternatives__all-count {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
}

.ggo-alternatives__all-label {
  font-size: 1rem;
  line-height: 1.35;
  color: #c9d7e4;
}

.ggo-alternatives__all-cta {
  align-self: flex-start;
  margin-top: 1rem;
  padding: .7rem 1.1rem;
  font-weight: 700;
  color: var(--gg-blue-deep);
  background: var(--gg-orange);
  border-radius: 11px;
}

.ggo-alternatives__all-link:hover .ggo-alternatives__all-cta,
.ggo-alternatives__all-link:focus-visible .ggo-alternatives__all-cta {
  background: #ff9828;
}

.ggo-alternatives__all-link:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 4px;
  border-radius: 8px;
}

.ggo-alternatives__all-season {
  font-size: var(--gg-type-meta);
  font-weight: 600;
  color: #ffc98a;
}

.ggo-alternatives__allseason {
  margin: .75rem 0 0;
  font-size: var(--gg-type-control);
}

.ggo-alternatives__allseason a {
  color: var(--gg-blue);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .ggo-alternatives__list {
    grid-auto-columns: minmax(15rem, 72%);
    grid-auto-flow: column;
    grid-template-columns: none;
    padding-bottom: .5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }

  .ggo-alternatives__item,
  .ggo-alternatives__all {
    scroll-snap-align: start;
  }
}

/* «Vai subito al pagamento»: azione secondaria, non compete con la CTA del carrello. */
.ggo-buy-box__subito {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: .6rem;
    padding: .5rem;
    border: 0;
    background: none;
    color: #1b4f72;
    font-size: .95rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ggo-buy-box__subito:hover {
    color: #0f3d5c;
}

.ggo-buy-box__subito[disabled] {
    opacity: .6;
    cursor: default;
}

/* Mentre si va al pagamento il popup del carrello non deve comparire. */
body.ggo-verso-il-pagamento #blockcart-modal,
body.ggo-verso-il-pagamento .modal-backdrop {
    display: none !important;
}

/* --- Finestra «Aggiunto al carrello»: la stessa voce del carrello e del checkout (23/09/2026) ---
   Spunta verde, prodotto su bianco, riepilogo come lo scontrino, un solo arancio: il pulsante che
   porta al pagamento, col lucchetto. «Continua lo shopping» pesa come un link: e' un'uscita. */

#blockcart-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgb(3 20 40 / 55%);
}

#blockcart-modal .modal-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid #e3ebf2;
}

#blockcart-modal .blockcart-modal__title {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gg-ink, #10253a);
}

#blockcart-modal .blockcart-modal__title-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  color: #fff;
  background: #17784a;
  border-radius: 999px;
  place-items: center;
}

#blockcart-modal .modal-body {
  padding: 1.5rem;
}

#blockcart-modal .blockcart-modal__image {
  padding: .4rem;
  background: #fff;
  border: 1px solid #d3dfea;
  border-radius: 14px;
}

#blockcart-modal .blockcart-modal__name {
  margin-bottom: .35rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gg-ink, #10253a);
}

#blockcart-modal .blockcart-modal__price {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gg-ink, #10253a);
}

#blockcart-modal .blockcart-modal__quantity,
#blockcart-modal .blockcart-modal__property {
  font-size: .875rem;
  color: #5a6b7d;
}

#blockcart-modal .blockcart-modal__summary {
  padding: 1rem 1.1rem;
  background: #eef3f8;
  border-radius: 14px;
}

#blockcart-modal .blockcart-modal__nb-products {
  margin-bottom: .5rem;
  font-size: .8125rem;
  color: #5a6b7d;
}

#blockcart-modal .blockcart-modal__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .25rem;
  font-size: .9375rem;
  color: var(--gg-ink, #10253a);
  font-variant-numeric: tabular-nums lining-nums;
}

#blockcart-modal .blockcart-modal__total .shipping {
  font-weight: 700;
  color: #17784a;
}

#blockcart-modal .blockcart-modal__total--bold {
  font-weight: 600;
}

/* il totale e' la prima riga in grassetto; quella che la segue (IVA inclusa) e' un dettaglio */
#blockcart-modal .blockcart-modal__total:not(.blockcart-modal__total--bold) + .blockcart-modal__total--bold {
  align-items: baseline;
  padding-top: .6rem;
  margin-top: .35rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  border-top: 2px solid var(--gg-ink, #10253a);
}

#blockcart-modal .blockcart-modal__total:not(.blockcart-modal__total--bold) + .blockcart-modal__total--bold .value {
  font-size: 1.5rem;
}

#blockcart-modal .blockcart-modal__total--bold + .blockcart-modal__total--bold {
  padding-top: 0;
  font-size: .8125rem;
  font-weight: 400;
  color: #5a6b7d;
}

#blockcart-modal .modal-footer {
  gap: .6rem;
  padding: 1rem 1.5rem 1.4rem;
  border-top: 0;
}

#blockcart-modal .modal-footer [data-bs-dismiss="modal"] {
  padding-inline: 0;
  margin-right: auto;
  font-weight: 600;
  color: var(--gg-blue, #024884);
  background: none;
  border: 0;
}

#blockcart-modal .modal-footer [data-ggo-modal="carrello"] {
  min-height: 3rem;
  padding-inline: 1.2rem;
  font-weight: 600;
  color: var(--gg-blue, #024884);
  border: 1.5px solid var(--gg-blue, #024884);
  border-radius: 12px;
}

#blockcart-modal .modal-footer [data-ggo-modal="checkout"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding-inline: 1.5rem;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gg-ink, #10253a);
  background: var(--gg-orange, #ff8500);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 22px -12px rgb(255 133 0 / 80%);
}

#blockcart-modal .modal-footer [data-ggo-modal="checkout"]:hover {
  color: var(--gg-ink, #10253a);
  background: #ff9a2e;
}

#blockcart-modal .modal-footer [data-ggo-modal="checkout"]::before {
  width: 1rem;
  height: 1rem;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v4H5v13h14V10h-2V6a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v4H9V6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v4H5v13h14V10h-2V6a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v4H9V6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#blockcart-modal .modal-footer a:focus-visible,
#blockcart-modal .modal-footer button:focus-visible {
  outline: 3px solid var(--gg-ink, #10253a);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  #blockcart-modal .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #blockcart-modal .modal-footer [data-bs-dismiss="modal"] {
    order: 3;
    margin: 0 auto;
  }

  #blockcart-modal .modal-footer [data-ggo-modal="checkout"] {
    order: 1;
  }

  #blockcart-modal .modal-footer [data-ggo-modal="carrello"] {
    order: 2;
  }
}

/* Riconoscimento «Migliori E-Commerce d'Italia» 2025/26 e 2026/27, dal 24/09/2026.
 * Nessun sigillo ITQF (niente licenza): il fatto si cita con la fonte e il link per verificarlo.
 * Sta al centro della barra blu in alto, su tutte le pagine. Sotto i 992px la barra non ha
 * spazio fra contatti e account: la riga scende in una fascia sottile tutta sua. */
.gg-award-top {
  display: flex;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: .75rem;
  line-height: 1.3;
  white-space: nowrap;
  color: #c9d7e4;
}

.gg-header-top .gg-award-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gg-header-top__row {
  position: relative;
}

.gg-award-top strong {
  font-weight: var(--gg-type-strong-weight);
  color: #fff;
}

.gg-award-top cite {
  font-style: italic;
}

.gg-award-top a {
  font-weight: var(--gg-type-strong-weight);
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 45%);
  text-underline-offset: .18em;
}

.gg-award-top a:hover {
  text-decoration-color: currentcolor;
}

.gg-award-top a:focus-visible {
  outline: 3px solid var(--gg-orange);
  outline-offset: 2px;
}

.gg-award-top__icon {
  display: grid;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gg-orange);
  place-items: center;
}

.gg-award-top__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.gg-award-strip {
  padding: .4rem 1rem;
  background: var(--gg-blue-glow), var(--gg-blue-surface);
}

@media (max-width: 1399px) {
  .gg-award-top__src {
    display: none;
  }
}

@media (max-width: 479px) {
  .gg-award-strip .gg-award-top {
    font-size: .6875rem;
  }
}

/* «Chi siamo» (CMS 4), 24/09/2026 --------------------------------------------------------
 * L'elemento che resta in mente e' il percorso della gomma: tre fermate su una linea, dal sito
 * al distributore alla consegna, l'ultima in arancio perche' e' l'unica che il cliente vede.
 * Tutto il resto e' tipografia quieta dentro il foglio dell'articolo. */
.gg-article__body ol.gg-about-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.gg-article__body ol.gg-about-route::before {
  position: absolute;
  top: .55rem;
  right: calc(100% / 6);
  left: calc(100% / 6);
  height: 2px;
  content: "";
  background: repeating-linear-gradient(90deg, var(--gg-blue) 0 10px, transparent 10px 16px);
  opacity: .35;
}

.gg-article__body ol.gg-about-route > li {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  justify-items: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

.gg-article__body ol.gg-about-route > li::before {
  content: none;
}

.gg-about-route__stop {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  margin-bottom: .45rem;
  background: #fff;
  border: 3px solid var(--gg-blue);
  border-radius: 50%;
}

.gg-about-route > li:last-child .gg-about-route__stop {
  background: var(--gg-orange);
  border-color: var(--gg-orange);
  box-shadow: 0 0 0 5px rgb(255 133 0 / 18%);
}

.gg-about-route strong {
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gg-blue-deep);
}

.gg-about-route > li > span:last-child {
  max-width: 28ch;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--gg-muted);
}

@media (max-width: 767px) {
  .gg-article__body ol.gg-about-route {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding-left: 2rem;
  }

  .gg-article__body ol.gg-about-route::before {
    top: .6rem;
    bottom: 1.5rem;
    left: .5rem;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--gg-blue) 0 10px, transparent 10px 16px);
  }

  .gg-article__body ol.gg-about-route > li {
    justify-items: start;
    text-align: left;
  }

  .gg-about-route__stop {
    position: absolute;
    top: .1rem;
    left: -2rem;
    margin: 0;
  }
}

.gg-article__body table.gg-about-award caption {
  caption-side: top;
  padding: 0 0 .6rem;
  font-size: .875rem;
  color: var(--gg-muted);
}

.gg-article__body table.gg-about-award td:nth-child(3),
.gg-article__body table.gg-about-award td:nth-child(4) {
  font-variant-numeric: tabular-nums;
}

/* la regola generica colora di blu ogni `tr:first-child th`: qui la prima riga del corpo e' un dato */
.gg-article__body table.gg-about-award tbody th,
.gg-article__body table.gg-about-award tbody tr:first-child th {
  font-weight: 700;
  color: var(--gg-blue-deep);
  background: transparent;
}

.gg-article__body dl.gg-about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  margin: 1.25rem 0 2rem;
}

.gg-about-facts > div {
  padding: 1rem 0;
  border-top: 1px solid var(--gg-border);
}

.gg-article__body .gg-about-facts dt {
  margin: 0 0 .2rem;
  font-size: .875rem;
  font-weight: 400;
  color: var(--gg-muted);
}

.gg-article__body .gg-about-facts dd {
  margin: 0;
  font-family: "Barlow", var(--bs-font-sans-serif, sans-serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gg-blue-deep);
}

.gg-article__body .gg-about-facts dd a {
  font-family: var(--bs-body-font-family);
  font-size: .9375rem;
}

@media (max-width: 575px) {
  .gg-article__body dl.gg-about-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sul telefono la tabella del riconoscimento diventa una scheda per edizione: cinque colonne
   in 350px costringevano a scorrere di lato. */
@media (max-width: 767px) {
  .gg-article__body table.gg-about-award,
  .gg-article__body table.gg-about-award tbody,
  .gg-article__body table.gg-about-award tr {
    display: block;
    overflow: visible;
  }

  .gg-article__body table.gg-about-award thead {
    display: none;
  }

  .gg-article__body table.gg-about-award caption {
    display: block;
    padding: .75rem 1rem .25rem;
  }

  .gg-article__body table.gg-about-award tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--gg-border);
  }

  .gg-article__body table.gg-about-award tbody tr:last-child {
    border-bottom: 0;
  }

  .gg-article__body table.gg-about-award th,
  .gg-article__body table.gg-about-award td {
    padding: .15rem 0;
    border: 0;
  }

  .gg-article__body table.gg-about-award td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--gg-muted);
  }

  .gg-article__body table.gg-about-award td:nth-child(2) {
    font-weight: 700;
    color: var(--gg-blue-deep);
    text-align: right;
  }

  .gg-article__body table.gg-about-award td:nth-child(2)::before {
    content: none;
  }

  .gg-article__body table.gg-about-award td:nth-child(3),
  .gg-article__body table.gg-about-award td:nth-child(4),
  .gg-article__body table.gg-about-award td:last-child {
    grid-column: 1 / -1;
    padding-top: .35rem;
  }
}

/* /produttori: marca senza logo ufficiale, il nome al posto del segnaposto (14/11/2026). */
.brand__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98px; /* come small_default dei loghi */
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 1;
  padding: 0.4rem;
  border-radius: var(--gg-radius-sm);
  background: var(--gg-soft);
  color: var(--gg-blue);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}