/* ============================================================
   ricamby.com · app.css (bundle unico)
   Contiene: css/components.css + i 5 CSS di pagina.
   Le variabili del brand (pantone) restano in css/theme.css,
   che va caricato PRIMA di questo file.
   ============================================================ */

/* ============================================================
   COMPONENTS · condivisi tra tutte le pagine
   ============================================================ */

/* ============================================================
   COMPONENTS · stili condivisi fra tutte le pagine
   Ogni componente qui dichiarato usa SOLO le variabili definite
   in theme.css, così resta automaticamente coerente col brand
   del negozio (white-label).
   ============================================================ */


/* ------------------------------------------------------------
   HEADER · "Trova negozio" nella top-utility (#topStoreLink)
   ------------------------------------------------------------
   Stessa funzione del bottone #storeBtn nella navbar: apre il
   modal #storeModal. Mantiene l'aspetto di link ma reagisce
   come un bottone (cursor + hover evidente).
   ------------------------------------------------------------ */
.top-utility .top-store-link{
  cursor: pointer;
  transition: color .15s, text-shadow .15s;
}
.top-utility .top-store-link:hover,
.top-utility .top-store-link:focus-visible{
  color: #fff;
  text-shadow: 0 0 1px rgba(255,255,255,.4);
  text-decoration: none;
}
.top-utility .top-store-link:focus-visible{
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   NAV CATEGORIES · icone nascoste su mobile e tablet
   ------------------------------------------------------------
   Nella barra categorie (.nav-bar: Freni, Filtri, Oli, Batterie,
   Illuminazione, Pneumatici, Utensili, Promozioni, ecc.) sotto
   i 992 px si nascondono solo le <i class="bi ..."> davanti al
   testo: su mobile e tablet la riga si accorcia e lo scroll
   orizzontale mostra più voci contemporaneamente.
   Le icone nelle icone-bottone della navbar-actions, nei tab
   del modal veicolo e negli altri .nav-link restano intatte.
   ------------------------------------------------------------ */
@media (max-width: 991.98px){
  .nav-bar .nav-link > i{
    display: none !important;
  }
}


/* ------------------------------------------------------------
   VEHICLE · "Ultimi veicoli cercati" (#vRecentWrap)
   ------------------------------------------------------------ */
.vrecent-wrap{
  padding: 14px 16px;
  margin: 32px 0 0;
  background: var(--brand-primary-light);
  border: 1px solid rgba(var(--brand-primary-rgb), .25);
  border-radius: var(--radius);
}
.vrecent-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  margin-bottom: 10px;
  font-weight:800; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.4px;
  color: var(--brand-primary-dark);
}
.vrecent-clear{
  background:none; border:0; padding:2px 8px;
  border-radius: var(--radius-pill);
  font-size:.72rem; font-weight:700;
  color: var(--ink-3); cursor:pointer;
  text-transform:none; letter-spacing:0;
  transition: background .15s, color .15s;
}
.vrecent-clear:hover{
  background: rgba(210,59,44,.08);
  color: var(--state-danger);
}
.vrecent-list{
  display:flex; flex-wrap:wrap; gap:8px;
}
.vrecent-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px 8px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size:.88rem; font-weight:700;
  color: var(--ink);
  cursor:pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.vrecent-chip:hover{
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.vrecent-chip .vrecent-ico{
  color: var(--brand-primary);
  font-size: 1rem;
}
.vrecent-chip .vrecent-label{
  max-width: 240px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vrecent-chip .vrecent-remove{
  border:0; background:transparent;
  width:22px; height:22px; padding:0;
  border-radius:50%;
  color: var(--ink-3);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .15s, color .15s;
}
.vrecent-chip .vrecent-remove:hover{
  background: rgba(210,59,44,.1);
  color: var(--state-danger);
}

/* Mobile */
@media (max-width: 575.98px){
  .vrecent-chip .vrecent-label{ max-width: 160px; }
}


/* ============================================================
   PAGE · index.html
   ============================================================ */

/* ==========================================================
   THEME OVERRIDES BOOTSTRAP (custom variables)
   ========================================================== */
body{ font-family: 'Nunito', system-ui, sans-serif; color:#212529; background:#fff; }
/* Primary button override */
.btn-primary{
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  font-weight: 800;
}
.btn-outline-primary{
  --bs-btn-color: var(--brand-orange-dark);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange);
  --bs-btn-hover-border-color: var(--brand-orange);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  font-weight: 800;
}
a{ color: var(--brand-orange-dark); text-decoration:none; }
a:hover{ color: var(--brand-orange); }
.text-brand{ color: var(--brand-orange-dark) !important; }
.bg-brand{ background: var(--brand-orange) !important; color:#fff; }
.bg-brand-light{ background: var(--brand-orange-light) !important; }
/* ==========================================================
   TOP UTILITY BAR
   ========================================================== */
.top-utility{
  background: #1F2937; color: #E5E7EB;
  font-size: 13px; font-weight: 600;
}
.top-utility a{ color: #E5E7EB; }
.top-utility a:hover{ color: #fff; }
.top-utility .store-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.25);
  vertical-align: middle; margin-left:4px;
}
/* ==========================================================
   HEADER PRINCIPALE
   ========================================================== */
.main-header{ background:#fff; border-bottom:1px solid #E5E7EB; padding: 16px 0; }
.logo-wrap svg{ height: 40px; width:auto; }
.vehicle-btn{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1.5px dashed var(--brand-orange);
  border-radius: .875rem;
  padding: 10px 16px; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.vehicle-btn:hover{ background:#fff; border-style:solid; color:var(--brand-orange-dark); }
.vehicle-btn.has-vehicle{ background:#fff; border-style:solid; }
.vehicle-btn i{ font-size: 22px; }
.vehicle-btn .v-label{ font-size: 11px; text-transform:uppercase; color:#6B7280; font-weight:700; letter-spacing:.4px; }
.vehicle-btn .v-title{ font-size: 14px; font-weight:800; color:#111827; line-height:1.1; }
.vehicle-btn .v-summary{ font-size: 12px; color:var(--brand-orange-dark); font-weight:700; margin-top:1px; }
.search-wrap{
  position:relative; flex:1;
}
.search-wrap .form-control{
  border-radius: .875rem; border:2px solid #E5E7EB; padding: 14px 140px 14px 44px;
  font-size:15px; font-weight: 500;
}
.search-wrap .form-control:focus{ border-color: var(--brand-orange); box-shadow: 0 0 0 .2rem rgba(237,123,40,.18); }
.search-wrap .bi-search{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:20px; }
.search-wrap .btn-search{
  position:absolute; right:6px; top:6px; bottom:6px;
  padding: 0 22px; font-weight:800; border-radius: .75rem;
}
.header-actions .act-btn{
  display:flex;align-items:center;gap:8px;
  padding: 10px 14px; background:#F9FAFB; color:#374151;
  border-radius:.75rem; border:1px solid transparent;
  font-size:13px; font-weight:700; position:relative;
  transition: all .15s;
}
.header-actions .act-btn:hover{ background:var(--brand-orange-light); color:var(--brand-orange-dark); }
.header-actions .act-btn.has-store{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.header-actions .act-btn i{ font-size: 22px; }
.header-actions .cart-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--brand-orange); color:#fff;
  min-width:20px; height:20px; border-radius:10px;
  font-size:11px; font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px; transition: transform .2s;
}
.header-actions .wish-btn i{ color:#EF4444; }
.header-actions .wish-btn:hover{ background:#FEE2E2; color:#B91C1C; }
.header-actions .wish-btn:hover i{ color:#B91C1C; }
.header-actions .wish-btn.has-items i{ color:#B91C1C; }
.header-actions .wish-badge{
  position:absolute; top:-4px; right:-4px;
  background:#EF4444; color:#fff;
  min-width:20px; height:20px; border-radius:10px;
  font-size:11px; font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
  transition: transform .2s, background .2s;
}
.header-actions .wish-badge.empty{
  background:#9CA3AF; opacity:.7;
}
/* ==========================================================
   NAV CATEGORIE
   ========================================================== */
.nav-bar{ background:#111827; }
.nav-bar .nav-link{
  color:#E5E7EB !important; font-weight: 700; font-size:14px;
  padding: 14px 16px;
}
.nav-bar .nav-link:hover{ color:#fff !important; background: rgba(255,255,255,.05); }
.nav-bar .nav-link.active{ color:var(--brand-orange) !important; background: rgba(237,123,40,.1); }
.nav-bar .nav-link i{ margin-right:6px; }
.nav-bar .nav-link.dropdown-toggle::after{
  margin-left: 8px; vertical-align: 0.15em;
}
/* Quando il dropdown categorie è aperto, la nav non deve clippare */
.nav-bar ul.nav.dropdown-open{ overflow: visible !important; }
.nav-bar .dropdown-menu.categories-menu{
  background: #1F2937;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .625rem;
  padding: 10px;
  margin-top: 2px !important;
  min-width: 520px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  z-index: 1050;
}
.nav-bar .dropdown-menu.categories-menu .cat-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item{
  color: rgba(255,255,255,.85);
  border-radius: .5rem;
  padding: 9px 12px;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item:hover,
.nav-bar .dropdown-menu.categories-menu .dropdown-item:focus{
  background: rgba(237,123,40,.16);
  color: var(--brand-orange);
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item i{
  color: var(--brand-orange);
  font-size: 16px; width: 20px; text-align: center;
  margin: 0;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item .cat-count{
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-divider{
  border-color: rgba(255,255,255,.08);
  margin: 8px 4px;
}
.nav-bar .dropdown-menu.categories-menu .cats-footer{
  padding: 6px 8px 2px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,.6);
}
.nav-bar .dropdown-menu.categories-menu .cats-footer a{
  color: var(--brand-orange);
  font-weight: 800; text-decoration: none;
}
.nav-bar .dropdown-menu.categories-menu .cats-footer a:hover{ text-decoration: underline; }
@media (max-width: 640px){
  .nav-bar .dropdown-menu.categories-menu{ min-width: 280px; }
  .nav-bar .dropdown-menu.categories-menu .cat-grid{ grid-template-columns: 1fr; }
}
/* ==========================================================
   HERO RICERCA VEICOLO
   ========================================================== */
.vehicle-hero{
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  padding: 32px 0; border-bottom:1px solid #E5E7EB;
}
.vehicle-hero h3{ font-weight:900; font-size:22px; color:#111827; }
.vehicle-hero p{ font-size:14px; color:#6B7280; font-weight:600; }
.vehicle-hero .form-select, .vehicle-hero .form-control{
  border-radius:.75rem; border-width:2px; padding:12px 14px; font-weight:700;
}
/* ==========================================================
   CAROUSEL PROMO (Bootstrap)
   ========================================================== */
.promo-carousel{ margin-top:24px; border-radius: 1.25rem; overflow:hidden; }
.promo-carousel .carousel-item{ min-height: 240px; }
.promo-carousel .slide-content{
  display:flex; align-items:center; justify-content:space-between;
  padding: 40px 56px; color:#fff; min-height:240px;
}
.promo-carousel .slide-content .ico i{ font-size: 140px; opacity:.3; }
.promo-carousel h2{ font-size: 34px; font-weight:900; margin-bottom:8px; }
.promo-carousel p{ font-size: 15px; opacity:.95; margin-bottom:14px; max-width:480px; }
.promo-carousel .slide-1{ background: linear-gradient(135deg, #ED7B28, #C96620); }
.promo-carousel .slide-2{ background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.promo-carousel .slide-3{ background: linear-gradient(135deg, #10B981, #047857); }
.promo-carousel .slide-4{ background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.promo-carousel .slide-5{ background: linear-gradient(135deg, #EF4444, #B91C1C); }
.promo-carousel .btn-light{ font-weight:800; border-radius:.75rem; padding: 10px 22px; color: var(--brand-orange-dark); }
@media (max-width: 768px){
  .promo-carousel .slide-content{ padding: 28px; }
  .promo-carousel h2{ font-size: 22px; }
  .promo-carousel .ico{ display:none; }
}
/* ==========================================================
   SEZIONI PRODOTTI (carousel orizzontale custom)
   ========================================================== */
.products-section{ padding: 40px 0 8px; }
.products-section h3{ font-weight: 900; font-size: 24px; color:#111827; }
.products-section p.sub{ font-size:14px; color:#6B7280; font-weight:500; margin:0; }
.products-scroll{
  display:flex; gap:14px; overflow-x:auto;
  align-items: flex-start;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 20px; margin: -4px -2px 0;
}
.products-scroll::-webkit-scrollbar{ display:none; }
.product-card{
  flex-shrink:0; width:240px;
  background:#fff; border:1.5px solid #E5E7EB;
  border-radius: 1rem; overflow: hidden; scroll-snap-align: start;
  display:flex; flex-direction:column; transition: all .2s;
  position: relative; cursor: pointer;
}
.product-card:hover{ border-color: var(--brand-orange); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.product-card .img-wrap{
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
  position:relative;
}
.product-card .img-wrap i{ font-size:72px; color:#9CA3AF; }
.product-card.theme-1 .img-wrap{ background: linear-gradient(135deg, #FEE2E2, #FECACA); } .product-card.theme-1 .img-wrap i{ color:#B91C1C; }
.product-card.theme-2 .img-wrap{ background: linear-gradient(135deg, #DBEAFE, #BFDBFE); } .product-card.theme-2 .img-wrap i{ color:#1E40AF; }
.product-card.theme-3 .img-wrap{ background: linear-gradient(135deg, #FEF3C7, #FDE68A); } .product-card.theme-3 .img-wrap i{ color:#B45309; }
.product-card.theme-4 .img-wrap{ background: linear-gradient(135deg, #D1FAE5, #A7F3D0); } .product-card.theme-4 .img-wrap i{ color:#047857; }
.product-card.theme-5 .img-wrap{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); } .product-card.theme-5 .img-wrap i{ color:#4338CA; }
.product-card.theme-6 .img-wrap{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); } .product-card.theme-6 .img-wrap i{ color:#BE185D; }
.product-card.theme-7 .img-wrap{ background: linear-gradient(135deg, #E0F2FE, #BAE6FD); } .product-card.theme-7 .img-wrap i{ color:#0369A1; }
.product-card.theme-8 .img-wrap{ background: linear-gradient(135deg, #F3E8FF, #E9D5FF); } .product-card.theme-8 .img-wrap i{ color:#6B21A8; }
.product-card .rank{
  position:absolute; top:10px; left:10px; z-index:2;
  width:32px;height:32px;border-radius:50%;
  background: linear-gradient(135deg,#F59E0B,#D97706);
  color:#fff; font-weight:900; font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.product-card .disc-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: var(--brand-orange); color:#fff;
  font-size:12px; font-weight:800; padding:4px 9px; border-radius:.5rem;
}
.product-card .rank + .disc-badge{ top: 50px; }
.product-card .wish{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95); color:#9CA3AF; border:0;
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
}
.product-card .wish:hover{ color:#dc2626; transform:scale(1.1); }
.product-card .wish.active{ color:#dc2626; }
.product-card .wish i{ font-size: 18px; }
.product-card .body{ padding: 14px; display:flex; flex-direction:column; flex:1; gap:6px; }
.product-card .brand{ font-size:11px; font-weight:800; color:#6B7280; text-transform: uppercase; letter-spacing:.5px; }
.product-card .p-name{
  font-size:14px; font-weight:700; color:#111827; line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:36px;
}
.product-card .rating{ font-size: 12px; color:#6B7280; font-weight:600; display:flex; align-items:center; gap:4px; }
.product-card .rating .stars{ color:#F59E0B; }
.product-card .prices{ display:flex;align-items:baseline;gap:8px; margin-top:2px; }
.product-card .price-new{ font-size:18px; font-weight:900; color:#111827; }
.product-card .price-old{ font-size:13px; color:#6B7280; text-decoration:line-through; font-weight:600; }
.product-card .last-viewed{ font-size:11px; color:#6B7280; font-weight:600; display:flex; align-items:center; gap:4px; }
.product-card .p-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.product-card .store-toggle{
  background:var(--brand-orange-light); color: var(--brand-orange-dark);
  border:0; border-radius:.625rem; padding: 8px 10px;
  font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  transition: background .15s;
}
.product-card .store-toggle:hover{ background: rgba(237,123,40,.18); }
.product-card .store-toggle .chev{ transition: transform .2s; }
.product-card .store-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
/* NB: display:flex solo quando aperto/animando, altrimenti Bootstrap non riesce
   a chiudere la collapse (specificità 0,2,0 vince su .collapse:not(.show)). */
.product-card .store-list{ flex-direction:column; padding-top:6px; }
.product-card .store-list.show,
.product-card .store-list.collapsing{ display:flex; gap:5px; }
.sap-item{
  display:flex; flex-direction: column; gap:4px;
  padding:7px 9px; background:#F9FAFB;
  border:1px solid transparent; border-radius:.5rem;
  transition: all .15s; cursor:pointer;
  min-width: 0;
}
.sap-item:hover{ background:#fff; border-color: var(--brand-orange); }
.sap-item.sap-out{ opacity:.6; cursor:not-allowed; }
.sap-item.sap-out:hover{ background:#F9FAFB; border-color:transparent; }
/* Negozio preselezionato nel menu a tendina articolo */
.sap-item.preselected{
  background: var(--brand-orange-light);
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}
.sap-item.preselected .sap-name-text{ color: var(--brand-orange-dark); }
.sap-badge{
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  background: var(--brand-orange); color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
}
.sap-name{
  font-weight:800; font-size:11.5px; color:#111827; line-height:1.3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.sap-name-text{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.sap-meta{ display:flex; align-items:center; gap:6px; font-size:10px; flex-wrap:wrap; }
.sap-dist{ color:#6B7280; font-weight:600; }
.sap-stock{ display:inline-flex; align-items:center; gap:4px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.sap-stock .dot{ width:6px;height:6px;border-radius:50%; }
.sap-stock.in{ color:#15803d; } .sap-stock.in .dot{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.sap-stock.low{ color:#b45309; } .sap-stock.low .dot{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.sap-stock.out{ color:#b91c1c; } .sap-stock.out .dot{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.sap-bottom{
  display:flex; align-items:center; gap:8px;
  margin-top: 2px;
}
.sap-bottom .sap-price{ margin-left: auto; }
.sap-price{ font-weight:900; color:#111827; font-size:12.5px; white-space:nowrap; text-align:right; }
.sap-item.sap-out .sap-price{ color:#9CA3AF; text-decoration:line-through; }
.sap-price .delta{ display:block; font-size:9px; font-weight:700; margin-top:-2px; text-align:right; }
.sap-price .delta.cheaper{ color:#16a34a; }
.sap-price .delta.dearer{ color:#b91c1c; }
.products-scroll-btn{
  width:40px;height:40px;border-radius:50%;
  background:#fff; border:2px solid #E5E7EB;
  display:inline-flex; align-items:center; justify-content:center;
  color:#374151; transition: all .15s;
}
.products-scroll-btn:hover:not(:disabled){ border-color:var(--brand-orange); color: var(--brand-orange-dark); transform:scale(1.05); }
.products-scroll-btn:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width: 640px){
  .product-card{ width:180px; }
  .product-card .p-name{ font-size:13px; }
  .product-card .price-new{ font-size:16px; }
}
/* ==========================================================
   CATEGORIE (stile oscaro)
   ========================================================== */
.cats-section{ padding: 40px 0 10px; }
.cats-section h3{ font-size:24px; font-weight:900; color:#111827; }
.cat-card{
  background:#fff; border:1.5px solid #E5E7EB; border-radius: 1rem;
  padding: 20px; text-align:center; transition: all .2s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  height:100%; cursor: pointer;
}
.cat-card:hover{ border-color: var(--brand-orange); transform: translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.cat-card .cat-icon{
  width:60px;height:60px;border-radius:50%;
  background: var(--brand-orange-light);
  display:flex;align-items:center;justify-content:center;
  font-size:30px; color: var(--brand-orange-dark);
}
.cat-card .cat-name{ font-weight:800; font-size:14px; color:#111827; line-height:1.2; }
.cat-card .cat-count{ font-size:11px; color:#6B7280; font-weight:600; }
/* ==========================================================
   FOOTER
   ========================================================== */
footer.site-footer{ background:#111827; color:#D1D5DB; margin-top:60px; }
footer.site-footer .newsletter{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  padding: 40px 0; color:#fff;
}
footer.site-footer .newsletter h3{ font-size:26px; font-weight:900; }
footer.site-footer .newsletter p{ opacity:.95; font-weight:500; }
footer.site-footer .newsletter .form-control{ border-radius: .75rem; border:0; padding:12px 16px; font-weight:600; }
footer.site-footer .newsletter .btn{ border-radius: .75rem; font-weight:800; background:#111827; color:#fff; padding:12px 24px; border:0; }
footer.site-footer .cols{ padding: 48px 0 24px; }
footer.site-footer h5{ color:#fff; font-weight:800; font-size:15px; margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px; }
footer.site-footer a{ color:#D1D5DB; font-weight:500; font-size:14px; }
footer.site-footer a:hover{ color: var(--brand-orange); }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer ul li{ margin-bottom:10px; }
footer.site-footer .pay-methods{ display:flex; gap:10px; flex-wrap:wrap; }
footer.site-footer .pay-methods .pay{
  background:#fff; color:#111827; padding:6px 12px; border-radius:.5rem; font-size:11px; font-weight:800;
}
footer.site-footer .social{ display:flex; gap:12px; }
footer.site-footer .social a{
  width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center; font-size:18px; color:#fff;
  transition: all .15s;
}
footer.site-footer .social a:hover{ background: var(--brand-orange); color:#fff; }
footer.site-footer .bottom{
  background:#000; padding:20px 0; font-size:12px; color:#9CA3AF;
}
/* ==========================================================
   MODALI & CART CUSTOM
   ========================================================== */
.modal-content{ border-radius: 1.25rem; border:0; overflow:hidden; }
.modal-header.gradient{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color:#fff; padding: 20px 24px; border:0;
}
.modal-header.gradient .btn-close{ filter: invert(1) brightness(1.5); }
/* Product modal */
.pm-gallery{
  background: linear-gradient(135deg,#F9FAFB,#F3F4F6);
  min-height: 420px; padding: 30px; position: relative;
  display:flex; flex-direction:column; gap: 14px;
}
.pm-gallery.theme-1{ background: linear-gradient(135deg, #FEE2E2, #FECACA); color:#B91C1C; }
.pm-gallery.theme-2{ background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color:#1E40AF; }
.pm-gallery.theme-3{ background: linear-gradient(135deg, #FEF3C7, #FDE68A); color:#B45309; }
.pm-gallery.theme-4{ background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color:#047857; }
.pm-gallery.theme-5{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); color:#4338CA; }
.pm-gallery.theme-6{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); color:#BE185D; }
.pm-gallery.theme-7{ background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color:#0369A1; }
.pm-gallery.theme-8{ background: linear-gradient(135deg, #F3E8FF, #E9D5FF); color:#6B21A8; }
.pm-main-img{ flex:1; display:flex; align-items:center; justify-content:center; min-height:260px; }
.pm-main-img i{ font-size: 180px; color: currentColor; }
.pm-thumbs{ display:flex; gap:10px; justify-content:center; }
.pm-thumb{
  width:64px;height:64px; border-radius:.75rem;
  background: rgba(255,255,255,.7); border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s;
}
.pm-thumb.active{ border-color: var(--brand-orange); background:#fff; }
.pm-thumb i{ font-size: 32px; color: currentColor; opacity:.85; }
.pm-disc{
  position:absolute; top:20px; left:20px; z-index:2;
  background: var(--brand-orange); color:#fff;
  padding: 6px 12px; border-radius: .625rem;
  font-weight:900; font-size:13px;
}
.pm-info{ padding: 30px; display:flex; flex-direction:column; gap:12px; }
.pm-brand{ color: var(--brand-orange-dark); text-transform:uppercase; font-weight:900; letter-spacing:1px; font-size:12px; }
.pm-title{ font-size: 24px; font-weight:900; color:#111827; line-height:1.25; margin:0; }
.pm-stars{ color:#F59E0B; }
.pm-prices-block{ padding: 12px 0; border-top:1px solid #F3F4F6; border-bottom:1px solid #F3F4F6; }
.pm-price-new{ font-size: 32px; font-weight:900; color:#111827; }
.pm-price-old{ font-size: 16px; color:#6B7280; text-decoration:line-through; font-weight:600; }
.pm-stock-msg{
  display:flex; align-items:center; gap:8px;
  font-weight:700; padding: 10px 12px; border-radius:.625rem; font-size:13px;
}
.pm-stock-msg.in{ background:#ECFDF5; color:#065F46; }
.pm-stock-msg.low{ background:#FFFBEB; color:#92400E; }
.pm-stock-msg .dot{ width:8px;height:8px;border-radius:50%; }
.pm-stock-msg.in .dot{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); }
.pm-stock-msg.low .dot{ background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.2); }
.pm-compat{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px; background: var(--brand-orange-light);
  border-radius:.75rem; font-size:13px; font-weight:600;
}
.pm-compat i{ color: var(--brand-orange-dark); font-size:18px; }
.pm-specs{ display:grid; grid-template-columns: 1fr 1fr; gap:2px; background:#E5E7EB; border-radius:.75rem; overflow:hidden; }
.pm-specs .spec{ background:#fff; padding: 10px 12px; }
.pm-specs .spec-label{ font-size:11px; color:#6B7280; text-transform:uppercase; font-weight:700; letter-spacing:.3px; }
.pm-specs .spec-val{ font-size:13px; font-weight:800; color:#111827; }
.pm-guarantees{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; border-top:1px solid #F3F4F6; padding-top:14px; }
.pm-guar{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; font-size:11px; color:#374151; font-weight:700; }
.pm-guar i{ font-size:22px; color: var(--brand-orange-dark); }
@media (max-width: 768px){
  .pm-specs{ grid-template-columns:1fr; }
  .pm-guarantees{ grid-template-columns:1fr; }
  .pm-guar{ flex-direction:row; gap:10px; text-align:left; }
  .pm-title{ font-size: 20px; }
  .pm-price-new{ font-size: 26px; }
  .pm-gallery{ min-height:280px; padding:20px; }
  .pm-main-img i{ font-size: 130px; }
}
/* Cart offcanvas */
.offcanvas.cart{
  width: 420px !important;
  border-right: 1px solid #E5E7EB;
}
.offcanvas.cart .offcanvas-header{ background:#111827; color:#fff; padding:20px 24px; }
.offcanvas.cart .offcanvas-header h5{ font-weight:900; font-size:18px; }
.offcanvas.cart .offcanvas-header .btn-close{ filter: invert(1); }
.cart-count-badge{
  background: var(--brand-orange); color:#fff;
  min-width:24px; height:24px; border-radius:12px; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; padding: 0 7px;
  margin-left:8px;
}
.cart-item{
  display:flex; gap:12px; padding:14px; background:#F9FAFB; border-radius:.875rem; margin-bottom:10px;
}
.cart-item .img{
  width:64px;height:64px; border-radius:.625rem; background:#fff;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.cart-item .img i{ font-size:32px; color:#9CA3AF; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .name{ font-weight:800; font-size:13px; color:#111827; line-height:1.3; }
.cart-item .meta{ font-size:11px; color:#6B7280; font-weight:600; margin-top:2px; }
.cart-item .bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cart-item .qty{ display:flex; align-items:center; border:1px solid #E5E7EB; border-radius:.5rem; overflow:hidden; background:#fff; }
.cart-item .qty button{
  width:28px;height:28px; background:#fff; border:0; color:#374151; font-weight:800;
}
.cart-item .qty button:hover{ background:#F3F4F6; }
.cart-item .qty .val{ min-width:28px; text-align:center; font-weight:800; font-size:13px; }
.cart-item .price{ font-weight:900; font-size:14px; color:#111827; }
.cart-item .remove{
  background:transparent; border:0; color:#9CA3AF; padding:4px; font-size:16px;
}
.cart-item .remove:hover{ color:#dc2626; }
.ship-hint{
  padding: 10px 14px; background: var(--brand-orange-light);
  border-radius:.75rem; font-size:12px; font-weight:700;
  color: var(--brand-orange-dark);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.cart-footer{
  padding: 20px 24px; background:#fff; border-top:1px solid #E5E7EB;
}
.cart-footer .totals{ margin-bottom:14px; }
.cart-footer .totals div{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:#6B7280; margin-bottom:4px; }
.cart-footer .totals div.total{ font-size:18px; font-weight:900; color:#111827; padding-top:8px; margin-top:8px; border-top:2px dashed #E5E7EB; }
.cart-empty{
  text-align:center; padding: 60px 20px; color:#6B7280;
}
.cart-empty i{ font-size:56px; color:#D1D5DB; }
.cart-empty .title{ font-size:17px; font-weight:800; color:#111827; margin-top:12px; }
.cart-empty .sub{ font-size:13px; margin-top:4px; }
/* Cart group by store */
.cart-store-group{
  background:#fff;
  border:1px solid #F3F4F6;
  border-radius: 1rem;
  margin-bottom: 14px;
  overflow: hidden;
}
.cart-store-head{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FDF0E5 0%, #FFF 100%);
  border-bottom: 1px solid #FDE4CF;
}
.cart-store-head .cs-ico{
  width:36px; height:36px; border-radius:10px;
  background:#fff; border:1px solid #FDE4CF;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--brand-orange); font-size:16px;
  flex-shrink:0;
}
.cart-store-head .cs-body{ flex:1; min-width:0; }
.cart-store-head .cs-name{
  font-size:13px; font-weight:900; color:#111827;
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-store-head .cs-meta{
  font-size:11px; color:#6B7280; font-weight:600;
  margin-top:2px;
  display:flex; align-items:center; gap:6px;
  flex-wrap: wrap;
}
.cart-store-head .cs-meta i{ color: var(--brand-orange); }
.cart-store-head .cs-ship{
  font-size:10.5px; font-weight:800;
  background: #D1FAE5; color:#065F46;
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing:.03em;
}
.cart-store-head .cs-ship.express{ background:#DBEAFE; color:#1E40AF; }
.cart-store-group .cart-items{ padding: 10px 10px 4px; }
.cart-store-group .cart-items .cart-item:last-child{ margin-bottom:6px; }
.cart-store-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 14px 12px;
  border-top: 1px dashed #F3F4F6;
  background:#FAFAFB;
}
.cart-store-foot .csf-label{
  font-size:11.5px; color:#6B7280; font-weight:700;
  text-transform: uppercase; letter-spacing:.03em;
}
.cart-store-foot .csf-sub{
  font-size:14px; font-weight:900; color:#111827;
}
/* Wishlist offcanvas — stesso schema del cart ma accento rosso */
.offcanvas.wishlist{
  width: 420px !important;
  border-right: 1px solid #E5E7EB;
}
.offcanvas.wishlist .offcanvas-header{
  background: linear-gradient(135deg, #B91C1C 0%, #7F1D1D 100%);
  color:#fff; padding:20px 24px;
}
.offcanvas.wishlist .offcanvas-header h5{ font-weight:900; font-size:18px; }
.offcanvas.wishlist .offcanvas-header .btn-close{ filter: invert(1); }
.wish-count-badge{
  background:#fff; color:#B91C1C;
  min-width:24px; height:24px; border-radius:12px; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; padding:0 7px;
  margin-left:8px;
}
.wish-item{
  display:flex; gap:12px; padding:14px; background:#F9FAFB; border-radius:.875rem; margin-bottom:10px;
  position:relative;
}
.wish-item .img{
  width:70px;height:70px; border-radius:.625rem;
  background: linear-gradient(135deg, #FDF0E5 0%, #FFF 60%);
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.wish-item .img i{ font-size:34px; color: var(--brand-orange); }
.wish-item .info{ flex:1; min-width:0; padding-right:22px; }
.wish-item .brand{
  font-size:10.5px; color: var(--brand-orange);
  font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.wish-item .name{
  font-weight:800; font-size:13px; color:#111827;
  line-height:1.3; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wish-item .price-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.wish-item .price{ font-weight:900; font-size:14px; color:#111827; }
.wish-item .price-old{ font-size:12px; color:#9CA3AF; text-decoration:line-through; font-weight:700; }
.wish-item .actions{ display:flex; gap:6px; margin-top:8px; }
.wish-item .move-btn{
  background: var(--brand-orange); color:#fff;
  border:0; border-radius:.5rem;
  padding: 6px 10px; font-size:11.5px; font-weight:800;
  display:inline-flex; align-items:center; gap:5px;
  cursor: pointer; transition: background .15s;
}
.wish-item .move-btn:hover{ background: var(--brand-orange-dark); }
.wish-item .remove-wish{
  position: absolute; top:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  background:transparent; border:0; color:#9CA3AF;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.wish-item .remove-wish:hover{ background:#FEE2E2; color:#B91C1C; }
.wish-footer{ padding: 20px 24px; background:#fff; border-top:1px solid #E5E7EB; }
.wish-empty{ text-align:center; padding: 60px 20px; color:#6B7280; }
.wish-empty i{ font-size:56px; color:#FCA5A5; }
.wish-empty .title{ font-size:17px; font-weight:800; color:#111827; margin-top:12px; }
.wish-empty .sub{ font-size:13px; margin-top:4px; margin-bottom:16px; }
/* Login dropdown panel */
/* Account menu (dopo login) */
.account-header{
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  color:#fff;
  margin: -20px -20px 0 -20px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.account-header .ah-avatar{
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.4);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px; color:#fff;
  flex-shrink:0;
}
.account-header .ah-info{ flex:1; min-width:0; }
.account-header .ah-hi{
  font-size:11px; font-weight:700; opacity:.9;
  text-transform:uppercase; letter-spacing:.04em;
}
.account-header .ah-name{
  font-weight:900; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-header .ah-email{
  font-size:11.5px; opacity:.85; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-menu{ padding: 10px 0 0; list-style:none; margin:0; }
.account-menu li{ margin:0; }
.account-menu a.am-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 4px;
  color:#374151; font-weight:700; font-size:14px;
  border-radius: .5rem;
  text-decoration:none;
  transition: all .12s;
}
.account-menu a.am-item:hover{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
}
.account-menu a.am-item i{
  width:34px; height:34px; border-radius:9px;
  background:#F3F4F6; color:#6B7280;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  transition: all .12s;
}
.account-menu a.am-item:hover i{
  background: #fff; color: var(--brand-orange);
}
.account-menu a.am-item .am-label{ flex:1; min-width:0; }
.account-menu a.am-item .am-sub{
  font-size:11px; color:#9CA3AF; font-weight:600;
  display:block; margin-top:1px;
}
.account-menu a.am-item .am-chev{
  color:#D1D5DB; font-size:12px;
}
.account-menu a.am-item .am-pill{
  background: var(--brand-orange); color:#fff;
  font-size:10px; font-weight:900;
  padding: 2px 8px; border-radius:999px;
  letter-spacing:.03em;
}
.account-menu-divider{
  border: 0; border-top: 1px solid #F3F4F6;
  margin: 6px 0;
}
.account-logout{
  color:#B91C1C !important;
}
.account-logout:hover{ background:#FEE2E2 !important; color:#991B1B !important; }
.account-logout i{ background:#FEE2E2 !important; color:#B91C1C !important; }
.account-logout:hover i{ background:#fff !important; color:#B91C1C !important; }
.act-btn.logged-in i{ color: var(--brand-orange); }
/* Login panel */
.login-panel{
  min-width: 300px; padding: 20px; border-radius:1rem;
  box-shadow: 0 10px 35px rgba(0,0,0,.15);
  border: 0;
}
.login-panel h6{ font-weight:900; margin-bottom:6px; }
.login-panel .form-control{ border-radius:.625rem; }
.login-panel .btn-primary{ border-radius:.625rem; }
.login-panel a.small{ font-size:12px; }
/* Accessibility helpers */
.focus-ring:focus{ outline: 3px solid rgba(237,123,40,.4); outline-offset: 2px; }
/* Scroll buttons container */
.products-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.products-head .actions{ display:flex; align-items:center; gap:10px; }
.products-head .actions .see-all{
  font-size:13px; font-weight:800; color: var(--brand-orange-dark);
  padding: 8px 16px; border: 2px solid #E5E7EB; border-radius: 999px;
  transition: all .15s;
}
.products-head .actions .see-all:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
/* ==========================================================
   STICKY HEADER (main-header + nav-bar)
   ========================================================== */
.sticky-header-wrap{
  position: sticky; top: 0; z-index: 1040;
  background: #fff;
  transition: box-shadow .2s ease;
}
.sticky-header-wrap.scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.sticky-header-wrap.scrolled .main-header{ padding: 10px 0; transition: padding .2s ease; }
.sticky-header-wrap.scrolled .logo-wrap svg{ height: 34px; transition: height .2s ease; }
.sticky-header-wrap.scrolled .nav-bar .nav-link{ padding: 10px 16px; }
.main-header{ transition: padding .2s ease; }
.logo-wrap svg{ transition: height .2s ease; }
/* ==========================================================
   SEARCH AUTOCOMPLETE
   ========================================================== */
.search-wrap{ position: relative; }
.search-suggestions{
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: .875rem;
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
  z-index: 1050;
  max-height: 460px;
  overflow-y: auto;
  display: none;
}
.search-suggestions.show{ display: block; }
.ss-group{ padding: 8px 0; }
.ss-group + .ss-group{ border-top: 1px solid #F3F4F6; }
.ss-group-title{
  font-size: 11px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 16px 4px;
  display: flex; align-items: center; gap: 6px;
}
.ss-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .1s;
  font-size: 14px;
  user-select: none;
}
.ss-item:hover, .ss-item.active{ background: var(--brand-orange-light); }
.ss-item .ss-icon{
  width: 36px; height: 36px; border-radius: .5rem;
  background: #F3F4F6; color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; font-weight: 800;
}
.ss-item.ss-product .ss-icon{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.ss-item.ss-cat .ss-icon{ background: #EEF2FF; color: #4338CA; }
.ss-item.ss-brand .ss-icon{ background: #F0FDF4; color: #15803D; }
.ss-item.ss-oem .ss-icon{ background: #F5F3FF; color: #6D28D9; font-size: 11px; letter-spacing:.5px; }
.ss-item.ss-popular .ss-icon{ background: #FEF3C7; color: #B45309; }
.ss-label{ flex: 1; min-width: 0; }
.ss-label .t{
  font-weight: 700; color: #111827; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-label .t mark{ background: transparent; color: var(--brand-orange-dark); padding: 0; font-weight: 900; }
.ss-label .s{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-meta{
  font-size: 11px; color: #9CA3AF; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0;
}
.ss-footer{
  padding: 10px 16px; font-size: 11px; color: #6B7280;
  background: #F9FAFB; border-top: 1px solid #F3F4F6;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; gap: 10px; flex-wrap: wrap;
}
.ss-footer kbd{
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: .375rem; padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  font-family: 'Nunito', sans-serif; color: #374151;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.ss-footer .ss-view-all{ color: var(--brand-orange-dark); font-weight: 800; }
.ss-empty{
  padding: 36px 20px; text-align: center;
  color: #6B7280; font-size: 13px; font-weight: 600;
}
.ss-empty i{ font-size: 36px; color: #D1D5DB; display: block; margin-bottom: 8px; }
.ss-empty strong{ color: #111827; }
@media (max-width: 640px){
  .search-suggestions{ max-height: 55vh; }
  .ss-label .s{ display: none; }
}
/* ==========================================================
   PRODUCT CARD - INFO BUTTON (dettagli)
   ========================================================== */
.product-card .info-btn{
  position:absolute; top:10px; right:54px; z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95); color:#6B7280; border:0;
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.product-card .info-btn:hover{ color: var(--brand-orange-dark); transform: scale(1.1); background:#fff; }
.product-card .info-btn i{ font-size: 16px; }
.product-card .details-btn{
  background: transparent; color: var(--brand-orange-dark);
  border: 1.5px solid #E5E7EB; border-radius:.625rem;
  padding: 7px 10px; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap:4px;
  transition: all .15s;
  flex: 1;
}
.product-card .details-btn:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.product-card .p-actions{ display: flex; gap: 6px; }
.product-card .p-actions .add-btn{ flex: 1.5; padding: 7px 10px; font-size: 12px; }
/* ==========================================================
   MODAL - "VEDI SCHEDA COMPLETA" LINK
   ========================================================== */
.pm-full-link{
  display: inline-flex; align-items: center; gap:6px;
  font-size: 12px; font-weight: 800;
  color: var(--brand-orange-dark);
  padding: 4px 10px; background: var(--brand-orange-light);
  border-radius: 999px; width: fit-content;
  transition: all .15s;
  text-decoration: none;
}
.pm-full-link:hover{ background: var(--brand-orange); color: #fff; }
.pm-full-link i{ font-size: 14px; transition: transform .15s; }
.pm-full-link:hover i{ transform: translateX(3px); }
/* ==========================================================
   MODAL - DELIVERY & PICKUP OPTIONS
   ========================================================== */
.pm-delivery{
  border-top: 1px solid #F3F4F6;
  padding-top: 14px;
  margin-top: 4px;
}
.pm-delivery-title{
  font-size: 11px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.pm-delivery-title i{ color: var(--brand-orange-dark); font-size: 14px; }
.delivery-opt{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1.5px solid transparent;
  border-radius: .75rem;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.delivery-opt:hover{ background: #fff; border-color: #E5E7EB; }
.delivery-opt.selected{ background: #fff; border-color: var(--brand-orange); box-shadow: 0 2px 8px rgba(237,123,40,.08); }
.delivery-opt.disabled{ opacity: .5; cursor: not-allowed; }
.delivery-opt.disabled:hover{ background:#F9FAFB; border-color: transparent; }
.delivery-opt .do-icon{
  width:42px;height:42px;border-radius:.625rem;
  background: var(--brand-orange-light); color: var(--brand-orange-dark);
  display:flex;align-items:center;justify-content:center;
  font-size: 20px; flex-shrink: 0;
}
.delivery-opt.express .do-icon{ background: #FEF3C7; color: #B45309; }
.delivery-opt.pickup .do-icon{ background: #DCFCE7; color: #166534; }
.delivery-opt .do-info{ flex:1; min-width: 0; }
.delivery-opt .do-name{
  font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.delivery-opt .do-name .badge-eta{
  background: #ECFDF5; color: #065F46;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: .375rem;
  text-transform: uppercase; letter-spacing: .3px;
}
.delivery-opt .do-sub{ font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 3px; }
.delivery-opt .do-price{
  font-weight: 900; color: #111827; font-size: 15px;
  text-align: right; white-space: nowrap;
}
.delivery-opt .do-price.free{ color: #16A34A; }
.delivery-opt .do-price .old{
  display: block; font-size: 11px; font-weight: 700;
  color: #9CA3AF; text-decoration: line-through;
}
.delivery-opt .do-check{
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #D1D5DB;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  color: #fff;
}
.delivery-opt.selected .do-check{
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}
.delivery-opt .do-check i{ font-size: 14px; opacity: 0; transition: opacity .15s; }
.delivery-opt.selected .do-check i{ opacity: 1; }
.pm-pickup-hint{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  padding: 8px 12px; border-radius: .625rem;
  font-size: 12px; font-weight: 700;
  margin-top: -2px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pm-pickup-hint i{ font-size: 14px; }
/* Store availability row - pickup button */
.sap-item .sap-pick-btn{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 0; border-radius: .5rem;
  padding: 5px 10px;
  font-size: 11px; font-weight: 800;
  white-space: nowrap;
  margin-left: 4px;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0;
}
.sap-item .sap-pick-btn:hover{ background: var(--brand-orange); color: #fff; }
.sap-item.sap-out .sap-pick-btn{ display: none; }
.sap-item .sap-pick-btn.selected{ background: var(--brand-orange); color: #fff; }
.sap-item .sap-pick-btn i{ font-size: 12px; }
.sap-item .sap-ready{
  font-size: 10px; color:#16A34A; font-weight: 800;
  margin-top: 2px;
  text-transform: uppercase; letter-spacing: .3px;
}
.sap-item.sap-low .sap-ready{ color: #B45309; }
/* ==========================================================
   FLOATING ACTION BUTTONS (scroll-top + contatti)
   ========================================================== */
.fab-container{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1035;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.fab-container > *{ pointer-events: auto; }
.scroll-top-btn{
  width: 48px; height: 48px; border-radius: 50%;
  background: #1F2937; color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0; transform: translateY(20px) scale(.85);
  pointer-events: none !important;
  transition: transform .25s ease, opacity .25s ease, background .15s;
  cursor: pointer;
}
.scroll-top-btn.show{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto !important;
}
.scroll-top-btn:hover{ background: #111827; transform: translateY(-3px) scale(1.05); }
.contact-fab-wrap{ position: relative; }
.contact-fab{
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; border: 0;
  box-shadow: 0 6px 20px rgba(237,123,40,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.contact-fab:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(237,123,40,.5); }
.contact-fab .cf-pulse{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  animation: cf-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes cf-pulse{
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.contact-fab i{ transition: transform .25s ease; }
.contact-fab.open{ background: #111827; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.contact-fab.open .cf-pulse{ display: none; }
.contact-fab.open i{ transform: rotate(180deg); }
.contact-dropdown{
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 290px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 24px 50px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08);
  padding: 8px;
  opacity: 0; transform: translateY(12px) scale(.94);
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: bottom right;
}
.contact-dropdown.show{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.contact-dropdown::before{
  content: '';
  position: absolute;
  bottom: -7px; right: 22px;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.06);
  z-index: -1;
}
.contact-dropdown .cd-header{
  padding: 10px 12px 12px;
  border-bottom: 1px solid #F3F4F6;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.contact-dropdown .cd-header .cd-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.contact-dropdown .cd-title{
  font-weight: 900; font-size: 15px; color: #111827; line-height: 1.2;
}
.contact-dropdown .cd-sub{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 2px;
}
.contact-option{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: .625rem;
  transition: background .15s, transform .1s;
  cursor: pointer;
  color: #111827;
  text-decoration: none;
  border: 0; background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.contact-option:hover{ background: #F9FAFB; color: #111827; }
.contact-option:active{ transform: scale(.98); }
.contact-option .co-icon{
  width: 40px; height: 40px; border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  color: #fff;
}
.contact-option.co-email .co-icon{ background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.contact-option.co-whatsapp .co-icon{ background: linear-gradient(135deg,#25D366,#128C7E); }
.contact-option.co-telegram .co-icon{ background: linear-gradient(135deg,#2AABEE,#1E88CA); }
.contact-option.co-upload .co-icon{ background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)); }
.contact-option .co-info{ flex: 1; min-width: 0; }
.contact-option .co-name{
  font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2;
}
.contact-option .co-sub{
  font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-option .co-chev{
  color: #9CA3AF; font-size: 14px;
  flex-shrink: 0;
  transition: transform .15s;
}
.contact-option:hover .co-chev{ color: var(--brand-orange-dark); transform: translateX(2px); }
/* ==========================================================
   LIBRETTO UPLOAD MODAL
   ========================================================== */
.libretto-upload-zone{
  border: 2px dashed var(--brand-orange);
  border-radius: 1rem;
  padding: 36px 20px;
  text-align: center;
  background: var(--brand-orange-light);
  transition: all .2s;
  cursor: pointer;
}
.libretto-upload-zone:hover, .libretto-upload-zone.dragover{
  background: #fff;
  border-color: var(--brand-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(237,123,40,.15);
}
.libretto-upload-zone .upload-big{
  font-size: 54px;
  color: var(--brand-orange-dark);
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.libretto-upload-zone .title{
  font-weight: 900; font-size: 16px; color: #111827;
}
.libretto-upload-zone .title span{ color: var(--brand-orange-dark); text-decoration: underline; }
.libretto-upload-zone .sub{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 6px;
}
.libretto-file-input{ display: none; }
.libretto-preview{
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: .875rem;
  margin-top: 14px;
}
.libretto-preview .lp-icon{
  width: 48px; height: 48px; border-radius: .625rem;
  background: #22C55E; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.libretto-preview .lp-info{ flex: 1; min-width: 0; }
.libretto-preview .lp-name{
  font-weight: 800; font-size: 13px; color: #166534;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.libretto-preview .lp-size{
  font-size: 11px; color: #15803D; font-weight: 700; margin-top: 2px;
}
.libretto-preview .lp-remove{
  background: transparent; border: 0; color: #6B7280;
  font-size: 20px; padding: 4px 8px; line-height: 1;
  transition: color .15s;
}
.libretto-preview .lp-remove:hover{ color: #DC2626; }
.libretto-privacy{
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: #6B7280; font-weight: 700;
  margin-top: 14px; padding: 10px 12px;
  background: #F9FAFB; border-radius: .625rem;
}
.libretto-privacy span{ display: inline-flex; align-items: center; gap: 4px; }
.libretto-privacy i{ color: #16A34A; font-size: 13px; }
/* ==========================================================
   REGISTER MODAL
   ========================================================== */
.reg-tab-switcher{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 22px;
}
.reg-tab{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 2px solid #E5E7EB;
  background: #fff; border-radius: .875rem;
  text-align: left; transition: all .15s;
  cursor: pointer;
}
.reg-tab:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.reg-tab.active{
  border-color: var(--brand-orange); background: var(--brand-orange-light);
  box-shadow: 0 4px 12px rgba(237,123,40,.12);
}
.reg-tab > i{ font-size: 26px; color: var(--brand-orange-dark); flex-shrink: 0; }
.reg-tab-title{ font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2; }
.reg-tab-sub{ font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px; }
.reg-form{ display: none; }
.reg-form.active{ display: block; }
.reg-section-title{
  font-weight: 800; font-size: 12px; color: var(--brand-orange-dark);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 12px; display: flex; align-items: center;
}
.reg-section-title + .row{ margin-top: 0; }
.visura-upload-zone{
  border: 2px dashed var(--brand-orange);
  border-radius: 1rem;
  padding: 22px 18px;
  text-align: center;
  background: var(--brand-orange-light);
  transition: all .2s;
  cursor: pointer;
  display: block;
  margin-bottom: 0;
}
.visura-upload-zone:hover, .visura-upload-zone.dragover{
  background: #fff;
  border-color: var(--brand-orange-dark);
  box-shadow: 0 6px 14px rgba(237,123,40,.15);
}
.visura-upload-zone .upload-big{
  font-size: 38px;
  color: var(--brand-orange-dark);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.visura-upload-zone .title{
  font-weight: 800; font-size: 14px; color: #111827;
}
.visura-upload-zone .title span{ color: var(--brand-orange-dark); text-decoration: underline; }
.visura-upload-zone .sub{
  font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 6px; line-height: 1.5;
}
#registerModal .modal-body{ max-height: 70vh; overflow-y: auto; }
#registerModal .form-label{ font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
#registerModal .form-control{ font-size: 14px; }
/* ==========================================================
   FORGOT PASSWORD MODAL
   ========================================================== */
.forgot-step{ display: none; }
.forgot-step.active{ display: block; animation: forgotFadeIn .25s ease; }
@keyframes forgotFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.forgot-success-icon{
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.forgot-success-icon.success{ background: #DCFCE7; color: #16A34A; }
.forgot-instructions{
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: .75rem;
  padding: 12px 14px;
}
.fi-item{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #374151; font-weight: 600;
  padding: 5px 0;
}
.fi-item i{ color: var(--brand-orange-dark); font-size: 18px; flex-shrink: 0; }
.pwd-strength{ display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pwd-bar{
  flex: 1; height: 6px; background: #E5E7EB;
  border-radius: 3px; overflow: hidden;
}
.pwd-bar-fill{
  height: 100%; width: 0;
  background: #DC2626;
  transition: width .2s, background .2s;
}
.pwd-bar-fill.medium{ background: #F59E0B; }
.pwd-bar-fill.strong{ background: #22C55E; }
.pwd-label{ font-size: 11px; font-weight: 700; color: #6B7280; white-space: nowrap; }
#forgotModal .form-label{ font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
@media (max-width: 640px){
  .fab-container{ bottom: 16px; right: 16px; gap: 8px; }
  .scroll-top-btn{ width: 44px; height: 44px; font-size: 19px; }
  .contact-fab{ width: 54px; height: 54px; font-size: 23px; }
  .contact-dropdown{ width: 270px; }
  .libretto-upload-zone{ padding: 24px 16px; }
  .libretto-upload-zone .upload-big{ font-size: 42px; }
  .reg-tab-switcher{ grid-template-columns: 1fr; }
}


/* ============================================================
   PAGE · catalogo.html
   ============================================================ */

/* ==========================================================
   THEME OVERRIDES BOOTSTRAP (custom variables)
   ========================================================== */
body{ font-family: 'Nunito', system-ui, sans-serif; color:#212529; background:#fff; }
/* Primary button override */
.btn-primary{
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  font-weight: 800;
}
.btn-outline-primary{
  --bs-btn-color: var(--brand-orange-dark);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange);
  --bs-btn-hover-border-color: var(--brand-orange);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  font-weight: 800;
}
a{ color: var(--brand-orange-dark); text-decoration:none; }
a:hover{ color: var(--brand-orange); }
.text-brand{ color: var(--brand-orange-dark) !important; }
.bg-brand{ background: var(--brand-orange) !important; color:#fff; }
.bg-brand-light{ background: var(--brand-orange-light) !important; }
/* ==========================================================
   TOP UTILITY BAR
   ========================================================== */
.top-utility{
  background: #1F2937; color: #E5E7EB;
  font-size: 13px; font-weight: 600;
}
.top-utility a{ color: #E5E7EB; }
.top-utility a:hover{ color: #fff; }
.top-utility .store-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.25);
  vertical-align: middle; margin-left:4px;
}
/* ==========================================================
   HEADER PRINCIPALE
   ========================================================== */
.main-header{ background:#fff; border-bottom:1px solid #E5E7EB; padding: 16px 0; }
.logo-wrap svg{ height: 40px; width:auto; }
.vehicle-btn{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1.5px dashed var(--brand-orange);
  border-radius: .875rem;
  padding: 10px 16px; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.vehicle-btn:hover{ background:#fff; border-style:solid; color:var(--brand-orange-dark); }
.vehicle-btn.has-vehicle{ background:#fff; border-style:solid; }
.vehicle-btn i{ font-size: 22px; }
.vehicle-btn .v-label{ font-size: 11px; text-transform:uppercase; color:#6B7280; font-weight:700; letter-spacing:.4px; }
.vehicle-btn .v-title{ font-size: 14px; font-weight:800; color:#111827; line-height:1.1; }
.vehicle-btn .v-summary{ font-size: 12px; color:var(--brand-orange-dark); font-weight:700; margin-top:1px; }
.search-wrap{
  position:relative; flex:1;
}
.search-wrap .form-control{
  border-radius: .875rem; border:2px solid #E5E7EB; padding: 14px 140px 14px 44px;
  font-size:15px; font-weight: 500;
}
.search-wrap .form-control:focus{ border-color: var(--brand-orange); box-shadow: 0 0 0 .2rem rgba(237,123,40,.18); }
.search-wrap .bi-search{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:20px; }
.search-wrap .btn-search{
  position:absolute; right:6px; top:6px; bottom:6px;
  padding: 0 22px; font-weight:800; border-radius: .75rem;
}
.header-actions .act-btn{
  display:flex;align-items:center;gap:8px;
  padding: 10px 14px; background:#F9FAFB; color:#374151;
  border-radius:.75rem; border:1px solid transparent;
  font-size:13px; font-weight:700; position:relative;
  transition: all .15s;
}
.header-actions .act-btn:hover{ background:var(--brand-orange-light); color:var(--brand-orange-dark); }
.header-actions .act-btn.has-store{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.header-actions .act-btn i{ font-size: 22px; }
.header-actions .cart-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--brand-orange); color:#fff;
  min-width:20px; height:20px; border-radius:10px;
  font-size:11px; font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px; transition: transform .2s;
}
/* ==========================================================
   NAV CATEGORIE
   ========================================================== */
.nav-bar{ background:#111827; }
.nav-bar .nav-link{
  color:#E5E7EB !important; font-weight: 700; font-size:14px;
  padding: 14px 16px;
}
.nav-bar .nav-link:hover{ color:#fff !important; background: rgba(255,255,255,.05); }
.nav-bar .nav-link.active{ color:var(--brand-orange) !important; background: rgba(237,123,40,.1); }
.nav-bar .nav-link i{ margin-right:6px; }
.nav-bar .nav-link.dropdown-toggle::after{
  margin-left: 8px; vertical-align: 0.15em;
}
/* Quando il dropdown categorie è aperto, la nav non deve clippare */
.nav-bar ul.nav.dropdown-open{ overflow: visible !important; }
.nav-bar .dropdown-menu.categories-menu{
  background: #1F2937;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .625rem;
  padding: 10px;
  margin-top: 2px !important;
  min-width: 520px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  z-index: 1050;
}
.nav-bar .dropdown-menu.categories-menu .cat-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item{
  color: rgba(255,255,255,.85);
  border-radius: .5rem;
  padding: 9px 12px;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item:hover,
.nav-bar .dropdown-menu.categories-menu .dropdown-item:focus{
  background: rgba(237,123,40,.16);
  color: var(--brand-orange);
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item i{
  color: var(--brand-orange);
  font-size: 16px; width: 20px; text-align: center;
  margin: 0;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item .cat-count{
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-divider{
  border-color: rgba(255,255,255,.08);
  margin: 8px 4px;
}
.nav-bar .dropdown-menu.categories-menu .cats-footer{
  padding: 6px 8px 2px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,.6);
}
.nav-bar .dropdown-menu.categories-menu .cats-footer a{
  color: var(--brand-orange);
  font-weight: 800; text-decoration: none;
}
.nav-bar .dropdown-menu.categories-menu .cats-footer a:hover{ text-decoration: underline; }
@media (max-width: 640px){
  .nav-bar .dropdown-menu.categories-menu{ min-width: 280px; }
  .nav-bar .dropdown-menu.categories-menu .cat-grid{ grid-template-columns: 1fr; }
}
/* ==========================================================
   HERO RICERCA VEICOLO
   ========================================================== */
.vehicle-hero{
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  padding: 32px 0; border-bottom:1px solid #E5E7EB;
}
.vehicle-hero h3{ font-weight:900; font-size:22px; color:#111827; }
.vehicle-hero p{ font-size:14px; color:#6B7280; font-weight:600; }
.vehicle-hero .form-select, .vehicle-hero .form-control{
  border-radius:.75rem; border-width:2px; padding:12px 14px; font-weight:700;
}
/* ==========================================================
   CAROUSEL PROMO (Bootstrap)
   ========================================================== */
.promo-carousel{ margin-top:24px; border-radius: 1.25rem; overflow:hidden; }
.promo-carousel .carousel-item{ min-height: 240px; }
.promo-carousel .slide-content{
  display:flex; align-items:center; justify-content:space-between;
  padding: 40px 56px; color:#fff; min-height:240px;
}
.promo-carousel .slide-content .ico i{ font-size: 140px; opacity:.3; }
.promo-carousel h2{ font-size: 34px; font-weight:900; margin-bottom:8px; }
.promo-carousel p{ font-size: 15px; opacity:.95; margin-bottom:14px; max-width:480px; }
.promo-carousel .slide-1{ background: linear-gradient(135deg, #ED7B28, #C96620); }
.promo-carousel .slide-2{ background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.promo-carousel .slide-3{ background: linear-gradient(135deg, #10B981, #047857); }
.promo-carousel .slide-4{ background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.promo-carousel .slide-5{ background: linear-gradient(135deg, #EF4444, #B91C1C); }
.promo-carousel .btn-light{ font-weight:800; border-radius:.75rem; padding: 10px 22px; color: var(--brand-orange-dark); }
@media (max-width: 768px){
  .promo-carousel .slide-content{ padding: 28px; }
  .promo-carousel h2{ font-size: 22px; }
  .promo-carousel .ico{ display:none; }
}
/* ==========================================================
   SEZIONI PRODOTTI (carousel orizzontale custom)
   ========================================================== */
.products-section{ padding: 40px 0 8px; }
.products-section h3{ font-weight: 900; font-size: 24px; color:#111827; }
.products-section p.sub{ font-size:14px; color:#6B7280; font-weight:500; margin:0; }
.products-scroll{
  display:flex; gap:14px; overflow-x:auto;
  align-items: flex-start;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 20px; margin: -4px -2px 0;
}
.products-scroll::-webkit-scrollbar{ display:none; }
.product-card{
  flex-shrink:0; width:240px;
  background:#fff; border:1.5px solid #E5E7EB;
  border-radius: 1rem; overflow: hidden; scroll-snap-align: start;
  display:flex; flex-direction:column; transition: all .2s;
  position: relative; cursor: pointer;
}
.product-card:hover{ border-color: var(--brand-orange); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.product-card .img-wrap{
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
  position:relative;
}
.product-card .img-wrap i{ font-size:72px; color:#9CA3AF; }
.product-card.theme-1 .img-wrap{ background: linear-gradient(135deg, #FEE2E2, #FECACA); } .product-card.theme-1 .img-wrap i{ color:#B91C1C; }
.product-card.theme-2 .img-wrap{ background: linear-gradient(135deg, #DBEAFE, #BFDBFE); } .product-card.theme-2 .img-wrap i{ color:#1E40AF; }
.product-card.theme-3 .img-wrap{ background: linear-gradient(135deg, #FEF3C7, #FDE68A); } .product-card.theme-3 .img-wrap i{ color:#B45309; }
.product-card.theme-4 .img-wrap{ background: linear-gradient(135deg, #D1FAE5, #A7F3D0); } .product-card.theme-4 .img-wrap i{ color:#047857; }
.product-card.theme-5 .img-wrap{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); } .product-card.theme-5 .img-wrap i{ color:#4338CA; }
.product-card.theme-6 .img-wrap{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); } .product-card.theme-6 .img-wrap i{ color:#BE185D; }
.product-card.theme-7 .img-wrap{ background: linear-gradient(135deg, #E0F2FE, #BAE6FD); } .product-card.theme-7 .img-wrap i{ color:#0369A1; }
.product-card.theme-8 .img-wrap{ background: linear-gradient(135deg, #F3E8FF, #E9D5FF); } .product-card.theme-8 .img-wrap i{ color:#6B21A8; }
.product-card .rank{
  position:absolute; top:10px; left:10px; z-index:2;
  width:32px;height:32px;border-radius:50%;
  background: linear-gradient(135deg,#F59E0B,#D97706);
  color:#fff; font-weight:900; font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.product-card .disc-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: var(--brand-orange); color:#fff;
  font-size:12px; font-weight:800; padding:4px 9px; border-radius:.5rem;
}
.product-card .rank + .disc-badge{ top: 50px; }
.product-card .wish{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95); color:#9CA3AF; border:0;
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
}
.product-card .wish:hover{ color:#dc2626; transform:scale(1.1); }
.product-card .wish.active{ color:#dc2626; }
.product-card .wish i{ font-size: 18px; }
.product-card .body{ padding: 14px; display:flex; flex-direction:column; flex:1; gap:6px; }
.product-card .brand{ font-size:11px; font-weight:800; color:#6B7280; text-transform: uppercase; letter-spacing:.5px; }
.product-card .p-name{
  font-size:14px; font-weight:700; color:#111827; line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:36px;
}
.product-card .rating{ font-size: 12px; color:#6B7280; font-weight:600; display:flex; align-items:center; gap:4px; }
.product-card .rating .stars{ color:#F59E0B; }
.product-card .prices{ display:flex;align-items:baseline;gap:8px; margin-top:2px; }
.product-card .price-new{ font-size:18px; font-weight:900; color:#111827; }
.product-card .price-old{ font-size:13px; color:#6B7280; text-decoration:line-through; font-weight:600; }
.product-card .last-viewed{ font-size:11px; color:#6B7280; font-weight:600; display:flex; align-items:center; gap:4px; }
.product-card .p-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.product-card .store-toggle{
  background:var(--brand-orange-light); color: var(--brand-orange-dark);
  border:0; border-radius:.625rem; padding: 8px 10px;
  font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  transition: background .15s;
}
.product-card .store-toggle:hover{ background: rgba(237,123,40,.18); }
.product-card .store-toggle .chev{ transition: transform .2s; }
.product-card .store-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
/* display:flex SOLO quando .show/.collapsing è presente, altrimenti Bootstrap
   imposta display:none per nascondere il collapse. Senza questo scoping, la
   specificità di .product-card .store-list (0,2,0) pareggia con
   .collapse:not(.show) (0,2,0) e, essendo definita dopo Bootstrap, vince
   sempre → il menu negozi non si chiude mai. */
.product-card .store-list{ flex-direction:column; padding-top:6px; }
.product-card .store-list.show,
.product-card .store-list.collapsing{ display:flex; gap:5px; }
.sap-item{
  display:flex; flex-direction: column; gap:4px;
  padding:7px 9px; background:#F9FAFB;
  border:1px solid transparent; border-radius:.5rem;
  transition: all .15s; cursor:pointer;
  min-width: 0;
}
.sap-item:hover{ background:#fff; border-color: var(--brand-orange); }
.sap-item.sap-out{ opacity:.6; cursor:not-allowed; }
.sap-item.sap-out:hover{ background:#F9FAFB; border-color:transparent; }
/* Negozio preselezionato nel menu a tendina articolo */
.sap-item.preselected{
  background: var(--brand-orange-light);
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}
.sap-item.preselected .sap-name-text{ color: var(--brand-orange-dark); }
.sap-badge{
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  background: var(--brand-orange); color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
}
.sap-name{
  font-weight:800; font-size:11.5px; color:#111827; line-height:1.3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.sap-name-text{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.sap-meta{ display:flex; align-items:center; gap:6px; font-size:10px; flex-wrap:wrap; }
.sap-dist{ color:#6B7280; font-weight:600; }
.sap-stock{ display:inline-flex; align-items:center; gap:4px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.sap-stock .dot{ width:6px;height:6px;border-radius:50%; }
.sap-stock.in{ color:#15803d; } .sap-stock.in .dot{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.sap-stock.low{ color:#b45309; } .sap-stock.low .dot{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.sap-stock.out{ color:#b91c1c; } .sap-stock.out .dot{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.sap-bottom{
  display:flex; align-items:center; gap:8px;
  margin-top: 2px;
}
.sap-bottom .sap-price{ margin-left: auto; }
.sap-price{ font-weight:900; color:#111827; font-size:12.5px; white-space:nowrap; text-align:right; }
.sap-item.sap-out .sap-price{ color:#9CA3AF; text-decoration:line-through; }
.sap-price .delta{ display:block; font-size:9px; font-weight:700; margin-top:-2px; text-align:right; }
.sap-price .delta.cheaper{ color:#16a34a; }
.sap-price .delta.dearer{ color:#b91c1c; }
.products-scroll-btn{
  width:40px;height:40px;border-radius:50%;
  background:#fff; border:2px solid #E5E7EB;
  display:inline-flex; align-items:center; justify-content:center;
  color:#374151; transition: all .15s;
}
.products-scroll-btn:hover:not(:disabled){ border-color:var(--brand-orange); color: var(--brand-orange-dark); transform:scale(1.05); }
.products-scroll-btn:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width: 640px){
  .product-card{ width:180px; }
  .product-card .p-name{ font-size:13px; }
  .product-card .price-new{ font-size:16px; }
}
/* ==========================================================
   CATEGORIE (stile oscaro)
   ========================================================== */
.cats-section{ padding: 40px 0 10px; }
.cats-section h3{ font-size:24px; font-weight:900; color:#111827; }
.cat-card{
  background:#fff; border:1.5px solid #E5E7EB; border-radius: 1rem;
  padding: 20px; text-align:center; transition: all .2s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  height:100%; cursor: pointer;
}
.cat-card:hover{ border-color: var(--brand-orange); transform: translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.cat-card .cat-icon{
  width:60px;height:60px;border-radius:50%;
  background: var(--brand-orange-light);
  display:flex;align-items:center;justify-content:center;
  font-size:30px; color: var(--brand-orange-dark);
}
.cat-card .cat-name{ font-weight:800; font-size:14px; color:#111827; line-height:1.2; }
.cat-card .cat-count{ font-size:11px; color:#6B7280; font-weight:600; }
/* ==========================================================
   FOOTER
   ========================================================== */
footer.site-footer{ background:#111827; color:#D1D5DB; margin-top:60px; }
footer.site-footer .newsletter{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  padding: 40px 0; color:#fff;
}
footer.site-footer .newsletter h3{ font-size:26px; font-weight:900; }
footer.site-footer .newsletter p{ opacity:.95; font-weight:500; }
footer.site-footer .newsletter .form-control{ border-radius: .75rem; border:0; padding:12px 16px; font-weight:600; }
footer.site-footer .newsletter .btn{ border-radius: .75rem; font-weight:800; background:#111827; color:#fff; padding:12px 24px; border:0; }
footer.site-footer .cols{ padding: 48px 0 24px; }
footer.site-footer h5{ color:#fff; font-weight:800; font-size:15px; margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px; }
footer.site-footer a{ color:#D1D5DB; font-weight:500; font-size:14px; }
footer.site-footer a:hover{ color: var(--brand-orange); }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer ul li{ margin-bottom:10px; }
footer.site-footer .pay-methods{ display:flex; gap:10px; flex-wrap:wrap; }
footer.site-footer .pay-methods .pay{
  background:#fff; color:#111827; padding:6px 12px; border-radius:.5rem; font-size:11px; font-weight:800;
}
footer.site-footer .social{ display:flex; gap:12px; }
footer.site-footer .social a{
  width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center; font-size:18px; color:#fff;
  transition: all .15s;
}
footer.site-footer .social a:hover{ background: var(--brand-orange); color:#fff; }
footer.site-footer .bottom{
  background:#000; padding:20px 0; font-size:12px; color:#9CA3AF;
}
/* ==========================================================
   MODALI & CART CUSTOM
   ========================================================== */
.modal-content{ border-radius: 1.25rem; border:0; overflow:hidden; }
.modal-header.gradient{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color:#fff; padding: 20px 24px; border:0;
}
.modal-header.gradient .btn-close{ filter: invert(1) brightness(1.5); }
/* Product modal */
.pm-gallery{
  background: linear-gradient(135deg,#F9FAFB,#F3F4F6);
  min-height: 420px; padding: 30px; position: relative;
  display:flex; flex-direction:column; gap: 14px;
}
.pm-gallery.theme-1{ background: linear-gradient(135deg, #FEE2E2, #FECACA); color:#B91C1C; }
.pm-gallery.theme-2{ background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color:#1E40AF; }
.pm-gallery.theme-3{ background: linear-gradient(135deg, #FEF3C7, #FDE68A); color:#B45309; }
.pm-gallery.theme-4{ background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color:#047857; }
.pm-gallery.theme-5{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); color:#4338CA; }
.pm-gallery.theme-6{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); color:#BE185D; }
.pm-gallery.theme-7{ background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color:#0369A1; }
.pm-gallery.theme-8{ background: linear-gradient(135deg, #F3E8FF, #E9D5FF); color:#6B21A8; }
.pm-main-img{ flex:1; display:flex; align-items:center; justify-content:center; min-height:260px; }
.pm-main-img i{ font-size: 180px; color: currentColor; }
.pm-thumbs{ display:flex; gap:10px; justify-content:center; }
.pm-thumb{
  width:64px;height:64px; border-radius:.75rem;
  background: rgba(255,255,255,.7); border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s;
}
.pm-thumb.active{ border-color: var(--brand-orange); background:#fff; }
.pm-thumb i{ font-size: 32px; color: currentColor; opacity:.85; }
.pm-disc{
  position:absolute; top:20px; left:20px; z-index:2;
  background: var(--brand-orange); color:#fff;
  padding: 6px 12px; border-radius: .625rem;
  font-weight:900; font-size:13px;
}
.pm-info{ padding: 30px; display:flex; flex-direction:column; gap:12px; }
.pm-brand{ color: var(--brand-orange-dark); text-transform:uppercase; font-weight:900; letter-spacing:1px; font-size:12px; }
.pm-title{ font-size: 24px; font-weight:900; color:#111827; line-height:1.25; margin:0; }
.pm-stars{ color:#F59E0B; }
.pm-prices-block{ padding: 12px 0; border-top:1px solid #F3F4F6; border-bottom:1px solid #F3F4F6; }
.pm-price-new{ font-size: 32px; font-weight:900; color:#111827; }
.pm-price-old{ font-size: 16px; color:#6B7280; text-decoration:line-through; font-weight:600; }
.pm-stock-msg{
  display:flex; align-items:center; gap:8px;
  font-weight:700; padding: 10px 12px; border-radius:.625rem; font-size:13px;
}
.pm-stock-msg.in{ background:#ECFDF5; color:#065F46; }
.pm-stock-msg.low{ background:#FFFBEB; color:#92400E; }
.pm-stock-msg .dot{ width:8px;height:8px;border-radius:50%; }
.pm-stock-msg.in .dot{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); }
.pm-stock-msg.low .dot{ background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.2); }
.pm-compat{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px; background: var(--brand-orange-light);
  border-radius:.75rem; font-size:13px; font-weight:600;
}
.pm-compat i{ color: var(--brand-orange-dark); font-size:18px; }
.pm-specs{ display:grid; grid-template-columns: 1fr 1fr; gap:2px; background:#E5E7EB; border-radius:.75rem; overflow:hidden; }
.pm-specs .spec{ background:#fff; padding: 10px 12px; }
.pm-specs .spec-label{ font-size:11px; color:#6B7280; text-transform:uppercase; font-weight:700; letter-spacing:.3px; }
.pm-specs .spec-val{ font-size:13px; font-weight:800; color:#111827; }
.pm-guarantees{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; border-top:1px solid #F3F4F6; padding-top:14px; }
.pm-guar{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; font-size:11px; color:#374151; font-weight:700; }
.pm-guar i{ font-size:22px; color: var(--brand-orange-dark); }
@media (max-width: 768px){
  .pm-specs{ grid-template-columns:1fr; }
  .pm-guarantees{ grid-template-columns:1fr; }
  .pm-guar{ flex-direction:row; gap:10px; text-align:left; }
  .pm-title{ font-size: 20px; }
  .pm-price-new{ font-size: 26px; }
  .pm-gallery{ min-height:280px; padding:20px; }
  .pm-main-img i{ font-size: 130px; }
}
/* Cart offcanvas */
.offcanvas.cart{
  width: 420px !important;
  border-right: 1px solid #E5E7EB;
}
.offcanvas.cart .offcanvas-header{ background:#111827; color:#fff; padding:20px 24px; }
.offcanvas.cart .offcanvas-header h5{ font-weight:900; font-size:18px; }
.offcanvas.cart .offcanvas-header .btn-close{ filter: invert(1); }
.cart-count-badge{
  background: var(--brand-orange); color:#fff;
  min-width:24px; height:24px; border-radius:12px; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; padding: 0 7px;
  margin-left:8px;
}
.cart-item{
  display:flex; gap:12px; padding:14px; background:#F9FAFB; border-radius:.875rem; margin-bottom:10px;
}
.cart-item .img{
  width:64px;height:64px; border-radius:.625rem; background:#fff;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.cart-item .img i{ font-size:32px; color:#9CA3AF; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .name{ font-weight:800; font-size:13px; color:#111827; line-height:1.3; }
.cart-item .meta{ font-size:11px; color:#6B7280; font-weight:600; margin-top:2px; }
.cart-item .bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cart-item .qty{ display:flex; align-items:center; border:1px solid #E5E7EB; border-radius:.5rem; overflow:hidden; background:#fff; }
.cart-item .qty button{
  width:28px;height:28px; background:#fff; border:0; color:#374151; font-weight:800;
}
.cart-item .qty button:hover{ background:#F3F4F6; }
.cart-item .qty .val{ min-width:28px; text-align:center; font-weight:800; font-size:13px; }
.cart-item .price{ font-weight:900; font-size:14px; color:#111827; }
.cart-item .remove{
  background:transparent; border:0; color:#9CA3AF; padding:4px; font-size:16px;
}
.cart-item .remove:hover{ color:#dc2626; }
.ship-hint{
  padding: 10px 14px; background: var(--brand-orange-light);
  border-radius:.75rem; font-size:12px; font-weight:700;
  color: var(--brand-orange-dark);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.cart-footer{
  padding: 20px 24px; background:#fff; border-top:1px solid #E5E7EB;
}
.cart-footer .totals{ margin-bottom:14px; }
.cart-footer .totals div{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:#6B7280; margin-bottom:4px; }
.cart-footer .totals div.total{ font-size:18px; font-weight:900; color:#111827; padding-top:8px; margin-top:8px; border-top:2px dashed #E5E7EB; }
.cart-empty{
  text-align:center; padding: 60px 20px; color:#6B7280;
}
.cart-empty i{ font-size:56px; color:#D1D5DB; }
.cart-empty .title{ font-size:17px; font-weight:800; color:#111827; margin-top:12px; }
.cart-empty .sub{ font-size:13px; margin-top:4px; }
/* Login dropdown panel */
.login-panel{
  min-width: 300px; padding: 20px; border-radius:1rem;
  box-shadow: 0 10px 35px rgba(0,0,0,.15);
  border: 0;
}
.login-panel h6{ font-weight:900; margin-bottom:6px; }
.login-panel .form-control{ border-radius:.625rem; }
.login-panel .btn-primary{ border-radius:.625rem; }
.login-panel a.small{ font-size:12px; }
/* Accessibility helpers */
.focus-ring:focus{ outline: 3px solid rgba(237,123,40,.4); outline-offset: 2px; }
/* Scroll buttons container */
.products-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.products-head .actions{ display:flex; align-items:center; gap:10px; }
.products-head .actions .see-all{
  font-size:13px; font-weight:800; color: var(--brand-orange-dark);
  padding: 8px 16px; border: 2px solid #E5E7EB; border-radius: 999px;
  transition: all .15s;
}
.products-head .actions .see-all:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
/* ==========================================================
   STICKY HEADER (main-header + nav-bar)
   ========================================================== */
.sticky-header-wrap{
  position: sticky; top: 0; z-index: 1040;
  background: #fff;
  transition: box-shadow .2s ease;
}
.sticky-header-wrap.scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.sticky-header-wrap.scrolled .main-header{ padding: 10px 0; transition: padding .2s ease; }
.sticky-header-wrap.scrolled .logo-wrap svg{ height: 34px; transition: height .2s ease; }
.sticky-header-wrap.scrolled .nav-bar .nav-link{ padding: 10px 16px; }
.main-header{ transition: padding .2s ease; }
.logo-wrap svg{ transition: height .2s ease; }
/* ==========================================================
   SEARCH AUTOCOMPLETE
   ========================================================== */
.search-wrap{ position: relative; }
.search-suggestions{
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: .875rem;
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
  z-index: 1050;
  max-height: 460px;
  overflow-y: auto;
  display: none;
}
.search-suggestions.show{ display: block; }
.ss-group{ padding: 8px 0; }
.ss-group + .ss-group{ border-top: 1px solid #F3F4F6; }
.ss-group-title{
  font-size: 11px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 16px 4px;
  display: flex; align-items: center; gap: 6px;
}
.ss-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .1s;
  font-size: 14px;
  user-select: none;
}
.ss-item:hover, .ss-item.active{ background: var(--brand-orange-light); }
.ss-item .ss-icon{
  width: 36px; height: 36px; border-radius: .5rem;
  background: #F3F4F6; color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; font-weight: 800;
}
.ss-item.ss-product .ss-icon{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.ss-item.ss-cat .ss-icon{ background: #EEF2FF; color: #4338CA; }
.ss-item.ss-brand .ss-icon{ background: #F0FDF4; color: #15803D; }
.ss-item.ss-oem .ss-icon{ background: #F5F3FF; color: #6D28D9; font-size: 11px; letter-spacing:.5px; }
.ss-item.ss-popular .ss-icon{ background: #FEF3C7; color: #B45309; }
.ss-label{ flex: 1; min-width: 0; }
.ss-label .t{
  font-weight: 700; color: #111827; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-label .t mark{ background: transparent; color: var(--brand-orange-dark); padding: 0; font-weight: 900; }
.ss-label .s{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-meta{
  font-size: 11px; color: #9CA3AF; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0;
}
.ss-footer{
  padding: 10px 16px; font-size: 11px; color: #6B7280;
  background: #F9FAFB; border-top: 1px solid #F3F4F6;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; gap: 10px; flex-wrap: wrap;
}
.ss-footer kbd{
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: .375rem; padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  font-family: 'Nunito', sans-serif; color: #374151;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.ss-footer .ss-view-all{ color: var(--brand-orange-dark); font-weight: 800; }
.ss-empty{
  padding: 36px 20px; text-align: center;
  color: #6B7280; font-size: 13px; font-weight: 600;
}
.ss-empty i{ font-size: 36px; color: #D1D5DB; display: block; margin-bottom: 8px; }
.ss-empty strong{ color: #111827; }
@media (max-width: 640px){
  .search-suggestions{ max-height: 55vh; }
  .ss-label .s{ display: none; }
}
/* ==========================================================
   PRODUCT CARD - INFO BUTTON (dettagli)
   ========================================================== */
.product-card .info-btn{
  position:absolute; top:10px; right:54px; z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95); color:#6B7280; border:0;
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.product-card .info-btn:hover{ color: var(--brand-orange-dark); transform: scale(1.1); background:#fff; }
.product-card .info-btn i{ font-size: 16px; }
.product-card .details-btn{
  background: transparent; color: var(--brand-orange-dark);
  border: 1.5px solid #E5E7EB; border-radius:.625rem;
  padding: 7px 10px; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap:4px;
  transition: all .15s;
  flex: 1;
}
.product-card .details-btn:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.product-card .p-actions{ display: flex; gap: 6px; }
.product-card .p-actions .add-btn{ flex: 1.5; padding: 7px 10px; font-size: 12px; }
/* ==========================================================
   MODAL - "VEDI SCHEDA COMPLETA" LINK
   ========================================================== */
.pm-full-link{
  display: inline-flex; align-items: center; gap:6px;
  font-size: 12px; font-weight: 800;
  color: var(--brand-orange-dark);
  padding: 4px 10px; background: var(--brand-orange-light);
  border-radius: 999px; width: fit-content;
  transition: all .15s;
  text-decoration: none;
}
.pm-full-link:hover{ background: var(--brand-orange); color: #fff; }
.pm-full-link i{ font-size: 14px; transition: transform .15s; }
.pm-full-link:hover i{ transform: translateX(3px); }
/* ==========================================================
   MODAL - DELIVERY & PICKUP OPTIONS
   ========================================================== */
.pm-delivery{
  border-top: 1px solid #F3F4F6;
  padding-top: 14px;
  margin-top: 4px;
}
.pm-delivery-title{
  font-size: 11px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.pm-delivery-title i{ color: var(--brand-orange-dark); font-size: 14px; }
.delivery-opt{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1.5px solid transparent;
  border-radius: .75rem;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.delivery-opt:hover{ background: #fff; border-color: #E5E7EB; }
.delivery-opt.selected{ background: #fff; border-color: var(--brand-orange); box-shadow: 0 2px 8px rgba(237,123,40,.08); }
.delivery-opt.disabled{ opacity: .5; cursor: not-allowed; }
.delivery-opt.disabled:hover{ background:#F9FAFB; border-color: transparent; }
.delivery-opt .do-icon{
  width:42px;height:42px;border-radius:.625rem;
  background: var(--brand-orange-light); color: var(--brand-orange-dark);
  display:flex;align-items:center;justify-content:center;
  font-size: 20px; flex-shrink: 0;
}
.delivery-opt.express .do-icon{ background: #FEF3C7; color: #B45309; }
.delivery-opt.pickup .do-icon{ background: #DCFCE7; color: #166534; }
.delivery-opt .do-info{ flex:1; min-width: 0; }
.delivery-opt .do-name{
  font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.delivery-opt .do-name .badge-eta{
  background: #ECFDF5; color: #065F46;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: .375rem;
  text-transform: uppercase; letter-spacing: .3px;
}
.delivery-opt .do-sub{ font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 3px; }
.delivery-opt .do-price{
  font-weight: 900; color: #111827; font-size: 15px;
  text-align: right; white-space: nowrap;
}
.delivery-opt .do-price.free{ color: #16A34A; }
.delivery-opt .do-price .old{
  display: block; font-size: 11px; font-weight: 700;
  color: #9CA3AF; text-decoration: line-through;
}
.delivery-opt .do-check{
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #D1D5DB;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  color: #fff;
}
.delivery-opt.selected .do-check{
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}
.delivery-opt .do-check i{ font-size: 14px; opacity: 0; transition: opacity .15s; }
.delivery-opt.selected .do-check i{ opacity: 1; }
.pm-pickup-hint{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  padding: 8px 12px; border-radius: .625rem;
  font-size: 12px; font-weight: 700;
  margin-top: -2px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pm-pickup-hint i{ font-size: 14px; }
/* Store availability row - pickup button */
.sap-item .sap-pick-btn{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 0; border-radius: .5rem;
  padding: 5px 10px;
  font-size: 11px; font-weight: 800;
  white-space: nowrap;
  margin-left: 4px;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0;
}
.sap-item .sap-pick-btn:hover{ background: var(--brand-orange); color: #fff; }
.sap-item.sap-out .sap-pick-btn{ display: none; }
.sap-item .sap-pick-btn.selected{ background: var(--brand-orange); color: #fff; }
.sap-item .sap-pick-btn i{ font-size: 12px; }
.sap-item .sap-ready{
  font-size: 10px; color:#16A34A; font-weight: 800;
  margin-top: 2px;
  text-transform: uppercase; letter-spacing: .3px;
}
.sap-item.sap-low .sap-ready{ color: #B45309; }
/* ==========================================================
   FLOATING ACTION BUTTONS (scroll-top + contatti)
   ========================================================== */
.fab-container{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1035;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.fab-container > *{ pointer-events: auto; }
.scroll-top-btn{
  width: 48px; height: 48px; border-radius: 50%;
  background: #1F2937; color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0; transform: translateY(20px) scale(.85);
  pointer-events: none !important;
  transition: transform .25s ease, opacity .25s ease, background .15s;
  cursor: pointer;
}
.scroll-top-btn.show{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto !important;
}
.scroll-top-btn:hover{ background: #111827; transform: translateY(-3px) scale(1.05); }
.contact-fab-wrap{ position: relative; }
.contact-fab{
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; border: 0;
  box-shadow: 0 6px 20px rgba(237,123,40,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.contact-fab:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(237,123,40,.5); }
.contact-fab .cf-pulse{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  animation: cf-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes cf-pulse{
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.contact-fab i{ transition: transform .25s ease; }
.contact-fab.open{ background: #111827; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.contact-fab.open .cf-pulse{ display: none; }
.contact-fab.open i{ transform: rotate(180deg); }
.contact-dropdown{
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 290px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 24px 50px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08);
  padding: 8px;
  opacity: 0; transform: translateY(12px) scale(.94);
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: bottom right;
}
.contact-dropdown.show{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.contact-dropdown::before{
  content: '';
  position: absolute;
  bottom: -7px; right: 22px;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.06);
  z-index: -1;
}
.contact-dropdown .cd-header{
  padding: 10px 12px 12px;
  border-bottom: 1px solid #F3F4F6;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.contact-dropdown .cd-header .cd-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.contact-dropdown .cd-title{
  font-weight: 900; font-size: 15px; color: #111827; line-height: 1.2;
}
.contact-dropdown .cd-sub{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 2px;
}
.contact-option{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: .625rem;
  transition: background .15s, transform .1s;
  cursor: pointer;
  color: #111827;
  text-decoration: none;
  border: 0; background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.contact-option:hover{ background: #F9FAFB; color: #111827; }
.contact-option:active{ transform: scale(.98); }
.contact-option .co-icon{
  width: 40px; height: 40px; border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  color: #fff;
}
.contact-option.co-email .co-icon{ background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.contact-option.co-whatsapp .co-icon{ background: linear-gradient(135deg,#25D366,#128C7E); }
.contact-option.co-telegram .co-icon{ background: linear-gradient(135deg,#2AABEE,#1E88CA); }
.contact-option.co-upload .co-icon{ background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)); }
.contact-option .co-info{ flex: 1; min-width: 0; }
.contact-option .co-name{
  font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2;
}
.contact-option .co-sub{
  font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-option .co-chev{
  color: #9CA3AF; font-size: 14px;
  flex-shrink: 0;
  transition: transform .15s;
}
.contact-option:hover .co-chev{ color: var(--brand-orange-dark); transform: translateX(2px); }
/* ==========================================================
   LIBRETTO UPLOAD MODAL
   ========================================================== */
.libretto-upload-zone{
  border: 2px dashed var(--brand-orange);
  border-radius: 1rem;
  padding: 36px 20px;
  text-align: center;
  background: var(--brand-orange-light);
  transition: all .2s;
  cursor: pointer;
}
.libretto-upload-zone:hover, .libretto-upload-zone.dragover{
  background: #fff;
  border-color: var(--brand-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(237,123,40,.15);
}
.libretto-upload-zone .upload-big{
  font-size: 54px;
  color: var(--brand-orange-dark);
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.libretto-upload-zone .title{
  font-weight: 900; font-size: 16px; color: #111827;
}
.libretto-upload-zone .title span{ color: var(--brand-orange-dark); text-decoration: underline; }
.libretto-upload-zone .sub{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 6px;
}
.libretto-file-input{ display: none; }
.libretto-preview{
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: .875rem;
  margin-top: 14px;
}
.libretto-preview .lp-icon{
  width: 48px; height: 48px; border-radius: .625rem;
  background: #22C55E; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.libretto-preview .lp-info{ flex: 1; min-width: 0; }
.libretto-preview .lp-name{
  font-weight: 800; font-size: 13px; color: #166534;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.libretto-preview .lp-size{
  font-size: 11px; color: #15803D; font-weight: 700; margin-top: 2px;
}
.libretto-preview .lp-remove{
  background: transparent; border: 0; color: #6B7280;
  font-size: 20px; padding: 4px 8px; line-height: 1;
  transition: color .15s;
}
.libretto-preview .lp-remove:hover{ color: #DC2626; }
.libretto-privacy{
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: #6B7280; font-weight: 700;
  margin-top: 14px; padding: 10px 12px;
  background: #F9FAFB; border-radius: .625rem;
}
.libretto-privacy span{ display: inline-flex; align-items: center; gap: 4px; }
.libretto-privacy i{ color: #16A34A; font-size: 13px; }
/* ==========================================================
   REGISTER MODAL
   ========================================================== */
.reg-tab-switcher{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 22px;
}
.reg-tab{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 2px solid #E5E7EB;
  background: #fff; border-radius: .875rem;
  text-align: left; transition: all .15s;
  cursor: pointer;
}
.reg-tab:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.reg-tab.active{
  border-color: var(--brand-orange); background: var(--brand-orange-light);
  box-shadow: 0 4px 12px rgba(237,123,40,.12);
}
.reg-tab > i{ font-size: 26px; color: var(--brand-orange-dark); flex-shrink: 0; }
.reg-tab-title{ font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2; }
.reg-tab-sub{ font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px; }
.reg-form{ display: none; }
.reg-form.active{ display: block; }
.reg-section-title{
  font-weight: 800; font-size: 12px; color: var(--brand-orange-dark);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 12px; display: flex; align-items: center;
}
.reg-section-title + .row{ margin-top: 0; }
.visura-upload-zone{
  border: 2px dashed var(--brand-orange);
  border-radius: 1rem;
  padding: 22px 18px;
  text-align: center;
  background: var(--brand-orange-light);
  transition: all .2s;
  cursor: pointer;
  display: block;
  margin-bottom: 0;
}
.visura-upload-zone:hover, .visura-upload-zone.dragover{
  background: #fff;
  border-color: var(--brand-orange-dark);
  box-shadow: 0 6px 14px rgba(237,123,40,.15);
}
.visura-upload-zone .upload-big{
  font-size: 38px;
  color: var(--brand-orange-dark);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.visura-upload-zone .title{
  font-weight: 800; font-size: 14px; color: #111827;
}
.visura-upload-zone .title span{ color: var(--brand-orange-dark); text-decoration: underline; }
.visura-upload-zone .sub{
  font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 6px; line-height: 1.5;
}
#registerModal .modal-body{ max-height: 70vh; overflow-y: auto; }
#registerModal .form-label{ font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
#registerModal .form-control{ font-size: 14px; }
/* ==========================================================
   FORGOT PASSWORD MODAL
   ========================================================== */
.forgot-step{ display: none; }
.forgot-step.active{ display: block; animation: forgotFadeIn .25s ease; }
@keyframes forgotFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.forgot-success-icon{
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.forgot-success-icon.success{ background: #DCFCE7; color: #16A34A; }
.forgot-instructions{
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: .75rem;
  padding: 12px 14px;
}
.fi-item{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #374151; font-weight: 600;
  padding: 5px 0;
}
.fi-item i{ color: var(--brand-orange-dark); font-size: 18px; flex-shrink: 0; }
.pwd-strength{ display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pwd-bar{
  flex: 1; height: 6px; background: #E5E7EB;
  border-radius: 3px; overflow: hidden;
}
.pwd-bar-fill{
  height: 100%; width: 0;
  background: #DC2626;
  transition: width .2s, background .2s;
}
.pwd-bar-fill.medium{ background: #F59E0B; }
.pwd-bar-fill.strong{ background: #22C55E; }
.pwd-label{ font-size: 11px; font-weight: 700; color: #6B7280; white-space: nowrap; }
#forgotModal .form-label{ font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
@media (max-width: 640px){
  .fab-container{ bottom: 16px; right: 16px; gap: 8px; }
  .scroll-top-btn{ width: 44px; height: 44px; font-size: 19px; }
  .contact-fab{ width: 54px; height: 54px; font-size: 23px; }
  .contact-dropdown{ width: 270px; }
  .libretto-upload-zone{ padding: 24px 16px; }
  .libretto-upload-zone .upload-big{ font-size: 42px; }
  .reg-tab-switcher{ grid-template-columns: 1fr; }
}
/* ==========================================================
   CATALOG PAGE
   ========================================================== */
.catalog-breadcrumb{
  background:#fff; padding: 14px 0; border-bottom:1px solid #F3F4F6;
}
.catalog-breadcrumb .breadcrumb{ margin:0; font-size: 13.5px; font-weight:700; }
.catalog-breadcrumb .breadcrumb-item a{ color:#6B7280; }
.catalog-breadcrumb .breadcrumb-item a:hover{ color: var(--brand-orange-dark); }
.catalog-breadcrumb .breadcrumb-item.active{ color:#111827; }
.catalog-breadcrumb .breadcrumb-item+.breadcrumb-item::before{ color:#D1D5DB; }

.catalog-wrapper{ padding: 22px 0 60px; background:#F9FAFB; }
.catalog-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}
@media (max-width: 991.98px){
  .catalog-layout{ grid-template-columns: 1fr; }
  .cat-sidebar{ display:none; }
}

/* Sidebar */
.cat-sidebar{
  position: sticky; top: 170px;
  align-self: start;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background:#fff; border:1px solid #E5E7EB; border-radius: 1rem;
  padding: 18px 16px;
  scrollbar-width: thin;
}
.cat-sidebar::-webkit-scrollbar{ width: 6px; }
.cat-sidebar::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius: 3px; }
.cs-section{ padding: 10px 0; border-bottom: 1px solid #F3F4F6; }
.cs-section:last-child{ border-bottom:none; }
.cs-section-title{
  font-weight: 900; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color:#111827; margin-bottom: 10px;
  display:flex; align-items:center; gap:8px;
}
.cs-section-title i{ color: var(--brand-orange); }

/* Category tree */
.cat-tree{ list-style:none; padding:0; margin:0; }
.cat-tree-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding: 8px 10px; border-radius: .5rem;
  cursor:pointer; font-weight:700; font-size: 14px; color:#374151;
  transition: all .15s ease;
}
.cat-tree-item:hover{ background:#F3F4F6; color:#111827; }
.cat-tree-item.active{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark); font-weight: 900;
}
.cat-tree-item .cat-count{
  font-size: 11.5px; font-weight: 800;
  color: #6B7280; background:#F3F4F6;
  padding: 2px 8px; border-radius: 999px;
}
.cat-tree-item.active .cat-count{
  background: var(--brand-orange); color:#fff;
}
.cat-sub{
  list-style:none; padding: 4px 0 6px 14px; margin: 0;
  border-left: 2px solid #F3F4F6;
}
.cat-sub .cat-tree-item{
  font-size: 13px; padding: 6px 10px; font-weight: 600;
}
.cat-tree-item.has-children .cat-chev{
  font-size: 10px; color: #9CA3AF;
  margin-right: 4px;
  transition: transform .2s ease, color .2s ease;
}
.cat-tree-item.has-children.active .cat-chev{
  color: var(--brand-orange);
}
.cat-subsub{
  padding-left: 16px;
  border-left-color: #FDE4CF;
  margin-top: 2px;
}
.cat-subsub .cat-tree-item{
  font-size: 12.5px; padding: 5px 10px 5px 12px; font-weight: 600;
  color: #4B5563;
  position: relative;
}
.cat-subsub .cat-tree-item::before{
  content: ""; position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1.5px;
  background: #FDE4CF;
  transform: translateY(-50%);
}
.cat-subsub .cat-tree-item.active{
  background: #FFF8F0;
  color: var(--brand-orange-dark);
}
.cat-subsub .cat-tree-item.active::before{
  background: var(--brand-orange);
  width: 8px; height: 2px;
}
.cat-subsub .cat-tree-item .cat-count{
  font-size: 10.5px;
  padding: 1px 7px;
}

/* Filter search */
.filter-search{
  position: relative;
}
.filter-search input{
  font-size: 13px; padding: 7px 10px 7px 32px;
  border: 1px solid #E5E7EB; border-radius: .5rem;
}
.filter-search input:focus{
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
  outline:none;
}
.filter-search i{
  position:absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color:#9CA3AF; font-size: 14px;
}

/* Checkbox list (brands / availability) */
.checkbox-list{
  list-style:none; padding:0; margin: 0;
  max-height: 220px; overflow-y: auto;
  scrollbar-width: thin;
}
.checkbox-list::-webkit-scrollbar{ width: 5px; }
.checkbox-list::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius: 3px; }
.checkbox-list li{ padding: 5px 0; }
.checkbox-list .form-check{
  display:flex; align-items:center; gap: 8px; margin:0;
  font-size: 13.5px; font-weight: 600; color:#374151;
  cursor: pointer;
}
.checkbox-list .form-check-input{
  margin: 0; cursor:pointer;
  border: 1.5px solid #D1D5DB;
}
.checkbox-list .form-check-input:checked{
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.checkbox-list .form-check-input:focus{
  box-shadow: 0 0 0 2px rgba(237,123,40,.18);
}
.checkbox-list .form-check-label{ cursor:pointer; flex:1; }
.checkbox-list .cl-count{
  font-size: 11px; color:#9CA3AF; font-weight:700; margin-left: auto;
}

/* Price range */
.price-range{ padding: 4px 0 6px; }
.price-range .range-inputs{
  display:grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  align-items:center; margin-bottom: 10px;
}
.price-range .range-inputs input{
  font-size: 13px; padding: 6px 8px; text-align:center;
  border: 1px solid #E5E7EB; border-radius: .5rem; font-weight:700;
}
.price-range .range-inputs input:focus{
  outline:none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}
.price-range .range-sep{ color:#9CA3AF; font-weight: 800; }
.price-range .range-slider{
  width: 100%; accent-color: var(--brand-orange);
}
.price-range .range-labels{
  display:flex; justify-content:space-between;
  font-size: 11.5px; color:#6B7280; font-weight:700; margin-top: 4px;
}

/* Rating filter */
.rating-filter{ list-style:none; padding:0; margin:0; }
.rating-filter li{ padding: 4px 0; }
.rating-filter .form-check{
  display:flex; align-items:center; gap: 8px; margin:0; cursor:pointer;
  font-size: 13px; font-weight: 600; color:#374151;
}
.rating-filter .form-check-input{
  margin: 0;
  border: 1.5px solid #D1D5DB;
}
.rating-filter .form-check-input:checked{
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.rating-filter .stars{ display:inline-flex; gap: 1px; }
.rating-filter .stars i{ color: #FBBF24; font-size: 13px; }
.rating-filter .stars i.off{ color: #E5E7EB; }

/* Vehicle filter */
.vehicle-filter-btn{
  width: 100%; display:flex; align-items:center; gap: 10px;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1.5px dashed var(--brand-orange);
  border-radius: .75rem; padding: 10px 12px;
  font-weight: 800; font-size: 13.5px;
  transition: all .15s ease;
}
.vehicle-filter-btn:hover{ background: #fff; border-style: solid; }
.vehicle-filter-btn.has-vehicle{
  background:#fff; border-style: solid;
  color:#111827;
}
.vehicle-filter-btn.has-vehicle i{ color: var(--brand-orange); }
.vehicle-filter-btn .vf-text{ flex:1; text-align:left; line-height: 1.2; }
.vehicle-filter-btn .vf-text small{
  display:block; font-weight:700; color:#6B7280; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Clear filters */
.clear-filters-btn{
  width: 100%;
  background:#fff; border: 1.5px solid #F3F4F6;
  color:#6B7280; font-weight: 800; font-size: 13px;
  padding: 9px 12px; border-radius: .5rem;
  transition: all .15s ease;
}
.clear-filters-btn:hover{ color:#EF4444; border-color:#FECACA; }

/* Catalog main content */
.catalog-main{ min-width: 0; }

.catalog-header{
  background:#fff; border: 1px solid #E5E7EB; border-radius: 1rem;
  padding: 22px 24px; margin-bottom: 16px;
}
.catalog-title{
  font-weight: 900; font-size: 1.9rem; color:#111827; margin:0 0 4px;
  display:flex; align-items:center; gap:12px;
}
.catalog-title i{
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--brand-orange-light); color: var(--brand-orange);
  display:inline-flex; align-items:center; justify-content:center; font-size: 26px;
}
.catalog-subtitle{ color:#6B7280; margin: 0; font-size: 14.5px; }

/* Active filter chips */
.active-filters{
  display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px;
}
.filter-chip{
  display:inline-flex; align-items:center; gap: 6px;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1px solid rgba(237,123,40,.3);
  border-radius: 999px; padding: 5px 10px 5px 12px;
  font-size: 12.5px; font-weight: 800;
}
.filter-chip .fc-close{
  width: 18px; height: 18px; border-radius:50%;
  background: var(--brand-orange); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 10px; cursor:pointer; border:none;
  transition: background .15s;
}
.filter-chip .fc-close:hover{ background: var(--brand-orange-dark); }

/* Sort bar */
.sort-bar{
  background:#fff; border:1px solid #E5E7EB; border-radius: .75rem;
  padding: 10px 14px; margin-bottom: 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; flex-wrap: wrap;
}
.results-count{ font-size: 13.5px; color:#6B7280; font-weight:700; }
.results-count strong{ color:#111827; }
.sort-actions{ display:flex; align-items:center; gap: 10px; }
.sort-select{
  font-size: 13px; font-weight: 700; color:#374151;
  border: 1px solid #E5E7EB; border-radius: .5rem;
  padding: 6px 28px 6px 12px; background-color:#fff;
  min-width: 200px;
}
.sort-select:focus{
  outline:none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}

/* Catalog grid — layout orizzontale a lista */
.catalog-grid{
  display:flex; flex-direction: column;
  gap: 14px;
}
/* Card: override del layout verticale a 240px usato nelle scroll-row */
.catalog-grid .product-card{
  width: 100% !important;
  flex-shrink: 1;
  flex-direction: row;
  padding: 14px;
  gap: 18px;
  align-items: stretch;
}
.catalog-grid .product-card:hover{
  transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* Immagine: fissa a sinistra */
.catalog-grid .product-card .img-wrap{
  aspect-ratio: unset;
  width: 200px; height: 200px;
  border-radius: .75rem;
  flex-shrink: 0;
  overflow: hidden;
}
.catalog-grid .product-card .img-wrap i{ font-size: 64px; }

/* Info + heart: posizione e dimensione coerenti sulla card orizzontale */
.catalog-grid .product-card .wish,
.catalog-grid .product-card .info-btn{
  width: 32px; height: 32px;
  top: 8px;
}
.catalog-grid .product-card .wish{ right: 8px; }
.catalog-grid .product-card .info-btn{ right: 48px; }
.catalog-grid .product-card .wish i,
.catalog-grid .product-card .info-btn i{ font-size: 15px; }
/* Badge sconto/rank spostati leggermente per coerenza visiva */
.catalog-grid .product-card .rank,
.catalog-grid .product-card .disc-badge{ top: 8px; left: 8px; }
.catalog-grid .product-card .rank + .disc-badge{ top: 46px; }

/* Body: 2 colonne tramite grid-template-areas + ordine DOM mantenuto.
   Colonna SX: info (auto-placed con grid-column:1)
   Colonna DX: p-bottom che occupa tutte le righe */
.catalog-grid .product-card .body{
  padding: 0;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 220px;
  column-gap: 20px;
  row-gap: 0;
  align-content: start;   /* non stirare le righe */
  align-items: start;     /* non stirare i singoli item */
}
/* Info items in colonna 1 impilati */
.catalog-grid .product-card .body > .brand,
.catalog-grid .product-card .body > .p-name,
.catalog-grid .product-card .body > .rating,
.catalog-grid .product-card .body > .p-specs,
.catalog-grid .product-card .body > .prices,
.catalog-grid .product-card .body > .last-viewed{
  grid-column: 1;
  min-width: 0;
}
.catalog-grid .product-card .brand{
  padding-top: 2px;
  font-size: 11px;
  margin: 0;
}
.catalog-grid .product-card .p-name{
  font-size: 1.05rem;
  line-height: 1.35;
  min-height: 0;
  -webkit-line-clamp: 2;
  margin: 4px 0 2px;
}
.catalog-grid .product-card .rating{
  font-size: 13px;
  margin: 4px 0 0;
}
/* Tabella specifiche articolo: 2 colonne compatte sotto le stelle */
.catalog-grid .product-card .p-specs{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  border-top: 1px dashed #E5E7EB;
  border-bottom: 1px dashed #E5E7EB;
  padding: 6px 0 4px;
}
.catalog-grid .product-card .p-spec{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  min-width: 0;
  border-bottom: 1px dotted #F3F4F6;
}
.catalog-grid .product-card .p-spec:nth-last-child(-n+2){
  border-bottom: 0;
}
.catalog-grid .product-card .p-spec-k{
  color: #6B7280;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.catalog-grid .product-card .p-spec-v{
  color: #111827;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-grid .product-card .prices{
  margin-top: 10px;
  align-items: baseline;
}
.catalog-grid .product-card .price-new{ font-size: 22px; }
.catalog-grid .product-card .price-old{ font-size: 14px; }
.catalog-grid .product-card .last-viewed{
  margin-top: 4px;
  font-size: 12px;
}

/* p-bottom in colonna 2, estende a tutte le righe */
.catalog-grid .product-card .body > .p-bottom{
  grid-column: 2;
  grid-row: 1 / span 99;     /* span esplicito per coprire tutti gli item della col.1 */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-self: stretch;
  padding-left: 20px;
  border-left: 1px dashed #E5E7EB;
  min-width: 0;
}
.catalog-grid .product-card .store-toggle{
  font-size: 12px; padding: 8px 12px;
}
/* NB: no max-height/overflow su .store-list perché interferisce con Bootstrap collapse */
.catalog-grid .product-card .store-list{ padding-top: 4px; }
.catalog-grid .product-card .p-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.catalog-grid .product-card .details-btn,
.catalog-grid .product-card .add-btn{
  width: 100%;
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: 13px;
}

/* Breakpoint tablet */
@media (max-width: 991.98px){
  .catalog-grid .product-card{ padding: 12px; gap: 14px; }
  .catalog-grid .product-card .img-wrap{ width: 160px; height: 160px; }
  .catalog-grid .product-card .body{
    grid-template-columns: 1fr 180px;
    column-gap: 16px;
  }
  .catalog-grid .product-card .body > .p-bottom{ padding-left: 16px; }
}

/* Breakpoint mobile — pila verticale */
@media (max-width: 640px){
  .catalog-grid .product-card{
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }
  .catalog-grid .product-card .img-wrap{
    width: 100%; height: 200px;
  }
  .catalog-grid .product-card .body{
    grid-template-columns: 1fr;
  }
  .catalog-grid .product-card .body > .brand,
  .catalog-grid .product-card .body > .p-name,
  .catalog-grid .product-card .body > .rating,
  .catalog-grid .product-card .body > .prices,
  .catalog-grid .product-card .body > .last-viewed,
  .catalog-grid .product-card .body > .p-bottom{
    grid-column: 1;
    grid-row: auto;
  }
  .catalog-grid .product-card .body > .p-bottom{
    padding-left: 0;
    border-left: none;
    border-top: 1px dashed #E5E7EB;
    padding-top: 10px;
    margin-top: 6px;
  }
  /* Su mobile manteniamo i bottoni impilati (Dettagli sopra, Aggiungi sotto). */
  .catalog-grid .product-card .p-actions{ flex-direction: column; }
  .catalog-grid .product-card .details-btn,
  .catalog-grid .product-card .add-btn{ width: 100%; flex: 0 0 auto; }
}

/* Catalog pagination */
.catalog-pagination{
  display:flex; justify-content:center; margin-top: 24px;
}
.catalog-pagination .pagination{ margin: 0; gap: 4px; }
.catalog-pagination .page-link{
  min-width: 40px; height: 40px; border-radius: .5rem !important;
  border: 1px solid #E5E7EB;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 800; color:#374151; font-size: 14px;
  padding: 0 12px;
}
.catalog-pagination .page-link:hover{
  color: var(--brand-orange-dark);
  background: var(--brand-orange-light);
  border-color: var(--brand-orange-light);
}
.catalog-pagination .page-item.active .page-link{
  background: var(--brand-orange); border-color: var(--brand-orange);
  color:#fff;
}
.catalog-pagination .page-item.disabled .page-link{ color:#D1D5DB; background:#F9FAFB; }

/* Mobile filters button */
.mobile-filters-btn{
  display: none;
  width: 100%; background: var(--brand-orange);
  color:#fff; font-weight: 800; border:none;
  padding: 12px; border-radius: .75rem; font-size: 14px;
  margin-bottom: 12px;
}
.mobile-filters-btn i{ margin-right: 6px; }
@media (max-width: 991.98px){
  .mobile-filters-btn{ display: inline-flex; align-items:center; justify-content: center; }
}

/* Filters offcanvas (mobile) */
.filters-offcanvas .offcanvas-body{ padding: 0; }
.filters-offcanvas .cat-sidebar{
  position: static; max-height: none; border: none; border-radius: 0;
  padding: 18px;
}

/* Empty state */
.catalog-empty{
  background:#fff; border:2px dashed #E5E7EB; border-radius: 1rem;
  padding: 50px 20px; text-align: center;
}
.catalog-empty i{ font-size: 56px; color:#D1D5DB; margin-bottom: 14px; display:block; }
.catalog-empty h4{ font-weight: 900; color:#111827; margin-bottom: 6px; }
.catalog-empty p{ color:#6B7280; margin: 0 0 16px; }

/* Category banner */
.cat-banner{
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  color:#fff; border-radius: 1rem; padding: 22px 26px; margin-bottom: 16px;
  display:flex; align-items:center; gap:18px;
  position: relative; overflow: hidden;
}
.cat-banner::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width: 220px; height: 220px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.cat-banner .cb-ico{
  width: 64px; height: 64px; border-radius: 14px;
  background: rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 32px; flex-shrink: 0; position: relative; z-index: 1;
}
.cat-banner h4{ font-weight: 900; margin: 0 0 4px; position: relative; z-index: 1; }
.cat-banner p{ margin: 0; opacity: .95; font-size: 14px; position: relative; z-index: 1; }


/* ============================================================
   PAGE · dettaglio.html
   ============================================================ */

/* ==========================================================
   THEME OVERRIDES BOOTSTRAP (custom variables)
   ========================================================== */
body{ font-family: 'Nunito', system-ui, sans-serif; color:#212529; background:#fff; }
/* Primary button override */
.btn-primary{
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  font-weight: 800;
}
.btn-outline-primary{
  --bs-btn-color: var(--brand-orange-dark);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: var(--brand-orange);
  --bs-btn-hover-border-color: var(--brand-orange);
  --bs-btn-active-bg: var(--brand-orange-dark);
  --bs-btn-active-border-color: var(--brand-orange-dark);
  font-weight: 800;
}
a{ color: var(--brand-orange-dark); text-decoration:none; }
a:hover{ color: var(--brand-orange); }
.text-brand{ color: var(--brand-orange-dark) !important; }
.bg-brand{ background: var(--brand-orange) !important; color:#fff; }
.bg-brand-light{ background: var(--brand-orange-light) !important; }
/* ==========================================================
   TOP UTILITY BAR
   ========================================================== */
.top-utility{
  background: #1F2937; color: #E5E7EB;
  font-size: 13px; font-weight: 600;
}
.top-utility a{ color: #E5E7EB; }
.top-utility a:hover{ color: #fff; }
.top-utility .store-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.25);
  vertical-align: middle; margin-left:4px;
}
/* ==========================================================
   HEADER PRINCIPALE
   ========================================================== */
.main-header{ background:#fff; border-bottom:1px solid #E5E7EB; padding: 16px 0; }
.logo-wrap svg{ height: 40px; width:auto; }
.vehicle-btn{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1.5px dashed var(--brand-orange);
  border-radius: .875rem;
  padding: 10px 16px; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.vehicle-btn:hover{ background:#fff; border-style:solid; color:var(--brand-orange-dark); }
.vehicle-btn.has-vehicle{ background:#fff; border-style:solid; }
.vehicle-btn i{ font-size: 22px; }
.vehicle-btn .v-label{ font-size: 11px; text-transform:uppercase; color:#6B7280; font-weight:700; letter-spacing:.4px; }
.vehicle-btn .v-title{ font-size: 14px; font-weight:800; color:#111827; line-height:1.1; }
.vehicle-btn .v-summary{ font-size: 12px; color:var(--brand-orange-dark); font-weight:700; margin-top:1px; }
.search-wrap{
  position:relative; flex:1;
}
.search-wrap .form-control{
  border-radius: .875rem; border:2px solid #E5E7EB; padding: 14px 140px 14px 44px;
  font-size:15px; font-weight: 500;
}
.search-wrap .form-control:focus{ border-color: var(--brand-orange); box-shadow: 0 0 0 .2rem rgba(237,123,40,.18); }
.search-wrap .bi-search{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:20px; }
.search-wrap .btn-search{
  position:absolute; right:6px; top:6px; bottom:6px;
  padding: 0 22px; font-weight:800; border-radius: .75rem;
}
.header-actions .act-btn{
  display:flex;align-items:center;gap:8px;
  padding: 10px 14px; background:#F9FAFB; color:#374151;
  border-radius:.75rem; border:1px solid transparent;
  font-size:13px; font-weight:700; position:relative;
  transition: all .15s;
}
.header-actions .act-btn:hover{ background:var(--brand-orange-light); color:var(--brand-orange-dark); }
.header-actions .act-btn.has-store{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.header-actions .act-btn i{ font-size: 22px; }
.header-actions .cart-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--brand-orange); color:#fff;
  min-width:20px; height:20px; border-radius:10px;
  font-size:11px; font-weight:800;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px; transition: transform .2s;
}
/* ==========================================================
   NAV CATEGORIE
   ========================================================== */
.nav-bar{ background:#111827; }
.nav-bar .nav-link{
  color:#E5E7EB !important; font-weight: 700; font-size:14px;
  padding: 14px 16px;
}
.nav-bar .nav-link:hover{ color:#fff !important; background: rgba(255,255,255,.05); }
.nav-bar .nav-link.active{ color:var(--brand-orange) !important; background: rgba(237,123,40,.1); }
.nav-bar .nav-link i{ margin-right:6px; }
.nav-bar .nav-link.dropdown-toggle::after{
  margin-left: 8px; vertical-align: 0.15em;
}
/* Quando il dropdown categorie è aperto, la nav non deve clippare */
.nav-bar ul.nav.dropdown-open{ overflow: visible !important; }
.nav-bar .dropdown-menu.categories-menu{
  background: #1F2937;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .625rem;
  padding: 10px;
  margin-top: 2px !important;
  min-width: 520px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  z-index: 1050;
}
.nav-bar .dropdown-menu.categories-menu .cat-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item{
  color: rgba(255,255,255,.85);
  border-radius: .5rem;
  padding: 9px 12px;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item:hover,
.nav-bar .dropdown-menu.categories-menu .dropdown-item:focus{
  background: rgba(237,123,40,.16);
  color: var(--brand-orange);
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item i{
  color: var(--brand-orange);
  font-size: 16px; width: 20px; text-align: center;
  margin: 0;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-item .cat-count{
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}
.nav-bar .dropdown-menu.categories-menu .dropdown-divider{
  border-color: rgba(255,255,255,.08);
  margin: 8px 4px;
}
.nav-bar .dropdown-menu.categories-menu .cats-footer{
  padding: 6px 8px 2px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,.6);
}
.nav-bar .dropdown-menu.categories-menu .cats-footer a{
  color: var(--brand-orange);
  font-weight: 800; text-decoration: none;
}
.nav-bar .dropdown-menu.categories-menu .cats-footer a:hover{ text-decoration: underline; }
@media (max-width: 640px){
  .nav-bar .dropdown-menu.categories-menu{ min-width: 280px; }
  .nav-bar .dropdown-menu.categories-menu .cat-grid{ grid-template-columns: 1fr; }
}
/* ==========================================================
   HERO RICERCA VEICOLO
   ========================================================== */
.vehicle-hero{
  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
  padding: 32px 0; border-bottom:1px solid #E5E7EB;
}
.vehicle-hero h3{ font-weight:900; font-size:22px; color:#111827; }
.vehicle-hero p{ font-size:14px; color:#6B7280; font-weight:600; }
.vehicle-hero .form-select, .vehicle-hero .form-control{
  border-radius:.75rem; border-width:2px; padding:12px 14px; font-weight:700;
}
/* ==========================================================
   CAROUSEL PROMO (Bootstrap)
   ========================================================== */
.promo-carousel{ margin-top:24px; border-radius: 1.25rem; overflow:hidden; }
.promo-carousel .carousel-item{ min-height: 240px; }
.promo-carousel .slide-content{
  display:flex; align-items:center; justify-content:space-between;
  padding: 40px 56px; color:#fff; min-height:240px;
}
.promo-carousel .slide-content .ico i{ font-size: 140px; opacity:.3; }
.promo-carousel h2{ font-size: 34px; font-weight:900; margin-bottom:8px; }
.promo-carousel p{ font-size: 15px; opacity:.95; margin-bottom:14px; max-width:480px; }
.promo-carousel .slide-1{ background: linear-gradient(135deg, #ED7B28, #C96620); }
.promo-carousel .slide-2{ background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.promo-carousel .slide-3{ background: linear-gradient(135deg, #10B981, #047857); }
.promo-carousel .slide-4{ background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.promo-carousel .slide-5{ background: linear-gradient(135deg, #EF4444, #B91C1C); }
.promo-carousel .btn-light{ font-weight:800; border-radius:.75rem; padding: 10px 22px; color: var(--brand-orange-dark); }
@media (max-width: 768px){
  .promo-carousel .slide-content{ padding: 28px; }
  .promo-carousel h2{ font-size: 22px; }
  .promo-carousel .ico{ display:none; }
}
/* ==========================================================
   SEZIONI PRODOTTI (carousel orizzontale custom)
   ========================================================== */
.products-section{ padding: 40px 0 8px; }
.products-section h3{ font-weight: 900; font-size: 24px; color:#111827; }
.products-section p.sub{ font-size:14px; color:#6B7280; font-weight:500; margin:0; }
.products-scroll{
  display:flex; gap:14px; overflow-x:auto;
  align-items: flex-start;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 20px; margin: -4px -2px 0;
}
.products-scroll::-webkit-scrollbar{ display:none; }
.product-card{
  flex-shrink:0; width:240px;
  background:#fff; border:1.5px solid #E5E7EB;
  border-radius: 1rem; overflow: hidden; scroll-snap-align: start;
  display:flex; flex-direction:column; transition: all .2s;
  position: relative; cursor: pointer;
}
.product-card:hover{ border-color: var(--brand-orange); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.product-card .img-wrap{
  aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
  position:relative;
}
.product-card .img-wrap i{ font-size:72px; color:#9CA3AF; }
.product-card.theme-1 .img-wrap{ background: linear-gradient(135deg, #FEE2E2, #FECACA); } .product-card.theme-1 .img-wrap i{ color:#B91C1C; }
.product-card.theme-2 .img-wrap{ background: linear-gradient(135deg, #DBEAFE, #BFDBFE); } .product-card.theme-2 .img-wrap i{ color:#1E40AF; }
.product-card.theme-3 .img-wrap{ background: linear-gradient(135deg, #FEF3C7, #FDE68A); } .product-card.theme-3 .img-wrap i{ color:#B45309; }
.product-card.theme-4 .img-wrap{ background: linear-gradient(135deg, #D1FAE5, #A7F3D0); } .product-card.theme-4 .img-wrap i{ color:#047857; }
.product-card.theme-5 .img-wrap{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); } .product-card.theme-5 .img-wrap i{ color:#4338CA; }
.product-card.theme-6 .img-wrap{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); } .product-card.theme-6 .img-wrap i{ color:#BE185D; }
.product-card.theme-7 .img-wrap{ background: linear-gradient(135deg, #E0F2FE, #BAE6FD); } .product-card.theme-7 .img-wrap i{ color:#0369A1; }
.product-card.theme-8 .img-wrap{ background: linear-gradient(135deg, #F3E8FF, #E9D5FF); } .product-card.theme-8 .img-wrap i{ color:#6B21A8; }
.product-card .rank{
  position:absolute; top:10px; left:10px; z-index:2;
  width:32px;height:32px;border-radius:50%;
  background: linear-gradient(135deg,#F59E0B,#D97706);
  color:#fff; font-weight:900; font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.product-card .disc-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: var(--brand-orange); color:#fff;
  font-size:12px; font-weight:800; padding:4px 9px; border-radius:.5rem;
}
.product-card .rank + .disc-badge{ top: 50px; }
.product-card .wish{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95); color:#9CA3AF; border:0;
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
}
.product-card .wish:hover{ color:#dc2626; transform:scale(1.1); }
.product-card .wish.active{ color:#dc2626; }
.product-card .wish i{ font-size: 18px; }
.product-card .body{ padding: 14px; display:flex; flex-direction:column; flex:1; gap:6px; }
.product-card .brand{ font-size:11px; font-weight:800; color:#6B7280; text-transform: uppercase; letter-spacing:.5px; }
.product-card .p-name{
  font-size:14px; font-weight:700; color:#111827; line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:36px;
}
.product-card .rating{ font-size: 12px; color:#6B7280; font-weight:600; display:flex; align-items:center; gap:4px; }
.product-card .rating .stars{ color:#F59E0B; }
.product-card .prices{ display:flex;align-items:baseline;gap:8px; margin-top:2px; }
.product-card .price-new{ font-size:18px; font-weight:900; color:#111827; }
.product-card .price-old{ font-size:13px; color:#6B7280; text-decoration:line-through; font-weight:600; }
.product-card .last-viewed{ font-size:11px; color:#6B7280; font-weight:600; display:flex; align-items:center; gap:4px; }
.product-card .p-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.product-card .store-toggle{
  background:var(--brand-orange-light); color: var(--brand-orange-dark);
  border:0; border-radius:.625rem; padding: 8px 10px;
  font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  transition: background .15s;
}
.product-card .store-toggle:hover{ background: rgba(237,123,40,.18); }
.product-card .store-toggle .chev{ transition: transform .2s; }
.product-card .store-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
/* display:flex SOLO quando .show/.collapsing è presente, altrimenti Bootstrap
   imposta display:none per nascondere il collapse. Senza questo scoping, la
   specificità di .product-card .store-list (0,2,0) pareggia con
   .collapse:not(.show) (0,2,0) e, essendo definita dopo Bootstrap, vince
   sempre → il menu negozi non si chiude mai. */
.product-card .store-list{ flex-direction:column; padding-top:6px; }
.product-card .store-list.show,
.product-card .store-list.collapsing{ display:flex; gap:5px; }
.sap-item{
  display:flex; flex-direction: column; gap:4px;
  padding:7px 9px; background:#F9FAFB;
  border:1px solid transparent; border-radius:.5rem;
  transition: all .15s; cursor:pointer;
  min-width: 0;
}
.sap-item:hover{ background:#fff; border-color: var(--brand-orange); }
.sap-item.sap-out{ opacity:.6; cursor:not-allowed; }
.sap-item.sap-out:hover{ background:#F9FAFB; border-color:transparent; }
/* Negozio preselezionato nel menu a tendina articolo */
.sap-item.preselected{
  background: var(--brand-orange-light);
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}
.sap-item.preselected .sap-name-text{ color: var(--brand-orange-dark); }
.sap-badge{
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  background: var(--brand-orange); color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
}
.sap-name{
  font-weight:800; font-size:11.5px; color:#111827; line-height:1.3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.sap-name-text{
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.sap-meta{ display:flex; align-items:center; gap:6px; font-size:10px; flex-wrap:wrap; }
.sap-dist{ color:#6B7280; font-weight:600; }
.sap-stock{ display:inline-flex; align-items:center; gap:4px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.sap-stock .dot{ width:6px;height:6px;border-radius:50%; }
.sap-stock.in{ color:#15803d; } .sap-stock.in .dot{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.sap-stock.low{ color:#b45309; } .sap-stock.low .dot{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.sap-stock.out{ color:#b91c1c; } .sap-stock.out .dot{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.sap-bottom{
  display:flex; align-items:center; gap:8px;
  margin-top: 2px;
}
.sap-bottom .sap-price{ margin-left: auto; }
.sap-price{ font-weight:900; color:#111827; font-size:12.5px; white-space:nowrap; text-align:right; }
.sap-item.sap-out .sap-price{ color:#9CA3AF; text-decoration:line-through; }
.sap-price .delta{ display:block; font-size:9px; font-weight:700; margin-top:-2px; text-align:right; }
.sap-price .delta.cheaper{ color:#16a34a; }
.sap-price .delta.dearer{ color:#b91c1c; }
.products-scroll-btn{
  width:40px;height:40px;border-radius:50%;
  background:#fff; border:2px solid #E5E7EB;
  display:inline-flex; align-items:center; justify-content:center;
  color:#374151; transition: all .15s;
}
.products-scroll-btn:hover:not(:disabled){ border-color:var(--brand-orange); color: var(--brand-orange-dark); transform:scale(1.05); }
.products-scroll-btn:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width: 640px){
  .product-card{ width:180px; }
  .product-card .p-name{ font-size:13px; }
  .product-card .price-new{ font-size:16px; }
}
/* ==========================================================
   CATEGORIE (stile oscaro)
   ========================================================== */
.cats-section{ padding: 40px 0 10px; }
.cats-section h3{ font-size:24px; font-weight:900; color:#111827; }
.cat-card{
  background:#fff; border:1.5px solid #E5E7EB; border-radius: 1rem;
  padding: 20px; text-align:center; transition: all .2s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  height:100%; cursor: pointer;
}
.cat-card:hover{ border-color: var(--brand-orange); transform: translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.08); }
.cat-card .cat-icon{
  width:60px;height:60px;border-radius:50%;
  background: var(--brand-orange-light);
  display:flex;align-items:center;justify-content:center;
  font-size:30px; color: var(--brand-orange-dark);
}
.cat-card .cat-name{ font-weight:800; font-size:14px; color:#111827; line-height:1.2; }
.cat-card .cat-count{ font-size:11px; color:#6B7280; font-weight:600; }
/* ==========================================================
   FOOTER
   ========================================================== */
footer.site-footer{ background:#111827; color:#D1D5DB; margin-top:60px; }
footer.site-footer .newsletter{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  padding: 40px 0; color:#fff;
}
footer.site-footer .newsletter h3{ font-size:26px; font-weight:900; }
footer.site-footer .newsletter p{ opacity:.95; font-weight:500; }
footer.site-footer .newsletter .form-control{ border-radius: .75rem; border:0; padding:12px 16px; font-weight:600; }
footer.site-footer .newsletter .btn{ border-radius: .75rem; font-weight:800; background:#111827; color:#fff; padding:12px 24px; border:0; }
footer.site-footer .cols{ padding: 48px 0 24px; }
footer.site-footer h5{ color:#fff; font-weight:800; font-size:15px; margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px; }
footer.site-footer a{ color:#D1D5DB; font-weight:500; font-size:14px; }
footer.site-footer a:hover{ color: var(--brand-orange); }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
footer.site-footer ul li{ margin-bottom:10px; }
footer.site-footer .pay-methods{ display:flex; gap:10px; flex-wrap:wrap; }
footer.site-footer .pay-methods .pay{
  background:#fff; color:#111827; padding:6px 12px; border-radius:.5rem; font-size:11px; font-weight:800;
}
footer.site-footer .social{ display:flex; gap:12px; }
footer.site-footer .social a{
  width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center; font-size:18px; color:#fff;
  transition: all .15s;
}
footer.site-footer .social a:hover{ background: var(--brand-orange); color:#fff; }
footer.site-footer .bottom{
  background:#000; padding:20px 0; font-size:12px; color:#9CA3AF;
}
/* ==========================================================
   MODALI & CART CUSTOM
   ========================================================== */
.modal-content{ border-radius: 1.25rem; border:0; overflow:hidden; }
.modal-header.gradient{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color:#fff; padding: 20px 24px; border:0;
}
.modal-header.gradient .btn-close{ filter: invert(1) brightness(1.5); }
/* Product modal */
.pm-gallery{
  background: linear-gradient(135deg,#F9FAFB,#F3F4F6);
  min-height: 420px; padding: 30px; position: relative;
  display:flex; flex-direction:column; gap: 14px;
}
.pm-gallery.theme-1{ background: linear-gradient(135deg, #FEE2E2, #FECACA); color:#B91C1C; }
.pm-gallery.theme-2{ background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color:#1E40AF; }
.pm-gallery.theme-3{ background: linear-gradient(135deg, #FEF3C7, #FDE68A); color:#B45309; }
.pm-gallery.theme-4{ background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color:#047857; }
.pm-gallery.theme-5{ background: linear-gradient(135deg, #E0E7FF, #C7D2FE); color:#4338CA; }
.pm-gallery.theme-6{ background: linear-gradient(135deg, #FCE7F3, #FBCFE8); color:#BE185D; }
.pm-gallery.theme-7{ background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color:#0369A1; }
.pm-gallery.theme-8{ background: linear-gradient(135deg, #F3E8FF, #E9D5FF); color:#6B21A8; }
.pm-main-img{ flex:1; display:flex; align-items:center; justify-content:center; min-height:260px; }
.pm-main-img i{ font-size: 180px; color: currentColor; }
.pm-thumbs{ display:flex; gap:10px; justify-content:center; }
.pm-thumb{
  width:64px;height:64px; border-radius:.75rem;
  background: rgba(255,255,255,.7); border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s;
}
.pm-thumb.active{ border-color: var(--brand-orange); background:#fff; }
.pm-thumb i{ font-size: 32px; color: currentColor; opacity:.85; }
.pm-disc{
  position:absolute; top:20px; left:20px; z-index:2;
  background: var(--brand-orange); color:#fff;
  padding: 6px 12px; border-radius: .625rem;
  font-weight:900; font-size:13px;
}
.pm-info{ padding: 30px; display:flex; flex-direction:column; gap:12px; }
.pm-brand{ color: var(--brand-orange-dark); text-transform:uppercase; font-weight:900; letter-spacing:1px; font-size:12px; }
.pm-title{ font-size: 24px; font-weight:900; color:#111827; line-height:1.25; margin:0; }
.pm-stars{ color:#F59E0B; }
.pm-prices-block{ padding: 12px 0; border-top:1px solid #F3F4F6; border-bottom:1px solid #F3F4F6; }
.pm-price-new{ font-size: 32px; font-weight:900; color:#111827; }
.pm-price-old{ font-size: 16px; color:#6B7280; text-decoration:line-through; font-weight:600; }
.pm-stock-msg{
  display:flex; align-items:center; gap:8px;
  font-weight:700; padding: 10px 12px; border-radius:.625rem; font-size:13px;
}
.pm-stock-msg.in{ background:#ECFDF5; color:#065F46; }
.pm-stock-msg.low{ background:#FFFBEB; color:#92400E; }
.pm-stock-msg .dot{ width:8px;height:8px;border-radius:50%; }
.pm-stock-msg.in .dot{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); }
.pm-stock-msg.low .dot{ background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.2); }
.pm-compat{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px; background: var(--brand-orange-light);
  border-radius:.75rem; font-size:13px; font-weight:600;
}
.pm-compat i{ color: var(--brand-orange-dark); font-size:18px; }
.pm-specs{ display:grid; grid-template-columns: 1fr 1fr; gap:2px; background:#E5E7EB; border-radius:.75rem; overflow:hidden; }
.pm-specs .spec{ background:#fff; padding: 10px 12px; }
.pm-specs .spec-label{ font-size:11px; color:#6B7280; text-transform:uppercase; font-weight:700; letter-spacing:.3px; }
.pm-specs .spec-val{ font-size:13px; font-weight:800; color:#111827; }
.pm-guarantees{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; border-top:1px solid #F3F4F6; padding-top:14px; }
.pm-guar{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; font-size:11px; color:#374151; font-weight:700; }
.pm-guar i{ font-size:22px; color: var(--brand-orange-dark); }
@media (max-width: 768px){
  .pm-specs{ grid-template-columns:1fr; }
  .pm-guarantees{ grid-template-columns:1fr; }
  .pm-guar{ flex-direction:row; gap:10px; text-align:left; }
  .pm-title{ font-size: 20px; }
  .pm-price-new{ font-size: 26px; }
  .pm-gallery{ min-height:280px; padding:20px; }
  .pm-main-img i{ font-size: 130px; }
}
/* Cart offcanvas */
.offcanvas.cart{
  width: 420px !important;
  border-right: 1px solid #E5E7EB;
}
.offcanvas.cart .offcanvas-header{ background:#111827; color:#fff; padding:20px 24px; }
.offcanvas.cart .offcanvas-header h5{ font-weight:900; font-size:18px; }
.offcanvas.cart .offcanvas-header .btn-close{ filter: invert(1); }
.cart-count-badge{
  background: var(--brand-orange); color:#fff;
  min-width:24px; height:24px; border-radius:12px; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; padding: 0 7px;
  margin-left:8px;
}
.cart-item{
  display:flex; gap:12px; padding:14px; background:#F9FAFB; border-radius:.875rem; margin-bottom:10px;
}
.cart-item .img{
  width:64px;height:64px; border-radius:.625rem; background:#fff;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.cart-item .img i{ font-size:32px; color:#9CA3AF; }
.cart-item .info{ flex:1; min-width:0; }
.cart-item .name{ font-weight:800; font-size:13px; color:#111827; line-height:1.3; }
.cart-item .meta{ font-size:11px; color:#6B7280; font-weight:600; margin-top:2px; }
.cart-item .bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cart-item .qty{ display:flex; align-items:center; border:1px solid #E5E7EB; border-radius:.5rem; overflow:hidden; background:#fff; }
.cart-item .qty button{
  width:28px;height:28px; background:#fff; border:0; color:#374151; font-weight:800;
}
.cart-item .qty button:hover{ background:#F3F4F6; }
.cart-item .qty .val{ min-width:28px; text-align:center; font-weight:800; font-size:13px; }
.cart-item .price{ font-weight:900; font-size:14px; color:#111827; }
.cart-item .remove{
  background:transparent; border:0; color:#9CA3AF; padding:4px; font-size:16px;
}
.cart-item .remove:hover{ color:#dc2626; }
.ship-hint{
  padding: 10px 14px; background: var(--brand-orange-light);
  border-radius:.75rem; font-size:12px; font-weight:700;
  color: var(--brand-orange-dark);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.cart-footer{
  padding: 20px 24px; background:#fff; border-top:1px solid #E5E7EB;
}
.cart-footer .totals{ margin-bottom:14px; }
.cart-footer .totals div{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:#6B7280; margin-bottom:4px; }
.cart-footer .totals div.total{ font-size:18px; font-weight:900; color:#111827; padding-top:8px; margin-top:8px; border-top:2px dashed #E5E7EB; }
.cart-empty{
  text-align:center; padding: 60px 20px; color:#6B7280;
}
.cart-empty i{ font-size:56px; color:#D1D5DB; }
.cart-empty .title{ font-size:17px; font-weight:800; color:#111827; margin-top:12px; }
.cart-empty .sub{ font-size:13px; margin-top:4px; }
/* Login dropdown panel */
.login-panel{
  min-width: 300px; padding: 20px; border-radius:1rem;
  box-shadow: 0 10px 35px rgba(0,0,0,.15);
  border: 0;
}
.login-panel h6{ font-weight:900; margin-bottom:6px; }
.login-panel .form-control{ border-radius:.625rem; }
.login-panel .btn-primary{ border-radius:.625rem; }
.login-panel a.small{ font-size:12px; }
/* Accessibility helpers */
.focus-ring:focus{ outline: 3px solid rgba(237,123,40,.4); outline-offset: 2px; }
/* Scroll buttons container */
.products-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.products-head .actions{ display:flex; align-items:center; gap:10px; }
.products-head .actions .see-all{
  font-size:13px; font-weight:800; color: var(--brand-orange-dark);
  padding: 8px 16px; border: 2px solid #E5E7EB; border-radius: 999px;
  transition: all .15s;
}
.products-head .actions .see-all:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
/* ==========================================================
   STICKY HEADER (main-header + nav-bar)
   ========================================================== */
.sticky-header-wrap{
  position: sticky; top: 0; z-index: 1040;
  background: #fff;
  transition: box-shadow .2s ease;
}
.sticky-header-wrap.scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.sticky-header-wrap.scrolled .main-header{ padding: 10px 0; transition: padding .2s ease; }
.sticky-header-wrap.scrolled .logo-wrap svg{ height: 34px; transition: height .2s ease; }
.sticky-header-wrap.scrolled .nav-bar .nav-link{ padding: 10px 16px; }
.main-header{ transition: padding .2s ease; }
.logo-wrap svg{ transition: height .2s ease; }
/* ==========================================================
   SEARCH AUTOCOMPLETE
   ========================================================== */
.search-wrap{ position: relative; }
.search-suggestions{
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: .875rem;
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
  z-index: 1050;
  max-height: 460px;
  overflow-y: auto;
  display: none;
}
.search-suggestions.show{ display: block; }
.ss-group{ padding: 8px 0; }
.ss-group + .ss-group{ border-top: 1px solid #F3F4F6; }
.ss-group-title{
  font-size: 11px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 16px 4px;
  display: flex; align-items: center; gap: 6px;
}
.ss-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .1s;
  font-size: 14px;
  user-select: none;
}
.ss-item:hover, .ss-item.active{ background: var(--brand-orange-light); }
.ss-item .ss-icon{
  width: 36px; height: 36px; border-radius: .5rem;
  background: #F3F4F6; color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; font-weight: 800;
}
.ss-item.ss-product .ss-icon{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }
.ss-item.ss-cat .ss-icon{ background: #EEF2FF; color: #4338CA; }
.ss-item.ss-brand .ss-icon{ background: #F0FDF4; color: #15803D; }
.ss-item.ss-oem .ss-icon{ background: #F5F3FF; color: #6D28D9; font-size: 11px; letter-spacing:.5px; }
.ss-item.ss-popular .ss-icon{ background: #FEF3C7; color: #B45309; }
.ss-label{ flex: 1; min-width: 0; }
.ss-label .t{
  font-weight: 700; color: #111827; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-label .t mark{ background: transparent; color: var(--brand-orange-dark); padding: 0; font-weight: 900; }
.ss-label .s{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-meta{
  font-size: 11px; color: #9CA3AF; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0;
}
.ss-footer{
  padding: 10px 16px; font-size: 11px; color: #6B7280;
  background: #F9FAFB; border-top: 1px solid #F3F4F6;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; gap: 10px; flex-wrap: wrap;
}
.ss-footer kbd{
  background: #fff; border: 1px solid #E5E7EB;
  border-radius: .375rem; padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  font-family: 'Nunito', sans-serif; color: #374151;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.ss-footer .ss-view-all{ color: var(--brand-orange-dark); font-weight: 800; }
.ss-empty{
  padding: 36px 20px; text-align: center;
  color: #6B7280; font-size: 13px; font-weight: 600;
}
.ss-empty i{ font-size: 36px; color: #D1D5DB; display: block; margin-bottom: 8px; }
.ss-empty strong{ color: #111827; }
@media (max-width: 640px){
  .search-suggestions{ max-height: 55vh; }
  .ss-label .s{ display: none; }
}
/* ==========================================================
   PRODUCT CARD - INFO BUTTON (dettagli)
   ========================================================== */
.product-card .info-btn{
  position:absolute; top:10px; right:54px; z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95); color:#6B7280; border:0;
  display:flex;align-items:center;justify-content:center;
  transition: all .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.product-card .info-btn:hover{ color: var(--brand-orange-dark); transform: scale(1.1); background:#fff; }
.product-card .info-btn i{ font-size: 16px; }
.product-card .details-btn{
  background: transparent; color: var(--brand-orange-dark);
  border: 1.5px solid #E5E7EB; border-radius:.625rem;
  padding: 7px 10px; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap:4px;
  transition: all .15s;
  flex: 1;
}
.product-card .details-btn:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.product-card .p-actions{ display: flex; gap: 6px; }
.product-card .p-actions .add-btn{ flex: 1.5; padding: 7px 10px; font-size: 12px; }
/* ==========================================================
   MODAL - "VEDI SCHEDA COMPLETA" LINK
   ========================================================== */
.pm-full-link{
  display: inline-flex; align-items: center; gap:6px;
  font-size: 12px; font-weight: 800;
  color: var(--brand-orange-dark);
  padding: 4px 10px; background: var(--brand-orange-light);
  border-radius: 999px; width: fit-content;
  transition: all .15s;
  text-decoration: none;
}
.pm-full-link:hover{ background: var(--brand-orange); color: #fff; }
.pm-full-link i{ font-size: 14px; transition: transform .15s; }
.pm-full-link:hover i{ transform: translateX(3px); }
/* ==========================================================
   MODAL - DELIVERY & PICKUP OPTIONS
   ========================================================== */
.pm-delivery{
  border-top: 1px solid #F3F4F6;
  padding-top: 14px;
  margin-top: 4px;
}
.pm-delivery-title{
  font-size: 11px; font-weight: 800; color: #6B7280;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.pm-delivery-title i{ color: var(--brand-orange-dark); font-size: 14px; }
.delivery-opt{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1.5px solid transparent;
  border-radius: .75rem;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.delivery-opt:hover{ background: #fff; border-color: #E5E7EB; }
.delivery-opt.selected{ background: #fff; border-color: var(--brand-orange); box-shadow: 0 2px 8px rgba(237,123,40,.08); }
.delivery-opt.disabled{ opacity: .5; cursor: not-allowed; }
.delivery-opt.disabled:hover{ background:#F9FAFB; border-color: transparent; }
.delivery-opt .do-icon{
  width:42px;height:42px;border-radius:.625rem;
  background: var(--brand-orange-light); color: var(--brand-orange-dark);
  display:flex;align-items:center;justify-content:center;
  font-size: 20px; flex-shrink: 0;
}
.delivery-opt.express .do-icon{ background: #FEF3C7; color: #B45309; }
.delivery-opt.pickup .do-icon{ background: #DCFCE7; color: #166534; }
.delivery-opt .do-info{ flex:1; min-width: 0; }
.delivery-opt .do-name{
  font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.delivery-opt .do-name .badge-eta{
  background: #ECFDF5; color: #065F46;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: .375rem;
  text-transform: uppercase; letter-spacing: .3px;
}
.delivery-opt .do-sub{ font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 3px; }
.delivery-opt .do-price{
  font-weight: 900; color: #111827; font-size: 15px;
  text-align: right; white-space: nowrap;
}
.delivery-opt .do-price.free{ color: #16A34A; }
.delivery-opt .do-price .old{
  display: block; font-size: 11px; font-weight: 700;
  color: #9CA3AF; text-decoration: line-through;
}
.delivery-opt .do-check{
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #D1D5DB;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  color: #fff;
}
.delivery-opt.selected .do-check{
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}
.delivery-opt .do-check i{ font-size: 14px; opacity: 0; transition: opacity .15s; }
.delivery-opt.selected .do-check i{ opacity: 1; }
.pm-pickup-hint{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  padding: 8px 12px; border-radius: .625rem;
  font-size: 12px; font-weight: 700;
  margin-top: -2px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pm-pickup-hint i{ font-size: 14px; }
/* Store availability row - pickup button */
.sap-item .sap-pick-btn{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 0; border-radius: .5rem;
  padding: 5px 10px;
  font-size: 11px; font-weight: 800;
  white-space: nowrap;
  margin-left: 4px;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0;
}
.sap-item .sap-pick-btn:hover{ background: var(--brand-orange); color: #fff; }
.sap-item.sap-out .sap-pick-btn{ display: none; }
.sap-item .sap-pick-btn.selected{ background: var(--brand-orange); color: #fff; }
.sap-item .sap-pick-btn i{ font-size: 12px; }
.sap-item .sap-ready{
  font-size: 10px; color:#16A34A; font-weight: 800;
  margin-top: 2px;
  text-transform: uppercase; letter-spacing: .3px;
}
.sap-item.sap-low .sap-ready{ color: #B45309; }
/* ==========================================================
   FLOATING ACTION BUTTONS (scroll-top + contatti)
   ========================================================== */
.fab-container{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1035;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.fab-container > *{ pointer-events: auto; }
.scroll-top-btn{
  width: 48px; height: 48px; border-radius: 50%;
  background: #1F2937; color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0; transform: translateY(20px) scale(.85);
  pointer-events: none !important;
  transition: transform .25s ease, opacity .25s ease, background .15s;
  cursor: pointer;
}
.scroll-top-btn.show{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto !important;
}
.scroll-top-btn:hover{ background: #111827; transform: translateY(-3px) scale(1.05); }
.contact-fab-wrap{ position: relative; }
.contact-fab{
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; border: 0;
  box-shadow: 0 6px 20px rgba(237,123,40,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.contact-fab:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(237,123,40,.5); }
.contact-fab .cf-pulse{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  animation: cf-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes cf-pulse{
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.contact-fab i{ transition: transform .25s ease; }
.contact-fab.open{ background: #111827; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.contact-fab.open .cf-pulse{ display: none; }
.contact-fab.open i{ transform: rotate(180deg); }
.contact-dropdown{
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 290px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 24px 50px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08);
  padding: 8px;
  opacity: 0; transform: translateY(12px) scale(.94);
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: bottom right;
}
.contact-dropdown.show{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.contact-dropdown::before{
  content: '';
  position: absolute;
  bottom: -7px; right: 22px;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.06);
  z-index: -1;
}
.contact-dropdown .cd-header{
  padding: 10px 12px 12px;
  border-bottom: 1px solid #F3F4F6;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.contact-dropdown .cd-header .cd-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.contact-dropdown .cd-title{
  font-weight: 900; font-size: 15px; color: #111827; line-height: 1.2;
}
.contact-dropdown .cd-sub{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 2px;
}
.contact-option{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: .625rem;
  transition: background .15s, transform .1s;
  cursor: pointer;
  color: #111827;
  text-decoration: none;
  border: 0; background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.contact-option:hover{ background: #F9FAFB; color: #111827; }
.contact-option:active{ transform: scale(.98); }
.contact-option .co-icon{
  width: 40px; height: 40px; border-radius: .625rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  color: #fff;
}
.contact-option.co-email .co-icon{ background: linear-gradient(135deg,#3B82F6,#1D4ED8); }
.contact-option.co-whatsapp .co-icon{ background: linear-gradient(135deg,#25D366,#128C7E); }
.contact-option.co-telegram .co-icon{ background: linear-gradient(135deg,#2AABEE,#1E88CA); }
.contact-option.co-upload .co-icon{ background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)); }
.contact-option .co-info{ flex: 1; min-width: 0; }
.contact-option .co-name{
  font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2;
}
.contact-option .co-sub{
  font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-option .co-chev{
  color: #9CA3AF; font-size: 14px;
  flex-shrink: 0;
  transition: transform .15s;
}
.contact-option:hover .co-chev{ color: var(--brand-orange-dark); transform: translateX(2px); }
/* ==========================================================
   LIBRETTO UPLOAD MODAL
   ========================================================== */
.libretto-upload-zone{
  border: 2px dashed var(--brand-orange);
  border-radius: 1rem;
  padding: 36px 20px;
  text-align: center;
  background: var(--brand-orange-light);
  transition: all .2s;
  cursor: pointer;
}
.libretto-upload-zone:hover, .libretto-upload-zone.dragover{
  background: #fff;
  border-color: var(--brand-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(237,123,40,.15);
}
.libretto-upload-zone .upload-big{
  font-size: 54px;
  color: var(--brand-orange-dark);
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.libretto-upload-zone .title{
  font-weight: 900; font-size: 16px; color: #111827;
}
.libretto-upload-zone .title span{ color: var(--brand-orange-dark); text-decoration: underline; }
.libretto-upload-zone .sub{
  font-size: 12px; color: #6B7280; font-weight: 600; margin-top: 6px;
}
.libretto-file-input{ display: none; }
.libretto-preview{
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: .875rem;
  margin-top: 14px;
}
.libretto-preview .lp-icon{
  width: 48px; height: 48px; border-radius: .625rem;
  background: #22C55E; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.libretto-preview .lp-info{ flex: 1; min-width: 0; }
.libretto-preview .lp-name{
  font-weight: 800; font-size: 13px; color: #166534;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.libretto-preview .lp-size{
  font-size: 11px; color: #15803D; font-weight: 700; margin-top: 2px;
}
.libretto-preview .lp-remove{
  background: transparent; border: 0; color: #6B7280;
  font-size: 20px; padding: 4px 8px; line-height: 1;
  transition: color .15s;
}
.libretto-preview .lp-remove:hover{ color: #DC2626; }
.libretto-privacy{
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: #6B7280; font-weight: 700;
  margin-top: 14px; padding: 10px 12px;
  background: #F9FAFB; border-radius: .625rem;
}
.libretto-privacy span{ display: inline-flex; align-items: center; gap: 4px; }
.libretto-privacy i{ color: #16A34A; font-size: 13px; }
/* ==========================================================
   REGISTER MODAL
   ========================================================== */
.reg-tab-switcher{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 22px;
}
.reg-tab{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 2px solid #E5E7EB;
  background: #fff; border-radius: .875rem;
  text-align: left; transition: all .15s;
  cursor: pointer;
}
.reg-tab:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.reg-tab.active{
  border-color: var(--brand-orange); background: var(--brand-orange-light);
  box-shadow: 0 4px 12px rgba(237,123,40,.12);
}
.reg-tab > i{ font-size: 26px; color: var(--brand-orange-dark); flex-shrink: 0; }
.reg-tab-title{ font-weight: 800; font-size: 14px; color: #111827; line-height: 1.2; }
.reg-tab-sub{ font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px; }
.reg-form{ display: none; }
.reg-form.active{ display: block; }
.reg-section-title{
  font-weight: 800; font-size: 12px; color: var(--brand-orange-dark);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 12px; display: flex; align-items: center;
}
.reg-section-title + .row{ margin-top: 0; }
.visura-upload-zone{
  border: 2px dashed var(--brand-orange);
  border-radius: 1rem;
  padding: 22px 18px;
  text-align: center;
  background: var(--brand-orange-light);
  transition: all .2s;
  cursor: pointer;
  display: block;
  margin-bottom: 0;
}
.visura-upload-zone:hover, .visura-upload-zone.dragover{
  background: #fff;
  border-color: var(--brand-orange-dark);
  box-shadow: 0 6px 14px rgba(237,123,40,.15);
}
.visura-upload-zone .upload-big{
  font-size: 38px;
  color: var(--brand-orange-dark);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.visura-upload-zone .title{
  font-weight: 800; font-size: 14px; color: #111827;
}
.visura-upload-zone .title span{ color: var(--brand-orange-dark); text-decoration: underline; }
.visura-upload-zone .sub{
  font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 6px; line-height: 1.5;
}
#registerModal .modal-body{ max-height: 70vh; overflow-y: auto; }
#registerModal .form-label{ font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
#registerModal .form-control{ font-size: 14px; }
/* ==========================================================
   FORGOT PASSWORD MODAL
   ========================================================== */
.forgot-step{ display: none; }
.forgot-step.active{ display: block; animation: forgotFadeIn .25s ease; }
@keyframes forgotFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.forgot-success-icon{
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.forgot-success-icon.success{ background: #DCFCE7; color: #16A34A; }
.forgot-instructions{
  background: #F9FAFB;
  border: 1px solid #F3F4F6;
  border-radius: .75rem;
  padding: 12px 14px;
}
.fi-item{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #374151; font-weight: 600;
  padding: 5px 0;
}
.fi-item i{ color: var(--brand-orange-dark); font-size: 18px; flex-shrink: 0; }
.pwd-strength{ display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pwd-bar{
  flex: 1; height: 6px; background: #E5E7EB;
  border-radius: 3px; overflow: hidden;
}
.pwd-bar-fill{
  height: 100%; width: 0;
  background: #DC2626;
  transition: width .2s, background .2s;
}
.pwd-bar-fill.medium{ background: #F59E0B; }
.pwd-bar-fill.strong{ background: #22C55E; }
.pwd-label{ font-size: 11px; font-weight: 700; color: #6B7280; white-space: nowrap; }
#forgotModal .form-label{ font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px; }
@media (max-width: 640px){
  .fab-container{ bottom: 16px; right: 16px; gap: 8px; }
  .scroll-top-btn{ width: 44px; height: 44px; font-size: 19px; }
  .contact-fab{ width: 54px; height: 54px; font-size: 23px; }
  .contact-dropdown{ width: 270px; }
  .libretto-upload-zone{ padding: 24px 16px; }
  .libretto-upload-zone .upload-big{ font-size: 42px; }
  .reg-tab-switcher{ grid-template-columns: 1fr; }
}
/* ==========================================================
   CATALOG PAGE
   ========================================================== */
.catalog-breadcrumb{
  background:#fff; padding: 14px 0; border-bottom:1px solid #F3F4F6;
}
.catalog-breadcrumb .breadcrumb{ margin:0; font-size: 13.5px; font-weight:700; }
.catalog-breadcrumb .breadcrumb-item a{ color:#6B7280; }
.catalog-breadcrumb .breadcrumb-item a:hover{ color: var(--brand-orange-dark); }
.catalog-breadcrumb .breadcrumb-item.active{ color:#111827; }
.catalog-breadcrumb .breadcrumb-item+.breadcrumb-item::before{ color:#D1D5DB; }

.catalog-wrapper{ padding: 22px 0 60px; background:#F9FAFB; }
.catalog-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}
@media (max-width: 991.98px){
  .catalog-layout{ grid-template-columns: 1fr; }
  .cat-sidebar{ display:none; }
}

/* Sidebar */
.cat-sidebar{
  position: sticky; top: 170px;
  align-self: start;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background:#fff; border:1px solid #E5E7EB; border-radius: 1rem;
  padding: 18px 16px;
  scrollbar-width: thin;
}
.cat-sidebar::-webkit-scrollbar{ width: 6px; }
.cat-sidebar::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius: 3px; }
.cs-section{ padding: 10px 0; border-bottom: 1px solid #F3F4F6; }
.cs-section:last-child{ border-bottom:none; }
.cs-section-title{
  font-weight: 900; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color:#111827; margin-bottom: 10px;
  display:flex; align-items:center; gap:8px;
}
.cs-section-title i{ color: var(--brand-orange); }

/* Category tree */
.cat-tree{ list-style:none; padding:0; margin:0; }
.cat-tree-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding: 8px 10px; border-radius: .5rem;
  cursor:pointer; font-weight:700; font-size: 14px; color:#374151;
  transition: all .15s ease;
}
.cat-tree-item:hover{ background:#F3F4F6; color:#111827; }
.cat-tree-item.active{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark); font-weight: 900;
}
.cat-tree-item .cat-count{
  font-size: 11.5px; font-weight: 800;
  color: #6B7280; background:#F3F4F6;
  padding: 2px 8px; border-radius: 999px;
}
.cat-tree-item.active .cat-count{
  background: var(--brand-orange); color:#fff;
}
.cat-sub{
  list-style:none; padding: 4px 0 6px 14px; margin: 0;
  border-left: 2px solid #F3F4F6;
}
.cat-sub .cat-tree-item{
  font-size: 13px; padding: 6px 10px; font-weight: 600;
}
.cat-tree-item.has-children .cat-chev{
  font-size: 10px; color: #9CA3AF;
  margin-right: 4px;
  transition: transform .2s ease, color .2s ease;
}
.cat-tree-item.has-children.active .cat-chev{
  color: var(--brand-orange);
}
.cat-subsub{
  padding-left: 16px;
  border-left-color: #FDE4CF;
  margin-top: 2px;
}
.cat-subsub .cat-tree-item{
  font-size: 12.5px; padding: 5px 10px 5px 12px; font-weight: 600;
  color: #4B5563;
  position: relative;
}
.cat-subsub .cat-tree-item::before{
  content: ""; position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1.5px;
  background: #FDE4CF;
  transform: translateY(-50%);
}
.cat-subsub .cat-tree-item.active{
  background: #FFF8F0;
  color: var(--brand-orange-dark);
}
.cat-subsub .cat-tree-item.active::before{
  background: var(--brand-orange);
  width: 8px; height: 2px;
}
.cat-subsub .cat-tree-item .cat-count{
  font-size: 10.5px;
  padding: 1px 7px;
}

/* Filter search */
.filter-search{
  position: relative;
}
.filter-search input{
  font-size: 13px; padding: 7px 10px 7px 32px;
  border: 1px solid #E5E7EB; border-radius: .5rem;
}
.filter-search input:focus{
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
  outline:none;
}
.filter-search i{
  position:absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color:#9CA3AF; font-size: 14px;
}

/* Checkbox list (brands / availability) */
.checkbox-list{
  list-style:none; padding:0; margin: 0;
  max-height: 220px; overflow-y: auto;
  scrollbar-width: thin;
}
.checkbox-list::-webkit-scrollbar{ width: 5px; }
.checkbox-list::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius: 3px; }
.checkbox-list li{ padding: 5px 0; }
.checkbox-list .form-check{
  display:flex; align-items:center; gap: 8px; margin:0;
  font-size: 13.5px; font-weight: 600; color:#374151;
  cursor: pointer;
}
.checkbox-list .form-check-input{
  margin: 0; cursor:pointer;
  border: 1.5px solid #D1D5DB;
}
.checkbox-list .form-check-input:checked{
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.checkbox-list .form-check-input:focus{
  box-shadow: 0 0 0 2px rgba(237,123,40,.18);
}
.checkbox-list .form-check-label{ cursor:pointer; flex:1; }
.checkbox-list .cl-count{
  font-size: 11px; color:#9CA3AF; font-weight:700; margin-left: auto;
}

/* Price range */
.price-range{ padding: 4px 0 6px; }
.price-range .range-inputs{
  display:grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  align-items:center; margin-bottom: 10px;
}
.price-range .range-inputs input{
  font-size: 13px; padding: 6px 8px; text-align:center;
  border: 1px solid #E5E7EB; border-radius: .5rem; font-weight:700;
}
.price-range .range-inputs input:focus{
  outline:none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}
.price-range .range-sep{ color:#9CA3AF; font-weight: 800; }
.price-range .range-slider{
  width: 100%; accent-color: var(--brand-orange);
}
.price-range .range-labels{
  display:flex; justify-content:space-between;
  font-size: 11.5px; color:#6B7280; font-weight:700; margin-top: 4px;
}

/* Rating filter */
.rating-filter{ list-style:none; padding:0; margin:0; }
.rating-filter li{ padding: 4px 0; }
.rating-filter .form-check{
  display:flex; align-items:center; gap: 8px; margin:0; cursor:pointer;
  font-size: 13px; font-weight: 600; color:#374151;
}
.rating-filter .form-check-input{
  margin: 0;
  border: 1.5px solid #D1D5DB;
}
.rating-filter .form-check-input:checked{
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.rating-filter .stars{ display:inline-flex; gap: 1px; }
.rating-filter .stars i{ color: #FBBF24; font-size: 13px; }
.rating-filter .stars i.off{ color: #E5E7EB; }

/* Vehicle filter */
.vehicle-filter-btn{
  width: 100%; display:flex; align-items:center; gap: 10px;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1.5px dashed var(--brand-orange);
  border-radius: .75rem; padding: 10px 12px;
  font-weight: 800; font-size: 13.5px;
  transition: all .15s ease;
}
.vehicle-filter-btn:hover{ background: #fff; border-style: solid; }
.vehicle-filter-btn.has-vehicle{
  background:#fff; border-style: solid;
  color:#111827;
}
.vehicle-filter-btn.has-vehicle i{ color: var(--brand-orange); }
.vehicle-filter-btn .vf-text{ flex:1; text-align:left; line-height: 1.2; }
.vehicle-filter-btn .vf-text small{
  display:block; font-weight:700; color:#6B7280; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Clear filters */
.clear-filters-btn{
  width: 100%;
  background:#fff; border: 1.5px solid #F3F4F6;
  color:#6B7280; font-weight: 800; font-size: 13px;
  padding: 9px 12px; border-radius: .5rem;
  transition: all .15s ease;
}
.clear-filters-btn:hover{ color:#EF4444; border-color:#FECACA; }

/* Catalog main content */
.catalog-main{ min-width: 0; }

.catalog-header{
  background:#fff; border: 1px solid #E5E7EB; border-radius: 1rem;
  padding: 22px 24px; margin-bottom: 16px;
}
.catalog-title{
  font-weight: 900; font-size: 1.9rem; color:#111827; margin:0 0 4px;
  display:flex; align-items:center; gap:12px;
}
.catalog-title i{
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--brand-orange-light); color: var(--brand-orange);
  display:inline-flex; align-items:center; justify-content:center; font-size: 26px;
}
.catalog-subtitle{ color:#6B7280; margin: 0; font-size: 14.5px; }

/* Active filter chips */
.active-filters{
  display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px;
}
.filter-chip{
  display:inline-flex; align-items:center; gap: 6px;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1px solid rgba(237,123,40,.3);
  border-radius: 999px; padding: 5px 10px 5px 12px;
  font-size: 12.5px; font-weight: 800;
}
.filter-chip .fc-close{
  width: 18px; height: 18px; border-radius:50%;
  background: var(--brand-orange); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 10px; cursor:pointer; border:none;
  transition: background .15s;
}
.filter-chip .fc-close:hover{ background: var(--brand-orange-dark); }

/* Sort bar */
.sort-bar{
  background:#fff; border:1px solid #E5E7EB; border-radius: .75rem;
  padding: 10px 14px; margin-bottom: 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; flex-wrap: wrap;
}
.results-count{ font-size: 13.5px; color:#6B7280; font-weight:700; }
.results-count strong{ color:#111827; }
.sort-actions{ display:flex; align-items:center; gap: 10px; }
.sort-select{
  font-size: 13px; font-weight: 700; color:#374151;
  border: 1px solid #E5E7EB; border-radius: .5rem;
  padding: 6px 28px 6px 12px; background-color:#fff;
  min-width: 200px;
}
.sort-select:focus{
  outline:none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(237,123,40,.15);
}

/* Catalog grid — layout orizzontale a lista */
.catalog-grid{
  display:flex; flex-direction: column;
  gap: 14px;
}
/* Card: override del layout verticale a 240px usato nelle scroll-row */
.catalog-grid .product-card{
  width: 100% !important;
  flex-shrink: 1;
  flex-direction: row;
  padding: 14px;
  gap: 18px;
  align-items: stretch;
}
.catalog-grid .product-card:hover{
  transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* Immagine: fissa a sinistra */
.catalog-grid .product-card .img-wrap{
  aspect-ratio: unset;
  width: 200px; height: 200px;
  border-radius: .75rem;
  flex-shrink: 0;
  overflow: hidden;
}
.catalog-grid .product-card .img-wrap i{ font-size: 64px; }

/* Info + heart: posizione e dimensione coerenti sulla card orizzontale */
.catalog-grid .product-card .wish,
.catalog-grid .product-card .info-btn{
  width: 32px; height: 32px;
  top: 8px;
}
.catalog-grid .product-card .wish{ right: 8px; }
.catalog-grid .product-card .info-btn{ right: 48px; }
.catalog-grid .product-card .wish i,
.catalog-grid .product-card .info-btn i{ font-size: 15px; }
/* Badge sconto/rank spostati leggermente per coerenza visiva */
.catalog-grid .product-card .rank,
.catalog-grid .product-card .disc-badge{ top: 8px; left: 8px; }
.catalog-grid .product-card .rank + .disc-badge{ top: 46px; }

/* Body: 2 colonne tramite grid-template-areas + ordine DOM mantenuto.
   Colonna SX: info (auto-placed con grid-column:1)
   Colonna DX: p-bottom che occupa tutte le righe */
.catalog-grid .product-card .body{
  padding: 0;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 220px;
  column-gap: 20px;
  row-gap: 0;
  align-content: start;   /* non stirare le righe */
  align-items: start;     /* non stirare i singoli item */
}
/* Info items in colonna 1 impilati */
.catalog-grid .product-card .body > .brand,
.catalog-grid .product-card .body > .p-name,
.catalog-grid .product-card .body > .rating,
.catalog-grid .product-card .body > .p-specs,
.catalog-grid .product-card .body > .prices,
.catalog-grid .product-card .body > .last-viewed{
  grid-column: 1;
  min-width: 0;
}
.catalog-grid .product-card .brand{
  padding-top: 2px;
  font-size: 11px;
  margin: 0;
}
.catalog-grid .product-card .p-name{
  font-size: 1.05rem;
  line-height: 1.35;
  min-height: 0;
  -webkit-line-clamp: 2;
  margin: 4px 0 2px;
}
.catalog-grid .product-card .rating{
  font-size: 13px;
  margin: 4px 0 0;
}
/* Tabella specifiche articolo: 2 colonne compatte sotto le stelle */
.catalog-grid .product-card .p-specs{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  border-top: 1px dashed #E5E7EB;
  border-bottom: 1px dashed #E5E7EB;
  padding: 6px 0 4px;
}
.catalog-grid .product-card .p-spec{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  min-width: 0;
  border-bottom: 1px dotted #F3F4F6;
}
.catalog-grid .product-card .p-spec:nth-last-child(-n+2){
  border-bottom: 0;
}
.catalog-grid .product-card .p-spec-k{
  color: #6B7280;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.catalog-grid .product-card .p-spec-v{
  color: #111827;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-grid .product-card .prices{
  margin-top: 10px;
  align-items: baseline;
}
.catalog-grid .product-card .price-new{ font-size: 22px; }
.catalog-grid .product-card .price-old{ font-size: 14px; }
.catalog-grid .product-card .last-viewed{
  margin-top: 4px;
  font-size: 12px;
}

/* p-bottom in colonna 2, estende a tutte le righe */
.catalog-grid .product-card .body > .p-bottom{
  grid-column: 2;
  grid-row: 1 / span 99;     /* span esplicito per coprire tutti gli item della col.1 */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-self: stretch;
  padding-left: 20px;
  border-left: 1px dashed #E5E7EB;
  min-width: 0;
}
.catalog-grid .product-card .store-toggle{
  font-size: 12px; padding: 8px 12px;
}
/* NB: no max-height/overflow su .store-list perché interferisce con Bootstrap collapse */
.catalog-grid .product-card .store-list{ padding-top: 4px; }
.catalog-grid .product-card .p-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.catalog-grid .product-card .details-btn,
.catalog-grid .product-card .add-btn{
  width: 100%;
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: 13px;
}

/* Breakpoint tablet */
@media (max-width: 991.98px){
  .catalog-grid .product-card{ padding: 12px; gap: 14px; }
  .catalog-grid .product-card .img-wrap{ width: 160px; height: 160px; }
  .catalog-grid .product-card .body{
    grid-template-columns: 1fr 180px;
    column-gap: 16px;
  }
  .catalog-grid .product-card .body > .p-bottom{ padding-left: 16px; }
}

/* Breakpoint mobile — pila verticale */
@media (max-width: 640px){
  .catalog-grid .product-card{
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }
  .catalog-grid .product-card .img-wrap{
    width: 100%; height: 200px;
  }
  .catalog-grid .product-card .body{
    grid-template-columns: 1fr;
  }
  .catalog-grid .product-card .body > .brand,
  .catalog-grid .product-card .body > .p-name,
  .catalog-grid .product-card .body > .rating,
  .catalog-grid .product-card .body > .prices,
  .catalog-grid .product-card .body > .last-viewed,
  .catalog-grid .product-card .body > .p-bottom{
    grid-column: 1;
    grid-row: auto;
  }
  .catalog-grid .product-card .body > .p-bottom{
    padding-left: 0;
    border-left: none;
    border-top: 1px dashed #E5E7EB;
    padding-top: 10px;
    margin-top: 6px;
  }
  /* Su mobile manteniamo i bottoni impilati (Dettagli sopra, Aggiungi sotto). */
  .catalog-grid .product-card .p-actions{ flex-direction: column; }
  .catalog-grid .product-card .details-btn,
  .catalog-grid .product-card .add-btn{ width: 100%; flex: 0 0 auto; }
}

/* Catalog pagination */
.catalog-pagination{
  display:flex; justify-content:center; margin-top: 24px;
}
.catalog-pagination .pagination{ margin: 0; gap: 4px; }
.catalog-pagination .page-link{
  min-width: 40px; height: 40px; border-radius: .5rem !important;
  border: 1px solid #E5E7EB;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight: 800; color:#374151; font-size: 14px;
  padding: 0 12px;
}
.catalog-pagination .page-link:hover{
  color: var(--brand-orange-dark);
  background: var(--brand-orange-light);
  border-color: var(--brand-orange-light);
}
.catalog-pagination .page-item.active .page-link{
  background: var(--brand-orange); border-color: var(--brand-orange);
  color:#fff;
}
.catalog-pagination .page-item.disabled .page-link{ color:#D1D5DB; background:#F9FAFB; }

/* Mobile filters button */
.mobile-filters-btn{
  display: none;
  width: 100%; background: var(--brand-orange);
  color:#fff; font-weight: 800; border:none;
  padding: 12px; border-radius: .75rem; font-size: 14px;
  margin-bottom: 12px;
}
.mobile-filters-btn i{ margin-right: 6px; }
@media (max-width: 991.98px){
  .mobile-filters-btn{ display: inline-flex; align-items:center; justify-content: center; }
}

/* Filters offcanvas (mobile) */
.filters-offcanvas .offcanvas-body{ padding: 0; }
.filters-offcanvas .cat-sidebar{
  position: static; max-height: none; border: none; border-radius: 0;
  padding: 18px;
}

/* Empty state */
.catalog-empty{
  background:#fff; border:2px dashed #E5E7EB; border-radius: 1rem;
  padding: 50px 20px; text-align: center;
}
.catalog-empty i{ font-size: 56px; color:#D1D5DB; margin-bottom: 14px; display:block; }
.catalog-empty h4{ font-weight: 900; color:#111827; margin-bottom: 6px; }
.catalog-empty p{ color:#6B7280; margin: 0 0 16px; }

/* Category banner */
.cat-banner{
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  color:#fff; border-radius: 1rem; padding: 22px 26px; margin-bottom: 16px;
  display:flex; align-items:center; gap:18px;
  position: relative; overflow: hidden;
}
.cat-banner::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width: 220px; height: 220px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.cat-banner .cb-ico{
  width: 64px; height: 64px; border-radius: 14px;
  background: rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 32px; flex-shrink: 0; position: relative; z-index: 1;
}
.cat-banner h4{ font-weight: 900; margin: 0 0 4px; position: relative; z-index: 1; }
.cat-banner p{ margin: 0; opacity: .95; font-size: 14px; position: relative; z-index: 1; }

/* ==========================================================
   PRODUCT DETAIL PAGE
   ========================================================== */
.detail-wrapper{ padding: 22px 0 60px; background: #F9FAFB; }
.detail-hero{
  background: #fff;
  border-radius: 1.25rem;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
}
@media (max-width: 991.98px){
  .detail-hero{ grid-template-columns: 1fr; gap: 24px; padding: 18px; }
}
/* Gallery */
.dt-gallery{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dt-gallery-main{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  background: linear-gradient(135deg, #FDF0E5 0%, #FFF 60%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid #F3F4F6;
}
.dt-gallery-main i{ font-size: 220px; color: var(--brand-orange); filter: drop-shadow(0 10px 20px rgba(237,123,40,.25)); }
.dt-gallery-main .dt-disc-badge{
  position: absolute; top: 14px; left: 14px;
  background: var(--brand-orange); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(237,123,40,.35);
}
.dt-gallery-main .dt-zoom{
  position: absolute; bottom: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: #111827;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E5E7EB;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  cursor: pointer;
}
.dt-gallery-main .dt-zoom:hover{ background: #111827; color: #fff; border-color: #111827; }
.dt-gallery-main .dt-wish{
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: #EF4444;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #E5E7EB;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  cursor: pointer;
  font-size: 18px;
}
.dt-gallery-main .dt-wish.active{ background: #EF4444; color:#fff; border-color:#EF4444; }
.dt-thumbs{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.dt-thumb{
  aspect-ratio: 1 / 1;
  border-radius: .625rem;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 28px;
  transition: all .2s;
}
.dt-thumb:hover{ color: var(--brand-orange); background: #FDF0E5; }
.dt-thumb.active{
  border-color: var(--brand-orange);
  color: var(--brand-orange);
  background: #FDF0E5;
}
/* Info column */
.dt-info{ min-width: 0; display: flex; flex-direction: column; }
.dt-brand{
  font-size: 12px;
  color: var(--brand-orange);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.dt-title{
  font-size: 26px;
  font-weight: 900;
  color: #111827;
  line-height: 1.25;
  margin: 0 0 10px;
}
.dt-sku{
  font-size: 13px;
  color: #6B7280;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.dt-sku strong{ color: #111827; }
.dt-rating-row{
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dt-rating-row .stars i{ color: #F59E0B; }
.dt-rating-row .dt-reviews{
  color: #6B7280; font-size: 13px; font-weight: 600;
}
.dt-rating-row .dt-reviews a{ color: var(--brand-orange); font-weight: 700; }
.dt-badges{ display: flex; gap: 8px; flex-wrap: wrap; }
.dt-badge{
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}
.dt-badge.new{ background: #DBEAFE; color: #1E40AF; }
.dt-badge.top{ background: #FEF3C7; color: #92400E; }
.dt-badge.eco{ background: #D1FAE5; color: #065F46; }

.dt-price-box{
  background: linear-gradient(135deg, #FDF0E5 0%, #FFF 100%);
  border: 1px solid #FDE4CF;
  border-radius: 1rem;
  padding: 18px 20px;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 2px 8px rgba(237,123,40,.06);
}
.dt-price-row{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dt-price-new{
  font-size: 34px; font-weight: 900; color: #111827;
  letter-spacing: -.02em; line-height: 1;
}
.dt-price-old{ font-size: 18px; color: #9CA3AF; text-decoration: line-through; font-weight: 700; }
.dt-price-disc{
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(237,123,40,.25);
}
.dt-price-save{
  font-size: 13px; color: #059669; font-weight: 700;
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: .3rem;
}
.dt-price-save::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.dt-price-vat{ font-size: 12px; color: #6B7280; margin-top: 4px; font-weight: 600; }

.dt-stock{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 14px; font-weight: 700;
}
.dt-stock.in{ color: #059669; }
.dt-stock.in::before{
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 4px rgba(5,150,105,.15);
  display: inline-block;
}
.dt-stock-note{ color: #6B7280; font-weight: 600; font-size: 13px; }

.dt-options{ margin-bottom: 18px; }
.dt-option{ margin-bottom: 14px; }
.dt-option-label{
  font-size: 13px; font-weight: 800; color: #111827;
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.dt-option-label span.chosen{ color: var(--brand-orange); font-weight: 700; }
.dt-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.dt-chip{
  padding: 8px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: .625rem;
  background: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  color: #374151;
}
.dt-chip:hover{ border-color: var(--brand-orange); color: var(--brand-orange); }
.dt-chip.active{
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.dt-chip.disabled{
  opacity: .5; cursor: not-allowed;
  text-decoration: line-through;
}

.dt-cta-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  margin-bottom: 14px;
  align-items: stretch;
}
.dt-qty{
  display: flex; align-items: center;
  border: 1.5px solid #E5E7EB;
  border-radius: .625rem;
  overflow: hidden;
  background: #fff;
}
.dt-qty button{
  width: 40px; height: 48px;
  border: 0; background: transparent;
  font-weight: 900; color: #111827;
  cursor: pointer;
}
.dt-qty button:hover{ background: #F9FAFB; color: var(--brand-orange); }
.dt-qty input{
  width: 48px; height: 48px;
  border: 0; text-align: center;
  font-weight: 800; font-size: 16px;
  -moz-appearance: textfield;
}
.dt-qty input::-webkit-outer-spin-button,
.dt-qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.dt-add-btn{
  background: var(--brand-orange);
  border: 0;
  border-radius: .625rem;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  padding: 0 24px;
  height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: background .15s;
}
.dt-add-btn:hover{ background: var(--brand-orange-dark); }
.dt-wish-btn{
  width: 48px; height: 48px;
  border: 1.5px solid #E5E7EB;
  border-radius: .625rem;
  background: #fff;
  color: #EF4444;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
.dt-wish-btn:hover{ background: #FEE2E2; border-color: #EF4444; }
.dt-wish-btn.active{ background:#EF4444; color:#fff; border-color:#EF4444; }

.dt-secondary-cta{
  display: flex; gap: 8px; flex-wrap: wrap;
}
.dt-secondary-cta .btn{
  flex: 1; min-width: 140px;
  border-radius: .625rem;
  font-weight: 700;
  padding: 10px 14px;
  font-size: 13.5px;
}

.dt-highlights{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #F3F4F6;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
}
.dt-hl{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: #374151;
  padding: 6px 8px; border-radius: 10px;
  transition: background .2s ease, transform .2s ease;
}
.dt-hl:hover{ background: #FFFBF5; transform: translateX(2px); }
.dt-hl i{
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #FDF0E5, #FDE4CF);
  color: var(--brand-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  transition: transform .2s ease;
}
.dt-hl:hover i{ transform: scale(1.08) rotate(-5deg); }

/* ========= TAB SECTION ========= */
.detail-tabs-section{
  background: #fff;
  border-radius: 1.25rem;
  padding: 24px;
  margin-top: 22px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
}
.dt-tabs{
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid #F3F4F6;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  position: relative;
}
.dt-tabs li{ margin: 0; }
.dt-tabs button{
  background: transparent; border: 0;
  padding: 12px 20px;
  font-weight: 800; font-size: 14px;
  color: #6B7280;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 6px 6px 0 0;
}
.dt-tabs button i{ transition: transform .2s ease; }
.dt-tabs button:hover{ color: var(--brand-orange); background: #FFFBF5; }
.dt-tabs button:hover i{ transform: scale(1.1); }
.dt-tabs button.active{
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
  background: linear-gradient(180deg, transparent 0%, rgba(237,123,40,.05) 100%);
}
.dt-tab-pane{ display: none; }
.dt-tab-pane.active{ display: block; }

/* Descrizione */
.dt-desc{ max-width: 78ch; }
.dt-desc p{ font-size: 15px; line-height: 1.65; color: #374151; }
.dt-desc h3{
  font-weight: 900; margin: 24px 0 10px; font-size: 17px; color: #111827;
  display: flex; align-items: center; gap: .55rem;
}
.dt-desc h3::before{
  content: ""; display: inline-block;
  width: 4px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-orange), var(--brand-orange-dark));
}
.dt-desc ul{ padding-left: 20px; margin-bottom: 14px; }
.dt-desc ul li{ margin-bottom: 6px; color: #374151; line-height: 1.55; }
.dt-desc ul li strong{ color: #111827; }
.dt-desc ul li::marker{ color: var(--brand-orange); }

/* Specifiche tabella full */
.dt-specs-full{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 28px;
}
@media (max-width: 767.98px){ .dt-specs-full{ grid-template-columns: 1fr; } }
.dt-specs-full .row-item{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #F3F4F6;
  gap: 14px;
}
.dt-specs-full .row-item .k{
  color: #6B7280; font-weight: 700;
  text-transform: uppercase; font-size: 11px;
  letter-spacing: .04em;
}
.dt-specs-full .row-item .v{
  color: #111827; font-weight: 800; font-size: 14px;
  text-align: right;
}

/* Recensioni */
.dt-reviews-summary{
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: 36px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #FFFBF5 0%, #fff 100%);
  border: 1px solid #FDE4CF;
  border-radius: 1rem;
  margin-bottom: 24px;
  align-items: center;
}
@media (max-width: 767.98px){
  .dt-reviews-summary{ grid-template-columns: 1fr; gap: 20px; padding: 18px; }
}
.dt-rs-score{
  text-align: center;
  padding: 4px 0;
}
.dt-rs-score .score{
  font-size: 62px; font-weight: 900;
  color: #111827; line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--brand-orange-dark), var(--brand-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dt-rs-score .stars{ margin-top: 8px; }
.dt-rs-score .stars i{
  color: #F59E0B; font-size: 20px;
  filter: drop-shadow(0 1px 1px rgba(245,158,11,.25));
}
.dt-rs-score .total{
  color: #6B7280; font-weight: 700; font-size: 13px; margin-top: 8px;
}
.dt-rs-bars{ display: flex; flex-direction: column; gap: 10px; }
.dt-rs-bar{
  display: grid; grid-template-columns: 42px 1fr 44px;
  gap: 12px; align-items: center;
  font-size: 13px; font-weight: 700;
  color: #4B5563;
}
.dt-rs-bar .bar{
  height: 10px; background: #F3F4F6; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(17,24,39,.05);
}
.dt-rs-bar .bar span{
  display: block; height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.dt-rs-bar .cnt{ color: #6B7280; text-align: right; font-size: 12px; }
.dt-review-list{ display: flex; flex-direction: column; gap: 4px; }
.dt-review{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px dashed #E5E7EB;
  transition: background .2s ease;
}
.dt-review:hover{ background: #FFFBF5; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.dt-review:last-child{ border-bottom: 0; }
.dt-rv-avatar{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px;
  box-shadow: 0 3px 8px rgba(237,123,40,.22);
}
.dt-rv-head{ display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-rv-author{ font-weight: 800; color: #111827; font-size: 14px; }
.dt-rv-date{ color: #9CA3AF; font-size: 12px; font-weight: 600; }
.dt-rv-stars i{ color: #F59E0B; font-size: 13px; }
.dt-rv-title{ font-weight: 800; color: #111827; margin: 6px 0 4px; font-size: 14.5px; }
.dt-rv-body{ color: #4B5563; font-size: 13.5px; line-height: 1.6; }
.dt-rv-badge{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #059669; font-weight: 800;
  margin-top: 8px;
  background: rgba(5,150,105,.08);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ========= COMPATIBLE VEHICLES ========= */
.detail-compat-section{
  background: #fff;
  border-radius: 1.25rem;
  padding: 24px;
  margin-top: 22px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
}
.dt-section-head{
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.dt-section-title{
  font-size: 20px; font-weight: 900; color: #111827;
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.dt-section-title i{ color: var(--brand-orange); }
.dt-section-subtitle{
  font-size: 13.5px; color: #6B7280; font-weight: 600;
  margin: 4px 0 0;
}
.dt-compat-search{
  position: relative;
  width: 340px; max-width: 100%;
}
.dt-compat-search i{
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  color: #9CA3AF;
  transition: color .2s ease;
}
.dt-compat-search input{
  border: 1.5px solid #E5E7EB;
  border-radius: var(--radius-pill);
  padding: 10px 16px 10px 40px;
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  background: #F9FAFB;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dt-compat-search input:focus{
  outline: 0;
  border-color: var(--brand-orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(237,123,40,.15);
}
.dt-compat-search:focus-within i{ color: var(--brand-orange); }
.dt-compat-grid{ display: flex; flex-direction: column; gap: 10px; }
.dt-compat-brand{
  border: 1px solid #F3F4F6;
  border-radius: .875rem;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dt-compat-brand:hover{ border-color: #FDE4CF; }
.dt-compat-brand-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: #F9FAFB;
  cursor: pointer;
  border: 0;
  width: 100%;
  text-align: left;
  transition: background .2s ease;
}
.dt-compat-brand-head:hover{ background: #FDF0E5; }
.dt-compat-brand-head[aria-expanded="true"]{
  background: linear-gradient(135deg, #FDF0E5, #FDE4CF);
  box-shadow: inset 0 -1px 0 #FBCFA7;
}
.dt-compat-brand-head .dcb-left{
  display: flex; align-items: center; gap: 14px;
}
.dt-compat-brand-head .dcb-ico{
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E5E7EB;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--brand-orange);
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dt-compat-brand-head:hover .dcb-ico{
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(237,123,40,.15);
}
.dt-compat-brand-head .dcb-name{ font-weight: 900; font-size: 15px; color: #111827; }
.dt-compat-brand-head .dcb-count{
  color: #6B7280; font-weight: 700; font-size: 12px;
  margin-left: 6px;
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
.dt-compat-brand-head .dcb-chev{
  transition: transform .25s ease;
  color: #9CA3AF;
}
.dt-compat-brand-head[aria-expanded="true"] .dcb-chev{
  transform: rotate(180deg);
  color: var(--brand-orange);
}
.dt-compat-brand-body{ padding: 4px 0; background: #fff; }
.dt-compat-model{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid #F3F4F6;
  font-size: 13.5px;
  align-items: center;
  transition: background .2s ease, padding-left .2s ease;
}
.dt-compat-model:hover{
  background: #FFFBF5;
  padding-left: 22px;
}
.dt-compat-model .cm-model{
  font-weight: 800; color: #111827;
  display: flex; flex-direction: column; gap: 2px;
}
.dt-compat-model .cm-model small{
  font-weight: 600; color: #6B7280; font-size: 12px;
}
.dt-compat-model .cm-years{
  color: #6B7280; font-weight: 700; font-size: 12px;
  background: #F3F4F6;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.dt-compat-model .cm-engine{
  color: #374151; font-weight: 700; font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 575.98px){
  .dt-compat-model{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.dt-compat-empty{
  text-align: center; padding: 30px 20px;
  color: #6B7280; font-weight: 600;
}
.dt-compat-empty i{ font-size: 40px; color: #D1D5DB; margin-bottom: 8px; display: block; }

/* ========= RELATED PRODUCTS ========= */
.detail-related-section{
  margin-top: 22px;
}
.detail-related-section .dt-section-head{ margin-bottom: 16px; }
.dt-related-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 991.98px){ .dt-related-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px){ .dt-related-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px){ .dt-related-grid{ grid-template-columns: 1fr; } }
/* Compact vertical card for related items */
.dt-related-card{
  background: #fff;
  border-radius: 1rem;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
}
.dt-related-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(237,123,40,.12), 0 2px 5px rgba(17,24,39,.06);
  border-color: var(--brand-primary-light);
}
.dt-related-card .rc-img{
  aspect-ratio: 1/1;
  border-radius: .75rem;
  background: linear-gradient(135deg, #FDF0E5 0%, #FFF 60%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.dt-related-card .rc-img i{
  font-size: 56px; color: var(--brand-orange);
  transition: transform .3s ease;
}
.dt-related-card:hover .rc-img i{ transform: scale(1.08) rotate(-3deg); }
.dt-related-card .rc-disc{
  position: absolute; top: 8px; left: 8px;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 900;
  box-shadow: 0 2px 4px rgba(237,123,40,.25);
  letter-spacing: .02em;
}
.dt-related-card .rc-wish{
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #EF4444;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17,24,39,.08);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dt-related-card .rc-wish:hover{
  background: #EF4444; color: #fff;
  transform: scale(1.1);
}
.dt-related-card .rc-brand{
  font-size: 10.5px; color: var(--brand-orange);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 3px;
}
.dt-related-card .rc-name{
  font-size: 13.5px; font-weight: 800; color: #111827;
  line-height: 1.35; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
  transition: color .2s ease;
}
.dt-related-card:hover .rc-name{ color: var(--brand-primary); }
.dt-related-card .rc-rating{ font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 8px; }
.dt-related-card .rc-rating i{ color: #F59E0B; font-size: 11px; }
.dt-related-card .rc-rating small{ color:#9CA3AF; font-weight:600; }
.dt-related-card .rc-prices{
  display: flex; align-items: baseline; gap: 8px;
  margin-top: auto; padding-top: 6px;
}
.dt-related-card .rc-price-new{
  font-size: 18px; font-weight: 900; color:#111827;
  letter-spacing: -.02em;
}
.dt-related-card .rc-price-old{ font-size: 13px; color: #9CA3AF; text-decoration: line-through; font-weight: 700; }
.dt-related-card .rc-add{
  margin-top: 10px;
  background: #111827; color: #fff;
  border: 0; border-radius: .625rem;
  padding: 9px 12px;
  font-weight: 800; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dt-related-card .rc-add:hover{
  background: var(--brand-orange);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(237,123,40,.25);
}


/* ============================================================
   PAGE · checkout.html
   ============================================================ */

*{ box-sizing:border-box; }
body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:#F3F4F6; color:#111827;
  margin:0; padding:0;
}
a{ color: var(--brand-orange-dark); text-decoration:none; }
a:hover{ color: var(--brand-orange); text-decoration:underline; }
.text-brand{ color: var(--brand-orange-dark) !important; }
.btn-primary{
  background: var(--brand-orange); border-color: var(--brand-orange);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--brand-orange-dark); border-color: var(--brand-orange-dark);
}
.btn-outline-primary{
  color: var(--brand-orange-dark); border-color: var(--brand-orange);
  font-weight: 700;
}
.btn-outline-primary:hover{
  background: var(--brand-orange); border-color: var(--brand-orange);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 .2rem rgba(237,123,40,.15);
}

/* ==========================================================
   HEADER
   ========================================================== */
.co-header{
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  padding: 14px 0;
  position: sticky; top:0; z-index: 50;
}
.co-header .brand{
  font-weight: 900; font-size: 24px; color: var(--brand-orange-dark);
  letter-spacing: -.02em;
}
.co-header .brand span{ color:#111827; }
.co-secure{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #16A34A;
}

/* ==========================================================
   STEPPER
   ========================================================== */
.co-stepper{
  background: #fff; border-bottom: 1px solid #E5E7EB;
  padding: 18px 0;
}
.co-steps{
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.co-step{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: #9CA3AF;
}
.co-step .num{
  width: 30px; height: 30px; border-radius: 50%;
  background: #E5E7EB; color: #9CA3AF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.co-step.active{ color: var(--brand-orange-dark); }
.co-step.active .num{ background: var(--brand-orange); color:#fff; }
.co-step.done{ color: #16A34A; }
.co-step.done .num{ background: #16A34A; color:#fff; }
.co-step-sep{
  width: 40px; height: 2px; background: #E5E7EB;
}
@media (max-width: 640px){
  .co-step-label{ display:none; }
  .co-step-sep{ width: 16px; }
}

/* ==========================================================
   MAIN LAYOUT
   ========================================================== */
.co-main{ padding: 26px 0 60px; }
.co-card{
  background: #fff;
  border-radius: 1rem;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.co-card-title{
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 17px; color: #111827;
  margin-bottom: 16px;
}
.co-card-title i{
  color: var(--brand-orange-dark); font-size: 22px;
}
.co-card-title .badge-step{
  margin-left: auto;
  background: var(--brand-orange-light); color: var(--brand-orange-dark);
  font-weight: 800; font-size: 11px;
  padding: 4px 10px; border-radius: 999px;
}

/* ==========================================================
   ACCOUNT TYPE SWITCHER (demo)
   ========================================================== */
.acct-switcher{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.acct-type{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #fff; border: 2px solid #E5E7EB;
  border-radius: .875rem;
  cursor: pointer; transition: all .15s;
  text-align: left;
}
.acct-type:hover{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.acct-type.active{
  border-color: var(--brand-orange); background: var(--brand-orange-light);
  box-shadow: 0 4px 12px rgba(237,123,40,.12);
}
.acct-type > i{ font-size: 24px; color: var(--brand-orange-dark); flex-shrink: 0; }
.acct-type .at-title{ font-weight: 800; font-size: 14px; color: #111827; line-height: 1.15; }
.acct-type .at-sub{ font-size: 11px; color: #6B7280; font-weight: 600; margin-top: 2px; }
@media (max-width: 640px){
  .acct-switcher{ grid-template-columns: 1fr; }
}

/* ==========================================================
   DELIVERY METHOD
   ========================================================== */
.dm-choice{
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.dm-opt{
  position: relative; display: block;
  border: 2px solid #E5E7EB; border-radius: 1rem;
  padding: 18px 18px 16px; cursor: pointer;
  background: #fff; transition: all .15s;
}
.dm-opt:hover{ border-color: var(--brand-orange); }
.dm-opt.selected{
  border-color: var(--brand-orange); background: var(--brand-orange-light);
  box-shadow: 0 6px 16px rgba(237,123,40,.12);
}
.dm-opt input[type="radio"]{ position: absolute; opacity: 0; }
.dm-opt .dm-icon{
  width: 46px; height: 46px; border-radius: .75rem;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 10px;
}
.dm-opt.selected .dm-icon{ background: #fff; }
.dm-opt .dm-title{ font-weight: 900; font-size: 15px; color:#111827; }
.dm-opt .dm-sub{ font-size: 12.5px; color:#6B7280; font-weight:600; margin-top: 3px; }
.dm-opt .dm-check{
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #D1D5DB;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: transparent;
  transition: all .15s;
}
.dm-opt.selected .dm-check{
  background: var(--brand-orange); border-color: var(--brand-orange);
  color: #fff;
}
@media (max-width: 640px){ .dm-choice{ grid-template-columns: 1fr; } }

/* ==========================================================
   SHIPPING SPEED OPTIONS
   ========================================================== */
.ship-opt{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 2px solid #E5E7EB;
  border-radius: .75rem; background: #fff;
  cursor: pointer; transition: all .15s; margin-bottom: 10px;
}
.ship-opt:hover{ border-color: var(--brand-orange); }
.ship-opt.selected{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.ship-opt input[type="radio"]{ margin: 0; accent-color: var(--brand-orange); flex-shrink: 0; }
.ship-opt .so-icon{
  width: 40px; height: 40px; border-radius: .625rem;
  background: var(--brand-orange-light); color: var(--brand-orange-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.ship-opt .so-body{ flex: 1; min-width: 0; }
.ship-opt .so-title{ font-weight: 800; font-size: 14px; color:#111827; display:flex; align-items:center; gap:8px; flex-wrap: wrap; }
.ship-opt .so-title .badge-inline{
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: #DCFCE7; color: #16A34A; text-transform: uppercase; letter-spacing: .04em;
}
.ship-opt .so-sub{ font-size: 12px; color:#6B7280; font-weight: 600; margin-top: 2px; }
.ship-opt .so-price{
  font-weight: 900; font-size: 15px; color: #111827;
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.ship-opt .so-price .free{ color: #16A34A; }
.ship-opt .so-price del{ color: #9CA3AF; font-size: 11px; font-weight: 700; }

/* ==========================================================
   PICKUP STORE LIST
   ========================================================== */
.pickup-store{
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 2px solid #E5E7EB;
  border-radius: .75rem; background: #fff;
  cursor: pointer; transition: all .15s; margin-bottom: 10px;
}
.pickup-store:hover{ border-color: var(--brand-orange); }
.pickup-store.selected{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.pickup-store input{ margin:0; accent-color: var(--brand-orange); flex-shrink: 0; }
.pickup-store .ps-body{ flex: 1; min-width: 0; }
.pickup-store .ps-name{
  font-weight: 800; font-size: 14px; color: #111827;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pickup-store .ps-addr{ font-size: 12px; color:#6B7280; font-weight:600; margin-top: 2px; }
.pickup-store .ps-meta{
  font-size: 11.5px; color: #374151; font-weight: 700; margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pickup-store .ps-meta .open{ color: #16A34A; }
.pickup-store .ps-meta .closed{ color: #DC2626; }
.pickup-store .ps-ready{
  font-weight: 900; font-size: 12px; color: var(--brand-orange-dark);
  text-align: right; flex-shrink: 0;
}
.pickup-store .ps-ready .small{ font-size: 10px; color: #6B7280; font-weight: 700; margin-top: 2px; display:block; }

/* ==========================================================
   CALENDAR (officina booking)
   ========================================================== */
.cal-wrap{
  background: #F9FAFB; border: 1px solid #E5E7EB;
  border-radius: .875rem; padding: 16px;
}
.cal-nav{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-nav .cal-title{
  font-weight: 900; font-size: 15px; color:#111827;
  text-transform: capitalize;
}
.cal-nav button{
  background: #fff; border: 1px solid #E5E7EB;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #374151; font-size: 16px;
  transition: all .15s;
}
.cal-nav button:hover{
  background: var(--brand-orange-light); border-color: var(--brand-orange);
  color: var(--brand-orange-dark);
}
.cal-days{
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-dow{
  text-align: center; font-size: 10.5px; font-weight: 800;
  color: #6B7280; text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 0 4px;
}
.cal-day{
  aspect-ratio: 1; border: 1.5px solid transparent;
  background: #fff; border-radius: .625rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer;
  transition: all .12s;
  font-weight: 700;
  position: relative;
}
.cal-day .d-num{ font-size: 15px; color:#111827; line-height:1; }
.cal-day .d-avail{
  font-size: 9px; font-weight: 800; color: #16A34A;
  text-transform: uppercase;
}
.cal-day:hover{ border-color: var(--brand-orange); }
.cal-day.selected{
  background: var(--brand-orange); border-color: var(--brand-orange);
}
.cal-day.selected .d-num{ color:#fff; }
.cal-day.selected .d-avail{ color: rgba(255,255,255,.85); }
.cal-day.past,
.cal-day.full{
  color: #D1D5DB; background: #F3F4F6;
  cursor: not-allowed;
}
.cal-day.past .d-num,
.cal-day.full .d-num{ color: #D1D5DB; text-decoration: line-through; }
.cal-day.past .d-avail,
.cal-day.full .d-avail{ display:none; }
.cal-day.today:not(.selected){
  border-color: var(--brand-orange);
}
.cal-day.today .d-num{ color: var(--brand-orange-dark); }
.cal-day.outside{
  opacity: 0;
  pointer-events: none;
}

.cal-slots-wrap{ margin-top: 14px; }
.cal-slots-title{
  font-size: 13px; font-weight: 800; color: #374151;
  margin-bottom: 8px;
}
.cal-slots-group{ margin-bottom: 10px; }
.cal-slots-group .cal-slots-heading{
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  color: #6B7280; letter-spacing: .04em; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.cal-slots{ display: flex; flex-wrap: wrap; gap: 8px; }
.cal-slot{
  padding: 8px 14px; border: 1.5px solid #E5E7EB;
  border-radius: .5rem; background: #fff;
  font-size: 13px; font-weight: 700; color: #111827;
  cursor: pointer; transition: all .12s;
}
.cal-slot:hover{ border-color: var(--brand-orange); color: var(--brand-orange-dark); }
.cal-slot.selected{
  border-color: var(--brand-orange); background: var(--brand-orange); color: #fff;
}
.cal-slot.taken{
  color: #D1D5DB; background: #F3F4F6;
  cursor: not-allowed; text-decoration: line-through;
}
.cal-empty{
  text-align: center; padding: 22px 10px;
  color: #6B7280; font-size: 13px; font-weight: 600;
}

/* ==========================================================
   SUMMARY (sticky right column)
   ========================================================== */
.co-summary{
  background: #fff; border-radius: 1rem;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  position: sticky; top: 78px;
}
.co-summary h6{
  font-weight: 900; font-size: 15px; margin-bottom: 14px;
  color: #111827;
}
.co-summary .cs-items{
  max-height: 220px; overflow-y: auto;
  padding-right: 4px; margin-bottom: 14px;
}
.cs-item{
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}
.cs-item:last-child{ border-bottom: 0; }
.cs-item .cs-img{
  width: 44px; height: 44px; border-radius: .5rem;
  background: #F9FAFB; display:flex; align-items:center; justify-content:center;
  font-size: 22px; color:#9CA3AF; flex-shrink: 0;
}
.cs-item .cs-info{ flex: 1; min-width: 0; }
.cs-item .cs-name{
  font-size: 12px; font-weight: 700; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-item .cs-qty{ font-size: 11px; color: #6B7280; font-weight: 600; }
.cs-item .cs-price{
  font-weight: 800; font-size: 13px; color: #111827;
  flex-shrink: 0; align-self: center;
}
.co-summary hr{ margin: 12px 0; border-color: #F3F4F6; }
.cs-row{
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: #374151; font-weight: 600;
  padding: 3px 0;
}
.cs-row.total{
  font-size: 17px; font-weight: 900; color: #111827;
  border-top: 1px solid #E5E7EB; padding-top: 12px; margin-top: 6px;
}
.cs-row .free{ color: #16A34A; font-weight: 800; }
.cs-promo{
  background: #F9FAFB; border-radius: .625rem;
  padding: 10px 12px; margin-top: 12px;
  display: flex; gap: 8px;
}
.cs-promo input{
  border: 0; background: transparent; outline: 0;
  flex: 1; font-size: 13px; font-weight: 600;
}
.cs-promo button{
  background: #111827; color: #fff;
  border: 0; border-radius: .5rem;
  padding: 5px 12px; font-size: 12px; font-weight: 800;
}
.cs-trust{
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: #6B7280; font-weight: 700;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}
.cs-trust span{ display: inline-flex; align-items: center; gap: 4px; }
.cs-trust i{ color: #16A34A; font-size: 13px; }

/* ==========================================================
   PAYMENT OPTIONS
   ========================================================== */
.pay-opt{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 2px solid #E5E7EB;
  border-radius: .625rem; background: #fff;
  cursor: pointer; transition: all .15s; margin-bottom: 8px;
}
.pay-opt:hover{ border-color: var(--brand-orange); }
.pay-opt.selected{ border-color: var(--brand-orange); background: var(--brand-orange-light); }
.pay-opt input{ margin: 0; accent-color: var(--brand-orange); flex-shrink: 0; }
.pay-opt i{ font-size: 22px; color: var(--brand-orange-dark); flex-shrink: 0; }
.pay-opt .pay-name{ font-weight: 800; font-size: 14px; color: #111827; }
.pay-opt .pay-sub{ font-size: 11.5px; color: #6B7280; font-weight: 600; }
.pay-opt .pay-brands{
  margin-left: auto; display: flex; gap: 4px; flex-shrink: 0;
}
.pay-opt .pay-brands .pb{
  padding: 2px 6px; border: 1px solid #E5E7EB;
  border-radius: .3rem; background:#fff;
  font-size: 9px; font-weight: 900; color: #6B7280;
  letter-spacing: .04em;
}

/* ==========================================================
   SECTION HIDDEN LOGIC
   ========================================================== */
.hidden-section{ display: none; }

.form-label{
  font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 4px;
}
.section-sub-title{
  font-weight: 800; font-size: 12px; color: var(--brand-orange-dark);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 16px 0 10px; display: flex; align-items: center;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.co-footer{
  background: #111827; color: #9CA3AF; font-size: 12px;
  padding: 20px 0; margin-top: 40px;
}

/* ==========================================================
   SUCCESS TOAST
   ========================================================== */
.toast-co{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: #111827; color: #fff;
  padding: 14px 20px; border-radius: .75rem;
  font-weight: 700; font-size: 14px;
  z-index: 9999; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0; transition: all .3s;
}
.toast-co.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-co.success i{ color: #22C55E; font-size: 20px; }


/* ============================================================
   PAGE · dashboard.html
   ============================================================ */

*{ box-sizing: border-box; }
body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  margin: 0; padding: 0;
}
a{ color: var(--brand-orange-dark); text-decoration: none; }
a:hover{ color: var(--brand-orange); }
.text-brand{ color: var(--brand-orange-dark) !important; }
.btn-primary{
  background: var(--brand-orange); border-color: var(--brand-orange);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--brand-orange-dark); border-color: var(--brand-orange-dark);
}
.btn-outline-primary{
  color: var(--brand-orange-dark); border-color: var(--brand-orange);
}
.btn-outline-primary:hover{
  background: var(--brand-orange); border-color: var(--brand-orange);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 .2rem rgba(237,123,40,.15);
}

/* ==========================================================
   APP LAYOUT
   ========================================================== */
.app{
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
@media (max-width: 991px){
  .app{ grid-template-columns: 1fr; }
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 22px 18px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
@media (max-width: 991px){
  .sidebar{ position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
}
.sb-brand{
  font-weight: 900; font-size: 22px; color: var(--brand-orange-dark);
  letter-spacing: -.02em;
  display: inline-block; margin-bottom: 22px;
}
.sb-brand span{ color: var(--ink); }

.sb-profile{
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: .875rem;
  margin-bottom: 18px;
}
.sb-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff; font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-profile .sp-name{
  font-weight: 800; font-size: 13.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-profile .sp-role{
  font-size: 11px; color: var(--brand-orange-dark); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-orange-light);
  padding: 2px 8px; border-radius: 999px;
  margin-top: 2px;
}

.sb-section-title{
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3);
  margin: 16px 8px 8px;
}
.sb-nav{ list-style: none; padding: 0; margin: 0; }
.sb-nav a{
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  color: var(--ink-2); font-weight: 700; font-size: 13.5px;
  border-radius: .625rem;
  transition: all .12s;
}
.sb-nav a i{ font-size: 18px; color: var(--ink-3); flex-shrink: 0; }
.sb-nav a:hover{
  background: var(--bg); color: var(--ink); text-decoration: none;
}
.sb-nav a:hover i{ color: var(--brand-orange-dark); }
.sb-nav a.active{
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
}
.sb-nav a.active i{ color: var(--brand-orange-dark); }
.sb-nav a .sb-badge{
  margin-left: auto;
  background: #fff;
  color: var(--ink);
  font-size: 11px; font-weight: 800;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line);
}
.sb-nav a.active .sb-badge{
  background: var(--brand-orange); color: #fff; border-color: transparent;
}
.sb-nav a.sb-hidden{ display: none; }

/* ---------- MAIN AREA ---------- */
.main{
  padding: 0 0 60px;
  min-width: 0;
}
.topbar{
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .page-title{
  font-weight: 900; font-size: 20px; color: var(--ink); margin: 0;
}
.topbar .tb-actions{
  display: flex; align-items: center; gap: 10px;
}
.role-switcher{
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); padding: 3px;
  gap: 2px;
}
.role-btn{
  background: transparent; border: 0;
  padding: 6px 14px; font-size: 12.5px; font-weight: 800;
  border-radius: 999px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.role-btn:hover{ color: var(--ink); }
.role-btn.active{
  background: #fff; color: var(--brand-orange-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
@media (max-width: 640px){
  .role-btn span{ display: none; }
  .role-btn{ padding: 6px 10px; }
  .topbar{ padding: 12px 16px; }
}

.content{ padding: 26px 28px; }
@media (max-width: 640px){ .content{ padding: 18px 16px; } }

/* ---------- CARD ---------- */
.card-sleek{
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 1rem;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.card-sleek-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.card-sleek-title{
  font-weight: 900; font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  margin: 0;
}
.card-sleek-title i{ color: var(--brand-orange-dark); font-size: 19px; }
.card-sleek-link{
  font-size: 12.5px; font-weight: 800; color: var(--brand-orange-dark);
}

/* ---------- STATS ---------- */
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 991px){ .stats{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .stats{ grid-template-columns: 1fr 1fr; } }
.stat{
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 1rem; padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  position: relative; overflow: hidden;
}
.stat .stat-ico{
  width: 40px; height: 40px; border-radius: .75rem;
  background: var(--brand-orange-light); color: var(--brand-orange-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
}
.stat .stat-ico.blue{ background: #DBEAFE; color: #1E40AF; }
.stat .stat-ico.green{ background: #DCFCE7; color: #16A34A; }
.stat .stat-ico.purple{ background: #EDE9FE; color: #6D28D9; }
.stat .stat-label{ font-size: 12px; color: var(--ink-3); font-weight: 700; }
.stat .stat-value{ font-size: 26px; font-weight: 900; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; }
.stat .stat-delta{
  font-size: 11.5px; font-weight: 800;
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.stat .stat-delta.up{ color: #16A34A; }
.stat .stat-delta.down{ color: #DC2626; }
.stat .stat-delta.flat{ color: var(--ink-3); }

/* ---------- ORDERS TABLE ---------- */
.orders-table{ width: 100%; font-size: 13.5px; }
.orders-table thead th{
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 800;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  text-align: left;
}
.orders-table tbody td{
  padding: 14px 12px; border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.orders-table tbody tr:hover{ background: var(--bg); }
.order-id{ font-weight: 800; color: var(--ink); }
.order-date{ font-size: 12px; color: var(--ink-3); font-weight: 600; }
.order-total{ font-weight: 900; }
.order-items{ font-size: 12px; color: var(--ink-3); font-weight: 600; }

.status-pill{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}
.status-pill i{ font-size: 9px; }
.status-ok{ background: #DCFCE7; color: #15803D; }
.status-pending{ background: #FEF3C7; color: #B45309; }
.status-shipping{ background: #DBEAFE; color: #1E40AF; }
.status-cancelled{ background: #FEE2E2; color: #B91C1C; }
.status-draft{ background: #F3F4F6; color: var(--ink-2); }

.filter-pills{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.filter-pill{
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12px; font-weight: 800; color: var(--ink-2);
  cursor: pointer; transition: all .12s;
}
.filter-pill:hover{ border-color: var(--brand-orange); color: var(--brand-orange-dark); }
.filter-pill.active{
  background: var(--ink); color: #fff; border-color: var(--ink);
}

/* ---------- SECTION ---------- */
.panel{ display: none; }
.panel.active{ display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }

.panel h3.section-title{
  font-size: 22px; font-weight: 900; margin-bottom: 4px;
  letter-spacing: -.01em;
}
.panel p.section-lead{
  color: var(--ink-3); font-size: 13.5px; font-weight: 600;
  margin-bottom: 22px;
}

/* ---------- VEHICLES ---------- */
.vehicles-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.vehicle-card{
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 1rem; padding: 18px;
  transition: all .15s;
  cursor: pointer;
  position: relative;
}
.vehicle-card:hover{
  border-color: var(--brand-orange);
  box-shadow: 0 8px 20px rgba(237,123,40,.08);
  transform: translateY(-2px);
}
.vehicle-card.primary{
  border-color: var(--brand-orange);
  background: var(--brand-orange-light);
}
.vehicle-card .v-head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.vehicle-card .v-ico{
  width: 44px; height: 44px; border-radius: .75rem;
  background: var(--bg); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.vehicle-card.primary .v-ico{ background: #fff; color: var(--brand-orange-dark); }
.vehicle-card .v-title{ font-weight: 900; font-size: 15px; color: var(--ink); }
.vehicle-card .v-plate{
  display: inline-block; font-family: 'Courier New', monospace;
  font-weight: 900; font-size: 13px;
  background: #fff; border: 1px solid var(--ink);
  padding: 2px 10px; border-radius: .3rem;
  margin-top: 3px; letter-spacing: .08em;
}
.vehicle-card .v-meta{
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 12px; color: var(--ink-2);
  margin-top: 10px;
}
.vehicle-card .v-meta span{ color: var(--ink-3); font-weight: 700; }
.vehicle-card .v-star{
  position: absolute; top: 14px; right: 14px;
  color: var(--brand-orange);
}
.vehicle-card-add{
  background: transparent; border: 2px dashed var(--line);
  border-radius: 1rem; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-3); font-weight: 700; font-size: 13px;
  cursor: pointer; min-height: 140px;
  transition: all .15s;
}
.vehicle-card-add:hover{
  border-color: var(--brand-orange); color: var(--brand-orange-dark);
  background: var(--brand-orange-light);
}
.vehicle-card-add i{ font-size: 28px; margin-bottom: 6px; }

/* ---------- APPOINTMENTS (officina) ---------- */
.appt-item{
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--line-2);
  border-radius: .875rem; background: #fff;
  margin-bottom: 10px;
}
.appt-date{
  width: 64px; flex-shrink: 0;
  text-align: center;
  background: var(--brand-orange-light);
  border-radius: .625rem;
  padding: 8px 0;
}
.appt-date .day-num{ font-size: 22px; font-weight: 900; color: var(--brand-orange-dark); line-height: 1; }
.appt-date .day-mon{ font-size: 10.5px; font-weight: 800; color: var(--brand-orange-dark); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.appt-date .day-wd{ font-size: 10px; color: var(--brand-orange-dark); font-weight: 700; margin-top: 1px; }
.appt-body{ flex: 1; min-width: 0; }
.appt-title{ font-weight: 900; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.appt-meta{
  font-size: 12px; color: var(--ink-3); font-weight: 600;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.appt-meta i{ color: var(--brand-orange-dark); margin-right: 4px; }
.appt-actions{ flex-shrink: 0; }

/* ---------- CUSTOMERS (pro) ---------- */
.customer-row{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.customer-row:last-child{ border-bottom: 0; }
.customer-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: #E5E7EB; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.customer-info{ flex: 1; min-width: 0; }
.customer-name{ font-weight: 800; font-size: 14px; color: var(--ink); }
.customer-sub{ font-size: 12px; color: var(--ink-3); font-weight: 600; }
.customer-stat{ font-weight: 800; font-size: 13px; color: var(--ink); flex-shrink: 0; text-align: right; }
.customer-stat span{ font-size: 11px; color: var(--ink-3); font-weight: 700; display: block; }

/* ---------- INVOICES (pro) ---------- */
.invoice-row{
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--line-2);
  border-radius: .75rem; background: #fff;
  margin-bottom: 8px;
}
.invoice-ico{
  width: 40px; height: 40px; border-radius: .5rem;
  background: #DBEAFE; color: #1E40AF;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.invoice-ico.paid{ background: #DCFCE7; color: #16A34A; }
.invoice-ico.overdue{ background: #FEE2E2; color: #B91C1C; }
.invoice-body{ flex: 1; min-width: 0; }
.invoice-num{ font-weight: 800; font-size: 14px; color: var(--ink); }
.invoice-sub{ font-size: 12px; color: var(--ink-3); font-weight: 600; }
.invoice-amount{ font-weight: 900; font-size: 15px; color: var(--ink); flex-shrink: 0; }
.invoice-actions{ flex-shrink: 0; }

/* ---------- ADDRESSES / PAYMENTS ---------- */
.addr-grid, .pay-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.addr-card, .pay-card{
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 1rem; padding: 18px;
  position: relative;
}
.addr-card.primary, .pay-card.primary{
  border-color: var(--brand-orange); background: var(--brand-orange-light);
}
.addr-card .a-title, .pay-card .p-title{
  font-weight: 900; font-size: 14px;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.addr-card .a-body, .pay-card .p-body{
  font-size: 13px; color: var(--ink-2); font-weight: 600; line-height: 1.5;
}
.pill-default{
  font-size: 10px; font-weight: 800;
  background: var(--brand-orange-dark); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- PROFILE ---------- */
.profile-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 640px){ .profile-grid{ grid-template-columns: 1fr; } }

/* ---------- WISHLIST ---------- */
.wish-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.wish-card{
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 1rem; padding: 14px;
  text-align: center;
}
.wish-card .w-img{
  width: 100%; aspect-ratio: 1; border-radius: .5rem;
  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--brand-orange-dark);
  margin-bottom: 10px;
}
.wish-card .w-name{ font-weight: 800; font-size: 13px; color: var(--ink); min-height: 34px; }
.wish-card .w-price{ font-weight: 900; font-size: 15px; color: var(--ink); margin: 6px 0 8px; }

/* ---------- ROLE-SPECIFIC STAT TINT ---------- */
body[data-role="officina"] .stat .stat-ico{ background: #EDE9FE; color: #6D28D9; }
body[data-role="professionista"] .stat .stat-ico{ background: #DBEAFE; color: #1E40AF; }
body[data-role="privato"] .stat .stat-ico{ background: var(--brand-orange-light); color: var(--brand-orange-dark); }

/* ---------- TOAST ---------- */
.toast-wrap{
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
}
.toast-item{
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: .75rem;
  font-weight: 700; font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  animation: slideIn .25s ease;
}
.toast-item i{ color: #22C55E; font-size: 18px; }
@keyframes slideIn{
  from{ opacity: 0; transform: translateX(30px); }
  to  { opacity: 1; transform: translateX(0); }
}

/* ---------- SEARCH INPUT ---------- */
.search-mini{
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px;
}
.search-mini input{
  border: 0; background: transparent; outline: 0;
  width: 180px; font-weight: 600;
}
.search-mini i{ color: var(--ink-3); }

/* ---------- MOBILE sidebar toggle ---------- */
.mobile-menu-btn{
  display: none;
  background: transparent; border: 0;
  font-size: 22px; color: var(--ink);
}
@media (max-width: 991px){
  .mobile-menu-btn{ display: inline-flex; }
}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  text-align: center; padding: 40px 20px;
  color: var(--ink-3);
}
.empty-state i{ font-size: 44px; margin-bottom: 10px; color: #D1D5DB; display: block; }
.empty-state .es-title{ font-weight: 800; font-size: 15px; color: var(--ink-2); margin-bottom: 4px; }
.empty-state .es-sub{ font-size: 13px; }

/* ============================================================
   PRODUCT CARD · azioni impilate su mobile e tablet
   ------------------------------------------------------------
   Sotto 992 px le due azioni "Dettagli" e "Aggiungi al carrello"
   vanno su due righe (una sopra l'altra) per restare leggibili
   e facili da toccare. Vale per tutte le card
   (home grids e catalogo), sia su smartphone che su tablet.
   ============================================================ */
@media (max-width: 991.98px){
  .product-card .p-actions{
    flex-direction: column;
    gap: 8px;
  }
  .product-card .p-actions .details-btn,
  .product-card .p-actions .add-btn{
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ============================================================
   STICKY HEADER · disattivato su mobile e tablet
   ------------------------------------------------------------
   Sotto 992 px la barra superiore non resta ancorata durante
   lo scroll: scorre via con il resto della pagina per lasciare
   più spazio visivo al contenuto. Desktop invariato.
   ============================================================ */
@media (max-width: 991.98px){
  .sticky-header-wrap{
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   MAIN HEADER · centrato su mobile
   ------------------------------------------------------------
   Sotto 768px il contenuto dell'header (logo, pulsante veicolo,
   campo di ricerca, azioni account/negozi) va in colonna e
   centrato orizzontalmente. Il campo di ricerca resta a tutta
   larghezza per restare usabile col pollice.
   ============================================================ */
@media (max-width: 767.98px){
  .main-header .container > .d-flex{
    justify-content: center;
    text-align: center;
  }
  .main-header .logo-wrap,
  .main-header .vehicle-btn,
  .main-header .header-actions{
    margin-left: auto;
    margin-right: auto;
  }
  .main-header .search-wrap{
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .main-header .header-actions{
    justify-content: center;
  }
}

/* ============================================================
   MARKETPLACE · stili
   ============================================================ */

/* ---- ribbon trust in home (sotto la sticky nav) ------------ */
.marketplace-ribbon{
  background: linear-gradient(90deg, var(--brand-primary) 0%, #F79C54 100%);
  color:#fff; padding:.6rem 0; font-weight:700; font-size:.9rem;
  box-shadow: var(--shadow-sm);
}
.marketplace-ribbon .mr-pill{
  background: rgba(255,255,255,.22); padding:.25rem .75rem; border-radius: var(--radius-pill);
  display:inline-flex; align-items:center; gap:.4rem;
}
.marketplace-ribbon .mr-pill i{ font-size:1rem; }
.marketplace-ribbon .mr-txt{ display:inline-flex; align-items:center; gap:.4rem; opacity:.95; }
.marketplace-ribbon .mr-sep{ opacity:.5; }
.marketplace-ribbon .mr-cta{
  margin-left:auto; color:#fff; text-decoration:none; font-weight:800;
  background: rgba(255,255,255,.15); padding:.35rem .85rem; border-radius: var(--radius-pill);
  transition: background .2s;
}
.marketplace-ribbon .mr-cta:hover{ background: rgba(255,255,255,.28); color:#fff; }

.hero-kicker{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--brand-primary-light); color: var(--brand-primary-dark);
  padding:.25rem .75rem; border-radius: var(--radius-pill);
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:.6rem;
}

/* ---- badge "Venduto da" in card ---------------------------- */
.card-mp-row{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin:.15rem 0 .35rem;
}
.sold-by{
  display:inline-flex; align-items:center; gap:.35rem;
  background: var(--line-2); color: var(--ink);
  padding:.2rem .5rem; border-radius: var(--radius-pill);
  font-size:.72rem; font-weight:700; text-decoration:none;
  border: 1px solid transparent; transition: border-color .15s, background .15s;
  max-width:100%; overflow:hidden;
}
.sold-by:hover{ background:#fff; border-color: var(--brand-primary); color: var(--ink); }
.sold-by .sb-label{ color: var(--ink-3); font-weight:600; }
.sold-by .sb-logo{
  width:18px; height:18px; border-radius:50%; color:#fff;
  font-size:.6rem; font-weight:900; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sold-by .sb-name{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.sold-by .sb-rating{
  display:inline-flex; align-items:center; gap:.15rem;
  background:#fff; color: var(--ink); padding:0 .35rem; border-radius: var(--radius-pill);
  font-size:.68rem; border: 1px solid var(--line);
}
.sold-by .sb-rating i{ color:#F6B100; font-size:.7rem; }

.card-offers-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  background: var(--state-info-bg); color: var(--state-info);
  font-size:.7rem; font-weight:800; padding:.2rem .5rem; border-radius: var(--radius-pill);
}

/* ---- dettaglio: header "Venduto da" ------------------------ */
.dt-sold-by{
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, #fff 0%, var(--brand-primary-light) 100%);
  border: 1.5px solid var(--brand-primary-light);
  border-radius: var(--radius-lg);
  padding: .9rem 1rem;
  margin: 0 0 1.1rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dt-sold-by::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
}
.dt-sold-by:hover{
  border-color: var(--brand-primary);
  box-shadow: 0 4px 14px rgba(237,123,40,.12);
}
.dt-sb-avatar{
  position: relative;
  width: 52px; height: 52px; border-radius: 14px;
  color: #fff; font-weight: 900; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--sb-color, var(--brand-primary));
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.dt-sb-avatar::after{
  content: "\F26A"; /* bootstrap-icons patch-check-fill */
  font-family: "bootstrap-icons";
  position: absolute; bottom: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--brand-primary);
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.dt-sb-info{ flex: 1; min-width: 0; }
.dt-sb-label{
  font-size: .68rem; color: var(--brand-primary-dark);
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: .3rem;
}
.dt-sb-label::before{
  content: "\F26A"; font-family: "bootstrap-icons";
  color: var(--brand-primary); font-size: .85rem;
}
.dt-sb-name{
  display: block; font-weight: 900; color: var(--ink); font-size: 1.1rem;
  text-decoration: none; line-height: 1.2; margin-top: .1rem;
}
.dt-sb-name:hover{ color: var(--brand-primary); }
.dt-sb-meta{
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-size: .82rem; color: var(--ink-2); margin-top: .25rem;
}
.dt-sb-meta .dt-sb-sep{ color: var(--ink-3); opacity: .4; }
.dt-sb-meta .dt-sb-rating{
  display: inline-flex; align-items: center; gap: .2rem;
  background: #fff; padding: .1rem .45rem; border-radius: var(--radius-pill);
  font-weight: 700;
}
.dt-sb-meta .dt-sb-rating i{ color: #F6B100; }
.dt-sb-meta .dt-sb-rating span{ color: var(--ink-3); font-weight: 600; }
.dt-sb-cta{
  background: #fff; color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  text-decoration: none;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: 800; font-size: .85rem;
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0;
  transition: all .2s ease;
}
.dt-sb-cta:hover{
  background: var(--brand-primary); color: #fff;
  transform: translateX(3px);
}
.dt-sb-cta i{ transition: transform .2s ease; }
.dt-sb-cta:hover i{ transform: translateX(2px); }
@media (max-width:575.98px){
  .dt-sold-by{ flex-wrap: wrap; gap: .75rem; }
  .dt-sb-cta{ width: 100%; justify-content: center; }
}

/* ---- dettaglio: Altre offerte ------------------------------ */
.detail-offers-section{ margin: 2rem 0 2.5rem; }
.detail-offers-section h2{
  font-weight: 900; font-size: 1.25rem; color: var(--ink);
  margin: 0 0 .25rem; letter-spacing: -.01em;
}
.detail-offers-section .dt-offers-count{
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--ink-3); font-weight: 700; font-size: .82rem;
  background: var(--bg); padding: .2rem .6rem; border-radius: var(--radius-pill);
  margin-left: .5rem; vertical-align: middle;
}
.dt-offers-best{
  display:inline-flex; align-items:center; gap:.35rem;
  color: var(--state-success); font-weight:800; font-size:.85rem;
}
.dt-offers-best::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--state-success); box-shadow:0 0 0 3px var(--state-success-bg);
}
.dt-offers-list{
  display:flex; flex-direction:column; gap:.55rem;
  background:#fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: .75rem;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
.dt-offer{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--bg); border: 1.5px solid transparent;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.dt-offer:hover{
  background:#fff; border-color: var(--brand-primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(237,123,40,.08);
}
.dt-offer.is-best{
  border-color: var(--state-success);
  background: linear-gradient(135deg, #fff 0%, var(--state-success-bg) 100%);
  padding-left: 1.15rem;
}
.dt-offer.is-best::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background: var(--state-success); border-radius: 0 3px 3px 0;
}
.dt-offer .of-seller{ display:flex; align-items:center; gap:.85rem; flex:1; min-width:0; }
.dt-offer .of-logo{
  width: 44px; height: 44px; border-radius: 12px; color:#fff;
  font-weight:900; font-size:.95rem;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow: 0 2px 6px rgba(17,24,39,.12);
  transition: transform .2s ease;
}
.dt-offer:hover .of-logo{ transform: scale(1.05) rotate(-2deg); }
.dt-offer .of-info{ min-width:0; }
.dt-offer .of-name{
  font-weight:800; color: var(--ink); text-decoration:none; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size: .98rem; letter-spacing: -.005em;
}
.dt-offer .of-name:hover{ color: var(--brand-primary); }
.dt-offer .of-meta{
  display:flex; gap:.5rem; flex-wrap:wrap; font-size:.78rem; color: var(--ink-3);
  margin-top: .15rem; align-items: center;
}
.dt-offer .of-meta i{ margin-right:.2rem; color: var(--ink-2); }
.dt-offer .of-meta .sep{ opacity:.35; }
.dt-offer .of-meta .of-rating{
  color: var(--brand-primary-dark); font-weight: 700;
}
.dt-offer .of-price-wrap{
  display:flex; align-items:center; gap:.85rem; flex-shrink:0;
}
.dt-offer .of-price-col{
  display:flex; flex-direction:column; align-items:flex-end; gap:.15rem;
}
.dt-offer .of-price{
  font-size:1.2rem; font-weight:900; color: var(--ink); white-space:nowrap;
  letter-spacing: -.02em;
}
.dt-offer.is-best .of-price{ color: var(--state-success); }
.dt-offer .of-best{
  display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:800;
  color:#fff; background: var(--state-success); padding:.22rem .55rem; border-radius: var(--radius-pill);
  border: 1px solid var(--state-success);
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 2px 4px rgba(22,163,74,.25);
}
.dt-offer .of-best i{ font-size: .75rem; }
.dt-offer .of-add{
  border-radius: var(--radius-pill); font-weight: 800; font-size: .88rem;
  padding: .5rem 1rem; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dt-offer .of-add:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(237,123,40,.25);
}
.dt-offer .of-add i{ margin-right:.25rem; }
@media (max-width:575.98px){
  .dt-offer{ flex-wrap:wrap; padding:.75rem; }
  .dt-offer .of-price-wrap{ width:100%; justify-content:space-between; }
  .dt-offer .of-logo{ width: 40px; height: 40px; border-radius: 10px; }
}

/* ---- home: Venditori in evidenza (scroll orizzontale) ------ */
.sellers-section{ padding: 40px 0 8px; }
.sellers-section h3{ font-weight:900; font-size:24px; color: var(--ink); }
.sellers-section p.sub{ font-size:14px; color: var(--ink-3); font-weight:500; margin:0; }

.sellers-scroll{
  display:flex; gap:14px; overflow-x:auto; align-items:stretch;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 20px; margin: -4px -2px 0;
}
.sellers-scroll::-webkit-scrollbar{ display:none; }

/* Card "featured seller" nel carousel orizzontale */
.sellers-scroll > .seller-card{
  flex: 0 0 280px; scroll-snap-align: start;
  display:flex; flex-direction:column; gap:.65rem;
  background:#fff; border:1.5px solid var(--line);
  border-radius: 1rem; padding:1rem;
  text-decoration:none; color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position:relative; min-height: 200px;
}
.sellers-scroll > .seller-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:56px;
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, #fff 100%);
  border-radius: 1rem 1rem 0 0; z-index:0;
}
.sellers-scroll > .seller-card:hover{
  border-color: var(--brand-primary); transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1); color: var(--ink);
}
.sellers-scroll > .seller-card > *{ position:relative; z-index:1; }

.sellers-scroll > .seller-card .sc-logo{
  width:56px; height:56px; border-radius:50%; color:#fff;
  font-weight:900; font-size:1.15rem;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); border: 3px solid #fff;
  margin-top:.25rem;
}
.sellers-scroll > .seller-card .sc-body{ flex:1; min-width:0; }
.sellers-scroll > .seller-card .sc-name{
  font-weight:900; font-size:1rem; line-height:1.25; color: var(--ink);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sellers-scroll > .seller-card .sc-rating{
  display:flex; align-items:center; gap:.3rem; font-size:.82rem; margin-top:.35rem; flex-wrap:wrap;
}
.sellers-scroll > .seller-card .sc-rating .stars{ display:inline-flex; gap:1px; }
.sellers-scroll > .seller-card .sc-rating .stars i{ color:#F6B100; font-size:.8rem; }
.sellers-scroll > .seller-card .sc-rating strong{ color: var(--ink); font-weight:800; }
.sellers-scroll > .seller-card .sc-rating .muted{ color: var(--ink-3); font-size:.78rem; }

.sellers-scroll > .seller-card .sc-meta{
  font-size:.82rem; color: var(--ink-2); margin-top:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sellers-scroll > .seller-card .sc-meta i{ color: var(--brand-primary); margin-right:.3rem; }
.sellers-scroll > .seller-card .sc-ship{ display:none; }
.sellers-scroll > .seller-card .sc-cta{
  margin-top:auto; padding-top:.5rem; border-top: 1px dashed var(--line);
  color: var(--brand-primary); font-weight:800; font-size:.82rem;
  display:inline-flex; align-items:center; justify-content:space-between; gap:.25rem;
}
.sellers-scroll > .seller-card:hover .sc-cta{ color: var(--brand-primary-dark); }

/* Disattivata freccia accanto a "Tutti i venditori" (gestita globalmente) */
.sellers-section .actions .products-scroll-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ---- home: Venditori vicino a te --------------------------- */
.sellers-nearby-section{
  padding: 2.5rem 0; margin-top: 1rem;
  background:
    radial-gradient(circle at 15% 0%, rgba(237,123,40,.06) 0%, transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(37,99,235,.05) 0%, transparent 55%),
    var(--bg);
  position:relative;
}
.sellers-nearby-section::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 50%, transparent 100%);
}
.nearby-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; margin-bottom:1.5rem; flex-wrap:wrap;
}
.nearby-head > div:first-child{ display:flex; align-items:center; gap:.85rem; flex:1; min-width:240px; }
.nearby-head > div:first-child::before{
  content:"\F3E7"; font-family:"bootstrap-icons";
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  background: var(--brand-primary-light); color: var(--brand-primary);
  font-size:1.5rem; font-weight:400;
}
.nearby-head h3 .bi-geo-alt-fill{ display:none; } /* icona sostituita dal box ::before */
.nearby-head h3{
  font-weight:900; font-size:22px; color: var(--ink); margin:0; line-height:1.2;
}
.nearby-head .sub{ color: var(--ink-3); font-size:13.5px; margin:.15rem 0 0; }

.nearby-cap-form{ flex-shrink:0; }
.nearby-cap-form .input-group{
  min-width: 320px;
  border-radius: var(--radius-pill); overflow:hidden;
  background:#fff; border: 1.5px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s;
}
.nearby-cap-form .input-group:focus-within{
  border-color: var(--brand-primary);
  box-shadow: 0 2px 12px rgba(237,123,40,.2);
}
.nearby-cap-form .input-group-text{
  border:none; background:transparent; padding-left:1rem; padding-right:.25rem;
}
.nearby-cap-form .input-group-text i{ color: var(--brand-primary); font-size:1.1rem; }
.nearby-cap-form .form-control{
  border:none; box-shadow:none !important; padding:.6rem .5rem;
  font-weight:700; font-size:.95rem; letter-spacing: .5px;
}
.nearby-cap-form .form-control::placeholder{ font-weight:500; color: var(--ink-3); letter-spacing:0; }
.nearby-cap-form .btn{
  border-radius:0; padding:.6rem 1.25rem; font-weight:800;
  border:none;
}

/* Card "nearby seller" ------------------------------------- */
.seller-card-nearby{
  height: 100%;
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo body cta"
    "logo ship cta";
  column-gap: .85rem; row-gap: .3rem;
  background:#fff; border:1.5px solid var(--line);
  border-radius: var(--radius-lg); padding:1rem 1.1rem;
  text-decoration:none; color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.seller-card-nearby::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
  opacity:0; transition: opacity .2s;
}
.seller-card-nearby:hover{
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  color: var(--ink);
}
.seller-card-nearby:hover::before{ opacity:1; }

.seller-card-nearby .sc-logo{
  grid-area: logo;
  width:56px; height:56px; border-radius:50%; color:#fff;
  font-weight:900; font-size:1.05rem;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  border: 2px solid #fff;
  align-self:center;
}
.seller-card-nearby .sc-body{
  grid-area: body;
  min-width:0; display:flex; flex-direction:column; gap:.15rem;
}
.seller-card-nearby .sc-name{
  font-weight:900; font-size:.98rem; color: var(--ink); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.seller-card-nearby .sc-rating{
  display:flex; align-items:center; gap:.3rem; font-size:.78rem; flex-wrap:wrap;
}
.seller-card-nearby .sc-rating .stars{ display:inline-flex; gap:1px; }
.seller-card-nearby .sc-rating .stars i{ color:#F6B100; font-size:.72rem; }
.seller-card-nearby .sc-rating strong{ color: var(--ink); font-weight:800; }
.seller-card-nearby .sc-rating .muted{ color: var(--ink-3); }
.seller-card-nearby .sc-meta{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.78rem; color: var(--brand-primary-dark); font-weight:700;
  background: var(--brand-primary-light); padding:.15rem .5rem;
  border-radius: var(--radius-pill);
  width:fit-content; margin-top:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.seller-card-nearby .sc-meta i{ color: var(--brand-primary); font-size:.75rem; }

.seller-card-nearby .sc-ship{
  grid-area: ship;
  font-size:.74rem; color: var(--ink-3);
  display:inline-flex; align-items:center; gap:.35rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.seller-card-nearby .sc-ship i{ color: var(--state-success); font-size:.8rem; }

.seller-card-nearby .sc-cta{
  grid-area: cta;
  align-self:center;
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  width:38px; height:38px; border-radius:50%;
  background: var(--brand-primary-light); color: var(--brand-primary);
  font-weight:800; font-size:0; /* nasconde il testo, tiene l'icona */
  flex-shrink:0;
  transition: background .2s, color .2s, transform .2s;
}
.seller-card-nearby .sc-cta i{ font-size:1.05rem; margin:0; }
.seller-card-nearby:hover .sc-cta{
  background: var(--brand-primary); color:#fff; transform: translateX(3px);
}

@media (max-width: 767.98px){
  .nearby-head{ margin-bottom:1rem; }
  .nearby-head > div:first-child::before{ width:40px; height:40px; font-size:1.2rem; border-radius:10px; }
  .nearby-cap-form{ width:100%; }
  .nearby-cap-form .input-group{ min-width: 100%; }
  .seller-card-nearby{ padding:.85rem; column-gap:.7rem; }
  .seller-card-nearby .sc-logo{ width:48px; height:48px; font-size:.95rem; }
}
@media (max-width: 575.98px){
  .sellers-scroll > .seller-card{ flex-basis: 78vw; }
}

/* ---- banner "Vendi su Ricamby" (home) ---------------------- */
.vendi-banner-section{ padding: 2rem 0; }
.vendi-banner{
  background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
  color:#fff; border-radius: var(--radius-xl); padding: 2rem;
  display:flex; align-items:center; gap:2rem; box-shadow: var(--shadow-lg);
  position:relative; overflow:hidden;
}
.vendi-banner::before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:380px; height:380px;
  background: radial-gradient(circle, rgba(237,123,40,.35) 0%, rgba(237,123,40,0) 70%);
  pointer-events:none;
}
.vendi-banner .vb-text{ flex:1; min-width:0; position:relative; z-index:1; }
.vendi-banner .vb-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background: rgba(237,123,40,.18); color: #FDBA74;
  padding:.25rem .75rem; border-radius: var(--radius-pill);
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:.75rem;
}
.vendi-banner h3{ font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight:900; margin:0 0 .5rem; }
.vendi-banner h3 span{ color: #FDBA74; }
.vendi-banner p{ color:#CBD5E1; margin:0 0 1rem; max-width:560px; }
.vendi-banner .vb-meta{ display:flex; flex-wrap:wrap; gap:1rem; color:#94A3B8; font-size:.85rem; margin-bottom:1.25rem; }
.vendi-banner .vb-meta i{ color: var(--state-success); margin-right:.25rem; }
.vendi-banner .vb-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }
.vendi-banner .vb-cta .btn-outline-secondary{ color:#fff; border-color: rgba(255,255,255,.3); }
.vendi-banner .vb-cta .btn-outline-secondary:hover{ background: rgba(255,255,255,.1); border-color:#fff; }
.vendi-banner .vb-visual{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:.75rem;
  position:relative; z-index:1; flex-shrink:0;
}
.vendi-banner .vb-stat{
  background: rgba(255,255,255,.08); border-radius: var(--radius); padding:1rem;
  text-align:center; min-width:110px; border: 1px solid rgba(255,255,255,.12);
}
.vendi-banner .vb-n{ display:block; font-size:1.5rem; font-weight:900; color: #FDBA74; }
.vendi-banner .vb-l{ display:block; font-size:.7rem; color:#94A3B8; text-transform:uppercase; letter-spacing:.3px; }
@media (max-width:991.98px){
  .vendi-banner{ flex-direction: column; align-items:flex-start; padding:1.5rem; }
  .vendi-banner .vb-visual{ width:100%; }
}

/* ---- footer marketplace trust strip ------------------------ */
.mp-footer-strip{
  background:#111827; color:#fff; border-bottom: 1px solid rgba(255,255,255,.06);
  padding:1rem 0;
}
.mp-footer-strip .container{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; align-items:center;
}
.mp-footer-strip .seal{
  display:flex; align-items:center; gap:.65rem;
  padding:.25rem .5rem; border-right: 1px solid rgba(255,255,255,.08);
}
.mp-footer-strip .seal:last-child{ border-right: none; }
.mp-footer-strip .seal i{
  font-size:1.5rem; color: var(--brand-primary); flex-shrink:0;
  width:40px; height:40px; border-radius:50%;
  background: rgba(237,123,40,.15); display:inline-flex; align-items:center; justify-content:center;
}
.mp-footer-strip .seal strong{ display:block; font-size:.85rem; color:#fff; }
.mp-footer-strip .seal span{ display:block; font-size:.72rem; color: #94A3B8; }
@media (max-width:767.98px){
  .mp-footer-strip .container{ grid-template-columns: repeat(2, 1fr); }
  .mp-footer-strip .seal:nth-child(2n){ border-right:none; }
}
@media (max-width:480px){
  .mp-footer-strip .container{ grid-template-columns: 1fr; }
  .mp-footer-strip .seal{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:.75rem; }
  .mp-footer-strip .seal:last-child{ border-bottom:none; }
}

/* ---- checkout: seller hint + groups ------------------------ */
.cs-seller-hint{
  display:flex; gap:.6rem; align-items:flex-start;
  background: var(--state-info-bg); color: var(--state-info);
  padding:.65rem .75rem; border-radius: var(--radius);
  font-size:.82rem; margin-bottom:.75rem;
}
.cs-seller-hint i{ flex-shrink:0; margin-top:.15rem; }
.cs-group{
  background: var(--bg); border:1px solid var(--line); border-radius: var(--radius);
  margin-bottom:.75rem; overflow:hidden;
}
.cs-group .csg-head{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .65rem; background:#fff; border-bottom:1px solid var(--line);
  font-size:.85rem;
}
.cs-group .csg-head .csg-name{ font-weight:800; color: var(--ink); flex:1; }
.cs-group .csg-head .csg-sub{ color: var(--ink-3); font-weight:700; font-size:.78rem; }
.cs-group .csg-foot{
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .65rem; background: var(--line-2); font-size:.75rem; color: var(--ink-3);
}
.csg-logo{
  width:24px; height:24px; border-radius:50%; color:#fff; font-weight:900; font-size:.7rem;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ---- cart offcanvas: seller groups ------------------------- */
.cart-seller-group{ border:1px solid var(--line); border-radius: var(--radius); margin-bottom:.6rem; overflow:hidden; }
.cart-seller-group .csg-head{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .65rem; background: var(--bg); border-bottom: 1px solid var(--line);
  font-size:.85rem;
}
.cart-seller-group .csg-name{ flex:1; font-weight:800; color: var(--ink); }
.cart-seller-group .csg-link{ font-size:.75rem; color: var(--brand-primary); text-decoration:none; font-weight:700; }

/* ---- checkout footer seals --------------------------------- */
.co-footer{ background:#fff; border-top:1px solid var(--line); padding:1rem 0; margin-top:2rem; }
.co-footer .co-seals{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  padding-bottom:.75rem; margin-bottom:.75rem; border-bottom: 1px solid var(--line);
}
.co-footer .co-seal{
  display:inline-flex; align-items:center; gap:.4rem; color: var(--ink-2); font-weight:700; font-size:.82rem;
}
.co-footer .co-seal i{ color: var(--brand-primary); font-size:1rem; }
.co-footer .co-foot-legal{ text-align:center; font-size:.85rem; color: var(--ink-3); }

/* ---- catalogo: filtro venditori ---------------------------- */
.seller-filter-list .seller-filter-item{ display:flex; align-items:center; gap:.5rem; padding: .3rem 0; }
.seller-filter-list .sfi-logo{
  width:24px; height:24px; border-radius:50%; color:#fff; font-weight:900; font-size:.65rem;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.seller-filter-list .sfi-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seller-filter-list .sfi-rating{
  display:inline-flex; align-items:center; gap:.15rem;
  background: var(--line-2); color: var(--ink); padding:.1rem .4rem; border-radius: var(--radius-pill);
  font-size:.72rem; font-weight:800;
}
.seller-filter-list .sfi-rating i{ color: #F6B100; font-size:.7rem; }
.cs-all-sellers{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-top:.35rem; font-size:.8rem; color: var(--brand-primary); text-decoration:none; font-weight:800;
}
.zone-filter .form-label{ font-weight:700; color: var(--ink-2); }

/* ============================================================
   STOREFRONT venditore.html — polished to match .dt-* language
   ============================================================ */

/* ---- HERO CARD -------------------------------------------- */
.storefront-hero{ margin-bottom: 1.5rem; }
.sf-hero-card{
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(237,123,40,.10) 0%, transparent 55%),
    linear-gradient(135deg, var(--brand-primary-light) 0%, #fff 62%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: stretch;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sf-hero-card::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
}
.sf-hero-left{
  flex: 1 1 380px; min-width: 0;
  display: flex; gap: 1.15rem; align-items: flex-start;
}
.sf-logo{
  width: 84px; height: 84px; border-radius: var(--radius-lg);
  color: #fff; font-weight: 900; font-size: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  box-shadow: 0 8px 22px rgba(237,123,40,.28);
  letter-spacing: -.02em;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sf-hero-card:hover .sf-logo{
  transform: scale(1.04) rotate(-2deg);
  box-shadow: 0 12px 30px rgba(237,123,40,.38);
}
.sf-meta{ flex: 1; min-width: 0; }
.sf-verified{
  display: inline-flex; align-items: center; gap: .3rem;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  padding: .2rem .65rem;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .45rem;
}
.sf-verified i{ color: #059669; }
.sf-name{
  font-weight: 900;
  margin: 0 0 .35rem;
  font-size: 1.7rem;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.sf-sub{
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  font-size: .88rem; color: var(--ink-2);
  align-items: center;
  margin: .4rem 0 .1rem;
}
.sf-sub i{ color: var(--brand-orange); }
.sf-sub .sep{ color: var(--ink-3); opacity: .45; }
.sf-sub .sf-rating{
  display: inline-flex; align-items: center; gap: .25rem;
  background: #FFF7ED;
  color: var(--brand-orange-dark);
  padding: .15rem .5rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  border: 1px solid #FED7AA;
}
.sf-sub .sf-rating i{ color: #F6B100; font-size: .85rem; }
.sf-specialty{
  color: var(--ink-2);
  font-size: .9rem;
  margin: .55rem 0 0;
  line-height: 1.45;
}
/* destra: KPI + CTA */
.sf-hero-right{
  flex: 0 0 auto;
  min-width: 240px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.sf-kpi{
  display: flex; gap: .5rem;
  padding: .85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.sf-kpi-item{
  flex: 1; text-align: center;
  padding: .25rem .35rem;
  border-radius: var(--radius-sm);
  transition: background .2s ease;
}
.sf-kpi-item + .sf-kpi-item{ border-left: 1px solid var(--line-2); }
.sf-kpi-item:hover{ background: var(--brand-primary-light); }
.sf-kpi-item .k-num{
  font-size: 1.15rem; font-weight: 900;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.sf-kpi-item .k-lab{
  display: block;
  font-size: .68rem;
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .15rem;
}
.sf-hero-right .btn{
  font-weight: 800;
  padding: .65rem 1rem;
  box-shadow: 0 6px 16px rgba(237,123,40,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sf-hero-right .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(237,123,40,.32);
}

/* ---- TABS ------------------------------------------------- */
.sf-tabs{
  border-bottom: 2px solid var(--line);
  margin-bottom: 1rem;
  flex-wrap: nowrap; overflow-x: auto;
  scrollbar-width: none;
}
.sf-tabs::-webkit-scrollbar{ display: none; }
.sf-tabs .nav-item{ flex-shrink: 0; }
.sf-tabs .nav-link{
  color: var(--ink-2);
  font-weight: 700;
  border: none;
  padding: .75rem 1.1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  transition: color .2s ease, background .2s ease;
}
.sf-tabs .nav-link:hover{
  color: var(--brand-orange-dark);
  background: #FFF8F0;
}
.sf-tabs .nav-link.active{
  color: var(--brand-orange-dark);
  background: linear-gradient(180deg, #FFF7ED 0%, #fff 100%);
  border-bottom: 3px solid var(--brand-orange);
}
.sf-tab-content{ padding-bottom: 2rem; }

/* ---- PRODOTTI -------------------------------------------- */
#sfProductGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* ---- INFO VENDITORE ------------------------------------- */
.sf-info-card{
  background:
    linear-gradient(180deg, #FFFBF7 0%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 1rem;
}
.sf-info-card h5{
  font-weight: 800;
  color: var(--ink);
  font-size: .95rem;
  margin: 0 0 .35rem;
  display: flex; align-items: center; gap: .4rem;
}
.sf-info-card h5 i{ color: var(--brand-orange); }
.sf-info-card p{
  color: var(--ink-2);
  font-size: .9rem;
  margin: 0;
  line-height: 1.5;
}

/* ---- POLICY CARDS --------------------------------------- */
.sf-policy-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  height: 100%;
  display: flex; flex-direction: column; gap: .35rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.sf-policy-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand-orange);
}
.sf-policy-card .p-icon{
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-primary-light), #fff);
  color: var(--brand-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: .45rem;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.sf-policy-card:hover .p-icon{
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark));
  color: #fff;
}
.sf-policy-card h5{
  font-weight: 800; color: var(--ink);
  margin: 0 0 .25rem; font-size: 1rem;
}
.sf-policy-card p{
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- RATING BOX + RECENSIONI ---------------------------- */
.sf-rating-box{
  background:
    radial-gradient(circle at 50% 0%, rgba(246,177,0,.12) 0%, transparent 60%),
    linear-gradient(180deg, #FFFBF0 0%, #fff 100%);
  border: 1px solid #FDE68A;
  border-radius: var(--radius-xl);
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 1rem;
}
.sf-rating-box .rb-score{
  font-size: 3.25rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #F6B100, #D97706);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}
.sf-rating-box .rb-stars{
  color: #F6B100; font-size: 1.15rem;
  letter-spacing: 2px;
  margin: .45rem 0 .3rem;
  filter: drop-shadow(0 2px 4px rgba(246,177,0,.35));
}
.sf-rating-box .rb-count{
  color: var(--ink-3);
  font-size: .85rem;
  font-weight: 600;
}
.sf-reviews{
  display: flex; flex-direction: column; gap: .75rem;
}
.sf-reviews .review-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sf-reviews .review-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: #FED7AA;
}
.sf-reviews .r-head{
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.sf-reviews .r-head strong{
  color: var(--ink);
  font-weight: 800;
  font-size: .95rem;
}
.sf-reviews .r-head .text-warning{
  font-size: .85rem;
  letter-spacing: 1px;
  filter: drop-shadow(0 1px 2px rgba(246,177,0,.3));
}
.sf-reviews .review-item p{
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- RESPONSIVE ----------------------------------------- */
@media (max-width: 767.98px){
  .sf-hero-card{ padding: 1.15rem; gap: 1rem; }
  .sf-hero-left{ flex-direction: column; align-items: flex-start; gap: .85rem; }
  .sf-logo{ width: 64px; height: 64px; font-size: 1.35rem; }
  .sf-name{ font-size: 1.35rem; }
  .sf-hero-right{ width: 100%; min-width: 0; }
  .sf-rating-box{ padding: 1.15rem .85rem; }
  .sf-info-card{ position: static; }
  .sf-rating-box{ position: static; }
}

/* ---- vendi.html (landing merchant) ------------------------- */
.vendi-hero{
  background: linear-gradient(135deg, #111827 0%, #1F2937 50%, #2D3748 100%);
  color:#fff; padding: 3rem 0; position:relative; overflow:hidden;
}
.vendi-hero::before{
  content:""; position:absolute; inset:-30% -15% auto auto; width:480px; height:480px;
  background: radial-gradient(circle, rgba(237,123,40,.3) 0%, rgba(237,123,40,0) 70%);
  pointer-events:none;
}
.vendi-hero .vh-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background: rgba(237,123,40,.2); color: #FDBA74;
  padding:.3rem .85rem; border-radius: var(--radius-pill);
  font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:1rem;
}
.vendi-hero h1{ font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight:900; line-height:1.1; margin: 0 0 1rem; }
.vendi-hero h1 span{ color: #FDBA74; }
.vendi-hero .lead{ color: #CBD5E1; max-width:640px; font-size:1.1rem; margin-bottom:1.5rem; }
.vendi-hero .lead strong{ color:#fff; }
.vendi-hero .vh-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem; }
.vendi-hero .vh-cta .btn{ font-size:1rem; padding:.75rem 1.5rem; font-weight:800; }
.vendi-hero .vh-cta .btn-outline-light{ color:#fff; border-color: rgba(255,255,255,.35); }
.vendi-hero .vh-cta .btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.vendi-hero .vh-trust{
  display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.9rem; color:#94A3B8;
}
.vendi-hero .vh-trust span{ display:inline-flex; align-items:center; gap:.4rem; }
.vendi-hero .vh-trust i{ color: var(--state-success); }
.vendi-card{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg); padding:1.25rem; backdrop-filter: blur(8px);
  position:relative; z-index:1;
}
.vendi-card h4{ color:#fff; font-weight:900; margin-bottom:.5rem; }
.vendi-card ol{ color:#CBD5E1; padding-left:1.25rem; margin:0; }
.vendi-card ol li{ margin-bottom:.4rem; }

.vendi-benefits-section{ padding:3rem 0; background: var(--bg); }
.vendi-benefits-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem;
}
.vendi-benefit{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding:1.5rem; display:flex; flex-direction:column; gap:.5rem;
}
.vendi-benefit .vb-icon{
  width:44px; height:44px; border-radius:12px; color: var(--brand-primary);
  background: var(--brand-primary-light);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.vendi-benefit h5{ font-weight:800; color: var(--ink); margin:.25rem 0 .15rem; }
.vendi-benefit p{ color: var(--ink-2); font-size:.9rem; line-height:1.5; margin:0; }

.vendi-plans-section{ padding:3rem 0; }
.vendi-plans-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem;
}
.plan-card{
  background:#fff; border:2px solid var(--line); border-radius: var(--radius-lg);
  padding:1.5rem; display:flex; flex-direction:column; position:relative;
}
.plan-card.plan-featured{ border-color: var(--brand-primary); box-shadow: var(--shadow); }
.plan-card .plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--brand-primary); color:#fff; font-weight:800; font-size:.72rem;
  padding:.2rem .75rem; border-radius: var(--radius-pill); text-transform:uppercase; letter-spacing:.5px;
}
.plan-card h3{ font-weight:900; color: var(--ink); margin:0 0 .25rem; }
.plan-card .plan-price{ font-size:2rem; font-weight:900; color: var(--brand-primary); margin:.5rem 0 .25rem; }
.plan-card .plan-price small{ font-size:.9rem; color: var(--ink-3); font-weight:700; }
.plan-card .plan-desc{ color: var(--ink-2); font-size:.9rem; margin-bottom:1rem; }
.plan-card ul.plan-features{ list-style:none; padding:0; margin:0 0 1rem; flex:1; }
.plan-card ul.plan-features li{
  padding:.35rem 0; color: var(--ink-2); font-size:.88rem;
  display:flex; align-items:flex-start; gap:.5rem;
}
.plan-card ul.plan-features li i{ color: var(--state-success); flex-shrink:0; margin-top:.2rem; }
.plan-card .btn{ margin-top:auto; }

.vendi-signup-section{ padding:3rem 0; background: var(--bg); }
.vendi-signup-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-xl);
  padding:2rem; max-width:720px; margin:0 auto; box-shadow: var(--shadow-sm);
}
.vendi-success{
  text-align:center; padding:2rem;
  background: var(--state-success-bg); border-radius: var(--radius-lg);
}
.vendi-success .vs-icon{
  width:64px; height:64px; border-radius:50%; color: var(--state-success);
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:2rem; margin-bottom:.75rem;
}
.vendi-success h4{ font-weight:900; color: var(--state-success); margin-bottom:.5rem; }
.vendi-success p{ color: var(--ink-2); margin:0; }

.vendi-faq{ padding:3rem 0; }
.vendi-faq .vf-item{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  margin-bottom:.5rem; overflow:hidden;
}
.vendi-faq .vf-q{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:1rem 1.25rem; font-weight:800; color: var(--ink);
}
.vendi-faq .vf-q::after{
  content:"\F282"; font-family:"bootstrap-icons"; margin-left:auto; transition: transform .2s;
  color: var(--brand-primary);
}
.vendi-faq .vf-item.open .vf-q::after{ transform: rotate(180deg); }
.vendi-faq .vf-a{
  padding: 0 1.25rem 0; max-height:0; overflow:hidden; color: var(--ink-2); font-size:.92rem;
  transition: max-height .25s ease-out, padding .2s ease-out;
}
.vendi-faq .vf-item.open .vf-a{ padding: 0 1.25rem 1rem; max-height: 500px; }

/* ============================================================
   WHITE-LABEL SUBDOMAIN — vendi.html
   ============================================================ */
.wl-hl{
  display:inline-block;
  background: rgba(255,255,255,.18);
  color:#fff;
  padding: .15em .5em;
  border-radius: var(--radius-sm);
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px dashed rgba(255,255,255,.45);
}
.wl-section{
  padding: 4rem 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(237,123,40,.08) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(37,99,235,.06) 0%, transparent 55%),
    #fff;
  position: relative;
}
.wl-section .badge.bg-brand-light{
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary-dark) !important;
  font-weight: 700;
}
.wl-section h2 .text-primary{
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.wl-checks li{ font-size: 1rem; color: var(--ink-2); margin-bottom: .5rem; }
.wl-checks code{
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
  padding: .1em .4em;
  border-radius: var(--radius-sm);
  font-size: .9em;
  font-weight: 700;
}

/* ---- finta finestra browser ---- */
.wl-browser{
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transform: rotate(-.6deg);
  transition: transform .3s ease;
}
.wl-browser:hover{ transform: rotate(0deg) translateY(-4px); }
.wl-bar{
  display:flex; align-items:center; gap:.4rem;
  background: var(--line-2);
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--line);
}
.wl-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.wl-dot-r{ background:#FF5F56; }
.wl-dot-y{ background:#FFBD2E; }
.wl-dot-g{ background:#27C93F; }
.wl-url{
  flex: 1;
  margin-left: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .3rem .85rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--ink-2);
  display:flex; align-items:center; gap:.3rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wl-url .bi-lock-fill{ color: var(--state-success); }
.wl-url .wl-sub{ color: var(--brand-primary); font-weight: 700; }
.wl-url .wl-dom{ color: var(--ink-3); }
.wl-view{ padding: 1.25rem; background: linear-gradient(180deg, #fff 0%, #fafbfc 100%); }
.wl-view-head{
  display:flex; align-items:center; gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-2);
}
.wl-view-head .wl-logo{
  width: 56px; height: 56px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1.25rem; letter-spacing: -.02em;
  flex-shrink: 0;
}
.wl-view-head .wl-name{ font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.wl-view-head .wl-meta{ font-size: .82rem; color: var(--ink-3); }
.wl-tiles{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
  margin-top: 1rem;
}
.wl-tile{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem;
  background: #fff;
}
.wl-tile .wl-thumb{
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, #fff 100%);
  border-radius: var(--radius-sm);
  margin-bottom: .35rem;
}
.wl-tile .wl-tiny{
  font-size: .7rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 575.98px){
  .wl-browser{ transform: none; }
  .wl-tiles{ grid-template-columns: repeat(2, 1fr); }
  .wl-section h2{ font-size: 1.6rem; }
  .wl-section h2 .text-primary{ white-space: normal; }
}

/* ---- benefit evidenziato ---- */
.vendi-benefit-featured{
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, #fff 100%) !important;
  border: 1.5px solid var(--brand-primary) !important;
  position: relative;
}
.vendi-benefit-featured::before{
  content: "★ Top";
  position: absolute;
  top: -10px; right: 14px;
  background: var(--brand-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: .15rem .55rem;
  border-radius: var(--radius-pill);
  letter-spacing: .03em;
}
.vendi-benefit-featured code{
  background: #fff;
  color: var(--brand-primary-dark);
  padding: .1em .4em;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* ---- slug input nel form signup ---- */
.wl-slug-group .form-control{
  border-right: 0;
  text-align: right;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--brand-primary-dark);
}
.wl-slug-group .input-group-text{
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
  border-color: var(--line);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
}

/* ---- URL sottodominio su storefront hero ---- */
.sf-url{
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .85rem;
  font-weight: 700;
  margin: .25rem 0 .5rem;
  border: 1px dashed var(--brand-primary);
}
.sf-url .sf-url-sub{ color: var(--brand-primary); }
.sf-url .sf-url-dom{ color: var(--ink-3); font-weight: 600; }
.sf-url::after{
  content: "white-label";
  background: var(--brand-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: .1rem .45rem;
  border-radius: var(--radius-pill);
  margin-left: .35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============================================================
   MAGNIFIC-POPUP · modali Ricamby
   ------------------------------------------------------------
   Gli overlay della libreria sono sovrascritti per combaciare
   con lo stile brand del sito (overlay tenue, card arrotondata,
   animazione fade). I wrapper `.mp-modal` sostituiscono l'ex
   `.modal-dialog + .modal-content` di Bootstrap, così il markup
   dei file in /mod/*.html resta pulito e indipendente da BS.
   ============================================================ */

/* Overlay di sfondo */
.mfp-bg{
  background: #0f172a;
  opacity: 0;
  transition: opacity .25s ease;
}
.mfp-bg.mfp-ready{ opacity: .55; }
.mfp-bg.mfp-removing{ opacity: 0; }

/* Wrapper di centratura */
.mfp-container{ padding: 24px 16px; }
.mfp-content{
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .2s ease, transform .25s ease;
}
.mfp-ready .mfp-content{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mfp-removing .mfp-content{
  opacity: 0;
  transform: translateY(-8px) scale(.98);
}
.mfp-fade.mfp-removing.mfp-bg{ opacity: 0; }
.mfp-ajax-holder .mfp-content{ background: transparent; }

/* Preloader sobrio quando il contenuto è in caricamento */
.mfp-preloader{
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: .8rem;
}

/* Card modale custom (replaces .modal-dialog / .modal-content) */
.mp-modal{
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
  font-family: var(--font-family-base);
}
.mp-modal-lg { max-width: 800px; }
.mp-modal-xl { max-width: 1140px; }

/* Varianti scroll body (per modali lunghe tipo prodotto) */
.mp-modal-scroll{ max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.mp-modal-scroll .mp-body{ overflow-y: auto; flex: 1 1 auto; }

/* Header */
.mp-header{
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mp-header.gradient{
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: #fff;
  border-bottom: none;
  padding: 1.4rem 1.5rem;
}
.mp-header .mp-title,
.mp-header .opacity-75{ color: inherit; }
.mp-title{
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.mp-header-icon{
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22);
  border-radius: var(--radius);
  color: #fff;
  flex-shrink: 0;
}
.mp-header:not(.gradient) .mp-header-icon{
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
}

/* Body / Footer */
.mp-body{
  padding: 1.25rem 1.5rem;
}
.mp-body.p-0{ padding: 0; }
.mp-footer{
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--line-2);
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
}

/* Tabs Bootstrap dentro la modale veicolo: aggiustamenti spaziatura */
.mp-modal .nav-tabs{
  border-bottom: 1px solid var(--line);
  padding-left: 1rem;
  padding-right: 1rem;
}
.mp-modal .nav-tabs .nav-link{
  color: var(--ink-2);
  font-weight: 700;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .8rem 1rem;
  background: transparent;
}
.mp-modal .nav-tabs .nav-link:hover{
  color: var(--brand-primary-dark);
  background: var(--brand-primary-light);
  border-bottom-color: transparent;
}
.mp-modal .nav-tabs .nav-link.active{
  color: var(--brand-primary-dark);
  border-bottom-color: var(--brand-primary);
  background: transparent;
}

/* Close button (X) */
.mfp-close,
.mp-modal .mfp-close{
  position: absolute;
  top: .5rem; right: .5rem;
  width: 2.25rem; height: 2.25rem;
  line-height: 2.25rem;
  padding: 0;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--ink-2);
  background: rgba(255,255,255,.0);
  border: none;
  border-radius: var(--radius-pill);
  transition: background .15s, color .15s, transform .15s;
  opacity: 1;
  text-align: center;
  cursor: pointer;
  z-index: 5;
}
.mfp-close:hover,
.mfp-close:focus-visible{
  background: rgba(0,0,0,.08);
  color: var(--ink);
  transform: scale(1.05);
}
/* Su header con gradiente il close deve restare leggibile */
.mp-header.gradient ~ * .mfp-close,
.mp-modal:has(.mp-header.gradient) .mfp-close{
  color: #fff;
}
.mp-modal:has(.mp-header.gradient) .mfp-close:hover,
.mp-modal:has(.mp-header.gradient) .mfp-close:focus-visible{
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Variante specifica modale prodotto:
   il body ha p-0 e contiene una col-lg-6 galleria + col-lg-6 info.
   La X deve staccarsi dall'angolo dove c'è il pm-gallery scuro.   */
.mfp-product .mfp-close,
.mp-modal#productModal .mfp-close{
  background: rgba(255,255,255,.9);
  color: var(--ink);
}
.mfp-product .mfp-close:hover,
.mp-modal#productModal .mfp-close:hover{
  background: #fff;
}

/* Responsive */
@media (max-width: 575.98px){
  .mfp-container{ padding: 12px 8px; }
  .mp-modal{ border-radius: var(--radius); }
  .mp-header,
  .mp-body,
  .mp-footer{ padding-left: 1rem; padding-right: 1rem; }
  .mp-header.gradient{ padding: 1.1rem 1rem; }
  .mp-header-icon{ width: 40px; height: 40px; }
  .mp-title{ font-size: 1.05rem; }
}

/* ============================================================
   SELECT2 · z-index dentro modale Magnific-Popup
   ············································································
   I dropdown di Select2 vengono appesi a <body>; i layer di
   Magnific-Popup (.mfp-bg 1042, .mfp-wrap 1043) possono finirci
   sopra se Select2 eredita lo z-index di default basso o se la
   modale crea un nuovo stacking-context. Forziamo i dropdown
   Select2 sopra tutto.
   ============================================================ */
.select2-container--open,
.select2-container--open .select2-dropdown,
.select2-container.select2-container--open,
.select2-dropdown,
.select2-dropdown--above,
.select2-dropdown--below{
  z-index: 1100000 !important;
}
/* Contenitore ricerca interno + listbox */
.select2-container--open .select2-search--dropdown,
.select2-container--open .select2-results{
  z-index: 1100001 !important;
}
/* Quando aperto dentro una .mp-modal: assicuriamoci che anche
   i dropdown di Bootstrap (form-select, combo YMM, CAP) stiano
   sopra all'overlay (.mfp-bg = 1042, .mfp-wrap = 1043). */
.mfp-wrap .dropdown-menu.show,
.mp-modal .dropdown-menu.show{
  z-index: 1100000 !important;
}

/* ============================================================
   WHITE-LABEL · logo venditore + hooks di tema
   ------------------------------------------------------------
   Quando siamo su un sottodominio merchant (body.is-merchant-host),
   il markup del logo Ricamby viene sostituito con un "tile" che
   mostra le iniziali del venditore sul colore del brand.
   Vedi inc/header.php e inc/head.php.
   ============================================================ */
.logo-wrap.merchant-logo{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  transition: background .15s ease;
}
.logo-wrap.merchant-logo:hover{
  background: rgba(17,24,39,.04);
}
.merchant-logo-tile{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .5px;
  font-family: Nunito, sans-serif;
  box-shadow: 0 2px 6px rgba(17,24,39,.12);
  flex-shrink: 0;
}
.merchant-logo-text{
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.merchant-logo-name{
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.merchant-logo-sub{
  font-size: .72rem;
  font-weight: 600;
  color: #6B7280;
  letter-spacing: .2px;
}
.merchant-logo-sub span{
  color: var(--merchant-color, #ED7B28);
}

/* Badge "powered by" discreto, riusabile nel footer del venditore */
.merchant-powered{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: #6B7280;
}
.merchant-powered strong{
  color: #111827;
  font-weight: 800;
}

/* Quando il body è marchiato merchant, i link/hero ereditano il
   colore del venditore tramite --merchant-color iniettato in head. */
body.is-merchant-host a.text-brand,
body.is-merchant-host .text-brand{
  color: var(--merchant-color) !important;
}
body.is-merchant-host .btn-brand,
body.is-merchant-host .btn-primary{
  background-color: var(--merchant-color);
  border-color: var(--merchant-color);
}
body.is-merchant-host .btn-brand:hover,
body.is-merchant-host .btn-primary:hover{
  filter: brightness(.92);
}

/* Mobile: compatta il sottotitolo "su ricamby.com" */
@media (max-width: 575.98px){
  .merchant-logo-name{ max-width: 140px; font-size: .95rem; }
  .merchant-logo-sub{ font-size: .68rem; }
  .merchant-logo-tile{ width: 38px; height: 38px; font-size: .95rem; }
}