/** Shopify CDN: Minification failed

Line 5458:6 Unexpected ".8"

**/
/* ============================================================
   TECHSERVICE — V0 HOMEPAGE
   Stile: light mode + e-commerce italiano professionale
   ============================================================ */

/* RESET + BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul { list-style: none; }
input, select, textarea { font: inherit; }

/* DESIGN TOKENS */
:root {
  /* Background */
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;
  --bg-card: #FAFAFA;
  --bg-dark: #1F1F1F;     /* nero ancora più morbido (era #171717 zinc-900 → ora più rilassato) */
  --bg-darker: #141414;   /* per accenti dove serve davvero il nero pieno */

  /* Border */
  --border: #E5E5E5;
  --border-hover: #D4D4D4;
  --border-strong: #A3A3A3;

  /* Text */
  --text-primary: #0A0A0A;
  --text-secondary: #404040;
  --text-tertiary: #737373;
  --text-muted: #A3A3A3;
  --text-inverse: #FAFAFA;

  /* Brand */
  --brand: #EA580C;           /* arancio brunito CTA primario */
  --brand-bright: #F97316;    /* hover */
  --brand-dim: #C2410C;
  --brand-soft: #FFF7ED;      /* badge bg morbido */

  /* Functional */
  --danger: #DC2626;          /* badge sconto, prezzi promo */
  --danger-soft: #FEF2F2;
  --logo-red: #DC2626;
  --logo-blue: #2563EB;
  --success: #16A34A;
  --success-soft: #F0FDF4;
  --whatsapp: #25D366;

  /* Layout */
  --container: 1280px;
  --container-narrow: 1100px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 4px 14px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);

  /* Transition */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t: 250ms var(--ease);
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* TYPOGRAPHY */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 50%;
}
.eyebrow.no-dot::before { display: none; }

h1, h2, h3, h4, h5 { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; }
h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.5vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }
em.serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--brand); }

.lead { font-size: 17px; color: var(--text-secondary); line-height: 1.6; max-width: 56ch; }
.small { font-size: 13px; color: var(--text-tertiary); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  transition: all var(--t);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--brand-bright); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:active { background: var(--brand-dim); transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-card); border-color: var(--text-primary); }

.btn-dark {
  background: var(--text-primary);
  color: #FFFFFF;
}
.btn-dark:hover { background: #1F1F1F; transform: translateY(-1px); }

.btn-sm { height: 38px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

.link-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px;
  color: var(--brand);
  transition: gap var(--t);
}
.link-cta:hover { gap: 10px; }
.link-cta::after { content: '→'; transition: transform var(--t); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement {
  background: var(--bg-dark);
  color: #E5E5E5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  overflow: hidden;
  border-bottom: 1px solid #1F1F1F;
}
.announcement-track {
  display: flex; gap: 64px;
  padding: 11px 0;
  animation: marquee 36s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.announcement-track span { display: inline-flex; align-items: center; gap: 10px; }
.announcement-track .dot { color: var(--brand); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.announcement:hover .announcement-track { animation-play-state: paused; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  height: 72px;
}
.brand-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 19px;
  color: var(--text-primary);
}
.brand-logo img { height: 38px; width: auto; }

.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav a:hover { background: var(--bg-card); color: var(--text-primary); }
.nav a.has-mega::after { content: ' ▾'; font-size: 9px; color: var(--text-muted); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.search {
  display: flex; align-items: center;
  width: 260px; height: 40px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: all var(--t);
}
.search:focus-within { background: var(--bg); border-color: var(--text-primary); width: 320px; }
.search svg { width: 16px; height: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.search input { border: 0; background: transparent; flex: 1; padding: 0 10px; outline: none; font-size: 13px; }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-btn { position: relative; }
.cart-btn .badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  background: var(--brand);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 0 4px;
  border: 2px solid var(--bg);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 64px 0 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 32px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border); }
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-item .n { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 22px; color: var(--text-primary); letter-spacing: -0.02em; }
.hero-meta-item .l { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-tertiary); }

/* Hero triptych (3 categorie clickabili) */
.hero-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cat-tile {
  position: relative;
  aspect-ratio: 3/4.2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all var(--t);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cat-tile:hover { border-color: var(--text-primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-tile-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-card);
}
.cat-tile-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.7) 70%, #ffffff 100%);
}
.cat-tile-body {
  position: relative;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.cat-tile-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
}
.cat-tile-title {
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.cat-tile-link {
  margin-top: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 4px;
}
.cat-tile:hover .cat-tile-link { color: var(--brand); gap: 8px; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-icon {
  width: 44px; height: 44px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-text .t { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.trust-text .d { font-size: 12px; color: var(--text-tertiary); }

/* ============================================================
   PROMO BANNER (sotto trust, prima delle categorie)
   ============================================================ */
.promo-banner {
  margin: 56px auto;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FED7AA;
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.promo-banner h3 { font-size: 22px; margin-bottom: 6px; }
.promo-banner p { color: var(--text-secondary); font-size: 14px; }
.promo-banner .pill {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

/* ============================================================
   SECTION GENERIC
   ============================================================ */
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--bg-dark); color: var(--text-inverse); }
.section-dark h2, .section-dark h3 { color: var(--text-inverse); }
.section-dark .lead { color: #D4D4D4; }

.section-head { margin-bottom: 48px; max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 12px; }

/* ============================================================
   CATEGORIES (3 pilastri zigzag)
   ============================================================ */
.categories { display: flex; flex-direction: column; gap: 80px; }
.cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.cat-row:nth-child(even) .cat-row-visual { order: -1; }
.cat-row-copy .eyebrow { margin-bottom: 16px; }
.cat-row-copy h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; margin-bottom: 14px; line-height: 1.1; }
.cat-row-copy .lead { margin-bottom: 22px; max-width: 480px; }
.cat-row-brands {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.brand-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cat-row-visual {
  aspect-ratio: 4/3;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}
.cat-row-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.cat-row-visual:hover img { transform: scale(1.04); }
.cat-row-visual-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ============================================================
   SOFTWARE UPDATE — USP SECTION
   ============================================================ */
.usp {
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  margin: 88px auto;
  padding: 56px 56px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "head head"
    "copy form";
  gap: 28px 56px;
  align-items: start;
}
.usp-head { grid-area: head; max-width: 720px; position: relative; z-index: 1; }
.usp-head .eyebrow { margin-bottom: 14px; color: #FED7AA; }
.usp-head .eyebrow::before { background: var(--brand-bright); }
.usp-head h2 { color: #fff; margin: 0; font-size: clamp(28px, 3.2vw, 40px); }
.usp-head h2 em.serif { color: var(--brand-bright); }

.usp .usp-copy { grid-area: copy; align-self: center; }
.usp .usp-form { grid-area: form; }
.usp::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(234,88,12,0.25) 0%, rgba(234,88,12,0) 70%);
  pointer-events: none;
}
.usp-copy { position: relative; z-index: 1; }
.usp .eyebrow { color: #FED7AA; margin-bottom: 18px; }
.usp .eyebrow::before { background: var(--brand-bright); }
.usp h2 { color: #fff; margin-bottom: 16px; }
.usp h2 em.serif { color: var(--brand-bright); }
.usp .lead { color: #D4D4D4; margin-bottom: 28px; }
.usp-features { display: flex; flex-direction: column; gap: 14px; }
.usp-feature { display: flex; gap: 12px; align-items: flex-start; }
.usp-check {
  width: 22px; height: 22px;
  background: var(--brand);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  font-size: 13px; font-weight: 700;
  margin-top: 1px;
}
.usp-feature-text { color: #E5E5E5; font-size: 14px; line-height: 1.55; }

.usp-form {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 32px;
  backdrop-filter: blur(6px);
}
.usp-form-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.usp-form-sub { font-size: 13px; color: #A3A3A3; margin-bottom: 24px; }
.usp-form .field { margin-bottom: 14px; }
.usp-form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #E5E5E5;
  margin-bottom: 6px;
}
.usp-form input, .usp-form select, .usp-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.usp-form input, .usp-form select { height: 44px; padding: 0 14px; }
.usp-form textarea { line-height: 1.5; }
.usp-form input::placeholder, .usp-form textarea::placeholder { color: #C0C0C0; opacity: 1; }
.usp-form input:focus, .usp-form select:focus, .usp-form textarea:focus { outline: none; border-color: var(--brand-bright); background: rgba(255,255,255,0.1); }

/* USP form actions: 2 bottoni affiancati (Invia + WhatsApp) */
.usp-form-actions {
  display: flex; gap: 10px;
  margin-top: 6px;
}
.usp-form-actions .btn {
  flex: 1;
  height: 48px;
  font-size: 14px;
}
.usp-form-actions .btn-wa {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  background: var(--whatsapp);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.usp-form-actions .btn-wa:hover { background: #1FB458; transform: translateY(-1px); }
.usp-form-actions .btn-wa svg { width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .usp-form-actions { flex-direction: column; }
}
.usp-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23A3A3A3' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px; }

/* ============================================================
   BEST SELLERS — Product grid
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: all var(--t);
  display: flex; flex-direction: column;
}
.product-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.product-image-wrap {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--bg-soft);
  overflow: hidden;
}
.product-image-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform var(--t);
}
.product-card:hover .product-image-wrap img { transform: scale(1.04); }

.product-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--danger);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  z-index: 1;
}
.product-badge.new { background: var(--logo-blue); }
.product-badge.top { background: var(--text-primary); }
.product-fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
  z-index: 1;
}
.product-fav:hover { color: var(--danger); border-color: var(--danger); }
.product-fav svg { width: 16px; height: 16px; }

.product-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.product-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 6px;
}
.product-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.product-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
.stars { color: var(--brand); letter-spacing: 1px; font-size: 13px; }
.product-price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 14px; margin-top: auto;
}
.product-price .now {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.product-price .was {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.product-save {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
}
.product-card .btn { width: 100%; }

/* ============================================================
   REVIEWS / SOCIAL PROOF
   ============================================================ */
.reviews-meta {
  display: flex; gap: 40px; justify-content: center;
  margin-bottom: 48px; flex-wrap: wrap;
}
.review-stat { text-align: center; }
.review-stat .n { font-size: 32px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.review-stat .l { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-tertiary); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Marquee scorrevole infinito */
.reviews-marquee {
  overflow: hidden;
  padding: 12px 0 16px;
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.reviews-marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: revMarquee 90s linear infinite;
  padding: 0 22px;
}
.reviews-marquee:hover .reviews-marquee-track { animation-play-state: paused; }
.reviews-marquee .review-card {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
@keyframes revMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50%)); }
}
@media (max-width: 640px) {
  .reviews-marquee .review-card { width: 300px; }
}
.review-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--t);
}
.review-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow); }
.review-head { display: flex; gap: 12px; align-items: center; }
.review-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dim) 100%);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.review-meta-text .name { font-weight: 700; font-size: 14px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; }
.review-meta-text .name svg { width: 14px; height: 14px; color: var(--logo-blue); }
.review-meta-text .place { font-size: 12px; color: var(--text-tertiary); }
.review-verified {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--success-soft);
  color: var(--success);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  width: fit-content;
}
.review-verified::before { content: '●'; }
.review-body { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.review-product {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
}
.review-product strong { color: var(--text-secondary); font-weight: 600; }

/* ============================================================
   BRANDS MARQUEE
   ============================================================ */
.brands { padding: 72px 0; background: var(--bg-soft); border-block: 1px solid var(--border); overflow: hidden; }
.brands-head { text-align: center; margin-bottom: 36px; }
.brands-head .eyebrow { margin-bottom: 10px; }
.brands-track {
  display: flex;
  gap: 72px;
  animation: marquee 40s linear infinite;
  width: max-content;
  align-items: center;
}
.brand-name {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t);
}
.brand-name:hover { color: var(--brand); }

/* ============================================================
   LOCATION
   ============================================================ */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.location-copy .eyebrow { margin-bottom: 16px; }
.location-copy h2 { margin-bottom: 14px; }
.location-copy .lead { margin-bottom: 28px; }
.location-info { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.location-info-row { display: flex; gap: 14px; align-items: flex-start; }
.location-info-icon {
  width: 36px; height: 36px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.location-info-icon svg { width: 18px; height: 18px; }
.location-info-text .l { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 3px; }
.location-info-text .v { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.location-info-text a { color: var(--text-primary); }
.location-info-text a:hover { color: var(--brand); }

.location-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.location-map {
  aspect-ratio: 4/3;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.location-map iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: 56px 0;
}
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.newsletter h3 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.newsletter p { color: #A3A3A3; font-size: 14px; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input {
  flex: 1;
  height: 48px;
  padding: 0 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
}
.newsletter-form input:focus { outline: none; border-color: var(--brand-bright); background: rgba(255,255,255,0.1); }
.newsletter-form input::placeholder { color: #737373; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-dark);
  color: #A3A3A3;
  padding: 64px 0 24px;
  border-top: 1px solid #1F1F1F;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid #1F1F1F;
}
.footer-brand .brand-logo { color: #fff; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; line-height: 1.6; max-width: 280px; margin-bottom: 22px; color: #A3A3A3; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #D4D4D4;
  transition: all var(--t-fast);
}
.footer-social a:hover { background: var(--brand); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; color: #A3A3A3; transition: color var(--t-fast); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px;
  flex-wrap: wrap;
}
.footer-legal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: #737373;
}
.footer-payments { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: #D4D4D4;
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: var(--whatsapp);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 99;
  transition: transform var(--t);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--whatsapp);
  opacity: 0.3;
  z-index: -1;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================================
   NEW TOPBAR — TechService distintiva (non copia Workshop)
   ============================================================ */
.topbar {
  background: var(--bg-dark);
  color: #FAFAFA;
  border-bottom: 1px solid #1F1F1F;
  font-size: 12px;
  overflow: hidden;
}
.topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 42px;
  gap: 28px;
}

/* SX — heritage statement */
.topbar-heritage {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FAFAFA;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-heritage::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(234,88,12,0.6);
  animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(234,88,12,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(234,88,12,0); }
  100% { box-shadow: 0 0 0 0 rgba(234,88,12,0); }
}

/* CENTRO — marquee con messaggi servizio */
.topbar-marquee {
  overflow: hidden;
  position: relative;
  height: 42px;
  display: flex; align-items: center;
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.topbar-marquee-track {
  display: flex; gap: 48px;
  animation: tbMarquee 38s linear infinite;
  white-space: nowrap;
  width: max-content;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #D4D4D4;
}
.topbar-marquee-track span { display: inline-flex; align-items: center; gap: 8px; }
.topbar-marquee-track .sep { color: var(--brand); font-weight: 700; }
.topbar:hover .topbar-marquee-track { animation-play-state: paused; }
@keyframes tbMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* DX — CTA WhatsApp + Newsletter */
.topbar-ctas {
  display: inline-flex; align-items: center; gap: 4px;
}
.topbar-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #FAFAFA;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.topbar-cta:hover { background: rgba(255,255,255,0.07); }
.topbar-cta svg { width: 15px; height: 15px; }
.topbar-cta.wa { color: #5EE89C; }
.topbar-cta.wa:hover { color: #fff; background: var(--whatsapp); }

/* wrapper bianco con padding per dare il "gap" tra topbar e header */
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.header-dark {
  background: var(--bg-dark);
  color: #FAFAFA;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.18);
  margin: 0 auto;
  max-width: calc(var(--container) - 0px);
}
.header-dark-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 22px;
  align-items: center;
  height: 88px;
  padding: 0 22px;
}
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 18px;
  background: transparent;
  color: #FAFAFA;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  transition: all var(--t-fast);
  cursor: pointer;
}
.menu-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.35); }
.menu-btn svg { width: 22px; height: 22px; }

.brand-block {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.brand-lockup-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: #FAFAFA;
}
.anni-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding-bottom: 2px;
}
.anni-num {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 32px;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: flex-start;
  color: #FAFAFA;
  line-height: 0.9;
}
.anni-num sup {
  font-size: 12px;
  margin-left: 2px;
  margin-top: 4px;
  color: #FAFAFA;
  font-weight: 700;
}
.anni-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FAFAFA;
  margin-top: 4px;
}
.brand-wm {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.03em;
  color: #FAFAFA;
  line-height: 0.95;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  white-space: nowrap;
}

/* Bandiera tricolore unica sotto anniversary + wordmark */
.brand-flag {
  display: flex;
  height: 5px;
  width: 100%;
  margin-top: 5px;
  border-radius: 1px;
  overflow: hidden;
}
.brand-flag .g { flex: 1; background: #009246; }
.brand-flag .w { flex: 1; background: #F1F2F1; }
.brand-flag .r { flex: 1; background: #CE2B37; }

.big-search {
  display: flex; align-items: stretch;
  height: 54px;
  background: #FAFAFA;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 640px;
}
.big-search input {
  flex: 1;
  border: 0; outline: 0;
  padding: 0 22px;
  font-size: 15px;
  background: transparent;
  color: var(--text-primary);
}
.big-search input::placeholder { color: var(--text-muted); }
.big-search button {
  width: 64px;
  background: var(--danger);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
  cursor: pointer;
}
.big-search button:hover { background: #B91C1C; }
.big-search button svg { width: 22px; height: 22px; }

.header-account {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  height: 50px;
  font-size: 13px;
  color: #FAFAFA;
  line-height: 1.15;
  padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  transition: background var(--t-fast);
}
.header-account:hover { background: rgba(255,255,255,0.05); }
.header-account .top { font-size: 11px; color: #A3A3A3; }
.header-account .bottom { font-weight: 700; font-size: 13.5px; color: #FAFAFA; }

.header-cart {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px;
  padding: 0 14px;
  color: #FAFAFA;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.header-cart:hover { background: rgba(255,255,255,0.05); }
.header-cart .cart-icon { position: relative; display: inline-flex; align-items: center; }
.header-cart .cart-icon svg { width: 26px; height: 26px; }
.header-cart .cart-icon .num {
  position: absolute; top: -7px; right: -8px;
  min-width: 18px; height: 18px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 0 5px;
  border: 2px solid var(--bg-dark);
}

/* ============================================================
   HERO SLIDER PROMO (compatto, sotto header)
   ============================================================ */
.hero-slider-section {
  padding: 28px 0 0;
}
.hero-slider {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.hero-slide {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide-text {
  padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  color: #fff;
  position: relative;
  z-index: 2;
}
.hero-slide-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFD600;
  font-weight: 600;
}
.hero-slide h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.hero-slide p {
  font-size: 15px;
  line-height: 1.55;
  color: #D4D4D4;
  max-width: 460px;
  margin: 4px 0 12px;
}
.hero-slide-price {
  display: inline-flex; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.hero-slide-price .now { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.hero-slide-price .was { font-size: 16px; color: #A3A3A3; text-decoration: line-through; }
.hero-slide-price .disc { background: var(--danger); color: #fff; font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: 6px; }
.hero-slide .btn { width: fit-content; }

.hero-slide-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.hero-slide-img img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

/* sfondi differenti per le slide */
.hero-slide.slide-1 { background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #2A1810 100%); }
.hero-slide.slide-2 { background: linear-gradient(135deg, #0F1B2D 0%, #1B2845 50%, #0A0A0A 100%); }
.hero-slide.slide-3 { background: linear-gradient(135deg, #2A0E0A 0%, #1A0A05 50%, #0A0A0A 100%); }

/* hero slider controls */
.hero-slider-dots {
  position: absolute; bottom: 18px; left: 56px;
  display: flex; gap: 8px;
  z-index: 3;
}
.hero-slider-dot {
  width: 28px; height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t);
  border: 0;
}
.hero-slider-dot.active { background: #FFD600; width: 56px; }
.hero-slider-arrows {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: 18px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 3;
}
.hero-slider-arrows button {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.hero-slider-arrows button:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.hero-slider-arrows svg { width: 18px; height: 18px; }

/* ============================================================
   3 CATEGORIE GIGANTI (sotto slider)
   ============================================================ */
.giant-cats {
  padding: 36px 0 28px;
}
.giant-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.giant-cat {
  position: relative;
  display: block;
  aspect-ratio: 5/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  transition: all var(--t);
}
.giant-cat:hover { transform: translateY(-4px); border-color: var(--text-primary); box-shadow: var(--shadow-lg); }
.giant-cat-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.giant-cat-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 60%, transparent 100%);
}
.giant-cat-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 26px;
  color: #fff;
  z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.giant-cat-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #FFD600;
  font-weight: 600;
}
.giant-cat-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.giant-cat-meta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #E5E5E5;
}
.giant-cat-meta::after { content:'→'; transition: transform var(--t); }
.giant-cat:hover .giant-cat-meta::after { transform: translateX(4px); }

/* ============================================================
   SUBCATEGORIES GRID (9 tile)
   ============================================================ */
.subcats {
  padding: 36px 0 56px;
}
.subcats-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
}
.subcats-head h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.subcats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.subcat-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-fast);
}
.subcat-tile:hover { border-color: var(--text-primary); background: var(--bg-soft); transform: translateY(-2px); }
.subcat-tile-icon {
  width: 48px; height: 48px;
  background: var(--bg-card);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.subcat-tile:hover .subcat-tile-icon { background: var(--brand); color: #fff; }
.subcat-tile-icon svg { width: 24px; height: 24px; }
.subcat-tile-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.subcat-tile-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.25;
}
.subcat-tile-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}

/* ============================================================
   PCARD VARIANTE PREVENTIVO (no prezzo, CTA WhatsApp)
   ============================================================ */
.pcard.is-quote .pcard-price-row { display: none; }
.pcard-quote-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  background: var(--whatsapp);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--t-fast);
}
.pcard-quote-cta:hover { background: #1FB458; transform: translateY(-1px); }
.pcard-quote-cta svg { width: 16px; height: 16px; }
.pcard-quote-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  margin-top: auto;
}

/* ============================================================
   CAROUSEL PRODOTTI — stile WorkshopItaly
   ============================================================ */
.product-carousel-section { padding: 72px 0; }
.product-carousel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px; flex-wrap: wrap;
}
.product-carousel-head h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}
.carousel-link {
  color: var(--danger);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: color var(--t-fast);
}
.carousel-link:hover { color: #B91C1C; text-decoration: underline; }

.product-carousel {
  position: relative;
}
.product-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 18px) / 6);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.product-carousel-track::-webkit-scrollbar { height: 6px; }
.product-carousel-track::-webkit-scrollbar-track { background: transparent; }
.product-carousel-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.pcard {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 18px 22px;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  box-shadow: 0 1px 0 var(--border), 0 6px 20px rgba(0,0,0,0.04);
  border: 1px solid transparent;
  transition: all var(--t);
  text-decoration: none;
  color: inherit;
  min-height: 360px;
  position: relative;
}
.pcard:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: 0 1px 0 var(--border-hover), 0 12px 30px rgba(0,0,0,0.08); }
.pcard-imgwrap {
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  background: #fff;
}
.pcard-imgwrap img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.pcard-brand {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.pcard-brand.in-promo { color: var(--danger); }
.pcard-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.4em);
}
.pcard-price-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.pcard-price-col { display: flex; flex-direction: column; gap: 2px; }
.pcard-was { font-size: 13px; color: var(--text-tertiary); text-decoration: line-through; }
.pcard-now { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.pcard-disc {
  font-size: 15px;
  font-weight: 800;
  color: var(--danger);
}

/* SUPER PROMO badge sulla card */
.pcard-superpromo {
  position: absolute; top: 10px; right: 10px;
  width: 78px; height: 78px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23FFD600'/><stop offset='1' stop-color='%23FF9800'/></linearGradient></defs><path d='M50 5 L60 22 L80 18 L75 38 L92 50 L75 62 L80 82 L60 78 L50 95 L40 78 L20 82 L25 62 L8 50 L25 38 L20 18 L40 22 Z' fill='url(%23g)' stroke='%23000' stroke-width='2'/></svg>") no-repeat center / contain;
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(-8deg);
  z-index: 2;
  pointer-events: none;
}
.pcard-superpromo span {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 9px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0;
  transform: rotate(0deg);
  padding: 0 10px;
}

/* Carousel arrows */
.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow {
  width: 40px; height: 40px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.carousel-arrow:hover { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.carousel-arrow svg { width: 16px; height: 16px; }
.carousel-arrow:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   SUPER PROMO SECTION
   ============================================================ */
.super-promo {
  background:
    radial-gradient(ellipse at top left, rgba(220,38,38,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(234,88,12,0.18) 0%, transparent 55%),
    var(--bg-dark);
  color: #FAFAFA;
  border-radius: 18px;
  margin: 56px auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  position: relative;
  border: 1px solid rgba(220,38,38,0.2);
}
.super-promo-left {
  padding: 44px 36px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  z-index: 1;
}

/* Pattern grafico "rays" stilizzato sopra il banner */
.super-promo-left::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: conic-gradient(
    from 215deg at 50% 50%,
    transparent 0deg,
    rgba(255,214,0,0.15) 30deg,
    transparent 60deg,
    rgba(220,38,38,0.2) 90deg,
    transparent 120deg,
    rgba(255,152,0,0.18) 150deg,
    transparent 180deg,
    rgba(220,38,38,0.15) 210deg,
    transparent 240deg
  );
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
  filter: blur(4px);
  animation: spinSlow 60s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.super-promo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(220,38,38,0.18);
  border: 1px solid rgba(220,38,38,0.35);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FCA5A5;
  font-weight: 700;
  width: fit-content;
}
.super-promo-tag::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--danger);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--danger);
  animation: pulseDot 1.6s ease-out infinite;
}

.super-promo-left h3 {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}
.super-promo-left h3 .accent {
  background: linear-gradient(180deg, #FFD600 0%, #FF9800 50%, #FF5722 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  font-size: 64px;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 12px rgba(255, 152, 0, 0.4);
}
.super-promo-left p {
  font-size: 14px;
  color: #D4D4D4;
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
}
.super-promo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
  height: 52px; padding: 0 28px;
  background: #FFD600;
  color: #000;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--t);
  width: fit-content;
  box-shadow: 0 6px 24px rgba(255, 214, 0, 0.3);
}
.super-promo-btn:hover { background: #FFC400; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 214, 0, 0.45); }

/* Sticker "fino a -X%" decorativo */
.super-promo-sticker {
  position: absolute;
  bottom: 30px; right: 28px;
  width: 96px; height: 96px;
  background: var(--danger);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-12deg);
  box-shadow: 0 8px 24px rgba(220,38,38,0.4);
  border: 3px dashed rgba(255,255,255,0.5);
}
.super-promo-sticker .big { font-size: 28px; letter-spacing: -0.04em; }
.super-promo-sticker .small { font-size: 9px; letter-spacing: 1.5px; margin-top: 3px; text-transform: uppercase; opacity: 0.92; }

.super-promo-right {
  padding: 36px 36px 36px 12px;
  background: var(--bg-dark);
  overflow: hidden;
}
.super-promo-right .product-carousel-track {
  padding: 8px 4px 16px;
  grid-auto-columns: 260px;
}
.super-promo-right .pcard {
  background: #FAFAFA;
  box-shadow: none;
  border: 1px solid #1F1F1F;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .header-dark-inner { grid-template-columns: auto auto 1fr auto; gap: 14px; }
  .header-account { display: none; }
  .product-carousel-track { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
  .super-promo { grid-template-columns: 1fr; }
  .super-promo-left { min-height: auto; padding: 32px; }
  .super-promo-right .product-carousel-track { grid-auto-columns: 240px; }
  .hero-slide-text { padding: 36px 36px; }
  .hero-slide h2 { font-size: 30px; }
  .giant-cats-grid { gap: 14px; }
  .giant-cat-title { font-size: 22px; }
  .subcats-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cat-row, .location-grid, .newsletter-grid { grid-template-columns: 1fr; gap: 32px; }
  /* USP mobile: ordine HEAD → FORM → COPY (form sotto al titolo) */
  .usp {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "form"
      "copy";
    gap: 24px;
    padding: 36px 28px;
  }
  .usp::before { display: none; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .product-carousel-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .search { width: 200px; }
  .search:focus-within { width: 220px; }
  .anni-block { display: none; }
  .big-search { height: 48px; }
  .topbar-rating .text-long { display: none; }
  .giant-cats-grid { grid-template-columns: 1fr; }
  .giant-cat { aspect-ratio: 16/8; }
  .subcats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-slider { height: 320px; }
  .hero-slide { grid-template-columns: 1fr; }
  .hero-slide-img { display: none; }
}
/* ============================================================
   TOPBAR — info pratiche (era Variante A, ora standard su tutte le pagine)
   ============================================================ */
.topbar-min {
  background: var(--bg-dark);
  color: #D4D4D4;
  border-bottom: 1px solid #1F1F1F;
  font-size: 12px;
}
.topbar-min-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px;
  gap: 18px;
}
.topbar-min-left, .topbar-min-right {
  display: inline-flex; align-items: center; gap: 14px;
}
.topbar-min a {
  display: inline-flex; align-items: center; gap: 7px;
  color: #D4D4D4;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.topbar-min a:hover { color: #fff; }
.topbar-min a svg { width: 14px; height: 14px; opacity: 0.75; }
.topbar-min a:hover svg { opacity: 1; }
.topbar-min .sep { color: #525252; font-size: 11px; user-select: none; }
.topbar-min strong { color: #FAFAFA; font-weight: 700; letter-spacing: 0.4px; }

/* Responsive topbar-min */
@media (max-width: 900px) {
  .topbar-min-left, .topbar-min-right { gap: 10px; }
  .topbar-min a { font-size: 12px; }
}
@media (max-width: 768px) {
  .topbar-min-inner { height: 38px; gap: 12px; }
  .topbar-min-left .sep:last-of-type,
  .topbar-min-left a:last-of-type { display: none; }  /* nascondi "Showroom Barile (PZ)" */
  .topbar-min-right .sep:nth-of-type(1) { display: none; }
  .topbar-min-right a:nth-of-type(2) { display: none; }  /* nascondi "Diventa rivenditore" */
  .topbar-min a { font-size: 11.5px; gap: 5px; }
  .topbar-min a svg { width: 12px; height: 12px; }
}
@media (max-width: 480px) {
  .topbar-min-inner { height: 36px; }
  /* su small: nascondi anche "info@..." e "Traccia ordine", lascia solo Tel + Newsletter */
  .topbar-min-left a:nth-of-type(2),
  .topbar-min-left .sep:nth-of-type(1) { display: none; }
  .topbar-min-right a:nth-of-type(1) { display: none; }
  .topbar-min strong { font-size: 11.5px; }
  .topbar-min-left strong { letter-spacing: 0.3px; }
}

/* Header bianco/light */
.header-wrap-light {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.header-light {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 24px;
  align-items: center;
  height: 86px;
}
.menu-btn-light {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  transition: all var(--t-fast);
  cursor: pointer;
}
.menu-btn-light:hover { background: var(--bg-card); border-color: var(--text-primary); }
.menu-btn-light svg { width: 20px; height: 20px; }

/* Logo originale come immagine grande */
.brand-img-block {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
  padding-right: 14px;
  border-right: 1px solid var(--border);
}
.brand-img-block img {
  height: 56px;
  width: auto;
  display: block;
}
.brand-img-tag {
  display: flex; flex-direction: column; gap: 2px;
}
.brand-img-tag .heritage {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
}
.brand-img-tag .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Search medio bianco */
.search-light {
  display: flex; align-items: stretch;
  height: 50px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 580px;
  transition: border-color var(--t-fast);
}
.search-light:focus-within { border-color: var(--text-primary); background: var(--bg); }
.search-light input {
  flex: 1;
  border: 0; outline: 0;
  padding: 0 20px;
  font-size: 14px;
  background: transparent;
  color: var(--text-primary);
}
.search-light input::placeholder { color: var(--text-muted); }
.search-light button {
  width: 58px;
  background: var(--brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
  cursor: pointer;
  border: 0;
}
.search-light button:hover { background: var(--brand-bright); }
.search-light button svg { width: 20px; height: 20px; }

.header-light-account {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 0 12px;
  height: 46px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.header-light-account:hover { background: var(--bg-card); }
.header-light-account svg { width: 22px; height: 22px; color: var(--text-secondary); }
.header-light-account .col { display: flex; flex-direction: column; line-height: 1.2; }
.header-light-account .col small { font-size: 10px; color: var(--text-tertiary); font-weight: 500; }

.header-light-cart {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text-primary);
  color: #fff;
  text-decoration: none;
  padding: 0 18px;
  height: 46px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  transition: all var(--t-fast);
}
.header-light-cart:hover { background: var(--brand); transform: translateY(-1px); }
.header-light-cart .cart-icon { position: relative; }
.header-light-cart svg { width: 22px; height: 22px; }
.header-light-cart .num {
  position: absolute; top: -8px; right: -8px;
  min-width: 18px; height: 18px;
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 0 4px;
  border: 2px solid var(--text-primary);
}

/* ============================================================
   VARIANTE B — Header DARK 2 righe + filtri rapidi
   ============================================================ */
.header-two-row {
  background: var(--bg-dark);
  color: #FAFAFA;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.18);
  padding: 16px 22px 14px;
}
.header-two-row-top {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
}
/* Riga 1 PULITA: solo menu+logo SX e account+carrello DX */
.header-row-clean {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  gap: 24px;
}
.header-row-left {
  display: inline-flex; align-items: center; gap: 18px;
}
.header-row-right {
  display: inline-flex; align-items: center; gap: 12px;
}

/* Riga 1 — grid 5 colonne con grid-template-areas (appiattisco wrapper con display:contents) */
.header-row-3col {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto auto !important;
  grid-template-areas: "menu logo search account cart" !important;
  gap: 16px;
  align-items: center;
}
/* I wrapper .header-row-left/.header-row-right diventano "trasparenti": i loro children direct grid items */
.header-row-3col .header-row-left,
.header-row-3col .header-row-right {
  display: contents;
}
/* Assegno aree ai children diretti */
.header-row-3col > .header-row-left > .menu-btn,
.header-row-3col > .menu-btn { grid-area: menu; }
.header-row-3col > .header-row-left > .brand-real,
.header-row-3col > .brand-real { grid-area: logo; }
.header-row-3col > .header-row-center { grid-area: search; display: flex; align-items: center; justify-content: center; }
.header-row-3col > .header-row-right > .header-account,
.header-row-3col > .header-account { grid-area: account; }
.header-row-3col > .header-row-right > .header-cart,
.header-row-3col > .header-cart { grid-area: cart; }

/* Search centrale */
.search-center {
  display: flex; align-items: stretch;
  width: 100%;
  max-width: 540px;
  height: 50px;
  background: #FAFAFA;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.search-center input {
  flex: 1;
  border: 0; outline: 0;
  padding: 0 20px;
  font-size: 14px;
  background: transparent;
  color: var(--text-primary);
}
.search-center input::placeholder { color: var(--text-muted); }
.search-center button {
  width: 60px;
  background: var(--danger);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 0;
  transition: background var(--t-fast);
}
.search-center button:hover { background: #B91C1C; }
.search-center button svg { width: 22px; height: 22px; }

/* Nuovo logo SVG inline (adattamento provvisorio prima del logo definitivo) */
.brand-real {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: inherit;
  height: 50px;
}
.brand-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.brand-text {
  display: flex; flex-direction: column;
  line-height: 1;
  justify-content: center;
}
.brand-wm-clean {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #FAFAFA;
  text-transform: uppercase;
  line-height: 1;
}
.brand-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-top: 4px;
  line-height: 1;
}

/* Riga 2 — solo chip filtri (search rimossa) */
.chips-only {
  justify-content: center !important;
  padding: 4px 0;
}
.chips-only .quick-chips {
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .header-row-3col { grid-template-columns: 1fr; gap: 14px; }
  .header-row-center { order: 3; }
  .brand-text { display: none; }
  .search-center { max-width: 100%; }
}
.header-two-row-bottom {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-fullwidth {
  flex: 1;
  display: flex; align-items: stretch;
  height: 48px;
  background: #FAFAFA;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.search-fullwidth input {
  flex: 1;
  border: 0; outline: 0;
  padding: 0 20px;
  font-size: 14px;
  background: transparent;
  color: var(--text-primary);
}
.search-fullwidth button {
  width: 56px;
  background: var(--danger);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 0;
}
.search-fullwidth button:hover { background: #B91C1C; }
.search-fullwidth button svg { width: 20px; height: 20px; }

.quick-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.quick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  color: #FAFAFA;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
}

/* Default desktop: mostra nome FULL, nascondi SHORT */
.quick-chip .qc-full { display: inline; }
.quick-chip .qc-short { display: none; }
@media (max-width: 768px) {
  .quick-chip .qc-full { display: none; }
  .quick-chip .qc-short { display: inline; }
}
.quick-chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.quick-chip.is-promo { background: var(--danger); border-color: var(--danger); color: #fff; }
.quick-chip.is-promo:hover { background: #B91C1C; }
.quick-chip svg { width: 13px; height: 13px; }

/* Variante B usa lo stesso brand-block ma compatto */
.header-two-row .brand-block { gap: 12px; }
.header-two-row .anni-num { font-size: 26px; }
.header-two-row .anni-lbl { font-size: 7.5px; }
.header-two-row .brand-wm { font-size: 32px; }

/* B v2: Trust badge in centro riga 1 */
.header-trust-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.header-trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.header-trust-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.header-trust-item.is-phone {
  background: rgba(234,88,12,0.12);
  border-color: rgba(234,88,12,0.25);
}
.header-trust-item.is-phone:hover {
  background: rgba(234,88,12,0.2);
  border-color: rgba(234,88,12,0.45);
}
.header-trust-icon {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.header-trust-item.is-phone .header-trust-icon {
  background: var(--brand);
  color: #fff;
}
.header-trust-icon svg { width: 16px; height: 16px; }
.header-trust-text {
  display: flex; flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.header-trust-text .t {
  font-size: 13px;
  font-weight: 700;
  color: #FAFAFA;
  letter-spacing: -0.005em;
}
.header-trust-text .s {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #A3A3A3;
  margin-top: 2px;
}

/* Topbar pulita (no marquee) */
.topbar-clean {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  gap: 16px;
}
.topbar-clean .topbar-ctas {
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar-sep {
  color: #525252;
  font-size: 12px;
  user-select: none;
}
.topbar-cta.phone {
  color: var(--brand-bright);
  font-weight: 700;
  letter-spacing: 0.4px;
}
.topbar-cta.phone:hover { color: #fff; background: rgba(234,88,12,0.18); }
.topbar-cta.phone svg { color: var(--brand-bright); }

/* B v2: logo PNG reale dentro container BIANCO arrotondato */
.logo-real-dark {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.logo-real-dark .logo-box {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
  border: 1px solid #E5E5E5;
}
.logo-real-dark img {
  height: 44px;
  width: auto;
  display: block;
}
.logo-real-dark .anniv-mini {
  display: flex; flex-direction: column; line-height: 1.05;
}
.logo-real-dark .anniv-mini .n {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: #FAFAFA;
}
.logo-real-dark .anniv-mini .n sup {
  font-size: 9px;
  margin-left: 1px;
  color: var(--brand);
  font-weight: 800;
}
.logo-real-dark .anniv-mini .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #A3A3A3;
  margin-top: 2px;
}

/* compatto account header-2-row per evitare overflow */
.header-two-row .header-account {
  padding: 8px 12px;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
  height: auto;
  line-height: 1.25;
}
.header-two-row .header-account .top { font-size: 10.5px; color: #A3A3A3; letter-spacing: 0.3px; }
.header-two-row .header-account .bottom { font-size: 12.5px; }
.header-two-row .header-cart { font-size: 13px; padding: 0 12px; height: 44px; }
.header-two-row .header-cart .cart-icon svg { width: 26px; height: 26px; }

/* B v2: aggiusto la riga 2 — search bilanciata + chip filtri 1 sola riga */
.header-two-row-bottom { gap: 14px; align-items: center; }
.header-two-row-bottom .search-fullwidth { flex: 1 1 0; min-width: 0; }
.header-two-row-bottom .quick-chips { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
.header-two-row-bottom .quick-chip {
  padding: 0 12px;
  height: 38px;
  font-size: 12px;
  letter-spacing: 0.2px;
}
.header-two-row-bottom .quick-chip.is-promo { padding: 0 14px; }

@media (max-width: 1180px) {
  .header-trust-item { padding: 8px 10px; }
  .header-trust-item:nth-child(2) { display: none; } /* nascondi Klarna su tablet */
  .header-trust-text .s { display: none; }
  .header-two-row-bottom .search-fullwidth { max-width: 50%; }
}
@media (max-width: 900px) {
  .header-trust-mid { display: none; }
  .header-two-row-bottom .search-fullwidth { max-width: 100%; }
}

@media (max-width: 1024px) {
  .header-light { grid-template-columns: auto auto 1fr auto; gap: 14px; }
  .header-light-account { display: none; }
  .brand-img-tag { display: none; }
  .header-two-row-bottom { flex-direction: column; align-items: stretch; gap: 10px; }
  .quick-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}

/* ============================================================
   PAGINE INTERNE — Recensioni & Categoria
   ============================================================ */

/* Breadcrumb */
.breadcrumb {
  padding: 22px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--text-muted); margin: 0 8px; }
.breadcrumb .current { color: var(--text-primary); font-weight: 600; }

/* Page hero */
.page-hero {
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 14px;
}
.page-hero .lead { max-width: 620px; }
.page-hero-meta {
  display: flex; gap: 36px; flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.page-hero-meta-item .n {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.page-hero-meta-item .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* Reviews page — toolbar filtri */
.reviews-toolbar {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.review-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.review-filter:hover { border-color: var(--text-primary); color: var(--text-primary); }
.review-filter.active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}
.review-filter svg { width: 14px; height: 14px; }

.reviews-toolbar-sort {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.reviews-toolbar-sort select {
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23737373' stroke-width='1.5' fill='none'/></svg>") no-repeat right 10px center;
  appearance: none;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

/* Reviews page — griglia completa */
.reviews-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 36px 0;
}
.review-card-full {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--t);
}
.review-card-full:hover { border-color: var(--border-hover); box-shadow: var(--shadow); }
.review-card-full .photo-slot {
  aspect-ratio: 16/9;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  background-size: cover;
  background-position: center;
}
.review-card-full .photo-slot.empty::before {
  content: '📷 Foto cliente';
}
.review-card-full .photo-slot.has-img::before { display: none; }
.review-card-full .meta-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.review-card-full .stars { font-size: 14px; }
.review-card-full .date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
}

/* Pagination */
.pagination {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 6px;
  padding: 32px 0 64px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.pagination a, .pagination span {
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  transition: all var(--t-fast);
  padding: 0 12px;
}
.pagination a:hover { border-color: var(--text-primary); color: var(--text-primary); }
.pagination .active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.pagination .dots { border: 0; background: transparent; }

/* CTA "Scrivi recensione" */
.write-review-cta {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FED7AA;
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin: 12px 0;
}
.write-review-cta h3 { font-size: 22px; margin-bottom: 6px; }
.write-review-cta p { color: var(--text-secondary); max-width: 540px; font-size: 14px; }

/* ============================================================
   PAGINA CATEGORIA (Utensileria) — sidebar + grid prodotti
   ============================================================ */
.category-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  padding: 36px 0 64px;
}

/* Sidebar */
.cat-sidebar {
  position: sticky;
  top: 220px;
  align-self: start;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 14px;
}
.filter-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.filter-block h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.filter-list { display: flex; flex-direction: column; gap: 8px; }
.filter-list a {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.filter-list a:hover { color: var(--brand); }
.filter-list a.active { color: var(--brand); font-weight: 700; }
.filter-list a .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
}
.filter-checkbox {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 0;
}
.filter-checkbox input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; }
.filter-checkbox .count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-tertiary);
}
.filter-price {
  display: flex; gap: 8px;
  margin-top: 8px;
}
.filter-price input {
  width: 50%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.filter-apply {
  width: 100%;
  height: 38px;
  background: var(--text-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px;
  transition: background var(--t-fast);
}
.filter-apply:hover { background: var(--brand); }

/* Catalog body */
.cat-body {
  display: flex; flex-direction: column; gap: 24px;
}
.cat-body-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.cat-body-head .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}
.cat-body-head .count strong { color: var(--text-primary); font-weight: 700; }
.cat-grid-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 1024px) {
  .category-layout { grid-template-columns: 1fr; }
  .cat-sidebar { position: static; }
  .reviews-page-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-page-grid { grid-template-columns: 1fr; }
  /* utensileria → 2 col su mobile (richiesta esplicita), non 1 col */
  .cat-grid-products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .write-review-cta { grid-template-columns: 1fr; padding: 24px; }
}

/* ============================================================
   PAGINE VETRINA (Diagnostica / Stazioni A/C) — solo preventivo
   ============================================================ */

/* Page hero impattante con form preventivo inline */
.quote-hero {
  background:
    radial-gradient(ellipse at top right, rgba(234,88,12,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(37,99,235,0.08) 0%, transparent 50%),
    var(--bg-dark);
  color: var(--text-inverse);
  padding: 64px 0 56px;
  border-bottom: 1px solid #1F1F1F;
}
.quote-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.quote-hero-copy .eyebrow { color: var(--brand-bright); margin-bottom: 16px; }
.quote-hero-copy .eyebrow::before { background: var(--brand); }
.quote-hero-copy h1 {
  color: #fff;
  margin-bottom: 16px;
  font-size: clamp(34px, 4.5vw, 54px);
}
.quote-hero-copy h1 em.serif { color: var(--brand-bright); }
.quote-hero-copy .lead {
  color: #D4D4D4;
  font-size: 17px;
  margin-bottom: 28px;
}
.quote-hero-bullets {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 28px;
}
.quote-hero-bullets li {
  display: flex; align-items: flex-start; gap: 12px;
  color: #E5E5E5;
  font-size: 14.5px;
  line-height: 1.5;
}
.quote-hero-bullets li::before {
  content: '✓';
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--brand);
  border-radius: 50%;
  color: #fff;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Form preventivo nel hero (in vetro) */
.quote-form-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(8px);
}
.quote-form-title {
  font-size: 20px; font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.quote-form-sub {
  font-size: 13px;
  color: #A3A3A3;
  margin-bottom: 22px;
}
.quote-form-block .field { margin-bottom: 12px; }
.quote-form-block label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #A3A3A3;
  margin-bottom: 6px;
}
.quote-form-block input,
.quote-form-block select,
.quote-form-block textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.quote-form-block input:focus,
.quote-form-block select:focus,
.quote-form-block textarea:focus {
  outline: none;
  border-color: var(--brand-bright);
  background: rgba(0,0,0,0.45);
}
.quote-form-block textarea { resize: vertical; min-height: 70px; }
.quote-form-block select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23A3A3A3' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
}
.quote-form-foot {
  display: flex; gap: 10px; margin-top: 16px;
}
.quote-form-foot .btn { flex: 1; }
.quote-form-foot .btn-wa {
  background: var(--whatsapp);
  color: #fff;
  height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: background var(--t-fast);
}
.quote-form-foot .btn-wa:hover { background: #1FB458; }
.quote-form-foot .btn-wa svg { width: 18px; height: 18px; }

/* Brand strip */
.brand-strip-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.brand-strip-head {
  text-align: center;
  margin-bottom: 28px;
}
.brand-strip-head .eyebrow { margin-bottom: 8px; }
.brand-strip-head h2 { font-size: 26px; }
.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.brand-strip .brand-name {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color var(--t);
  cursor: default;
}
.brand-strip .brand-name:hover { color: var(--brand); }

/* Sotto-categorie tile per pagina vetrina */
.vetrina-subcats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 36px 0;
}
.vetrina-subcat-tile {
  display: flex; align-items: center; gap: 16px;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all var(--t);
}
.vetrina-subcat-tile:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vetrina-subcat-icon {
  width: 56px; height: 56px;
  background: var(--brand-soft);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.vetrina-subcat-icon svg { width: 28px; height: 28px; }
.vetrina-subcat-text .t { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.vetrina-subcat-text .s { font-size: 13px; color: var(--text-tertiary); }

/* Griglia card preventivo (senza filtri prezzo) */
.vetrina-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 12px 0 36px;
}

/* Sezione "Perché preventivo personalizzato?" */
.why-quote {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  margin: 36px 0;
}
.why-quote-head {
  text-align: center;
  margin-bottom: 36px;
}
.why-quote-head h2 { font-size: 28px; margin-bottom: 10px; }
.why-quote-head .lead { margin: 0 auto; }
.why-quote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.why-quote-item {
  text-align: center;
  padding: 16px;
}
.why-quote-item .icon {
  width: 56px; height: 56px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin: 0 auto 16px;
}
.why-quote-item .icon svg { width: 28px; height: 28px; }
.why-quote-item h4 { font-size: 16px; margin-bottom: 6px; }
.why-quote-item p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }

/* Hero compatto per pagine vetrina (no form a destra) */
.quote-hero-compact {
  background:
    radial-gradient(ellipse at top right, rgba(234,88,12,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(37,99,235,0.08) 0%, transparent 50%),
    var(--bg-dark);
  color: var(--text-inverse);
  padding: 56px 0 48px;
  border-bottom: 1px solid #1F1F1F;
}
.quote-hero-compact .container { text-align: center; }
.quote-hero-compact .eyebrow { color: var(--brand-bright); margin-bottom: 14px; justify-content: center; }
.quote-hero-compact .eyebrow::before { background: var(--brand); }
.quote-hero-compact h1 {
  color: #fff;
  margin: 0 auto 14px;
  font-size: clamp(34px, 4.5vw, 54px);
  max-width: 900px;
}
.quote-hero-compact h1 em.serif { color: var(--brand-bright); }
.quote-hero-compact .lead {
  color: #D4D4D4;
  font-size: 17px;
  margin: 0 auto;
  max-width: 700px;
}

/* Sezione bullet point standalone */
.bullets-section {
  padding: 64px 0 56px;
  background: var(--bg);
}
.bullets-section-head {
  text-align: center;
  margin-bottom: 40px;
}
.bullets-section-head .eyebrow { justify-content: center; margin-bottom: 12px; }
.bullets-section-head h2 { font-size: clamp(28px, 3vw, 38px); }
.bullets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bullet-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: all var(--t);
}
.bullet-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); }
.bullet-card .bullet-icon {
  width: 44px; height: 44px;
  background: var(--brand);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 20px; font-weight: 800;
}
.bullet-card h4 {
  font-size: 16px;
  margin: 0;
  color: var(--text-primary);
}
.bullet-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Form preventivo come sezione standalone */
.quote-form-section {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.quote-form-section::before {
  content: '';
  position: absolute;
  top: -100px; right: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(234,88,12,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.quote-form-section .container { position: relative; z-index: 1; }
.quote-form-section-head {
  text-align: center;
  margin-bottom: 36px;
}
.quote-form-section-head .eyebrow { color: var(--brand-bright); justify-content: center; margin-bottom: 12px; }
.quote-form-section-head .eyebrow::before { background: var(--brand-bright); }
.quote-form-section-head h2 { color: #fff; font-size: clamp(28px, 3vw, 38px); margin-bottom: 12px; }
.quote-form-section-head .lead { color: #D4D4D4; margin: 0 auto; max-width: 600px; }

.quote-form-standalone {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  backdrop-filter: blur(8px);
}
.quote-form-standalone .field { margin-bottom: 16px; }
.quote-form-standalone label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #E5E5E5;
  margin-bottom: 8px;
}
.quote-form-standalone input,
.quote-form-standalone textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  font-size: 14.5px;
  font-family: inherit;
}
.quote-form-standalone input::placeholder,
.quote-form-standalone textarea::placeholder {
  color: #C0C0C0;
  opacity: 1;
}
.quote-form-standalone input:focus,
.quote-form-standalone textarea:focus {
  outline: none;
  border-color: var(--brand-bright);
  background: rgba(255,255,255,0.1);
}
.quote-form-standalone textarea { resize: vertical; min-height: 96px; }
.quote-form-actions {
  display: flex; gap: 12px; margin-top: 20px;
}
.quote-form-actions .btn { flex: 1; height: 52px; font-size: 14.5px; }
.quote-form-actions .btn-wa {
  background: var(--whatsapp);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  flex: 1;
  height: 52px;
  font-size: 14.5px;
  transition: background var(--t-fast);
}
.quote-form-actions .btn-wa:hover { background: #1FB458; }
.quote-form-actions .btn-wa svg { width: 18px; height: 18px; }

/* Marquee brand pagina (più compatto del homepage) */
.page-brands {
  padding: 64px 0;
  background: var(--bg-soft);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.page-brands-head {
  text-align: center;
  margin-bottom: 28px;
}
.page-brands-head .eyebrow { justify-content: center; margin-bottom: 8px; }
.page-brands-head h2 { font-size: 22px; }
.page-brands-track {
  display: flex;
  gap: 72px;
  animation: marquee 32s linear infinite;
  width: max-content;
  align-items: center;
}
.page-brands-track .brand-name {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t);
}
.page-brands-track .brand-name:hover { color: var(--brand); }
.page-brands:hover .page-brands-track { animation-play-state: paused; }

/* CTA finale prominente prima del footer */
.final-cta {
  background:
    radial-gradient(ellipse at top left, rgba(234,88,12,0.18) 0%, transparent 55%),
    var(--bg-dark);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  margin: 48px auto;
  text-align: center;
}
.final-cta h2 { color: #fff; font-size: 36px; margin-bottom: 12px; max-width: 620px; margin-left: auto; margin-right: auto; }
.final-cta h2 em.serif { color: var(--brand-bright); }
.final-cta .lead { color: #D4D4D4; max-width: 540px; margin: 0 auto 28px; }
.final-cta-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.final-cta-actions .btn { height: 54px; padding: 0 28px; font-size: 14.5px; }

@media (max-width: 1024px) {
  .quote-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-form-block { padding: 24px; }
  .vetrina-subcats { grid-template-columns: repeat(2, 1fr); }
  .vetrina-grid { grid-template-columns: repeat(2, 1fr); }
  .why-quote-grid { grid-template-columns: repeat(2, 1fr); }
  .bullets-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-form-standalone { padding: 28px 24px; }
  .quote-form-actions { flex-direction: column; }
}
@media (max-width: 640px) {
  .vetrina-subcats { grid-template-columns: 1fr; }
  .vetrina-grid { grid-template-columns: 1fr; }
  .why-quote-grid { grid-template-columns: 1fr; }
  .bullets-grid { grid-template-columns: 1fr; }
  .brand-strip { gap: 32px; }
  .brand-strip .brand-name { font-size: 18px; }
  .page-brands-track .brand-name { font-size: 22px; }
  .why-quote { padding: 32px 22px; }
  .final-cta { padding: 36px 24px; }
  .final-cta h2 { font-size: 26px; }
  .quote-hero-compact { padding: 40px 0 32px; }
}

/* ============================================================
   PAGINA PROMO — la macchina di conversione
   ============================================================ */

/* Hero PROMO impattante con gradient fuoco */
.promo-hero {
  position: relative;
  background:
    radial-gradient(ellipse at top left, #DC2626 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, #F97316 0%, transparent 50%),
    radial-gradient(ellipse at top right, #FFD600 0%, transparent 45%),
    var(--bg-dark);
  color: #fff;
  padding: 56px 0 80px;
  overflow: hidden;
}
.promo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 70% 30%,
    transparent 0deg,
    rgba(255,214,0,0.15) 40deg,
    transparent 80deg,
    rgba(220,38,38,0.2) 120deg,
    transparent 160deg,
    rgba(249,115,22,0.18) 200deg,
    transparent 240deg
  );
  animation: spinSlow 80s linear infinite;
  pointer-events: none;
}
.promo-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 56px;
  align-items: center;
}

/* Hero minimal — compatto, niente conic animato, niente sticker */
.promo-hero-minimal {
  padding: 36px 0 40px;
}
.promo-hero-minimal::before { display: none; }
.promo-hero-minimal h1 {
  font-family: 'Archivo Black', sans-serif;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.promo-hero-minimal h1 .accent {
  display: inline;
  background: linear-gradient(180deg, #FFD600 0%, #FF9800 50%, #FF5722 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.promo-hero-minimal .sub {
  font-size: 16px;
  color: #FAFAFA;
}
.promo-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,214,0,0.4);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FFD600;
  font-weight: 700;
  width: fit-content;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.promo-hero-tag::before {
  content: '';
  width: 8px; height: 8px;
  background: #FFD600;
  border-radius: 50%;
  box-shadow: 0 0 12px #FFD600;
  animation: pulseDot 1.4s ease-out infinite;
}

.promo-hero h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(54px, 9vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
  text-transform: uppercase;
  color: #fff;
}
.promo-hero h1 .accent {
  display: block;
  background: linear-gradient(180deg, #FFD600 0%, #FF9800 50%, #FF5722 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 24px rgba(255,152,0,0.4);
}
.promo-hero .sub {
  font-size: 19px;
  color: #FAFAFA;
  margin: 0 0 28px;
  max-width: 540px;
  line-height: 1.45;
}
.promo-hero .sub strong { color: #FFD600; font-weight: 800; }
.promo-hero-stats {
  display: flex; gap: 32px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.promo-hero-stat .n {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.promo-hero-stat .n .em { color: #FFD600; }
.promo-hero-stat .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #D4D4D4;
  margin-top: 5px;
}
.promo-hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.promo-hero-cta .btn-promo-yellow {
  background: #FFD600;
  color: #0F0F0F;
  height: 56px;
  padding: 0 32px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 28px rgba(255,214,0,0.35);
  transition: all var(--t);
}
.promo-hero-cta .btn-promo-yellow:hover { background: #FFC400; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,214,0,0.5); }
.promo-hero-cta .btn-promo-outline {
  background: transparent;
  color: #fff;
  height: 56px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: all var(--t-fast);
}
.promo-hero-cta .btn-promo-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* Countdown timer */
.countdown-box {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,214,0,0.4);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  min-width: 320px;
}
.countdown-box .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFD600;
  font-weight: 700;
  margin-bottom: 16px;
}
.countdown-timer {
  display: flex; gap: 10px; justify-content: center;
}
.countdown-unit {
  display: flex; flex-direction: column;
  min-width: 64px;
}
.countdown-unit .v {
  font-family: 'Archivo Black', sans-serif;
  font-size: 40px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 0;
  line-height: 1;
  letter-spacing: -0.03em;
}
.countdown-unit .u {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #A3A3A3;
  margin-top: 8px;
}

/* Sticker decorativo "fino a -50%" */
.promo-sticker {
  position: absolute;
  top: 24px; right: 24px;
  width: 130px; height: 130px;
  background: var(--danger);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  line-height: 1;
  transform: rotate(-12deg);
  box-shadow: 0 12px 32px rgba(220,38,38,0.5);
  border: 4px dashed rgba(255,255,255,0.5);
  z-index: 2;
}
.promo-sticker .top { font-size: 14px; opacity: 0.9; }
.promo-sticker .big { font-size: 44px; letter-spacing: -0.04em; }
.promo-sticker .bot { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; }

/* Top deals — 3 card mega */
.top-deals {
  padding: 64px 0 40px;
}
.top-deals-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap; gap: 16px;
}
.top-deals-head h2 {
  font-size: 30px;
  margin: 0;
  display: inline-flex; align-items: center; gap: 12px;
}
.top-deals-head h2::before {
  content: '🔥';
  font-size: 28px;
}
.top-deals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.deal-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--t);
  overflow: hidden;
}
.deal-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(220,38,38,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.deal-card:hover { border-color: var(--danger); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(220,38,38,0.15); }
.deal-card-badges {
  display: inline-flex; gap: 6px;
  position: relative; z-index: 1;
}
.deal-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 5px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}
.deal-badge.discount { background: var(--danger); color: #fff; }
.deal-badge.top { background: var(--text-primary); color: #fff; }
.deal-badge.flash { background: #FFD600; color: #0F0F0F; }
.deal-badge.stock { background: #FEF2F2; color: var(--danger); border: 1px solid #FCA5A5; }
.deal-card-img {
  aspect-ratio: 1/1;
  background: var(--bg-soft);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative; z-index: 1;
}
.deal-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 16px; }
.deal-card-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--danger);
  position: relative; z-index: 1;
}
.deal-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  position: relative; z-index: 1;
}
.deal-card-stock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--danger);
  font-weight: 600;
  letter-spacing: 0.4px;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.deal-card-stock::before { content: '⚡'; }
.deal-card-priceblock {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  position: relative; z-index: 1;
}
.deal-card-price .was {
  font-size: 14px;
  color: var(--text-tertiary);
  text-decoration: line-through;
  display: block;
}
.deal-card-price .now {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.deal-card-save {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--danger);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.deal-card .btn {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Toolbar promo filtri */
.promo-filters {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}
.promo-filters-inner {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.promo-filter-group {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.promo-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 4px;
  align-self: center;
}
.promo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.promo-chip:hover { border-color: var(--text-primary); color: var(--text-primary); }
.promo-chip.active { background: var(--danger); color: #fff; border-color: var(--danger); }
.promo-chip.active.yellow { background: #FFD600; color: #0F0F0F; border-color: #FFD600; }
.promo-toolbar-sort {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.promo-toolbar-sort select {
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%23737373' stroke-width='1.5' fill='none'/></svg>") no-repeat right 10px center;
  appearance: none;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
}

/* Promo grid prodotti */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 36px 0 16px;
}

/* Card promo standard (con prezzo e cta acquista) */
.promo-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all var(--t);
  text-decoration: none;
  color: inherit;
}
.promo-card:hover {
  border-color: var(--danger);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(220,38,38,0.12);
}
.promo-card-img {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.promo-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 16px; transition: transform var(--t); }
.promo-card:hover .promo-card-img img { transform: scale(1.05); }
.promo-card-discount {
  position: absolute; top: 10px; left: 10px;
  background: var(--danger);
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 6px;
  letter-spacing: -0.02em;
  z-index: 1;
}
.promo-card-flag {
  position: absolute; top: 10px; right: 10px;
  background: #FFD600;
  color: #0F0F0F;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 1;
}
.promo-card-flag.top { background: var(--text-primary); color: #FFD600; }
.promo-card-flag.flash { background: var(--danger); color: #fff; }
.promo-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.promo-card-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--danger);
}
.promo-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.promo-card-stock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: -2px;
}
.promo-card-stock.low { color: var(--danger); font-weight: 700; }
.promo-card-stock.low::before { content: '⚡ '; }
.promo-card-price {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; row-gap: 2px;
  margin-top: auto;
}
.promo-card-price .was { font-size: 12.5px; color: var(--text-muted); text-decoration: line-through; }
.promo-card-price .now { font-family: 'Archivo Black', sans-serif; font-size: 22px; color: var(--text-primary); letter-spacing: -0.02em; }
.promo-card-save {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--danger);
  font-weight: 700;
  margin-left: auto;
  align-self: center;
}
.promo-card-cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px;
  background: var(--text-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t-fast);
}
.promo-card-cta:hover { background: var(--danger); }

/* Trust mid strip */
.promo-trust-strip {
  background: var(--bg-soft);
  border-block: 1px solid var(--border);
  padding: 24px 0;
}
.promo-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.promo-trust-item {
  display: flex; align-items: center; gap: 12px;
}
.promo-trust-ico {
  width: 38px; height: 38px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}
.promo-trust-ico svg { width: 20px; height: 20px; }
.promo-trust-text .t { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.promo-trust-text .s { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* Newsletter VIP — claim più forte */
.promo-newsletter {
  background:
    radial-gradient(ellipse at top right, rgba(255,214,0,0.18) 0%, transparent 50%),
    var(--bg-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  margin: 56px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.promo-newsletter h3 {
  font-size: 28px;
  margin: 0 0 8px;
  color: #fff;
}
.promo-newsletter h3 em.serif { color: #FFD600; }
.promo-newsletter p { color: #D4D4D4; font-size: 14px; margin: 0; }
.promo-newsletter-perk {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #FFD600;
  font-weight: 700;
}
.promo-newsletter-perk::before { content: '🎁'; font-size: 16px; }
.promo-newsletter-form {
  display: flex; gap: 10px;
}
.promo-newsletter-form input {
  flex: 1;
  height: 52px;
  padding: 0 18px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,214,0,0.4);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14.5px;
}
.promo-newsletter-form input::placeholder { color: #C0C0C0; opacity: 1; }
.promo-newsletter-form input:focus { outline: none; border-color: #FFD600; background: rgba(255,255,255,0.12); }
.promo-newsletter-form button {
  height: 52px;
  padding: 0 28px;
  background: #FFD600;
  color: #0F0F0F;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--t);
}
.promo-newsletter-form button:hover { background: #FFC400; transform: translateY(-1px); }

@media (max-width: 1024px) {
  .promo-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .top-deals-grid { grid-template-columns: 1fr 1fr; }
  .promo-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-trust-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .promo-newsletter { grid-template-columns: 1fr; padding: 36px 32px; }
}
@media (max-width: 640px) {
  .promo-hero { padding: 36px 0 56px; }
  .top-deals-grid, .promo-grid { grid-template-columns: 1fr; }
  .promo-trust-grid { grid-template-columns: 1fr; }
  .countdown-unit .v { font-size: 28px; }
  .promo-sticker { width: 90px; height: 90px; }
  .promo-sticker .big { font-size: 28px; }
}

/* ============================================================
   MEGA MENU (drawer overlay)
   ============================================================ */
.mega-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.mega-overlay.open { opacity: 1; visibility: visible; }

.mega-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(960px, 92vw);
  background: var(--bg-dark);
  color: var(--text-inverse);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0.24, 1);
  display: flex; flex-direction: column;
  box-shadow: 8px 0 32px rgba(0,0,0,0.4);
}
.mega-drawer.open { transform: translateX(0); }

.mega-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid #1F1F1F;
  flex-shrink: 0;
}
.mega-header h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-bright);
  font-weight: 600;
  margin: 0;
}
.mega-close {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: #FAFAFA;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.mega-close:hover { background: var(--danger); border-color: var(--danger); }
.mega-close svg { width: 18px; height: 18px; }

.mega-body {
  flex: 1; overflow-y: auto;
  padding: 32px;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 32px;
}
.mega-col h4 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: #FAFAFA;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1F1F1F;
}
.mega-col h4 .icon {
  width: 30px; height: 30px;
  background: rgba(234,88,12,0.15);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-bright);
  flex-shrink: 0;
}
.mega-col h4 .icon svg { width: 16px; height: 16px; }
.mega-col ul {
  display: flex; flex-direction: column;
  gap: 2px;
}
.mega-col li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: #D4D4D4;
  text-decoration: none;
  transition: color var(--t-fast), padding var(--t-fast);
}
.mega-col li a:hover { color: var(--brand-bright); padding-left: 6px; }
.mega-col li a .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #525252;
  letter-spacing: 0.3px;
}
.mega-col li.is-quote a .count { color: var(--brand-bright); }

.mega-quick {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #1F1F1F;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.mega-quick a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--t-fast);
}
.mega-quick a:hover { background: rgba(234,88,12,0.12); border-color: var(--brand); }
.mega-quick .icon {
  width: 36px; height: 36px;
  background: var(--brand);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.mega-quick .icon svg { width: 18px; height: 18px; }
.mega-quick .txt {
  display: flex; flex-direction: column;
  gap: 1px;
}
.mega-quick .txt .t { font-size: 13px; font-weight: 700; color: #FAFAFA; }
.mega-quick .txt .s { font-size: 11px; color: #A3A3A3; }

@media (max-width: 768px) {
  .mega-grid { grid-template-columns: 1fr; gap: 24px; }
  .mega-quick { grid-template-columns: 1fr 1fr; }
  .mega-body { padding: 22px; }
}

/* fine varianti */

@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 16px; }
  .hero { padding: 40px 0; }
  .section { padding: 56px 0; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .products-grid { grid-template-columns: 1fr; }
  .product-carousel-track { grid-auto-columns: 75%; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .search { display: none; }
  .hero-meta { gap: 16px; }
  .hero-meta-item .n { font-size: 18px; }
  .review-stat .n { font-size: 24px; }
  .promo-banner { grid-template-columns: 1fr; padding: 24px; }
  .header-dark-inner { grid-template-columns: auto 1fr auto; height: 72px; }
  .menu-btn span { display: none; }
  .menu-btn { padding: 0 12px; width: 50px; justify-content: center; }
  .brand-wordmark .name { font-size: 24px; }
  .big-search { height: 44px; }
  .big-search button { width: 50px; }
  .topbar-inner { font-size: 11px; gap: 8px; }
  .topbar-rating .stars-yellow { font-size: 12px; }
  .super-promo-left { padding: 24px; }
  .product-carousel-section { padding: 48px 0; }
  .product-carousel-head h2 { font-size: 20px; }
}

/* ============================================================
   MOBILE RESPONSIVE — fix preventivi unified
   Caricato in coda per overrideare regole precedenti dove serve
   ============================================================ */

/* === Tablet (≤900px) ============================================ */
@media (max-width: 900px) {
  /* HEADER row 1: ottimizzazione spazio */
  .header-row-3col { gap: 14px; }
  .header-row-right { gap: 8px; }
  .header-account { display: none; }   /* lascia solo carrello */

  /* Topbar: nascondi separatori, mantieni telefoni e CTA principali */
  .topbar-cta span { font-size: 12px; }

  /* USP software: padding ridotto */
  .usp { padding: 40px 28px; margin: 64px auto; }
}

/* === Mobile large (≤768px) ===================================== */
@media (max-width: 768px) {
  /* HEADER mobile: row 1 [Menu | Logo CENTRO | Carrello] · row 2 [Search full-width] */
  .header-row-3col {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "menu logo cart"
      "search search search" !important;
    gap: 10px 12px !important;
    align-items: center;
  }
  .header-row-3col > .header-row-left > .brand-real,
  .header-row-3col > .brand-real {
    justify-self: center;
  }
  .header-row-3col > .header-row-right > .header-account,
  .header-row-3col > .header-account {
    display: none;
  }
  .header-row-3col > .header-row-center {
    margin-top: 6px;
  }

  /* Search bar mobile prominente */
  .search-center {
    max-width: 100%;
    height: 48px;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }
  .search-center input {
    padding: 0 18px;
    font-size: 15px;
    color: var(--text-primary);
  }
  .search-center input::placeholder {
    color: var(--text-muted);
    font-size: 14px;
  }
  .search-center button {
    width: 54px;
    background: var(--danger);
  }
  .search-center button svg { width: 22px; height: 22px; }

  /* Header two-row container: più compatto su mobile */
  .header-two-row { padding: 10px 12px 10px; border-radius: 12px; }

  /* Logo SVG e Menu più piccoli su mobile */
  .header-row-3col > .header-row-left > .brand-real,
  .header-row-3col > .brand-real { height: 40px; }
  .header-row-3col .brand-mark { width: 36px; height: 36px; }
  .menu-btn { height: 40px; padding: 0 12px; font-size: 13px; }
  .menu-btn svg { width: 20px; height: 20px; }
  .header-cart { height: 40px; padding: 0 10px; }
  .header-cart .cart-icon svg { width: 24px; height: 24px; }
  .header-cart .cart-icon .num { min-width: 16px; height: 16px; font-size: 10px; top: -6px; right: -7px; }
  .search-center { height: 44px; }
  .search-center input { padding: 0 14px; font-size: 14px; }
  .search-center button { width: 50px; }
  .search-center button svg { width: 20px; height: 20px; }

  /* Logo compatto: solo SVG mark, niente wordmark testo */
  .brand-text { display: none; }
  .brand-mark { width: 42px; height: 42px; }

  /* Menu button compatto solo icona */
  .menu-btn { padding: 0 12px; height: 44px; }
  .menu-btn span { display: inline; font-size: 13px; }

  /* Carrello: nasconde testo, solo icona+badge */
  .header-cart span:not(.num) { display: none; }
  .header-cart { padding: 0 10px; }
  .header-cart .cart-icon svg { width: 24px; height: 24px; }

  /* Chip filtri: GRID 5 colonne uguali (tab uniformi compatti) */
  .header-two-row-bottom.chips-only {
    justify-content: stretch !important;
    padding: 4px 0 0;
    margin: 4px 0 0;
  }
  .header-two-row-bottom .quick-chips {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: 0;
    gap: 4px;
    width: 100%;
  }
  .quick-chip {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .quick-chip svg { display: none; }  /* nascondo icona Promo per uniformità */
  .quick-chip.is-promo {
    box-shadow: 0 2px 6px rgba(220,38,38,0.3);
  }

  /* Topbar mobile: nascondi parte extra "(PZ) · Italia", lascia "Dal 1998 · Barile" */
  .topbar-heritage { letter-spacing: 1.1px; font-size: 10px; }
  .topbar-heritage .hh-extra { display: none; }
  .topbar-cta { padding: 6px 8px; }
  .topbar-sep { display: none; }

  /* Hero slider compatto */
  .hero-slider { height: 280px; }
  .hero-slide-text { padding: 26px 22px; }
  .hero-slide h2 { font-size: 24px; }
  .hero-slide .lead, .hero-slide p { font-size: 13px; max-width: 100%; }
  .hero-slider-dots { left: 22px; bottom: 14px; }
  .hero-slider-arrows { right: 10px; }
  .hero-slider-arrows button { width: 36px; height: 36px; }

  /* 3 categorie giganti — già 1 col da 1024, qui rifinire */
  .giant-cat { aspect-ratio: 16/9; }
  .giant-cat-title { font-size: 22px; }

  /* Section padding ridotto */
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }

  /* Page hero recensioni: meta su 2 col */
  .page-hero-meta { gap: 18px; }
  .page-hero-meta-item .n { font-size: 22px; }

  /* Pagina utensileria: sidebar sotto i prodotti su mobile */
  .category-layout { grid-template-columns: 1fr; gap: 24px; }
  .cat-body { order: 1; }
  .cat-sidebar { order: 2; position: static; }
  .filter-block { padding: 14px 16px; }

  /* Filter block collapsabile: lo lasciamo aperto ma compatto */
  .filter-block h5 { padding-bottom: 8px; margin-bottom: 10px; }

  /* Promo page: filtri NON più sticky su mobile (overlap con header) */
  .promo-filters { position: static; padding: 18px 0; }
  .promo-filters-inner { gap: 10px; flex-wrap: wrap; }
  .promo-toolbar-sort { margin-left: 0; width: 100%; }
  .promo-filter-group { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .promo-filter-group::-webkit-scrollbar { display: none; }
  .promo-chip { flex-shrink: 0; }

  /* Promo hero minimal: ridotto su mobile */
  .promo-hero-minimal { padding: 28px 0 32px; }
  .promo-hero-minimal h1 { font-size: 44px !important; }
  .promo-hero-minimal .sub { font-size: 14px !important; }

  /* Card prodotto pcard: ~2 visibili su mobile (48% larghezza) */
  .product-carousel-track { grid-auto-columns: 48%; gap: 12px; }
  .pcard { min-height: auto; padding: 12px 12px 16px; }
  .pcard-title { font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(2 * 1.4em); }
  .pcard-brand { font-size: 11px; margin-bottom: 4px; }
  .pcard-imgwrap { margin-bottom: 10px; }
  .pcard-now { font-size: 17px; }
  .pcard-was { font-size: 11px; }
  .pcard-disc { font-size: 13px; }

  /* Promo grid 4 col → 2 col */
  .promo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .promo-card-title { font-size: 13px; }
  .promo-card-price .now { font-size: 19px; }

  /* Top deals 3 col → 1 col già fatto, padding ridotto */
  .top-deals-grid { gap: 16px; }
  .deal-card { padding: 18px; }
  .deal-card-title { font-size: 14px; }
  .deal-card-price .now { font-size: 24px; }

  /* Reviews page grid 2 col → 1 col */
  .reviews-page-grid { grid-template-columns: 1fr; gap: 16px; }
  .reviews-toolbar { gap: 8px; padding: 16px 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .reviews-toolbar::-webkit-scrollbar { display: none; }
  .review-filter { flex-shrink: 0; padding: 6px 12px; font-size: 12.5px; }

  /* Vetrina pagine (diagnostica/stazioni): 2 col su mobile (richiesta esplicita) */
  .vetrina-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bullets-grid { grid-template-columns: 1fr; gap: 14px; }
  .bullets-section { padding: 48px 0 40px; }
  /* Card vetrina compatte su mobile */
  .vetrina-grid .pcard { padding: 12px; min-height: auto; }
  .vetrina-grid .pcard-title { font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; }
  .vetrina-grid .pcard-imgwrap { margin-bottom: 10px; }
  .vetrina-grid .pcard-brand { font-size: 10.5px; }
  .vetrina-grid .pcard-quote-label { font-size: 10px; }
  .vetrina-grid .pcard-quote-cta { padding: 9px 10px; font-size: 12px; gap: 6px; }

  /* Quote form section padding ridotto */
  .quote-form-section { padding: 48px 0; }
  .quote-form-standalone { padding: 24px 20px; }
  .quote-form-actions { flex-direction: column; }

  /* USP form mobile */
  .usp { padding: 32px 24px; margin: 48px auto; }

  /* Newsletter dark mobile */
  .newsletter-grid { grid-template-columns: 1fr; gap: 18px; }
  .newsletter-form { flex-direction: column; gap: 10px; }
  .newsletter-form button { width: 100%; }

  /* Promo newsletter mobile */
  .promo-newsletter { padding: 32px 24px; }
  .promo-newsletter h3 { font-size: 22px; }
  .promo-newsletter-form { flex-direction: column; }
  .promo-newsletter-form button { width: 100%; }

  /* Footer mobile 1 col */
  .footer { padding: 48px 0 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-payments { flex-wrap: wrap; }

  /* Location section */
  .location-grid { grid-template-columns: 1fr; gap: 24px; }
  .location-map { aspect-ratio: 4/3; }

  /* Mega menu mobile */
  .mega-drawer { width: 100vw; border-radius: 0; }
  .mega-header { padding: 16px 22px; }

  /* Final CTA */
  .final-cta { padding: 36px 22px; margin: 36px auto; }
  .final-cta h2 { font-size: 26px; }
  .final-cta-actions { flex-direction: column; }
  .final-cta-actions .btn { width: 100%; }
}

/* === Mobile small (≤480px) ====================================== */
@media (max-width: 480px) {
  /* Topbar minimale: nasconde heritage, lascia solo CTA dx compatti */
  .topbar-heritage { font-size: 9.5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-cta span { display: none; }   /* solo icone */
  .topbar-cta { padding: 6px; }
  .topbar-cta.phone { background: rgba(234,88,12,0.18); padding: 6px 10px; }
  .topbar-cta.phone span { display: inline; font-size: 11px; font-weight: 700; }

  /* Header logo+menu compatti */
  .menu-btn { padding: 0 10px; height: 42px; }
  .menu-btn span { display: none; }
  .brand-mark { width: 38px; height: 38px; }

  /* Search center */
  .search-center { height: 44px; }
  .search-center button { width: 50px; }
  .search-center input { padding: 0 16px; font-size: 13px; }

  /* Hero slider ancora più compatto */
  .hero-slider { height: 240px; }
  .hero-slide h2 { font-size: 20px; }

  /* Section padding */
  .section { padding: 36px 0; }
  .product-carousel-section { padding: 36px 0; }

  /* Promo grid: tieni 2 col anche su small mobile (richiesta esplicita) */
  .promo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .promo-card-title { font-size: 12px; }
  .promo-card-price .now { font-size: 17px; }

  /* Promo hero h1 più piccolo */
  .promo-hero-minimal h1 { font-size: 36px !important; }

  /* Sticker promo più piccolo */
  .promo-sticker { width: 80px; height: 80px; top: 16px; right: 16px; }
  .promo-sticker .big { font-size: 24px; }
  .promo-sticker .top, .promo-sticker .bot { font-size: 9px; }

  /* Super promo padding */
  .super-promo-left { padding: 22px; }
  .super-promo-left h3 { font-size: 32px; }
  .super-promo-left h3 .accent { font-size: 44px; }

  /* WhatsApp float */
  .whatsapp-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }

  /* Card prodotto pcard ancora più piccoli su small mobile (~1.7 visibili) */
  .product-carousel-track { grid-auto-columns: 60%; gap: 10px; }

  /* USP software form */
  .usp h2 { font-size: 22px; }
}


/* ============================================================
   TECHSERVICE — DAWN OVERRIDES (V1.1)
   Forza font, colori, spacing, card style del V0 sulle sezioni Dawn standard
   ============================================================ */

/* === A1: Inter font ovunque, anche su sezioni Dawn standard === */
body,
.page-width,
.section,
.featured-collection,
.featured-collection h2,
.featured-collection h3,
.multicolumn,
.rich-text,
.image-with-text,
.card,
.card-wrapper,
.card-product,
.card__information,
.card__heading,
.card-information,
.price,
.button,
input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* === A2: Archivo Black per titoli grandi (h1/h2) Dawn === */
.section-header__title,
.collection-hero__title,
.featured-collection h2,
.featured-collection h3,
.rich-text h2,
.rich-text h1,
.section h2.title,
.section .h2,
.section-content h2,
.title-wrapper-with-link h2 {
  font-family: 'Archivo Black', 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary, #0A0A0A) !important;
}

/* === B1: Bottoni primari arancio TechService === */
.button--primary,
button.button--primary,
.product-form__submit,
.shopify-payment-button__button--unbranded,
.featured-collection .card__information a.button,
.button[type="submit"]:not(.btn-wa) {
  --color-button: 234, 88, 12 !important;
  --color-button-text: 255, 255, 255 !important;
  background: #EA580C !important;
  color: #FFFFFF !important;
  border-color: #EA580C !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
.button--primary:hover,
button.button--primary:hover,
.product-form__submit:hover {
  background: #F97316 !important;
  border-color: #F97316 !important;
}

/* Bottone "Vedi tutti" featured-collection */
.featured-collection a.button,
.collection__view-all .button {
  background: #EA580C !important;
  color: #FFFFFF !important;
  border-color: #EA580C !important;
}

/* === B3: Card prodotto Dawn — prezzo barrato rosso + sconto sempre visibile === */
.price__sale .price-item--sale,
.card .price-item--last {
  color: #DC2626 !important;
  font-weight: 700 !important;
  font-size: 17px !important;
}
.price__sale s,
.card s.price-item--regular {
  color: #737373 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
.badge.price__badge-sale,
.card__badge .badge--bottom-left {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

/* === C1+C2: Section padding V0 standard === */
.section,
.featured-collection,
.multicolumn,
.image-with-text,
.collection-list,
.rich-text {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
@media (max-width: 768px) {
  .section,
  .featured-collection,
  .multicolumn,
  .image-with-text,
  .collection-list,
  .rich-text {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* === E1-E4: Card prodotto stile V0 (compatte, brand sopra titolo) === */
.featured-collection .card-wrapper,
.card-product {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.featured-collection .card-wrapper:hover,
.card-product:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.card__information,
.card-information {
  padding: 12px 14px 16px !important;
  font-family: 'Inter', sans-serif !important;
}
.card__heading,
.card-product .card__heading a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #0A0A0A !important;
  font-family: 'Inter', sans-serif !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(1.3em * 2) !important;
  margin-bottom: 6px !important;
}
.card__information .caption-with-letter-spacing {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #EA580C !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

/* === F1: Topbar mobile — nascondi "Diventa rivenditore" su <768px === */
@media (max-width: 768px) {
  .topbar-min-right > a:first-child,
  .topbar-min-right > a:first-child + .sep {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .topbar-min-right a:not(:last-child),
  .topbar-min-right .sep {
    display: none !important;
  }
}

/* === F3: Form preventivo bottoni in colonna su mobile === */
@media (max-width: 768px) {
  .usp-form-actions,
  .quote-form-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .usp-form-actions .btn,
  .usp-form-actions .btn-wa,
  .quote-form-actions .btn,
  .quote-form-actions .btn-wa {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* === F4: Footer responsive 5 → 2 → 1 col === */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 2fr 1fr 1fr !important;
  }
}
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* === F5: WhatsApp float button — sempre visibile basso destra === */
.whatsapp-float {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4) !important;
  transition: transform 0.2s !important;
}
.whatsapp-float:hover {
  transform: scale(1.05) !important;
}
.whatsapp-float svg {
  width: 32px !important;
  height: 32px !important;
}
@media (max-width: 480px) {
  .whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
  .whatsapp-float svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* === Container width consistency === */
.page-width {
  max-width: 1280px !important;
}

/* === Hide Dawn quick-add buttons globally (already disabled but extra safety) === */
.quick-add,
.quick-add-modal {
  display: none !important;
}

/* === Card prodotto preventivo — bordo arancio per indicare === */
.card-product[data-product-tags*="preventivo"],
.card-wrapper[data-product-tags*="preventivo"] {
  outline: 1px solid #EA580C !important;
  outline-offset: 0 !important;
}

/* ============================================================
   TECHSERVICE V1.2 — % sconto rosso + pcard-style card Dawn
   ============================================================ */

/* Badge % sconto rosso (calcolato in card-product.liquid) */
.ts-card-disc {
  display: inline-block;
  background: #DC2626;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 3px 9px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Card prodotto Dawn — layout V0 (brand sopra, titolo, prezzo) */
.card-information {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.card-information > * { order: 5; }
.card-information .caption-with-letter-spacing { order: 1 !important; }
.card-information .card-information__wrapper { order: 5; }
.card-information .card__heading { order: 2 !important; margin-top: 0 !important; margin-bottom: 8px !important; }
.card-information .price,
.card-information .ts-card-disc { order: 3 !important; }
.card-information .price { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Mostra sempre prezzo barrato + nuovo sale style */
.price__regular { display: none !important; }
.price__sale { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.price--on-sale .price__regular { display: none !important; }
.price--on-sale .price__sale { display: flex !important; }

/* Card più compatte */
.card-product .card__inner {
  border-radius: 10px;
  overflow: hidden;
}
.card-product .card__media .media {
  border-radius: 6px;
  background: #FAFAFA;
}

/* Hover lift */
.card-wrapper {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Vendor (brand) sopra titolo, arancio brunito */
.card-information .caption-with-letter-spacing {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #EA580C !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}

/* Titolo card */
.card__heading,
.card__heading a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #0A0A0A !important;
  text-decoration: none !important;
}

/* ============================================================
   TECHSERVICE V1.4 — Fix dettagli carousel + form + reviews mobile
   ============================================================ */

/* 1. NASCONDI VENDOR ARANCIO ("TECHSERVICE") sotto le card carousel */
.featured-collection .card-information .caption-with-letter-spacing,
.featured-collection .caption-with-letter-spacing,
.card__information .caption-with-letter-spacing,
.card-information__wrapper .caption-with-letter-spacing {
  display: none !important;
}

/* 2. NASCONDI BADGE -X% rosso (rimosso da Liquid, ma extra safety) */
.ts-card-disc,
.badge.price__badge-sale {
  display: none !important;
}

/* 3. CARD WORKSHOP-STYLE — box bianchi puliti, foto centrata, padding uniforme */
.featured-collection .card-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}
.featured-collection .card-wrapper:hover {
  border-color: #EA580C !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Foto card carousel: aspect-ratio uniforme 1:1 + object-fit contain (no immagini grandi/piccole alternate) */
.featured-collection .card__media,
.featured-collection .card__inner .media,
.featured-collection .card__media .media {
  aspect-ratio: 1 / 1 !important;
  background: #FAFAFA !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.featured-collection .card__media img,
.featured-collection .card__inner img,
.featured-collection .media img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8% !important;
}

/* Card content padding */
.featured-collection .card__content,
.featured-collection .card-information {
  padding: 12px 14px 14px !important;
}

/* Titolo card */
.featured-collection .card__heading,
.featured-collection .card__heading a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #0A0A0A !important;
  margin: 0 0 6px 0 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}

/* Prezzo */
.featured-collection .price {
  font-family: 'Inter', sans-serif !important;
}
.featured-collection .price-item--sale,
.featured-collection .price-item--last {
  color: #DC2626 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.featured-collection .price-item--regular,
.featured-collection s {
  color: #737373 !important;
  font-size: 12px !important;
  text-decoration: line-through !important;
}

/* 4. BOTTONE WHATSAPP DIRETTO per prodotti preventivo */
.ts-quote-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: background 0.2s !important;
  box-shadow: 0 1px 3px rgba(37,211,102,0.3) !important;
}
.ts-quote-card-cta:hover {
  background: #128C7E !important;
  color: #FFFFFF !important;
}
.ts-quote-card-cta svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* 5. SUPER PROMO MOBILE — 2 card visibili (48% width) */
@media (max-width: 768px) {
  .super-promo-right .product-carousel-track,
  .super-promo .product-carousel-track,
  #carousel-superpromo,
  [id^="carousel-superpromo"] {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 48% !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
  }
  .super-promo-right .pcard,
  .super-promo .pcard {
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }
}

/* Featured-collection carousel mobile: slider Dawn → 2 col visibili */
@media (max-width: 768px) {
  .featured-collection .slider--mobile,
  .featured-collection .grid--peek {
    grid-template-columns: repeat(2, calc(50% - 6px)) !important;
    gap: 12px !important;
  }
  .featured-collection .grid__item {
    width: 100% !important;
  }
}

/* 6. REVIEWS MARQUEE STATS — meglio su mobile */
.reviews-meta {
  display: grid !important;
  gap: 24px !important;
}
@media (min-width: 769px) {
  .reviews-meta {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .reviews-meta {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
  .review-stat {
    text-align: center !important;
  }
  .review-stat .n {
    font-size: 26px !important;
    line-height: 1 !important;
  }
  .review-stat .l {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
  }
}
@media (max-width: 480px) {
  .reviews-meta {
    gap: 14px 12px !important;
  }
  .review-stat .n {
    font-size: 22px !important;
  }
}

/* 7. NASCONDI PREZZO PLACEHOLDER su prodotti preventivo (rimosso da price.liquid ma extra safety) */
.price.price--quote,
.ts-quote-price-label {
  display: none !important;
}

/* 8. FORM PREVENTIVO V0 - assicura font + colors corretti */
.usp,
.usp-form,
.quote-form-section,
.quote-form-standalone {
  font-family: 'Inter', sans-serif !important;
}
.usp h2,
.usp-head h2,
.quote-form-section h2 {
  font-family: 'Archivo Black', sans-serif !important;
  font-weight: 900 !important;
}
.usp h2 em.serif,
.quote-form-section em.serif {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.usp-form input,
.usp-form textarea,
.quote-form-standalone input,
.quote-form-standalone textarea {
  font-family: 'Inter', sans-serif !important;
  border: 1.5px solid #E5E5E5 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
}
.usp-form input:focus,
.usp-form textarea:focus {
  border-color: #EA580C !important;
  outline: none !important;
}
.usp-form .btn-primary,
.btn-primary {
  background: #EA580C !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
}
.btn-wa {
  background: #25D366 !important;
  color: #FFFFFF !important;
}

/* ============================================================
   TECHSERVICE V1.5 — Fix uniformità card, bottone WA, form mobile
   ============================================================ */

/* 1. CARD UNIFORM HEIGHT — tutte le card carousel stessa altezza */
.featured-collection .slider,
.featured-collection .grid,
.featured-collection .grid--peek {
  align-items: stretch !important;
}
.featured-collection .grid__item,
.featured-collection .slider__slide {
  display: flex !important;
  height: auto !important;
}
.featured-collection .card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}
.featured-collection .card-wrapper .card,
.featured-collection .card-product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
}
.featured-collection .card__inner {
  flex-shrink: 0 !important;
}
.featured-collection .card__content,
.featured-collection .card__information,
.featured-collection .card-information {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 2. BOTTONE WHATSAPP — push to bottom, contenuto dentro card */
.ts-quote-card-cta {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* 3. ASPECT RATIO UNIFORME FOTO — forza 1:1 ovunque */
.featured-collection .card__media,
.featured-collection .card__inner .media,
.featured-collection .ratio,
.featured-collection .ratio--portrait,
.featured-collection .ratio--landscape,
.featured-collection .ratio--square,
.featured-collection .ratio--adapt {
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
}
.featured-collection .card__media img,
.featured-collection .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 10% !important;
  box-sizing: border-box !important;
  background: #FAFAFA !important;
}

/* 4. FORM MOBILE — label+input stack verticale su mobile + textarea grande */
.usp-form .field,
.quote-form-standalone .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}
.usp-form label,
.quote-form-standalone label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #A3A3A3 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.usp-form input[type="text"],
.usp-form input[type="email"],
.usp-form input[type="tel"],
.usp-form textarea,
.quote-form-standalone input,
.quote-form-standalone textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}
.usp-form input::placeholder,
.usp-form textarea::placeholder,
.quote-form-standalone input::placeholder,
.quote-form-standalone textarea::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.usp-form input:focus,
.usp-form textarea:focus,
.quote-form-standalone input:focus,
.quote-form-standalone textarea:focus {
  border-color: #EA580C !important;
  background: rgba(255,255,255,0.06) !important;
  outline: none !important;
}
.usp-form textarea,
.quote-form-standalone textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

/* 5. BADGE V0 STYLE — "In offerta" arancio TechService, "Esaurito" grigio */
.card__badge .badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: none !important;
}
.badge.price__badge-sale {
  background: #EA580C !important;
  color: #FFFFFF !important;
}
.badge.price__badge-sold-out {
  background: #404040 !important;
  color: #FFFFFF !important;
}

/* 6. PADDING CARD INTERNO — leggermente più compatto */
.featured-collection .card-wrapper {
  padding: 0 !important;
}
.featured-collection .card__content {
  padding: 12px 14px 14px !important;
}

/* 7. FIX SUPER PROMO MOBILE — 2 card visibili (refresh) */
@media (max-width: 768px) {
  .super-promo-right .product-carousel-track {
    grid-auto-columns: 48% !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
  }
  .super-promo .pcard {
    min-width: 0 !important;
  }
}

/* 8. FORM ACTIONS LAYOUT — bottoni stack mobile */
.usp-form-actions,
.quote-form-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
@media (min-width: 769px) {
  .usp-form-actions,
  .quote-form-actions {
    flex-direction: row !important;
  }
  .usp-form-actions .btn,
  .usp-form-actions .btn-wa,
  .quote-form-actions .btn,
  .quote-form-actions .btn-wa {
    flex: 1 !important;
  }
}
@media (max-width: 768px) {
  .usp-form-actions,
  .quote-form-actions {
    flex-direction: column !important;
  }
}

/* 9. CARD TITOLO — max 2 righe + ellipsis */
.featured-collection .card__heading,
.featured-collection .card__heading a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 2.7em !important;
  max-height: 2.7em !important;
}

/* ============================================================
   TECHSERVICE V1.6 — Featured-collection ora renderizza pcard V0
   ============================================================ */

/* Reset Dawn card styles dentro featured-collection (visto che ora c'è pcard) */
.featured-collection .grid__item {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
}
.featured-collection .grid__item .pcard {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Grid pcard nei featured-collection */
.featured-collection .grid--3-col-tablet,
.featured-collection .grid--4-col-desktop {
  gap: 14px !important;
}

/* Mobile: 2 col uniform */
@media (max-width: 768px) {
  .featured-collection .grid--1-col,
  .featured-collection .grid--2-col-tablet-down {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Pcard dentro carousel — forza min-height uniforme */
.featured-collection .pcard {
  min-height: 320px !important;
}
@media (max-width: 768px) {
  .featured-collection .pcard {
    min-height: 280px !important;
  }
}

/* ============================================================
   TECHSERVICE V1.7 — Currency, app block, super promo, vendor, scrollbar
   ============================================================ */

/* 1. NASCONDI "EUR" currency code residuo (extra safety se settings non bastasse) */
.price-item--currencies-disabled .price-item-currency,
.price .currency-code,
.cart-item__currency-code {
  display: none !important;
}

/* 2. NASCONDI APPS BLOCK BIANCO sotto header (extra safety) */
.shopify-section[id*="apps_block"],
.shopify-section[id*="__apps"] {
  display: none !important;
}

/* 3. SUPER PROMO — togli badge giallo "SUPER PROMO!" dentro pcard (rimosso da Liquid ma extra safety) */
.pcard-superpromo {
  display: none !important;
}

/* Super Promo mobile V3.4 — 2 card piene + peek 3a card per suggerire scroll
   (45% = card solo 3-4% più strette di V3.2, peek ~27-50px ben visibile) */
@media (max-width: 768px) {
  .super-promo-right .product-carousel-track,
  #carousel-superpromo,
  [id^="carousel-superpromo"] {
    grid-auto-columns: 45% !important;
    gap: 10px !important;
  }
}

/* ============================================================
   TECHSERVICE V3.8 — ROLLBACK (ha rotto collection mobile)
   Sostituito da V3.9 mirato sotto.
   ============================================================ */
/* DISABLED V3.8 (rollback - causava titolo duplicato + card 1-col mobile)

/* Grid item come flex container per altezza uniforme */
.collection .product-grid .grid__item,
.product-grid .grid__item,
.collection-list .grid__item {
  display: flex !important;
}

/* Card wrapper riempie tutto altezza disponibile */
.collection .card-wrapper,
.product-grid .card-wrapper,
.collection .card-wrapper > .card,
.product-grid .card-wrapper > .card {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Inner content + information flex column */
.collection .card__inner,
.product-grid .card__inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.collection .card__content,
.product-grid .card__content,
.collection .card__information,
.product-grid .card__information {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Immagine: aspect-ratio fisso 1/1 (no più altezze inconsistenti) */
.collection .card__media,
.product-grid .card__media,
.collection .card .media,
.product-grid .card .media,
.collection .card__inner .media,
.product-grid .card__inner .media {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.collection .card__media img,
.product-grid .card__media img,
.collection .card .media img,
.product-grid .card .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6% !important;
}

/* Titolo: 2 righe max con min-height costante (no più troncamenti casuali) */
.collection .card__heading,
.product-grid .card__heading,
.collection .card-information .card__heading,
.product-grid .card-information .card__heading {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(2 * 1.35em) !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #1F1F1F !important;
}
.collection .card__heading a,
.product-grid .card__heading a {
  text-decoration: none !important;
  color: inherit !important;
}

/* Bottone "Preventivo WhatsApp" / Aggiungi al carrello: in BASSO uniforme */
.collection .card__inner .product-form,
.product-grid .card__inner .product-form,
.collection .card__content .product-form,
.product-grid .card__content .product-form,
.collection .card__inner .quick-add,
.product-grid .card__inner .quick-add,
.collection [class*="buy-buttons"],
.product-grid [class*="buy-buttons"] {
  margin-top: auto !important;
}

/* MOBILE: card compatte + bottone WA leggibile ma non gigantesco */
@media (max-width: 768px) {
  .collection .product-grid,
  .product-grid {
    gap: 10px !important;
  }
  .collection .product-grid .grid__item,
  .product-grid .grid__item {
    padding: 0 !important;
  }
  .collection .card-wrapper,
  .product-grid .card-wrapper {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 10px !important;
    box-shadow: 0 1px 0 #EAEAEA, 0 4px 12px rgba(0,0,0,0.04) !important;
  }

  /* Title mobile più piccolo */
  .collection .card__heading,
  .product-grid .card__heading {
    font-size: 12px !important;
    line-height: 1.3 !important;
    min-height: calc(2 * 1.3em) !important;
    margin-bottom: 8px !important;
  }

  /* Bottone Preventivo WhatsApp: compatto ma cliccabile */
  .collection .product-form__buttons .product-form__submit,
  .product-grid .product-form__buttons .product-form__submit,
  .collection [class*="whatsapp"] a,
  .collection a[href*="wa.me"],
  .product-grid a[href*="wa.me"],
  .collection .btn-whatsapp,
  .product-grid .btn-whatsapp {
    padding: 9px 8px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    min-height: 40px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .collection a[href*="wa.me"] svg,
  .product-grid a[href*="wa.me"] svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Immagine card mobile padding ridotto */
  .collection .card__media img,
  .product-grid .card__media img {
    padding: 4% !important;
  }

  /* Brand / vendor display compatto */
  .collection .card-information .caption-with-letter-spacing,
  .product-grid .card-information .caption-with-letter-spacing,
  .collection .card__vendor,
  .product-grid .card__vendor {
    font-size: 10px !important;
    color: #1F1F1F !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  /* Prezzo (per prodotti normali, non quote) */
  .collection .price,
  .product-grid .price {
    font-size: 14px !important;
  }
  .collection .price__regular .price-item,
  .product-grid .price__regular .price-item {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1F1F1F !important;
  }
  .collection .price__sale .price-item--regular,
  .product-grid .price__sale .price-item--regular {
    font-size: 11px !important;
    color: #A3A3A3 !important;
  }
}
END V3.8 ROLLBACK */

/* ============================================================
   TECHSERVICE V3.9 — Fix mobile: forza grid 2 col su carousel home + collection
   Bug originale: Dawn `.slider` ha display:flex su mobile quando
   enable_desktop_slider=true, facendo diventare le card 1-col scrollabili
   invece di 2-col grid (che era l'intent di swipe_on_mobile=false in V3.1).
   ============================================================ */

@media (max-width: 768px) {
  /* HOMEPAGE: slider-component wrapper resta BLOCK (NO grid annidato — era il bug card 86px) */
  .featured-collection slider-component,
  .ts-featured-collection slider-component,
  .featured-collection .slider-component-desktop,
  .ts-featured-collection .slider-component-desktop {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* Solo l'UL interno (.slider / .product-grid) è grid 2 col */
  .featured-collection .slider,
  .featured-collection ul.product-grid,
  .ts-featured-collection .slider,
  .ts-featured-collection ul.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }
  .featured-collection .grid__item,
  .featured-collection .slider__slide,
  .featured-collection ul.product-grid > li,
  .ts-featured-collection .grid__item {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    scroll-snap-align: none !important;
  }

  /* COLLECTION page: main-collection-product-grid → grid 2 col fisso mobile */
  .collection .product-grid,
  .collection ul.product-grid,
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .collection .product-grid > li,
  .collection ul.product-grid > li,
  .product-grid > li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Card padding compatto mobile (senza rompere strutture Dawn) */
  .collection .card-wrapper,
  .product-grid .card-wrapper {
    background: #FFFFFF !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* Bottone Preventivo WhatsApp compatto su mobile (no più gigantesco) */
  .collection a[href*="wa.me"],
  .product-grid a[href*="wa.me"],
  .featured-collection a[href*="wa.me"] {
    padding: 8px 6px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    min-height: 38px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
  }
  .collection a[href*="wa.me"] svg,
  .product-grid a[href*="wa.me"] svg,
  .featured-collection a[href*="wa.me"] svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   TECHSERVICE V4.0 — FORCE mobile grid 2 col con MAX specificity
   Cliente ha confermato V3.9 caricato ma bug persiste (forse cache
   CDN customizer o specificity Dawn troppo alta). V4.0 usa selettori
   con html body + tag prefix per garantire override su qualsiasi
   selettore Dawn più specifico.
   ============================================================ */

@media (max-width: 768px) {
  /* ─── HOMEPAGE: slider-component wrapper resta BLOCK (NO grid annidato!) ─── */
  html body .shopify-section .ts-featured-collection slider-component,
  html body slider-component.page-width-desktop,
  html body slider-component.slider-mobile-gutter,
  html body .featured-collection slider-component {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Solo gli UL interni (.slider / .product-grid / .grid) sono grid 2 col */
  html body .shopify-section .ts-featured-collection .slider,
  html body .shopify-section .ts-featured-collection ul.slider,
  html body .shopify-section .ts-featured-collection ul.product-grid,
  html body .shopify-section .ts-featured-collection ul.grid,
  html body .featured-collection ul.slider,
  html body .featured-collection ul.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reset slider variant classes che fanno display:flex su desktop ma su mobile creano problemi */
  html body .ts-featured-collection .slider.slider--desktop,
  html body .ts-featured-collection .slider.slider--tablet,
  html body .ts-featured-collection ul.grid.slider {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  /* Grid item: reset width che Dawn imposta via .slider--desktop.grid--Xcol */
  html body .ts-featured-collection .grid__item,
  html body .ts-featured-collection .slider__slide,
  html body .ts-featured-collection ul > li,
  html body .featured-collection .grid__item,
  html body .featured-collection .slider__slide,
  html body .featured-collection ul > li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    scroll-snap-align: none !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Pseudo-element :after del .slider--desktop che aggiunge padding finto: nascondi */
  html body .ts-featured-collection .slider--desktop:after,
  html body .ts-featured-collection .slider--tablet:after,
  html body .featured-collection .slider--desktop:after,
  html body .featured-collection .slider--tablet:after {
    display: none !important;
    content: none !important;
  }

  /* Frecce slider sotto carousel: nascondi su mobile (no scroll quindi inutili) */
  html body .ts-featured-collection .slider-buttons,
  html body .featured-collection .slider-buttons {
    display: none !important;
  }

  /* ─── COLLECTION page: main-collection-product-grid → grid 2 col fisso ─── */
  html body .shopify-section .collection .product-grid,
  html body .shopify-section .collection ul.product-grid,
  html body .shopify-section .collection ul.grid,
  html body main .collection .product-grid,
  html body main ul.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  html body .shopify-section .collection .product-grid > li,
  html body .shopify-section .collection ul.product-grid > li,
  html body main .collection .product-grid > li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ─── Failsafe ultimo livello: forza grid su QUALSIASI .product-grid mobile ─── */
  ul.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   TECHSERVICE V4.1 — Fix titolo duplicato + card uniformi collection
   Dawn card-product.liquid ha 2 .card__content (overlay + standard):
   nascondi quello overlay dentro .card__inner, mantieni quello sotto.
   Inoltre uniforma aspect-ratio immagine + altezze card desktop+mobile.
   ============================================================ */

/* 1. Nascondi titolo overlay duplicato (dentro .card__inner) ─ desktop + mobile */
html body .card-wrapper .card .card__inner > .card__content,
html body .collection .card-wrapper .card__inner .card__content,
html body .product-grid .card-wrapper .card__inner .card__content {
  display: none !important;
}

/* Lascia visibile il .card__content che è SIBLING del .card__inner (titolo standard sotto) */
html body .card-wrapper .card > .card__content,
html body .collection .card-wrapper > .card > .card__content,
html body .collection .card-wrapper .card-information {
  display: flex !important;
  flex-direction: column !important;
}

/* 2. Card uniformi: aspect-ratio quadrato immagine + altezze card */
html body .collection .card-wrapper,
html body .product-grid .card-wrapper {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .collection .card-wrapper > .card,
html body .product-grid .card-wrapper > .card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .collection .card-wrapper .card__inner,
html body .product-grid .card-wrapper .card__inner {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}
html body .collection .card-wrapper .card__media,
html body .product-grid .card-wrapper .card__media {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
html body .collection .card-wrapper .card__media img,
html body .product-grid .card-wrapper .card__media img,
html body .collection .card-wrapper .card .media img,
html body .product-grid .card-wrapper .card .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8% !important;
}

/* 3. Card content flex 1 per occupare spazio rimanente */
html body .collection .card-wrapper > .card > .card__content,
html body .product-grid .card-wrapper > .card > .card__content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
}
html body .collection .card-wrapper .card-information,
html body .product-grid .card-wrapper .card-information {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 4. Titolo card (quello GIUSTO, sotto): 2 righe max con min-height fisso */
html body .collection .card-wrapper .card-information .card__heading,
html body .product-grid .card-wrapper .card-information .card__heading {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: calc(2 * 1.35em) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #1F1F1F !important;
  margin: 0 0 8px !important;
}

/* 5. Bottone Preventivo WhatsApp: in BASSO uniforme + larghezza piena */
html body .collection .card-wrapper .product-form,
html body .product-grid .card-wrapper .product-form,
html body .collection .card-wrapper [class*="buy-buttons"],
html body .product-grid .card-wrapper [class*="buy-buttons"],
html body .collection .card-wrapper a[href*="wa.me"],
html body .product-grid .card-wrapper a[href*="wa.me"] {
  margin-top: auto !important;
}

/* MOBILE: dimensioni più compatte */
@media (max-width: 768px) {
  html body .collection .card-wrapper .card-information .card__heading,
  html body .product-grid .card-wrapper .card-information .card__heading {
    font-size: 12px !important;
    min-height: calc(2 * 1.3em) !important;
    line-height: 1.3 !important;
  }
  html body .collection .card-wrapper > .card > .card__content,
  html body .product-grid .card-wrapper > .card > .card__content {
    padding: 8px !important;
  }
  html body .collection .card-wrapper .card__media img,
  html body .product-grid .card-wrapper .card__media img {
    padding: 5% !important;
  }
}

/* 4. VENDOR — il Liquid (product-card-pcard) ora estrae brand dal titolo
   se vendor è "Techservice". Nascondo solo Dawn vendor caption duplicata. */
.featured-collection .card-information .caption-with-letter-spacing {
  display: none !important;
}
/* Hide brand element se vuoto */
.featured-collection .pcard-brand:empty {
  display: none !important;
}

/* 5. CONTATORE "1/7" Dawn slider — nascondi, lascia solo frecce */
.slider-counter,
.slider-counter--current,
.slider-counter--total,
.slider-counter__link {
  display: none !important;
}

/* Frecce Dawn slider stile V0 carousel-arrow */
.slider-buttons,
.slider-button-group {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding-right: 8px !important;
}
.slider-button {
  width: 38px !important;
  height: 38px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E5E5E5 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.slider-button:hover {
  border-color: #EA580C !important;
  background: #EA580C !important;
  color: #FFFFFF !important;
}
.slider-button:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* Scrollbar custom sotto carousel (alternativa al counter) */
.featured-collection .slider {
  scrollbar-width: thin !important;
  scrollbar-color: #EA580C #FAFAFA !important;
}
.featured-collection .slider::-webkit-scrollbar {
  height: 4px !important;
  display: block !important;
}
.featured-collection .slider::-webkit-scrollbar-track {
  background: #FAFAFA !important;
  border-radius: 2px !important;
}
.featured-collection .slider::-webkit-scrollbar-thumb {
  background: #EA580C !important;
  border-radius: 2px !important;
}

/* 6. SPAZIATURA RIDOTTA tra le sezioni carousel (Utensileria, Diagnostica, A/C) */
.featured-collection {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
@media (max-width: 768px) {
  .featured-collection {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* Titolo featured-collection più stretto */
.featured-collection .title-wrapper,
.featured-collection .title-wrapper-with-link {
  margin-bottom: 16px !important;
}

/* ============================================================
   TECHSERVICE V1.8 — Carousel V0 styling final
   ============================================================ */

/* 1. PLACEHOLDER VUOTO — SVG inline neutro (no T-shirt rosa) */
.pcard-placeholder-empty {
  width: 100%;
  aspect-ratio: 1;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* 2. FRECCE CAROUSEL Dawn → stile V0 chevron piccoli */
.featured-collection .slider-buttons,
.featured-collection slider-component .slider-button-group {
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  margin-top: 12px !important;
  padding-right: 16px !important;
}
.featured-collection .slider-button {
  width: 34px !important;
  height: 34px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  color: #1F1F1F !important;
}
.featured-collection .slider-button:hover:not(:disabled) {
  background: #1F1F1F !important;
  border-color: #1F1F1F !important;
  color: #FFFFFF !important;
  transform: scale(1.05) !important;
}
.featured-collection .slider-button:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
}
.featured-collection .slider-button svg {
  width: 16px !important;
  height: 16px !important;
}

/* 3. BOTTONE "VISUALIZZA TUTTO" Dawn → link "Vai ai prodotti →" stile V0 in alto */
.featured-collection .collection__view-all,
.featured-collection .center {
  text-align: right !important;
  margin-top: 0 !important;
  position: absolute !important;
  top: 40px !important;
  right: 16px !important;
}
.featured-collection .collection__view-all .button,
.featured-collection .center .button {
  background: transparent !important;
  border: none !important;
  color: #EA580C !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
}
.featured-collection .collection__view-all .button:hover,
.featured-collection .center .button:hover {
  color: #F97316 !important;
  text-decoration: underline !important;
}
/* Dawn link al hover */
.featured-collection .collection__view-all .button::after,
.featured-collection .center .button::after {
  content: " →" !important;
}

/* Riposizionamento titolo carousel head */
.featured-collection .title-wrapper-with-link,
.featured-collection .title-wrapper {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 20px !important;
}

/* 4. TITOLO CARD CASE — preserve normal case */
.pcard-title,
.featured-collection .pcard-title {
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #0A0A0A !important;
  letter-spacing: 0 !important;
}

/* 5. BRAND ARANCIO sopra titolo */
.pcard-brand,
.featured-collection .pcard-brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #EA580C !important;
  margin-bottom: 4px !important;
}

/* 6. PCARD container — boxs puliti */
.pcard {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.15s ease !important;
  height: 100% !important;
}
.pcard:hover {
  border-color: #EA580C !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.pcard-imgwrap {
  background: #FAFAFA !important;
  border-radius: 6px !important;
  aspect-ratio: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.pcard-imgwrap img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8% !important;
  box-sizing: border-box !important;
}

/* 7. PCARD-QUOTE (preventivo): label + bottone WhatsApp verde */
.pcard-quote-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #404040 !important;
  margin-bottom: 10px !important;
  margin-top: auto !important;
}
.pcard-quote-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.pcard-quote-cta:hover {
  background: #128C7E !important;
}
.pcard-quote-cta svg {
  width: 16px !important;
  height: 16px !important;
}

/* 8. PCARD-PRICE-ROW (normale): prezzo barrato + prezzo + sconto -X% */
.pcard-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  flex-wrap: wrap !important;
}
.pcard-price-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.pcard-was {
  font-size: 12px !important;
  color: #737373 !important;
  text-decoration: line-through !important;
  font-family: 'Inter', sans-serif !important;
}
.pcard-now {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #DC2626 !important;
  font-family: 'Inter', sans-serif !important;
}
.pcard-disc {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #DC2626 !important;
  letter-spacing: -0.01em !important;
}

/* 9. PCARD title 2 righe + ellipsis */
.pcard-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  margin-bottom: 12px !important;
}

/* 10. Slider mobile: gap migliore */
@media (max-width: 768px) {
  .featured-collection .slider {
    gap: 10px !important;
  }
  .pcard {
    padding: 12px !important;
  }
}

/* ============================================================
   TECHSERVICE V2.0 — Card carousel home stile Workshop minimal + fix mobile
   Obiettivo: card pulite, niente lift hover aggressivo, niente min-height
   forzato, immagine senza padding interno, bottone WA compatto su mobile,
   nessun taglio sotto (overflow visible sui parent slider).
   ============================================================ */

/* 1. RESET min-height/height forzati che gonfiavano la card su mobile */
.featured-collection .pcard,
.pcard {
  min-height: 0 !important;
  height: auto !important;
}

/* 2. Card minimal: border sottile, no shadow di base, transition pulita */
.pcard {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.pcard:hover {
  transform: none !important;
  border-color: #1F1F1F !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 3. Immagine: aspect-ratio quadrato pulito, niente padding 8% interno */
.pcard-imgwrap {
  background: #FFFFFF !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.pcard-imgwrap img {
  padding: 4% !important;
}

/* 4. Brand chip compatto */
.pcard-brand,
.featured-collection .pcard-brand {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 4px !important;
}

/* 5. Title: 2 righe max, niente min-height riservato */
.pcard-title,
.featured-collection .pcard-title {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  min-height: 0 !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

/* 6. Prezzo compatto, sconto pulito */
.pcard-now { font-size: 17px !important; }
.pcard-was { font-size: 11px !important; }
.pcard-disc {
  font-size: 12px !important;
  padding: 2px 6px !important;
  background: #FEE2E2 !important;
  border-radius: 4px !important;
  color: #DC2626 !important;
}
.pcard-price-row { gap: 6px !important; }

/* 7. Bottone WhatsApp preventivo compatto */
.pcard-quote-cta {
  padding: 8px 10px !important;
  font-size: 11.5px !important;
  gap: 6px !important;
}
.pcard-quote-cta svg { width: 14px !important; height: 14px !important; }
.pcard-quote-label {
  font-size: 9.5px !important;
  margin-bottom: 8px !important;
}

/* 8. FIX taglio sotto: overflow visible sui parent del carousel,
   pad-bottom maggiore alla section per dare respiro a frecce + ombra hover */
.featured-collection,
.featured-collection .collection,
.featured-collection slider-component,
.featured-collection .slider,
.featured-collection ul.slider {
  overflow: visible !important;
}
.featured-collection .slider-mobile-gutter {
  overflow: visible !important;
}

/* 9. MOBILE: card davvero compatte, niente più "troppo alte" */
@media (max-width: 768px) {
  .featured-collection .pcard,
  .pcard {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px !important;
    border-radius: 6px !important;
  }
  .pcard-imgwrap { margin-bottom: 8px !important; }
  .pcard-imgwrap img { padding: 2% !important; }
  .pcard-brand,
  .featured-collection .pcard-brand {
    font-size: 9.5px !important;
    margin-bottom: 3px !important;
  }
  .pcard-title,
  .featured-collection .pcard-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    min-height: 0 !important;
  }
  .pcard-now { font-size: 15px !important; }
  .pcard-was { font-size: 10.5px !important; }
  .pcard-disc { font-size: 11px !important; padding: 1px 5px !important; }
  .pcard-price-row { gap: 4px !important; }

  /* Bottone WhatsApp ancora più compatto mobile */
  .pcard-quote-cta {
    padding: 7px 8px !important;
    font-size: 10.5px !important;
    gap: 5px !important;
  }
  .pcard-quote-cta svg { width: 12px !important; height: 12px !important; }
  .pcard-quote-label {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  /* Padding-bottom maggiore per evitare taglio frecce/ombra hover */
  .shopify-section .featured-collection,
  .featured-collection .section-padding {
    padding-bottom: 32px !important;
  }

  /* Frecce slider mobile più piccole + spazio */
  .slider-buttons {
    margin-top: 12px !important;
    padding-bottom: 8px !important;
  }
  .slider-button {
    width: 34px !important;
    height: 34px !important;
  }
}

/* ============================================================
   TECHSERVICE V2.1 — Match V0 carousel home identico
   Stile: brand NERO bold, no border, radius 14px, badge sconto
   solo testo rosso, scrollbar visibile, prezzo NOW nero,
   container più largo, 5-6 card visibili.
   ============================================================ */

/* 1. BRAND chip NERO bold Inter (era arancione monospace) */
.pcard-brand,
.featured-collection .pcard-brand {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #1F1F1F !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.pcard-brand.in-promo {
  color: #DC2626 !important;
}

/* 2. CARD senza border, radius più rotondo (14px), ombra leggera */
.pcard,
.featured-collection .pcard {
  background: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 1px 0 #EAEAEA, 0 6px 20px rgba(0,0,0,0.04) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.pcard:hover,
.featured-collection .pcard:hover {
  transform: translateY(-3px) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 0 #DDD, 0 12px 30px rgba(0,0,0,0.08) !important;
}

/* 3. BADGE SCONTO solo testo rosso (era pillola #FEE2E2) */
.pcard-disc {
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #DC2626 !important;
  border-radius: 0 !important;
  letter-spacing: -0.01em !important;
}

/* 4. PREZZO NOW grande NERO (V0 enfatizza prezzo nero + sconto rosso a parte) */
.pcard-now {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1F1F1F !important;
  letter-spacing: -0.01em !important;
  font-family: 'Inter', sans-serif !important;
}
.pcard-was {
  font-size: 13px !important;
  color: #A3A3A3 !important;
  text-decoration: line-through !important;
  font-family: 'Inter', sans-serif !important;
}

/* 5. TITLE 3 righe come V0, Inter weight 500 */
.pcard-title,
.featured-collection .pcard-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #1F1F1F !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  margin-bottom: 14px !important;
}

/* 6. CONTAINER più ampio per i carousel home (V0 ha margini piccoli) */
.featured-collection .page-width {
  max-width: 1400px !important;
}

/* 7. SCROLLBAR orizzontale visibile sotto slider (stile V0) */
.featured-collection .slider {
  scrollbar-width: thin !important;
  scrollbar-color: #D4D4D4 transparent !important;
  padding-bottom: 14px !important;
}
.featured-collection .slider::-webkit-scrollbar {
  height: 5px !important;
  display: block !important;
}
.featured-collection .slider::-webkit-scrollbar-track {
  background: #FAFAFA !important;
  border-radius: 999px !important;
}
.featured-collection .slider::-webkit-scrollbar-thumb {
  background: #D4D4D4 !important;
  border-radius: 999px !important;
}
.featured-collection .slider::-webkit-scrollbar-thumb:hover {
  background: #A3A3A3 !important;
}

/* 8. FRECCE slider entrambe visibili (anche prev quando a inizio scroll) */
.featured-collection .slider-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-right: 8px !important;
}
.featured-collection .slider-button {
  width: 40px !important;
  height: 40px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E5E5E5 !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}
.featured-collection .slider-button:hover:not(:disabled) {
  border-color: #EA580C !important;
  background: #EA580C !important;
  color: #FFFFFF !important;
}
.featured-collection .slider-button:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* 9. PRICE ROW allineamento V0 (was+now stack sx, disc a dx) */
.pcard-price-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  flex-wrap: nowrap !important;
}

/* 10. IMG wrap V0: bianco pulito, no padding 8% */
.pcard-imgwrap {
  background: #FFFFFF !important;
  border-radius: 6px !important;
  margin-bottom: 14px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.pcard-imgwrap img {
  padding: 6% !important;
  object-fit: contain !important;
}

/* 11. MOBILE — riadattamento card V0 mobile */
@media (max-width: 768px) {
  .pcard,
  .featured-collection .pcard {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .pcard-brand,
  .featured-collection .pcard-brand {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #1F1F1F !important;
    margin-bottom: 4px !important;
  }
  .pcard-title,
  .featured-collection .pcard-title {
    font-size: 12.5px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    margin-bottom: 10px !important;
  }
  .pcard-now { font-size: 17px !important; color: #1F1F1F !important; }
  .pcard-was { font-size: 11.5px !important; }
  .pcard-disc { font-size: 12.5px !important; padding: 0 !important; background: transparent !important; }
  .pcard-imgwrap { margin-bottom: 10px !important; }
  .pcard-imgwrap img { padding: 4% !important; }

  /* Container più ampio anche mobile */
  .featured-collection .page-width {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Scrollbar mobile più sottile */
  .featured-collection .slider::-webkit-scrollbar {
    height: 3px !important;
  }
}

/* ============================================================
   TECHSERVICE V2.2 — Match WorkshopItaly identico
   1. Titolo carousel piccolo Inter (no più Archivo Black gigante)
   2. Container quasi full-width, padding laterale ridotto
   3. 6 card visibili invece di 5 (impostato in index.json)
   ============================================================ */

/* 1. CONTAINER: max-width più ampio + padding laterale stile WorkshopItaly */
.shopify-section .featured-collection,
.featured-collection .page-width,
.featured-collection .collection__title.page-width {
  max-width: 1500px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Slider deve estendersi nello stesso container */
.featured-collection slider-component.page-width,
.featured-collection .slider-mobile-gutter.page-width-desktop {
  max-width: 1500px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 2. TITOLO CAROUSEL piccolo Inter (era Archivo Black gigante in h1) */
.featured-collection .collection__title h2,
.featured-collection .collection__title .title,
.featured-collection .title.inline-richtext,
.featured-collection h2.title {
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: #1F1F1F !important;
  line-height: 1.3 !important;
  margin: 0 0 18px !important;
  text-transform: none !important;
}

/* Bypass override Dawn heading-size h1/h0/hxl/hxxl per i carousel */
.featured-collection .h0,
.featured-collection .h1,
.featured-collection .hxl,
.featured-collection .hxxl {
  font-size: 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* Title wrapper più compatto */
.featured-collection .collection__title.title-wrapper {
  margin-bottom: 14px !important;
  padding-top: 0 !important;
}

/* 3. CARD un filo più strette per stare in 6 colonne */
.featured-collection .grid--6-col-desktop > .grid__item {
  width: calc(16.66% - 12px) !important;
}

/* 4. GAP tra card stretto come WorkshopItaly */
.featured-collection .slider,
.featured-collection .grid--6-col-desktop {
  gap: 14px !important;
}

/* 5. MOBILE: titolo ancora più piccolo + container full */
@media (max-width: 768px) {
  .shopify-section .featured-collection,
  .featured-collection .page-width,
  .featured-collection .collection__title.page-width,
  .featured-collection slider-component.page-width,
  .featured-collection .slider-mobile-gutter.page-width-desktop {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .featured-collection .collection__title h2,
  .featured-collection .collection__title .title,
  .featured-collection .title.inline-richtext,
  .featured-collection h2.title,
  .featured-collection .h0,
  .featured-collection .h1,
  .featured-collection .hxl,
  .featured-collection .hxxl {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
  }

  .featured-collection .collection__title.title-wrapper {
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   TECHSERVICE V2.3 — Spazio ridotto tra sezioni + sfondo grigio alternato
   stile WorkshopItaly (Utensileria grigio · Diagnostica bianco · AC grigio)
   ============================================================ */

/* 1. SFONDO GRIGIO ALTERNATO: Utensileria + AC su #FAFAFA, Diagnostica bianca */
.shopify-section[id$="__featured_utensileria"],
.shopify-section[id$="__featured_ac"] {
  background: #FAFAFA !important;
}
.shopify-section[id$="__featured_utensileria"] .featured-collection,
.shopify-section[id$="__featured_ac"] .featured-collection {
  background: transparent !important;
}

/* Diagnostica bianca esplicita (no override accidentale) */
.shopify-section[id$="__featured_diagnostica"] {
  background: #FFFFFF !important;
}

/* 2. SPAZIO RIDOTTO tra sezioni: niente margin/extra padding sul wrapper Shopify */
.shopify-section[id$="__featured_utensileria"],
.shopify-section[id$="__featured_diagnostica"],
.shopify-section[id$="__featured_ac"] {
  margin: 0 !important;
}

/* Wrapper interno Dawn .gradient/.collection: niente padding extra */
.shopify-section[id$="__featured_utensileria"] .color-scheme-1,
.shopify-section[id$="__featured_utensileria"] .color-scheme-2,
.shopify-section[id$="__featured_diagnostica"] .color-scheme-1,
.shopify-section[id$="__featured_diagnostica"] .color-scheme-2,
.shopify-section[id$="__featured_ac"] .color-scheme-1,
.shopify-section[id$="__featured_ac"] .color-scheme-2 {
  background: transparent !important;
}

/* 3. CARD su sfondo grigio: leggermente più contrasto (ombra appena più visibile) */
.shopify-section[id$="__featured_utensileria"] .pcard,
.shopify-section[id$="__featured_ac"] .pcard {
  background: #FFFFFF !important;
  box-shadow: 0 1px 0 #E8E8E8, 0 4px 14px rgba(0,0,0,0.05) !important;
}

/* 4. MOBILE: sfondi grigi mantenuti, padding ulteriormente ridotto */
@media (max-width: 768px) {
  .shopify-section[id$="__featured_utensileria"] .section-padding,
  .shopify-section[id$="__featured_diagnostica"] .section-padding,
  .shopify-section[id$="__featured_ac"] .section-padding,
  .shopify-section[id$="__featured_utensileria"] [class*="-padding"],
  .shopify-section[id$="__featured_diagnostica"] [class*="-padding"],
  .shopify-section[id$="__featured_ac"] [class*="-padding"] {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}

/* ============================================================
   TECHSERVICE V2.4 — Fix robusto class-based (no più dipendenza da ID Shopify)
   featured-collection.liquid ora applica classe .ts-bg-soft sul wrapper
   quando bg_style="soft". Più affidabile dei selettori [id$=].
   ============================================================ */

/* Sfondo grigio chiaro via classe applicata dal Liquid */
.ts-featured-collection.ts-bg-soft {
  background: #FAFAFA !important;
}
.ts-featured-collection.ts-bg-soft .collection {
  background: transparent !important;
}

/* Card su sfondo grigio: ombra leggermente più contrastata */
.ts-featured-collection.ts-bg-soft .pcard {
  background: #FFFFFF !important;
  box-shadow: 0 1px 0 #E8E8E8, 0 4px 14px rgba(0,0,0,0.05) !important;
}

/* Reset Dawn color-scheme background che potrebbe sovrapporsi */
.ts-featured-collection.ts-bg-soft.color-scheme-1,
.ts-featured-collection.ts-bg-soft.color-scheme-2,
.ts-featured-collection.ts-bg-soft.color-background-1,
.ts-featured-collection.ts-bg-soft.color-background-2 {
  background: #FAFAFA !important;
}

/* Niente margin tra sezioni featured-collection */
.shopify-section:has(.ts-featured-collection) {
  margin: 0 !important;
}

/* Mobile: bg grigio mantenuto */
@media (max-width: 768px) {
  .ts-featured-collection.ts-bg-soft {
    background: #FAFAFA !important;
  }
}

/* ============================================================
   TECHSERVICE V2.5 — 3 fix piccoli
   1. Sconto SuperPromo che esce dalla card su mobile
   2. (foto categorie giganti — fix lato Liquid + asset locali, no CSS)
   3. Reviews marquee: card più piccole, scroll più veloce
   ============================================================ */

/* ── 1. SUPER PROMO mobile: contieni lo sconto rosso dentro la card ── */
@media (max-width: 768px) {
  /* Permetti al price-row di andare a capo se non ci sta */
  .super-promo-right .pcard .pcard-price-row,
  .super-promo .pcard .pcard-price-row,
  [id^="carousel-superpromo"] .pcard .pcard-price-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
  }

  /* Sconto: font ridotto, no wrap interno, allineato a destra */
  .super-promo-right .pcard .pcard-disc,
  .super-promo .pcard .pcard-disc,
  [id^="carousel-superpromo"] .pcard .pcard-disc {
    font-size: 11px !important;
    padding: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    color: #DC2626 !important;
    font-weight: 800 !important;
  }

  /* Prezzo col: largo necessario, non comprimere */
  .super-promo-right .pcard .pcard-price-col,
  .super-promo .pcard .pcard-price-col,
  [id^="carousel-superpromo"] .pcard .pcard-price-col {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .super-promo-right .pcard .pcard-now,
  .super-promo .pcard .pcard-now,
  [id^="carousel-superpromo"] .pcard .pcard-now {
    font-size: 14px !important;
    color: #1F1F1F !important;
  }
  .super-promo-right .pcard .pcard-was,
  .super-promo .pcard .pcard-was,
  [id^="carousel-superpromo"] .pcard .pcard-was {
    font-size: 10px !important;
  }

  /* Contieni overflow card SuperPromo (proteggi da sticker e badge esterni) */
  .super-promo-right .pcard,
  .super-promo .pcard {
    overflow: hidden !important;
    padding: 10px !important;
  }
}

/* ── 3. REVIEWS MARQUEE: card più piccole + scroll più veloce ── */
.reviews-marquee .review-card {
  width: 260px !important;       /* era 380px */
  padding: 16px !important;       /* era 26px */
  gap: 10px !important;           /* era 14px */
}
.reviews-marquee-track {
  animation-duration: 45s !important;  /* era 90s, doppio veloce */
  gap: 14px !important;                /* era 22px, più stretto */
  padding: 0 14px !important;
}
.reviews-marquee .review-card .review-body {
  font-size: 13px !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.reviews-marquee .review-card .review-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
}
.reviews-marquee .review-card .review-meta-text .name {
  font-size: 13px !important;
}
.reviews-marquee .review-card .review-meta-text .place {
  font-size: 11px !important;
}
.reviews-marquee .review-card .review-verified {
  font-size: 10px !important;
  padding: 2px 6px !important;
}
.reviews-marquee .review-card .stars {
  font-size: 13px !important;
}
.reviews-marquee .review-card .review-product {
  font-size: 11px !important;
}

/* Mobile: card recensioni ancora più piccole */
@media (max-width: 640px) {
  .reviews-marquee .review-card {
    width: 220px !important;
    padding: 14px !important;
  }
  .reviews-marquee-track {
    animation-duration: 35s !important;
    gap: 12px !important;
  }
}

/* ============================================================
   TECHSERVICE V2.7 — Header sticky (rimane in alto durante scroll)
   La topbar (sopra l'header) scrolla via, solo l'header con logo +
   search + chip filtri resta visibile in alto.
   ============================================================ */

/* Header wrapper sticky con z-index alto sopra i contenuti */
.header-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Backup target: il wrapper Shopify-section per il header group */
.shopify-section-group-header-group .header-wrap,
.shopify-section[id*="header-techservice"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Garantisco che gli ancestor non blocchino sticky */
html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Mega menu drawer deve stare sopra l'header sticky (z-index più alto) */
.mega-menu-drawer,
.mega-drawer,
[id*="mega"][class*="drawer"] {
  z-index: 200 !important;
}

/* Cart drawer Dawn sopra header */
cart-drawer,
.cart-drawer {
  z-index: 200 !important;
}

/* ============================================================
   TECHSERVICE V2.8 — Pagina collection Utensileria (mobile-first fix)
   1. Titolo "Utensileria" sobrio Inter (era Archivo Black gigante)
   2. Spazio vuoto sotto titolo ridotto (.page-hero + .section padding)
   3. Titoli prodotti NO MORE uppercase (text-transform: none globale)
   4. Card prodotti collection: stesso stile minimal dei carousel home
   ============================================================ */

/* 1. Hero pagina collection: titolo sobrio Inter, no Archivo Black gigante */
.page-hero {
  padding: 24px 0 16px !important;
  border-bottom: none !important;
}
.page-hero h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.page-hero .eyebrow {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}
.page-hero .lead {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #525252 !important;
  max-width: 720px !important;
  margin-top: 8px !important;
}

/* 2. Sezione collection: padding ridotto (era >48px) */
.section-collection-utensileria .section,
.section-collection-promo .section {
  padding: 20px 0 32px !important;
}

/* 3. TITOLO PRODOTTI: niente più uppercase (override globale, non solo featured) */
.pcard-title,
.cat-grid-products .pcard-title,
.featured-collection .pcard-title {
  text-transform: none !important;
}

/* 4. Card prodotti collection grid: stesso stile minimal dei carousel home */
.cat-grid-products .pcard {
  background: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 0 #EAEAEA, 0 6px 20px rgba(0,0,0,0.04) !important;
  min-height: 0 !important;
  height: auto !important;
}
.cat-grid-products .pcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 1px 0 #DDD, 0 12px 30px rgba(0,0,0,0.08) !important;
}

/* 5. MOBILE: tutto ancora più compatto */
@media (max-width: 768px) {
  .page-hero {
    padding: 16px 0 8px !important;
  }
  .page-hero h1 {
    font-size: 24px !important;
  }
  .page-hero .lead {
    font-size: 12.5px !important;
    margin-top: 6px !important;
  }
  .section-collection-utensileria .section,
  .section-collection-promo .section {
    padding: 12px 0 24px !important;
  }
  .cat-body-head {
    margin-bottom: 14px !important;
  }
  .cat-grid-products {
    gap: 10px !important;
  }
  .cat-grid-products .pcard {
    padding: 10px !important;
    border-radius: 10px !important;
  }
  .cat-grid-products .pcard-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .cat-grid-products .pcard-brand {
    font-size: 10px !important;
    color: #1F1F1F !important;
  }
  .cat-grid-products .pcard-now {
    font-size: 15px !important;
    color: #1F1F1F !important;
  }
  .cat-grid-products .pcard-was {
    font-size: 10.5px !important;
  }
  .cat-grid-products .pcard-disc {
    background: transparent !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: #DC2626 !important;
  }
}

/* ============================================================
   TECHSERVICE V4.2 — Fix allineamento carousel desktop
   Su desktop le card partivano ~270px a destra (buco bianco a sinistra)
   causa Dawn --desktop-margin-left-first-item sul primo slide.
   Allineo lo slider al container del titolo (page-width) + azzero margin.
   ============================================================ */

@media screen and (min-width: 750px) {
  /* Container carousel allineato al titolo: stesso page-width + padding del .page-width Dawn */
  html body .ts-featured-collection .slider-component-desktop,
  html body .ts-featured-collection slider-component.slider-component-desktop,
  html body .ts-featured-collection slider-component {
    max-width: var(--page-width, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 5rem !important;
    padding-right: 5rem !important;
    box-sizing: border-box !important;
  }

  /* Azzera il margin-left calcolato del primo slide (era la causa del buco) */
  html body .ts-featured-collection .slider--desktop .slider__slide:first-child {
    margin-left: 0 !important;
    scroll-margin-left: 0 !important;
  }
  html body .ts-featured-collection .slider--desktop {
    scroll-padding-left: 0 !important;
    padding-left: 0 !important;
  }
  /* Rimuovi lo spazio fittizio :after dello slider Dawn (padding finale) */
  html body .ts-featured-collection .slider--desktop:after {
    content: none !important;
    display: none !important;
    padding-left: 0 !important;
    width: 0 !important;
  }
}

/* ============================================================
   TECHSERVICE V4.3 — Carousel full-width stile WorkshopItaly + spacing ridotto
   Titolo + card allineati a sinistra (~32px dal bordo), container quasi full-width,
   card grandi con peek a destra. Meno spazio verticale tra le 3 categorie.
   ============================================================ */

@media screen and (min-width: 750px) {
  /* Titolo + carousel full-width allineati a sinistra (override V4.2 page-width) */
  html body .ts-featured-collection .collection__title,
  html body .ts-featured-collection .collection__title.page-width,
  html body .ts-featured-collection slider-component,
  html body .ts-featured-collection .slider-component-desktop,
  html body .ts-featured-collection slider-component.slider-component-desktop {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
  }

  /* Header carousel (titolo + "Vai ai prodotti") su una riga: titolo sx, link dx */
  html body .ts-featured-collection .collection__title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Primo slide allineato a sinistra, no margin calcolato Dawn */
  html body .ts-featured-collection .slider--desktop .slider__slide:first-child {
    margin-left: 0 !important;
    scroll-margin-left: 0 !important;
  }
  html body .ts-featured-collection .slider--desktop {
    scroll-padding-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Card un po' più grandi (5-6 visibili su full-width con peek) */
  html body .ts-featured-collection .slider--desktop .grid__item {
    width: calc((100% - 5 * 14px) / 5.5) !important;
    min-width: 220px !important;
  }
}

/* ── Spacing ridotto tra le 3 categorie carousel (desktop + mobile) ── */
html body .ts-featured-collection {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
html body .ts-featured-collection .collection,
html body .ts-featured-collection [class*="section-"][class*="-padding"] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
html body .shopify-section:has(.ts-featured-collection) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile: carousel padding laterale ridotto + spacing minimo */
@media (max-width: 749px) {
  html body .ts-featured-collection .collection__title,
  html body .ts-featured-collection slider-component {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  html body .ts-featured-collection .collection,
  html body .ts-featured-collection [class*="section-"][class*="-padding"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ── V4.3: Link "Vai ai prodotti" in alto a destra (stile WorkshopItaly) ── */
.ts-featured-collection .collection__title .ts-view-all-inline {
  color: #EA580C !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  align-self: center !important;
  transition: opacity 0.15s ease !important;
}
.ts-featured-collection .collection__title .ts-view-all-inline:hover {
  text-decoration: underline !important;
  opacity: 0.8 !important;
}
/* Assicura che h2 titolo non spinga via il link */
.ts-featured-collection .collection__title .title {
  margin-bottom: 0 !important;
}
/* Mobile: link sotto il titolo, più piccolo */
@media (max-width: 749px) {
  .ts-featured-collection .collection__title .ts-view-all-inline {
    font-size: 13px !important;
  }
}

/* ============================================================
   TECHSERVICE V4.4 — Sfondo grigio uniforme carousel + spacing minimo
   Tutti e 3 i carousel home (Utens/Diagn/AC) stesso sfondo #FAFAFA
   (no più alternanza bianco/grigio). Card bianche per contrasto.
   Spacing verticale tra categorie ridotto al minimo.
   ============================================================ */

/* 1. SFONDO UNIFORME grigio su TUTTI e 3 i carousel (override bg_style alternato) */
html body .ts-featured-collection,
html body .ts-featured-collection.ts-bg-soft,
html body .ts-featured-collection.ts-bg-none,
html body .ts-featured-collection.color-scheme-1,
html body .ts-featured-collection.color-scheme-2,
html body .ts-featured-collection.color-background-1,
html body .ts-featured-collection.color-background-2 {
  background: #FAFAFA !important;
  background-color: #FAFAFA !important;
}
/* Wrapper interno trasparente per non coprire il grigio */
html body .ts-featured-collection .collection,
html body .ts-featured-collection .isolate {
  background: transparent !important;
}

/* 2. CARD bianche per risaltare sul grigio */
html body .ts-featured-collection .pcard,
html body .ts-featured-collection .card-wrapper,
html body .ts-featured-collection .card-wrapper > .card,
html body .ts-featured-collection .card__inner {
  background: #FFFFFF !important;
}

/* 3. SPACING MINIMO tra le 3 categorie (blocco grigio continuo) */
html body .ts-featured-collection {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body .ts-featured-collection .collection,
html body .ts-featured-collection [class*="section-"][class*="-padding"] {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Mobile: spacing ancora più compatto */
@media (max-width: 749px) {
  html body .ts-featured-collection {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  html body .ts-featured-collection .collection,
  html body .ts-featured-collection [class*="section-"][class*="-padding"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* ============================================================
   TECHSERVICE V4.5 — Sfondo grigio uniforme TUTTA la home + spacing reale
   Body home grigio #FAFAFA (come WorkshopItaly), sezioni neutre trasparenti
   per mostrare il grigio. Spacing tra sezioni minimo (il vero colpevole era
   ts_vertical_padding:20 inline, ora 4).
   ============================================================ */

/* 1. SFONDO GRIGIO su tutta la homepage */
body.template-index,
body.template-index #MainContent,
body.template-index main,
body.template-index .shopify-section-group-header-group ~ * {
  background-color: #FAFAFA !important;
}

/* 2. Sezioni neutre trasparenti (mostrano il grigio del body) */
body.template-index .shopify-section {
  background: transparent !important;
}
/* Wrapper interni delle sezioni neutre trasparenti */
body.template-index .ts-featured-collection,
body.template-index .ts-featured-collection .collection,
body.template-index .ts-featured-collection .isolate,
body.template-index .ts-featured-collection.color-scheme-1,
body.template-index .ts-featured-collection.color-scheme-2 {
  background: transparent !important;
  background-color: transparent !important;
}

/* 3. Elementi BIANCHI che devono risaltare sul grigio (card, form, box) */
body.template-index .pcard,
body.template-index .card-wrapper,
body.template-index .card-wrapper > .card,
body.template-index .card__inner,
body.template-index .usp-form-standalone,
body.template-index .quote-form-standalone,
body.template-index .review-card,
body.template-index .review-card-marquee {
  background: #FFFFFF !important;
}

/* 4. SPACING MINIMO reale tra tutte le sezioni home (era ts_vertical_padding:20) */
body.template-index .shopify-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.template-index .ts-featured-collection [class*="section-"][class*="-padding"] {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* 5. Le sezioni con sfondo SCURO/colorato intenzionale NON devono diventare grigie
   (super promo, newsletter, footer mantengono il loro stile interno) */
body.template-index .super-promo,
body.template-index .newsletter-techservice,
body.template-index .newsletter,
body.template-index .footer,
body.template-index .topbar-min,
body.template-index .header-wrap {
  /* questi hanno il loro bg su elemento interno, restano invariati */
}

@media (max-width: 749px) {
  body.template-index .ts-featured-collection [class*="section-"][class*="-padding"] {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* ============================================================
   TECHSERVICE V4.6 — Fix sconto −X% tagliato nelle card carousel mobile
   Su mobile prezzo + sconto non stavano sulla stessa riga e lo sconto
   veniva clippato sul bordo destro. Fix: overflow visibile, nowrap,
   font ridotti, sconto flex-shrink:0.
   ============================================================ */

/* ============================================================
   TECHSERVICE V4.7 — FIX RADICE: classe body ts-home + stop animazione
   (1) body NON aveva .template-index → fix sfondo non si applicava.
       Ora theme.liquid aggiunge .ts-home sulla home → uso quello.
   (2) Card sfalsate sx/dx = animazione Dawn scroll-trigger animate--slide-in
       che rivela le card in cascade. La disabilito → card tutte subito visibili.
   ============================================================ */

/* (2) STOP animazione reveal-on-scroll: card tutte visibili subito, no sfalsamento */
.ts-featured-collection .scroll-trigger,
.ts-featured-collection .grid__item,
.ts-featured-collection .slider__slide,
.ts-featured-collection .animate--slide-in,
.ts-featured-collection .pcard,
body.ts-home .scroll-trigger,
body.ts-home .grid__item.scroll-trigger,
body.ts-home .animate--slide-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* (1) SFONDO GRIGIO su tutta la home (selettore corretto body.ts-home) */
body.ts-home {
  background: #FAFAFA !important;
  background-color: #FAFAFA !important;
}
body.ts-home #MainContent,
body.ts-home main {
  background: transparent !important;
}
body.ts-home .shopify-section {
  background: transparent !important;
}
body.ts-home .ts-featured-collection,
body.ts-home .ts-featured-collection .collection,
body.ts-home .ts-featured-collection .isolate,
body.ts-home .ts-featured-collection.color-scheme-1,
body.ts-home .ts-featured-collection.color-scheme-2 {
  background: transparent !important;
  background-color: transparent !important;
}

/* Elementi bianchi che risaltano sul grigio */
body.ts-home .pcard,
body.ts-home .card-wrapper,
body.ts-home .card-wrapper > .card,
body.ts-home .card__inner,
body.ts-home .usp-form-standalone,
body.ts-home .quote-form-standalone,
body.ts-home .review-card {
  background: #FFFFFF !important;
}

@media (max-width: 749px) {
  /* Card: niente overflow che taglia lo sconto */
  body.template-index .pcard,
  body.ts-home .pcard,
  body.template-index .ts-featured-collection .pcard {
    overflow: visible !important;
  }

  /* Price row: prezzo a sx, sconto a dx, sulla stessa riga senza taglio */
  body.template-index .pcard-price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Colonna prezzo: può restringersi ma non spinge fuori lo sconto */
  body.template-index .pcard-price-col {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Prezzi un filo più piccoli per far stare tutto */
  body.template-index .pcard-now {
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  body.template-index .pcard-was {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Sconto: SEMPRE visibile, non si comprime, non va a capo */
  body.template-index .pcard-disc {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #DC2626 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 2px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    align-self: flex-end !important;
  }
}

/* ============================================================
   PDP — pezzi custom V5-5 (messaggio rate Klarna + chip pagamento)
   ============================================================ */
.ts-pdp-klarna{display:flex;align-items:center;gap:10px;background:#FFE0EB;border-radius:10px;padding:11px 13px;margin:14px 0;font-size:13px;color:#1a1a1a;line-height:1.4;}
.ts-pdp-klarna .k{background:#1a1a1a;color:#FFB3C7;font-weight:800;font-size:12px;padding:4px 9px;border-radius:5px;flex:0 0 auto;}
.ts-pdp-klarna a{text-decoration:underline;font-weight:600;}
.ts-pdp-payrow{margin:16px 0 4px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.ts-pdp-payrow .lbl{width:100%;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#A3A3A3;margin-bottom:2px;}
.ts-pdp-payrow .pc{height:30px;min-width:46px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E5E5E5;border-radius:6px;font-size:11px;font-weight:800;color:#404040;letter-spacing:-.02em;}
.ts-pdp-payrow .pc.klarna{background:#FFB3C7;color:#1a1a1a;border-color:#FFB3C7;}
/* ===================== PDP REFINEMENT (V5-6) ===================== */
/* 2) Aggiungi al carrello: nero prominente come la demo (dynamic checkout nascosto via setting) */
.product .product-form__submit{background:#1F1F1F !important;color:#fff !important;border:1px solid #1F1F1F !important;min-height:54px;border-radius:10px;font-weight:700;font-size:16px;}
.product .product-form__submit:hover:not([disabled]){background:#000 !important;transform:translateY(-1px);}
/* 1) Card "Potrebbero interessarti": titolo leggibile su 2 righe, niente troncature brutte */
.related-products .card__heading,.product-recommendations .card__heading{font-size:14px;line-height:1.35;margin-top:6px;}
.related-products .card__heading a,.product-recommendations .card__heading a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:normal;overflow-wrap:break-word;white-space:normal;}
.related-products .card__media,.product-recommendations .card__media,.related-products .card .media,.product-recommendations .card .media{background:#fff !important;}
.related-products .price,.product-recommendations .price{font-weight:700;}
/* 4) Galleria: sfondo bianco */
.product__media-wrapper .media,.product__media,.product__media-item .media{background:#fff !important;}
/* 3) Buybox: prezzo piu' marcato vicino alla demo */
.product__info-container .price{font-size:1.5rem;}
/* ===================== PDP REFINEMENT (V5-7) ===================== */
/* Badge pagamento moderni (SVG) */
.ts-pdp-payments{margin:18px 0 4px;}
.ts-pdp-payments .lbl{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#A3A3A3;margin-bottom:9px;}
.ts-paybadges{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.ts-paybadges .tpb{display:inline-flex;line-height:0;}
.ts-paybadges .tpb svg{display:block;border-radius:4px;}
/* Card "Potrebbero interessarti" — fix robusto (Dawn vinceva senza !important) */
.related-products .grid,.product-recommendations .grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:14px !important;}
.related-products .grid__item,.product-recommendations .grid__item,.related-products .card-wrapper{max-width:none !important;width:auto !important;margin:0 !important;}
.related-products .card,.related-products .card__inner,.related-products .card__content,.product-recommendations .card,.product-recommendations .card__content{width:100% !important;}
.related-products .card__information,.product-recommendations .card__information{padding:10px 6px 4px !important;width:100% !important;text-align:left !important;}
.related-products .card__heading,.product-recommendations .card__heading{font-size:13.5px !important;line-height:1.32 !important;margin:0 0 6px !important;text-align:left !important;white-space:normal !important;letter-spacing:0 !important;}
.related-products .card__heading a,.product-recommendations .card__heading a{display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;text-overflow:ellipsis !important;word-break:normal !important;overflow-wrap:break-word !important;white-space:normal !important;max-width:none !important;}
.related-products .card__media,.related-products .card .media,.product-recommendations .card__media{background:#fff !important;}
.related-products .price,.product-recommendations .price{font-weight:700 !important;text-align:left !important;}
@media (min-width:990px){.related-products .grid,.product-recommendations .grid{grid-template-columns:repeat(4,1fr) !important;}}
/* ===================== RECENSIONI JUDGE.ME (V5-8) ===================== */
.ts-reviews{padding:36px 0 8px;}
.ts-reviews-title{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:24px;letter-spacing:-.015em;margin-bottom:18px;color:var(--text-primary);}
.ts-pdp-rating{margin:8px 0 2px;}
.ts-pdp-rating:empty{display:none;}
/* === V6-7: fix card tagliate (overflow griglia utensileria) === */
.cat-grid-products{grid-template-columns:repeat(3,minmax(0,1fr));}
.cat-grid-products>*,.cat-grid-products .pcard{min-width:0;max-width:100%;}
.cat-grid-products .pcard-title{overflow-wrap:anywhere;}
/* V6-10: breakpoint a 1024px (NON 900) così le 2 colonne partono dove la sidebar
   si impila — la regola base sopra è più in basso del media query a riga ~2764
   e lo annullava, lasciando 3 colonne strette nella fascia 901-1024px. */
@media (max-width:1024px){.cat-grid-products{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.cat-grid-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}}

/* === V6-10: collezioni FUORI dalla famiglia Utensileria (es. /collections/all, autel)
   → niente sidebar, griglia a tutta larghezza. Su desktop densità 4 colonne;
   sotto i 1024px restano valide le media query 2-colonne qui sopra. === */
.category-layout.cat-layout--full{grid-template-columns:1fr;}
@media (min-width:1025px){
  .cat-layout--full .cat-grid-products{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ============================================================
   V6-11 PACCHETTI PROMO JBM (15/09/2026) — pacchetti A..F in ordine
   ============================================================ */
/* ===== V6-11 A · Header chips + mega drawer ===== */
/* Owner: sections/header-techservice.liquid, sections/header-group.json, snippets/mega-menu-drawer.liquid
   Appeso in coda a section-techservice-custom.css: a parità di specificità vince sulle regole V6-10. */

/* ---------- HEADER · sesto chip "Pacchetti Promo" (desktop, P2_34) ---------- */
.quick-chip.is-kit { background: var(--brand-dim); border-color: var(--brand-dim); color: #fff; }
.quick-chip.is-kit:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.header-two-row-bottom .quick-chip.is-promo,
.header-two-row-bottom .quick-chip.is-kit { padding: 0 14px; }

/* 769-1024px: riga chip in overflow-x:auto → se sborda non tagliare Promo a sinistra */
@media (max-width: 1024px) {
  .chips-only .quick-chips { justify-content: flex-start; justify-content: safe center; }
}

/* ---------- HEADER · mobile (P2_35) ---------- */
@media (max-width: 768px) {
  .header-wrap { padding: 8px 0; }

  /* 6 chip → griglia 3x2 (solo quando il chip Pacchetti è renderizzato) */
  .header-two-row-bottom .quick-chips.has-kit { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* Fix blocco mobile .quick-chip morto per specificità (perdeva contro .header-two-row-bottom .quick-chip) */
  .header-two-row-bottom .quick-chip {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    min-width: 0;
  }
  .header-two-row-bottom .quick-chip.is-promo,
  .header-two-row-bottom .quick-chip.is-kit { padding: 0 8px; }
  .header-two-row-bottom .quick-chip.is-kit { box-shadow: 0 2px 6px rgba(194, 65, 12, 0.3); }
}

/* Telefoni stretti senza chip Pacchetti (5 colonne da ~56px): padding laterale ridotto, "Diagnosi" non viene tagliato */
@media (max-width: 400px) {
  .header-two-row-bottom .quick-chips:not(.has-kit) .quick-chip { padding: 0 2px; }
}

/* Telefoni grandi in landscape e tablet stretti: 6 chip su una riga */
@media (min-width: 600px) and (max-width: 768px) {
  .header-two-row-bottom .quick-chips.has-kit { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* ---------- DRAWER · striscia in cima "Tutte le promo" (P2_36 + lettura A) ---------- */
.mega-featured {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin: 0 0 28px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: rgba(234, 88, 12, 0.10);
  border: 1px solid var(--brand);
  border-radius: 14px;
  color: #FAFAFA;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.mega-featured:hover { background: rgba(234, 88, 12, 0.18); border-color: var(--brand-bright); }
.mega-featured .icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mega-featured .icon svg { width: 20px; height: 20px; }
.mega-featured .txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.mega-featured .t { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #FAFAFA; }
.mega-featured .s { font-size: 12px; line-height: 1.35; color: #D4D4D4; }
.mega-featured .mega-featured-badge {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  background: #DC2626;
  color: #fff;
}
.mega-featured .arrow {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--brand-bright);
  transition: transform var(--t-fast), color var(--t-fast);
}

/* variante rossa (promo) */
.mega-featured.is-promo { background: rgba(220, 38, 38, 0.12); border-color: #DC2626; }
.mega-featured.is-promo .icon { background: #DC2626; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35); }
.mega-featured.is-promo .arrow { color: #F87171; }
.mega-featured.is-promo:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: #EF4444;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.18);
}
.mega-featured.is-promo:hover .arrow { color: #FCA5A5; transform: translateX(3px); }
.mega-featured.is-promo:focus-visible { outline: 2px solid #F87171; outline-offset: 2px; }

/* ---------- DRAWER · card rapide ---------- */
/* Pacchetti Promo: prima card, leggero accento arancio */
.mega-quick a.is-kit { background: rgba(234, 88, 12, 0.08); border-color: rgba(234, 88, 12, 0.45); }
.mega-quick a.is-kit:hover { background: rgba(234, 88, 12, 0.16); border-color: var(--brand); }
.mega-quick a.is-kit .icon { background: var(--brand); }

/* griglia adattata al numero di card (niente cella vuota quando il chip Pacchetti è spento) */
.mega-quick[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mega-quick[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.mega-quick[data-count="1"] { grid-template-columns: 1fr; }

/* ---------- DRAWER · colonne categoria come <details> ---------- */
.mega-col > summary { list-style: none; }
.mega-col > summary::-webkit-details-marker { display: none; }
.mega-col-chev { display: none; }

/* Desktop: aspetto identico a V6-10 (colonne sempre aperte, titolo non cliccabile) */
@media (min-width: 769px) {
  .mega-grid .mega-col > summary { display: block; pointer-events: none; cursor: default; }
}

/* Mobile: accordion (chiuso all'apertura del menù via script nello snippet) */
@media (max-width: 768px) {
  .mega-body .mega-featured { margin-bottom: 22px; padding: 12px 14px; gap: 12px; }

  .mega-body .mega-grid { gap: 0; }
  .mega-grid .mega-col { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .mega-grid .mega-col:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .mega-grid .mega-col > summary {
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 6px;
  }
  .mega-grid .mega-col > summary:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
  .mega-grid .mega-col > summary h4 {
    height: 52px;
    margin: 0;
    padding: 0 2px 0 0;
    border-bottom: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
  }
  .mega-grid .mega-col-chev {
    display: block;
    width: 18px;
    height: 18px;
    margin-left: auto;
    flex-shrink: 0;
    color: #A3A3A3;
    transition: transform var(--t), color var(--t-fast);
  }
  .mega-grid .mega-col[open] .mega-col-chev { transform: rotate(180deg); color: var(--brand-bright); }
  .mega-grid .mega-col > ul { padding: 10px 0 12px 40px; gap: 0; }
  .mega-grid .mega-col li a { padding: 12px 0; line-height: 20px; }

  /* Card rapide: card orizzontali 2 per riga come approvato (bordo #1F1F1F e spaziatura V6-10 invariati).
     Fix mirato: in V6-10 "Aggiornamento" sforava a destra a 360px → il testo può andare a capo dentro la card */
  .mega-quick[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-body .mega-quick a { min-width: 0; }
  .mega-body .mega-quick .txt { min-width: 0; }
  .mega-body .mega-quick .txt .t { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  .mega-quick[data-count="1"] > a,
  .mega-quick[data-count="3"] > a:last-child { grid-column: 1 / -1; }
}

/* Telefoni: badge come linguetta sul bordo alto, così titolo e numero restano su una riga */
@media (max-width: 480px) {
  .mega-body .mega-featured { position: relative; }
  .mega-featured .mega-featured-badge {
    position: absolute;
    top: -9px;
    right: 14px;
    padding: 4px 8px;
    letter-spacing: 0.4px;
    box-shadow: 0 0 0 3px var(--bg-dark);
  }
}

/* ===== V6-11 PACKAGE B — Super Promo sp-v2 ===== */
/* Markup: sections/super-promo.liquid (section.super-promo.sp-v2)
   Desktop: .sp-banner / .sp-banner-txt = display:contents -> le regole esistenti
   .super-promo-left h3/p/tag/sticker continuano ad applicarsi; pannello alleggerito.
   Mobile: banner scuro slim + 2 bottoni pill + carousel card (target ~450px). */

/* Nastro "SUPER PROMO!" sulle card: nascosto globalmente (display:none !important, V3.x);
   qui viene riattivato solo se la sezione lo stampa (setting show_ribbon). */
.super-promo.sp-v2 .pcard .pcard-superpromo {
  display: inline-flex !important;
}

/* Sticker "fino a": la utility globale .small (color: text-tertiary) lo rendeva grigio sul rosso */
.super-promo.sp-v2 .super-promo-sticker .small {
  color: #FFFFFF;
}

/* ---------- DESKTOP / TABLET (>= 769px) ---------- */
@media (min-width: 769px) {
  .super-promo.sp-v2 .sp-banner,
  .super-promo.sp-v2 .sp-banner-txt {
    display: contents;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-sub-short {
    display: none;
  }

  /* Pannello più leggero: gap, titolo e sottotitolo di uno step */
  .super-promo.sp-v2 .super-promo-left {
    gap: 18px;
  }
  .super-promo.sp-v2 .super-promo-left h3 {
    font-size: 38px;
  }
  .super-promo.sp-v2 .super-promo-left h3 .accent {
    font-size: 54px;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-sub {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 270px;
  }

  /* Bottoni: contenitore + primario un filo più compatto */
  .super-promo.sp-v2 .super-promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn {
    height: 46px;
    padding: 0 22px;
    font-size: 13px;
  }
  .super-promo.sp-v2 .super-promo-btn--ghost {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
  }
  .super-promo.sp-v2 .super-promo-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
    transform: none;
  }

  /* Sticker: resta in basso a destra (posizione e misura originali, 96px) */
  .super-promo.sp-v2 .super-promo-sticker {
    z-index: 2;
  }
}

/* Solo layout a 2 colonne (> 1180px, sotto vale grid 1fr + padding 32px esistente) */
@media (min-width: 1181px) {
  .super-promo.sp-v2 .super-promo-left {
    padding: 36px 30px;
    min-height: 400px;
  }
  /* Pannello 380px: i 2 bottoni vanno a capo e restano allineati a sinistra (bordo dx ~230px).
     Sticker sempre in basso a destra, spostato di 10px verso il bordo: resta libero accanto ai bottoni. */
  .super-promo.sp-v2 .super-promo-sticker {
    bottom: 26px;
    right: 18px;
  }
  .super-promo.sp-v2 .super-promo-right {
    padding: 30px 30px 30px 10px;
  }
}

/* ---------- MOBILE (<= 768px) ---------- */
@media (max-width: 768px) {
  .super-promo.sp-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    margin: 0 auto 28px;
    overflow: visible;
    color: #1F1F1F;
  }
  .super-promo.sp-v2 .super-promo-left {
    display: contents;
  }
  .super-promo.sp-v2 .super-promo-left::before,
  .super-promo.sp-v2 .super-promo-left::after {
    display: none;
    content: none;
    animation: none;
  }

  /* Banner slim scuro */
  .super-promo.sp-v2 .sp-banner {
    background: #1F1F1F;
    color: #FFFFFF;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
  }
  .super-promo.sp-v2 .sp-banner::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.55) 0%, transparent 70%);
    pointer-events: none;
  }
  .super-promo.sp-v2 .sp-banner-txt {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Tag compatto: label mono con pallino rosso */
  .super-promo.sp-v2 .super-promo-left .super-promo-tag {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 6px;
    margin: 0 0 5px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 1.4px;
    color: #FCA5A5;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-tag::before {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 8px #DC2626;
  }

  /* Titolo su una riga: "SUPER PROMO!" */
  .super-promo.sp-v2 .super-promo-left h3 {
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin: 0;
  }
  .super-promo.sp-v2 .super-promo-left h3 br {
    display: none;
  }
  .super-promo.sp-v2 .super-promo-left h3 .accent {
    display: inline;
    font-size: inherit;
    letter-spacing: inherit;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #FFD600;
    color: #FFD600;
    text-shadow: none;
  }

  /* Sottotitoli: lungo nascosto, breve visibile */
  .super-promo.sp-v2 .super-promo-left .super-promo-sub {
    display: none;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-sub-short {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 4px 0 0;
    max-width: none;
    font-size: 12px;
    line-height: 1.35;
    color: #D4D4D4;
  }

  /* Sticker nel flusso (relative solo per stare sopra il glow ::after) */
  .super-promo.sp-v2 .super-promo-sticker {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    margin-left: auto;
    border: 0;
    transform: rotate(-8deg);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
  }
  .super-promo.sp-v2 .super-promo-sticker .big {
    font-size: 15px;
    letter-spacing: -0.02em;
  }
  .super-promo.sp-v2 .super-promo-sticker .small {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 7px;
    letter-spacing: 1px;
    margin-top: 2px;
  }

  /* Due bottoni pill affiancati */
  .super-promo.sp-v2 .super-promo-actions {
    display: flex;
    gap: 8px;
    margin: 0;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 40px;
    padding: 0 12px;
    gap: 6px;
    border: 1px solid #FFD600;
    border-radius: 999px;
    background: #FFD600;
    color: #1F1F1F;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn:hover {
    background: #FFC400;
    border-color: #FFC400;
    box-shadow: none;
    transform: none;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn--ghost,
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn--ghost:hover {
    background: #FFFFFF;
    border-color: #E5E5E5;
    color: #1F1F1F;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn--ghost:hover {
    border-color: #1F1F1F;
  }

  /* Carousel card: 2 piene + peek della 3a */
  .super-promo.sp-v2 .super-promo-right {
    padding: 0;
    background: none;
    overflow: visible;
  }
  /* Track a filo schermo: annulla il gutter del .container (24px 641-768, 16px <=640)
     così la 3a card sbuca di ~23px dal bordo e le card scorrono fino al bordo dello schermo */
  .super-promo.sp-v2 .super-promo-right .product-carousel-track {
    grid-auto-columns: 46% !important;
    gap: 10px !important;
    scroll-snap-type: x mandatory !important;
    margin: 0 -24px !important;
    padding: 4px 24px 6px !important;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .super-promo.sp-v2 .super-promo-right .product-carousel-track::-webkit-scrollbar {
    display: none;
  }
  .super-promo.sp-v2 .super-promo-right .pcard {
    min-width: 0 !important;
  }

  /* Nastro (se attivo) ridotto sulle card strette */
  .super-promo.sp-v2 .pcard .pcard-superpromo {
    top: 6px;
    right: 6px;
    width: 54px;
    height: 54px;
  }
  .super-promo.sp-v2 .pcard .pcard-superpromo span {
    font-size: 7px;
    padding: 0 6px;
  }
}

@media (max-width: 640px) {
  .super-promo.sp-v2 .super-promo-right .product-carousel-track {
    margin: 0 -16px !important;
    padding: 4px 16px 6px !important;
    scroll-padding-inline: 16px;
  }
}

/* Telefoni stretti (< 360px): testo banner fino a 3 righe, bottoni più compatti */
@media (max-width: 359px) {
  .super-promo.sp-v2 .sp-banner {
    padding: 12px 14px;
    gap: 10px;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-sub-short {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn {
    padding: 0 8px;
    font-size: 12px;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn svg {
    display: none;
  }
}

/* ===== V6-11 PACKAGE C — Pacchetti Promo Home ===== */

/* === V6-11 C: blocco home "Pacchetti Promo" (sections/pacchetti-promo-home.liquid) ===
   Scope: solo wrapper e track (.ts-kits-home*, .ts-kits-track). Le card .bundle-card* sono del pacchetto D (V7-1).
   Classi nuove: nessuna regola esistente le intercetta. ATTENZIONE: questo file CSS e' caricato PRIMA di base.css
   (layout/theme.liquid riga 23 vs 265): i selettori stanno a 0,2,0+ per battere h2/a/:focus-visible di Dawn (0,0,1 / 0,1,0).
   Il wrapper NON usa la classe .section (padding 56px + override Archivo !important su .section h2.title).
   Home: body.ts-home #FAFAFA, sezione trasparente, card bianca. Accento: striscia arancio 3px in alto
   (gradiente di sfondo ritagliato dal border-radius, niente overflow:hidden che taglierebbe il track). === */
.ts-kits-home-section .ts-kits-home{
  position:relative;
  background:linear-gradient(#EA580C,#EA580C) top left / 100% 3px no-repeat border-box,#FFFFFF;
  border:1px solid #E5E5E5;
  border-top-color:#EA580C;
  border-radius:16px;
  padding:20px 16px;
  color:#1F1F1F;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* Testata: phone = colonna (link sotto il testo), desktop = riga (link a destra) */
.ts-kits-home .ts-kits-home-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 0 16px;}
.ts-kits-home .ts-kits-home-copy{min-width:0;}
.ts-kits-home .ts-kits-home-eyebrow{display:block;margin:0 0 6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#EA580C;}
.ts-kits-home .ts-kits-home-title{margin:0;font-family:'Archivo Black','Inter',sans-serif;font-weight:400;font-size:26px;line-height:1.05;letter-spacing:-.02em;text-transform:none;color:#1F1F1F;word-break:normal;overflow-wrap:break-word;}
.ts-kits-home .ts-kits-home-title .accent{color:#EA580C;}
.ts-kits-home .ts-kits-home-sub{margin:8px 0 0;max-width:56ch;font-size:14px;line-height:1.5;color:#525252;}
.ts-kits-home .ts-kits-home-cta{display:inline-block;flex:0 0 auto;padding:0 0 2px;border-bottom:2px solid #EA580C;font-size:13px;font-weight:700;line-height:1.3;color:#1F1F1F;text-decoration:none;white-space:nowrap;transition:color .15s ease,border-color .15s ease;}
.ts-kits-home .ts-kits-home-cta:hover{color:#C2410C;border-bottom-color:#C2410C;}
.ts-kits-home .ts-kits-home-cta:focus-visible{outline:2px solid #EA580C;outline-offset:3px;box-shadow:none;}

/* Track: phone = scroll orizzontale con snap, card al 78% (si vede un pezzo della successiva).
   Margini negativi = padding orizzontale della card: le card scorrono fino al bordo del riquadro bianco;
   scroll-padding allinea lo snap al testo della testata. Scrollbar nascosta, 4px sotto per il bordo card. */
.ts-kits-home .ts-kits-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:78%;
  gap:12px;
  margin:0 -16px;
  padding:0 16px 4px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ts-kits-home .ts-kits-track::-webkit-scrollbar{display:none;}
.ts-kits-home .ts-kits-track > *{min-width:0;scroll-snap-align:start;}

/* Segnaposto: editor (collezione vuota/assente) o sito con hide_when_empty disattivato */
.ts-kits-home .ts-kits-home-empty{padding:28px 18px;border:1px dashed #D4D4D4;border-radius:14px;background:#FAFAFA;text-align:center;}
.ts-kits-home .ts-kits-home-empty-title{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.35;color:#1F1F1F;}
.ts-kits-home .ts-kits-home-empty-text{margin:0;font-size:13px;line-height:1.5;color:#737373;}

/* Phone grande / tablet stretto: card al 78% diventerebbero enormi (immagine 16/10) */
@media (min-width:481px) and (max-width:768px){
  .ts-kits-home .ts-kits-track{grid-auto-columns:58%;}
}

@media (min-width:769px){
  .ts-kits-home-section .ts-kits-home{padding:28px;}
  .ts-kits-home .ts-kits-home-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;}
  .ts-kits-home .ts-kits-home-title{font-size:34px;}
  .ts-kits-home .ts-kits-home-cta{margin-bottom:4px;}
}

/* Tablet: resta lo scroll, ~2 card e mezza; margini negativi = padding 28px della card */
@media (min-width:769px) and (max-width:1024px){
  .ts-kits-home .ts-kits-track{grid-auto-columns:42%;gap:16px;margin:0 -28px;padding:0 28px 4px;scroll-padding-inline:28px;}
}

/* Desktop: 3 colonne uguali, niente scroll (oltre 3 pacchetti si va a capo su nuove righe) */
@media (min-width:1025px){
  .ts-kits-home .ts-kits-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;overflow:visible;scroll-snap-type:none;}
}

/* ===== V6-11 PACKAGE D — Category page Pacchetti Promo (bundle card) ===== */

/* === V7-1: PACCHETTI PROMO — bundle card leggibile per intero (mobile-first) ===
   Scope: .ts-bundles (pagina categoria, sections/collection-pacchetti-v0) e .ts-kits-home
   (blocco home, pacchetto C). Card: snippets/bundle-card.liquid.
   Classi nuove .bundle-*: nessuna regola esistente su .promo-* o .pcard* le intercetta.
   Specificita' 0,2,0 (mini 0,3,0+) + posizione in coda: nessun !important.
   Ordine card: brand, titolo, prezzo, contenuto kit, nota, CTA (CTA spinta in fondo con margin-top:auto).
   La griglia .bundle-grid resta solo in .ts-bundles: il layout del blocco home e' del pacchetto C. === */
.ts-bundles .bundle-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 0 8px;}
.ts-bundles .bundle-grid:last-child{padding-bottom:40px;}

.ts-bundles .bundle-card,
.ts-kits-home .bundle-card{display:flex;flex-direction:column;min-width:0;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease;}
.ts-bundles .bundle-card:hover,
.ts-kits-home .bundle-card:hover{border-color:#1F1F1F;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.ts-bundles .bundle-card-img,
.ts-kits-home .bundle-card-img{position:relative;aspect-ratio:16/10;background:#FAFAFA;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ts-bundles .bundle-card-img img,
.ts-kits-home .bundle-card-img img{width:100%;height:100%;object-fit:contain;padding:5%;box-sizing:border-box;}
.ts-bundles .bundle-card-img .pcard-placeholder-empty,
.ts-kits-home .bundle-card-img .pcard-placeholder-empty{aspect-ratio:auto;height:100%;border-radius:0;}
.ts-bundles .bundle-card-discount,
.ts-kits-home .bundle-card-discount{position:absolute;top:12px;left:12px;z-index:1;background:#DC2626;color:#fff;font-family:'Archivo Black',sans-serif;font-size:16px;line-height:1;padding:8px 10px;border-radius:6px;letter-spacing:-.02em;}
.ts-bundles .bundle-card-body,
.ts-kits-home .bundle-card-body{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;padding:16px 16px 18px;}
.ts-bundles .bundle-card-brand,
.ts-kits-home .bundle-card-brand{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#EA580C;}
.ts-bundles .bundle-card-title,
.ts-kits-home .bundle-card-title{margin:0;font-family:'Inter',sans-serif;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:0;color:#1F1F1F;text-transform:none;display:block;overflow:visible;overflow-wrap:anywhere;}
.ts-bundles .bundle-card-price,
.ts-kits-home .bundle-card-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;}
.ts-bundles .bundle-card-price .was,
.ts-kits-home .bundle-card-price .was{font-size:14px;color:#A3A3A3;text-decoration:line-through;}
.ts-bundles .bundle-card-price .now,
.ts-kits-home .bundle-card-price .now{font-family:'Archivo Black',sans-serif;font-size:28px;line-height:1;letter-spacing:-.02em;color:#1F1F1F;}
.ts-bundles .bundle-card-price .save,
.ts-kits-home .bundle-card-price .save{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700;color:#DC2626;}
.ts-bundles .bundle-card-price .note,
.ts-kits-home .bundle-card-price .note{width:100%;font-size:11.5px;color:#737373;}
.ts-bundles .bundle-card-kit-label,
.ts-kits-home .bundle-card-kit-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#737373;margin-top:2px;}
.ts-bundles .bundle-card-kit,
.ts-kits-home .bundle-card-kit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.ts-bundles .bundle-card-kit li,
.ts-kits-home .bundle-card-kit li{position:relative;padding-left:20px;font-size:14px;line-height:1.4;color:#404040;overflow-wrap:anywhere;}
.ts-bundles .bundle-card-kit li::before,
.ts-kits-home .bundle-card-kit li::before{content:'+';position:absolute;left:0;top:-1px;font-weight:800;font-size:15px;color:#EA580C;}
.ts-bundles .bundle-card-kit--dot li::before,
.ts-kits-home .bundle-card-kit--dot li::before{content:'';top:7px;left:4px;width:6px;height:6px;border-radius:50%;background:#EA580C;}
.ts-bundles .bundle-card-excerpt,
.ts-kits-home .bundle-card-excerpt{margin:0;font-size:13.5px;line-height:1.45;color:#525252;}
.ts-bundles .bundle-card-note,
.ts-kits-home .bundle-card-note{margin:0;font-size:12.5px;line-height:1.4;color:#737373;}
.ts-bundles .bundle-card-cta,
.ts-kits-home .bundle-card-cta{display:flex;align-items:center;justify-content:center;height:48px;margin-top:auto;border-radius:10px;background:#1F1F1F;color:#fff;font-weight:700;font-size:14px;transition:background .15s ease;}
.ts-bundles .bundle-card:hover .bundle-card-cta,
.ts-kits-home .bundle-card:hover .bundle-card-cta{background:#DC2626;}
.ts-bundles .bundle-card.is-soldout,
.ts-kits-home .bundle-card.is-soldout{opacity:.75;}
.ts-bundles .bundle-card.is-soldout .bundle-card-cta,
.ts-kits-home .bundle-card.is-soldout .bundle-card-cta{background:#A3A3A3;}

@media (max-width:480px){
  .ts-bundles .bundle-card-body,
  .ts-kits-home .bundle-card-body{padding:14px 14px 16px;}
  .ts-bundles .bundle-card-title,
  .ts-kits-home .bundle-card-title{font-size:16px;}
  .ts-bundles .bundle-card-price .now,
  .ts-kits-home .bundle-card-price .now{font-size:26px;}
}
@media (min-width:769px){
  .ts-bundles .bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:32px 0 16px;}
  .ts-bundles .bundle-grid:last-child{padding-bottom:48px;}
  .ts-bundles .bundle-card-body,
  .ts-kits-home .bundle-card-body{padding:20px 20px 22px;gap:12px;}
  .ts-bundles .bundle-card-title,
  .ts-kits-home .bundle-card-title{font-size:19px;}
  .ts-bundles .bundle-card-kit li,
  .ts-kits-home .bundle-card-kit li{font-size:14.5px;}
  .ts-bundles .bundle-card-price .now,
  .ts-kits-home .bundle-card-price .now{font-size:30px;}
}

/* === V7-1 mini: variante compatta (snippet variant 'mini', blocco home) ===
   Specificita' 0,3,0: vince sulle regole base 0,2,0 anche dentro le media query sopra.
   Hover 0,4,0 batte .bundle-card:hover .bundle-card-cta (0,3,0); soldout 0,4,0 in coda batte
   .bundle-card.is-soldout .bundle-card-cta (0,4,0, prima). Immagine: resta aspect-ratio 16/10. */
.ts-bundles .bundle-card--mini .bundle-card-title,
.ts-kits-home .bundle-card--mini .bundle-card-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;}
.ts-bundles .bundle-card--mini .bundle-card-body,
.ts-kits-home .bundle-card--mini .bundle-card-body{padding:14px 14px 16px;gap:8px;}
.ts-bundles .bundle-card--mini .bundle-card-price .now,
.ts-kits-home .bundle-card--mini .bundle-card-price .now{font-size:24px;}
.ts-bundles .bundle-card--mini .bundle-card-cta--link,
.ts-kits-home .bundle-card--mini .bundle-card-cta--link{height:auto;margin-top:auto;background:none;color:#1F1F1F;font-size:13px;font-weight:700;justify-content:flex-start;border-radius:0;padding-top:4px;border-top:1px solid #F0F0F0;transition:color .15s ease;}
.ts-bundles .bundle-card--mini:hover .bundle-card-cta--link,
.ts-kits-home .bundle-card--mini:hover .bundle-card-cta--link{background:none;color:#DC2626;}
.ts-bundles .bundle-card--mini.is-soldout .bundle-card-cta--link,
.ts-kits-home .bundle-card--mini.is-soldout .bundle-card-cta--link{background:none;color:#A3A3A3;}

/* === Fallback: .cat-empty non ha regole nel CSS custom (solo stili inline nelle sezioni).
   Scope .ts-bundles per non cambiare le altre pagine collezione. === */
.ts-bundles .cat-empty{margin:20px 0 48px;background:#FAFAFA;border:1px solid #E5E5E5;border-radius:14px;}
.ts-bundles .cat-empty h3{margin:0 0 8px;font-size:20px;color:#1F1F1F;}
.ts-bundles .cat-empty p{margin:0;font-size:14px;line-height:1.5;color:#737373;}

/* ===== V6-11 PACKAGE E · Dropship JBM e contrassegno ===== */
/* Etichetta stock sulle promo-card dei kit (usata dal pacchetto F). Batte .promo-card-stock (0,1,0). */
.promo-card-stock.dropship { color:var(--brand); font-weight:700; }

/* PDP: avviso sotto "Aggiungi al carrello" (snippets/buy-buttons.liquid) */
.ts-dropship-notice { margin:12px 0 4px; padding:12px 14px; border:1px solid #EA580C; border-left-width:4px; border-radius:8px; background:#FFF7ED; color:#1F1F1F; }
.product__info-container .ts-dropship-notice { max-width:44rem; }
/* Dawn: .product__info-container .product-form { margin:2.5rem 0 } (0,2,0, caricato dopo) -> avviso a 12px dal bottone come nel mockup */
.product__info-container .product-form:has(+ .ts-dropship-notice) { margin-bottom:0; }
.ts-dropship-notice__eyebrow { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#EA580C; margin-bottom:4px; }
.ts-dropship-notice__text { margin:0; font-size:13.5px; line-height:1.45; }

/* Carrello: nota sopra i totali (sections/main-cart-footer.liquid, dentro .js-contents) */
.ts-cart-dropship-note { margin:0 0 14px; padding:12px 14px; border:1px solid #EA580C; border-left-width:4px; border-radius:8px; background:#FFF7ED; font-size:13.5px; line-height:1.45; color:#1F1F1F; text-align:left; }
.ts-cart-dropship-note .lbl { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#EA580C; margin-bottom:4px; }

/* Carrello: etichetta per riga (sections/main-cart-items.liquid). Scope su .cart-item__details per battere
   .cart-item__details > * { margin:0 } e > * + * { margin-top:.6rem } di component-cart-items.css (caricato dopo). */
.cart-item__details .cart-item__dropship { display:inline-block; margin-top:6px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:#EA580C; border:1px solid #EA580C; border-radius:4px; padding:2px 6px; }

/* Badge Contrassegno: rete oltre al parametro hide_cod */
body.ts-product-dropship .ts-paybadges .tpb[aria-label="Contrassegno"] { display:none !important; }

/* CSS DIFENSIVO Releasit COD Form. Selettori letti dal live V6-10 (app embed releasit-cod-form-451). NON è la fonte di verità: la visibilità va esclusa nell'app e, se esiste un metodo manuale, nel checkout (Payfy/PayRules). ATTENZIONE: se in Releasit si attiva 'sostituisci il bottone checkout' (cartPage.isSeperateButton=false) queste regole nasconderebbero l'unica via al checkout: tenere il bottone separato. Su /cart il gancio è :has() sulla nota del footer, che si aggiorna via AJAX in entrambe le direzioni. */
body.ts-product-dropship ._rsi-buy-now-button,
body.ts-product-dropship ._rsi-buy-now-button-floating,
body.ts-product-dropship #_rsi-cod-form-embed,
body.ts-product-dropship #_rsi-cod-form-modal { display:none !important; }
/* :has() in regola separata: i browser senza :has() scartano solo questa, non quella sopra */
product-form.product-form:has(+ .ts-dropship-notice) ._rsi-buy-now-button,
body:has([data-ts-cart-dropship="true"]) ._rsi-buy-now-button,
body:has([data-ts-cart-dropship="true"]) ._rsi-buy-now-button-floating,
body:has([data-ts-cart-dropship="true"]) #_rsi-cod-form-embed,
body:has([data-ts-cart-dropship="true"]) #_rsi-cod-form-modal { display:none !important; }

@media (max-width:768px) {
  .ts-dropship-notice { padding:10px 12px; }
  .ts-dropship-notice__text,
  .ts-cart-dropship-note { font-size:13px; }
}

/* ===== V6-11 Package F — Pre-existing bugs ===== */
/* Nessuna regola nuova: cart.js e cart-icon-bubble non richiedono CSS (markup identico a .cart-icon),
   lo stato vuoto promo usa la classe esistente .cat-empty, e .promo-card-stock.dropship arriva dal pacchetto E. */

/* Promo/top-deal: le img hanno ora width/height (solo per il rapporto d'aspetto, anti-CLS).
   width/height auto mantengono il dimensionamento attuale (max-width/max-height 100% + contain). */
.promo-card-img img,
.deal-card-img img { width: auto; height: auto; }

/* ============================================================
   V6-11b (15/09/2026 sera) — DESKTOP: Super Promo compatta come su mobile,
   Pacchetti Promo a carosello, frecce carosello, prezzo su richiesta.
   ============================================================ */

/* ---- Frecce carosello (condivise) ---- */
.ts-carousel-nav{display:none;gap:8px;align-items:center;}
.ts-carousel-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid #E5E5E5;background:#FFFFFF;color:#1F1F1F;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;}
.ts-carousel-btn:hover:not(:disabled){background:#1F1F1F;border-color:#1F1F1F;color:#FFFFFF;}
.ts-carousel-btn:disabled{opacity:.35;cursor:default;}
.ts-carousel-btn:focus-visible{outline:2px solid #EA580C;outline-offset:2px;}
@media (min-width:769px){.ts-carousel-nav{display:inline-flex;}}

/* ---- Prezzo su richiesta (kit con prezzo 0) ---- */
.ts-bundles .bundle-card-price .now--ask,
.ts-kits-home .bundle-card-price .now--ask{font-family:'Inter',sans-serif;font-size:17px;font-weight:800;letter-spacing:0;color:#C2410C;}

/* ---- PACCHETTI PROMO home: carosello anche su desktop ---- */
.ts-kits-home .ts-kits-home-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
@media (min-width:1025px){
  .ts-kits-home .ts-kits-track{
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:calc((100% - 3 * 20px) / 4);
    gap:20px;
    margin:0;
    padding:2px 0 6px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
  }
  .ts-kits-home .ts-kits-track::-webkit-scrollbar{display:none;}
  .ts-kits-home .bundle-card--mini .bundle-card-img{aspect-ratio:4/3;}
}

/* ---- SUPER PROMO desktop: banner scuro basso + carosello chiaro sotto ---- */
@media (min-width:769px){
  .super-promo.sp-v2{
    display:flex;
    flex-direction:column;
    gap:14px;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    margin:32px auto 8px;
    overflow:visible;
    color:#1F1F1F;
  }
  .super-promo.sp-v2 .super-promo-left{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
    gap:22px;
    min-height:0;
    padding:18px 22px 18px 28px;
    border-radius:16px;
    background:radial-gradient(ellipse at 100% 0%, rgba(220,38,38,.45) 0%, transparent 55%), #1F1F1F;
    color:#FFFFFF;
    position:relative;
    overflow:hidden;
  }
  .super-promo.sp-v2 .super-promo-left::before,
  .super-promo.sp-v2 .super-promo-left::after{display:none;content:none;animation:none;}
  .super-promo.sp-v2 .sp-banner{display:contents;}
  .super-promo.sp-v2 .sp-banner-txt{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
    order:1;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-tag{
    background:none;border:0;border-radius:0;padding:0;margin:0;
    font-size:10.5px;letter-spacing:1.4px;color:#FCA5A5;
  }
  .super-promo.sp-v2 .super-promo-left h3{
    margin:0;
    font-size:32px;
    line-height:1;
    letter-spacing:-.02em;
    white-space:nowrap;
  }
  .super-promo.sp-v2 .super-promo-left h3 br{display:none;}
  .super-promo.sp-v2 .super-promo-left h3 .accent{
    display:inline;
    font-size:inherit;
    letter-spacing:inherit;
    margin-left:.2em;
    text-shadow:none;
  }
  .super-promo.sp-v2 .super-promo-left .super-promo-sub{display:none;}
  .super-promo.sp-v2 .super-promo-left .super-promo-sub-short{
    display:block;
    margin:0;
    max-width:none;
    font-size:13.5px;
    line-height:1.4;
    color:#D4D4D4;
  }
  .super-promo.sp-v2 .super-promo-actions{
    order:2;
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    margin:0;
    flex:0 0 auto;
    position:relative;
    z-index:1;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn{
    height:44px;
    padding:0 20px;
    border-radius:999px;
    font-size:13px;
    letter-spacing:.2px;
    white-space:nowrap;
    box-shadow:none;
  }
  .super-promo.sp-v2 .super-promo-actions .super-promo-btn:hover{transform:none;box-shadow:none;}
  .super-promo.sp-v2 .super-promo-sticker{
    order:3;
    position:relative;
    top:auto;right:auto;bottom:auto;
    flex:0 0 74px;
    width:74px;height:74px;
    border:2px dashed rgba(255,255,255,.5);
    transform:rotate(-8deg);
    z-index:1;
  }
  .super-promo.sp-v2 .super-promo-sticker .big{font-size:21px;}
  .super-promo.sp-v2 .super-promo-sticker .small{font-size:8px;}

  /* carosello sotto, su fondo chiaro, frecce ai lati */
  .super-promo.sp-v2 .super-promo-right{
    position:relative;
    padding:0;
    background:none;
    overflow:visible;
  }
  .super-promo.sp-v2 .super-promo-right .ts-carousel-nav{
    position:absolute;
    top:50%;
    left:-18px;
    right:-18px;
    transform:translateY(-50%);
    justify-content:space-between;
    pointer-events:none;
    z-index:3;
  }
  .super-promo.sp-v2 .super-promo-right .ts-carousel-btn{
    pointer-events:auto;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
  }
  .super-promo.sp-v2 .super-promo-right .ts-carousel-btn:disabled{opacity:0;pointer-events:none;}
  .super-promo.sp-v2 .super-promo-right .product-carousel-track{
    grid-auto-columns:calc((100% - 3 * 14px) / 4);
    gap:14px;
    padding:2px 0 8px;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
  }
  .super-promo.sp-v2 .super-promo-right .product-carousel-track::-webkit-scrollbar{display:none;}
  .super-promo.sp-v2 .super-promo-right .pcard{
    background:#FFFFFF;
    border:1px solid #E5E5E5;
    scroll-snap-align:start;
  }
  .super-promo.sp-v2 .super-promo-right .pcard:hover{border-color:#1F1F1F;}
}
/* 1181px+: 5 card visibili e frecce accanto al titolo del carosello */
@media (min-width:1181px){
  .super-promo.sp-v2 .super-promo-left{padding:18px 26px;min-height:0;}
  .super-promo.sp-v2 .super-promo-sticker{bottom:auto;right:auto;}
  .super-promo.sp-v2 .super-promo-right{padding:0;}
  .super-promo.sp-v2 .super-promo-right .product-carousel-track{grid-auto-columns:calc((100% - 4 * 14px) / 5);}
}
/* 769-1024: testi sopra a tutta larghezza, bottoni sotto, bollino in alto a destra */
@media (min-width:769px) and (max-width:1024px){
  .super-promo.sp-v2 .super-promo-left{flex-wrap:wrap;row-gap:14px;padding-right:110px;}
  .super-promo.sp-v2 .sp-banner-txt{flex:1 1 100%;}
  .super-promo.sp-v2 .super-promo-sticker{position:absolute;top:18px;right:22px;}
  .super-promo.sp-v2 .super-promo-right .product-carousel-track{grid-auto-columns:calc((100% - 2 * 14px) / 3);}
  .super-promo.sp-v2 .super-promo-right .ts-carousel-nav{left:-10px;right:-10px;}
}

/* ============================================================
   V6-12 HOME (16/09/2026) — font Barlow, header, card, sezioni, form WhatsApp
   ============================================================ */
/* ===== V6-12 blocco A ===== */
/* ============================================================
   TECHSERVICE V6-12 · BLOCCO A — wp12A.css
   1) Font "A · Officina": Barlow Condensed (display/prezzi),
      Barlow (testo), IBM Plex Mono (etichette/codici).
   2) Header ricostruito (classi .ts-hdr* nuove, nessun conflitto
      con le regole header storiche di section-techservice-custom.css).
   Questo file va concatenato IN CODA a assets/section-techservice-custom.css.
   ATTENZIONE: assets/base.css di Dawn viene caricato DOPO questo file,
   percio' body/h1-h5/input di Dawn si pilotano ridefinendo le variabili
   --font-body-family / --font-heading-family con specificita' html:root.
   ============================================================ */

/* ---------- 1. Variabili famiglia ---------- */
html:root {
  --ts-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --ts-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ts-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ts-display-weight: 800;
  --ts-display-track: -0.005em;

  /* Dawn: base.css e il blocco style inline di theme.liquid leggono queste var.
     Specificita' html:root (0,1,1) > :root (0,1,0) => vincono senza !important. */
  --font-body-family: var(--ts-body);
  --font-heading-family: var(--ts-display);
  --font-heading-weight: 700;
}

/* ---------- 2. Base + controlli form ---------- */
body {
  font-family: var(--ts-body);
  font-feature-settings: 'tnum' 0;
}
input, button, textarea, select {
  font-family: var(--ts-body);
}
input[type="search"], input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  font-family: var(--ts-body);
}
/* Barlow Condensed a 400 e' troppo leggero: le etichette "display" Dawn
   (h1-h5 senza classe) vanno almeno a 700. */
h1, h2, h3, .h0, .h1, .h2, .h3 {
  font-weight: 700;
  letter-spacing: var(--ts-display-track);
}

/* ---------- 3. Override sistematico delle 139 dichiarazioni font-family
   presenti in section-techservice-custom.css (stessi selettori, stesso
   ordine di sorgente, quindi le priorita' relative restano identiche).
   'Archivo Black' -> var(--ts-display) @800 · 'JetBrains Mono' -> var(--ts-mono)
   'Inter' -> var(--ts-body) · 'Instrument Serif' e 'inherit' invariati. ---------- */
body{ font-family: var(--ts-body); }
.eyebrow{ font-family: var(--ts-mono); }
h1, h2, h3, h4, h5{ font-family: var(--ts-body); }
.mono{ font-family: var(--ts-mono); }
.announcement{ font-family: var(--ts-mono); }
.brand-logo{ font-family: var(--ts-body); }
.hero-meta-item .n{ font-family: var(--ts-mono); }
.cat-tile-num{ font-family: var(--ts-mono); }
.promo-banner .pill{ font-family: var(--ts-mono); }
.brand-pill{ font-family: var(--ts-mono); }
.cat-row-visual-tag{ font-family: var(--ts-mono); }
.usp-form label{ font-family: var(--ts-mono); }
.product-badge{ font-family: var(--ts-mono); }
.product-brand{ font-family: var(--ts-mono); }
.product-save{ font-family: var(--ts-mono); }
.review-stat .l{ font-family: var(--ts-mono); }
.review-verified{ font-family: var(--ts-mono); }
.brand-name{ font-family: var(--ts-body); }
.location-info-text .l{ font-family: var(--ts-mono); }
.footer-col h5{ font-family: var(--ts-mono); }
.footer-legal{ font-family: var(--ts-mono); }
.payment-pill{ font-family: var(--ts-mono); }
.topbar-heritage{ font-family: var(--ts-mono); }
.topbar-marquee-track{ font-family: var(--ts-mono); }
.anni-num{ font-family: var(--ts-display); font-weight: 800; }
.anni-lbl{ font-family: var(--ts-body); }
.brand-wm{ font-family: var(--ts-display); font-weight: 800; }
.hero-slide-eyebrow{ font-family: var(--ts-mono); }
.giant-cat-eyebrow{ font-family: var(--ts-mono); }
.giant-cat-title{ font-family: var(--ts-body); }
.subcat-tile-count{ font-family: var(--ts-mono); }
.pcard-quote-label{ font-family: var(--ts-mono); }
.pcard-superpromo span{ font-family: var(--ts-body); }
.super-promo-tag{ font-family: var(--ts-mono); }
.super-promo-left h3{ font-family: var(--ts-display); font-weight: 800; }
.super-promo-sticker{ font-family: var(--ts-display); font-weight: 800; }
.brand-img-tag .heritage{ font-family: var(--ts-mono); }
.brand-img-tag .sub{ font-family: var(--ts-mono); }
.brand-wm-clean{ font-family: var(--ts-display); font-weight: 800; }
.brand-tag{ font-family: var(--ts-mono); }
.header-trust-text .s{ font-family: var(--ts-mono); }
.logo-real-dark .anniv-mini .n{ font-family: var(--ts-display); font-weight: 800; }
.logo-real-dark .anniv-mini .l{ font-family: var(--ts-mono); }
.breadcrumb{ font-family: var(--ts-mono); }
.page-hero-meta-item .l{ font-family: var(--ts-mono); }
.review-card-full .photo-slot{ font-family: var(--ts-mono); }
.review-card-full .date{ font-family: var(--ts-mono); }
.filter-block h5{ font-family: var(--ts-mono); }
.filter-list a .count{ font-family: var(--ts-mono); }
.filter-checkbox .count{ font-family: var(--ts-mono); }
.cat-body-head .count{ font-family: var(--ts-mono); }
.quote-form-block label{ font-family: var(--ts-mono); }
.brand-strip .brand-name{ font-family: var(--ts-body); }
.quote-form-standalone label{ font-family: var(--ts-mono); }
.page-brands-track .brand-name{ font-family: var(--ts-body); }
.promo-hero-minimal h1{ font-family: var(--ts-display); font-weight: 800; }
.promo-hero-tag{ font-family: var(--ts-mono); }
.promo-hero h1{ font-family: var(--ts-display); font-weight: 800; }
.promo-hero-stat .n{ font-family: var(--ts-display); font-weight: 800; }
.promo-hero-stat .l{ font-family: var(--ts-mono); }
.countdown-box .label{ font-family: var(--ts-mono); }
.countdown-unit .v{ font-family: var(--ts-display); font-weight: 800; }
.countdown-unit .u{ font-family: var(--ts-mono); }
.promo-sticker{ font-family: var(--ts-display); font-weight: 800; }
.deal-badge{ font-family: var(--ts-mono); }
.deal-card-brand{ font-family: var(--ts-mono); }
.deal-card-stock{ font-family: var(--ts-mono); }
.deal-card-price .now{ font-family: var(--ts-display); font-weight: 800; }
.deal-card-save{ font-family: var(--ts-mono); }
.promo-filter-label{ font-family: var(--ts-mono); }
.promo-card-discount{ font-family: var(--ts-display); font-weight: 800; }
.promo-card-flag{ font-family: var(--ts-mono); }
.promo-card-brand{ font-family: var(--ts-mono); }
.promo-card-stock{ font-family: var(--ts-mono); }
.promo-card-price .now{ font-family: var(--ts-display); font-weight: 800; }
.promo-card-save{ font-family: var(--ts-mono); }
.promo-newsletter-perk{ font-family: var(--ts-mono); }
.mega-header h3{ font-family: var(--ts-mono); }
.mega-col li a .count{ font-family: var(--ts-mono); }
body, .page-width, .section, .featured-collection, .featured-collection h2, .featured-collection h3, .multicolumn, .rich-text, .image-with-text, .card, .card-wrapper, .card-product, .card__information, .card__heading, .card-information, .price, .button, input, select, textarea{ font-family: var(--ts-body) !important; }
.section-header__title, .collection-hero__title, .featured-collection h2, .featured-collection h3, .rich-text h2, .rich-text h1, .section h2.title, .section .h2, .section-content h2, .title-wrapper-with-link h2{ font-family: var(--ts-display) !important; font-weight: 800 !important; }
.button--primary, button.button--primary, .product-form__submit, .shopify-payment-button__button--unbranded, .featured-collection .card__information a.button, .button[type="submit"]:not(.btn-wa){ font-family: var(--ts-body) !important; }
.badge.price__badge-sale, .card__badge .badge--bottom-left{ font-family: var(--ts-mono) !important; }
.card__information, .card-information{ font-family: var(--ts-body) !important; }
.card__heading, .card-product .card__heading a{ font-family: var(--ts-body) !important; }
.card__information .caption-with-letter-spacing{ font-family: var(--ts-mono) !important; }
.ts-card-disc{ font-family: var(--ts-body); }
.card-information .caption-with-letter-spacing{ font-family: var(--ts-mono) !important; }
.card__heading, .card__heading a{ font-family: var(--ts-body) !important; }
.featured-collection .card__heading, .featured-collection .card__heading a{ font-family: var(--ts-body) !important; }
.featured-collection .price{ font-family: var(--ts-body) !important; }
.ts-quote-card-cta{ font-family: var(--ts-body) !important; }
.usp, .usp-form, .quote-form-section, .quote-form-standalone{ font-family: var(--ts-body) !important; }
.usp h2, .usp-head h2, .quote-form-section h2{ font-family: var(--ts-display) !important; font-weight: 800 !important; }
.usp-form input, .usp-form textarea, .quote-form-standalone input, .quote-form-standalone textarea{ font-family: var(--ts-body) !important; }
.usp-form .btn-primary, .btn-primary{ font-family: var(--ts-body) !important; }
.usp-form label, .quote-form-standalone label{ font-family: var(--ts-mono) !important; }
.usp-form input[type="text"], .usp-form input[type="email"], .usp-form input[type="tel"], .usp-form textarea, .quote-form-standalone input, .quote-form-standalone textarea{ font-family: var(--ts-body) !important; }
.card__badge .badge{ font-family: var(--ts-mono) !important; }
.featured-collection .collection__view-all .button, .featured-collection .center .button{ font-family: var(--ts-body) !important; }
.pcard-title, .featured-collection .pcard-title{ font-family: var(--ts-body) !important; }
.pcard-brand, .featured-collection .pcard-brand{ font-family: var(--ts-mono) !important; }
.pcard-quote-label{ font-family: var(--ts-mono) !important; }
.pcard-quote-cta{ font-family: var(--ts-body) !important; }
.pcard-was{ font-family: var(--ts-body) !important; }
.pcard-now{ font-family: var(--ts-body) !important; }
.pcard-disc{ font-family: var(--ts-body) !important; }
.pcard-brand, .featured-collection .pcard-brand{ font-family: var(--ts-body) !important; }
.pcard-now{ font-family: var(--ts-body) !important; }
.pcard-was{ font-family: var(--ts-body) !important; }
.pcard-title, .featured-collection .pcard-title{ font-family: var(--ts-body) !important; }
@media (max-width: 768px){
  .pcard-brand, .featured-collection .pcard-brand{ font-family: var(--ts-body) !important; }
}
.featured-collection .collection__title h2, .featured-collection .collection__title .title, .featured-collection .title.inline-richtext, .featured-collection h2.title{ font-family: var(--ts-body) !important; }
.featured-collection .h0, .featured-collection .h1, .featured-collection .hxl, .featured-collection .hxxl{ font-family: var(--ts-body) !important; }
.page-hero h1{ font-family: var(--ts-body) !important; }
.ts-featured-collection .collection__title .ts-view-all-inline{ font-family: var(--ts-body) !important; }
.ts-pdp-payrow .lbl{ font-family: var(--ts-mono); }
.ts-pdp-payments .lbl{ font-family: var(--ts-mono); }
.ts-reviews-title{ font-family: var(--ts-display); font-weight: 800; }
.mega-featured .mega-featured-badge{ font-family: var(--ts-mono); }
@media (max-width: 768px){
  .super-promo.sp-v2 .super-promo-sticker .small{ font-family: var(--ts-mono); }
}
.ts-kits-home-section .ts-kits-home{ font-family: var(--ts-body); }
.ts-kits-home .ts-kits-home-eyebrow{ font-family: var(--ts-mono); }
.ts-kits-home .ts-kits-home-title{ font-family: var(--ts-display); font-weight: 800; }
.ts-bundles .bundle-card-discount, .ts-kits-home .bundle-card-discount{ font-family: var(--ts-display); font-weight: 800; }
.ts-bundles .bundle-card-brand, .ts-kits-home .bundle-card-brand{ font-family: var(--ts-mono); }
.ts-bundles .bundle-card-title, .ts-kits-home .bundle-card-title{ font-family: var(--ts-body); }
.ts-bundles .bundle-card-price .now, .ts-kits-home .bundle-card-price .now{ font-family: var(--ts-display); font-weight: 800; }
.ts-bundles .bundle-card-price .save, .ts-kits-home .bundle-card-price .save{ font-family: var(--ts-mono); }
.ts-bundles .bundle-card-kit-label, .ts-kits-home .bundle-card-kit-label{ font-family: var(--ts-mono); }
.ts-dropship-notice__eyebrow{ font-family: var(--ts-mono); }
.ts-cart-dropship-note .lbl{ font-family: var(--ts-mono); }
.cart-item__details .cart-item__dropship{ font-family: var(--ts-mono); }
.ts-bundles .bundle-card-price .now--ask, .ts-kits-home .bundle-card-price .now--ask{ font-family: var(--ts-body); }

/* ---------- 4. Prezzi in Barlow Condensed ----------
   Nel mockup i prezzi sono display (.pc-now / .dist-price .now).
   Alcuni erano forzati a Inter con !important => serve !important per batterli. */
.pcard-now,
.featured-collection .pcard-now {
  font-family: var(--ts-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
.price .price-item,
.price__regular .price-item,
.price__sale .price-item--sale,
.price-item--regular {
  font-family: var(--ts-display);
  font-weight: 700;
}

/* ---------- 5. Recupero di scala: Barlow Condensed e' piu' stretto di
   Archivo Black, quindi titoli e prezzi salgono di uno step.
   Solo >=769px: sotto i 768px restano attive le regole mobile gia' presenti
   nel file storico, che verrebbero altrimenti scavalcate. ---------- */
@media (min-width: 769px) {
  /* h1 / h2 principali Dawn (blocco "A2" del file storico) */
  .section-header__title,
  .collection-hero__title,
  .rich-text h2,
  .rich-text h1,
  .section h2.title,
  .section .h2,
  .section-content h2,
  .title-wrapper-with-link h2 {
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.04 !important;
  }
  .page-hero h1 { font-size: clamp(30px, 3.4vw, 46px) !important; }

  /* Titolo Super Promo */
  .super-promo-left h3 { font-size: 50px; }
  .super-promo-left h3 .accent { font-size: 58px; }

  /* Prezzi card */
  .pcard-now, .featured-collection .pcard-now { font-size: 22px !important; }
  .promo-card-price .now { font-size: 25px; }
  .deal-card-price .now { font-size: 31px; }
  .ts-bundles .bundle-card-price .now,
  .ts-kits-home .bundle-card-price .now { font-size: 31px; }

  /* Altri titoli display */
  .ts-reviews-title { font-size: 27px; }
  .ts-kits-home .ts-kits-home-title { font-size: 29px; }
}

/* ============================================================
   6. HEADER V6-12 — classi nuove .ts-hdr*, quindi nessuna guerra di
   specificita' con le regole .header-two-row / .quick-chip storiche
   (il markup e' stato rinominato in header-techservice.liquid).
   Il wrapper resta .header-wrap per conservare lo sticky !important
   gia' presente nel file storico (riga ~6772).
   ============================================================ */
.header-wrap.ts-hdr-v12 {
  background: #FFFFFF;
  border-bottom: 0;
  padding: 8px 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ts-hdr-box {
  display: block;
  background: var(--bg-dark, #1F1F1F);
  color: #FFFFFF;
  border-radius: 16px;
  padding: 10px 12px 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.18);
}

/* --- riga 1 --- */
.ts-hdr-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
}
.ts-hdr-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #3A3A38;
  border-radius: 10px;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--ts-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.ts-hdr-menu:hover { background: #2A2A28; border-color: #4A4A48; }
.ts-hdr-menu svg { flex: 0 0 22px; width: 22px; height: 22px; }
.ts-hdr-menu--d { display: none; }

.ts-hdr-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.ts-hdr-logo img {
  height: 62px;
  width: auto;
  object-fit: contain;
}
.ts-hdr-claim {
  display: none;
  border-left: 1px solid #34332F;
  padding-left: 12px;
  font-family: var(--ts-body);
  font-size: 12px;
  line-height: 1.25;
  color: #A9A8A3;
}
.ts-hdr-claim b {
  display: block;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.ts-hdr-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  order: 2;
}
.ts-hdr-account {
  display: none;
  font-family: var(--ts-body);
  font-size: 12px;
  line-height: 1.2;
  color: #BDBDB8;
  white-space: nowrap;
}
.ts-hdr-account b { display: block; color: #FFFFFF; font-size: 13.5px; font-weight: 600; }
.ts-hdr-cart {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  font-family: var(--ts-body);
  font-weight: 600;
  color: #FFFFFF;
}
.ts-hdr-cart:hover { background: #2A2A28; }
.ts-hdr-cart .cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ts-hdr-cart .cart-icon svg { width: 27px; height: 27px; }
.ts-hdr-cart .lbl { display: none; }
/* Badge sull angolo ALTO DESTRO dell icona (prima era spostato a sinistra) */
.ts-hdr-cart .cart-icon .num {
  position: absolute;
  top: -7px;
  right: -9px;
  left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-dark, #1F1F1F);
  border-radius: 10px;
  background: var(--brand, #EA580C);
  color: #FFFFFF;
  font-family: var(--ts-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* --- riga 2 telefono: ricerca a tutta larghezza --- */
.ts-hdr-search {
  order: 3;
  grid-column: 1 / -1;
  display: flex;
  height: 44px;
  margin-top: 10px;
  width: 100%;
}
.ts-hdr-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 10px 0 0 10px;
  padding: 0 14px;
  background: #FFFFFF;
  color: var(--text-primary, #0A0A0A);
  font-family: var(--ts-body);
  font-size: 14px;
}
.ts-hdr-search input::placeholder { color: var(--text-muted, #A3A3A3); }
.ts-hdr-search button {
  flex: 0 0 50px;
  width: 50px;
  border: 0;
  border-radius: 0 10px 10px 0;
  background: var(--danger, #DC2626);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ts-hdr-search button:hover { background: #B91C1C; }
.ts-hdr-search button svg { width: 19px; height: 19px; }

/* --- riga 3 telefono: chip in griglia 3x2 --- */
.ts-hdr-nav { margin-top: 10px; }
.ts-hdr-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ts-hdr-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  line-height: 1;
  border: 1px solid #3A3A38;
  border-radius: 8px;
  color: #E8E8E4;
  font-family: var(--ts-body);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}
.ts-hdr-chip:hover { background: #2A2A28; border-color: #4A4A48; }
.ts-hdr-chip svg { flex: 0 0 14px; width: 14px; height: 14px; display: none; }
.ts-hdr-chip.is-promo { background: var(--danger, #DC2626); border-color: var(--danger, #DC2626); color: #FFFFFF; }
.ts-hdr-chip.is-promo:hover { background: #B91C1C; border-color: #B91C1C; }
.ts-hdr-chip.is-kit { background: #C2410C; border-color: #C2410C; color: #FFFFFF; }
.ts-hdr-chip.is-kit:hover { background: var(--brand, #EA580C); border-color: var(--brand, #EA580C); }
.ts-hdr-chip .qc-full { display: none; }
.ts-hdr-chip .qc-short { display: inline; }

/* --- desktop --- */
@media (min-width: 769px) {
  .header-wrap.ts-hdr-v12 { padding: 12px 0; }
  .ts-hdr-box { padding: 16px 22px 14px; }
  .ts-hdr-menu--m { display: none; }
  .ts-hdr-menu--d { display: inline-flex; flex: 0 0 auto; }
  .ts-hdr-row { grid-template-columns: auto minmax(280px, 1fr) auto; column-gap: 28px; }
  .ts-hdr-logo { justify-content: flex-start; }
  .ts-hdr-logo img { height: var(--ts-logo-h, 76px); }
  .ts-hdr-claim { display: block; }
  .ts-hdr-actions { order: 0; }
  .ts-hdr-account { display: block; }
  .ts-hdr-cart .lbl { display: inline; }
  .ts-hdr-search {
    order: 0;
    grid-column: auto;
    margin-top: 0;
    height: 48px;
    max-width: 640px;
  }
  .ts-hdr-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #2E2E2C;
  }
  .ts-hdr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .ts-hdr-chip { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .ts-hdr-chip svg { display: block; }
  .ts-hdr-chip .qc-full { display: inline; }
  .ts-hdr-chip .qc-short { display: none; }
}
@media (min-width: 1100px) {
  .ts-hdr-box { padding: 18px 26px 16px; }
  .ts-hdr-logo img { height: calc(var(--ts-logo-h, 76px) + 8px); }
}

/* ============================================================
   7. Mega drawer — solo adeguamento tipografico (struttura V6-11 invariata)
   ============================================================ */
.mega-header h3 { font-family: var(--ts-mono); letter-spacing: 0.08em; }
.mega-col > summary h4 { font-family: var(--ts-display); font-weight: 700; letter-spacing: 0; font-size: 18px; }
.mega-featured .txt .t { font-family: var(--ts-display); font-weight: 800; letter-spacing: -0.005em; font-size: 20px; }
.mega-quick .txt .t { font-family: var(--ts-body); font-weight: 600; }
.mega-quick .txt .s, .mega-featured .txt .s { font-family: var(--ts-body); }

/* Logo SVG di fallback (logo_mode = svg): stessa scala del logo immagine */
.ts-hdr-logo .ts-hdr-logo-svg { height: 62px; width: auto; display: block; }
.ts-hdr-logo .brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (min-width: 769px) {
  .ts-hdr-logo .ts-hdr-logo-svg { height: var(--ts-logo-h, 76px); }
}
@media (min-width: 1100px) {
  .ts-hdr-logo .ts-hdr-logo-svg { height: calc(var(--ts-logo-h, 76px) + 8px); }
}

/* ===== V6-12 blocco B ===== */
/* ============================================================
   V6-12 · PACCHETTO B — Super Promo, Promo Esclusive (mosaico), Categorie home
   Da unire in coda a assets/section-techservice-custom.css (ordine A, B, C, D).
   Contiene SOLO contenitori, testate, track e tessere: nessuna regola sulle card
   prodotto (.pcard) e nessuna regola sulle bundle card (.bundle-card).
   Sta in coda al file: a parità di specificità vince su tutti i blocchi precedenti.
   ============================================================ */

/* ============================================================
   B1 · SUPER PROMO (sections/super-promo.liquid)
   ============================================================ */

/* ---------- TELEFONO (<= 768px) ----------
   I bottoni ora stanno DENTRO il banner scuro (markup V6-12):
   griglia a 2 colonne — testo a sinistra, bollino -50% a destra —
   e i due bottoni sotto, a tutta larghezza. Banner alto ~160px. */
@media (max-width: 768px) {
  .super-promo.sp-v2 .sp-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    column-gap: 12px;
    row-gap: 12px;
    min-height: 160px;
    padding: 14px 16px;
  }
  .super-promo.sp-v2 .sp-banner-txt {
    flex: 0 1 auto;
    align-self: center;
  }
  .super-promo.sp-v2 .sp-banner .super-promo-sticker {
    margin-left: 0;
    justify-self: end;
    align-self: center;
  }
  /* Riga 2: i due bottoni occupano tutte e due le colonne */
  .super-promo.sp-v2 .sp-banner .super-promo-actions {
    grid-column: 1 / -1;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .super-promo.sp-v2 .sp-banner .super-promo-actions .super-promo-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    border-radius: 999px;
  }
}

/* Telefoni stretti: il banner resta leggibile anche con il titolo su una riga */
@media (max-width: 359px) {
  .super-promo.sp-v2 .sp-banner {
    column-gap: 10px;
    padding: 12px 14px;
  }
}

/* ---------- DESKTOP (>= 1025px) ----------
   Banner su una riga (testo · bottoni · bollino) già impostato in V6-11b.
   Qui il carosello esce dal container fino al bordo destro dello schermo:
   colonne calcolate su 4,5 card e margine destro negativo che annulla
   il gutter del .container (max-width 1280px + padding 24px).
   html/body hanno overflow-x: clip, quindi la sporgenza non crea scroll pagina. */
@media (min-width: 1025px) {
  .super-promo.sp-v2 .super-promo-right {
    overflow: visible;
  }
  .super-promo.sp-v2 .super-promo-right .product-carousel-track {
    grid-auto-columns: calc((min(100vw, 1280px) - 48px - 4 * 14px) / 4.5);
    gap: 14px;
    margin-right: calc(-1 * ((100vw - min(100vw, 1280px)) / 2 + 24px));
    padding-right: 24px;
    scroll-padding-inline: 0;
  }
}

/* ============================================================
   B2 · PROMO ESCLUSIVE · HOME (sections/pacchetti-promo-home.liquid)
   Variante "Cartellini": mosaico di tessere dentro la card bianca esistente
   (.ts-kits-home-section > .ts-kits-home, pacchetto C di V6-11: bordo,
   raggio, striscia arancio in alto restano invariati).
   ============================================================ */

/* Testata: occhiello con icona, conteggio kit a destra */
.ts-kits-home .ts-kits-home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ts-kits-home .ts-kits-home-eyebrow svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.ts-kits-home .ts-kits-home-actions {
  align-items: center;
}
.ts-kits-home .ts-kits-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.3;
  color: #737373;
  white-space: nowrap;
}

/* ---------- Mosaico ----------
   Telefono: 2 colonne, la tessera grande a tutta larghezza, la scura in fondo. */
.ts-kits-home .ts-esc-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.ts-kits-home .ts-esc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-kits-home .ts-esc-tile:hover {
  border-color: #1F1F1F;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.ts-kits-home .ts-esc-tile-img {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 18px 10px 6px;
}
.ts-kits-home .ts-esc-tile-img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  transition: transform .25s ease;
}
.ts-kits-home .ts-esc-tile:hover .ts-esc-tile-img img {
  transform: scale(1.03);
}
.ts-kits-home .ts-esc-tile-img .pcard-placeholder-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90px;
  border-radius: 0;
  aspect-ratio: auto;
}
.ts-kits-home .ts-esc-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 12px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #1F1F1F;
}

/* Tessera grande: prima del mosaico, a tutta larghezza su telefono */
.ts-kits-home .ts-esc-tile--big {
  grid-column: 1 / -1;
}
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-img {
  min-height: 200px;
  padding-top: 24px;
}
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-img img {
  max-height: 210px;
}
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-name {
  padding: 0 16px 16px;
  font-size: 17px;
}

/* ---------- Cartellino prezzo ----------
   Rettangolo bianco con foro tondo a sinistra, prezzo grande,
   prezzo pieno barrato sopra, etichetta sconto rossa che sborda in basso a sinistra. */
.ts-kits-home .ts-esc-price {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 10px 6px 18px;
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  text-align: right;
}
.ts-kits-home .ts-esc-price::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #FAFAFA;
  box-shadow: inset 0 0 0 1px #D4D4D4;
}
.ts-kits-home .ts-esc-price .was {
  display: block;
  font-size: 11px;
  line-height: 1.1;
  color: #A3A3A3;
  text-decoration: line-through;
}
.ts-kits-home .ts-esc-price .now {
  display: block;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #1F1F1F;
}
.ts-kits-home .ts-esc-price .now--ask {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0;
  color: #C2410C;
}
.ts-kits-home .ts-esc-price .off {
  position: absolute;
  left: -8px;
  bottom: -9px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}
.ts-kits-home .ts-esc-tile--big .ts-esc-price .now {
  font-size: 24px;
}

/* ---------- Tessera scura finale ---------- */
.ts-kits-home .ts-esc-tile--all {
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 12px;
  min-height: 120px;
  padding: 16px;
  background: #1F1F1F;
  border-color: #1F1F1F;
  color: #FFFFFF;
}
.ts-kits-home .ts-esc-tile--all:hover {
  background: #111111;
  border-color: #111111;
}
.ts-kits-home .ts-esc-all-title {
  display: block;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #FFFFFF;
}
.ts-kits-home .ts-esc-all-sub {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #C9C9C5;
}
.ts-kits-home .ts-esc-all-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

/* ---------- Note sotto il mosaico ---------- */
.ts-kits-home .ts-esc-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #525252;
}
.ts-kits-home .ts-esc-notes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ts-kits-home .ts-esc-notes svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: #C2410C;
}

/* ---------- Desktop: 4 colonne, tessera grande 2x2, scura a tutta riga ---------- */
@media (min-width: 769px) {
  .ts-kits-home .ts-esc-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 188px);
    grid-auto-rows: auto;
    gap: 14px;
    margin-top: 20px;
  }
  .ts-kits-home .ts-esc-tile--big {
    grid-column: span 2;
    grid-row: span 2;
  }
  .ts-kits-home .ts-esc-tile-img {
    min-height: 0;
    padding: 14px 10px 4px;
  }
  .ts-kits-home .ts-esc-tile-img img {
    max-height: 120px;
  }
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-img {
    min-height: 0;
    padding: 22px 18px 6px;
  }
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-img img {
    max-height: 280px;
  }
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-name {
    font-size: 19px;
  }
  .ts-kits-home .ts-esc-tile--all {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 0;
    padding: 18px 22px;
  }
  .ts-kits-home .ts-esc-all-sub {
    margin-top: 4px;
  }
  .ts-kits-home .ts-esc-notes {
    margin-top: 18px;
    font-size: 13.5px;
  }
}

/* ============================================================
   B3 · CATEGORIE HOME (sections/featured-collection.liquid)
   Bordo superiore sottile + padding ridotto al posto delle fasce colorate.
   ============================================================ */

/* Il wrapper <section class="section"> aveva padding 88px (36-56px sotto i 1024px):
   è da lì che veniva lo spazio enorme fra una categoria e l'altra. La sezione ora
   aggiunge anche la classe .ts-cat-section sul wrapper, così qui lo azzero e la
   spaziatura la danno il margin di .ts-cat + il padding sopra il bordo. */
.ts-cat-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ts-featured-collection.ts-cat {
  margin: 40px 0 0;
  background: none;
}
.ts-cat > .container {
  border-top: 1px solid #E5E5E5;
  padding-top: 22px;
}

/* Testata */
.ts-cat .ts-cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ts-cat .ts-cat-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ts-cat .ts-cat-title {
  margin: 0;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: none;
  color: #1F1F1F;
}
.ts-cat .ts-cat-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.3;
  color: #737373;
  white-space: nowrap;
}
.ts-cat .ts-cat-lead {
  margin: 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.5;
  color: #525252;
}
.ts-cat .ts-cat-lead p {
  margin: 0;
}

/* Riga sottocategorie: telefono = scorre in orizzontale fino al bordo schermo */
.ts-cat .ts-cat-subs {
  display: flex;
  gap: 6px;
  margin: 2px -24px 0;
  padding: 2px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ts-cat .ts-cat-subs::-webkit-scrollbar {
  display: none;
}
.ts-cat .ts-cat-subs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #525252;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.ts-cat .ts-cat-subs a:hover {
  border-color: #1F1F1F;
  color: #1F1F1F;
}
.ts-cat .ts-cat-subs a em {
  font-style: normal;
  font-size: 12px;
  color: #A3A3A3;
}

/* Colonna destra (link "vedi tutti" + frecce): solo desktop */
.ts-cat .ts-cat-side {
  display: none;
}
.ts-cat .ts-cat-side .ts-view-all-inline {
  flex: 0 0 auto;
  padding: 0 0 2px;
  border-bottom: 2px solid #EA580C;
  color: #1F1F1F;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.ts-cat .ts-cat-side .ts-view-all-inline:hover {
  color: #C2410C;
  border-bottom-color: #C2410C;
}

/* Carosello: telefono = card al 56% (si vede mezza card successiva), a filo schermo */
.ts-cat .ts-cat-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56%;
  gap: 10px;
  margin: 0 -24px;
  padding: 2px 24px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ts-cat .ts-cat-track::-webkit-scrollbar {
  display: none;
}
.ts-cat .ts-cat-track > * {
  min-width: 0;
  scroll-snap-align: start;
}

/* <= 640px il .container passa a 16px di gutter */
@media (max-width: 640px) {
  .ts-cat .ts-cat-subs {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .ts-cat .ts-cat-track {
    margin: 0 -16px;
    padding: 2px 16px 6px;
    scroll-padding-inline: 16px;
  }
}

/* Desktop: testata su due colonne (testo a sinistra, link + frecce a destra),
   sottocategorie a capo, carosello a N card in riga (--ts-cat-cols dalla sezione). */
@media (min-width: 769px) {
  .ts-featured-collection.ts-cat {
    margin-top: 56px;
  }
  .ts-cat > .container {
    padding-top: 28px;
  }
  .ts-cat .ts-cat-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 32px;
    margin-bottom: 18px;
  }
  .ts-cat .ts-cat-top {
    justify-content: flex-start;
    gap: 14px;
  }
  .ts-cat .ts-cat-title {
    font-size: 34px;
  }
  .ts-cat .ts-cat-subs {
    grid-column: 1 / 2;
    flex-wrap: wrap;
    overflow: visible;
    margin: 4px 0 0;
    padding: 0;
  }
  .ts-cat .ts-cat-side {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }
  .ts-cat .ts-cat-track {
    grid-auto-columns: calc((100% - (var(--ts-cat-cols, 5) - 1) * 14px) / var(--ts-cat-cols, 5));
    gap: 14px;
    margin: 0;
    padding: 2px 0 6px;
    scroll-padding-inline: 0;
  }
}

/* ===== V6-12 blocco C ===== */
/* ============================================================
   TECHSERVICE V6-12 — PACCHETTO C
   Card prodotto nuova (.pc) + aggiunta al carrello animata.
   Da unire in coda a assets/section-techservice-custom.css (ordine A, B, C, D).

   Nota: le classi sono nuove (.pc*, .btn-add, .ts-fly, .ts-bump).
   Nessuna regola .pcard* esistente le intercetta, quindi il CSS storico
   della vecchia card resta inerte finché qualche sezione lo usa ancora
   (stati vuoti "Configura collezione" nel Customizer).
   ============================================================ */

/* ---------- token locali della card ---------- */
:root {
  --pc-line: var(--border, #E5E5E5);
  --pc-line-hover: var(--border-hover, #D4D4D4);
  --pc-ink: #1F1F1F;
  --pc-ink-2: #4A4A48;
  --pc-ink-3: #737373;
  --pc-green: #15803D;
  --pc-amber: #B45309;
  --pc-grey: #A8A8A4;
}

/* ---------- guscio ---------- */
.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--pc-line);
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color var(--t-fast, 150ms ease), box-shadow var(--t-fast, 150ms ease);
}
.pc:hover {
  border-color: var(--pc-line-hover);
  box-shadow: 0 6px 22px rgba(28, 28, 28, 0.07);
}

/* ---------- foto 4/3 su fondo bianco ---------- */
.pc-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 8px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--pc-line);
}
.pc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pc-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #FAFAFA;
}
.pc--out .pc-img img { opacity: 0.55; }

/* badge sconto rosso in alto a sinistra */
.pc-off {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 5px 7px 4px;
  border-radius: 5px;
  background: var(--danger, #DC2626);
  color: #FFFFFF;
  font-family: 'Barlow Condensed', 'Arial Narrow', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

/* cartellino Super promo (parametro superpromo delle sezioni) */
.pc-promo {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 5px 8px 4px;
  border-radius: 5px;
  background: #FFD600;
  color: #1F1F1F;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- corpo ---------- */
.pc-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 12px;
}

.pc-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dim, #C2410C);
}

.pc-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pc-ink);
  overflow-wrap: anywhere;
}
.pc-title:hover { color: var(--brand, #EA580C); }

/* riga stato */
.pc-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pc-ink-3);
}
.pc-stock i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc-green);
  flex: 0 0 7px;
}
.pc-stock.is-low { color: var(--pc-amber); }
.pc-stock.is-low i { background: var(--pc-amber); }
.pc-stock.is-out i { background: var(--pc-grey); }
.pc-stock.is-ship i { background: var(--brand, #EA580C); }

/* prezzi */
.pc-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: auto;
  padding-top: 4px;
}
.pc-now {
  font-family: 'Barlow Condensed', 'Arial Narrow', 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pc-ink);
}
.pc-was {
  font-size: 12.5px;
  color: var(--pc-ink-3);
  text-decoration: line-through;
}
.pc-save {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger, #DC2626);
}

.pc-ask {
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pc-ink-2);
}

/* ---------- bottone ---------- */
.btn-add {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  margin-top: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: var(--pc-ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast, 150ms ease), color var(--t-fast, 150ms ease);
}
.btn-add svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.btn-add:hover { background: #000000; color: #FFFFFF; }
.btn-add.is-ok { background: var(--pc-green); }
.btn-add.is-ok:hover { background: var(--pc-green); }
.btn-add.is-err { background: var(--danger, #DC2626); }
.btn-add.is-err:hover { background: var(--danger, #DC2626); }
.btn-add.is-busy { opacity: 0.75; }
.btn-add[disabled] {
  background: #E7E6E2;
  color: #8A8A86;
  cursor: default;
}
.btn-add[disabled]:hover { background: #E7E6E2; color: #8A8A86; }

/* bottone WhatsApp per i prodotti a preventivo */
.btn-ask {
  background: #FFFFFF;
  color: var(--pc-ink);
  border: 1.5px solid var(--pc-ink);
}
.btn-ask svg { color: var(--whatsapp, #25D366); }
.btn-ask:hover { background: var(--pc-ink); color: #FFFFFF; }
.btn-ask:hover svg { color: #FFFFFF; }

/* ---------- animazioni ---------- */
.ts-fly {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  object-fit: contain;
}

@keyframes ts-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
#cart-icon-bubble .num.ts-bump {
  animation: ts-bump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ts-fly { display: none; }
  #cart-icon-bubble .num.ts-bump { animation: none; }
}

/* ---------- contenitori esistenti (griglie e caroselli) ---------- */
/* Le regole storiche puntano a .pcard: qui le stesse misure per .pc. */
.product-carousel-track > .pc,
.cat-grid-products > .pc,
.vetrina-grid > .pc,
.grid__item > .pc {
  min-width: 0;
  max-width: 100%;
}
.super-promo .product-carousel-track > .pc,
.super-promo-right .product-carousel-track > .pc {
  scroll-snap-align: start;
}
.grid__item > .pc { height: 100%; }

/* Guardia: .pc è usata anche dai chip pagamento PDP (.ts-pdp-payrow .pc, CSS storico).
   Li riporto in riga così restano identici anche se la sezione tornasse in uso. */
.ts-pdp-payrow .pc {
  flex-direction: row;
  height: 30px;
  overflow: visible;
}

/* ---------- desktop ---------- */
@media (min-width: 769px) {
  .pc-body { padding: 14px; }
  .btn-add { height: 44px; }
  .pc-off { top: 10px; left: 10px; font-size: 15px; padding: 6px 8px 5px; }
  .pc-promo { top: 10px; right: 10px; }
  .pc-now { font-size: 22px; }
  .pc-title { font-size: 15px; }
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .pc-body { padding: 10px 10px 12px; gap: 5px; }
  .pc-title { font-size: 13px; min-height: 2.6em; }
  .pc-brand { font-size: 10.5px; }
  .pc-now { font-size: 18px; }
  .pc-was { font-size: 11.5px; }
  .pc-save { font-size: 11px; }
  .pc-stock { font-size: 11.5px; }
  .pc-off { font-size: 12px; padding: 4px 6px 3px; }
  .btn-add { height: 40px; font-size: 13px; gap: 6px; margin-top: 8px; }
  .btn-add svg { width: 15px; height: 15px; flex-basis: 15px; }
}

@media (max-width: 400px) {
  .btn-add { font-size: 12.5px; gap: 5px; }
  .btn-add .long { display: none; }
}

/* ===== V6-12 blocco D ===== */
/* ============================================================
   V6-12 — BLOCCO D
   Form preventivo → WhatsApp (sezione usp-form-techservice)
   Namespace nuovo .ts-ask* + neutralizzazione delle vecchie
   regole .usp / .usp-form / .field dentro la sezione.
   ============================================================ */

/* ------------------------------------------------------------
   D0. NEUTRALIZZA IL VECCHIO FORM
   Le vecchie regole (.usp, .usp-form, .usp-form .field, .usp-form
   input/label/textarea, .usp-form-actions) disegnavano il riquadro
   scuro col bordo nero attorno al form. Il markup nuovo non usa più
   quelle classi, ma se restano annidate/riusate le azzeriamo qui
   battendone la specificità (selettore doppio + !important).
   ------------------------------------------------------------ */
.section-usp-form .usp,
.section-usp-form .section-usp-form .usp,
.section-usp-form .usp-form,
.section-usp-form .section-usp-form .usp-form,
.section-usp-form .usp-head,
.section-usp-form .usp-copy,
.section-usp-form .usp-features,
.section-usp-form .usp-form-actions,
.ts-ask .usp,
.ts-ask .usp-form,
.ts-ask .usp-form-actions {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  display: block;
}

.section-usp-form .usp::before,
.ts-ask .usp::before,
.ts-ask .usp-form::before,
.ts-ask .usp-form::after {
  content: none !important;
  display: none !important;
}

/* campi/label ereditati dal tema (Dawn .field, vecchio .usp-form) */
.ts-ask .field,
.ts-ask .usp-form .field,
.section-usp-form .ts-ask .field {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.ts-ask .field::before,
.ts-ask .field::after {
  content: none !important;
  display: none !important;
}

/* ------------------------------------------------------------
   D1. GUSCIO SEZIONE
   ------------------------------------------------------------ */
.ts-ask {
  background: var(--bg-dark, #1F1F1F);
  color: #FFFFFF;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  margin: 72px auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ts-ask *,
.ts-ask *::before,
.ts-ask *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   D2. COLONNA SCURA (intro + persone)
   ------------------------------------------------------------ */
.ts-ask-intro {
  padding: 26px 22px 10px;
  position: relative;
  z-index: 1;
}

.ts-ask-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FED7AA;
  margin-bottom: 12px;
}

.ts-ask-title {
  margin: 0;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.ts-ask-accent {
  color: #FFB27A;
}

.ts-ask-lead {
  margin: 14px 0 0;
  color: #CFCFCA;
  font-size: 15px;
  line-height: 1.55;
  max-width: 46ch;
}

.ts-ask-people {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ts-ask-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-ask-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: #2E2E2C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.ts-ask-person-text {
  display: block;
  min-width: 0;
}

.ts-ask-person-text b {
  display: block;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
}

.ts-ask-person-meta {
  display: block;
  color: #CFCFCA;
  font-size: 13px;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   D3. RIQUADRO BIANCO
   ------------------------------------------------------------ */
.ts-ask-panel {
  margin: 16px;
  background: #FFFFFF;
  color: var(--text-primary, #0A0A0A);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* fieldset senza cornice di default */
.ts-ask-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ts-ask-legend {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0A0A0A);
}

.ts-ask-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ts-ask-kind {
  position: relative;
}

/* radio nativo invisibile ma focalizzabile */
.ts-ask-kind-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ts-ask-kind-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1.5px solid var(--border, #E5E5E5);
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary, #404040);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ts-ask-kind-label:hover {
  border-color: var(--border-strong, #A3A3A3);
}

.ts-ask-kind-input:checked + .ts-ask-kind-label {
  background: var(--bg-dark, #1F1F1F);
  border-color: var(--bg-dark, #1F1F1F);
  color: #FFFFFF;
}

.ts-ask-kind-input:focus-visible + .ts-ask-kind-label {
  outline: 3px solid var(--brand, #EA580C);
  outline-offset: 2px;
}

/* fallback per browser senza :focus-visible */
.ts-ask-kind-input:focus + .ts-ask-kind-label {
  outline: 3px solid var(--brand, #EA580C);
  outline-offset: 2px;
}
.ts-ask-kind-input:focus:not(:focus-visible) + .ts-ask-kind-label {
  outline: none;
}

/* ---- campi ---- */
.ts-ask-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ts-ask-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ts-ask-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0A0A0A);
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.ts-ask-input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--border, #E5E5E5);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--text-primary, #0A0A0A);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.ts-ask-textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.ts-ask-input::placeholder {
  color: var(--text-tertiary, #737373);
  opacity: 1;
}

.ts-ask-input:hover {
  border-color: var(--border-hover, #D4D4D4);
}

.ts-ask-input:focus {
  outline: 3px solid var(--brand, #EA580C);
  outline-offset: 1px;
  border-color: var(--brand, #EA580C);
}

/* ---- anteprima messaggio ---- */
.ts-ask-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ts-ask-preview-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary, #404040);
}

.ts-ask-bubble {
  margin: 0;
  background: #E8F5E9;
  border-radius: 12px 12px 12px 4px;
  padding: 11px 13px;
  min-height: 62px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #14331A;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- bottone WhatsApp ---- */
.ts-ask-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border-radius: 11px;
  border: 0;
  background: var(--whatsapp, #25D366);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background 150ms ease, transform 150ms ease;
}

.ts-ask-send:hover {
  background: #1FB458;
  color: #FFFFFF;
}

.ts-ask-send:focus-visible {
  outline: 3px solid var(--bg-dark, #1F1F1F);
  outline-offset: 2px;
}

.ts-ask-send-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* stato "non ancora compilato": grigio, ma sempre attivabile da tastiera */
.ts-ask-send[aria-disabled="true"] {
  background: #9AAE9F;
  cursor: not-allowed;
}
.ts-ask-send[aria-disabled="true"]:hover {
  background: #9AAE9F;
}

.ts-ask-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary, #404040);
  text-align: center;
  min-height: 0;
}
.ts-ask-hint:empty {
  display: none;
}

.ts-ask-foot {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary, #404040);
  text-align: center;
}

/* ------------------------------------------------------------
   D4. DESKTOP — due colonne
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  .ts-ask {
    grid-template-columns: 1fr 1.05fr;
    align-items: stretch;
    margin: 88px auto;
  }
  .ts-ask-intro {
    padding: 44px 42px;
    align-self: center;
  }
  .ts-ask-panel {
    margin: 18px;
    padding: 26px;
    gap: 16px;
  }
  .ts-ask-kinds {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .ts-ask {
    margin: 48px auto;
  }
  .ts-ask-row {
    grid-template-columns: 1fr;
  }
  .ts-ask-kinds {
    grid-template-columns: 1fr;
  }
  .ts-ask-intro {
    padding: 22px 18px 8px;
  }
  .ts-ask-panel {
    margin: 12px;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-ask-kind-label,
  .ts-ask-send {
    transition: none;
  }
}

/* ============================================================
   V6-12b (16/09/2026) — foto prodotto tutte uguali, header compatto su telefono
   ============================================================ */

/* 1. Stessa larghezza di card (quindi stessa foto) in tutti i caroselli home.
   Prima: Super Promo 4,5 card (261px) vs categorie 5 card (235px). */
@media (min-width:1025px){
  .super-promo.sp-v2 .super-promo-right .product-carousel-track{
    grid-auto-columns: calc((min(100vw,1280px) - 48px - 4 * 14px) / 5) !important;
  }
}
@media (min-width:769px) and (max-width:1024px){
  .super-promo.sp-v2 .super-promo-right .product-carousel-track{
    grid-auto-columns: calc((100% - 3 * 14px) / 4) !important;
  }
}
@media (max-width:768px){
  .super-promo.sp-v2 .super-promo-right .product-carousel-track{
    grid-auto-columns: 56% !important;
  }
}
/* 2. Riquadro foto identico ovunque: stesso rapporto, stesso margine interno */
.pc .pc-img{aspect-ratio:4/3;padding:10px;background:#FFFFFF;}
.pc .pc-img img{width:100%;height:100%;object-fit:contain;}

/* 3. Header compatto su telefono: scorrendo restano logo, ricerca e carrello */
@media (max-width:768px){
  .ts-hdr-v12{transition:padding .18s ease;}
  .ts-hdr-v12.is-compact .ts-hdr-box{padding-top:6px;padding-bottom:6px;}
  .ts-hdr-v12.is-compact .ts-hdr-nav{display:none;}
  .ts-hdr-v12.is-compact .ts-hdr-logo{--ts-logo-h:42px;}
  .ts-hdr-v12.is-compact .ts-hdr-search{height:38px;margin-top:6px;}
  .ts-hdr-v12.is-compact .ts-hdr-menu,
  .ts-hdr-v12.is-compact .ts-hdr-cart{height:38px;}
}
@media (prefers-reduced-motion:reduce){.ts-hdr-v12{transition:none;}}

/* ============================================================
   V6-12c — Promo Esclusive: il cartellino prezzo non copre più la foto
   Va in basso a destra, sulla fascia bianca accanto al nome del kit.
   ============================================================ */
.ts-kits-home .ts-esc-price{
  top:auto;
  bottom:10px;
  right:10px;
}
.ts-kits-home .ts-esc-price .off{
  top:-11px;
  bottom:auto;
  left:-8px;
}
/* spazio per il cartellino accanto al nome */
.ts-kits-home .ts-esc-tile-name{
  padding-right:104px;
  min-height:2.5em;
}
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{
  padding-right:150px;
}
/* la foto può tornare a usare tutta l'altezza della tessera */
.ts-kits-home .ts-esc-tile-img{padding-top:12px;}
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-img{padding-top:16px;}
@media (max-width:768px){
  .ts-kits-home .ts-esc-price{bottom:8px;right:8px;padding:5px 8px 5px 16px;}
  .ts-kits-home .ts-esc-tile-name{padding-right:92px;}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{padding-right:120px;}
}
@media (max-width:400px){
  .ts-kits-home .ts-esc-price .now{font-size:15px;}
  .ts-kits-home .ts-esc-tile-name{padding-right:86px;font-size:12.5px;}
}

/* ============================================================
   V6-13 PAGINE INTERNE (16/09/2026) — collezione, scheda prodotto, vetrine, recensioni
   ============================================================ */
/* ===== V6-13 blocco A ===== */
/* ===== V6-13 blocco A ===== */
/* ============================================================
   TECHSERVICE V6-13 · BLOCCO A — wp13A.css
   Pagina collezione (sections/collection-v12.liquid).
   Da concatenare IN CODA a assets/section-techservice-custom.css
   dopo i blocchi V6-12 A, B, C, D.

   Tutte le regole sono scoped sotto .ts-col: nessuna classe generica
   (.tools, .filters, .pager…) esce dalla sezione, quindi Dawn e il CSS
   storico non vengono toccati.
   Le card prodotto (.pc / .btn-add) restano di competenza del blocco C
   V6-12: qui si dichiara solo il contenitore .col-grid.
   ============================================================ */

.ts-col {
  /* token locali mappati sui token globali del tema */
  --col-ink: var(--text-primary, #0A0A0A);
  --col-ink-2: var(--text-secondary, #404040);
  --col-ink-3: var(--text-tertiary, #737373);
  --col-line: var(--border, #E5E5E5);
  --col-line-2: var(--border-hover, #D4D4D4);
  --col-orange: var(--brand, #EA580C);
  --col-mono: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);

  padding-bottom: 40px;
  color: var(--col-ink);
}

/* ------------------------------------------------------------
   1. Breadcrumb
   ------------------------------------------------------------ */
.ts-col .crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--col-ink-3);
  padding: 14px 0 0;
}
.ts-col .crumb a { color: var(--col-ink-3); }
.ts-col .crumb a:hover { color: var(--col-ink); }
.ts-col .crumb span[aria-current] { color: var(--col-ink); }

/* ------------------------------------------------------------
   2. Testata
   ------------------------------------------------------------ */
.ts-col .col-head { padding: 14px 0 0; }

.ts-col .col-count {
  display: inline-block;
  font-family: var(--col-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--col-ink-3);
}

.ts-col .col-title {
  margin: 6px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.ts-col .col-lead {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--col-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* riga sottocategorie: scroller a filo schermo su telefono, wrap su desktop */
.ts-col .col-subs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 14px -24px 0;
  padding: 0 24px;
}
.ts-col .col-subs::-webkit-scrollbar { display: none; }
.ts-col .col-subs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 13px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--col-line);
  color: var(--col-ink-2);
  transition: border-color 150ms ease, color 150ms ease;
}
.ts-col .col-subs a:hover { border-color: var(--col-line-2); color: var(--col-ink); }
.ts-col .col-subs a.on {
  background: var(--col-ink);
  border-color: var(--col-ink);
  color: #FFFFFF;
}

@media (max-width: 640px) {
  .ts-col .col-subs { margin: 14px -16px 0; padding: 0 16px; }
}
@media (min-width: 769px) {
  .ts-col .col-subs {
    flex-wrap: wrap;
    overflow: visible;
    margin: 16px 0 0;
    padding: 0;
  }
}

/* ------------------------------------------------------------
   3. Barra strumenti
   ------------------------------------------------------------ */
.ts-col .tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--col-line);
  border-bottom: 1px solid var(--col-line);
}
.ts-col .tools-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ts-col .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--col-line-2);
  background: #FFFFFF;
  color: var(--col-ink);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ts-col .filter-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.ts-col .filter-btn:hover { border-color: var(--col-ink); }
.ts-col .filter-btn.on {
  background: var(--col-ink);
  border-color: var(--col-ink);
  color: #FFFFFF;
}
.ts-col .filter-btn .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--col-orange);
  color: #FFFFFF;
  font-family: var(--col-mono);
  font-size: 11px;
}

.ts-col .tools-count {
  display: none;
  font-family: var(--col-mono);
  font-size: 12px;
  color: var(--col-ink-3);
}
@media (min-width: 769px) {
  .ts-col .tools-count { display: inline; }
}

.ts-col .sortwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--col-ink-3);
  white-space: nowrap;
}
.ts-col .sortwrap label { margin: 0; font-size: 13px; color: var(--col-ink-3); }
.ts-col .sortwrap select {
  height: 40px;
  max-width: 62vw;
  border-radius: 9px;
  border: 1px solid var(--col-line-2);
  background-color: #FFFFFF;
  padding: 0 32px 0 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--col-ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  cursor: pointer;
}
.ts-col .sortwrap .sort-go {
  height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--col-ink);
  background: var(--col-ink);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13.5px;
}

/* ------------------------------------------------------------
   4. Pannello filtri (filtri veri Shopify)
   ------------------------------------------------------------ */
.ts-col .filters {
  display: none;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 24px;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--col-line);
}
.ts-col .filters.open { display: flex; }

.ts-col .fgroup { min-width: 170px; max-width: 260px; }
.ts-col .fgroup h4 {
  margin: 0 0 8px;
  font-family: var(--col-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--col-ink-3);
}
.ts-col .fopts {
  display: flex;
  flex-direction: column;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}
.ts-col .fopt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--col-ink-2);
  padding: 4px 0;
  cursor: pointer;
}
.ts-col .fopt input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--col-orange);
  cursor: pointer;
}
.ts-col .fopt .t { min-width: 0; }
.ts-col .fopt .c {
  margin-left: auto;
  font-family: var(--col-mono);
  color: var(--col-ink-3);
  font-size: 11.5px;
}
.ts-col .fopt.is-off { opacity: 0.45; cursor: not-allowed; }
.ts-col .fopt.is-off input { cursor: not-allowed; }

.ts-col .frange { display: flex; align-items: center; gap: 8px; }
.ts-col .frange span { color: var(--col-ink-3); }
.ts-col .frange input {
  width: 84px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--col-line-2);
  background: #FFFFFF;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--col-ink);
}

.ts-col .factions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  align-self: flex-end;
}
.ts-col .fapply {
  height: 40px;
  padding: 0 18px;
  border-radius: 9px;
  border: 1px solid var(--col-ink);
  background: var(--col-ink);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.ts-col .fapply:hover { background: #000000; }
.ts-col .fclear {
  font-size: 13px;
  font-weight: 600;
  color: var(--col-ink);
  border-bottom: 2px solid var(--col-orange);
  padding-bottom: 1px;
}
.ts-col .fclear:hover { color: var(--col-orange); }

@media (max-width: 600px) {
  .ts-col .fgroup { min-width: 100%; max-width: none; }
  .ts-col .factions { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------
   5. Griglia prodotti — 2 / 3 / 4 colonne
   ------------------------------------------------------------ */
.ts-col .col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.ts-col .col-grid > .pc { min-width: 0; max-width: 100%; height: 100%; }

@media (min-width: 601px) {
  .ts-col .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1025px) {
  .ts-col .col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
}

/* ------------------------------------------------------------
   6. Paginazione — a capo su telefono, mai scroll orizzontale
   ------------------------------------------------------------ */
.ts-col .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 26px 0 8px;
}
.ts-col .pager a,
.ts-col .pager span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 9px;
  border: 1px solid var(--col-line);
  background: #FFFFFF;
  color: var(--col-ink-2);
  font-weight: 600;
  font-size: 14px;
}
.ts-col .pager a:hover { border-color: var(--col-ink); color: var(--col-ink); }
.ts-col .pager .on {
  background: var(--col-ink);
  border-color: var(--col-ink);
  color: #FFFFFF;
}
.ts-col .pager .dots { border: 0; background: none; min-width: 20px; }

/* ------------------------------------------------------------
   7. Stato vuoto
   ------------------------------------------------------------ */
.ts-col .col-empty {
  margin-top: 24px;
  padding: 44px 20px;
  border: 1px solid var(--col-line);
  border-radius: 14px;
  background: #FFFFFF;
  text-align: center;
}
.ts-col .col-empty h2 { margin: 0 0 6px; font-size: 22px; }
.ts-col .col-empty p {
  margin: 0 auto 18px;
  max-width: 48ch;
  color: var(--col-ink-2);
  font-size: 14.5px;
}
.ts-col .col-empty-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--col-orange);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
}
.ts-col .col-empty-btn:hover { background: var(--brand-bright, #F97316); }

/* ------------------------------------------------------------
   8. Blocco testo finale (SEO)
   ------------------------------------------------------------ */
.ts-col .col-foot {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--col-line);
  border-radius: 14px;
  background: #FFFFFF;
}
.ts-col .col-foot h2 { margin: 0 0 6px; font-size: 20px; }
.ts-col .col-foot-rte { color: var(--col-ink-2); font-size: 14px; max-width: 80ch; }
.ts-col .col-foot-rte p { margin: 0 0 10px; }
.ts-col .col-foot-rte p:last-child { margin-bottom: 0; }
.ts-col .col-foot-rte a { color: var(--col-orange); text-decoration: underline; }
.ts-col .col-foot-rte ul { margin: 0 0 10px; padding-left: 18px; list-style: disc; }
.ts-col .col-foot-rte li { margin-bottom: 4px; }

@media (min-width: 769px) {
  .ts-col { padding-bottom: 56px; }
  .ts-col .col-foot { padding: 22px 24px; }
  .ts-col .col-foot h2 { font-size: 24px; }
}

/* ===== V6-13 blocco B ===== */
/* ============================================================
   TECHSERVICE V6-13 — PACCHETTO B
   Scheda prodotto (PDP): due colonne, galleria 4/3, colonna acquisto,
   fisarmonica, barra fissa su telefono, correlati e recensioni.
   Da unire IN CODA a assets/section-techservice-custom.css (ordine A, B, C, D).

   Nota sull'ordine di caricamento: section-techservice-custom.css sta nel <head>
   (layout/theme.liquid riga 24), mentre base.css e section-main-product.css di Dawn
   arrivano DOPO. A parità di specificità vince Dawn, quindi qui le catene di
   selettori sono volutamente lunghe (.product.ts-pdp…, .ts-pdp .ts-pdp__gal…).
   !important è usato solo dove Dawn scrive stili inline-equivalenti su misure.

   Markup di riferimento: sections/main-product.liquid + snippets/ts-pdp-*.liquid
   Mockup: _lavoro-V6-11/anteprima-v6-12/product.html (blocchi .pdp .gal .buy .pay
   .svc .notice .acc .sticky-buy .rel)
   ============================================================ */

/* ------------------------------------------------------------
   B0. Token locali della scheda prodotto
   ------------------------------------------------------------ */
:root {
  --tsp-ink: #1C1C1C;
  --tsp-ink-2: #4A4A48;
  --tsp-ink-3: #737373;
  --tsp-line: #E8E7E3;
  --tsp-line-2: #D9D8D3;
  --tsp-orange: #EA580C;
  --tsp-orange-dim: #C2410C;
  --tsp-orange-soft: #FFF7ED;
  --tsp-red: #DC2626;
  --tsp-green: #15803D;
  --tsp-amber: #B45309;
  --tsp-wa: #25D366;
  --tsp-wa-dark: #17914A;
  --tsp-photo: #F7F6F3;
  --tsp-radius: 12px;
}

/* ------------------------------------------------------------
   B1. Impianto a due colonne
   ------------------------------------------------------------ */
.product.ts-pdp.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 10px 0 0;
  padding: 0;
}
.product.ts-pdp.grid > .grid__item.product__media-wrapper,
.product.ts-pdp.grid > .grid__item.product__info-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
}

@media (min-width: 1025px) {
  .product.ts-pdp.grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 36px;
    align-items: start;
    margin-top: 18px;
  }
}

/* la colonna acquisto non va compressa dal max-width di Dawn */
.ts-pdp .product__info-container.ts-pdp__buy {
  max-width: 100%;
}

/* Dawn mette 1.5rem fra tutti i blocchi: qui i margini li decide ogni pezzo */
.ts-pdp .product__info-container.ts-pdp__buy > * + * {
  margin: 0;
}

/* link "Vedi tutti i dettagli": serve solo al quick add, non alla scheda */
.ts-pdp .ts-pdp__buy > .product__view-details {
  display: none;
}

/* ------------------------------------------------------------
   B2. Galleria — foto grande 4/3 su fondo bianco + miniature
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp__gal {
  position: relative;
  min-width: 0;
}

/* cartellino sconto in alto a sinistra */
.ts-pdp .ts-pdp-gal__off {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-block;
  padding: 7px 9px 6px;
  border-radius: 6px;
  background: var(--tsp-red);
  color: #FFFFFF;
  font-family: var(--ts-display, sans-serif);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}

/* rapporto 4/3: Dawn calcola l'altezza da --aspect-ratio, quindi basta cambiarla */
.ts-pdp .ts-pdp__gal .product-media-container {
  --aspect-ratio: 1.3333;
  max-width: 100%;
}
.ts-pdp .ts-pdp__gal .product-media-container.global-media-settings {
  background: #FFFFFF;
  border: 1px solid var(--tsp-line);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}
.ts-pdp .ts-pdp__gal .product__media {
  background: #FFFFFF;
}
.ts-pdp .ts-pdp__gal .product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

/* niente frecce: su telefono si scorre, su schermo grande si usano le miniature */
.ts-pdp .ts-pdp__gal .slider-buttons {
  display: none;
}

/* miniature: riga scorrevole con aggancio */
.ts-pdp .ts-pdp__gal .thumbnail-slider {
  margin-top: 8px;
}
.ts-pdp .ts-pdp__gal .thumbnail-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  grid-gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ts-pdp .ts-pdp__gal .thumbnail-list::-webkit-scrollbar {
  display: none;
}
.ts-pdp .ts-pdp__gal .thumbnail-list__item {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  scroll-snap-align: start;
}
.ts-pdp .ts-pdp__gal .thumbnail-list__item .thumbnail {
  width: 100%;
  height: 100%;
  padding: 5px;
  background: #FFFFFF;
  border: 1px solid var(--tsp-line);
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
}
.ts-pdp .ts-pdp__gal .thumbnail-list__item .thumbnail img {
  object-fit: contain;
}
.ts-pdp .ts-pdp__gal .thumbnail-list__item .thumbnail[aria-current='true'] {
  border-color: var(--tsp-ink);
  box-shadow: 0 0 0 1px var(--tsp-ink);
}
.ts-pdp .ts-pdp__gal .thumbnail-list__item .thumbnail[aria-current='true']::after {
  display: none;
}

/* telefono e tablet: la galleria resta dentro la colonna, niente sbordi di Dawn */
@media (max-width: 1024px) {
  .ts-pdp .ts-pdp__gal .product__media-list {
    margin-left: 0 !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    scroll-snap-type: x mandatory;
  }
  .ts-pdp .ts-pdp__gal slider-component {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ts-pdp .ts-pdp__gal .product__media-list .product__media-item {
    width: 100% !important;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------
   B3. Colonna acquisto — marca, titolo, riga stelle + codice
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-brand {
  font-family: var(--ts-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsp-orange-dim);
}

.ts-pdp .ts-pdp__titlewrap {
  margin: 6px 0 0;
}
.ts-pdp .ts-pdp-title {
  margin: 0;
  font-family: var(--ts-display, sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.12;
  letter-spacing: var(--ts-display-track, -0.005em);
  color: var(--tsp-ink);
  word-break: break-word;
}

.ts-pdp .ts-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--tsp-ink-3);
}
.ts-pdp .ts-pdp-meta__rating {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.ts-pdp .ts-pdp-meta__rating:empty {
  display: none;
}
/* il badge Judge.me porta i suoi stili: qui solo allineamento e misura */
.ts-pdp .ts-pdp-meta__rating .jdgm-widget,
.ts-pdp .ts-pdp-meta__rating .jdgm-prev-badge {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
}
.ts-pdp .ts-pdp-meta__sku {
  font-family: var(--ts-mono, monospace);
  font-size: 12px;
  color: var(--tsp-ink-3);
}

/* ------------------------------------------------------------
   B4. Stato disponibilità
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tsp-green);
}
.ts-pdp .ts-pdp-stock i {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ts-pdp .ts-pdp-stock.is-low {
  color: var(--tsp-amber);
}
.ts-pdp .ts-pdp-stock.is-ship {
  color: var(--tsp-orange-dim);
}
.ts-pdp .ts-pdp-stock.is-out {
  color: var(--tsp-ink-3);
}

/* ------------------------------------------------------------
   B5. Prezzo grande, prezzo pieno barrato, "Risparmi"
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp__buy .price {
  margin: 16px 0 0;
}
.ts-pdp .ts-pdp__buy .price__container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 0;
}
.ts-pdp .ts-pdp__buy .price__regular,
.ts-pdp .ts-pdp__buy .price__sale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.ts-pdp .ts-pdp__buy .price--large .price-item {
  font-family: var(--ts-display, sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1;
  letter-spacing: var(--ts-display-track, -0.005em);
  color: var(--tsp-ink);
}
/* il prezzo pieno barrato sta dopo il prezzo attuale, come nel mockup */
.ts-pdp .ts-pdp__buy .price__sale .price-item--sale {
  order: 1;
}
.ts-pdp .ts-pdp__buy .price__sale span:has(> s) {
  order: 2;
}
.ts-pdp .ts-pdp__buy .price--large s.price-item {
  font-family: var(--ts-body, sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--tsp-ink-3);
}
.ts-pdp .ts-pdp__buy .ts-price-save {
  order: 3;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tsp-red);
}
/* i cartellini di Dawn non servono: lo sconto è sulla foto, lo stato ha la sua riga */
.ts-pdp .ts-pdp__buy .price__badge-sale,
.ts-pdp .ts-pdp__buy .price__badge-sold-out {
  display: none;
}

.ts-pdp .ts-pdp-vat {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--tsp-ink-3);
}
.ts-pdp .ts-pdp-vat a {
  color: inherit;
  text-decoration: underline;
  margin-left: 6px;
}

.ts-pdp .ts-pdp__buy .ts-pdp-klarna {
  margin: 12px 0 0;
}

/* Klarna / Shop Pay: il modulo rate di Dawn resta ma non deve aprire un vuoto */
.ts-pdp .ts-pdp__buy .installment {
  margin: 8px 0 0;
}
.ts-pdp .ts-pdp__buy .installment:empty {
  display: none;
}

/* ------------------------------------------------------------
   B6. Riga quantità + Aggiungi al carrello
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-buyrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  margin: 16px 0 0;
  align-items: start;
}
/* i figli del blocco bottoni diventano celle della stessa griglia */
.ts-pdp .ts-pdp-buyrow .ts-pdp-buy {
  display: contents;
}
.ts-pdp .ts-pdp-buyrow > .product-form__quantity {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.ts-pdp .ts-pdp-buyrow .ts-pdp-buy > product-form {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: block;
}
.ts-pdp .ts-pdp-buyrow .ts-pdp-buy > .ts-pdp-wa,
.ts-pdp .ts-pdp-buyrow .ts-pdp-buy > .ts-dropship-notice,
.ts-pdp .ts-pdp-buyrow .ts-pdp-buy > pickup-availability,
.ts-pdp .ts-pdp-buyrow .ts-pdp-buy > .ts-pdp-quote {
  grid-column: 1 / -1;
}
/* su preventivo la colonna quantità non esiste */
.ts-pdp--quote .ts-pdp-buyrow {
  grid-template-columns: minmax(0, 1fr);
}

/* selettore quantità */
.ts-pdp .ts-pdp-buyrow .quantity__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ts-pdp .ts-pdp-buyrow .quantity {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 52px;
  height: 52px;
  background: #FFFFFF;
  border: 1.5px solid var(--tsp-line-2);
  border-radius: 10px;
  overflow: hidden;
}
.ts-pdp .ts-pdp-buyrow .quantity::after,
.ts-pdp .ts-pdp-buyrow .quantity::before {
  display: none;
}
.ts-pdp .ts-pdp-buyrow .quantity__button {
  width: 42px;
  height: 100%;
  flex: 0 0 42px;
  color: var(--tsp-ink-2);
}
.ts-pdp .ts-pdp-buyrow .quantity__button:hover {
  background: var(--tsp-photo);
  color: var(--tsp-ink);
}
.ts-pdp .ts-pdp-buyrow .quantity__input {
  width: 46px;
  min-width: 46px;
  height: 100%;
  padding: 0;
  text-align: center;
  font-family: var(--ts-body, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--tsp-ink);
}
.ts-pdp .ts-pdp-buyrow .quantity__rules,
.ts-pdp .ts-pdp-buyrow .quantity__rules-cart {
  font-size: 11.5px;
  color: var(--tsp-ink-3);
}

/* bottone nero a tutta larghezza */
.ts-pdp .ts-pdp__buy .ts-pdp-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--tsp-ink);
  color: #FFFFFF;
  font-family: var(--ts-body, sans-serif);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
}
.ts-pdp .ts-pdp__buy .ts-pdp-add::before,
.ts-pdp .ts-pdp__buy .ts-pdp-add::after {
  display: none;
}
.ts-pdp .ts-pdp__buy .ts-pdp-add:hover {
  background: #000000;
}
.ts-pdp .ts-pdp__buy .ts-pdp-add[disabled],
.ts-pdp .ts-pdp__buy .ts-pdp-add[aria-disabled='true'] {
  background: var(--tsp-line-2);
  color: #6B6B68;
  cursor: not-allowed;
}
.ts-pdp .ts-pdp__buy .ts-pdp-add__icon {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
}
.ts-pdp .ts-pdp__buy .product-form {
  margin: 0;
}
.ts-pdp .ts-pdp__buy .product-form__error-message-wrapper {
  margin-bottom: 8px;
  font-size: 13.5px;
}

/* ritiro in negozio: riga discreta sotto ai bottoni */
.ts-pdp .ts-pdp__buy .product__pickup-availabilities {
  margin: 6px 0 0;
  font-size: 13px;
}

/* ------------------------------------------------------------
   B7. Bottone WhatsApp
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid var(--tsp-ink);
  background: #FFFFFF;
  color: var(--tsp-ink);
  font-family: var(--ts-body, sans-serif);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.ts-pdp .ts-pdp-wa svg {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: var(--tsp-wa);
}
.ts-pdp .ts-pdp-wa--outline:hover {
  background: var(--tsp-ink);
  color: #FFFFFF;
}
.ts-pdp .ts-pdp-wa--outline:hover svg {
  color: #FFFFFF;
}
.ts-pdp .ts-pdp-wa--solid {
  background: var(--tsp-wa);
  border-color: var(--tsp-wa);
  color: #FFFFFF;
}
.ts-pdp .ts-pdp-wa--solid svg {
  color: #FFFFFF;
}
.ts-pdp .ts-pdp-wa--solid:hover {
  background: var(--tsp-wa-dark);
  border-color: var(--tsp-wa-dark);
  color: #FFFFFF;
}

/* ------------------------------------------------------------
   B8. Avviso kit spediti dall'azienda madre
   ------------------------------------------------------------ */
.ts-pdp .ts-dropship-notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--tsp-orange);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--tsp-orange-soft);
  color: var(--tsp-ink);
  max-width: 100%;
}
.ts-pdp .ts-dropship-notice__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ts-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsp-orange-dim);
}
.ts-pdp .ts-dropship-notice__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ------------------------------------------------------------
   B9. Badge pagamento (icone ufficiali Shopify)
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-pay {
  margin: 14px 0 0;
}
.ts-pdp .ts-pdp-pay__lbl {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ts-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsp-ink-3);
}
.ts-pdp .ts-pdp-pay__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-pdp .ts-pdp-pay__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 29px;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.ts-pdp .ts-pdp-pay__item svg,
.ts-pdp .ts-pdp-pay__item .icon {
  display: block;
  width: 100%;
  height: 100%;
}
.ts-pdp .ts-pdp-pay__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--tsp-ink-3);
}

/* ------------------------------------------------------------
   B10. Tre righe di servizio
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-svc {
  margin: 18px 0 0;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-radius);
  background: #FFFFFF;
  overflow: hidden;
}
.ts-pdp .ts-pdp-svc__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tsp-ink-2);
}
.ts-pdp .ts-pdp-svc__row + .ts-pdp-svc__row {
  border-top: 1px solid var(--tsp-line);
}
.ts-pdp .ts-pdp-svc__row svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--tsp-ink);
}
.ts-pdp .ts-pdp-svc__row b {
  color: var(--tsp-ink);
  font-weight: 600;
}

/* ------------------------------------------------------------
   B11. Fisarmonica (descrizione + tab del cliente)
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--tsp-line);
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item:first-of-type {
  margin-top: 26px;
  border-top: 1px solid var(--tsp-line);
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px;
  list-style: none;
  cursor: pointer;
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item summary::-webkit-details-marker {
  display: none;
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item summary > .icon-caret,
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item summary > svg,
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .summary__title > .svg-wrapper {
  display: none;
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item summary::after {
  content: '+';
  font-family: var(--ts-display, sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--tsp-ink-3);
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item details[open] > summary::after {
  content: '\2212';
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .summary__title {
  display: flex;
  align-items: center;
  min-width: 0;
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .accordion__title {
  margin: 0;
  font-family: var(--ts-body, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tsp-ink);
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .accordion__content {
  padding: 0 2px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tsp-ink-2);
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .accordion__content ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .accordion__content li {
  margin: 3px 0;
}
.ts-pdp .ts-pdp__buy .ts-pdp-acc__item .accordion__content p:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------
   B12. Prodotto su preventivo
   ------------------------------------------------------------ */
.ts-pdp .ts-pdp-quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.ts-pdp .ts-pdp-quote__price {
  margin: 0;
  font-family: var(--ts-display, sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: 26px;
  line-height: 1.1;
  color: var(--tsp-ink);
}
.ts-pdp .ts-pdp-quote__hint {
  margin: -4px 0 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tsp-ink-2);
}
.ts-pdp .ts-pdp-quote__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  border: 1.5px solid var(--tsp-ink);
  border-radius: 10px;
  background: transparent;
  color: var(--tsp-ink);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}
.ts-pdp .ts-pdp-quote__phone svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.ts-pdp .ts-pdp-quote__phone:hover {
  background: var(--tsp-ink);
  color: #FFFFFF;
}
.ts-pdp .ts-pdp-quote__foot {
  margin: 0;
  font-size: 12.5px;
  color: var(--tsp-ink-3);
  text-align: center;
}

/* ------------------------------------------------------------
   B13. Barra fissa in basso su telefono
   ------------------------------------------------------------ */
.ts-pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid var(--tsp-line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 180ms ease, visibility 0s linear 180ms;
}
.ts-pdp-sticky.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 180ms ease;
}
.ts-pdp-sticky__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ts-pdp-sticky__price {
  font-family: var(--ts-display, sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: 20px;
  line-height: 1.05;
  color: var(--tsp-ink);
}
.ts-pdp-sticky__note {
  font-size: 11.5px;
  color: var(--tsp-ink-3);
}
.ts-pdp-sticky__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--tsp-ink);
  color: #FFFFFF;
  font-family: var(--ts-body, sans-serif);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.ts-pdp-sticky__btn svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.ts-pdp-sticky a.ts-pdp-sticky__btn.ts-pdp-wa--solid {
  background: var(--tsp-wa);
  border: 0;
  color: #FFFFFF;
  height: 46px;
}
@media (min-width: 1025px) {
  .ts-pdp-sticky {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   B14. Recensioni Judge.me e prodotti correlati
   ------------------------------------------------------------ */
.ts-reviews {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--tsp-line);
}
.ts-reviews-title {
  margin: 0 0 14px;
  font-family: var(--ts-display, sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--tsp-ink);
}

.related-products {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--tsp-line);
}
.related-products .related-products__heading {
  margin: 0 0 14px;
  font-family: var(--ts-display, sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--tsp-ink);
  text-align: left;
}
.related-products .grid.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.related-products .grid.product-grid > .grid__item {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
@media (min-width: 601px) {
  .related-products .grid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (min-width: 1025px) {
  .related-products .grid.product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ------------------------------------------------------------
   B15. Movimento ridotto
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ts-pdp-sticky,
  .ts-pdp .ts-pdp-wa,
  .ts-pdp .ts-pdp__buy .ts-pdp-add {
    transition: none;
  }
  .ts-pdp-sticky {
    transform: none;
    visibility: hidden;
  }
  .ts-pdp-sticky.is-visible {
    transform: none;
    visibility: visible;
  }
  .ts-pdp .ts-pdp__gal .product__media-list,
  .ts-pdp .ts-pdp__gal .thumbnail-list {
    scroll-behavior: auto;
  }
}

/* ===== V6-13 blocco C ===== */
/* ============================================================
   TECHSERVICE V6-13 — PACCHETTO C
   Vetrine su preventivo (sezione sections/vetrina-v12.liquid):
   Diagnostica e Stazioni aria condizionata.

   Da unire in coda a assets/section-techservice-custom.css
   (ordine A, B, C, D).

   Namespace nuovo .vtr-* : nessuna regola esistente del tema
   intercetta queste classi. Le card prodotto restano quelle
   standard (.pc, pacchetto C di V6-12): qui si definisce solo
   la griglia che le contiene.
   ============================================================ */

/* ---------- token locali della vetrina ---------- */
.vtr {
  --vtr-ink: var(--text-primary, #0A0A0A);
  --vtr-ink-2: var(--text-secondary, #404040);
  --vtr-ink-3: var(--text-tertiary, #737373);
  --vtr-line: var(--border, #E5E5E5);
  --vtr-dark: var(--bg-dark, #1F1F1F);
  --vtr-dark-2: #262624;
  --vtr-on-dark: #CFCFCA;
  --vtr-accent: var(--brand, #EA580C);
  --vtr-accent-soft: var(--brand-soft, #FFF7ED);
  --vtr-accent-dim: var(--brand-dim, #C2410C);
  --vtr-accent-light: #FDBA74;
  --vtr-wa: var(--whatsapp, #25D366);
}

/* ---------- titoli: stessa famiglia del resto del tema V6-12 ---------- */
.vtr-hero-title,
.vtr-sec-title,
.vtr-cta h2 {
  font-family: var(--ts-body, 'Barlow', system-ui, -apple-system, sans-serif);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.vtr-step h3,
.vtr-card h3,
.vtr-faq-item > summary {
  font-family: var(--ts-body, 'Barlow', system-ui, -apple-system, sans-serif);
}

/* ---------- percorso ---------- */
.vtr-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 0;
  font-size: 12.5px;
  color: var(--vtr-ink-3);
}
.vtr-crumb a { color: var(--vtr-ink-3); }
.vtr-crumb a:hover { color: var(--vtr-ink); }
.vtr-crumb [aria-current] { color: var(--vtr-ink); }

/* ============================================================
   1. HERO SCURO
   ============================================================ */
.vtr-hero {
  display: grid;
  gap: 20px;
  margin-top: 16px;
  padding: 24px 20px;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(180deg, var(--vtr-dark) 0%, var(--vtr-dark-2) 100%);
  color: #FFFFFF;
}
.vtr-hero-main { min-width: 0; }

.vtr-eyebrow {
  display: inline-block;
  font-family: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--vtr-accent-light);
}

.vtr-hero-title {
  margin: 10px 0 0;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.05;
  color: #FFFFFF;
}
.vtr-hero-title em.serif { color: var(--vtr-accent-light); }

.vtr-hero-text {
  margin: 12px 0 0;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--vtr-on-dark);
}

/* marche */
.vtr-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.vtr-marks li {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill, 999px);
  font-size: 12.5px;
  font-weight: 600;
  color: #E8E8E4;
}

/* bottoni */
.vtr-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.vtr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--radius-pill, 999px);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background var(--t, 250ms ease), color var(--t, 250ms ease), border-color var(--t, 250ms ease);
}
.vtr-btn svg { flex: 0 0 19px; width: 19px; height: 19px; }
.vtr-btn--wa { background: var(--vtr-wa); color: #FFFFFF; }
.vtr-btn--wa:hover { background: #17914A; color: #FFFFFF; }
.vtr-btn--ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.vtr-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
.vtr-btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }

/* passi "come arriviamo al prezzo" */
.vtr-hero-steps { min-width: 0; }
.vtr-steps-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.vtr-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vtr-step {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.vtr-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(234, 88, 12, 0.22);
  color: var(--vtr-accent-light);
  font-family: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.vtr-step h3 {
  margin: 10px 0 4px;
  font-size: 16.5px;
  font-weight: 700;
  color: #FFFFFF;
}
.vtr-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vtr-on-dark);
}

@media (min-width: 1025px) {
  .vtr-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 36px;
    padding: 36px;
  }
}

/* ============================================================
   2. SEZIONI CHIARE
   ============================================================ */
.vtr-sec { margin-top: 40px; }
.vtr-sec-title {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
}
.vtr-sec-sub {
  margin: 0 0 16px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vtr-ink-2);
}

/* griglia modelli: 2 su telefono, 3 su tablet, 4 su desktop */
.vtr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
@media (min-width: 601px) {
  .vtr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1025px) {
  .vtr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
}

/* stato vuoto sobrio */
.vtr-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--vtr-line);
  border-radius: 14px;
  background: var(--bg-soft, #FAFAFA);
}
.vtr-empty p {
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vtr-ink-2);
}

/* ============================================================
   3. TABELLA DI CONFRONTO
   Su telefono scorre dentro il suo contenitore: overscroll-behavior
   impedisce che il gesto trascini anche la pagina.
   ============================================================ */
.vtr-tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--vtr-line);
  border-radius: 14px;
  background: #FFFFFF;
}
.vtr-tablewrap:focus-visible {
  outline: 2px solid var(--vtr-accent);
  outline-offset: 2px;
}
.vtr-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}
.vtr-table th,
.vtr-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--vtr-line);
}
.vtr-table thead th {
  background: #FBFAF8;
  font-family: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vtr-ink-3);
  white-space: nowrap;
}
.vtr-table tbody th {
  font-size: 14px;
  font-weight: 600;
  color: var(--vtr-ink);
}
.vtr-table tbody td { color: var(--vtr-ink-2); }
.vtr-table tbody tr:last-child th,
.vtr-table tbody tr:last-child td { border-bottom: 0; }
.vtr-table .vtr-ask {
  font-weight: 700;
  color: var(--vtr-accent-dim);
  white-space: nowrap;
}

/* ============================================================
   4. RIQUADRI SERVIZIO
   ============================================================ */
.vtr-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
@media (min-width: 769px) {
  .vtr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.vtr-card {
  padding: 18px;
  border: 1px solid var(--vtr-line);
  border-radius: 14px;
  background: #FFFFFF;
}
.vtr-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.vtr-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vtr-ink-2);
}

/* ============================================================
   5. DOMANDE FREQUENTI
   ============================================================ */
.vtr-faq {
  margin-top: 12px;
  border-top: 1px solid var(--vtr-line);
}
.vtr-faq-item { border-bottom: 1px solid var(--vtr-line); }
.vtr-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vtr-ink);
  cursor: pointer;
  list-style: none;
}
.vtr-faq-item > summary::-webkit-details-marker { display: none; }
.vtr-faq-item > summary:focus-visible {
  outline: 2px solid var(--vtr-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.vtr-faq-sign {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.vtr-faq-sign::before,
.vtr-faq-sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--vtr-ink-3);
  transform: translate(-50%, -50%);
  transition: transform var(--t-fast, 150ms ease), opacity var(--t-fast, 150ms ease);
}
.vtr-faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.vtr-faq-item[open] .vtr-faq-sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.vtr-faq-body {
  padding: 0 2px 18px;
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vtr-ink-2);
}

/* ============================================================
   6. CHIUSURA SCURA
   ============================================================ */
.vtr-cta {
  display: grid;
  gap: 16px;
  margin: 40px 0 8px;
  padding: 24px 20px;
  border-radius: var(--radius-lg, 16px);
  background: var(--vtr-dark);
  color: #FFFFFF;
}
.vtr-cta h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  color: #FFFFFF;
}
.vtr-cta p {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vtr-on-dark);
}
@media (min-width: 769px) {
  .vtr-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 28px 30px;
  }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .vtr-btn,
  .vtr-faq-sign::before,
  .vtr-faq-sign::after { transition: none; }
}

/* ===== V6-13 blocco D ===== */
/* ============================================================
   TECHSERVICE V6-13 — BLOCCO D — wp13D.css
   Pagina Recensioni (sections/page-reviews-v12.liquid)

   Da unire IN CODA a assets/section-techservice-custom.css
   nell'ordine A, B, C, D.

   Cosa contiene:
   D1. Token locali della pagina
   D2. Percorso (breadcrumb) e testata
   D3. Riepilogo voto Judge.me
   D4. Area widget e stato vuoto
   D5. Skin Judge.me: le schede recensione disegnate dal widget
       prendono l'aspetto del mockup (card bianche, bordo, stelle
       ambra, dicitura acquisto verificato)
   D6. Chiusura scura con invito alla recensione

   Tutte le classi nuove hanno prefisso .ts-rv12* e ogni regola
   Judge.me e' annidata dentro .ts-rv12, quindi il widget resta
   com'e' su tutte le altre pagine (schede prodotto comprese).
   Nessuna regola nasconde parti del widget: cambiamo solo colori,
   bordi, spaziature e disposizione in colonne.
   ============================================================ */

/* ------------------------------------------------------------
   D1. TOKEN LOCALI
   Mappati sui token del tema con valore di ripiego, cosi' il
   blocco funziona anche se caricato da solo.
   ------------------------------------------------------------ */
.ts-rv12 {
  --rv-ink: #1F1F1F;
  --rv-ink-2: #4A4A48;
  --rv-ink-3: #737373;
  --rv-line: var(--border, #E5E5E5);
  --rv-line-2: var(--border-hover, #D4D4D4);
  --rv-card: #FFFFFF;
  --rv-star: #F59E0B;
  --rv-star-off: #E2E0DA;
  --rv-track: #EDECE7;
  --rv-green: var(--success, #15803D);
  --rv-dark: var(--bg-dark, #1F1F1F);
  --rv-dark-ink: #CFCFCA;
  --rv-wa: var(--whatsapp, #25D366);
  --rv-radius: 14px;
  --rv-radius-lg: 16px;

  display: block;
  padding-bottom: 56px;
  color: var(--rv-ink);
}

/* ------------------------------------------------------------
   D2. PERCORSO + TESTATA
   ------------------------------------------------------------ */
.ts-rv12-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0 0;
  font-size: 12.5px;
  color: var(--rv-ink-3);
}
.ts-rv12-crumb a {
  color: inherit;
  text-decoration: none;
}
.ts-rv12-crumb a:hover { color: var(--rv-ink); }
.ts-rv12-crumb [aria-current] { color: var(--rv-ink); }

.ts-rv12-head { padding: 16px 0 0; }

.ts-rv12-eyebrow {
  display: inline-block;
  font-family: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--rv-ink-3);
}

.ts-rv12-title {
  margin: 6px 0 0;
  font-family: var(--ts-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: var(--ts-display-weight, 800);
  letter-spacing: var(--ts-display-track, -0.005em);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.ts-rv12-lead {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rv-ink-2);
}

/* ------------------------------------------------------------
   D3. RIEPILOGO VOTO
   Compare solo quando Judge.me passa i dati veri al tema: il
   Liquid non stampa nulla se i metafield sono vuoti.
   ------------------------------------------------------------ */
.ts-rv12-summary {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  align-items: center;
}
@media (min-width: 900px) {
  .ts-rv12-summary {
    grid-template-columns: 300px 1fr;
    gap: 32px;
  }
}

.ts-rv12-score {
  background: var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius-lg);
  padding: 18px;
  text-align: center;
}

/* il widget "All Reviews Rating" di Judge.me sta dentro questo riquadro:
   ingrandiamo il numero e allineiamo stelle e testo al centro */
.ts-rv12-score-widget .jdgm-all-reviews-rating,
.ts-rv12-score-widget .jdgm-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ts-rv12-score-widget .jdgm-all-reviews-rating__average,
.ts-rv12-score-widget .jdgm-star-rating__average {
  font-family: var(--ts-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: 44px;
  line-height: 1;
  color: var(--rv-ink);
}
.ts-rv12-score-count {
  margin-top: 6px;
  font-size: 13px;
  color: var(--rv-ink-3);
}
.ts-rv12-score-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rv-ink-3);
  max-width: 60ch;
}

/* ------------------------------------------------------------
   D4. AREA WIDGET E STATO VUOTO
   ------------------------------------------------------------ */
.ts-rv12-widget { margin-top: 22px; }
.ts-rv12-slot { min-width: 0; }

.ts-rv12-empty {
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  background: var(--rv-card);
  padding: 20px;
  max-width: 78ch;
}
.ts-rv12-empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rv-ink-2);
}
.ts-rv12-empty p + p { margin-top: 8px; }
.ts-rv12-empty h2 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
}
.ts-rv12-empty-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rv-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--brand, #EA580C);
  padding-bottom: 2px;
}
/* riquadro visibile solo nell'editor del tema */
.ts-rv12-empty--editor {
  border-style: dashed;
  border-color: var(--rv-line-2);
  background: #FAFAF8;
}
.ts-rv12-empty-note {
  font-size: 12.5px;
  color: var(--rv-ink-3);
}

/* ------------------------------------------------------------
   D5. SKIN JUDGE.ME
   Le schede recensione le disegna Judge.me: qui le portiamo
   all'aspetto del mockup senza toccarne la struttura.
   ------------------------------------------------------------ */

/* spaziatura del guscio + niente bordi doppi dal tema */
.ts-rv12 .jdgm-widget,
.ts-rv12 .jdgm-all-reviews-page {
  max-width: none;
  color: var(--rv-ink);
}
.ts-rv12 .jdgm-rev-widg {
  padding: 0;
  border: 0;
  background: none;
}

/* intestazione del widget: il titolo grande lo diamo gia' noi in pagina,
   quindi qui restano solo riepilogo e bottone "scrivi una recensione" */
.ts-rv12 .jdgm-rev-widg__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--rv-line);
}
.ts-rv12 .jdgm-rev-widg__title {
  font-family: var(--ts-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
  text-align: left;
}
.ts-rv12 .jdgm-rev-widg__summary-text {
  font-size: 13px;
  color: var(--rv-ink-3);
}

/* stelle ambra come nel mockup (Judge.me le colora da impostazioni app:
   qui vince la specificita' del selettore annidato) */
.ts-rv12 .jdgm-star { color: var(--rv-star); }
.ts-rv12 .jdgm-star.jdgm--off { color: var(--rv-star-off); }

/* istogramma stelle: stesse barre del mockup (.rvbars) */
.ts-rv12 .jdgm-histogram {
  display: grid;
  gap: 6px;
  max-width: 460px;
}
.ts-rv12 .jdgm-histogram__row {
  display: grid;
  grid-template-columns: 62px 1fr 42px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--rv-ink-3);
}
.ts-rv12 .jdgm-histogram__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--rv-track);
  overflow: hidden;
}
.ts-rv12 .jdgm-histogram__bar-content {
  height: 100%;
  background: var(--rv-star);
}
.ts-rv12 .jdgm-histogram__frequency {
  text-align: right;
  font-size: 12.5px;
  color: var(--rv-ink-3);
}

/* elenco recensioni in griglia come .rvgrid del mockup.
   Judge.me a volte mette le recensioni dentro .jdgm-rev-widg__reviews,
   a volte direttamente nel body: coperti tutti e due i casi. */
.ts-rv12 .jdgm-rev-widg__reviews,
.ts-rv12 .jdgm-rev-widg__body:has(> .jdgm-rev) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}
@media (min-width: 700px) {
  .ts-rv12 .jdgm-rev-widg__reviews,
  .ts-rv12 .jdgm-rev-widg__body:has(> .jdgm-rev) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .ts-rv12 .jdgm-rev-widg__reviews,
  .ts-rv12 .jdgm-rev-widg__body:has(> .jdgm-rev) {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* tutto cio' che non e' una recensione (form, messaggi, paginazione)
   resta a tutta larghezza: cosi' la griglia non spezza il widget */
.ts-rv12 .jdgm-rev-widg__reviews > :not(.jdgm-rev),
.ts-rv12 .jdgm-rev-widg__body > :not(.jdgm-rev) {
  grid-column: 1 / -1;
}

/* la singola recensione diventa la card bianca del mockup (.rvcard) */
.ts-rv12 .jdgm-rev {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 16px;
  background: var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
}
/* Judge.me separa le recensioni con una riga in alto: con le card non serve */
.ts-rv12 .jdgm-rev.jdgm-divider-top { border-top: 1px solid var(--rv-line); }

.ts-rv12 .jdgm-rev__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ts-rv12 .jdgm-rev__author {
  font-size: 14px;
  font-weight: 700;
  color: var(--rv-ink);
}
.ts-rv12 .jdgm-rev__timestamp,
.ts-rv12 .jdgm-rev__location {
  font-size: 12px;
  color: var(--rv-ink-3);
}
.ts-rv12 .jdgm-rev__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--rv-ink);
}
.ts-rv12 .jdgm-rev__body,
.ts-rv12 .jdgm-rev__body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--rv-ink-2);
}

/* dicitura "acquisto verificato" in verde come nel mockup */
.ts-rv12 .jdgm-rev__buyer-badge,
.ts-rv12 .jdgm-rev__transparency-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ts-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rv-green);
  background: none;
  border: 0;
  padding: 0;
}

/* riga prodotto in fondo alla card */
.ts-rv12 .jdgm-rev__prod-info-wrapper {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rv-line);
  font-size: 12.5px;
  color: var(--rv-ink-3);
}
.ts-rv12 .jdgm-rev__prod-link {
  color: var(--rv-ink-2);
  text-decoration: none;
}
.ts-rv12 .jdgm-rev__prod-link:hover { color: var(--rv-ink); }
.ts-rv12 .jdgm-rev__product-picture img {
  border-radius: 8px;
  border: 1px solid var(--rv-line);
}

/* foto allegate alle recensioni: miniature quadrate, lightbox invariata */
.ts-rv12 .jdgm-rev__pics img,
.ts-rv12 .jdgm-rev__pic-img {
  border-radius: 8px;
}

/* risposta del negozio */
.ts-rv12 .jdgm-rev__reply,
.ts-rv12 .jdgm-full-rev__reply {
  margin-top: 8px;
  padding: 10px 12px;
  background: #FAFAF8;
  border-left: 2px solid var(--brand, #EA580C);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--rv-ink-2);
}

/* bottone "Scrivi una recensione" e paginazione in stile tema */
.ts-rv12 .jdgm-write-rev-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--rv-ink);
  background: var(--rv-ink);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.ts-rv12 .jdgm-write-rev-link:hover {
  background: var(--brand, #EA580C);
  border-color: var(--brand, #EA580C);
}
.ts-rv12 .jdgm-paginate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 26px 0 8px;
}
.ts-rv12 .jdgm-paginate__page,
.ts-rv12 .jdgm-paginate__prev,
.ts-rv12 .jdgm-paginate__next {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--rv-line);
  background: var(--rv-card);
  font-size: 14px;
  font-weight: 600;
  color: var(--rv-ink-2);
  text-decoration: none;
}
.ts-rv12 .jdgm-paginate__page.jdgm-curt {
  background: var(--rv-ink);
  border-color: var(--rv-ink);
  color: #FFFFFF;
}

/* modulo di scrittura recensione: campi coerenti col tema */
.ts-rv12 .jdgm-form input[type="text"],
.ts-rv12 .jdgm-form input[type="email"],
.ts-rv12 .jdgm-form textarea {
  border: 1px solid var(--rv-line-2);
  border-radius: 9px;
  background: var(--rv-card);
  padding: 10px 12px;
  font-size: 14px;
}
.ts-rv12 .jdgm-form input[type="text"]:focus,
.ts-rv12 .jdgm-form input[type="email"]:focus,
.ts-rv12 .jdgm-form textarea:focus {
  border-color: var(--rv-ink);
  outline: none;
}

/* ------------------------------------------------------------
   D6. CHIUSURA SCURA
   ------------------------------------------------------------ */
.ts-rv12-cta {
  margin-top: 28px;
  padding: 20px;
  border-radius: var(--rv-radius-lg);
  background: var(--rv-dark);
  color: #FFFFFF;
}
@media (min-width: 769px) {
  .ts-rv12-cta { padding: 26px 28px; }
}

.ts-rv12-cta-main {
  display: grid;
  gap: 14px;
  align-items: center;
}
@media (min-width: 769px) {
  .ts-rv12-cta-main { grid-template-columns: 1fr auto; }
}

.ts-rv12-cta-copy h2 {
  margin: 0;
  font-family: var(--ts-display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: var(--ts-display-weight, 800);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.15;
  color: #FFFFFF;
}
.ts-rv12-cta-copy p {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rv-dark-ink);
}

.ts-rv12-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--rv-wa);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 150ms ease;
}
.ts-rv12-wa:hover { filter: brightness(1.06); }
.ts-rv12-wa svg { width: 19px; height: 19px; flex: 0 0 auto; }

.ts-rv12-trust {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ts-rv12-trust h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}
.ts-rv12-trust p {
  margin: 0;
  max-width: 80ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rv-dark-ink);
}

/* ------------------------------------------------------------
   D7. TELEFONO
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .ts-rv12 { padding-bottom: 40px; }
  .ts-rv12-score { padding: 16px; }
  .ts-rv12-wa { width: 100%; }
  .ts-rv12 .jdgm-rev { padding: 14px; }
}

/* ===== V6-13b — avviso spedizione in testata sulla collezione dei kit ===== */
.ts-col .col-dsbadge{display:flex;align-items:flex-start;gap:11px;margin-top:14px;padding:12px 14px;border:1px solid var(--brand);border-left-width:4px;border-radius:10px;background:#FFF7ED;max-width:72ch}
.ts-col .col-dsbadge__ico{flex:0 0 22px;color:var(--brand-dim)}
.ts-col .col-dsbadge__ico svg{width:22px;height:22px;display:block}
.ts-col .col-dsbadge__txt{font-size:13.5px;line-height:1.45;color:#3A3A38}
.ts-col .col-dsbadge__txt b{display:block;font-size:13px;letter-spacing:.02em;color:#1C1C1C}
@media (max-width:480px){.ts-col .col-dsbadge{padding:10px 12px;gap:9px}.ts-col .col-dsbadge__txt{font-size:13px}}

/* ===== V6-13c — badge sconto a destra, cartellino promo in basso ===== */
/* il marchio stampato sulla foto sta in alto a sinistra: liberiamo quell'angolo */
.pc .pc-off{left:auto;right:8px}
.pc .pc-promo{top:auto;right:auto;bottom:8px;left:8px}
@media (min-width:769px){
  .pc .pc-off{left:auto;right:10px}
  .pc .pc-promo{top:auto;right:auto;bottom:10px;left:10px}
}

/* ============================================================
   V6-14 — fine home (recensioni A) + footer A + showroom/brand
   blocchi wp14A (recensioni) · wp14B (footer) · wp14C (showroom+brand)
   ============================================================ */
/* ==========================================================================
   TechService — Reviews marquee, variante A (V6-14)
   Pannello scuro + due nastri. Da unire in section-techservice-custom.css.
   Tutte le classi sono prefissate (.ts-rv14 / .ts-mq): non toccano il CSS vecchio.
   ========================================================================== */

.ts-rv14 {
  --ts-rv14-night: #161615;
  --ts-rv14-night-2: #1F1F1E;
  --ts-rv14-night-line: #332F2C;
  --ts-rv14-night-txt: #B9B5AE;
  --ts-rv14-night-dim: #8A867F;
  --ts-rv14-line: var(--border, #E4E3DF);
  --ts-rv14-paper: #FFFFFF;
  --ts-rv14-ink: #1F1F1F;
  --ts-rv14-ink-2: #3A3A38;
  --ts-rv14-ink-3: #6E6E69;
  --ts-rv14-ok: #15803D;
  --ts-rv14-brand: var(--brand, #EA580C);
  --ts-rv14-brand-dim: #C2410C;

  background: var(--ts-rv14-paper);
  border-top: 1px solid var(--ts-rv14-line);
  padding-block: 56px 60px;
  color: var(--ts-rv14-ink);
  font-family: var(--ts-body, inherit);
}

.ts-rv14 *,
.ts-rv14 *::before,
.ts-rv14 *::after { box-sizing: border-box; }

.ts-rv14-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

.ts-rv14-grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 28px;
  align-items: stretch;
}

.ts-rv14-grid.is-solo { grid-template-columns: minmax(0, 380px); }

/* ---------- pannello scuro ---------- */
.ts-rv14-panel {
  background: var(--ts-rv14-night);
  color: #fff;
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ts-rv14-eyebrow {
  font-family: var(--ts-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ts-rv14-night-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ts-rv14-eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ts-rv14-brand);
}

.ts-rv14-title {
  margin: 0;
  font-family: var(--ts-display, inherit);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

.ts-rv14-title em {
  font-style: normal;
  color: var(--ts-rv14-brand);
}

.ts-rv14-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 2px;
}

.ts-rv14-score .n {
  font-family: var(--ts-display, inherit);
  font-size: 52px;
  font-weight: 800;
  line-height: 0.9;
  color: #fff;
}

.ts-rv14-score .of {
  font-family: var(--ts-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ts-rv14-night-dim);
}

.ts-rv14-stars {
  color: var(--ts-rv14-brand);
  font-size: 16px;
  letter-spacing: 2px;
}

.ts-rv14-src {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ts-rv14-night-txt);
}

.ts-rv14-facts {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--ts-rv14-night-line);
  padding-top: 16px;
  margin-top: auto;
}

.ts-rv14-facts > div {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ts-rv14-night-txt);
}

.ts-rv14-facts svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  color: var(--ts-rv14-brand);
}

.ts-rv14-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 9px;
  background: var(--ts-rv14-brand);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}

.ts-rv14-cta:hover { background: var(--ts-rv14-brand-dim); }
.ts-rv14-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- colonna nastri ---------- */
.ts-rv14-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-width: 0;
}

.ts-rv14-app { margin-top: 24px; }

/* ---------- card recensione ---------- */
.ts-rv14-card {
  width: 318px;
  flex: 0 0 318px;
  background: var(--ts-rv14-paper);
  border: 1px solid var(--ts-rv14-line);
  border-radius: 12px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ts-rv14-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-rv14-av {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--ts-rv14-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--ts-display, inherit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ts-rv14-who { min-width: 0; }

.ts-rv14-who b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-rv14-who span {
  display: block;
  font-size: 11.5px;
  color: var(--ts-rv14-ink-3);
}

.ts-rv14-card-stars {
  color: var(--ts-rv14-brand);
  font-size: 13px;
  letter-spacing: 1.5px;
}

.ts-rv14-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ts-rv14-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-rv14-foot {
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid var(--ts-rv14-line);
  font-family: var(--ts-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-rv14-ink-3);
  display: flex;
  align-items: center;
  gap: 7px;
}

.ts-rv14-foot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-rv14-ok);
  flex: 0 0 6px;
}

/* ==========================================================================
   Nastro a loop continuo (senza salto a fine giro)
   Due gruppi identici: la traslazione vale metà traccia meno metà gap.
   ========================================================================== */

.ts-mq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

.ts-mq-track {
  display: flex;
  width: max-content;
  gap: var(--g, 16px);
  animation: ts-mq var(--dur, 60s) linear infinite;
}

.ts-mq-group {
  display: flex;
  gap: var(--g, 16px);
}

.ts-mq.is-rev .ts-mq-track { animation-direction: reverse; }

@keyframes ts-mq {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - (var(--g, 16px) / 2)), 0, 0); }
}

.ts-mq:hover .ts-mq-track,
.ts-mq:focus-within .ts-mq-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ts-mq-track { animation: none; }
  .ts-mq {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ts-mq .ts-mq-group[aria-hidden="true"] { display: none; }
  .ts-rv14-card { scroll-snap-align: start; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ts-rv14-grid { grid-template-columns: 1fr; }
  .ts-rv14-grid.is-solo { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ts-rv14 { padding-block: 40px 44px; }
  .ts-rv14-wrap { padding-inline: 16px; }
  .ts-rv14-panel { padding: 20px 18px; }
  .ts-rv14-title { font-size: 25px; }
  .ts-rv14-score .n { font-size: 44px; }
  .ts-rv14-card { width: 250px; flex-basis: 250px; }
  .ts-rv14-rows .ts-mq + .ts-mq { display: none; }
}

/* ============================================================
   TechService — Footer V6-14 "Footer A"  (blocco wp14B)
   Classi .ft14* — da unire in assets/section-techservice-custom.css
   Nessuna regola tocca .footer del CSS vecchio.
   ============================================================ */

.ft14 {
  --ft14-night: #161615;
  --ft14-night-2: #1F1F1E;
  --ft14-line: #332F2C;
  --ft14-txt: #B9B5AE;
  --ft14-mute: #77736D;

  background: var(--ft14-night);
  color: #fff;
  font-family: var(--ts-body);
  font-size: 14.5px;
  line-height: 1.5;
}

.ft14 a { color: var(--ft14-txt); text-decoration: none; }
.ft14 a:hover { color: #fff; }
.ft14 p { margin: 0; }

.ft14-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 20px;
}

.ft14-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- striscia newsletter ---------- */
.ft14-news { border-bottom: 1px solid var(--ft14-line); }

.ft14-news-in {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
}

.ft14-news-copy { min-width: 0; }

.ft14-news h3 {
  margin: 0;
  font-family: var(--ts-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
}

.ft14-news p {
  font-size: 13.5px;
  color: var(--ft14-txt);
  padding-top: 3px;
}

.ft14-form {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  flex: 1 1 380px;
  max-width: 520px;
  margin: 0;
}

.ft14-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  height: 46px;
  border-radius: 9px;
  border: 1px solid var(--ft14-line);
  background: #121211;
  color: #fff;
  padding: 0 14px;
  font-family: var(--ts-body);
  font-size: 14.5px;
}

.ft14-form input[type="email"]::placeholder { color: #6E6A64; }

.ft14-form input[type="email"]:focus-visible,
.ft14-form button:focus-visible,
.ft14 a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ft14-form button {
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-family: var(--ts-body);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}

.ft14-form button:hover { background: #C2410C; }

.ft14-form-ok,
.ft14-form-err {
  flex: 1 1 100%;
  font-size: 13.5px;
}

.ft14-form-ok { color: #fff; font-weight: 600; }
.ft14-form-err { color: #F87171; }

/* ---------- 4 colonne ---------- */
.ft14-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding-block: 34px;
}

.ft14-col h5 {
  margin: 0 0 13px;
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.ft14-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14px;
}

/* ---------- colonna contatti ---------- */
.ft14-contact { display: grid; gap: 13px; }

.ft14-contact a,
.ft14-contact div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ft14-txt);
}

.ft14-contact svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 2px;
  color: var(--brand);
}

.ft14-big {
  font-family: var(--ts-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.01em;
}

/* ---------- fascia wordmark ---------- */
.ft14-mark {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ft14-line);
}

.ft14-mark-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 26px;
}

.ft14-mark-copy { min-width: 0; }

.ft14-mark-claim {
  font-size: 13.5px;
  color: var(--ft14-txt);
  max-width: 44ch;
}

.ft14-dom {
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ft14-mute);
  padding-top: 8px;
}

.ft14-mark-txt {
  font-family: var(--ts-display);
  font-weight: 800;
  font-size: clamp(58px, 15.2vw, 206px);
  line-height: 0.78;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #3A3633 0%, #211F1D 78%, #1A1918 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: -0.14em;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- social ---------- */
.ft14-social { display: flex; gap: 9px; }

.ft14-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ft14-line);
  display: grid;
  place-items: center;
  color: var(--ft14-txt);
}

.ft14-social a:hover { border-color: var(--brand); color: #fff; }
.ft14-social svg { width: 17px; height: 17px; }

/* ---------- barra legale ---------- */
.ft14-bottom {
  border-top: 1px solid var(--ft14-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}

.ft14-legal {
  font-family: var(--ts-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ft14-mute);
}

.ft14-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

/* gli SVG di Shopify arrivano con width/height propri: li normalizziamo */
.ft14-pay .ft14-pay-ico,
.ft14-pay svg.ft14-pay-ico {
  display: block;
  height: 26px;
  width: auto;
  max-width: 42px;
  background: #fff;
  border-radius: 5px;
  padding: 1px 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ft14-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 560px) {
  .ft14-wrap { padding-inline: 16px; }
  .ft14-cols { grid-template-columns: 1fr; gap: 20px; }
  .ft14-form { flex: 1 1 100%; max-width: none; }
  .ft14-news h3 { font-size: 20px; }
  .ft14-bottom { justify-content: flex-start; }
}

/* il nome resta su una riga sola: se sborda viene tagliato dalla fascia,
   mai scroll orizzontale di pagina */
.ft14-mark { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ft14 * { transition: none !important; }
}

/* ============================================================
   TECHSERVICE — V6-14 · blocco C
   Da unire in assets/section-techservice-custom.css
   1) .bm14* — nastro brand a loop continuo (niente salto)
   2) .loc14* — colonna dati dello showroom + indicatore aperto/chiuso
   Token usati: --brand, --border, --ts-display, --ts-body, --ts-mono
   ============================================================ */

/* ---------- token locali del blocco (allineati al mockup V6-14) ---------- */
.bm14-sec,
.loc14-grid {
  --w14-line: #E4E3DF;
  --w14-ink: #1F1F1F;
  --w14-ink-2: #3A3A38;
  --w14-ink-3: #6E6E69;
  --w14-paper: #FFFFFF;
  --w14-paper-2: #F7F7F5;
  --w14-ok: #15803D;
}

/* ============================================================
   1) NASTRO BRAND
   Il track contiene due gruppi identici. La traslazione è
   -50% meno metà gap: così il giro chiude esatto sul primo logo
   della seconda copia e la ricucitura non si vede.
   ============================================================ */

.bm14-sec {
  background: var(--w14-paper-2);
  border-top: 1px solid var(--border, var(--w14-line));
  border-bottom: 1px solid var(--border, var(--w14-line));
  padding-block: 38px 42px;
}

.bm14-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  text-align: left;
  gap: 6px 16px;
  padding-bottom: 22px;
}

.bm14-head .eyebrow {
  flex: 0 0 100%;
  margin-bottom: 2px;
}

.bm14-title {
  font-family: var(--ts-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--w14-ink);
  margin: 0;
}

.bm14-sub {
  font-family: var(--ts-body);
  font-size: 13.5px;
  color: var(--w14-ink-3);
  margin: 0;
}

.bm14 {
  --g: 64px;
  --dur: 46s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

.bm14-track {
  display: flex;
  width: max-content;
  gap: var(--g);
  animation: bm14-scroll var(--dur) linear infinite;
  will-change: transform;
}

.bm14-group {
  display: flex;
  align-items: center;
  gap: var(--g);
}

@keyframes bm14-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--g) / 2)), 0, 0); }
}

.bm14:hover .bm14-track,
.bm14:focus-within .bm14-track { animation-play-state: paused; }

.bm14-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--ts-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A8A49C;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease;
}

a.bm14-item:hover,
a.bm14-item:focus-visible { color: var(--w14-ink); }

.bm14-logo {
  display: block;
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

a.bm14-item:hover .bm14-logo { filter: none; opacity: 1; }

/* ============================================================
   2) SHOWROOM — colonna dati
   ============================================================ */

.loc14-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: start;
}

.loc14-copy { min-width: 0; }

.loc14-title {
  font-family: var(--ts-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--w14-ink);
  margin: 10px 0 0;
  text-wrap: balance;
}

.loc14-title .serif { color: var(--brand); }

.loc14-lead {
  font-family: var(--ts-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--w14-ink-2);
  max-width: 52ch;
  margin: 14px 0 0;
}

/* ---- orari ---- */

.loc14-hours {
  margin-top: 24px;
  border: 1px solid var(--border, var(--w14-line));
  border-radius: 12px;
  background: var(--w14-paper);
  padding: 16px 18px;
}

.loc14-hours-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, var(--w14-line));
}

.loc14-hours-label {
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w14-ink-3);
}

.loc14-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--ts-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--w14-ink-3);
}

.loc14-status[hidden] { display: none; }

.loc14-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #A8A49C;
}

.loc14-status.is-open { color: var(--w14-ok); }
.loc14-status.is-open .loc14-dot { background: var(--w14-ok); }

.loc14-hours-list {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  display: grid;
  gap: 7px;
}

.loc14-hours-day {
  font-family: var(--ts-body);
  font-size: 14.5px;
  color: var(--w14-ink-2);
}

.loc14-hours-list .is-closed .loc14-hours-day { color: var(--w14-ink-3); }

/* ---- contatti ---- */

.loc14-facts {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.loc14-facts li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.loc14-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--brand);
}

.loc14-ico svg { width: 18px; height: 18px; display: block; }

.loc14-facts-txt {
  font-family: var(--ts-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--w14-ink-2);
  min-width: 0;
  word-break: break-word;
}

.loc14-facts-txt a {
  color: var(--w14-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border, var(--w14-line));
}

.loc14-facts-txt a:hover,
.loc14-facts-txt a:focus-visible { color: var(--brand); border-bottom-color: var(--brand); }

/* ---- righe extra opzionali (blocchi info_row non duplicati) ---- */

.loc14-extra {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border, var(--w14-line));
  display: grid;
  gap: 10px;
}

.loc14-extra li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
}

.loc14-extra-l {
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w14-ink-3);
}

.loc14-extra-v {
  font-family: var(--ts-body);
  font-size: 14.5px;
  color: var(--w14-ink-2);
}

.loc14-extra-v p { margin: 0; }

/* ---- pulsanti ---- */

.loc14-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.loc14-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  border-radius: 9px;
  font-family: var(--ts-body);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.loc14-btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}

.loc14-btn-primary:hover,
.loc14-btn-primary:focus-visible { background: #C2410C; border-color: #C2410C; color: #FFFFFF; }

.loc14-btn-ghost {
  background: var(--w14-paper);
  border-color: var(--border, var(--w14-line));
  color: var(--w14-ink);
}

.loc14-btn-ghost:hover,
.loc14-btn-ghost:focus-visible { border-color: var(--brand); color: var(--brand); }

.loc14-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- mappa: solo ritocco di cornice ---- */

.loc14-map {
  border: 1px solid var(--border, var(--w14-line));
  border-radius: 14px;
  overflow: hidden;
  background: var(--w14-paper-2);
  min-height: 380px;
}

.loc14-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .loc14-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .loc14-map,
  .loc14-map iframe { min-height: 300px; }
}

@media (max-width: 560px) {
  .bm14-sec { padding-block: 30px 34px; }
  .bm14 { --g: 40px; --dur: 34s; }
  .bm14-item { font-size: 21px; }
  .bm14-logo { height: 26px; }
  .bm14-title { font-size: 19px; }

  .loc14-hours { padding: 14px 15px; }
  .loc14-hours-head { justify-content: flex-start; }
  .loc14-extra li { grid-template-columns: 1fr; }

  .loc14-cta { flex-direction: column; align-items: stretch; }
  .loc14-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bm14-track { animation: none; }
  .bm14 {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .bm14-track > .bm14-group[aria-hidden="true"] { display: none; }
}

/* accento titolo showroom: stesso trattamento delle recensioni V6-14 (niente corsivo serif) */
.loc14-title .loc14-accent{font-style:normal;font-family:inherit;color:var(--brand)}
@media (max-width:560px){
  .ft14 .ft14-mark-txt{font-size:clamp(62px,19.4vw,120px)}
}

/* ===== V6-14 — recensioni generali del negozio (scheda prodotto) ===== */
.rvgen{background:#FFFFFF;border-top:1px solid var(--border,#E4E3DF);padding-block:40px 46px}
.rvgen-wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.rvgen-head{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end;justify-content:space-between;padding-bottom:20px}
.rvgen-eyebrow{font-family:var(--ts-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6E6E69;display:inline-flex;align-items:center;gap:8px}
.rvgen-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}
.rvgen-title{font-family:var(--ts-display);font-weight:800;font-size:28px;line-height:1.08;margin:8px 0 0;letter-spacing:-0.01em}
.rvgen-lead{font-size:14.5px;color:#3A3A38;margin:6px 0 0;max-width:60ch}
.rvgen-score{display:flex;align-items:center;gap:12px;border:1px solid var(--border,#E4E3DF);border-radius:12px;padding:10px 15px;background:#F7F7F5}
.rvgen-n{font-family:var(--ts-display);font-weight:800;font-size:34px;line-height:.9}
.rvgen-txt{display:grid;gap:2px}
.rvgen-stars{color:var(--brand);font-size:14px;letter-spacing:1.5px}
.rvgen-src{font-size:12.5px;color:#6E6E69}
.rvgen-slot{min-width:0}
.rvgen-empty{font-size:14px;color:#6E6E69;margin:0}
.rvgen-empty a{color:var(--brand);font-weight:600;text-decoration:none;border-bottom:2px solid var(--brand)}
@media (max-width:560px){
  .rvgen{padding-block:30px 34px}
  .rvgen-wrap{padding-inline:16px}
  .rvgen-title{font-size:23px}
  .rvgen-score{width:100%}
}

/* ===== V6-14b — Promo Esclusive home: nome su due righe, mai sotto al cartellino ===== */
.ts-kits-home .ts-esc-tile-name{
  display:block;
  min-height:2.6em;
}
.ts-kits-home .ts-esc-tile-name-in{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
/* il cartellino non deve mai stare sopra al testo: gli riservo la sua corsia */
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{min-height:2.7em}
@media (max-width:768px){
  .ts-kits-home .ts-esc-tile-name{font-size:12.5px;line-height:1.3;padding-right:96px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{font-size:15.5px;line-height:1.25;padding-right:136px}
  .ts-kits-home .ts-esc-price .now{font-size:15px}
  .ts-kits-home .ts-esc-price .was{font-size:11px}
}
@media (max-width:400px){
  .ts-kits-home .ts-esc-tile-name{font-size:12px;padding-right:88px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{font-size:15px;padding-right:124px}
  .ts-kits-home .ts-esc-price{padding:4px 7px 4px 14px}
  .ts-kits-home .ts-esc-price .now{font-size:14px}
}

/* Su telefono il cartellino non sta accanto al nome (la tessera è larga ~180px):
   esce dalla sovrapposizione e si mette sotto, sulla sua riga. */
@media (max-width:768px){
  .ts-kits-home .ts-esc-tile{display:flex;flex-direction:column}
  .ts-kits-home .ts-esc-tile-img{order:1}
  .ts-kits-home .ts-esc-tile-name{order:2;padding-right:12px;min-height:0;margin-bottom:6px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{padding-right:16px}
  .ts-kits-home .ts-esc-price{
    position:relative;
    order:3;
    top:auto;right:auto;bottom:auto;left:auto;
    align-self:flex-start;
    margin:0 10px 12px;
  }
  .ts-kits-home .ts-esc-tile--big .ts-esc-price{margin:0 16px 16px}
  .ts-kits-home .ts-esc-price .off{top:-11px;left:auto;right:-8px}
}

/* ============================================================
   V6-14c — Tessere Promo Esclusive rifatte da zero.
   Struttura fissa: foto (elastica) · nome su 2 righe · prezzo su riga propria.
   Il prezzo non è più sovrapposto alla foto né al nome, e la tessera
   ritaglia tutto quello che esce: niente testo oltre il bordo.
   ============================================================ */
.ts-kits-home .ts-esc-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  padding:0;
  background:#FFFFFF;
  border:1px solid var(--border,#E5E5E5);
  border-radius:14px;
  text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ts-kits-home .ts-esc-tile:hover{
  border-color:#D0CEC8;
  box-shadow:0 8px 20px rgba(0,0,0,.07);
  transform:translateY(-2px);
}
.ts-kits-home .ts-esc-tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* foto */
.ts-kits-home .ts-esc-tile-img{
  order:1;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 14px 8px;
  background:#FFFFFF;
  aspect-ratio:auto;
}
.ts-kits-home .ts-esc-tile-img img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  mix-blend-mode:normal;
}

/* nome: sempre due righe, mai una in più */
.ts-kits-home .ts-esc-tile-name{
  order:2;
  flex:0 0 auto;
  display:block;
  margin:0 0 10px;
  padding:0 14px;
  min-height:0;
  font-family:var(--ts-body);
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:#1F1F1F;
}
.ts-kits-home .ts-esc-tile-name-in{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  word-break:break-word;
}

/* cartellino prezzo: riga propria, in basso a sinistra */
.ts-kits-home .ts-esc-price{
  order:3;
  flex:0 0 auto;
  position:relative;
  top:auto;right:auto;bottom:auto;left:auto;
  z-index:1;
  align-self:flex-start;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  margin:0 14px 14px;
  padding:6px 11px 6px 18px;
  background:#FFFFFF;
  border:1px solid #D9D7D1;
  border-radius:4px 10px 10px 4px;
  box-shadow:none;
  text-align:left;
}
.ts-kits-home .ts-esc-price .now{
  display:inline-block;
  font-family:var(--ts-display);
  font-weight:800;
  font-size:19px;
  line-height:1;
  letter-spacing:-.01em;
  color:#1F1F1F;
}
.ts-kits-home .ts-esc-price .was{
  display:inline-block;
  font-size:12px;
  line-height:1;
  color:#A3A3A3;
  text-decoration:line-through;
}
.ts-kits-home .ts-esc-price .off{
  position:static;
  display:inline-block;
  padding:3px 6px;
  border-radius:5px;
  background:var(--danger,#DC2626);
  color:#FFFFFF;
  font-family:var(--ts-body);
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.ts-kits-home .ts-esc-price .now--ask{
  font-family:var(--ts-body);
  font-weight:700;
  font-size:13px;
  color:#C2410C;
}

/* tessera grande */
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{font-size:17px;padding:0 18px}
.ts-kits-home .ts-esc-tile--big .ts-esc-price{margin:0 18px 18px}
.ts-kits-home .ts-esc-tile--big .ts-esc-price .now{font-size:26px}
.ts-kits-home .ts-esc-tile--big .ts-esc-tile-img{padding:20px 20px 10px}

/* ---- desktop: mosaico 4 colonne, righe più alte così la foto respira ---- */
@media (min-width:769px){
  .ts-kits-home .ts-esc-bento{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(2,232px);
    grid-auto-rows:232px;
    gap:14px;
  }
  .ts-kits-home .ts-esc-tile--big{grid-column:span 2;grid-row:span 2}
  .ts-kits-home .ts-esc-tile-img{min-height:0;padding:14px 14px 6px}
  .ts-kits-home .ts-esc-tile-img img{max-height:100%}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-img img{max-height:100%}
  .ts-kits-home .ts-esc-tile--all{grid-column:1 / -1;grid-row:auto;min-height:0}
}

/* ---- telefono: due colonne, foto ad altezza fissa ---- */
@media (max-width:768px){
  .ts-kits-home .ts-esc-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ts-kits-home .ts-esc-tile--big{grid-column:1 / -1}
  .ts-kits-home .ts-esc-tile-img{flex:0 0 auto;height:128px;padding:12px 12px 6px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-img{height:210px;padding:16px 16px 8px}
  .ts-kits-home .ts-esc-tile-name{font-size:13px;padding:0 12px;margin-bottom:8px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-name{font-size:16px;padding:0 14px}
  .ts-kits-home .ts-esc-price{margin:0 12px 12px;padding:5px 9px 5px 16px;gap:6px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-price{margin:0 14px 14px}
  .ts-kits-home .ts-esc-price .now{font-size:16px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-price .now{font-size:22px}
  .ts-kits-home .ts-esc-price .was{font-size:11px}
  .ts-kits-home .ts-esc-price .off{font-size:10px;padding:2px 5px}
}
@media (max-width:400px){
  .ts-kits-home .ts-esc-tile-img{height:112px}
  .ts-kits-home .ts-esc-tile-name{font-size:12.5px}
  .ts-kits-home .ts-esc-price .now{font-size:15px}
  .ts-kits-home .ts-esc-price .was{display:none}
}
@media (min-width:769px){
  .ts-kits-home .ts-esc-bento{grid-template-rows:repeat(2,254px);grid-auto-rows:254px}
  .ts-kits-home .ts-esc-tile-img{padding:16px 16px 4px}
  .ts-kits-home .ts-esc-tile--big .ts-esc-tile-img{padding:24px 24px 8px}
}

/* ============================================================
   V6-14d — Tessera "Altri N kit": ripristinata scura e resa utile.
   (Con la riscrittura delle tessere aveva preso il fondo bianco e
   diventava nera solo al passaggio del mouse.)
   ============================================================ */
.ts-kits-home .ts-esc-tile--all{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:20px 22px;
  background:#161615;
  border:1px solid #161615;
  color:#FFFFFF;
  box-shadow:none;
}
.ts-kits-home .ts-esc-tile--all:hover{
  background:#101010;
  border-color:var(--brand);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.ts-kits-home .ts-esc-all-txt{display:block;min-width:0}
.ts-kits-home .ts-esc-all-title{
  display:block;
  font-family:var(--ts-display);
  font-weight:800;
  font-size:26px;
  line-height:1.02;
  letter-spacing:-0.01em;
  color:#FFFFFF;
}
.ts-kits-home .ts-esc-all-sub{
  display:block;
  margin-top:6px;
  font-family:var(--ts-body);
  font-size:13.5px;
  line-height:1.4;
  color:#B9B5AE;
}

/* anteprime dei kit rimanenti */
.ts-kits-home .ts-esc-all-thumbs{display:flex;align-items:center}
.ts-kits-home .ts-esc-all-thumb{
  width:56px;height:56px;
  flex:0 0 56px;
  display:flex;align-items:center;justify-content:center;
  margin-right:-10px;
  padding:5px;
  background:#FFFFFF;
  border:1px solid #332F2C;
  border-radius:10px;
  overflow:hidden;
}
.ts-kits-home .ts-esc-all-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ts-kits-home .ts-esc-all-more{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;
  margin-left:18px;
  font-family:var(--ts-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:#B9B5AE;
}

/* bottone vero, non una scritta che si accende al passaggio */
.ts-kits-home .ts-esc-all-go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:flex-start;
  height:42px;
  padding:0 18px;
  border-radius:9px;
  background:var(--brand);
  color:#FFFFFF;
  font-family:var(--ts-body);
  font-weight:700;
  font-size:14.5px;
  line-height:1;
  transition:background .18s ease;
}
.ts-kits-home .ts-esc-tile--all:hover .ts-esc-all-go{background:#C2410C}
.ts-kits-home .ts-esc-all-go svg{flex:0 0 16px}

@media (min-width:769px){
  .ts-kits-home .ts-esc-tile--all{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:20px 26px;
  }
  .ts-kits-home .ts-esc-all-title{font-size:28px}
  .ts-kits-home .ts-esc-all-thumbs{margin-left:auto}
}
@media (max-width:768px){
  .ts-kits-home .ts-esc-tile--all{padding:18px}
  .ts-kits-home .ts-esc-all-title{font-size:23px}
  .ts-kits-home .ts-esc-all-thumb{width:50px;height:50px;flex-basis:50px}
  .ts-kits-home .ts-esc-all-more{height:50px}
  .ts-kits-home .ts-esc-all-go{align-self:stretch}
}
.ts-kits-home .ts-esc-all-thumbs{gap:8px}
.ts-kits-home .ts-esc-all-thumb{margin-right:0}
.ts-kits-home .ts-esc-all-more{margin-left:6px}
@media (min-width:769px){
  /* la fascia scura sta sulla riga dopo il mosaico: altezza sul contenuto, non 254px fissi */
  .ts-kits-home .ts-esc-bento{grid-auto-rows:auto}
  .ts-kits-home .ts-esc-tile--all{min-height:0;padding:18px 24px}
}