*{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#E7EAF6}
  ::selection{background:#FF2E5B;color:#fff}
  .noscroll::-webkit-scrollbar{height:0;width:0}
  @keyframes rgRise{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:none}}
  @keyframes rgFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
  @keyframes rgFloat2{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-22px) rotate(-3deg)}}
  @keyframes rgBlob{0%,100%{border-radius:46% 54% 58% 42%/52% 44% 56% 48%;transform:rotate(0deg)}50%{border-radius:58% 42% 44% 56%/44% 56% 44% 56%;transform:rotate(8deg)}}
  @keyframes rgMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes rgGlow{0%,100%{opacity:.45}50%{opacity:1}}
  @keyframes rgScan{0%{background-position:0 0}100%{background-position:0 16px}}
  @keyframes rgSlideR{from{transform:translateX(100%)}to{transform:none}}
  @keyframes rgSlideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  @keyframes rgFade{from{opacity:0}to{opacity:1}}
  @keyframes rgBump{0%,100%{transform:scale(1)}40%{transform:scale(1.55)}}
  .rg-rise{animation:rgRise .8s cubic-bezier(.2,.75,.2,1) both}
  .reveal{opacity:0}
  .reveal.seen{animation:rgRise .85s cubic-bezier(.2,.75,.2,1) both}
  .rg-bump{animation:rgBump .42s ease}
  .rg-card{transition:transform .4s cubic-bezier(.2,.75,.2,1),box-shadow .4s,border-color .3s}
  .rg-card:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 34px 70px -34px rgba(14,33,86,.42)}
  .rg-tile{transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s,background .3s}
  .rg-tile:hover{transform:translateY(-6px) rotate(-1deg)}
  .rg-tile:hover .rg-tileimg{transform:scale(1.12) rotate(4deg)}
  .rg-tileimg{transition:transform .45s cubic-bezier(.2,.75,.2,1)}
  .rg-btn{transition:transform .16s,box-shadow .3s,background .3s,color .25s}
  .rg-btn:hover{transform:translateY(-2px)}
  .rg-btn:active{transform:scale(.96)}
  .rg-link{position:relative;transition:color .2s}
  .rg-link::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;background:#FF2E5B;border-radius:2px;transition:right .3s ease}
  .rg-link:hover{color:#0E2156}
  .rg-link:hover::after{right:0}
  .rg-pop:hover{transform:translateY(-3px) scale(1.06)}
  .rg-prodimg{transition:transform .5s cubic-bezier(.2,.75,.2,1)}
  .rg-card:hover .rg-prodimg{transform:scale(1.08) rotate(-3deg)}
  .rg-heart:hover{background:#FFE3EA;color:#FF2E5B}
  input::placeholder,textarea::placeholder{color:#9aa3c0}
  input:focus,textarea:focus{outline:none}

/* ============================================================
   REAGENTA — Design system dal handoff del cliente (§3)
   Font: Space Grotesk (titoli) · IBM Plex Sans (corpo) · IBM Plex Mono (label)
   ============================================================ */

:root {
  --rg-magenta:    #FF2E5B;
  --rg-magenta-lt: #FF6E8E;
  --rg-blue-dark:  #0C1633;
  --rg-blue:       #0E2156;
  --rg-text:       #4a5478;
  --rg-muted:      #7079a0;
  --rg-mono:       #5b6488;
  --rg-border:     #EEF0F8;
  --rg-bg-soft:    #F4F6FC;
  --rg-bg-page:    #E7EAF6;
  --radius-card:   34px;
  --radius-inner:  18px;
  --radius-btn:    13px;
  --shadow-card:   0 40px 90px -50px rgba(14,33,86,.5);
  --shadow-btn:    0 8px 18px -6px rgba(255,46,91,.7);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--rg-text);
  background: var(--rg-bg-page);
  font-size: 15px;
  line-height: 1.55;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; color: var(--rg-blue); margin: 0 0 10px; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.mono-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .04em;
  color: var(--rg-mono); text-transform: uppercase;
}

/* ---------- Componenti base ---------- */
.card {
  background: #fff;
  border: 1px solid var(--rg-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.btn-magenta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rg-magenta); color: #fff;
  border: none; border-radius: var(--radius-btn);
  height: 44px; padding: 0 20px;
  font: 600 14px 'IBM Plex Sans', sans-serif;
  box-shadow: var(--shadow-btn); cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn-magenta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-magenta.btn-sm { height: 38px; padding: 0 14px; font-size: 13px; }
.btn-outline {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border: 1px solid var(--rg-border); border-radius: var(--radius-btn);
  background: #fff; color: var(--rg-blue); font-weight: 600; font-size: 14px;
}
.pill {
  display: inline-flex; align-items: center;
  border-radius: 100px; padding: 3px 10px;
  background: var(--rg-bg-soft); color: var(--rg-mono);
  font: 500 11px 'IBM Plex Mono', monospace;
}
.avail-ok    { background: #E6F7EF; color: #1F8A5B; }
.avail-order { background: #FFF6E5; color: #B08400; }
.avail-eol   { background: #FFE9EC; color: #C22743; }

.badge {
  position: absolute; top: 14px; left: 14px;
  border-radius: 8px; padding: 4px 10px;
  font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .05em;
  color: #fff; text-transform: uppercase;
}
.badge-magenta { background: var(--rg-magenta); }
.badge-navy    { background: var(--rg-blue); }

/* ---------- Header ---------- */
.site-header {
  background: #fff; border-bottom: 1px solid var(--rg-border);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo {
  font: 700 22px 'Space Grotesk', sans-serif; color: var(--rg-blue);
}
.logo-dot { color: var(--rg-magenta); }
.main-nav { display: flex; gap: 22px; flex: 1; }
.main-nav a { font-weight: 500; font-size: 14px; color: var(--rg-text); padding: 6px 2px; }
.main-nav a.active, .main-nav a:hover { color: var(--rg-magenta); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--rg-border); border-radius: 12px; background: #fff;
  font-size: 17px; color: var(--rg-blue); position: relative;
}
.cart-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--rg-magenta); color: #fff;
  font: 600 10px 'IBM Plex Mono', monospace;
  min-width: 18px; height: 18px; border-radius: 100px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ---------- Page head ---------- */
.page-head { padding: 36px 22px 8px; }
.page-head h1 { font-size: 34px; }
.page-sub { color: var(--rg-muted); max-width: 640px; margin-top: 4px; }
.crumb { font: 500 11px 'IBM Plex Mono', monospace; color: var(--rg-muted); letter-spacing: .08em; margin-bottom: 10px; }

/* ---------- Catalogo layout ---------- */
.catalog-layout {
  display: grid; grid-template-columns: 270px 1fr;
  gap: 26px; padding-top: 18px; padding-bottom: 60px;
  align-items: start;
}
.filters { border-radius: var(--radius-inner); padding: 18px; position: sticky; top: 90px; }
.filter-search { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-search input {
  flex: 1; height: 38px; border: 1px solid var(--rg-border); border-radius: 10px;
  background: var(--rg-bg-soft); padding: 0 12px; font: 14px 'IBM Plex Sans', sans-serif;
  color: var(--rg-blue); outline: none;
}
.filter-search input:focus { border-color: var(--rg-magenta); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  border-radius: 100px; background: #FFE3EA; color: var(--rg-magenta);
  font: 500 11px 'IBM Plex Mono', monospace; padding: 4px 10px;
}
.chip-clear { background: var(--rg-bg-soft); color: var(--rg-mono); }

.filter-group { border-top: 1px solid var(--rg-border); padding: 10px 0; }
.filter-title {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font: 600 13px 'IBM Plex Sans', sans-serif; color: var(--rg-blue);
}
.filter-group.is-closed .filter-options { display: none; }
.filter-group.is-closed .chev { transform: rotate(-90deg); }
.chev { transition: transform .15s ease; color: var(--rg-muted); }
.filter-options { padding-top: 6px; max-height: 260px; overflow: auto; }
.filter-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 2px; font-size: 13px; color: var(--rg-text); border-radius: 8px;
}
.filter-opt:hover { background: var(--rg-bg-soft); }
.filter-opt .checkbox {
  width: 17px; height: 17px; flex: 0 0 17px;
  border: 1px solid #D7DCEC; border-radius: 5px; background: #fff;
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
.filter-opt.is-active .checkbox { background: var(--rg-magenta); border-color: var(--rg-magenta); }
.opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-count { font: 500 11px 'IBM Plex Mono', monospace; color: var(--rg-muted); }

/* ---------- Toolbar + griglia ---------- */
.catalog-toolbar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.sort-form select {
  height: 38px; border: 1px solid var(--rg-border); border-radius: 10px;
  background: #fff; padding: 0 12px; font: 13px 'IBM Plex Sans', sans-serif; color: var(--rg-blue);
}
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}
.product-card {
  border-radius: var(--radius-inner); overflow: hidden;
  box-shadow: 0 20px 45px -30px rgba(14,33,86,.35);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card-media {
  position: relative; display: block; aspect-ratio: 4/3;
  background: var(--rg-bg-soft); overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.media-placeholder { display: grid; place-items: center; height: 100%; font-size: 40px; color: #c9d1e6; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-size: 15px; line-height: 1.35; margin: 0; }
.card-title a:hover { color: var(--rg-magenta); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.price-block { display: flex; flex-direction: column; }
.price { font: 700 17px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.price small { font: 500 10px 'IBM Plex Mono', monospace; color: var(--rg-muted); }
.price-list { font-size: 12px; color: var(--rg-muted); text-decoration: line-through; }
.price-locked { filter: blur(7px); user-select: none; }
.lock-cta { color: var(--rg-magenta); text-transform: none; letter-spacing: 0; }
.btn-add { height: 38px; padding: 0 14px; font-size: 13px; }

.pagination { display: flex; gap: 6px; margin-top: 26px; justify-content: center; }
.page-link {
  min-width: 38px; height: 38px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--rg-border); border-radius: 10px;
  font: 600 13px 'IBM Plex Mono', monospace; color: var(--rg-blue);
}
.page-link.is-active { background: var(--rg-blue); color: #fff; border-color: var(--rg-blue); }

.empty-state { border-radius: var(--radius-inner); padding: 44px; text-align: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--rg-blue-dark); color: #aeb6d6; margin-top: 40px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; padding: 40px 22px; flex-wrap: wrap; }
.footer-logo { font: 700 20px 'Space Grotesk', sans-serif; color: #fff; margin-bottom: 8px; }
.footer-note { font-size: 13px; line-height: 1.7; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.footer-nav a:hover { color: #fff; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 100;
  background: var(--rg-blue-dark); color: #fff;
  border-radius: 14px; padding: 13px 18px;
  font: 500 13px 'IBM Plex Sans', sans-serif;
  box-shadow: 0 20px 50px -20px rgba(12,22,51,.6);
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .main-nav { display: none; }
}

/* ============================================================
   SCHEDA PRODOTTO
   ============================================================ */
.product-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 10px 22px 50px; align-items: start;
}
.product-gallery { position: sticky; top: 90px; }
.gallery-main {
  background: #fff; border: 1px solid var(--rg-border);
  border-radius: var(--radius-card); aspect-ratio: 1;
  display: grid; place-items: center; overflow: hidden; padding: 30px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.thumb {
  width: 70px; height: 70px; border: 1px solid var(--rg-border);
  border-radius: 14px; background: #fff; padding: 6px; cursor: pointer; overflow: hidden;
}
.thumb.is-active { border-color: var(--rg-magenta); border-width: 2px; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

.product-info h1 { font-size: 30px; margin: 6px 0 14px; }
.product-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cert-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cert-badge {
  border: 1px solid var(--rg-border); border-radius: 8px; padding: 5px 12px;
  font: 500 11px 'IBM Plex Mono', monospace; color: var(--rg-blue); background: var(--rg-bg-soft);
}
.mode-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.mode-tab {
  flex: 1; height: 46px; border: 1px solid var(--rg-border); border-radius: 12px;
  background: #fff; font: 600 13px 'IBM Plex Sans', sans-serif; color: var(--rg-blue); cursor: pointer;
}
.mode-tab.is-active { background: var(--rg-blue); color: #fff; border-color: var(--rg-blue); }

.product-price-box { border-radius: var(--radius-inner); padding: 22px; margin-bottom: 22px; }
.variant-select { margin-bottom: 16px; }
.variant-select label { display: block; margin-bottom: 6px; }
.variant-select select, .qty-input {
  height: 46px; border: 1px solid var(--rg-border); border-radius: 12px;
  font: 14px 'IBM Plex Sans', sans-serif; color: var(--rg-blue);
}
.variant-select select { width: 100%; padding: 0 12px; background: #fff; }
.price-display { margin: 16px 0; display: flex; flex-direction: column; gap: 4px; }
.price-lg { font: 700 30px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.price-lg small { font: 500 12px 'IBM Plex Mono', monospace; color: var(--rg-muted); }
.price-list-lg { font-size: 16px; color: var(--rg-muted); text-decoration: line-through; }
.buy-row { display: flex; gap: 12px; align-items: center; }
.qty-input { display: inline-flex; align-items: center; overflow: hidden; }
.qty-input button {
  width: 42px; height: 44px; border: none; background: var(--rg-bg-soft);
  font-size: 18px; color: var(--rg-blue); cursor: pointer;
}
.qty-input input { width: 54px; height: 44px; border: none; text-align: center; font: 600 15px 'IBM Plex Sans'; color: var(--rg-blue); }
.btn-buy { flex: 1; height: 48px; }
.product-description { line-height: 1.7; color: var(--rg-text); }
.product-description :is(h2,h3) { font-size: 18px; margin-top: 20px; }

.panel-config { border-radius: var(--radius-card); padding: 30px; margin: 20px auto 40px; }
.panel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 18px; }
.panel-group h4 { font-size: 14px; color: var(--rg-magenta); margin-bottom: 10px; }
.panel-analyte { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.panel-analyte:hover { background: var(--rg-bg-soft); }
.analyte-name { font-size: 14px; color: var(--rg-blue); }

.related-section { padding-bottom: 50px; }
.related-section h2 { margin-bottom: 18px; }

/* ============================================================
   CARRELLO
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 26px; padding: 18px 22px 60px; align-items: start; }
.cart-items { border-radius: var(--radius-inner); padding: 8px 22px; }
.cart-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rg-border); }
.cart-item:last-child { border-bottom: none; }
.cart-item h4 { font-size: 15px; margin: 4px 0 0; }
.cart-item-price { text-align: right; }
.cart-item-price .mono-label { display: block; }
.cart-item-remove { width: 34px; height: 34px; border: none; background: var(--rg-bg-soft); border-radius: 10px; font-size: 18px; color: var(--rg-muted); cursor: pointer; }
.cart-item-remove:hover { background: #FFE9EC; color: var(--rg-magenta); }
.cart-summary { border-radius: var(--radius-inner); padding: 24px; position: sticky; top: 90px; }
.cart-summary h3 { margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.summary-total { border-top: 1px solid var(--rg-border); margin-top: 8px; padding-top: 14px; font: 700 17px 'Space Grotesk'; color: var(--rg-blue); }
.btn-block { display: flex; width: 100%; margin-top: 12px; }

/* ============================================================
   HOME
   ============================================================ */
.hero { padding: 50px 22px; }
.hero h1 { font-size: 44px; line-height: 1.1; margin: 12px 0; }
.hero-text p { font-size: 17px; color: var(--rg-muted); max-width: 560px; }
.hero-actions { display: flex; gap: 12px; margin-top: 24px; }
.home-featured { padding: 20px 22px 60px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }

/* ============================================================
   ERRORI
   ============================================================ */
.error-page { text-align: center; padding: 80px 22px; }
.error-page h1 { font-size: 32px; margin: 10px 0; }
.error-page p { color: var(--rg-muted); margin-bottom: 20px; }

@media (max-width: 920px) {
  .product-layout { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
}

/* ============ HOME ============ */
.hero { padding: 56px 0 30px; }
.hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.hero-title { font-size: 52px; line-height: 1.06; letter-spacing: -0.01em; margin: 10px 0 14px; }
.txt-gradient {
  background: linear-gradient(100deg, #FF2E5B, #FF5C7D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--rg-muted); font-size: 16px; max-width: 480px; }
.hero-search { display: flex; gap: 10px; margin: 22px 0 14px; max-width: 520px; }
.hero-search input {
  flex: 1; height: 48px; border: 1px solid var(--rg-border); border-radius: 14px;
  background: #fff; padding: 0 16px; font: 15px 'IBM Plex Sans', sans-serif; color: var(--rg-blue); outline: none;
}
.hero-search input:focus { border-color: var(--rg-magenta); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-badges { border-radius: var(--radius-inner); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.hero-badge strong { display: block; font-family: 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.hero-badge span { font-size: 13px; color: var(--rg-muted); }

.section { padding: 34px 22px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.section-head h2 { font-size: 26px; }
.link-more { font: 600 13px 'IBM Plex Sans', sans-serif; color: var(--rg-magenta); }

.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.area-card {
  border-radius: var(--radius-inner); padding: 18px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 16px 40px -30px rgba(14,33,86,.4); transition: transform .15s ease;
}
.area-card:hover { transform: translateY(-3px); }
.area-card strong { font-family: 'Space Grotesk', sans-serif; color: var(--rg-blue); }

.trust-band { background: var(--rg-blue-dark); color: #fff; padding: 48px 0; margin: 20px 0; }
.trust-band h2 { color: #fff; margin-bottom: 24px; }
.trust-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.trust-cols strong { display: block; font-family: 'Space Grotesk', sans-serif; margin-bottom: 6px; }
.trust-cols span { color: #aeb6d6; font-size: 14px; line-height: 1.6; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.profile-tile { border-radius: var(--radius-inner); padding: 20px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 16px 40px -30px rgba(14,33,86,.4); transition: transform .15s ease; }
.profile-tile:hover { transform: translateY(-3px); }
.profile-tile strong { font-family: 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.profile-tile span { font-size: 13px; color: var(--rg-muted); }

.cta-band { border-radius: var(--radius-inner); padding: 30px; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band p { color: var(--rg-muted); max-width: 520px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ FORM / AUTH ============ */
.auth-wrap { padding: 40px 22px 60px; display: flex; justify-content: center; }
.auth-card { border-radius: var(--radius-inner); padding: 32px; width: 100%; max-width: 480px; }
.auth-card.auth-wide { max-width: 760px; }
.form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font: 600 12px 'IBM Plex Sans', sans-serif; color: var(--rg-blue); }
.field input, .field select, .field textarea {
  height: 42px; border: 1px solid var(--rg-border); border-radius: 10px;
  background: var(--rg-bg-soft); padding: 0 12px; font: 14px 'IBM Plex Sans', sans-serif;
  color: var(--rg-blue); outline: none;
}
.field input:focus { border-color: var(--rg-magenta); background: #fff; }
.field-hint { font-size: 12px; color: var(--rg-muted); margin: 2px 0 0; }
.fieldset { border: 1px solid var(--rg-border); border-radius: var(--radius-inner); padding: 16px; margin: 0; }
.fieldset legend { font: 600 13px 'Space Grotesk', sans-serif; color: var(--rg-blue); padding: 0 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--rg-text); }
.check a { color: var(--rg-magenta); }
.btn-block { width: 100%; }
.form-error {
  background: #FFE9EC; color: #C22743; border-radius: 12px; padding: 12px 14px;
  font: 500 13px 'IBM Plex Sans', sans-serif; margin-top: 10px;
}
.auth-alt { font-size: 13px; color: var(--rg-muted); text-align: center; margin-top: 8px; }
.auth-alt a { color: var(--rg-magenta); font-weight: 600; }

.profile-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.profile-card {
  border: 1.5px solid var(--rg-border); border-radius: 14px; padding: 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .12s ease;
}
.profile-card input { position: absolute; opacity: 0; }
.profile-card strong { font: 600 13px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.profile-card span { font-size: 11.5px; color: var(--rg-muted); line-height: 1.4; }
.profile-card.is-active { border-color: var(--rg-magenta); background: #FFF5F7; }

/* ============ AREA RISERVATA ============ */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 10px 22px 60px; align-items: start; }
.panel { border-radius: var(--radius-inner); padding: 22px; }
.panel h3 { margin-bottom: 12px; }
.panel p { margin: 0 0 12px; }
.notice { grid-column: 1 / -1; border-radius: var(--radius-inner); padding: 16px 20px; }
.notice-ok { background: #E6F7EF; color: #1F8A5B; border: none; box-shadow: none; }

@media (max-width: 920px) {
  .hero-inner, .account-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 38px; }
  .trust-cols { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
.price-quote { font-size: 15px; color: var(--rg-blue); }

/* ====== Classi dal design cliente (Home .dc) ====== */
.rg-btn { font-family:'IBM Plex Sans',sans-serif; }
.rg-card { transition: transform .18s ease, box-shadow .18s ease; }
.rg-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(14,33,86,.5); }
.rg-rise { animation: rgRise .7s cubic-bezier(.2,.7,.3,1) both; }

.rg-link { cursor: pointer; text-decoration: none; }
.rg-prodimg { transition: transform .25s ease; }
.rg-card:hover .rg-prodimg { transform: scale(1.05); }
.noscroll { overflow-x: auto; }
[data-href] { cursor: pointer; }

/* Reveal allo scroll: nascosto solo con JS attivo (fallback senza JS: visibile) */
html:not(.js) .reveal { opacity: 1 !important; animation: none !important; }

/* Checkout / conferma: responsive griglie */
@media (max-width: 920px) {
  .checkout-grid, .success-grid { grid-template-columns: 1fr !important; }
  .checkout-grid aside { position: static !important; }
}

/* ============================================================
   SHELL — classi del telaio (estratte dagli stili inline di
   main.php per poterle adattare via media query: gli stili
   inline non sono sovrascrivibili dai breakpoint).
   Desktop = valori identici al design cliente originale.
   ============================================================ */
.rg-shell   { max-width: 1320px; margin: 0 auto; padding: 18px; }
.rg-topbar  { display: flex; justify-content: space-between; align-items: center;
              padding: 4px 18px 14px; font-family: 'IBM Plex Mono', monospace;
              font-size: 12px; color: #5b6488; letter-spacing: .02em; }
.rg-frame   { background: #fff; border-radius: 34px; overflow: visible;
              box-shadow: 0 40px 90px -50px rgba(14,33,86,.5); }
.rg-header  { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
              gap: 24px; padding: 16px 28px; background: rgba(255,255,255,.85);
              backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
              border-bottom: 1px solid #EEF0F8; border-radius: 34px 34px 0 0; }
.rg-search-wrap { flex: 1; max-width: 580px; margin: 0 auto; position: relative; }
.rg-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rg-pills   { display: flex; align-items: center; gap: 8px; padding: 14px 28px 0; overflow-x: auto; }
.rg-footer  { background: #0C1633; color: #aeb6d6; border-radius: 0 0 34px 34px; margin-top: 50px; }

/* Elementi solo-mobile: invisibili su desktop */
.rg-burger, .rg-mob-act, .rg-bottombar { display: none; }

/* ============================================================
   MOBILE ≤ 920px — porting del prototipo mobile del cliente:
   header compatto (menù · logo · cerca · carrello), ricerca a
   scomparsa sotto l'header, drawer laterale, bottom bar 5 tab.
   ============================================================ */
@keyframes rgSlideL { from { transform: translateX(-100%); } to { transform: none; } }

@media (max-width: 920px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); background: #F4F6FC; }

  .rg-shell  { padding: 0; }
  .rg-topbar { display: none; }
  .rg-frame  { border-radius: 0; box-shadow: none; }

  .rg-header { gap: 11px; padding: 12px 14px; border-radius: 0; }
  .rg-burger  { display: flex; }
  .rg-mob-act { display: flex; }
  .rg-actions { display: none; }
  .rg-logo-name { font-size: 19px; }
  .rg-logo-sub  { font-size: 8px; }

  /* Ricerca: nascosta, appare a tutta larghezza sotto l'header */
  .rg-search-wrap { display: none; position: absolute; top: calc(100% + 8px);
                    left: 10px; right: 10px; max-width: none; margin: 0; z-index: 55; }
  .rg-search-wrap.is-open { display: block; animation: rgFade .2s ease; }
  .rg-search-wrap form { box-shadow: 0 24px 55px -22px rgba(14,33,86,.5); background: #fff; }
  /* Il menu categorie ha larghezza fissa inline (380px): qui serve !important */
  .rg-search-wrap [data-catmenu] { width: auto !important; left: 0; right: 0; }

  .rg-pills  { padding: 12px 14px 0; }
  .rg-footer { border-radius: 0; margin-top: 34px; }

  /* ---- Bottom bar (5 tab, come prototipo e app Flutter) ---- */
  .rg-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
                  background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
                  -webkit-backdrop-filter: blur(18px); border-top: 1px solid #EEF0F8;
                  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
  .rg-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
            background: none; border: none; cursor: pointer; padding: 4px 0;
            color: #9aa3c0; text-decoration: none; font-family: inherit; }
  .rg-tab.is-active { color: #FF2E5B; }
  .rg-tab svg { width: 21px; height: 21px; }
  .rg-tab-label { font-size: 10px; font-weight: 600; }
  .rg-tab-badge { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px;
                  padding: 0 4px; display: inline-flex; align-items: center; justify-content: center;
                  border-radius: 8px; background: #FF2E5B; color: #fff;
                  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; }
}

/* ---- Drawer menù (montato su tutte le viewport, usato su mobile) ---- */
.rg-drawer-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(11,18,48,.45);
                     backdrop-filter: blur(3px); animation: rgFade .25s ease; }
.rg-drawer-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 101; width: 320px;
                   max-width: 86vw; background: #fff; display: flex; flex-direction: column;
                   box-shadow: 30px 0 80px -30px rgba(14,33,86,.5);
                   animation: rgSlideL .32s cubic-bezier(.2,.75,.2,1); overflow-y: auto; }

/* ============================================================
   M2 — CONTENUTI MOBILE: hero e griglie della home.
   Le classi definiscono le colonne su desktop (valori identici
   ai vecchi inline) e le riscrivono sotto i 920px.
   ============================================================ */
.rg-hero-grid { grid-template-columns: 1.08fr .92fr; padding: 56px 52px 44px; }
.rg-grid-4    { grid-template-columns: repeat(4, 1fr); }
.rg-grid-3    { grid-template-columns: repeat(3, 1fr); }
.rg-split     { grid-template-columns: 1.1fr .9fr; }

@media (max-width: 920px) {
  /* Header: via il quadrato del logo, resta l'hamburger + testo (prototipo) */
  .rg-logo-mark { display: none; }

  /* Hero a colonna singola, niente scroll orizzontale */
  .rg-hero      { margin: 10px; }
  .rg-hero-grid { grid-template-columns: 1fr; padding: 30px 22px 26px; gap: 12px; }
  .rg-hero-h1   { font-size: 42px; }
  .rg-hero-cta  { flex-direction: column; align-items: stretch; }
  .rg-hero-cta .rg-btn { justify-content: center; }
  .rg-hero-stats { flex-wrap: wrap; gap: 16px 22px; }

  /* Colonna decorativa: compattata sotto il testo, elementi ridimensionati */
  .rg-hero-visual { height: 300px; margin-top: 6px; }
  .rg-hero-visual > div:nth-child(1) { width: 220px; height: 220px; top: 10px; }
  .rg-hero-visual > div:nth-child(2) { width: 180px; height: 180px; top: 30px; }
  .rg-hero-visual > div:nth-child(3) { left: 0; }
  .rg-hero-visual > div:nth-child(4) { right: 0; bottom: 16px; }
  .rg-hero-visual > div:nth-child(5) { left: 12px; bottom: -2px; }

  /* Griglie: card prodotto/profili a 2 colonne, blocchi larghi a 1 */
  .rg-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .rg-grid-3 { grid-template-columns: 1fr; }
  .rg-split  { grid-template-columns: 1fr; }

  /* Sezioni della sola home: padding orizzontale ridotto. Il selettore è
     scopato su .page-home per non toccare le altre pagine; l'!important
     serve perché il padding delle section è inline nel template. */
  .page-home > section { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   M2b — card profili in lista + filtri catalogo off-canvas
   ============================================================ */
/* Bottone Filtri e testata pannello: esistono solo su mobile */
.rg-filters-btn, .rg-filters-head { display: none; }

@media (max-width: 920px) {
  /* Card profili home: una sotto l'altra */
  .rg-stack-m { grid-template-columns: 1fr; }

  /* Toolbar catalogo: Filtri a sinistra · ordinamento a destra */
  .rg-desk-only { display: none; }
  .rg-filters-btn { display: inline-flex; align-items: center; gap: 7px;
                    height: 40px; padding: 0 16px; border: 1px solid #EEF0F8;
                    border-radius: 100px; background: #fff; color: #0E2156;
                    font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit; }
  .rg-filters-count { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex;
                      align-items: center; justify-content: center; border-radius: 9px;
                      background: #FF2E5B; color: #fff;
                      font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }

  /* Sidebar filtri: off-canvas da sinistra */
  .filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 101;
             width: 320px; max-width: 88vw; margin: 0; border-radius: 0;
             overflow-y: auto; transform: translateX(-105%);
             transition: transform .32s cubic-bezier(.2,.75,.2,1);
             box-shadow: 30px 0 80px -30px rgba(14,33,86,.5); }
  .filters.is-open { transform: none; }
  .rg-filters-head { display: flex; align-items: center; justify-content: space-between;
                     font-family: 'Space Grotesk', sans-serif; font-weight: 700;
                     font-size: 18px; color: #0E2156; padding-bottom: 12px;
                     border-bottom: 1px solid #EEF0F8; margin-bottom: 12px; }
  .rg-filters-head button { width: 36px; height: 36px; border-radius: 11px;
                            border: 1px solid #EEF0F8; background: #fff;
                            font-size: 17px; color: #0E2156; cursor: pointer; }
  [data-filters-overlay]:not([hidden]) { position: fixed; inset: 0; z-index: 100;
                            background: rgba(11,18,48,.45); backdrop-filter: blur(3px);
                            animation: rgFade .25s ease; }
}

/* ============================================================
   FOOTER — design cliente: brand+social · 3 colonne link ·
   riga legale. Su mobile le colonne si impilano.
   ============================================================ */
.rg-footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
                  gap: 34px; padding: 44px 40px 34px; }
.rg-footer-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
                   font-size: 16px; color: #fff; margin-bottom: 15px; }
.rg-footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.rg-footer-col a { color: #8fa0d8; text-decoration: none; width: fit-content; }
.rg-footer-col a:hover { color: #fff; }
.rg-footer-social { display: inline-flex; align-items: center; justify-content: center;
                    width: 42px; height: 42px; border-radius: 13px;
                    border: 1px solid rgba(255,255,255,.14); color: #cdd6f4;
                    text-decoration: none; }
.rg-footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 40px 28px;
                   font-family: 'IBM Plex Mono', monospace; font-size: 12px;
                   color: #7a8ac2; display: flex; flex-direction: column; gap: 9px; }
.rg-footer-legal-row { display: flex; flex-wrap: wrap; gap: 8px 26px; }

@media (max-width: 920px) {
  /* Colonne link a due per riga; il blocco brand (logo + descrizione + social)
     resta a tutta larghezza perché il testo è lungo. */
  .rg-footer-main { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; padding: 32px 20px 24px; }
  .rg-footer-brand { grid-column: 1 / -1; }
  .rg-footer-legal { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
}

/* Sotto i 380px anche le colonne link si impilano: due colonne renderebbero
   illeggibili voci come "News e formazione" o "Termini e condizioni". */
@media (max-width: 380px) {
  .rg-footer-main { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINE ISTITUZIONALI — layout a due colonne (TOC/categorie +
   contenuto) per Legale e FAQ, impilato su mobile.
   ============================================================ */
.rg-legal-layout { grid-template-columns: 240px 1fr; }
@media (max-width: 920px) {
  .rg-legal-layout { grid-template-columns: 1fr; }
  .rg-legal-toc { position: static !important; }   /* sticky inline nella vista */
  .rg-faq-cats { flex-direction: row !important; overflow-x: auto; }
  .rg-faq-cats button { flex: none; }
}

/* ============================================================
   FORM PUBBLICI — campi e griglia (Contatti, Assistenza,
   Quotazione, newsletter). Due colonne, impilate su mobile.
   ============================================================ */
.rg-fld { width: 100%; border: 1.5px solid #EEF0F8; border-radius: 12px;
          background: #F8FAFE; padding: 12px 14px; font-size: 14px;
          color: #0C1633; font-family: inherit; margin-top: 6px; }
.rg-fld:focus { border-color: #FF2E5B; background: #fff; }
.rg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rg-form-grid label { display: block; font-size: 13px; font-weight: 600; color: #0C1633; }
.rg-form-full { grid-column: 1 / -1; }
@media (max-width: 920px) {
  .rg-form-grid { grid-template-columns: 1fr; }
  .rg-kinds { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   MEGA-MENU SOTTOCATEGORIE — pannello sotto le pill categorie
   (design cliente: griglia di card cliccabili, chiusura con ×)
   ============================================================ */
.rg-subnav { background: #F8F9FD; border: 1px solid #EEF0F8; border-radius: 18px;
             padding: 18px 20px; margin-top: 14px;
             animation: rgSlideUp .28s cubic-bezier(.2,.75,.2,1); }
.rg-subnav-head { display: flex; align-items: center; justify-content: space-between;
                  margin-bottom: 14px; }
.rg-subnav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
                  max-height: 340px; overflow-y: auto; }
.rg-subnav-item { display: flex; align-items: center; gap: 11px; background: #fff;
                  border: 1px solid #EEF0F8; border-radius: 13px; padding: 12px 14px;
                  font-size: 13.5px; font-weight: 600; color: #0C1633;
                  text-decoration: none; transition: transform .16s, box-shadow .25s; }
.rg-subnav-item:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(14,33,86,.6); }
.rg-subnav-dot { width: 26px; height: 26px; flex: none; border-radius: 8px;
                 background: #FFE3EA; color: #FF2E5B; display: flex;
                 align-items: center; justify-content: center; font-size: 13px; }

@media (max-width: 1100px) { .rg-subnav-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) {
  .rg-subnav-wrap { padding: 0 14px !important; }
  .rg-subnav-grid { grid-template-columns: repeat(2, 1fr); max-height: 300px; }
  .rg-subnav-item { padding: 10px 12px; font-size: 12.5px; }
}

/* Badge conteggio prodotti sulle pill categorie dell'header */
.rg-pill-badge { display: inline-flex; align-items: center; justify-content: center;
                 min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
                 font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
                 font-weight: 600; line-height: 1; }

/* Sottocategorie nel filtro catalogo: indentate sotto la categoria di contesto */
.filter-subopts { margin: 2px 0 6px 10px; padding-left: 10px; border-left: 2px solid #FFD9E3; }
.filter-opt-sub .opt-label { font-size: 13px; color: #5b6488; }
.filter-opt-sub.is-active .opt-label { color: #0E2156; font-weight: 600; }

/* Salvaguardia: l'attributo hidden deve prevalere anche su un display
   impostato altrove (regola UA a bassa specificità, facile da sopraffare). */
[hidden] { display: none !important; }

/* ============================================================
   CATALOGO MOBILE — due card per riga.
   La griglia usa minmax(240px): sotto i 520px entrerebbe una
   sola colonna, quindi qui si forza a 2 e si compatta la card,
   altrimenti i testi risultano illeggibili.
   ============================================================ */
@media (max-width: 700px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

  .product-card { border-radius: 16px; }
  .card-media img { padding: 9px; }
  .card-body { padding: 10px 11px 12px; gap: 6px; }

  /* Titolo su due righe al massimo, poi ellissi */
  .card-title { font-size: 13px; line-height: 1.3; }
  .card-title a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-body .mono-label { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-meta { gap: 4px; }
  .card-meta .pill { font-size: 9.5px; padding: 3px 7px; }
  /* Con poco spazio resta la disponibilità: è l'informazione che incide sull'acquisto */
  .card-meta .pill:not(.avail-ok):not(.avail-order):not(.avail-eol) { display: none; }

  /* Prezzo e CTA impilati: affiancati non ci starebbero */
  .card-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .card-footer .btn-magenta, .card-footer .btn-add, .card-footer a { width: 100%; text-align: center; justify-content: center; }
  .price-block .price { font-size: 15px; }
}

/* ============================================================
   SCHEDA PRODOTTO — TIPO TEST (prototipo cliente)
   ============================================================ */
.mono-label-pink { color: var(--rg-magenta); }
.crumb-current { color: var(--rg-magenta); }
.pt-sec-label { margin: 18px 0 10px; }
.pt-intro { color: var(--rg-text); line-height: 1.7; margin-bottom: 6px; }

/* Chip caratteristiche sotto la galleria */
.pt-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.pt-fact { padding: 14px 16px; }
.pt-fact-v { font: 600 15px 'IBM Plex Sans', sans-serif; color: var(--rg-blue); margin-top: 4px; }

/* Formato confezione: card radio */
.pt-formats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pt-format {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1.5px solid var(--rg-border); border-radius: 14px; background: #fff;
  padding: 14px 18px; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif;
}
.pt-format.is-active { border-color: var(--rg-magenta); background: #FFF5F7; }
.pt-format-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid #C9D0E8; display: grid; place-items: center; color: #fff; font-size: 11px;
}
.pt-format.is-active .pt-format-dot { border-color: var(--rg-magenta); background: var(--rg-magenta); }
.pt-format.is-active .pt-format-dot::after { content: '\2713'; }
.pt-format-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-format-label { font-weight: 600; font-size: 14.5px; color: var(--rg-blue); }
.pt-format-pertest { font-size: 12.5px; color: var(--rg-muted); }
.pt-format-price { font: 700 16px 'Space Grotesk', sans-serif; color: var(--rg-blue); text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pt-format-save { font: 600 11.5px 'IBM Plex Sans', sans-serif; color: #1F8A5B; }

.pt-pertest-now { font-size: 12.5px; color: var(--rg-muted); }

/* Banner sconto volume */
.pt-volume {
  display: flex; gap: 8px; align-items: center; background: #E9F8F0;
  border-radius: 11px; padding: 9px 13px; margin-bottom: 14px;
  font-size: 12.5px; color: #16704A;
}
.pt-volume-icon { color: #1F8A5B; font-weight: 700; }

/* Trust badges */
.pt-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13.5px; color: var(--rg-blue); margin-top: 4px; }

/* Tab */
.pt-tabs-section { padding: 10px 22px 50px; }
.pt-tabbar { display: flex; gap: 26px; border-bottom: 1px solid var(--rg-border); margin-bottom: 26px; }
.pt-tab {
  border: none; background: none; padding: 12px 2px; cursor: pointer;
  font: 600 15px 'IBM Plex Sans', sans-serif; color: #5b6488;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.pt-tab.is-active { color: var(--rg-magenta); border-bottom-color: var(--rg-magenta); }
.pt-pane { display: none; }
.pt-pane.is-active { display: block; }

.pt-h3 { font-size: 20px; margin-bottom: 12px; }
.pt-overview-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }
.pt-bullets { margin: 16px 0 0 2px; padding: 0; list-style: none; }
.pt-bullets li { position: relative; padding-left: 18px; margin-bottom: 9px; font-size: 15px; color: var(--rg-text); }
.pt-bullets li::before { content: '\25CF'; position: absolute; left: 0; color: var(--rg-magenta); font-size: 9px; top: 5px; }

/* Performance clinica */
.pt-perf { padding: 20px 22px; }
.pt-perf-row { margin-top: 16px; }
.pt-perf-head { display: flex; justify-content: space-between; font-size: 14px; color: var(--rg-text); margin-bottom: 7px; }
.pt-perf-head b { color: var(--rg-blue); }
.pt-perf-bar { height: 7px; border-radius: 5px; background: var(--rg-bg-soft); overflow: hidden; }
.pt-perf-bar span { display: block; height: 100%; border-radius: 5px; background: #1F8A5B; }

/* Specifiche */
.pt-specs { padding: 6px 0; overflow: hidden; }
.pt-spec-row { display: grid; grid-template-columns: minmax(160px, 35%) 1fr; gap: 16px; padding: 12px 22px; font-size: 14px; }
.pt-spec-row.is-alt { background: #FAFBFE; }
.pt-spec-k { color: var(--rg-muted); }
.pt-spec-v { font-weight: 600; color: var(--rg-blue); }

/* Procedura */
.pt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pt-step { display: flex; gap: 14px; padding: 18px; }
.pt-step-n {
  width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--rg-blue);
  color: #fff; display: grid; place-items: center; font: 700 14px 'Space Grotesk', sans-serif;
}
.pt-step-t { font-weight: 600; font-size: 14.5px; color: var(--rg-blue); }
.pt-step-d { font-size: 13.5px; color: var(--rg-muted); margin-top: 4px; line-height: 1.5; }

/* Documenti */
.pt-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pt-doc { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; }
.pt-doc:hover { border-color: var(--rg-magenta); }
.pt-doc-icon { font-size: 22px; }
.pt-doc-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-doc-name { font-weight: 600; font-size: 14px; color: var(--rg-blue); }
.pt-doc-dl { color: var(--rg-magenta); font-size: 17px; }

/* Placeholder sezioni vuote */
.pt-empty { padding: 18px 22px; font-size: 14px; color: var(--rg-muted); }
.pt-empty em { font-style: italic; }

@media (max-width: 920px) {
  .pt-overview-grid { grid-template-columns: 1fr; }
  .pt-facts { grid-template-columns: repeat(2, 1fr); }
  .pt-tabbar { gap: 16px; overflow-x: auto; }
}

/* ============================================================
   SCHEDA PRODOTTO — TIPO PANNELLO (prototipo cliente)
   ============================================================ */
.pill-navy { background: var(--rg-blue); color: #fff; }

/* Banner compatibilità strumento */
.pp-compat {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  background: #F3F0FF; border: 1px solid #E2DBFF; border-radius: 15px; padding: 13px 15px;
}
.pp-compat-icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; background: #fff;
  display: grid; place-items: center; font-size: 20px;
}
.pp-compat-txt { flex: 1; font-size: 12.5px; color: #7a6fb0; line-height: 1.45; }
.pp-compat-txt b { display: block; font-size: 13px; color: #5b4bb0; }
.pp-compat-btn {
  flex: none; font-size: 12.5px; font-weight: 600; color: #fff; background: #7C5CFF;
  border-radius: 10px; padding: 8px 13px; text-decoration: none;
}

/* Avviso riserva P.IVA */
.pp-notice {
  background: #FFF7E0; border: 1px solid #F2E2A8; border-radius: 13px;
  padding: 12px 15px; font-size: 12.5px; color: #8A6400; line-height: 1.5; margin: 4px 0 16px;
}
.pp-notice a { color: #B08400; font-weight: 700; text-decoration: none; }

/* Filtri categoria clinica */
.pp-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.pp-cat {
  flex: none; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--rg-border);
  background: #fff; color: #5b6488; font: 600 12.5px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.pp-cat.is-active { background: var(--rg-blue); border-color: var(--rg-blue); color: #fff; }

/* Lista analiti */
.pp-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto; padding-right: 4px; margin-bottom: 16px;
}
.pp-an {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  border: 2px solid var(--rg-border); background: #fff; border-radius: 13px; padding: 11px 14px;
}
.pp-an.is-selected { border-color: var(--rg-magenta); background: #FFF5F7; }
.pp-an-check {
  width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid #C9D0E8;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
}
.pp-an.is-selected .pp-an-check { border-color: var(--rg-magenta); background: var(--rg-magenta); }
.pp-an.is-selected .pp-an-check::after { content: '\2713'; }
.pp-an-main { flex: 1; min-width: 0; }
.pp-an-name { font-weight: 600; font-size: 14px; color: var(--rg-blue); }
.pp-an-price { font: 700 14px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.pp-an-qty {
  display: none; align-items: center; gap: 8px;
  border: 1px solid var(--rg-border); border-radius: 9px; padding: 3px 8px; background: #fff;
}
.pp-an.is-selected .pp-an-qty { display: inline-flex; }
.pp-an-qty button { border: none; background: none; font-size: 15px; color: var(--rg-blue); cursor: pointer; width: 20px; }
.pp-an-qty span { min-width: 18px; text-align: center; font: 600 13.5px 'IBM Plex Sans', sans-serif; color: var(--rg-blue); }

/* Riepilogo selezione */
.pp-summary-head { display: flex; justify-content: space-between; align-items: center; }
.pp-clear { border: none; background: none; color: #9aa3c0; font: 600 12.5px 'IBM Plex Sans', sans-serif; cursor: pointer; }
.pp-clear:hover { color: var(--rg-magenta); }
.pp-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.pp-total-row span { font: 700 15px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.pp-total-row b { font: 700 26px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.pp-total-note { font-size: 11.5px; color: #9aa3c0; text-align: right; margin-bottom: 12px; }
.pp-cta[disabled] { opacity: .6; cursor: not-allowed; }
.pp-cta { text-align: center; text-decoration: none; display: grid; place-items: center; }
.pp-quote {
  flex: none; width: 130px; height: 48px; display: grid; place-items: center;
  border: 1.5px solid var(--rg-blue); border-radius: 13px; background: #fff;
  color: var(--rg-blue); font: 600 13.5px 'IBM Plex Sans', sans-serif; text-decoration: none;
}

/* Fascia informativa */
.pp-infos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-top: 1px solid var(--rg-border); padding: 26px 22px 44px;
}
.pp-info-h { font: 700 15px 'Space Grotesk', sans-serif; color: var(--rg-blue); margin-bottom: 8px; }
.pp-info-b { font-size: 13.5px; color: #5b6488; line-height: 1.6; }

@media (max-width: 920px) {
  .pp-infos { grid-template-columns: 1fr; }
}

/* ============================================================
   SCHEDA PRODOTTO — TIPO STRUMENTO, Tranche A (prototipo cliente)
   ============================================================ */
/* Variante tab a pillole (stesso JS dei tab test) */
.pt-tabbar--pills { border-bottom: none; gap: 8px; background: var(--rg-bg-soft); border-radius: 14px; padding: 6px; flex-wrap: wrap; }
.pt-tabbar--pills .pt-tab { border: none; border-radius: 11px; padding: 11px 18px; margin-bottom: 0; }
.pt-tabbar--pills .pt-tab.is-active { background: var(--rg-blue); color: #fff; }

/* Disponibilità / lead time */
.ps-avail { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin: 14px 0; }
.ps-avail-v { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--rg-blue); margin-top: 4px; }
.ps-dot { width: 8px; height: 8px; border-radius: 50%; }
.ps-avail-sep { width: 1px; height: 30px; background: var(--rg-border); }

.ps-buy-note { font-size: 12.5px; color: var(--rg-muted); margin-top: 10px; }

/* CTA secondarie */
.ps-ctas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.ps-ctas a {
  display: grid; place-items: center; height: 42px; border: 1px solid var(--rg-border);
  border-radius: 11px; background: #fff; color: var(--rg-blue);
  font: 600 12.5px 'IBM Plex Sans', sans-serif; text-decoration: none;
}
.ps-ctas a:hover { border-color: var(--rg-magenta); color: var(--rg-magenta); }

/* Statistiche */
.ps-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ps-stat { padding: 18px; }
.ps-stat-v { font: 700 26px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.ps-stat-l { font-size: 12.5px; color: var(--rg-muted); margin-top: 4px; }

/* Panoramica */
.ps-overview-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: start; }
.ps-wf-label { margin: 24px 0 14px; }
.ps-workflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ps-wf-step { background: var(--rg-bg-soft); border: 1px solid var(--rg-border); border-radius: 14px; padding: 16px; }
.ps-wf-t { font-weight: 600; font-size: 14.5px; color: var(--rg-blue); margin-top: 10px; }
.ps-wf-d { font-size: 12.5px; color: var(--rg-muted); margin-top: 4px; line-height: 1.5; }

/* In breve */
.ps-brief { background: linear-gradient(150deg, #0E2156, #1a2f63); border-radius: 20px; padding: 24px; color: #fff; }
.ps-brief-label { color: #FF6F90; }
.ps-brief-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; margin-top: 14px; }
.ps-brief-row span { color: #9fb0ef; }
.ps-brief-row b { font-weight: 600; text-align: right; }

/* Applicazioni / servizi */
.ps-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ps-app { padding: 20px; }
.ps-app-icon { font-size: 22px; }
.ps-app-name { font: 600 16px 'Space Grotesk', sans-serif; color: var(--rg-blue); margin-top: 10px; }
.ps-app-desc { font-size: 12.5px; color: var(--rg-muted); margin-top: 4px; line-height: 1.55; }

/* Documenti & certificazioni */
.ps-docs-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: start; }
.ps-certs { display: flex; flex-wrap: wrap; gap: 10px; }
.ps-cert {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px;
  color: var(--rg-blue); background: var(--rg-bg-soft); border: 1px solid var(--rg-border);
  border-radius: 11px; padding: 11px 14px;
}
.ps-cert-note { margin-top: 16px; padding: 16px; font-size: 13px; color: #4a5478; line-height: 1.6; background: var(--rg-bg-soft); }

.ps-ticket { display: inline-grid; place-items: center; height: 46px; padding: 0 22px; border-radius: 12px; margin-top: 18px; text-decoration: none; }

@media (max-width: 920px) {
  .ps-overview-grid, .ps-docs-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SCHEDA STRUMENTO — Tranche B: compatibilità + calcolatore ROI
   ============================================================ */
.ps-compat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps-compat-col { padding: 20px 22px; }
.ps-taglist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.ps-reagents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ps-reagent { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; }
.ps-reagent:hover { border-color: var(--rg-magenta); }
.ps-reagent img, .ps-reagent .media-placeholder {
  width: 56px; height: 56px; object-fit: contain; border-radius: 10px;
  background: var(--rg-bg-soft); display: grid; place-items: center; flex: none;
}
.ps-reagent-t { font-weight: 600; font-size: 13.5px; color: var(--rg-blue); line-height: 1.35; }

.ps-roi-sub { color: var(--rg-muted); font-size: 14px; margin-bottom: 18px; }
.ps-roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.ps-roi-inputs { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.ps-roi-head { display: flex; justify-content: space-between; font-size: 13.5px; color: #39426b; margin-bottom: 8px; }
.ps-roi-head b { font-family: 'IBM Plex Mono', monospace; color: var(--rg-blue); }
.ps-roi-field input[type=range] { width: 100%; accent-color: var(--rg-magenta); }
.ps-roi-ours {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--rg-bg-soft); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: #39426b;
}
.ps-roi-ours b { font: 700 18px 'Space Grotesk', sans-serif; color: var(--rg-blue); }
.ps-roi-result {
  background: linear-gradient(150deg, #0E2156, #1a2f63); border-radius: 18px;
  padding: 28px; color: #fff; display: flex; flex-direction: column; justify-content: center;
}
.ps-roi-big { font: 700 42px 'Space Grotesk', sans-serif; margin-top: 6px; }
.ps-roi-big small { font-size: 18px; color: #9fb0ef; font-weight: 500; }
.ps-roi-secondary { display: flex; gap: 34px; margin-top: 18px; }
.ps-roi-secondary b { display: block; font: 700 18px 'Space Grotesk', sans-serif; margin-top: 4px; }
.ps-roi-secondary .mono-label { color: #9fb0ef; }

@media (max-width: 920px) {
  .ps-compat-grid, .ps-roi-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Galleria prodotto: zoom hover
   ============================================================ */
.gallery-main.has-zoom { position: relative; cursor: zoom-in; }
.gallery-main.has-zoom img { transition: transform .15s ease-out; will-change: transform; }
.gallery-zoom-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; pointer-events: none;
  background: rgba(14, 33, 86, .78); color: #fff; border-radius: 9px;
  padding: 6px 11px; font: 500 11.5px 'IBM Plex Sans', sans-serif;
  opacity: 1; transition: opacity .2s ease;
}
.gallery-main.has-zoom:hover .gallery-zoom-hint { opacity: 0; }

/* ============================================================
   Scheda prodotto: badge in foto, descrizione clampata, lightbox
   ============================================================ */
.gallery-main { position: relative; }
.gallery-main .gallery-badges {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; pointer-events: none;
}
.gallery-main .gallery-badges .pill,
.gallery-main .gallery-badges .cert-badge { box-shadow: 0 6px 18px -8px rgba(14,33,86,.35); background-clip: padding-box; }

/* Descrizione limitata con "Mostra tutto" */
.pt-intro.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-intro-more {
  border: none; background: none; padding: 0; margin-top: 6px; cursor: pointer;
  color: var(--rg-magenta); font: 600 13.5px 'IBM Plex Sans', sans-serif;
}
.pt-intro-more:hover { text-decoration: underline; }

/* Lightbox immagine */
.rg-lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(11, 26, 74, .88); backdrop-filter: blur(4px);
  animation: rgFadeIn .18s ease;
}
@keyframes rgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rg-lightbox img {
  max-width: min(92vw, 1100px); max-height: 88vh; object-fit: contain;
  border-radius: 18px; background: #fff; padding: 20px;
}
.rg-lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px;
  border: none; border-radius: 12px; background: rgba(255,255,255,.14);
  color: #fff; font-size: 22px; cursor: pointer;
}
.rg-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 20px; cursor: pointer;
}
.rg-lightbox-nav:hover, .rg-lightbox-close:hover { background: rgba(255,255,255,.28); }
.rg-lightbox-prev { left: 22px; }
.rg-lightbox-next { right: 22px; }

/* ============================================================
   Box prezzo scheda test — layout dal mockup
   ============================================================ */
.pt-price-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pt-price-line { display: flex; align-items: baseline; gap: 10px; }
.pt-buy-full { width: 100%; }

/* Immagine articolo nel carrello */
.cart-item { grid-template-columns: auto 1fr auto auto auto; }
.cart-item-media {
  width: 64px; height: 64px; border: 1px solid var(--rg-border); border-radius: 12px;
  background: #fff; display: grid; place-items: center; overflow: hidden; padding: 6px;
}
.cart-item-media img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-media .media-placeholder { font-size: 20px; color: #c9d1e6; }
@media (max-width: 920px) {
  .cart-item { grid-template-columns: auto 1fr auto; grid-template-areas: "media info remove" "media qty price"; row-gap: 10px; }
  .cart-item-media { grid-area: media; }
  .cart-item-info { grid-area: info; }
  .cart-item-qty { grid-area: qty; }
  .cart-item-price { grid-area: price; }
  .cart-item-remove { grid-area: remove; }
}

/* ============================================================
   Home: hero "Selezione del mese" (mockup)
   ============================================================ */
@media (max-width: 920px) {
  .rg-featured .rg-hero { grid-column: span 2; grid-row: span 1; min-height: 420px; }
}