:root {
  --jr-orange: #f7a601;
  --jr-black: #171717;
  --jr-orange-soft: #fff1df;
  --jr-yellow: #f7a601;
  --jr-yellow-hover: #e88300;
  --jr-ink: #171717;
  --jr-muted: #626262;
  --jr-surface: #f7f7f7;
  --jr-border: #e7dfd6;
  --jr-white: #ffffff;
  --jr-shadow: 0 18px 48px rgba(23, 23, 23, .13);
}

.hero-brand-logo {
  width: min(100%, 520px);
  margin-bottom: 22px;
}

.hero-brand-logo img,
.footer-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-brand-logo {
  width: min(320px, 82vw);
}

::selection {
  background: #f7a601;
  color: #111;
}

.condition-filter-bar {
  border-top-color: #f7a601 !important;
}

.condition-filter-btn,
.results-condition-btn {
  border-color: #f7a601 !important;
}

.condition-filter-btn[aria-pressed="true"],
.results-condition-btn[aria-pressed="true"] {
  background: #f7a601 !important;
  border-color: #f7a601 !important;
  color: #111 !important;
}

.catalog-switch-card,
.catalog-switch-card-cerchi,
.catalog-switch-card-gomme {
  background: linear-gradient(135deg, #101010, #2a2a2a) !important;
  border-color: #f7a601 !important;
  color: #fff !important;
}

.catalog-switch-card .catalog-switch-title,
.catalog-switch-card .catalog-switch-meta {
  color: #fff !important;
}

.catalog-switch-kicker {
  color: #f7a601 !important;
}

.catalog-switch-arrow {
  color: #111 !important;
}

.catalog-switch-card-gomme .catalog-switch-arrow {
  color: #f7a601 !important;
}

#dettaglioGommaModal .product-detail-gallery-media {
  position: relative;
}

#dettaglioGommaModal .product-detail-gallery-shell.is-loading .product-detail-gallery-media {
  min-height: 280px;
}

#dettaglioGommaModal .product-detail-gallery-shell.is-loading #modalGalleryImg {
  opacity: 0;
}

#dettaglioGommaModal .product-detail-image-loader:not([hidden]) {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 240px;
  border-radius: 12px;
  color: #171717;
  background: #f7f7f7;
}

#dettaglioGommaModal .product-detail-image-loader__ring {
  width: 54px;
  height: 54px;
  border: 5px solid #dedede;
  border-top-color: #f7a601;
  border-radius: 50%;
  animation: jr-gallery-loading .8s linear infinite;
}

#dettaglioGommaModal .product-detail-image-loader strong {
  font-size: .82rem;
  font-weight: 800;
}

@keyframes jr-gallery-loading {
  to { transform: rotate(360deg); }
}

@media (max-width: 767.98px) {
  #dettaglioGommaModal .product-detail-gallery-shell.is-loading .product-detail-gallery-media {
    min-height: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dettaglioGommaModal .product-detail-image-loader__ring {
    animation: none;
    border-color: #dedede;
    border-top-color: #f7a601;
  }
}

.hero-modern {
  background:
    linear-gradient(90deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.9) 29%, rgba(8,8,8,.58) 52%, rgba(8,8,8,.08) 78%),
    url('../hero-jrgomme-officina-moderna-v2.webp') right top / auto clamp(720px, 55vw, 900px) no-repeat,
    #080808 !important;
  color: #fff !important;
}

.hero-modern::before {
  background: linear-gradient(180deg, rgba(8,8,8,0) 70%, rgba(8,8,8,.78) 100%) !important;
}

.hero-modern .hero-title,
.hero-modern .hero-text,
.hero-modern .hero-points li {
  color: #fff !important;
}

.hero-modern .hero-title .highlight,
.hero-modern .hero-badge i,
.hero-modern .hero-points i,
.hero-modern .hero-panel-label {
  color: #f7a601 !important;
}

.hero-modern .hero-title .highlight {
  background: linear-gradient(transparent 66%, rgba(247,166,1,.34) 66%) !important;
}

.hero-modern .hero-badge {
  color: #fff !important;
  background: rgba(247,166,1,.16) !important;
  border-color: rgba(247,166,1,.45) !important;
}

.hero-modern .hero-panel {
  border-top-color: #f7a601 !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.28) !important;
}

.btn-primary,
.btn-success,
.btn-hero-primary,
.btn-search-hero,
.personalized-interest {
  background: #f7a601 !important;
  border-color: #f7a601 !important;
  color: #111 !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-hero-primary:hover,
.btn-search-hero:hover,
.personalized-interest:hover {
  background: #e88300 !important;
  border-color: #e88300 !important;
  color: #111 !important;
}

.promo-tile-novita { background-image: url('../promo-jrgomme-novita.webp') !important; }
.promo-tile-promo { background-image: url('../promo-jrgomme-offerte.webp') !important; }
.promo-tile-best { background-image: url('../promo-jrgomme-best-price.webp') !important; }

.carousel-service-officina { background-image: url('../carousel-officina-jrgomme.webp') !important; }
.carousel-service-cerchio { background-image: url('../carousel-cerchio-jrgomme.webp') !important; }
.carousel-service-viaggio { background-image: url('../carousel-viaggio-jrgomme.webp') !important; }

.personalized-title strong,
.seasonal-reserve h2 strong,
a {
  color: #c96f00;
}

.condition-results-group {
  border-left-color: #f7a601 !important;
  background: linear-gradient(90deg, #fff0dc 0%, #fffaf4 72%, #fff 100%) !important;
}

.riga-azioni {
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .riga-azioni .btn-riga {
    width: auto;
    flex: 1 1 145px;
  }
}

footer.bg-dark {
  border-top: 5px solid #f7a601 !important;
}

/* Selettore cataloghi: comunica chiaramente il catalogo attivo. */
.site-quick-actions .quick-actions-grid-gomme,
.site-quick-actions .quick-actions-grid-cerchi {
  grid-template-columns: minmax(300px, 1.35fr) repeat(3, minmax(150px, .78fr)) !important;
}

.site-quick-actions .pulsante {
  width: 100%;
  min-height: 44px;
  padding-inline: 20px !important;
  border-radius: 999px !important;
  color: #171717 !important;
  font-weight: 800 !important;
  text-decoration: none;
  justify-content: center;
}

.catalog-tabs {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid #d7d7d7;
  border-radius: 14px;
  background: #eeeeee;
}

.catalog-tab {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 10px;
  color: #171717 !important;
  text-decoration: none;
  transition: background-color .18s ease-out, color .18s ease-out;
}

.catalog-tab:hover,
.catalog-tab:focus-visible {
  background: #ffffff;
  outline: 3px solid rgba(247, 166, 1, .34);
  outline-offset: 1px;
}

.catalog-tab.is-active {
  position: relative;
  padding-left: 32px;
  background: #171717;
  color: #ffffff !important;
}

.catalog-tab.is-active::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f7a601;
  transform: translateY(-50%);
}

.catalog-tab-name {
  max-width: 100%;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.catalog-tab small {
  display: block;
  margin-top: 3px;
  color: #626262;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.1;
}

.catalog-tab.is-active small {
  color: #f7a601;
}

/* L'immagine identifica il tipo di ricerca senza occupare la fascia superiore. */
.hero-modern .hero-panel-top {
  position: relative;
  min-height: 72px;
  padding-right: 132px;
  align-items: center !important;
}

.hero-modern .hero-panel-context-image {
  position: absolute;
  z-index: 2;
  right: 2px;
  top: 50%;
  width: 122px;
  height: 122px;
  object-fit: contain;
  transform: translateY(-60%) rotate(2deg);
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .2));
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .site-quick-actions .quick-actions-grid-gomme,
  .site-quick-actions .quick-actions-grid-cerchi {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .site-quick-actions .catalog-tabs,
  .site-quick-actions .quick-actions-grid > .pulsante {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .hero-modern {
    background: #080808 !important;
  }

  .catalog-tabs {
    min-height: 58px;
  }

  .catalog-tab {
    padding: 8px 10px;
  }

  .catalog-tab.is-active {
    padding-left: 27px;
  }

  .catalog-tab.is-active::before {
    left: 11px;
  }

  .catalog-tab-name {
    font-size: .84rem;
  }

  .catalog-tab small {
    font-size: .6rem;
  }

  .hero-modern .hero-panel-top {
    min-height: 62px;
    padding-right: 88px;
  }

  .hero-modern .hero-panel-context-image {
    right: -4px;
    width: 82px;
    height: 82px;
    transform: translateY(-54%) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-tab {
    transition: none;
  }
}