/* Accessibility Core by Clivo: copia di modules/advancedhomeuxcore/views/css/front.css con 49 colori cambiati */
.ahuxcore-preview{width:100%;padding:24px 16px}.ahuxcore-preview__inner{max-width:1200px;margin:0 auto;padding:22px;border:2px dashed #7047ff;border-radius:14px;background:#faf8ff;color:#17162b}.ahuxcore-preview__inner span{display:block;color:#7047ff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}.ahuxcore-preview__inner strong{display:block;font-size:22px;margin:5px 0}.ahuxcore-preview__inner p{margin:0;color:#66667a}

.ahuxcore-preview__structure{display:flex;flex-direction:column;gap:var(--ahuxcore-home-gap,24px);margin-top:18px}
.ahuxcore-preview__section{padding:18px;border:1px solid rgba(112,71,255,.24);border-radius:10px;background:rgba(112,71,255,.045)}
.ahuxcore-preview__section strong,.ahuxcore-preview__section span{display:block}.ahuxcore-preview__section span{margin-top:4px;color:#666a7c;font-size:13px}

.ahuxcore-live-section{width:100%}.ahuxcore-live-section--boxed{max-width:1100px;margin-inline:auto}.ahuxcore-live-section--contained{max-width:1320px;margin-inline:auto}.ahuxcore-live-section--full{width:100%}.ahuxcore-quicklinks{display:grid;grid-template-columns:repeat(var(--ahuxcore-cols-desktop,4),minmax(0,1fr));gap:16px}.ahuxcore-quicklinks--align-center{justify-items:center}.ahuxcore-quicklinks--align-right{justify-items:end}.ahuxcore-quicklink{display:flex;flex-direction:column;min-width:0;height:var(--ahuxcore-card-height,240px);overflow:hidden;border:1px solid rgba(16,17,39,.1);border-radius:14px;background:#fff;color:#101127;text-decoration:none;box-shadow:0 8px 24px rgba(16,17,39,.06)}.ahuxcore-quicklink__media{display:flex;flex:1;min-height:0;background:#f5f5f8}.ahuxcore-quicklink__media picture,.ahuxcore-quicklink__media img{width:100%;height:100%;display:block}.ahuxcore-quicklink__media img{object-fit:var(--ahuxcore-image-fit,cover)}.ahuxcore-quicklink__icon{margin:auto;font-size:34px}.ahuxcore-quicklink__copy{display:block;padding:14px}.ahuxcore-quicklink__copy strong,.ahuxcore-quicklink__copy small{display:block}.ahuxcore-quicklink__copy small{margin-top:4px;color:#666a7c}.ahuxcore-quicklink--image .ahuxcore-quicklink__media{height:100%}.ahuxcore-quicklink--text{justify-content:center;height:auto;min-height:140px}.ahuxcore-quicklink--text .ahuxcore-quicklink__copy{padding:22px}
@media(max-width:991px){.ahuxcore-quicklinks{grid-template-columns:repeat(var(--ahuxcore-cols-tablet,2),minmax(0,1fr))}}@media(max-width:767px){.ahuxcore-quicklinks--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.ahuxcore-quicklinks--scroll .ahuxcore-quicklink{flex:0 0 82%;scroll-snap-align:start}.ahuxcore-quicklinks--one{grid-template-columns:1fr}.ahuxcore-quicklinks--two{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ahuxcore-preview-audience{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0;padding:14px;border:1px solid rgba(112,71,255,.2);border-radius:10px;background:#faf8ff}.ahuxcore-preview-audience label{display:grid;gap:5px;font-size:12px;font-weight:700}.ahuxcore-preview-audience select{min-width:190px;padding:9px;border:1px solid #d7d2ea;border-radius:8px;background:#fff}.ahuxcore-preview-audience button{padding:10px 14px;border:0;border-radius:8px;background:#7047ff;color:#fff;font-weight:700}.ahuxcore-quicklink__media video{width:100%;height:100%;display:block;object-fit:var(--ahuxcore-image-fit,cover)}

.ahuxcore-values{display:grid;grid-template-columns:repeat(var(--ahuxcore-value-cols-desktop,4),minmax(0,1fr));gap:16px}
.ahuxcore-values--align-left{text-align:left}.ahuxcore-values--align-center{text-align:center}.ahuxcore-values--align-right{text-align:right}
.ahuxcore-value{min-height:var(--ahuxcore-value-height,180px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;border:1px solid rgba(112,71,255,.14);border-radius:14px;background:#fff}
.ahuxcore-value__media{width:var(--ahuxcore-value-media,64px);height:var(--ahuxcore-value-media,64px);display:grid;place-items:center;overflow:hidden;background:#f1edff;font-size:30px}
.ahuxcore-value__media picture,.ahuxcore-value__media img{width:100%;height:100%}.ahuxcore-value__media img{object-fit:var(--ahuxcore-value-fit,contain)}
.ahuxcore-value--shape-circle .ahuxcore-value__media{border-radius:50%}.ahuxcore-value--shape-rounded .ahuxcore-value__media{border-radius:14px}.ahuxcore-value--shape-square .ahuxcore-value__media{border-radius:0}.ahuxcore-value--shape-none .ahuxcore-value__media{background:transparent}
.ahuxcore-value__copy strong,.ahuxcore-value__copy small{display:block}.ahuxcore-value__copy small{margin-top:6px;color:#666a7c}
@media(max-width:991px){.ahuxcore-values{grid-template-columns:repeat(var(--ahuxcore-value-cols-tablet,2),minmax(0,1fr))}}
@media(max-width:767px){.ahuxcore-values--one{grid-template-columns:1fr}.ahuxcore-values--two{grid-template-columns:repeat(2,minmax(0,1fr))}.ahuxcore-values--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.ahuxcore-values--scroll>.ahuxcore-value{flex:0 0 min(82%,300px);scroll-snap-align:start}}

.ahuxcore-value--empty{
  visibility:hidden;
  pointer-events:none;
}
.ahuxcore-value--image{
  padding:0;
  overflow:hidden;
}
.ahuxcore-value--image .ahuxcore-value__media{
  width:100%;
  height:100%;
  border-radius:inherit;
  background:transparent;
}
.ahuxcore-value--image .ahuxcore-value__media picture,
.ahuxcore-value--image .ahuxcore-value__media img{
  width:100%;
  height:100%;
}

.ahuxcore-heroes{display:grid;grid-template-columns:repeat(var(--ahuxcore-hero-cols-desktop,1),minmax(0,1fr));gap:var(--ahuxcore-hero-gap,16px)}
.ahuxcore-hero{min-height:var(--ahuxcore-hero-height,420px);position:relative;overflow:hidden;border-radius:var(--ahuxcore-hero-radius,18px);background:#f4f4f7}
.ahuxcore-hero--empty{visibility:hidden;pointer-events:none}
.ahuxcore-hero__media,.ahuxcore-hero__overlay{position:absolute;inset:0}.ahuxcore-hero__media picture,.ahuxcore-hero__media img,.ahuxcore-hero__media video{width:100%;height:100%;display:block}.ahuxcore-hero__media img,.ahuxcore-hero__media video{object-fit:var(--ahuxcore-hero-item-fit,var(--ahuxcore-hero-fit,cover));object-position:center center}
.ahuxcore-hero__overlay{background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.12))}
.ahuxcore-hero__content{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,5vw,70px);color:#fff}.ahuxcore-hero--content-left .ahuxcore-hero__content{align-items:flex-start;text-align:left}.ahuxcore-hero--content-center .ahuxcore-hero__content{align-items:center;text-align:center}.ahuxcore-hero--content-right .ahuxcore-hero__content{align-items:flex-end;text-align:right}.ahuxcore-hero__content h2{margin:0;font-size:clamp(28px,4vw,58px);line-height:1.05;color:#fff}.ahuxcore-hero__content p{max-width:680px;margin:14px 0 0;font-size:clamp(15px,1.5vw,20px)}.ahuxcore-hero__content a{margin-top:22px;padding:12px 18px;border-radius:9px;background:#25b9d7;color:#fff;text-decoration:none;font-weight:700}
@media(max-width:991px){.ahuxcore-heroes{grid-template-columns:repeat(var(--ahuxcore-hero-cols-tablet,1),minmax(0,1fr))}}
@media(max-width:767px){.ahuxcore-heroes--stack{grid-template-columns:1fr}.ahuxcore-heroes--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.ahuxcore-heroes--scroll>.ahuxcore-hero{flex:0 0 min(92%,440px);scroll-snap-align:start}.ahuxcore-hero{min-height:var(--ahuxcore-hero-height-mobile,320px)}}

/* 1.3.1 preset Hero 0.6.8 */
.ahuxcore-heroes--preset-large_left_two_right{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.ahuxcore-heroes--preset-large_left_two_right .ahuxcore-hero[data-slot="1"]{grid-row:1/3}
.ahuxcore-heroes--preset-two_left_large_right{grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr}
.ahuxcore-heroes--preset-two_left_large_right .ahuxcore-hero[data-slot="3"]{grid-column:2;grid-row:1/3}
.ahuxcore-heroes--preset-large_top_two_bottom{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr}
.ahuxcore-heroes--preset-large_top_two_bottom .ahuxcore-hero[data-slot="1"]{grid-column:1/3}
.ahuxcore-heroes--preset-two_top_large_bottom{grid-template-columns:1fr 1fr;grid-template-rows:1fr 2fr}
.ahuxcore-heroes--preset-two_top_large_bottom .ahuxcore-hero[data-slot="3"]{grid-column:1/3}
.ahuxcore-heroes--preset-two_equal{grid-template-columns:1fr 1fr}
.ahuxcore-heroes--preset-three_equal{grid-template-columns:repeat(3,1fr)}
.ahuxcore-heroes--preset-single_static,.ahuxcore-heroes--preset-single_slider{grid-template-columns:1fr}
.ahuxcore-heroes--preset-large_top_strip_bottom{grid-template-columns:1fr 1fr;grid-template-rows:3fr 1fr}
.ahuxcore-heroes--preset-large_top_strip_bottom .ahuxcore-hero[data-slot="1"]{grid-column:1/3}
.ahuxcore-heroes--preset-single_slider{position:relative}
.ahuxcore-heroes--preset-single_slider .ahuxcore-hero{grid-column:1;grid-row:1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease}
.ahuxcore-heroes--preset-single_slider .ahuxcore-hero.is-active{opacity:1;visibility:visible;pointer-events:auto}
.ahuxcore-hero-nav{position:absolute;z-index:5;top:50%;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.9);font-size:28px;transform:translateY(-50%);cursor:pointer}
.ahuxcore-hero-nav--prev{left:16px}.ahuxcore-hero-nav--next{right:16px}
.ahuxcore-hero-dots{position:absolute;z-index:5;left:50%;bottom:16px;display:flex;gap:8px;transform:translateX(-50%)}
.ahuxcore-hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55)}
.ahuxcore-hero-dots button.is-active{background:#fff;transform:scale(1.25)}
@media(max-width:991px){.ahuxcore-hero{min-height:var(--ahuxcore-hero-height-tablet,420px)}}
@media(max-width:767px){.ahuxcore-heroes:not(.is-slideshow){grid-template-columns:1fr!important;grid-template-rows:auto!important}.ahuxcore-heroes:not(.is-slideshow) .ahuxcore-hero{grid-column:auto!important;grid-row:auto!important}}

.ahuxcore-hero:not(:has(.ahuxcore-hero__content)) .ahuxcore-hero__overlay{
  opacity:0;
}

/* 1.3.3 — proporzioni preset Hero */
.ahuxcore-heroes--preset-large_left_two_right{
  grid-template-columns:var(--ahuxcore-hero-primary,60fr) var(--ahuxcore-hero-secondary,40fr);
}
.ahuxcore-heroes--preset-two_left_large_right{
  grid-template-columns:var(--ahuxcore-hero-secondary,40fr) var(--ahuxcore-hero-primary,60fr);
}
.ahuxcore-heroes--preset-large_top_two_bottom{
  grid-template-rows:var(--ahuxcore-hero-primary,60fr) var(--ahuxcore-hero-secondary,40fr);
}
.ahuxcore-heroes--preset-two_top_large_bottom{
  grid-template-rows:var(--ahuxcore-hero-secondary,40fr) var(--ahuxcore-hero-primary,60fr);
}
.ahuxcore-heroes--preset-large_top_strip_bottom{
  grid-template-rows:var(--ahuxcore-hero-primary,60fr) var(--ahuxcore-hero-secondary,40fr);
}


/* 1.3.5 — breakout reale per tutte le sezioni impostate su “Tutta larghezza” */
.ahuxcore-live-section--full{
  max-width:none;
  box-sizing:border-box;
  overflow:hidden;
}

/* Fallback prima dell’inizializzazione JS. */
@supports (width: 100vw){
  .ahuxcore-live-section--full{
    width:calc(100vw - 40px);
    margin-left:calc(50% - 50vw + 20px);
    margin-right:0;
  }
}

@media(max-width:767px){
  @supports (width: 100vw){
    .ahuxcore-live-section--full{
      width:calc(100vw - 30px);
      margin-left:calc(50% - 50vw + 15px);
    }
  }
}

/* 1.4.0 — home bianca isolata e output pubblico */
body.ahuxcore-home-white,
body.ahuxcore-home-white .tv-main-div,
body.ahuxcore-home-white #wrapper,
body.ahuxcore-home-white .tvcmscontainer-layout,
body.ahuxcore-home-white .tv-left-layout,
body.ahuxcore-home-white #content-wrapper,
body.ahuxcore-home-white #main,
body.ahuxcore-home-white #content,
body.ahuxcore-home-white .page-home,
body.ahuxcore-home-white .ahuxcore-preview,
body.ahuxcore-home-white .ahuxcore-preview__structure{
  background-color:#fff!important;
  background-image:none!important;
}
.ahuxcore-live-home{padding-top:0}
.ahuxcore-live-home>.ahuxcore-preview__structure{margin-top:0}


/* 1.4.1 — gestione reversibile dei primi tre blocchi nativi */
.ahuxcore-native-hidden{
  display:none!important;
}

.ahuxcore-audit-target{position:relative!important;outline:2px dashed rgba(112,71,255,.75)!important;outline-offset:3px}
.ahuxcore-audit-label{position:absolute;top:8px;left:8px;z-index:9997;height:28px;padding:0 9px;border-radius:8px;background:#7047ff;color:#fff;font:700 12px/28px Arial,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.18);pointer-events:none}
.ahuxcore-audit-panel{position:fixed;right:16px;bottom:16px;z-index:99999;width:min(430px,calc(100vw - 32px));max-height:78vh;overflow:hidden;border:1px solid #ded8f6;border-radius:18px;background:#fff;box-shadow:0 22px 60px rgba(25,18,64,.24);color:#252132;font-family:Arial,sans-serif}
.ahuxcore-audit-panel header{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;background:#f6f3ff;border-bottom:1px solid #e7e1fb}
.ahuxcore-audit-panel header b,.ahuxcore-audit-panel header small{display:block}.ahuxcore-audit-panel header small{margin-top:3px;color:#6f687c}.ahuxcore-audit-panel header button{width:34px;height:34px;border:0;border-radius:9px;background:#fff;font-size:24px;cursor:pointer}
.ahuxcore-audit-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ebe7f7}.ahuxcore-audit-summary span{padding:9px 5px;background:#fff;text-align:center;font-size:10px}.ahuxcore-audit-summary b{display:block;font-size:16px}
.ahuxcore-audit-list{max-height:calc(78vh - 122px);overflow:auto;padding:10px}
.ahuxcore-audit-row{display:grid;grid-template-columns:32px 1fr;gap:10px;width:100%;margin:0 0 8px;padding:11px;border:1px solid #ece9f3;border-radius:11px;background:#fff;text-align:left;cursor:pointer}.ahuxcore-audit-row.has-issues{border-color:#efc56a;background:#fffaf0}
.ahuxcore-audit-row i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#eee9ff;color:#7047ff;font-style:normal;font-weight:800}.ahuxcore-audit-row b,.ahuxcore-audit-row small,.ahuxcore-audit-row em{display:block}.ahuxcore-audit-row small{margin-top:3px;color:#736d7e;font-size:10px}.ahuxcore-audit-row em{margin-top:5px;color:#9a6210;font-size:10px;font-style:normal;font-weight:700}
@media(max-width:767px){.ahuxcore-audit-panel{right:8px;bottom:8px;width:calc(100vw - 16px);max-height:65vh}}


/* 1.6.0 — Blocco editoriale SEO full-width approvato */
.ahuxcore-seo-section{
  box-sizing:border-box;
}
.ahuxcore-seo{
  width:100%;
  padding:48px 56px;
  box-sizing:border-box;
  border:1px solid #ececf0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 35px rgba(20,25,45,.045);
}
.ahuxcore-seo__heading{
  max-width:1180px;
  margin:0 auto 38px;
  text-align:center;
}
.ahuxcore-seo__eyebrow{
  display:block;
  margin:0 0 10px;
  color:#ca450c;
  font-size:13px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
/* 1.13.2: la regola segue la classe, non il tag, perché il titolo può uscire come H1 o H2 e deve restare identico.
   Peso e maiuscole fissati qui: gli stili del tema per l'H1 non devono cambiarne l'aspetto. «balance» divide il
   titolo in righe di lunghezza simile, senza l'ultima parola da sola a capo. */
.ahuxcore-seo__heading .ahuxcore-seo__title{
  max-width:920px;
  margin:0 auto 18px;
  color:#171717;
  font-size:clamp(28px,3vw,42px);
  font-weight:500;
  line-height:1.15;
  text-transform:none;
  text-wrap:balance;
}
.ahuxcore-seo__intro{
  max-width:1080px;
  margin:0 auto;
  color:#61616b;
  font-size:17px;
  line-height:1.75;
}
.ahuxcore-seo__columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
  width:100%;
  padding:36px 0;
  border-top:1px solid #ededf1;
  border-bottom:1px solid #ededf1;
}
.ahuxcore-seo__columns h3{
  margin:0 0 15px;
  color:#202027;
  font-size:21px;
  line-height:1.35;
}
.ahuxcore-seo__body p,
.ahuxcore-seo__footer p{
  margin:0 0 14px;
  color:#64646d;
  font-size:15px;
  line-height:1.75;
}
.ahuxcore-seo__body p:last-child{margin-bottom:0}
.ahuxcore-seo__body a{
  color:#ca450c;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:3px;
}
.ahuxcore-seo__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-top:30px;
}
.ahuxcore-seo__footer p{
  max-width:900px;
  margin:0;
}
.ahuxcore-seo__actions{
  display:flex;
  flex:0 0 auto;
  gap:10px;
}
.ahuxcore-seo__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:9px;
  font-weight:700;
  text-decoration:none;
}
.ahuxcore-seo__primary{
  background:#ca450c;
  color:#fff;
}
.ahuxcore-seo__secondary{
  border:1px solid #dadade;
  background:#fff;
  color:#25252b;
}
@media(max-width:767px){
  .ahuxcore-seo{
    padding:30px 22px;
    border-radius:16px;
  }
  .ahuxcore-seo__heading{
    margin-bottom:28px;
    text-align:left;
  }
  .ahuxcore-seo__heading .ahuxcore-seo__title{
    max-width:none;
    margin-left:0;
    margin-right:0;
    font-size:29px;
  }
  .ahuxcore-seo__intro{
    max-width:none;
    margin-left:0;
    margin-right:0;
    font-size:16px;
  }
  .ahuxcore-seo__columns{
    grid-template-columns:1fr;
    gap:26px;
    padding:28px 0;
  }
  .ahuxcore-seo__footer{
    align-items:stretch;
    flex-direction:column;
  }
  .ahuxcore-seo__actions{
    flex-direction:column;
  }
  .ahuxcore-seo__actions a{
    width:100%;
  }
}


/* 1.6.1 — Layout manager del blocco SEO */
.ahuxcore-seo--one_column .ahuxcore-seo__columns{
  grid-template-columns:minmax(0,1fr);
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
.ahuxcore-seo--three_columns .ahuxcore-seo__columns{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px;
}
.ahuxcore-seo__intro p{
  margin:0 0 12px;
}
.ahuxcore-seo__intro p:last-child,
.ahuxcore-seo__footer-copy p:last-child{
  margin-bottom:0;
}
.ahuxcore-seo__footer-copy{
  max-width:900px;
}
.ahuxcore-seo__footer-copy p{
  margin:0 0 14px;
  color:#64646d;
  font-size:15px;
  line-height:1.75;
}
@media(max-width:991px){
  .ahuxcore-seo--three_columns .ahuxcore-seo__columns{
    grid-template-columns:1fr;
    gap:26px;
  }
}


/* 1.7.2 — Hero: link banner e adattamento media */
.ahuxcore-hero__full-link{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  border-radius:inherit;
  cursor:pointer;
  text-decoration:none;
}
.ahuxcore-hero__full-link:focus-visible{
  outline:3px solid #7047ff;
  outline-offset:-4px;
}
.ahuxcore-hero__content{
  z-index:5;
}
.ahuxcore-hero__media picture{
  display:block;
  width:100%;
  height:100%;
}
.ahuxcore-heroes[style*="--ahuxcore-hero-fit:contain"] .ahuxcore-hero__media{
  background:#fff;
}


/* 1.7.4 — Hero contenitore esteso e rapporto naturale mobile */
.ahuxcore-hero-section.ahuxcore-live-section--contained{
  width:min(
    var(--ahuxcore-hero-contained-max,1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop,20px) * 2))
  );
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.ahuxcore-hero-section>.ahuxcore-heroes{
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:767px){
  .ahuxcore-hero-section.ahuxcore-live-section--contained{
    width:calc(100vw - (var(--ahuxcore-hero-gutter-mobile,15px) * 2));
  }

  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    height:auto;
  }

  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural>
  .ahuxcore-hero{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
  }

  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    height:auto;
  }

  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media picture{
    display:block;
    width:100%;
    height:auto;
  }

  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media img,
  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media video{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    min-height:0;
    object-fit:contain;
    object-position:center center;
  }

  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__overlay,
  .ahuxcore-heroes--stack.ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__full-link{
    border-radius:inherit;
  }
}


/* =========================================================
   1.7.5 — Centratura mobile Hero in modalità Contenitore
   Correzione scoped: 15 px reali a sinistra e destra.
   ========================================================= */
@media(max-width:767px){
  .ahuxcore-hero-section.ahuxcore-live-section--contained{
    width:calc(
      100vw - (var(--ahuxcore-hero-gutter-mobile,15px) * 2)
    );
    max-width:none;
    margin-left:calc(
      50% - 50vw + var(--ahuxcore-hero-gutter-mobile,15px)
    );
    margin-right:0;
    transform:none;
    box-sizing:border-box;
  }

  .ahuxcore-hero-section>.ahuxcore-heroes{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  .ahuxcore-heroes--mobile-ratio-natural>
  article.ahuxcore-hero{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  .ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media,
  .ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media picture,
  .ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media img,
  .ahuxcore-heroes--mobile-ratio-natural
  .ahuxcore-hero__media video{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}


/* =========================================================
   1.8.1 — Service Bar engine
   Velocità reale in px/s, riempimento automatico, forma configurabile.
   ========================================================= */
.ahuxcore-servicebar-section{
  overflow:visible;
  box-sizing:border-box;
}
.ahuxcore-servicebar-section.ahuxcore-live-section--full,
.ahuxcore-servicebar-section.ahuxcore-live-section--contained{
  width:min(
    var(--ahuxcore-servicebar-max,1200px),
    calc(100vw - (var(--ahuxcore-servicebar-gutter-desktop,20px) * 2))
  );
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}
.ahuxcore-servicebar{
  min-height:var(--ahuxcore-servicebar-height,38px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:0 var(--ahuxcore-servicebar-padding-x,18px);
  border-radius:var(--ahuxcore-servicebar-radius,9px);
  background:var(--ahuxcore-servicebar-bg,#173b7a);
  color:var(--ahuxcore-servicebar-text,#fff);
  font-size:13px;
  font-weight:600;
  line-height:1.25;
}
.ahuxcore-servicebar__viewport{
  width:100%;
  overflow:hidden;
}
.ahuxcore-servicebar__track{
  min-height:var(--ahuxcore-servicebar-height,38px);
  display:flex;
  align-items:center;
  width:max-content;
  white-space:nowrap;
  will-change:transform;
}
.ahuxcore-servicebar__group,
.ahuxcore-servicebar__clone{
  display:inline-flex;
  align-items:center;
  gap:var(--ahuxcore-servicebar-gap,50px);
  flex:0 0 auto;
}
.ahuxcore-servicebar__clone{
  margin-left:var(--ahuxcore-servicebar-gap,50px);
}
.ahuxcore-servicebar--static .ahuxcore-servicebar__track{
  width:100%;
  transform:none !important;
}
.ahuxcore-servicebar--static .ahuxcore-servicebar__group{
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
  white-space:normal;
  padding:7px 0;
}
.ahuxcore-servicebar__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.ahuxcore-servicebar__icon{
  font-size:14px;
}
.ahuxcore-servicebar__link{
  color:var(--ahuxcore-servicebar-link,#fff);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}
.ahuxcore-servicebar__link:hover,
.ahuxcore-servicebar__link:focus{
  color:var(--ahuxcore-servicebar-link,#fff);
  text-decoration-thickness:2px;
}
.ahuxcore-servicebar__separator{
  opacity:.55;
  margin-left:calc(var(--ahuxcore-servicebar-gap,50px) / 2);
}
.ahuxcore-servicebar__item:last-child .ahuxcore-servicebar__separator{
  display:none;
}
.ahuxcore-servicebar--pause:hover .ahuxcore-servicebar__track,
.ahuxcore-servicebar--pause:focus-within .ahuxcore-servicebar__track{
  animation-play-state:paused;
}
@keyframes ahuxcore-servicebar-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--ahuxcore-servicebar-distance,-1000px),0,0)}
}
.ahuxcore-servicebar--ticker.is-ready .ahuxcore-servicebar__track{
  animation-name:ahuxcore-servicebar-scroll;
  animation-duration:var(--ahuxcore-servicebar-duration,15s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@media(max-width:767px){
  .ahuxcore-servicebar-section.ahuxcore-live-section--full,
  .ahuxcore-servicebar-section.ahuxcore-live-section--contained{
    width:calc(
      100vw - (var(--ahuxcore-servicebar-gutter-mobile,15px) * 2)
    );
    margin-left:calc(
      50% - 50vw + var(--ahuxcore-servicebar-gutter-mobile,15px)
    );
    margin-right:0;
  }
  .ahuxcore-servicebar{
    font-size:12px;
  }
  .ahuxcore-servicebar__item--desktop{
    display:none;
  }
}
@media(min-width:768px){
  .ahuxcore-servicebar__item--mobile{
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .ahuxcore-servicebar--ticker .ahuxcore-servicebar__track{
    animation:none !important;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    white-space:normal;
    transform:none !important;
  }
  .ahuxcore-servicebar__clone{
    display:none !important;
  }
}


/* =========================================================
   1.9.3 — Multi-carousel preview renderer
   Preview-only. Uses current theme product miniature template.
   ========================================================= */
.ahuxcore-managed-carousels{display:grid;gap:28px;width:100%}
.ahuxcore-managed-product-carousel{width:100%;min-width:0;padding:0;background:#fff}
.ahuxcore-managed-product-carousel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px;padding:0 2px 10px;border-bottom:1px solid #eceef3}
.ahuxcore-managed-product-carousel__head h2{margin:3px 0 0;color:#252525;font-size:22px;line-height:1.2;font-weight:700}
.ahuxcore-managed-product-carousel__eyebrow{display:block;color:#6c55d9;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ahuxcore-managed-product-carousel__controls{display:flex;gap:8px;flex:0 0 auto}
.ahuxcore-managed-product-carousel__controls button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #e0e3e9;border-radius:8px;background:#fff;color:#4f5561;font-size:17px;cursor:pointer}
.ahuxcore-managed-product-carousel__controls button:hover{border-color:#162095;color:#162095}
.ahuxcore-managed-product-carousel__viewport{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.ahuxcore-managed-product-carousel__viewport::-webkit-scrollbar{display:none}
.ahuxcore-managed-product-carousel__track{display:flex;align-items:stretch;gap:16px;width:max-content;padding:2px 2px 8px}
.ahuxcore-managed-product-carousel__item{display:flex;flex:0 0 clamp(230px,20vw,300px);scroll-snap-align:start}
.ahuxcore-managed-product-carousel__item article.product-miniature{display:flex;width:100%;height:100%}
.ahuxcore-managed-product-carousel__item .thumbnail-container{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;border:1px solid #e5e7ec;border-radius:12px;background:#fff;box-shadow:none}
.ahuxcore-managed-product-carousel__item .tvproduct-info-box-wrapper{display:flex;flex:1;flex-direction:column}
.ahuxcore-managed-product-carousel__item .product-description{display:flex;flex:1;flex-direction:column}
.ahuxcore-managed-product-carousel__item .tvproduct-btn-wrap{margin-top:auto}
@media(max-width:767px){
  .ahuxcore-managed-product-carousel__head{align-items:center}
  .ahuxcore-managed-product-carousel__head h2{font-size:18px}
  .ahuxcore-managed-product-carousel__item{flex-basis:min(82vw,280px)}
}



/* 1.9.8 — Managed carousel: keep only ThemeVolty home grid variant.
   ThemeVolty outputs grid, grid-2, list and catelog wrappers inside the same
   product article. In AHUX managed carousels only the native home `grid`
   variant must be visible. Markup/functions remain untouched. */
.ahuxcore-managed-product-carousel
article.product-miniature
.tvproduct-wrapper:not(.grid) {
  display: none !important;
}


/* =========================================================
   1.9.9 — Unified carousel skin
   Managed AHUX carousels visually inherit the same card system
   already approved for the native ThemeVolty offers carousel.
   ========================================================= */

/* Header: same hierarchy as native product carousel */
.ahuxcore-managed-product-carousel__eyebrow{
  display:none;
}
.ahuxcore-managed-product-carousel__head{
  align-items:center;
  margin:0 0 30px;
  padding:0 0 14px;
  border-bottom:1px solid #eceef3;
}
.ahuxcore-managed-product-carousel__head h2{
  margin:0;
  color:#252525;
  font-size:22px;
  line-height:1.2;
  font-weight:700;
}
.ahuxcore-managed-product-carousel__controls{
  gap:4px;
}
.ahuxcore-managed-product-carousel__controls button{
  width:32px;
  height:32px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#a2a6ad;
  font-size:20px;
}
.ahuxcore-managed-product-carousel__controls button:hover{
  border:0;
  color:#162095;
}

/* Geometry: same compact desktop card proportion */
.ahuxcore-managed-product-carousel__track{
  gap:16px;
  padding:0 2px 8px;
}
.ahuxcore-managed-product-carousel__item{
  flex:0 0 260px;
}

/* Card shell */
.ahuxcore-managed-product-carousel article.product-miniature{
  display:flex;
  width:100%;
  height:100%;
}
.ahuxcore-managed-product-carousel .thumbnail-container{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  padding:14px;
  box-sizing:border-box;
  border:1px solid #e5e7ec;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}

/* Image */
.ahuxcore-managed-product-carousel .tvproduct-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  margin-bottom:8px;
}
.ahuxcore-managed-product-carousel .tvproduct-image .thumbnail{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:180px;
}
.ahuxcore-managed-product-carousel .tvproduct-image img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:165px;
  object-fit:contain;
}

/* Global skin visibility toggles */
.ahuxcore-managed-product-carousel.ahuxcore-pc-hide-timer .tvproduct-timer{
  display:none;
}
.ahuxcore-managed-product-carousel.ahuxcore-pc-hide-reviews .tvall-product-star-icon{
  display:none;
}
.ahuxcore-managed-product-carousel.ahuxcore-pc-hide-wishlist .tvproduct-wishlist{
  display:none;
}
.ahuxcore-managed-product-carousel.ahuxcore-pc-hide-badge .tvproduct-sale-pack-wrapper{
  display:none;
}
.ahuxcore-managed-product-carousel.ahuxcore-pc-hide-addtocart .tvproduct-cart-btn{
  display:none;
}
.ahuxcore-managed-product-carousel.ahuxcore-pc-hide-view .tvproduct-view-btn{
  display:none;
}

/* Review/wishlist */
.ahuxcore-managed-product-carousel .product-review-wrap{
  min-height:0;
  margin:0;
  padding:0;
}
.ahuxcore-managed-product-carousel .tvproduct-wishlist{
  position:absolute;
  top:10px;
  left:10px;
  z-index:20;
  display:block;
  width:34px;
  height:34px;
  margin:0;
}
.ahuxcore-managed-product-carousel .tvproduct-wishlist-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:7px;
  background:#162095;
}
.ahuxcore-managed-product-carousel .tvproduct-wishlist-wrapper-icon svg path{
  fill:#fff;
}

/* Discount badge */
.ahuxcore-managed-product-carousel .tvproduct-sale-pack-wrapper,
.ahuxcore-managed-product-carousel article.product-miniature:hover .tvproduct-sale-pack-wrapper{
  top:12px;
  right:0;
  display:block;
  opacity:1;
  visibility:visible;
  transform:none;
  z-index:20;
}

/* Content */
.ahuxcore-managed-product-carousel .tvproduct-info-box-wrapper{
  display:flex;
  flex:1;
  flex-direction:column;
}
.ahuxcore-managed-product-carousel .product-description{
  display:flex;
  flex:1;
  flex-direction:column;
}
.ahuxcore-managed-product-carousel .tvproduct-name{
  min-height:48px;
  margin:6px 0 7px;
}
.ahuxcore-managed-product-carousel .tvproduct-name h6{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  text-align:center;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

/* Price */
.ahuxcore-managed-product-carousel .tv-product-price{
  margin:0 0 10px;
  text-align:center;
}
.ahuxcore-managed-product-carousel .product-price-and-shipping{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.ahuxcore-managed-product-carousel .tv-product-price .price{
  color:#1428b8;
  font-size:21px;
  line-height:1.1;
  font-weight:800;
}
.ahuxcore-managed-product-carousel .tv-product-price .regular-price{
  margin:0;
  color:#92969f;
  font-size:11px;
  font-weight:500;
}

/* CTA */
.ahuxcore-managed-product-carousel .tvproduct-btn-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:2px;
}
.ahuxcore-managed-product-carousel .tvproduct-cart-btn{
  width:100%;
  text-align:center;
}
.ahuxcore-managed-product-carousel .tvproduct-add-to-cart{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:220px;
  min-height:40px;
  margin:0;
  padding:8px 15px;
  border-radius:7px;
  background:#162095;
  font-size:12px;
  font-weight:700;
}
.ahuxcore-managed-product-carousel .tvproduct-view-btn{
  display:flex;
  justify-content:center;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
}
.ahuxcore-managed-product-carousel .tvproduct-view-btn .btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:auto;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#162095;
  font-size:10.5px;
  font-weight:700;
}

@media(max-width:767px){
  .ahuxcore-managed-product-carousel__head{
    margin-bottom:18px;
  }
  .ahuxcore-managed-product-carousel__head h2{
    font-size:18px;
  }
  .ahuxcore-managed-product-carousel__item{
    flex-basis:min(82vw,280px);
  }
  .ahuxcore-managed-product-carousel .thumbnail-container{
    padding:12px;
  }
  .ahuxcore-managed-product-carousel .tvproduct-image{
    min-height:165px;
  }
  .ahuxcore-managed-product-carousel .tvproduct-image img{
    max-height:145px;
  }
  .ahuxcore-managed-product-carousel .tvproduct-add-to-cart{
    max-width:100%;
  }
}

/* 1.12.0 Accessi rapidi, card «icona + testo»: riquadro basso con icona a sinistra e testo accanto,
   come i riquadri di servizio del mockup. L'altezza segue il contenuto, così cinque card in fila
   restano leggere e non lasciano spazi vuoti sopra la piega. */
.ahuxcore-quicklink--icon_text {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: auto;
  min-height: 88px;
  padding: 14px 16px;
}
.ahuxcore-quicklink--icon_text .ahuxcore-quicklink__media {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(16, 17, 39, .05);
}
.ahuxcore-quicklink--icon_text .ahuxcore-quicklink__icon {
  font-size: 24px;
  line-height: 1;
}
.ahuxcore-quicklink--icon_text .ahuxcore-quicklink__copy {
  padding: 0;
  min-width: 0;
}
.ahuxcore-quicklink--icon_text .ahuxcore-quicklink__copy strong {
  font-size: 15px;
  line-height: 1.25;
}
.ahuxcore-quicklink--icon_text .ahuxcore-quicklink__copy small {
  font-size: 13px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .ahuxcore-quicklink--icon_text {
    min-height: 74px;
    padding: 12px 14px;
  }
}

/* 1.12.0 Icone disegnate del modulo: prendono il colore dal testo del riquadro, quindi cambiare tinta alla sezione
   non richiede di rifare le immagini. La riga sotto è l'unico punto in cui si decide la loro tinta. */
.ahuxcore-quicklink--icon_text .ahuxcore-quicklink__media {
  color: var(--ahuxcore-icon-color, #e8620c);
  align-items: center;
  justify-content: center;
}
.ahuxcore-icon {
  display: block;
  width: 28px;
  height: 28px;
}

/* =========================================================================
   1.12.0 «Immagine a sinistra e testo a destra» — la fascia sotto la hero.
   Ricostruita sul progetto grafico di ABC (mockup del 18/9/2026): card bianca
   con un'onda grigia chiarissima in basso, disegno grande in alto a sinistra,
   titolo su due righe, descrizione più leggera e freccia bianca bordata
   d'arancio in basso a destra. L'immagine è «contain», mai ritagliata: sono
   disegni con l'aria attorno al soggetto.
   ========================================================================= */
.ahuxcore-quicklink--image_side {
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  /* 18/9/2026 — le misure interne non sono più fisse ma una percentuale della larghezza della card
     (`cqi`), così stringendo o allargando la finestra disegno, testo e spazi rimpiccioliscono insieme
     invece di restare grandi dentro un riquadro che si stringe. I `clamp()` tengono il testo leggibile
     ai due estremi. Perché `cqi` funzioni la card deve dichiararsi contenitore. */
  container-type: inline-size;
  gap: clamp(10px, 6.1cqi, 16px);
  /* Il padding non può essere in `cqi`: un elemento non è contenitore di sé stesso, quindi qui `cqi`
     guarderebbe fuori dalla card. Segue perciò la larghezza della finestra, che è ciò che l'utente
     muove; i valori sono tarati perché a schermo pieno resti il padding di prima (22 px). */
  padding: clamp(13px, 1.3vw, 22px);
  background: #fff;
  border: 1px solid rgba(16, 17, 39, .05);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(16, 17, 39, .05);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* L'onda grigia del progetto grafico: un cerchio molto chiaro che esce dal bordo in basso. */
.ahuxcore-quicklink--image_side::before {
  content: "";
  position: absolute;
  left: -26%;
  bottom: -64%;
  width: 150%;
  height: 92%;
  border-radius: 50%;
  background: var(--ahuxcore-quicklink-wave, #f3f4f6);
  z-index: 0;
}

.ahuxcore-quicklink--image_side:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(16, 17, 39, .1);
}

.ahuxcore-quicklink--image_side .ahuxcore-quicklink__media,
.ahuxcore-quicklink--image_side .ahuxcore-quicklink__copy {
  position: relative;
  z-index: 1;
}

.ahuxcore-quicklink--image_side .ahuxcore-quicklink__media {
  flex: 0 0 auto;
  width: var(--ahuxcore-side-media, clamp(58px, 39.5cqi, 104px));
  height: var(--ahuxcore-side-media, clamp(58px, 39.5cqi, 104px));
  background: transparent;
  overflow: visible;
}
.ahuxcore-quicklink--image_side .ahuxcore-quicklink__media img,
.ahuxcore-quicklink--image_side .ahuxcore-quicklink__media picture {
  object-fit: contain;
}

.ahuxcore-quicklink--image_side .ahuxcore-quicklink__copy {
  padding: 4px 0 0;
  min-width: 0;
}
/* Titolo e descrizione devono distinguersi a colpo d'occhio: il titolo è l'azione, la riga sotto la spiega. */
.ahuxcore-quicklink--image_side .ahuxcore-quicklink__copy strong {
  font-size: clamp(13px, 6.85cqi, 18px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #17181c;
}
.ahuxcore-quicklink--image_side .ahuxcore-quicklink__copy small {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: clamp(5px, 3.8cqi, 10px);
  font-size: clamp(10.5px, 4.94cqi, 13px);
  font-weight: 400;
  line-height: 1.42;
  color: #6f7480;
}

/* Sotto una certa larghezza della card tre righe di descrizione non ci stanno più: invece di farle
   traboccare o di schiacciare la card, se ne mostrano due. Il limite guarda la card, non la finestra. */
@container (max-width: 250px) {
  .ahuxcore-quicklink--image_side .ahuxcore-quicklink__copy small {
    -webkit-line-clamp: 2;
  }
}

/* Freccia come nel progetto: cerchio bianco, bordo e simbolo arancioni. */
.ahuxcore-quicklink__go {
  position: absolute;
  z-index: 1;
  right: clamp(12px, 7.6cqi, 20px);
  bottom: clamp(11px, 6.8cqi, 18px);
  width: clamp(24px, 12.9cqi, 34px);
  height: clamp(24px, 12.9cqi, 34px);
  border-radius: 50%;
  border: 1.5px solid var(--ahuxcore-accent, #ca450c);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe5720' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(12px, 6.5cqi, 17px);
  transition: background-color .18s ease, transform .18s ease;
}
.ahuxcore-quicklink--image_side:hover .ahuxcore-quicklink__go {
  transform: translateX(3px);
}

/* La fascia segue la larghezza dei banner della hero: stessa formula e stesse variabili, così se cambia il margine
   laterale della hero le due fasce restano allineate da sole. */
.ahuxcore-quicklink-section.ahuxcore-live-section--contained {
  width: min(
    var(--ahuxcore-hero-contained-max, 1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop, 20px) * 2))
  );
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 18/9/2026 — la card tiene la sua proporzione invece di un'altezza fissa: finché la fascia si stringe,
   larghezza e altezza scendono insieme e il riquadro resta della stessa forma. Vale dove i riquadri stanno
   in fila su una griglia (da 992 px in su): sotto, la fascia scorre di lato e la larghezza la decide lo
   scorrimento, quindi l'altezza fissa resta la scelta giusta. Il tetto di 1600 px della fascia fa sì che la
   card non superi mai i 307 px di larghezza, cioè l'altezza di prima: la fascia non diventa più alta, smette
   solo di deformarsi. Il minimo evita che su schermi stretti si riduca a una striscia. */
@media (min-width: 992px) {
  .ahuxcore-quicklink--image_side {
    height: auto;
    aspect-ratio: var(--ahuxcore-side-ratio, 1.48);
  }
}

/* Fra 992 e 1199 px cinque riquadri in fila diventerebbero strisce da 180 px: la fascia scorre di lato
   come sui tablet, così i riquadri restano della loro forma e leggibili invece di essere compressi. */
@media (min-width: 992px) and (max-width: 1199px) {
  .ahuxcore-quicklinks--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .ahuxcore-quicklinks--scroll > .ahuxcore-quicklink {
    flex: 0 0 min(32%, 300px);
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .ahuxcore-quicklink-section.ahuxcore-live-section--contained {
    width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
  }
  .ahuxcore-quicklink--image_side {
    --ahuxcore-side-media: 78px;
  }
}


/* 1.12.1 — Hero contenuta nella prima schermata, decisa qui e non dal JavaScript.
   Fino alla 1.12.0 il limite lo calcolava il JavaScript dopo il caricamento e lo applicava aggiungendo una classe:
   il primo disegno usava l'altezza naturale e il secondo quella ridotta, e la Hero si vedeva nascere alta e
   abbassarsi. Ora l'altezza è `min(naturale, spazio disponibile)` e vale dal primo disegno.
   - `--ahuxcore-hero-natural` la scrive il template: righe del preset per altezza impostata, più i vuoti fra le righe.
   - `--ahuxcore-hero-offset` è quanto togliere all'altezza della finestra: lo spazio occupato sopra dalla testata
     più lo spiraglio che si lascia vedere della fascia sotto, perché si capisca che la pagina continua. Il valore
     di partenza è giusto per la testata di ABC; il JavaScript lo corregge solo se la testata misura diverso, e
     scrivendo la variabile invece di aggiungere una classe.
   Le hero interne perdono l'altezza minima perché le righe della griglia si dividano lo spazio davvero disponibile. */
/* 1.12.1 — Lo spazio sopra la Hero. Il contenitore del tema stacca la prima sezione dal menu di 50 px: sulla home
   sono 50 px di niente proprio dove serve l'altezza, perché sono spazio tolto alla prima schermata. Sulla sola home
   e solo da desktop si riducono a 16, che bastano a staccare la Hero dal menu. È una regola del modulo: spegnendolo,
   il tema torna esattamente come prima, e nessun file del tema viene toccato. */
/* 1.12.2 — quella regola non sta più qui. Dipendeva dalla classe `ahuxcore-home-active`, che il JavaScript
   aggiungeva al corpo della pagina a caricamento avvenuto: fino a quel momento la home restava alta come quella
   del tema e si vedeva l'assestamento. Ora la stampa il PHP nel <head> (`renderCriticalHomeStyle()` in
   advancedhomeuxcore.php), con lo stesso selettore del tema più il tag, e vale già al primo disegno. */

@media (min-width: 992px) {
  .ahuxcore-heroes {
    /* Quanto togliere all'altezza della finestra: testata del tema e spazio sopra (circa 196 px su ABC), il vuoto
       fra la Hero e la fascia sotto (24 px) e i 30 px di fascia che si lasciano vedere. */
    --ahuxcore-hero-offset: 250px;
    height: min(
      var(--ahuxcore-hero-natural, 9999px),
      calc(100svh - var(--ahuxcore-hero-offset))
    );
  }
  .ahuxcore-heroes > .ahuxcore-hero {
    min-height: 0;
  }

  /* 1.14.5 — «Forma fissa»: l'altezza segue la larghezza, così il riquadro principale ha la stessa forma su ogni
     schermo e la grafica, disegnata in quella forma, si vede intera senza bordo né taglio. La retta
     altezza = larghezza × k + c la calcola il PHP (shapeFactors); 100cqw è la larghezza della sezione, che per
     questo diventa contenitore. È già vera al primo disegno: nessuna misura arriva dal JavaScript. Un browser che
     non conosce cqw salta il blocco @supports e resta sull'altezza di sempre, qui sopra (senza @supports, con var()
     dentro, la dichiarazione non verrebbe scartata ma azzerata ad «auto»). */
  @supports (width: 1cqw) {
    .ahuxcore-hero-section--shape {
      container-type: inline-size;
    }
    .ahuxcore-heroes.ahuxcore-heroes--shape-ratio {
      height: calc(100cqw * var(--ahuxcore-hero-shape-k) + var(--ahuxcore-hero-shape-c) * 1px);
    }
  }
}

/* 1.12.0 — Scorrimento laterale anche sui tablet. Di serie partiva sotto i 768 px, ma fra 768 e 991 px la fascia
   andava a capo (tre riquadri sopra e due sotto, con un buco a destra): su un tablet è più naturale scorrere di
   lato, e la fila resta una sola. */
@media (min-width: 768px) and (max-width: 991px) {
  .ahuxcore-quicklinks--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .ahuxcore-quicklinks--scroll > .ahuxcore-quicklink {
    flex: 0 0 min(46%, 340px);
    scroll-snap-align: start;
  }
}

/* Sul telefono la card si accorcia: con un titolo di due righe e una descrizione breve, 208 px lasciavano un
   vuoto grande quanto metà riquadro. */
@media (max-width: 767px) {
  .ahuxcore-quicklinks--scroll > .ahuxcore-quicklink--image_side {
    /* l'altezza arriva da uno stile in linea sulla fascia, quindi qui si scrive sulla card */
    height: 172px;
  }
  .ahuxcore-quicklinks--scroll > .ahuxcore-quicklink--image_side {
    padding: 16px;
  }
  .ahuxcore-quicklinks--scroll > .ahuxcore-quicklink--image_side .ahuxcore-quicklink__go {
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
  }
}

/* 1.12.0 — Su telefono e tablet la barra di scorrimento sotto la fascia non serve: che si scorra di lato lo dice
   già la card tagliata sul bordo. Lo scorrimento resta, sparisce solo la barra. */
@media (max-width: 991px) {
  .ahuxcore-quicklinks--scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ahuxcore-quicklinks--scroll::-webkit-scrollbar {
    display: none;
  }
}

/* 1.12.4 — Sul tablet (768-991 px), con «Colonne tablet: 1», i banner vanno uno sotto l'altro come sul telefono.
   Prima la regola del modello («grande a sinistra, due a destra») vinceva su quella del tablet: il riquadro grande
   diventava più alto che largo (431×736 a 768 px) e i banner, disegnati per il computer, si deformavano fino alla
   metà. Qui valgono le stesse scelte del telefono: con «rapporto originale» ogni banner si vede intero, senza
   tagli né deformazioni; con «altezza fissa» usa l'altezza tablet del pannello. */
@media (min-width: 768px) and (max-width: 991px) {
  .ahuxcore-heroes--tablet-stack {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .ahuxcore-heroes--tablet-stack > .ahuxcore-hero {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .ahuxcore-heroes--tablet-stack.ahuxcore-heroes--mobile-ratio-natural {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .ahuxcore-heroes--tablet-stack.ahuxcore-heroes--mobile-ratio-natural > .ahuxcore-hero {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .ahuxcore-heroes--tablet-stack.ahuxcore-heroes--mobile-ratio-natural .ahuxcore-hero__media {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
  }
  .ahuxcore-heroes--tablet-stack.ahuxcore-heroes--mobile-ratio-natural .ahuxcore-hero__media picture {
    display: block;
    width: 100%;
    height: auto;
  }
  .ahuxcore-heroes--tablet-stack.ahuxcore-heroes--mobile-ratio-natural .ahuxcore-hero__media img,
  .ahuxcore-heroes--tablet-stack.ahuxcore-heroes--mobile-ratio-natural .ahuxcore-hero__media video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
  }
}

/* 1.12.5 — Hero e Accessi rapidi centrati sulla pagina. Le due fasce sono più larghe del contenitore che le ospita
   (vanno quasi da bordo a bordo, lasciando il margine del pannello), ma erano allineate con `margin: auto`: quando un
   blocco è più largo del suo contenitore, `auto` vale zero e tutta l'eccedenza finisce a destra. A 1440 px la Hero
   partiva a 61 px dal bordo sinistro e usciva di 21 px da quello destro, tagliando i due banner di destra (anche in
   produzione con la 1.10.5). Qui l'eccedenza si divide a metà per lato: margini negativi uguali, larghezza invariata. */
.ahuxcore-hero-section.ahuxcore-live-section--contained,
.ahuxcore-quicklink-section.ahuxcore-live-section--contained,
.ahuxcore-cattiles-section.ahuxcore-live-section--contained {
  --ahuxcore-band-width: min(
    var(--ahuxcore-hero-contained-max, 1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop, 20px) * 2))
  );
  width: var(--ahuxcore-band-width);
  margin-left: calc((100% - var(--ahuxcore-band-width)) / 2);
  margin-right: calc((100% - var(--ahuxcore-band-width)) / 2);
}
@media (max-width: 767px) {
  .ahuxcore-hero-section.ahuxcore-live-section--contained,
  .ahuxcore-quicklink-section.ahuxcore-live-section--contained {
    --ahuxcore-band-width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
  }
}

/* 1.13.0 — «Le nostre categorie». Stessa larghezza della fascia e della Hero (regola sopra), stesso linguaggio dei
   riquadri della fascia: bordo leggero, angoli da 14 px, freccia arancione nel cerchio. Colonne, forma dei riquadri
   e scorrimento sono decisi qui, quindi valgono dal primo disegno: nessuna misura arriva dal JavaScript.
   Le immagini sono quadrate su fondo bianco: stanno intere («contain») in un riquadro 4:3 bianco, così non si taglia
   niente e il bordo dell'immagine non si vede. */
.ahuxcore-cattiles-section.ahuxcore-live-section--contained {
  max-width: none;
  box-sizing: border-box;
}
.ahuxcore-cattiles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}
.ahuxcore-cattiles__titles h2 {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #17181c;
  text-transform: none;
}
.ahuxcore-cattiles__titles p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #6f7480;
}
.ahuxcore-cattiles__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ahuxcore-accent, #ca450c);
  text-decoration: none;
  white-space: nowrap;
  /* in grassetto lo spazio del Poppins è stretto: «Vedi tutte» sembrava una parola sola */
  word-spacing: .12em;
}
.ahuxcore-cattiles__all::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe5720' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}
.ahuxcore-cattiles__all:hover,
.ahuxcore-cattiles__all:focus {
  color: var(--ahuxcore-accent, #ca450c);
  text-decoration: none;
}
.ahuxcore-cattiles__all:hover::after {
  transform: translateX(3px);
}
.ahuxcore-cattiles__all-mobile {
  display: none;
}
.ahuxcore-cattiles {
  display: grid;
  grid-template-columns: repeat(var(--ahuxcore-cattiles-cols, 5), minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ahuxcore-cattiles__item {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.ahuxcore-cattile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(16, 17, 39, .1);
  border-radius: 14px;
  background: #fff;
  color: #17181c;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(16, 17, 39, .06);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ahuxcore-cattile:hover,
.ahuxcore-cattile:focus {
  color: #17181c;
  text-decoration: none;
  border-color: rgba(202,69,12,.45);
  box-shadow: 0 10px 28px rgba(16, 17, 39, .1);
}
.ahuxcore-cattile__media {
  position: relative;
  display: block;
  /* 21/9/2026: da 4:3 a 2:1 su richiesta di Alessio («le immagini categoria occupano un sacco di spazio»): il
     riquadro scende di circa il 30% (a 1440 px da 255 a 178 px di altezza) e la foto resta intera. */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #fff;
}
/* In un riquadro con aspect-ratio l'altezza al 100% non si risolve e la foto (quadrata) lo allungherebbe: la si
   posiziona sui bordi del riquadro, così è il riquadro a decidere la forma e la foto ci sta dentro intera. */
.ahuxcore-cattile__media img {
  position: absolute;
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 8px);
  object-fit: contain;
  transition: transform .25s ease;
}
.ahuxcore-cattile:hover .ahuxcore-cattile__media img {
  transform: scale(1.04);
}
.ahuxcore-cattile__name {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  min-height: 46px;
  padding: 6px 48px 8px 14px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  /* il tema mette 1 px fra le lettere di questi testi: allarga i nomi e li manda a capo prima del necessario */
  letter-spacing: 0;
  border-top: 1px solid rgba(16, 17, 39, .06);
  background: #fafafb;
}
.ahuxcore-cattile__go {
  position: absolute;
  right: 11px;
  bottom: 9px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ahuxcore-accent, #ca450c);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fe5720' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform .18s ease;
}
.ahuxcore-cattile:hover .ahuxcore-cattile__go {
  transform: translateX(3px);
}

/* Fra 992 e 1199 px cinque riquadri restano larghi 180 px: il nome si stringe un poco. */
@media (min-width: 992px) and (max-width: 1199px) {
  .ahuxcore-cattile__name {
    font-size: 13.5px;
    padding-left: 12px;
    padding-right: 46px;
  }
  .ahuxcore-cattile__go {
    right: 10px;
    width: 28px;
    height: 28px;
  }
}

/* Sotto i 992 px (tablet e telefoni) una sola fila che scorre di lato, come la fascia: il riquadro tagliato sul
   bordo dice che si può scorrere, quindi la barra di scorrimento non serve. Sul telefono se ne vedono circa due e
   mezzo, sul tablet tre e mezzo. */
@media (max-width: 991px) {
  .ahuxcore-cattiles {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
  }
  .ahuxcore-cattiles::-webkit-scrollbar {
    display: none;
  }
  .ahuxcore-cattiles__item {
    flex: 0 0 calc((100% - 36px) / 3.4);
    scroll-snap-align: start;
  }
}
@media (max-width: 767px) {
  .ahuxcore-cattiles-section.ahuxcore-live-section--contained {
    --ahuxcore-band-width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
  }
  .ahuxcore-cattiles__head {
    align-items: center;
    margin-bottom: 10px;
  }
  .ahuxcore-cattiles__titles p {
    display: none;
  }
  .ahuxcore-cattiles__all {
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
  }
  .ahuxcore-cattiles__all-desktop {
    display: none;
  }
  .ahuxcore-cattiles__all-mobile {
    display: inline;
  }
}
@media (max-width: 575px) {
  .ahuxcore-cattiles__item {
    flex-basis: calc((100% - 24px) / 2.4);
  }
  /* sul telefono il riquadro è stretto: con 2:1 la foto diventerebbe un francobollo, quindi un po' più alta */
  .ahuxcore-cattile__media {
    aspect-ratio: 5 / 3;
  }
  .ahuxcore-cattile__name {
    min-height: 42px;
    padding: 6px 42px 8px 11px;
    font-size: 13.5px;
  }
  .ahuxcore-cattile__go {
    right: 9px;
    bottom: 10px;
    width: 26px;
    height: 26px;
    background-size: 13px;
  }
}

/* Telefoni stretti (fino a 400 px, per esempio 320 px): un riquadro è largo circa 110 px e accanto alla freccia un nome
   come «Archiviazione» non ci sta. La freccia sparisce (il riquadro intero resta il link) e il riquadro si allarga un
   poco: se ne vedono due e un filo del terzo, che basta a dire che la fila continua. */
@media (max-width: 400px) {
  .ahuxcore-cattiles__item {
    flex-basis: calc((100% - 12px) / 2.15);
  }
  .ahuxcore-cattile__go {
    display: none;
  }
  .ahuxcore-cattile__name {
    padding: 6px 10px 8px;
    font-size: 13px;
  }
  .ahuxcore-cattiles__head {
    gap: 10px;
  }
  .ahuxcore-cattiles__titles h2 {
    font-size: 18px;
  }
  .ahuxcore-cattiles__all {
    font-size: 14px;
  }
}


/* 1.13.2 — Blocco SEO su telefono: testo più arioso e colonne che si aprono con «Leggi tutto».
   Su computer la spunta e il pulsante non esistono per l'occhio e le colonne restano intere. L'apertura è solo CSS
   (spunta nascosta + etichetta), così la colonna nasce già chiusa al primo disegno; il testo resta nella pagina. */
.ahuxcore-seo__toggle,
.ahuxcore-seo__more{display:none}
@media(max-width:767px){
  .ahuxcore-seo{padding:26px 18px}
  .ahuxcore-seo__heading{margin-bottom:22px}
  .ahuxcore-seo__eyebrow{font-size:11.5px;letter-spacing:.06em}
  .ahuxcore-seo__heading .ahuxcore-seo__title{margin-bottom:12px;font-size:24px;line-height:1.22;letter-spacing:0}
  .ahuxcore-seo__intro,
  .ahuxcore-seo__intro p{font-size:15px;line-height:1.6;letter-spacing:.1px}
  .ahuxcore-seo .ahuxcore-seo__columns{gap:12px;padding:0;border:0}
  .ahuxcore-seo__col{position:relative;padding:18px 16px 12px;border-radius:14px;background:#f6f6f8}
  .ahuxcore-seo__columns h3{margin-bottom:8px;font-size:18px;line-height:1.3;letter-spacing:0}
  .ahuxcore-seo__body p,
  .ahuxcore-seo__footer-copy p{font-size:14.5px;line-height:1.65;letter-spacing:.1px}
  .ahuxcore-seo__footer{gap:16px;padding-top:22px}
  .ahuxcore-seo__actions{flex-direction:row}
  .ahuxcore-seo__actions a{flex:1 1 0;width:auto;padding:10px 8px;font-size:14px;letter-spacing:0;white-space:nowrap}
}
/* «Leggi tutto» solo sui telefoni: sui tablet stretti il testo intero sta comodo nelle schede. */
@media(max-width:599px){
  .ahuxcore-seo__toggle{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
  .ahuxcore-seo__body{max-height:100px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
  .ahuxcore-seo__toggle:checked ~ .ahuxcore-seo__body{max-height:none;-webkit-mask-image:none;mask-image:none}
  .ahuxcore-seo__more{display:inline-flex;align-items:center;gap:8px;margin-top:0;padding:4px 0;color:#ca450c;font-size:14px;font-weight:700;letter-spacing:0;cursor:pointer;user-select:none}
  .ahuxcore-seo__more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .ahuxcore-seo__more-close{display:none}
  .ahuxcore-seo__toggle:checked ~ .ahuxcore-seo__more .ahuxcore-seo__more-open{display:none}
  .ahuxcore-seo__toggle:checked ~ .ahuxcore-seo__more .ahuxcore-seo__more-close{display:inline}
  .ahuxcore-seo__toggle:checked ~ .ahuxcore-seo__more::after{transform:translateY(2px) rotate(-135deg)}
  .ahuxcore-seo__toggle:focus-visible ~ .ahuxcore-seo__more{outline:2px solid #ca450c;outline-offset:3px;border-radius:4px}
}


/* 1.14.3 — Aspetto della sezione SEO scelto dal pannello (proposte del 22/9/2026, scelta di Alessio: avorio graficata).
   «card» è l'aspetto di prima e non ha regole qui. Con i modelli a fascia la sezione diventa una banda di colore da
   bordo a bordo dello schermo, che taglia la continuità con le sezioni sopra e sotto; le colonne diventano schede
   bianche sulla banda. La banda è un'ombra piena tagliata sopra e sotto (clip-path): non allarga la pagina, quindi
   nessuno scorrimento laterale. Colori da --ahuxcore-seo-bg e --ahuxcore-seo-accent, scritti dal server nello stile
   della sezione: il primo disegno è già quello giusto. */
.ahuxcore-seo__intro-toggle,
.ahuxcore-seo__intro-more{display:none}
.ahuxcore-seo-section--band{
  position:relative;
  margin:28px 0 12px;
  padding:64px 0;
  overflow:visible;
  background:var(--ahuxcore-seo-bg,#f3f1ed);
  box-shadow:0 0 0 100vmax var(--ahuxcore-seo-bg,#f3f1ed);
  clip-path:inset(0 -100vmax);
}
.ahuxcore-seo-section--band .ahuxcore-seo{position:relative;z-index:1;padding:0 40px;border:0;border-radius:0;background:transparent;box-shadow:none}
.ahuxcore-seo-section--band .ahuxcore-seo__columns{gap:24px;padding:0;border:0}
.ahuxcore-seo-section--band .ahuxcore-seo__col{padding:30px 32px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(20,25,45,.05),0 8px 24px rgba(20,25,45,.04)}
.ahuxcore-seo-section--band .ahuxcore-seo__footer{padding-top:34px}
.ahuxcore-seo-section--band .ahuxcore-seo__secondary{background:transparent}
.ahuxcore-seo-section--band .ahuxcore-seo__eyebrow,
.ahuxcore-seo-section--band .ahuxcore-seo__body a,
.ahuxcore-seo-section--band .ahuxcore-seo__more,
.ahuxcore-seo-section--band .ahuxcore-seo__intro-more{color:var(--ahuxcore-seo-accent,#ca450c)}
.ahuxcore-seo-section--band .ahuxcore-seo__primary{background:var(--ahuxcore-seo-accent,#ca450c)}
.ahuxcore-seo-section--cool .ahuxcore-seo__col{box-shadow:0 1px 2px rgba(25,45,80,.06),0 10px 28px rgba(25,45,80,.05)}
/* Avorio graficata: trama a puntini, cerchio pieno e arco nell'angolo, trattino sotto il titolo; tutto nel colore
   d'accento schiarito, così cambiando accento la grafica lo segue. */
.ahuxcore-seo-section--ivory{
  background-image:radial-gradient(color-mix(in srgb,var(--ahuxcore-seo-accent,#ca450c) 13%,transparent) 1.2px,transparent 1.3px);
  background-size:22px 22px;
}
.ahuxcore-seo-section--ivory::before,
.ahuxcore-seo-section--ivory::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ahuxcore-seo-section--ivory::before{top:-70px;left:-90px;width:260px;height:260px;background:color-mix(in srgb,var(--ahuxcore-seo-accent,#ca450c) 22%,var(--ahuxcore-seo-bg,#fbf6ee));opacity:.7}
.ahuxcore-seo-section--ivory::after{top:-40px;left:-60px;width:300px;height:300px;border:1.5px solid color-mix(in srgb,var(--ahuxcore-seo-accent,#ca450c) 35%,transparent)}
.ahuxcore-seo-section--ivory .ahuxcore-seo__heading .ahuxcore-seo__title::after{content:"";display:block;width:56px;height:4px;margin:16px auto 0;border-radius:4px;background:var(--ahuxcore-seo-accent,#ca450c)}
/* 1.15.3 — Fascia contenuta: stessa gabbia delle altre sezioni (la classe «contained» arriva dal server), quindi
   niente ombra da 100vmax e niente ritaglio che sfonda. Diventa un riquadro con gli angoli arrotondati; la grafica
   dell'avorio, che sborda dagli angoli, resta tagliata dentro il riquadro. Tutto in CSS: nessuna misura calcolata
   dopo il caricamento, così il blocco nasce già della larghezza giusta. */
.ahuxcore-seo-section--band.ahuxcore-seo-section--inset{
  /* Stessa formula della Hero e delle altre sezioni contenute: fino a 1600 px, poi la larghezza della finestra meno i
     margini laterali. La sezione, quando è contenuta, non porta più la classe «tutta larghezza», così il JavaScript
     che allarga le fasce da bordo a bordo non la tocca: la misura resta tutta nel CSS, com'è giusto. */
  --ahuxcore-band-width:min(
    var(--ahuxcore-hero-contained-max,1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop,20px) * 2))
  );
  width:var(--ahuxcore-band-width);
  max-width:none;
  margin-left:calc((100% - var(--ahuxcore-band-width)) / 2);
  margin-right:calc((100% - var(--ahuxcore-band-width)) / 2);
  margin-top:28px;
  margin-bottom:12px;
  box-sizing:border-box;
  padding:52px 0;
  overflow:hidden;
  border-radius:24px;
  box-shadow:none;
  clip-path:none;
}
.ahuxcore-seo-section--band.ahuxcore-seo-section--inset .ahuxcore-seo{padding:0 clamp(16px,3vw,48px)}
@media(max-width:767px){
  .ahuxcore-seo-section--band.ahuxcore-seo-section--inset{--ahuxcore-band-width:calc(100vw - (var(--ahuxcore-hero-gutter-mobile,15px) * 2));margin-top:20px;margin-bottom:8px;padding:34px 0 30px;border-radius:18px}
  .ahuxcore-seo-section--band.ahuxcore-seo-section--inset .ahuxcore-seo{padding:0 14px}
  .ahuxcore-seo-section--band{margin:20px 0 8px;padding:40px 0 36px}
  .ahuxcore-seo-section--band .ahuxcore-seo{padding:0}
  .ahuxcore-seo-section--band .ahuxcore-seo__eyebrow{font-size:10.5px;letter-spacing:.045em}
  .ahuxcore-seo-section--band .ahuxcore-seo__heading{margin-bottom:20px}
  .ahuxcore-seo-section--band .ahuxcore-seo__col{padding:20px 18px 14px;border-radius:16px;background:#fff}
  .ahuxcore-seo-section--band .ahuxcore-seo__columns{gap:12px}
  .ahuxcore-seo-section--band .ahuxcore-seo__footer{padding-top:24px}
  .ahuxcore-seo-section--ivory .ahuxcore-seo__heading .ahuxcore-seo__title::after{width:44px;margin:12px 0 0}
}
/* Fino ai tablet la grafica va nell'angolo a destra e più piccola: a sinistra, con il testo centrato e poco margine,
   il cerchio finiva sopra la scritta e l'introduzione (iPad Mini). */
@media(max-width:991px){
  .ahuxcore-seo-section--band .ahuxcore-seo{padding:0 8px}
  .ahuxcore-seo-section--ivory::before{top:-60px;left:auto;right:-70px;width:170px;height:170px}
  .ahuxcore-seo-section--ivory::after{top:-40px;left:auto;right:-60px;width:200px;height:200px}
}
@media(min-width:768px) and (max-width:991px){
  .ahuxcore-seo-section--ivory::before{top:-80px;right:-90px}
  .ahuxcore-seo-section--ivory::after{top:-70px;right:-100px}
}
@media(max-width:767px){
  .ahuxcore-seo-section--band .ahuxcore-seo{padding:0}
}
/* Sui telefoni, con le fasce, l'introduzione mostra tre righe e si apre come le colonne. */
@media(max-width:599px){
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-toggle{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro{max-height:4.9em;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-toggle:checked ~ .ahuxcore-seo__intro{max-height:none;-webkit-mask-image:none;mask-image:none}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:4px 0;font-size:14px;font-weight:700;letter-spacing:0;cursor:pointer;user-select:none}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-more .ahuxcore-seo__more-close{display:none}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-toggle:checked ~ .ahuxcore-seo__intro-more .ahuxcore-seo__more-open{display:none}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-toggle:checked ~ .ahuxcore-seo__intro-more .ahuxcore-seo__more-close{display:inline}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-toggle:checked ~ .ahuxcore-seo__intro-more::after{transform:translateY(2px) rotate(-135deg)}
  .ahuxcore-seo-section--band .ahuxcore-seo__intro-toggle:focus-visible ~ .ahuxcore-seo__intro-more{outline:2px solid var(--ahuxcore-seo-accent,#ca450c);outline-offset:3px;border-radius:4px}
  .ahuxcore-seo-section--band .ahuxcore-seo__toggle:focus-visible ~ .ahuxcore-seo__more{outline-color:var(--ahuxcore-seo-accent,#ca450c)}
}


/* =========================================================
   1.14.0 — «Le nostre offerte»
   Fascia fra gli Accessi rapidi e «Le nostre categorie»: titolo, pulsanti a pillola dei caroselli, link a tutte le
   offerte e una fila di schede che scorre di lato.

   Come è pensata (scelte di Alessio del 22/9/2026, fra le prove A, B e due cornici):
   - un compito per ogni segnale: l'offerta (bollino dello sconto e prezzo scontato, in rosso) è l'unico elemento pieno
     e caldo della fascia; il carrello resta arancio ma solo nel contorno, e si riempie al passaggio; la navigazione
     (pillola attiva) è scura. Se lo stesso arancio facesse marchio, azione e offerta insieme, nessuno dei tre
     spiccherebbe;
   - lo sconto si distingue anche per la forma (bollino tondo), non solo per il colore;
   - la cornice è chiara ma graficata (la versione scura è stata scartata perché pesante): fondo avorio, un grande
     cerchio arancio che entra dall'angolo in alto a destra, trama leggera a puntini. Tutto in CSS, quindi nasce
     completa al primo disegno e non carica immagini.

   Quante schede stanno in una fila lo decide questo file, per larghezza della pagina, quindi vale dal primo disegno:
   6 dai 1400 px, 5 fra 1200 e 1399, 4 fra 992 e 1199, poco più di 3 sul tablet, 2,3 fino a 767 px e 1,75 sul telefono (la scheda
   tagliata sul bordo dice che la fila continua). La barra di scorrimento non si vede mai; sul computer si scorre con le
   frecce, sui dispositivi touch con il dito.

   Il CSS personalizzato del tema forza diversi stili con !important (pulsanti .btn-primary blu e in maiuscolo, cuore
   bianco, «Visualizza prodotto» sempre visibile, etichette a nastro): dove serve qui c'è lo stesso peso, sempre
   limitato a .ahuxcore-offers, così il resto del negozio non cambia.
   ========================================================= */

/* La cornice */
.ahuxcore-offers.ahuxcore-live-section--contained {
  --ahuxcore-band-width: min(
    var(--ahuxcore-hero-contained-max, 1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop, 20px) * 2))
  );
  --ahuxcore-offers-gap: 16px;
  --ahuxcore-offers-per-row: 5;
  --ahuxcore-offers-promo: #e80e2d;
  position: relative;
  width: var(--ahuxcore-band-width);
  max-width: none;
  margin-left: calc((100% - var(--ahuxcore-band-width)) / 2);
  margin-right: calc((100% - var(--ahuxcore-band-width)) / 2);
  padding: 26px 28px 22px;
  box-sizing: border-box;
  border: 1px solid rgba(202,69,12,.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at calc(100% + 40px) -60px, rgba(202,69,12,.92) 0 200px, rgba(202,69,12,0) 201px),
    radial-gradient(circle at calc(100% + 40px) -60px, rgba(202,69,12,0) 0 236px, rgba(202,69,12,.35) 237px 239px, rgba(202,69,12,0) 240px),
    radial-gradient(circle at -80px calc(100% + 80px), rgba(255, 176, 120, .35) 0 200px, rgba(255, 176, 120, 0) 201px),
    radial-gradient(rgba(202,69,12,.12) 1px, transparent 1.3px) 0 0 / 16px 16px,
    linear-gradient(180deg, #fff3ea 0%, #fffaf6 100%);
  box-shadow: 0 14px 34px rgba(202,69,12,.10);
  overflow: hidden;
}

/* L'intestazione: titolo con il tratto arancio, pillole, link a tutte le offerte */
.ahuxcore-offers__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 14px;
}
.ahuxcore-offers__title {
  position: relative;
  margin: 0;
  padding-bottom: 6px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #17181c;
  text-transform: none;
}
.ahuxcore-offers__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--ahuxcore-accent, #ca450c);
}
.ahuxcore-offers__tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ahuxcore-offers__tabs::-webkit-scrollbar {
  display: none;
}
.ahuxcore-offers__tab {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 16px;
  border: 1px solid rgba(16, 17, 39, .14);
  border-radius: 999px;
  background: #fff;
  color: #3b3e46;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.ahuxcore-offers__tab:hover {
  border-color: #17181c;
  color: #17181c;
}
.ahuxcore-offers__tab[aria-selected="true"],
.ahuxcore-offers__tab[aria-selected="true"]:hover {
  border-color: #17181c;
  background: #17181c;
  color: #fff;
}
.ahuxcore-offers__tab:focus-visible {
  outline: 2px solid var(--ahuxcore-accent, #ca450c);
  outline-offset: 2px;
}
/* Il link sta sopra il cerchio arancio: una pillola bianca con il testo scuro si legge su qualunque fondo. */
.ahuxcore-offers .ahuxcore-offers__all,
.ahuxcore-offers .ahuxcore-offers__all:hover {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: #17181c;
  box-shadow: 0 6px 16px rgba(16, 17, 39, .14);
}
.ahuxcore-offers .ahuxcore-offers__all:hover {
  color: var(--ahuxcore-accent, #ca450c);
}

/* I pannelli: uno per pulsante, visibile uno alla volta; la fila non ha un fondo suo, resta quello della cornice. */
.ahuxcore-offers__panel {
  position: relative;
}
.ahuxcore-offers__panel[hidden] {
  display: none !important;
}
.ahuxcore-offers.ahuxcore-managed-product-carousel,
.ahuxcore-offers .ahuxcore-managed-product-carousel {
  background: transparent;
}

/* La fila: la traccia è larga quanto la parte visibile e le schede ne prendono una frazione, quindi il numero di
   schede per fila non dipende da nessun calcolo fatto dopo il caricamento. */
.ahuxcore-offers .ahuxcore-managed-product-carousel__track {
  width: auto;
  gap: var(--ahuxcore-offers-gap);
  padding: 2px 1px 8px;
}
.ahuxcore-offers .ahuxcore-managed-product-carousel__item {
  flex: 0 0 calc((100% - (var(--ahuxcore-offers-per-row) - 1) * var(--ahuxcore-offers-gap)) / var(--ahuxcore-offers-per-row));
  min-width: 0;
}

/* Le frecce: cerchi bianchi sul bordo della fila, solo dove c'è un puntatore. */
.ahuxcore-offers__nav {
  position: absolute;
  top: 38%;
  z-index: 30;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(16, 17, 39, .1);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317181c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 6px 18px rgba(16, 17, 39, .12);
  cursor: pointer;
  transform: translateY(-50%);
}
.ahuxcore-offers__nav--prev {
  left: -14px;
  transform: translateY(-50%) scaleX(-1);
}
.ahuxcore-offers__nav--next {
  right: -14px;
}
.ahuxcore-offers__nav:hover {
  border-color: var(--ahuxcore-accent, #ca450c);
}

/* 1.14.2 — Il riquadro in fondo alla fila: largo e alto come una scheda (lo decide la fila, al primo disegno), con lo
   stesso bordo e la stessa ombra; un cerchio arancio con la freccia e l'etichetta del link dell'intestazione. */
.ahuxcore-offers .ahuxcore-offers__more-item {
  display: flex;
  padding: 0 7.5px; /* lo stesso margine che il CSS del tema dà alla scheda prodotto, così i bordi si allineano */
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .ahuxcore-offers .ahuxcore-offers__more-item {
    padding: 2px;
  }
}
.ahuxcore-offers .ahuxcore-offers__more,
.ahuxcore-offers .ahuxcore-offers__more:hover {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 100%;
  padding: 20px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(202,69,12,.22);
  border-radius: 12px;
  background: linear-gradient(160deg, #fff 0%, #fff6f1 55%, #ffe9dd 100%);
  box-shadow: 0 10px 24px rgba(16, 17, 39, .08);
  color: #17181c;
  text-align: center;
  text-decoration: none;
}
.ahuxcore-offers__more-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ahuxcore-accent, #ca450c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 8px 18px rgba(202,69,12,.3);
  transition: transform .2s ease;
}
.ahuxcore-offers__more-label {
  max-width: 14ch;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.ahuxcore-offers .ahuxcore-offers__more:hover .ahuxcore-offers__more-icon {
  transform: translateX(4px);
}
.ahuxcore-offers .ahuxcore-offers__more:hover .ahuxcore-offers__more-label {
  color: var(--ahuxcore-accent, #ca450c);
}

/* La scheda: un solo bordo (quello esterno; il riquadro interno del tema perde il suo), immagine 5:4, nome a sinistra
   su due righe. */
.ahuxcore-offers .thumbnail-container {
  padding: 10px;
  border-color: rgba(16, 17, 39, .06);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(16, 17, 39, .08);
}
.ahuxcore-offers .tvproduct-wrapper {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ahuxcore-offers .tvproduct-image {
  min-height: 0;
  aspect-ratio: 5 / 4;
  margin-bottom: 6px;
}
.ahuxcore-offers .tvproduct-image .thumbnail {
  min-height: 0;
  height: 100%;
}
.ahuxcore-offers .tvproduct-image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ahuxcore-offers .tvproduct-name {
  min-height: 0;
  margin: 2px 0 4px;
}
.ahuxcore-offers .tvproduct-name h6 {
  min-height: 2.6em;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  -webkit-line-clamp: 2;
}

/* Le etichette: in colonna in alto a sinistra, mai una sopra l'altra. Lo sconto è un bollino tondo e inclinato,
   «Nuovo» una pillola scura sotto di lui. Il tema le disegna a nastro (fondo e ritaglio sull'elenco) e le nasconde al
   passaggio del mouse: qui restano sempre visibili. */
.ahuxcore-offers .tvproduct-flags,
.ahuxcore-offers .tvproduct-wrapper:hover .tvproduct-flags,
.ahuxcore-offers article.product-miniature:hover .tvproduct-flags {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  text-align: left;
  background: transparent !important;
  clip-path: none !important;
  box-shadow: none;
}
.ahuxcore-offers .tvproduct-sale-pack-wrapper,
.ahuxcore-offers article.product-miniature:hover .tvproduct-sale-pack-wrapper {
  top: 2px;
  left: 2px;
}
.ahuxcore-offers .tvproduct-image:has(.tvproduct-sale-pack-wrapper li) .tvproduct-online-new-wrapper {
  top: 56px;
}
.ahuxcore-offers .tvproduct-flags li {
  position: static;
  margin: 0;
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: none;
}
.ahuxcore-offers .tvproduct-flags li::before,
.ahuxcore-offers .tvproduct-flags li::after {
  content: none !important;
  display: none !important;
}
.ahuxcore-offers .tvproduct-sale-pack-wrapper li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--ahuxcore-offers-promo) !important;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  transform: rotate(-10deg);
  box-shadow: 0 6px 14px rgba(232,14,45,.3);
}
.ahuxcore-offers .tvproduct-online-new-wrapper li {
  background: #17181c !important;
  color: #fff;
}

/* I preferiti: cuore scuro su un cerchio bianco, in alto a destra (il tema lo vuole bianco su fondo blu). */
.ahuxcore-offers .tvproduct-wishlist {
  top: 0;
  right: 0;
  left: auto;
}
.ahuxcore-offers .product-miniature a.wishlist_button .tvproduct-wishlist-icon {
  border: 1px solid rgba(16, 17, 39, .1);
  border-radius: 50%;
  background: #fff !important;
}
.ahuxcore-offers .tvproduct-wrapper .tvproduct-wishlist .panel-product-line svg path {
  fill: #3b3e46 !important;
}
.ahuxcore-offers .tvproduct-wrapper .tvproduct-wishlist:hover .panel-product-line svg path {
  fill: var(--ahuxcore-accent, #ca450c) !important;
}

/* Il prezzo: scuro di norma; se c'è il barrato il prodotto è scontato, e il prezzo diventa rosso e più grande. */
.ahuxcore-offers .tv-product-price {
  margin: 0 0 8px;
  text-align: left;
}
.ahuxcore-offers .tv-product-price .product-price-and-shipping {
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
}
.ahuxcore-offers .tv-product-price .price {
  color: #17181c;
  font-size: 18px;
}
.ahuxcore-offers .product-price-and-shipping:has(.regular-price) .price {
  color: var(--ahuxcore-offers-promo);
  font-size: 20px;
  font-weight: 800;
}
.ahuxcore-offers .tv-product-price .regular-price {
  margin-left: 7px;
  color: #666a73;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: line-through;
}

/* Il carrello: a tutta larghezza, contorno arancio su fondo bianco, pieno solo al passaggio del mouse. */
.ahuxcore-offers .tvproduct-btn-wrap {
  gap: 6px;
  padding-top: 0;
}
.ahuxcore-offers .tvproduct-cart-btn,
.ahuxcore-offers .tvproduct-cart-btn form {
  width: 100%;
}
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart {
  gap: 6px;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  min-height: 36px;
  padding: 7px 10px;
  border: 1.5px solid var(--ahuxcore-accent, #ca450c);
  border-radius: 8px;
  background: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  filter: none;
}
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart,
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart span {
  color: var(--ahuxcore-accent, #ca450c) !important;
}
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart:hover,
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn:hover .tvproduct-add-to-cart {
  background: var(--ahuxcore-accent, #ca450c) !important;
}
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart:hover,
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart:hover span,
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn:hover .tvproduct-add-to-cart,
.ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn:hover .tvproduct-add-to-cart span {
  color: #fff !important;
}
.ahuxcore-offers .tvproduct-cart-btn .tvproduct-add-to-cart svg path {
  stroke: currentColor !important;
  fill: currentColor !important;
}
/* «Visualizza prodotto» resta, in blu (scelta di Alessio del 22/9). Il tema lo mostra con !important, quindi la
   spunta del pannello che lo nasconde ha bisogno dello stesso peso per funzionare. */
.ahuxcore-offers.ahuxcore-pc-hide-view .tvproduct-view-btn,
.ahuxcore-offers .ahuxcore-pc-hide-view .tvproduct-view-btn {
  display: none !important;
}

/* Il riquadro di un pulsante mentre le sue schede arrivano, e quando non ce ne sono */
.ahuxcore-offers__loading {
  min-height: 320px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f4f4f6 0%, #fafafb 50%, #f4f4f6 100%) 0 0 / 200% 100%;
  animation: ahuxcore-offers-wait 1.4s ease-in-out infinite;
}
@keyframes ahuxcore-offers-wait {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ahuxcore-offers__loading { animation: none; }
}
.ahuxcore-offers__empty {
  margin: 0;
  padding: 40px 12px;
  color: #6f7480;
  font-size: 14px;
  text-align: center;
}

/* Le misure per larghezza della pagina */
@media (min-width: 1400px) {
  .ahuxcore-offers.ahuxcore-live-section--contained {
    --ahuxcore-offers-per-row: 6;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .ahuxcore-offers.ahuxcore-live-section--contained {
    --ahuxcore-offers-per-row: 4;
  }
}
@media (hover: none), (max-width: 767px) {
  .ahuxcore-offers__nav {
    display: none;
  }
}
@media (max-width: 991px) {
  .ahuxcore-offers.ahuxcore-live-section--contained {
    --ahuxcore-offers-per-row: 3.3;
    --ahuxcore-offers-gap: 12px;
  }
  /* titolo e link sulla prima riga, i pulsanti sotto, in una fila che scorre */
  .ahuxcore-offers__tabs {
    order: 3;
    flex-basis: 100%;
  }
}
@media (max-width: 767px) {
  .ahuxcore-offers.ahuxcore-live-section--contained {
    --ahuxcore-band-width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
    --ahuxcore-offers-per-row: 2.3;
    padding: 18px 14px 14px;
    border-radius: 18px;
    background:
      radial-gradient(circle at calc(100% + 30px) -50px, rgba(202,69,12,.9) 0 95px, rgba(202,69,12,0) 96px),
      radial-gradient(rgba(202,69,12,.12) 1px, transparent 1.3px) 0 0 / 14px 14px,
      linear-gradient(180deg, #fff3ea 0%, #fffaf6 100%);
  }
  .ahuxcore-offers__head {
    margin-bottom: 10px;
  }
  .ahuxcore-offers .ahuxcore-offers__all.ahuxcore-cattiles__all {
    padding: 7px 12px;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
  }
  .ahuxcore-offers__all .ahuxcore-cattiles__all-desktop {
    display: none;
  }
  .ahuxcore-offers__all .ahuxcore-cattiles__all-mobile {
    display: inline;
  }
}
@media (max-width: 575px) {
  .ahuxcore-offers.ahuxcore-live-section--contained {
    --ahuxcore-offers-per-row: 1.75;
    --ahuxcore-offers-gap: 10px;
  }
  .ahuxcore-offers__tab {
    padding: 6px 13px;
    font-size: 12.5px;
  }
  .ahuxcore-offers .tv-product-price .price {
    font-size: 17px;
  }
  .ahuxcore-offers .product-price-and-shipping:has(.regular-price) .price {
    font-size: 18px;
  }
  .ahuxcore-offers .tvproduct-wrapper .tvproduct-cart-btn .tvproduct-add-to-cart {
    padding: 7px 6px;
    font-size: 11.5px;
  }
  .ahuxcore-offers .tvproduct-sale-pack-wrapper li {
    width: 42px;
    height: 42px;
    font-size: 12.5px;
  }
  .ahuxcore-offers .tvproduct-image:has(.tvproduct-sale-pack-wrapper li) .tvproduct-online-new-wrapper {
    top: 48px;
  }
}
/* Telefoni stretti (Android da 360 px): una scheda e mezza, così «Aggiungi al carrello» sta intero nel pulsante. */
@media (max-width: 400px) {
  .ahuxcore-offers.ahuxcore-live-section--contained {
    --ahuxcore-offers-per-row: 1.55;
  }
}

/* 1.15.0 — «Banner». Stessa larghezza della fascia, della Hero e delle categorie. La forma la decide il numero di banner
   visibili (classe --n1…--n4): striscia 1400×400, due affiancati 700×350, tre in fila 700×525, griglia 2×2 700×350.
   Le proporzioni sono qui e valgono dal primo disegno. La sezione è un contenitore (container query): si dispone
   secondo lo spazio che ha, così l'anteprima del pannello usa questo stesso CSS. Sotto i 600 px di contenitore
   (telefono) un banner sta a tutta larghezza, due o più in una fila che si scorre con il dito, senza barra né frecce;
   il riquadro è 4:3 solo se tutti hanno l'immagine per il telefono (--mobile-own). */
.ahuxcore-banners-section.ahuxcore-live-section--contained {
  --ahuxcore-band-width: min(
    var(--ahuxcore-hero-contained-max, 1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop, 20px) * 2))
  );
  width: var(--ahuxcore-band-width);
  max-width: none;
  margin-left: calc((100% - var(--ahuxcore-band-width)) / 2);
  margin-right: calc((100% - var(--ahuxcore-band-width)) / 2);
  box-sizing: border-box;
  container: ahuxcore-banners / inline-size;
}
@media (max-width: 767px) {
  .ahuxcore-banners-section.ahuxcore-live-section--contained {
    --ahuxcore-band-width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
  }
}
.ahuxcore-banners {
  --ahuxcore-banner-ratio: 7 / 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ahuxcore-banners--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); --ahuxcore-banner-ratio: 2 / 1; }
.ahuxcore-banners--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); --ahuxcore-banner-ratio: 4 / 3; }
.ahuxcore-banners--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); --ahuxcore-banner-ratio: 2 / 1; }
.ahuxcore-banners__item {
  min-width: 0;
  margin: 0;
}
.ahuxcore-banner {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ahuxcore-banner-ratio);
  border-radius: 14px;
  background: #f5f5f8;
}
.ahuxcore-banner picture,
.ahuxcore-banner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.ahuxcore-banner img {
  object-fit: cover;
  transition: transform .35s ease;
}
a.ahuxcore-banner:hover img { transform: scale(1.03); }
a.ahuxcore-banner:focus-visible { outline: 3px solid #f28c28; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ahuxcore-banner img { transition: none; }
  a.ahuxcore-banner:hover img { transform: none; }
}
@container ahuxcore-banners (max-width: 939px) {
  .ahuxcore-banners { gap: 12px; }
}
@container ahuxcore-banners (max-width: 599px) {
  .ahuxcore-banners--mobile-own { --ahuxcore-banner-ratio: 4 / 3; }
  .ahuxcore-banners--n2,
  .ahuxcore-banners--n3,
  .ahuxcore-banners--n4 {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ahuxcore-banners--n2::-webkit-scrollbar,
  .ahuxcore-banners--n3::-webkit-scrollbar,
  .ahuxcore-banners--n4::-webkit-scrollbar { display: none; }
  .ahuxcore-banners--n2 > .ahuxcore-banners__item,
  .ahuxcore-banners--n3 > .ahuxcore-banners__item,
  .ahuxcore-banners--n4 > .ahuxcore-banners__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .ahuxcore-banner { border-radius: 12px; }
}
/* Browser senza container query (pochi, vecchi): stessa disposizione decisa dalla larghezza della finestra. */
@supports not (container-type: inline-size) {
  @media (max-width: 629px) {
    .ahuxcore-banners { gap: 10px; }
    .ahuxcore-banners--mobile-own { --ahuxcore-banner-ratio: 4 / 3; }
    .ahuxcore-banners--n2,
    .ahuxcore-banners--n3,
    .ahuxcore-banners--n4 {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .ahuxcore-banners--n2::-webkit-scrollbar,
    .ahuxcore-banners--n3::-webkit-scrollbar,
    .ahuxcore-banners--n4::-webkit-scrollbar { display: none; }
    .ahuxcore-banners--n2 > .ahuxcore-banners__item,
    .ahuxcore-banners--n3 > .ahuxcore-banners__item,
    .ahuxcore-banners--n4 > .ahuxcore-banners__item {
      flex: 0 0 86%;
      scroll-snap-align: start;
    }
  }
}

/* ------------------------------------------------------------------------- *
 * 1.16.1 — Sezione «Marche in evidenza»
 *
 * Stessa gabbia delle altre sezioni della home (Hero, banner, categorie): una fascia che sfonda da bordo a bordo
 * sembrerebbe presa da un'altra pagina. Quante colonne ha la fila lo decide lo spazio del contenitore, non la
 * finestra, così l'anteprima del pannello si comporta come il sito; e lo decide il CSS dal primo disegno, non il
 * JavaScript a caricamento avvenuto.
 * ------------------------------------------------------------------------- */
.ahuxcore-brands-section.ahuxcore-live-section--contained {
  --ahuxcore-band-width: min(
    var(--ahuxcore-hero-contained-max, 1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop, 20px) * 2))
  );
  width: var(--ahuxcore-band-width);
  max-width: none;
  margin-left: calc((100% - var(--ahuxcore-band-width)) / 2);
  margin-right: calc((100% - var(--ahuxcore-band-width)) / 2);
  box-sizing: border-box;
  container: ahuxcore-brands / inline-size;
}
@media (max-width: 767px) {
  .ahuxcore-brands-section.ahuxcore-live-section--contained {
    --ahuxcore-band-width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
  }
}
.ahuxcore-brands__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}
.ahuxcore-brands__title {
  margin: 0;
  font-size: clamp(20px, 2.2cqi + 14px, 28px);
  font-weight: 700;
  line-height: 1.2;
}
.ahuxcore-brands__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 1.17.5 — Il collegamento sta davanti all'immagine che sborda dalla card. Le misure sono scelte perché il
     capannone si fermi sotto l'intestazione, ma se un giorno i testi cambiassero e lui salisse un po' di più, qui
     resterebbe comunque leggibile e cliccabile invece di finirci dietro. */
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  /* 1.17.2 - Nel disegno di riferimento il collegamento ha il colore dell'accento e la freccia: e' il solo
     invito della fascia sopra il riquadro B2B, e in grigio chiaro non si vedeva. */
  color: var(--ahuxcore-brands-all-fg, #ca450c);
}
.ahuxcore-brands__all svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.ahuxcore-brands__all:hover,
.ahuxcore-brands__all:focus-visible { color: var(--ahuxcore-brands-all-fg, #ca450c); text-decoration: underline; }
.ahuxcore-brands {
  display: grid;
  /* Le colonne arrivano dal server, calcolate sul numero di marche che esce davvero: righe piene, nessun buco in
     fondo. Quale delle due misure si usa lo decide lo spazio del contenitore, non la finestra. */
  grid-template-columns: repeat(var(--ahuxcore-brand-cols, 6), minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container ahuxcore-brands (max-width: 991px) {
  .ahuxcore-brands { grid-template-columns: repeat(var(--ahuxcore-brand-cols-tablet, 4), minmax(0, 1fr)); }
}
/* Sotto questa larghezza le colonne scelte per il computer schiaccerebbero i loghi: si torna a «quante ne stanno». */
@container ahuxcore-brands (max-width: 767px) {
  .ahuxcore-brands { grid-template-columns: repeat(auto-fill, minmax(var(--ahuxcore-brand-min, 150px), 1fr)); }
}
.ahuxcore-brands__item { min-width: 0; margin: 0; }
.ahuxcore-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Proporzione fissa, perché l'altezza della fascia non dipenda da com'è fatto il logo della singola marca. È
     larga e bassa (2:1) perché i file del catalogo sono quadrati ma con molto bianco attorno al marchio: in un
     riquadro più alto il logo resterebbe piccolo in mezzo al vuoto. */
  aspect-ratio: 2 / 1;
  /* 1.16.2: l'aria attorno al marchio la mette il riquadro, non il ritaglio. Da quando i loghi sono ritagliati
     riempiono tutta la larghezza che hanno, e con il vecchio padding (10px 14px) quelli con il fondo pieno — Lebez,
     Markin — arrivavano a toccare il bordo e pesavano il doppio degli altri. */
  padding: 16px 26px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ahuxcore-brand:hover,
.ahuxcore-brand:focus-visible {
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}
.ahuxcore-brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* I loghi arrivano dal catalogo con fondi e contrasti diversi: il filtro li uniforma senza toccare i file. */
  mix-blend-mode: multiply;
}
/* Il nome resta nel documento per chi naviga con la tastiera o con un lettore di schermo, ma non si vede: nel
   riquadro c'è già il logo, e il render di Alessio mostra solo quello. */
.ahuxcore-brand__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Lo spazio a destra della fila di loghi: dalla 1.17.0 non è più un padding ma una colonna vera della griglia
   (in fondo al foglio), perché il riquadro che ci va dentro deve essere alto quanto tutta la fascia. */
/* Sul telefono la fila si scorre con il dito: niente frecce (non c'è un mouse) e niente barra di scorrimento. */
@container ahuxcore-brands (max-width: 599px) {
  .ahuxcore-brands {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ahuxcore-brands::-webkit-scrollbar { display: none; }
  .ahuxcore-brands__item {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------------------- *
 * 1.17.2 — «Soluzioni per aziende, scuole e rivenditori»: la fascia come nel disegno di riferimento
 *
 * **Che cosa cambia rispetto alla 1.17.1, e perché.** Nella build precedente i tre pezzi erano impilati — loghi,
 * vantaggi a tutta larghezza, riquadro B2B largo sotto — e Alessio l'ha bocciata: «mi pare molto ma molto diverso».
 * Aveva ragione, e la differenza non era di rifinitura ma di struttura. Nel disegno **i vantaggi e il riquadro B2B
 * stanno sulla stessa riga**, dentro un'unica fascia: a sinistra il titolo con i quattro vantaggi in fila, a destra
 * la card chiara con l'immagine che esce dal bordo alto e sale dentro la riga dei loghi. Con gli stessi pezzi
 * disposti in colonna il risultato è irriconoscibile.
 *
 * **Come è fatto l'incastro.** La fascia è una griglia a due colonne (circa 60/40). L'immagine è ancorata al bordo
 * basso della card, larga una percentuale della card e alta quanto vuole la sua proporzione: quello che avanza esce
 * dall'alto. Non c'è nessun margine negativo e nessuna misura in pixel da rifare quando la card cambia altezza — il
 * sbordo è una conseguenza della geometria, non un numero scritto a mano. La riga dei loghi lascia libera a destra
 * la fetta dove l'immagine sale, così non le passa dietro nessun marchio.
 *
 * Tutte le misure stanno qui dal primo disegno e nessuna la calcola il JavaScript: un componente che nasce in un
 * modo e si assesta in un altro è la latenza contro cui è nato tutto l'impianto del modulo.
 * ------------------------------------------------------------------------- */
.ahuxcore-solutions-band {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  /* 1.17.3 - Le due parti si toccano: fra il grigio e la card non deve restare una riga di bianco, che le
     farebbe leggere come due blocchi diversi invece che come una fascia sola. Gli angoli che si toccano sono
     dritti, quelli esterni arrotondati, cosi il pezzo sembra uno. */
  gap: 0;
  align-items: stretch;
  margin-top: 26px;
}
.ahuxcore-solutions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 1.17.4 — Quante colonne hanno i vantaggi lo decide lo spazio di QUESTA colonna, non quello della sezione:
     è la stessa logica dei container query già usata per la fascia, e regge anche quando il peso fra le due
     colonne cambia. Con la sezione come metro restavano in quattro anche dove non ci stavano. */
  container: ahuxcore-solutions / inline-size;
  gap: clamp(10px, 1cqi, 16px);
  /* 1.17.5 — Anche la fascia grigia si abbassa. Qui il taglio è più prudente che sulla card: i vantaggi sono su due
     righe e il respiro sopra e sotto è quello che li tiene staccati dai bordi. */
  padding: clamp(11px, 1cqi, 18px) clamp(16px, 1.8cqi, 30px);
  border-radius: clamp(14px, 1.3cqi, 22px) 0 0 clamp(14px, 1.3cqi, 22px);
  background: var(--ahuxcore-solutions-bg, #f4f4f5);
}
.ahuxcore-solutions__intro > * + * { margin-top: 8px; }
.ahuxcore-solutions__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ahuxcore-solutions__title {
  margin: 0;
  font-size: clamp(18px, 1.35cqi + 8px, 26px);
  font-weight: 700;
  line-height: 1.25;
}
.ahuxcore-solutions__text {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.82;
}
/* I vantaggi in fila: quante colonne le decide quanti ne escono davvero, come per i loghi e per i banner. */
.ahuxcore-solutions__list {
  display: grid;
  grid-template-columns: repeat(var(--ahuxcore-solutions-cols, 4), minmax(0, 1fr));
  gap: 14px clamp(10px, 1cqi, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ahuxcore-solution {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.5cqi, 10px);
}
/* L'icona è un cerchio chiaro con il glifo nel colore dell'accento: nel disegno è il solo tocco di colore della
   colonna di sinistra, e tiene insieme le quattro voci come una fila. */
.ahuxcore-solution__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 2cqi, 38px);
  height: clamp(30px, 2cqi, 38px);
  border-radius: 50%;
  background: var(--ahuxcore-solution-icon-bg, #fff);
  color: var(--ahuxcore-solution-icon-fg, #f4581f);
}
.ahuxcore-solution__icon svg { width: 52%; height: 52%; }
/* 1.17.3 — L'icona caricata dal negozio ha già il suo cerchio e i suoi colori: qui non si aggiunge nient'altro,
   altrimenti si vedrebbe un cerchio dentro un cerchio. */
.ahuxcore-solution__icon--image {
  background: none;
  border-radius: 0;
  object-fit: contain;
}
/* 1.17.3 — Le due righe del vantaggio sono una frase sola spezzata, non un titolo con la sua descrizione: stessa
   misura e stessa riga di base, la prima in evidenza e la seconda più chiara. Il testo è piccolo di proposito —
   quattro voci in fila su mezza fascia — e `balance` distribuisce le parole fra le righe invece di lasciarne una
   sola sull'ultima, che è ciò che faceva sembrare la fila disordinata. */
.ahuxcore-solution__title,
.ahuxcore-solution__text {
  display: block;
  font-size: clamp(12px, 0.3cqi + 8.5px, 13.5px);
  line-height: 1.34;
  text-wrap: balance;
  hyphens: none;
}
.ahuxcore-solution__title { font-weight: 600; }
.ahuxcore-solution__text { opacity: 0.72; }

/* ------------------------------------------------------------------------- *
 * Il riquadro dell'area riservata (1.17.2)
 *
 * Colori presi dalla grafica fornita da Alessio, non stimati: fondo #FDEBD9, titolo #04111F, pulsante #ca450c.
 * Il testo è HTML e non fa parte dell'immagine, perché una scritta dentro un JPG non si legge sul telefono, non si
 * cambia dal pannello e i motori di ricerca non la vedono.
 * ------------------------------------------------------------------------- */
.ahuxcore-b2b {
  position: relative;
  display: flex;
}
.ahuxcore-b2b__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 1.17.5 — Meno respiro sopra e sotto: il fianco resta com'era, perché lì lo spazio bianco separa il testo dal
     bordo e dall'immagine, mentre in verticale era spazio che alzava e basta tutta la sezione. */
  padding: clamp(14px, 1.2cqi, 22px) clamp(18px, 2.2cqi, 34px);
  box-sizing: border-box;
  border-radius: 0 clamp(14px, 1.3cqi, 22px) clamp(14px, 1.3cqi, 22px) 0;
  background: var(--ahuxcore-b2b-bg, #fdebd9);
  color: var(--ahuxcore-b2b-fg, #04111f);
}
/* Con l'immagine il testo si ferma dove lei comincia: non ci passa mai sotto. Dalla 1.17.5 l'immagine è un po' più
   larga, quindi lo spazio che le si riserva cresce insieme a lei. */
.ahuxcore-b2b--with-image .ahuxcore-b2b__card { padding-right: 49%; }
.ahuxcore-b2b__eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
}
/* 1.17.5 — Titolo e testo scendono di un paio di misure. Non è solo gusto: è quello che fa scendere l'altezza della
   fascia, perché è la card — titolo, testo e pulsante impilati — a decidere quanto è alta la riga, non i vantaggi. */
.ahuxcore-b2b__title {
  margin: 0;
  font-size: clamp(15px, 0.55cqi + 7.5px, 18.5px);
  font-weight: 700;
  line-height: 1.22;
}
.ahuxcore-b2b__text {
  margin: 6px 0 0;
  font-size: clamp(12.5px, 0.4cqi + 8.8px, 14.5px);
  line-height: 1.38;
  opacity: 0.74;
}
.ahuxcore-b2b__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  /* 1.17.5 — Pulsante più contenuto: nel disegno è un invito, non il protagonista del riquadro. Rimpicciolito il
     testo e stretti i fianchi, il blocco perde una decina di pixel di altezza senza perdere leggibilità — il minimo
     resta sopra i 12 px, che è la soglia sotto la quale una scritta maiuscola diventa faticosa. */
  margin-top: clamp(10px, 0.9cqi, 15px);
  padding: clamp(8px, 0.55cqi, 11px) clamp(14px, 1.05cqi, 20px);
  border-radius: clamp(8px, 0.6cqi, 12px);
  background: var(--ahuxcore-b2b-button-bg, #ca450c);
  color: var(--ahuxcore-b2b-button-fg, #fff);
  font-size: clamp(12px, 0.32cqi + 8.6px, 13.5px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  /* La transizione è scritta qui perché il tema mette `transition: all` su tutti i link: «all» anima anche cose
     che non devono muoversi e con una durata che non è nostra. Dichiarando le due proprietà che cambiano davvero,
     il comportamento del passaggio del mouse è nostro e prevedibile. */
  transition: background-image 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
/* 1.17.5 — Il passaggio del mouse si deve vedere. Prima era `filter: brightness(1.07)`: schiarire di un 7% un rosso
   già acceso non si distingue, e il filtro agisce anche sulla scritta bianca, che si sporca. Qui si posa invece un
   velo scuro sopra il fondo (`background-image` sopra il `background-color`): scurisce qualunque colore scelto dal
   pannello, non tocca il testo, e non ha bisogno di un secondo colore da configurare. */
/* L'effetto vale dove c'è davvero un mouse. Su un telefono `:hover` scatta al tocco e ci **resta** finché non si
   tocca altrove: il pulsante rimarrebbe scurito e sollevato dopo il tap, come se fosse ancora premuto. */
@media (hover: hover) {
  .ahuxcore-b2b__button:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
    color: var(--ahuxcore-b2b-button-fg, #fff);
    box-shadow: 0 6px 16px rgba(4, 17, 31, 0.22);
    transform: translateY(-1px);
  }
}
/* Il fuoco da tastiera invece vale ovunque, e non è un «passaggio»: chi naviga così deve vedere dov'è. */
.ahuxcore-b2b__button:focus-visible {
  background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
  color: var(--ahuxcore-b2b-button-fg, #fff);
  box-shadow: 0 6px 16px rgba(4, 17, 31, 0.22);
}
/* Chi naviga da tastiera deve vedere dov'è: l'ombra da sola non basta, serve un contorno staccato dal pulsante. */
.ahuxcore-b2b__button:focus-visible {
  outline: 2px solid var(--ahuxcore-b2b-fg, #04111f);
  outline-offset: 2px;
}
/* Chi ha chiesto meno animazioni al sistema operativo vede il velo, non il movimento. */
@media (prefers-reduced-motion: reduce) {
  .ahuxcore-b2b__button { transition: none; }
  .ahuxcore-b2b__button:hover,
  .ahuxcore-b2b__button:focus-visible { transform: none; }
}
.ahuxcore-b2b__arrow { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
/* L'immagine: ancorata in basso a destra della card e larga una fetta di essa. L'altezza non è scritta da nessuna
   parte — la decide la proporzione del file — e quello che non ci sta dentro la card esce dall'alto: è così che
   nasce l'intersezione, senza margini negativi. Non intercetta i clic, così il pulsante resta cliccabile. */
.ahuxcore-b2b__side {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 1.17.5 — Da 44% a 46%. La sovrapposizione sui loghi cresce per due strade che si sommano: la card è più bassa,
     quindi quello che avanza in alto è di più, e l'immagine è più larga, quindi — essendo la proporzione quella del
     file — è anche più alta. Nessuna altezza scritta a mano, come prima. Il 48% provato prima faceva arrivare il
     tetto del capannone a toccare il link «Tutti i brand»: la misura giusta è quella che riempie la fila dei loghi
     e si ferma lì, perché è sui loghi che la sovrapposizione deve vedersi, non sull'intestazione. */
  width: 46%;
  height: auto;
  /* 1.17.5 — Il tetto alla sovrapposizione, ed è qui che va messo: sull'**altezza**, non sulla larghezza. Quanto
     l'immagine può uscire dal bordo alto dipende da quanto spazio c'è sopra la card, cioè dalla fila dei loghi; se
     lo si governa tarando la larghezza per fascia di schermo si finisce a rincorrere: fra 1150 e 1200 px la card si
     abbassa mentre l'immagine cresce, e il tetto del capannone arrivava a coprire il collegamento «tutti i brand».
     Il 165% dell'altezza della card lascia sporgere poco meno di due terzi della card stessa — quanto basta a
     riempire la fila dei loghi — e vale a ogni larghezza senza altre eccezioni. Quando il tetto morde, `contain`
     tiene la proporzione e `right bottom` tiene l'immagine ancorata all'angolo, così non si deforma e non si stacca
     dal bordo. */
  max-height: 165%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  /* L'angolo basso segue quello della card, altrimenti la foto sporge di qualche pixel sullo smusso. */
  border-bottom-right-radius: clamp(14px, 1.3cqi, 22px);
}
@container ahuxcore-brands (min-width: 701px) {
  /* Lo spazio dove sale l'immagine resta libero: i loghi si fermano prima, così non le passa dietro nessun marchio.
     Le colonne della fila si ricalcolano da sole sulla larghezza che resta, perché sono una griglia. */
  .ahuxcore-brands-section--b2b-overlap .ahuxcore-brands:not(.ahuxcore-brands--rail) { padding-right: 23%; }
  /* Con la fila che scorre lo spazio si toglie al nastro intero, non alla lista: il padding non fermerebbe i
     loghi, che continuerebbero a scorrere sotto la foto. */
  .ahuxcore-brands-section--b2b-overlap .ahuxcore-brands-rail { margin-right: 19%; }
}
/* Senza sbordo l'immagine resta dentro la card, appoggiata al bordo basso. */
.ahuxcore-b2b:not(.ahuxcore-b2b--overlap) .ahuxcore-b2b__side {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  object-position: right bottom;
}
/* 1.17.4 — Quando la fascia si stringe, l'impaginazione **non cambia**: restano le due colonne del disegno, con i
   vantaggi a sinistra e il riquadro dell'area riservata a destra. Nella 1.17.3 sotto i 992 px i due blocchi si
   impilavano, e siccome il browser di Alessio lavora con lo zoom aumentato (una finestra da 1400 px vale poco più
   di 900 px di pagina) quella era la vista normale, non un caso limite: si vedeva un'impaginazione diversa da
   quella approvata. Quello che si stringe sono i contenuti — i vantaggi passano da quattro in fila a due per due e
   il peso delle due colonne si riequilibra — non la disposizione. */
@container ahuxcore-brands (max-width: 1200px) {
  .ahuxcore-solutions-band { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* La card si prende un po' più di spazio e la foto resta grande abbastanza da sbordare davvero: è l'incastro
     del disegno, e a queste larghezze sparirebbe per primo. */
  /* 1.17.5 — Qui l'immagine è **meno** larga che sopra i 1200, non di più. Sembra il contrario di quello che serve,
     e invece è la conseguenza di come nasce l'incastro: la card si stringe, il testo va su più righe, e una foto in
     proporzione grande diventa altissima e sale oltre la fila dei loghi fin dentro l'intestazione, coprendo il
     collegamento «tutti i brand». Al 44% il capannone riempie la fila dei loghi e si ferma lì, a ogni larghezza. */
  .ahuxcore-b2b--with-image .ahuxcore-b2b__card { padding-right: 47%; }
  .ahuxcore-b2b__side { width: 44%; }
  /* La foto qui è più larga in proporzione alla fascia, quindi lo spazio che le si riserva sopra cresce con lei. */
  .ahuxcore-brands-section--b2b-overlap .ahuxcore-brands:not(.ahuxcore-brands--rail) { padding-right: 28%; }
  .ahuxcore-brands-section--b2b-overlap .ahuxcore-brands-rail { margin-right: 24%; }
}
/* Solo su schermi davvero stretti — telefoni e tablet in verticale — le due colonne non stanno più affiancate:
   sotto i 700 px la card avrebbe meno di 300 px e il titolo ci finirebbe una parola per riga. Lì, e solo lì, la
   fascia si impila, lo sbordo sparisce e l'immagine entra nella griglia accanto al testo: è la riga a prendere
   l'altezza della più alta delle due, così la card si adatta da sola senza altezze scritte a mano. */
@container ahuxcore-brands (max-width: 700px) {
  .ahuxcore-solutions-band { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* 1.17.5 — Qui la fila dei marchi va **da bordo a bordo dello schermo**, non dentro la gabbia della pagina. Sul
     computer non si fa, perché una fascia che sfonda fra sezioni allineate sembra fuori contesto; sul telefono il
     motivo si rovescia: la fila non deve più lasciare libero l'angolo per l'immagine che sborda — lì l'incastro non
     c'è — e la gabbia le toglierebbe i due margini laterali, cioè quasi un logo intero di fila visibile. I margini
     negativi portano i bordi del nastro su quelli della finestra senza toccare il tema e senza spostare il resto
     della sezione, che resta allineato com'era. */
  .ahuxcore-brands-rail {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* La finestra, non un pixel di più: se una barra di scorrimento occupa spazio, `100vw` la conta e la pagina
       scorrerebbe di lato. */
    max-width: 100vw;
  }
  /* Impilati, i due riquadri non si toccano più: gli angoli tornano tondi da tutti e quattro i lati, altrimenti
     resterebbe il taglio dritto di un incastro che qui non c'è più. */
  .ahuxcore-solutions { border-radius: clamp(14px, 1.3cqi, 22px); }
  .ahuxcore-b2b__card { border-radius: clamp(14px, 1.3cqi, 22px); }
  .ahuxcore-b2b {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34%;
  }
  .ahuxcore-b2b__card {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .ahuxcore-b2b--with-image .ahuxcore-b2b__card { padding-right: 36%; }
  .ahuxcore-b2b__side {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 100%;
    max-height: none;
  }
}
/* 1.17.5 — Sul telefono il riquadro **non** impila testo e immagine: restano affiancati, il testo a sinistra e il
   capannone nella sua colonna a destra, esattamente come da 520 a 700 px. Prima l'immagine stava sotto il testo,
   appoggiata all'angolo, e alla sua sinistra restava un rettangolo vuoto alto quanto lei: su uno schermo da 390 px
   erano una sessantina di pixel di altezza regalati al nulla. Affiancate, le due parti si dividono la stessa riga e
   la card è alta quanto la più alta delle due, senza spazio sprecato e senza nessuna altezza scritta a mano.
   La colonna dell'immagine cresce dal 34% al 38%: più stretta di così, su un telefono, il capannone non si
   leggerebbe; più larga, al testo resterebbero meno di trenta caratteri per riga. */
@container ahuxcore-brands (max-width: 520px) {
  .ahuxcore-b2b { grid-template-columns: minmax(0, 1fr) 38%; }
  .ahuxcore-b2b--with-image .ahuxcore-b2b__card { padding-right: 41%; }
}
/* ------------------------------------------------------------------------- *
 * 1.17.3 — La fila dei marchi che scorre da sola
 *
 * Due righe di loghi fermi occupano molto spazio e mostrano sempre le stesse dodici marche; una riga sola che scorre
 * ne mostra quante se ne vogliono nello spazio di metà. Il nastro è fatto di due copie identiche della fila, messe
 * una accanto all'altra e spostate insieme: quando la prima è uscita del tutto, la seconda si trova esattamente
 * dov'era la prima all'inizio, e il giro riparte senza che si veda un salto o un vuoto.
 *
 * Non c'è JavaScript e non c'è nessuna misura calcolata nel browser: la durata del giro arriva dal server, ricavata
 * dal numero di loghi, e tutto il resto è animazione del foglio di stile. Il nastro si ferma quando il mouse gli sta
 * sopra o quando qualcosa dentro riceve il fuoco da tastiera — altrimenti non si riuscirebbe a cliccare un marchio —
 * e per chi ha chiesto al sistema operativo meno animazioni non parte affatto: resta una fila che si scorre a dito.
 * ------------------------------------------------------------------------- */
.ahuxcore-brands-rail {
  display: flex;
  /* Niente larghezza dichiarata: un blocco prende già lo spazio che resta, e con width 100% il margine che
     riserva il posto alla foto veniva sommato invece che sottratto, così i loghi le passavano dietro. */
  overflow: hidden;
  /* Il nastro entra ed esce sfumando, così non sembra tagliato di netto dal bordo della gabbia. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ahuxcore-brands.ahuxcore-brands--rail {
  display: flex;
  flex: 0 0 auto;
  gap: var(--ahuxcore-brand-gap, 12px);
  padding: 0 0 0 var(--ahuxcore-brand-gap, 12px);
  margin: 0;
  list-style: none;
  animation: ahuxcore-brands-scroll var(--ahuxcore-brands-seconds, 36s) linear infinite;
}
.ahuxcore-brands-rail--right .ahuxcore-brands--rail { animation-direction: reverse; }
.ahuxcore-brands--rail .ahuxcore-brands__item {
  flex: 0 0 clamp(140px, 11.5cqi, 200px);
}
.ahuxcore-brands-rail:hover .ahuxcore-brands--rail,
.ahuxcore-brands-rail:focus-within .ahuxcore-brands--rail { animation-play-state: paused; }
@keyframes ahuxcore-brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ahuxcore-brands-rail {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ahuxcore-brands-rail::-webkit-scrollbar { display: none; }
  .ahuxcore-brands.ahuxcore-brands--rail { animation: none; }
  /* La copia servirebbe solo all'animazione: ferma, raddoppierebbe i marchi sotto gli occhi di chi scorre. */
  .ahuxcore-brands--rail[aria-hidden="true"] { display: none; }
}

/* I vantaggi si riducono sullo spazio della loro colonna: quattro in fila finché ci stanno, poi due per due, e
   uno sotto l'altro solo quando la colonna è larga come un telefono. La fascia resta la stessa: cambia quante
   voci stanno su una riga, non dove stanno i blocchi. */
@container ahuxcore-solutions (max-width: 760px) {
  .ahuxcore-solutions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1.17.5 — Sul telefono i vantaggi vanno in colonna sola. La soglia era a 330 px, ma già a 390 ogni voce aveva poco
   più di 130 px e si spezzava in tre righe («o sconti / personalizzati»): lo stesso disordine che la 1.17.3 aveva
   sistemato sul computer. Portata a 430 px, ogni voce sta sulle sue due righe naturali. */
@container ahuxcore-solutions (max-width: 430px) {
  .ahuxcore-solutions__list { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------- *
 * 1.19.0 — Fascia «Iscriviti alla newsletter», sopra il footer
 *
 * Come nel disegno di riferimento: busta, titolo e sottotitolo a sinistra, campo e pulsante al centro, la frase
 * scritta a mano a destra. La fascia può andare da bordo a bordo (è l'attacco al footer, che è a tutta larghezza) o
 * stare nella gabbia delle altre sezioni; i contenuti stanno comunque nella gabbia.
 *
 * Da bordo a bordo si ottiene con un'ombra piena tagliata sopra e sotto, come la fascia SEO: un elemento largo
 * 100vw allargherebbe la pagina della larghezza della barra di scorrimento. Come si dispone lo decide lo spazio
 * della fascia (container query), non la finestra, così l'anteprima del pannello si comporta come il sito; e tutto
 * è deciso dal CSS al primo disegno.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "AhuxCore Caveat";
  src: url("/modules/advancedhomeuxcore/views/css/../fonts/caveat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  /* La frase è decorativa e sta in fondo alla pagina: se il carattere arriva tardi si vede prima con un corsivo
     di sistema, e la pagina non aspetta mai il file. */
  font-display: swap;
}
.ahuxcore-newsletter {
  --ahuxcore-nl-bg: #ca450c;
  --ahuxcore-nl-width: min(
    var(--ahuxcore-hero-contained-max, 1600px),
    calc(100vw - (var(--ahuxcore-hero-gutter-desktop, 20px) * 2))
  );
  position: relative;
  box-sizing: border-box;
  width: var(--ahuxcore-nl-width);
  max-width: none;
  margin: 0 calc((100% - var(--ahuxcore-nl-width)) / 2);
  padding: 0;
  background: var(--ahuxcore-nl-bg);
  color: #fff;
  container: ahuxcore-newsletter / inline-size;
}
@media (max-width: 767px) {
  .ahuxcore-newsletter {
    --ahuxcore-nl-width: calc(100vw - (var(--ahuxcore-hero-gutter-mobile, 15px) * 2));
  }
}
.ahuxcore-newsletter--full {
  box-shadow: 0 0 0 100vmax var(--ahuxcore-nl-bg);
  clip-path: inset(0 -100vmax);
}
/* Da bordo a bordo la fascia tocca il footer, come nel disegno: il tema lascia 50px sotto il contenitore della home,
   e li si toglie solo quando l'ultima cosa del contenitore è questa fascia. Dove :has() non esiste resta lo spazio.
   #wrapper serve a pareggiare il selettore del tema (custom.css: «#wrapper .tvcmscontainer-layout»). */
#wrapper .tvcmscontainer-layout:has(> .container > .ahuxcore-newsletter--full:last-child) {
  margin-bottom: 0;
}
.ahuxcore-newsletter--inset {
  border-radius: 16px;
  margin-bottom: 32px;
  overflow: hidden;
}
/* Nel pannello la fascia sta nel riquadro dell'anteprima: niente ombra che coprirebbe la pagina del back office. */
.ahuxcore-newsletter.ahuxcore-newsletter--in-panel {
  width: 100%;
  margin: 0;
  box-shadow: none;
  clip-path: none;
  border-radius: 12px;
}
.ahuxcore-newsletter [hidden] { display: none !important; }

.ahuxcore-newsletter__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "form form";
  align-items: center;
  gap: 14px 14px;
  padding: 18px 0 20px;
  font-family: inherit;
}
.ahuxcore-newsletter--inset .ahuxcore-newsletter__inner,
.ahuxcore-newsletter--in-panel .ahuxcore-newsletter__inner { padding-left: 16px; padding-right: 16px; }

.ahuxcore-newsletter__icon {
  grid-area: icon;
  display: block;
  width: 40px;
  height: 40px;
  color: #fff;
}
.ahuxcore-newsletter__copy { grid-area: copy; min-width: 0; }
.ahuxcore-newsletter .ahuxcore-newsletter__title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.ahuxcore-newsletter .ahuxcore-newsletter__text {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  line-height: 1.35;
}

.ahuxcore-newsletter__form { grid-area: form; min-width: 0; margin: 0; }
.ahuxcore-newsletter__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ahuxcore-newsletter__field { position: relative; flex: 1 1 auto; min-width: 0; }
.ahuxcore-newsletter__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Il CSS del tema dà ai campi e ai pulsanti misure, bordi e colori suoi, anche con !important: qui si usa lo stesso
   peso, limitato alla fascia, perché il campo e il pulsante siano quelli del disegno e non quelli del tema. */
.ahuxcore-newsletter .ahuxcore-newsletter__input {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 16px !important; /* sotto i 16px Safari su iPhone e iPad ingrandisce la pagina quando si tocca il campo */
  line-height: 44px;
  box-shadow: none !important;
  outline: none;
}
.ahuxcore-newsletter .ahuxcore-newsletter__input::placeholder { color: #8a8a8a; opacity: 1; }
.ahuxcore-newsletter .ahuxcore-newsletter__input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.ahuxcore-newsletter .ahuxcore-newsletter__input[aria-invalid="true"] { border-color: #fff !important; }
.ahuxcore-newsletter .ahuxcore-newsletter__button {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 46px !important;
  min-width: 108px;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--ahuxcore-nl-bg) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .02em;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ahuxcore-newsletter .ahuxcore-newsletter__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ahuxcore-newsletter .ahuxcore-newsletter__button[disabled] { opacity: .75; cursor: progress; }
/* Il passaggio del mouse solo dove un mouse c'è: su un telefono :hover scatta al tocco e ci resta. */
@media (hover: hover) {
  .ahuxcore-newsletter .ahuxcore-newsletter__button:hover {
    background: #fff4ee !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16) !important;
    transform: translateY(-1px);
  }
}

/* Il fumetto dell'errore: sotto il campo, con la punta verso il campo, sopra a quello che c'è sotto. Non sposta
   niente: la fascia resta alta uguale. */
.ahuxcore-newsletter .ahuxcore-newsletter__bubble {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(100% + 8px);
  max-width: min(340px, 100%);
  margin: 0;
  padding: 7px 11px;
  border-radius: 6px;
  background: #fff;
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.ahuxcore-newsletter .ahuxcore-newsletter__bubble::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}
.ahuxcore-newsletter .ahuxcore-newsletter__note {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  line-height: 1.35;
}
.ahuxcore-newsletter .ahuxcore-newsletter__note a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap; /* se non ci sta, il link va a capo intero: mai «Informativa» da una parte e «privacy» dall'altra */
}
.ahuxcore-newsletter .ahuxcore-newsletter__gdpr {
  margin-top: 8px;
  color: #fff;
  font-size: 12px;
}
.ahuxcore-newsletter .ahuxcore-newsletter__gdpr a { color: #fff; text-decoration: underline; }
/* Fuori dalla vista ma non «display:none»: alcuni programmi saltano i campi nascosti così, e sono proprio quelli
   che la trappola deve prendere. */
.ahuxcore-newsletter__trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Iscrizione andata: il messaggio prende il posto del campo, alla stessa altezza. */
.ahuxcore-newsletter__form.is-done .ahuxcore-newsletter__row,
.ahuxcore-newsletter__form.is-done .ahuxcore-newsletter__note,
.ahuxcore-newsletter__form.is-done .ahuxcore-newsletter__gdpr { display: none; }
.ahuxcore-newsletter .ahuxcore-newsletter__done {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.ahuxcore-newsletter__done svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  color: var(--ahuxcore-nl-bg);
  box-sizing: border-box;
}

.ahuxcore-newsletter__signature { display: none; }

/* Tablet e computer stretti: una riga sola, senza la frase scritta a mano. È la disposizione del disegno per gli
   schermi medi. */
/* Telefoni stretti (320px): pulsante e margini interni più stretti, perché il testo d'esempio del campo stia intero. */
@container ahuxcore-newsletter (max-width: 359px) {
  .ahuxcore-newsletter .ahuxcore-newsletter__input { padding: 0 10px !important; }
  .ahuxcore-newsletter .ahuxcore-newsletter__button { min-width: 0; padding: 0 14px !important; }
}
@container ahuxcore-newsletter (min-width: 640px) {
  .ahuxcore-newsletter__inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(300px, 440px);
    grid-template-areas: "icon copy form";
    gap: 0 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .ahuxcore-newsletter--inset .ahuxcore-newsletter__inner,
  .ahuxcore-newsletter--in-panel .ahuxcore-newsletter__inner { padding-left: 24px; padding-right: 24px; }
  .ahuxcore-newsletter__icon { width: 46px; height: 46px; }
  .ahuxcore-newsletter .ahuxcore-newsletter__title { font-size: 19px; }
  .ahuxcore-newsletter .ahuxcore-newsletter__text { font-size: 14px; }
}

/* Computer: la disposizione completa del disegno. Il campo è trasparente con il bordo chiaro, il pulsante in
   maiuscolo, e a destra la frase scritta a mano su una fetta più chiara della fascia. */
@container ahuxcore-newsletter (min-width: 1100px) {
  .ahuxcore-newsletter__inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(360px, 480px);
    grid-template-areas: "icon copy form";
    gap: 0 28px;
    padding: 22px 0;
  }
  .ahuxcore-newsletter--signed .ahuxcore-newsletter__inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(360px, 480px) minmax(210px, 270px);
    grid-template-areas: "icon copy form sign";
  }
  .ahuxcore-newsletter--inset .ahuxcore-newsletter__inner,
  .ahuxcore-newsletter--in-panel .ahuxcore-newsletter__inner { padding-left: 40px; padding-right: 32px; }
  .ahuxcore-newsletter__icon { width: 58px; height: 58px; margin-left: 8px; }
  .ahuxcore-newsletter .ahuxcore-newsletter__title { font-size: 22px; }
  .ahuxcore-newsletter .ahuxcore-newsletter__text { margin-top: 4px; font-size: 14.5px; }
  .ahuxcore-newsletter .ahuxcore-newsletter__input {
    border-color: rgba(255, 255, 255, .8) !important;
    background: transparent !important;
    color: #fff !important;
  }
  .ahuxcore-newsletter .ahuxcore-newsletter__input::placeholder { color: rgba(255, 255, 255, .88); }
  .ahuxcore-newsletter .ahuxcore-newsletter__button {
    min-width: 130px;
    text-transform: uppercase !important;
    letter-spacing: .04em;
  }
  .ahuxcore-newsletter__signature {
    grid-area: sign;
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    color: #fff;
    font-family: "AhuxCore Caveat", "Segoe Script", "Bradley Hand", cursive;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.02;
    text-align: center;
    text-wrap: balance;
    transform: rotate(-7deg);
  }
  .ahuxcore-newsletter__swoosh {
    display: block;
    width: 96px;
    height: 22px;
    margin: 2px 6px 0 auto;
    color: #fff;
  }
  /* La fetta più chiara dietro la frase, con il bordo sinistro in diagonale come nel disegno; sfuma verso destra,
     così dove la fascia continua oltre la gabbia non si vede uno scalino. */
  .ahuxcore-newsletter--signed .ahuxcore-newsletter__inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 23%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 92%);
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }
}