/** Shopify CDN: Minification failed

Line 14653:0 Unexpected "`"
Line 14731:0 Unexpected "`"
Line 14732:2 Expected identifier but found "`"
Line 14733:2 Expected identifier but found "`"
Line 14734:2 Expected identifier but found "`"
Line 14735:2 Expected identifier but found "`"
Line 14736:2 Expected identifier but found "`"
Line 14737:2 Expected identifier but found "`"
Line 14738:2 Expected identifier but found "`"
Line 14739:2 Expected identifier but found "`"
... and 84 more hidden warnings

**/
:root {
  /* --- LUXURY IDENTITY GRADIENTS (Mega Menu v13) --- */
  --grad-night-blue: linear-gradient(135deg, #020c1b 0%, #051b35 50%, #1a3a5a 100%);
  --grad-antique-bronze: linear-gradient(135deg, #2d1b0e 0%, #4b3621 50%, #7a5c3e 100%);
  --grad-onyx-black: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #333333 100%);
  --grad-imperial-gold: linear-gradient(135deg, #8a6e2f 0%, #d4af37 50%, #f7e09a 100%);
  --grad-pearl-tech: linear-gradient(135deg, #d1d1d1 0%, #f4f4f4 50%, #ffffff 100%);

  --nutrienergy-brand-color: #597fba;
  --nutrienergy-text-color: #333;
  --nutrienergy-highlight-bg: #e6effa;
  --nutrienergy-spacing: 20px;

  /* Colore per i titoli (H1, H2, H3) */
  --nutrienergy-title-color: rgba(80, 80, 80, 1);
  /* Sfondo leggero tinto per i titoli */
  --nutrienergy-title-bg: rgba(80, 80, 80, 0.07);

  /* Colori Card Prodotto */
  --nutrienergy-product-border-color: #575e75;
  --nutrienergy-product-bg-light: #f5f5f5;
}

/* Contenitore principale */
.nutrienergy-intro-section {
  padding: 30px 0;
  background-color: #f9f9f9;
  border-top: 5px solid var(--nutrienergy-product-border-color);
  /* Bordo scuro */
}

.nutrienergy-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nutrienergy-spacing);
}

/* Stili Header */
.intro-header {
  text-align: center;
  margin-bottom: 25px;
}

/* Titolo H1 (Stile Evidenziato) */
.intro-header h1 {
  font-size: 24px;
  margin-bottom: 5px;
  line-height: 1.2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  /* Modificato per adattarsi al padding */
  flex-direction: column;
  align-items: center;
  /* Centra il contenuto */

  /* === Stile Evidenziato === */
  color: var(--nutrienergy-title-color) !important;
  background-color: var(--nutrienergy-title-bg) !important;
  padding: 10px 15px;
  border-radius: 6px;
}

/* Sottotitolo (annulla stile H1) */
.intro-subtitle {
  color: black;
  font-size: 16px;
  font-weight: normal;
  margin-top: 5px;
  /* === Annulla sfondo === */
  background-color: transparent !important;
  padding: 0 !important;
}

.slogan {
  font-size: 14px;
  color: var(--nutrienergy-text-color);
  font-weight: 500;
  margin-top: 15px;
  /* Aggiunto spazio dopo H1 */
}

.brand-highlight {
  color: var(--nutrienergy-product-border-color);
  /* Colore scuro */
  font-weight: 700;
}

/* --- Griglia Promesse Chiave (Responsiva) --- */

.key-promises-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Spazio tra box */
  margin-bottom: 20px;
}

/* Box promessa (stile card prodotto) */
.promise-item {
  background-color: #fff;
  border: 4px solid var(--nutrienergy-product-border-color);
  /* Bordo scuro */
  border-radius: 8px;
  padding: var(--nutrienergy-spacing);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  box-sizing: border-box;
  width: 100%;
}

.promise-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Titolo promessa (H3 - Stile Evidenziato) */
.promise-title {
  font-size: 1.3em;
  margin-top: 0;
  margin-bottom: 10px;

  /* === Stile Evidenziato === */
  color: var(--nutrienergy-title-color) !important;
  background-color: var(--nutrienergy-title-bg) !important;
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* Testo promessa (Stile normale) */
.promise-item p {
  margin-top: 5px;
}

.intro-header p.slogan {
  display: block !important;
}


/* Media Query per layout Desktop (Layout 1, 2 affiancati, 1) */
@media (min-width: 769px) {
  .key-promises-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    display: grid;
  }

  .promise-item:nth-child(1) {
    grid-column: 1 / -1;
  }

  .promise-item:nth-child(2) {
    grid-column: 1 / 2;
  }

  .promise-item:nth-child(3) {
    grid-column: 2 / 3;
  }

  .promise-item:nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* --- Stili specifici per l'icona degli omaggi (100px) --- */
.promise-icon-image {
  width: 100px;
  height: auto;
  float: left;
  margin-right: 15px;
  margin-bottom: 5px;
  border-radius: 5px;
  vertical-align: middle;
}

/* --- Vantaggi Esclusivi (Cashback) --- */
.welcome-benefits {
  background-color: var(--nutrienergy-product-bg-light) !important;
  /* Grigio chiaro prodotti */
  border-radius: 8px;
  padding: 25px;
  text-align: center;
}

/* Titolo H2 (Stile Evidenziato) */
.welcome-benefits h2 {
  font-size: 1.8em;
  margin-top: 0;
  margin-bottom: 15px;

  /* === Stile Evidenziato === */
  color: var(--nutrienergy-title-color) !important;
  background-color: var(--nutrienergy-title-bg) !important;
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-block;
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Elementi lista (Stile normale) */
.benefit-list li {
  margin-bottom: 8px;
  padding: 15px;
  font-size: 1.1em;
  background: white;
  border: 1px solid #eee;
  border-left: 5px solid var(--nutrienergy-product-border-color);
  /* Bordo scuro */
  border-radius: 6px;
}

/* Testo CTA (Stile normale) */
.cta-text {
  font-size: 1.1em;
  margin-top: 20px;
}

/* Stili Pulsante CTA (Generico) */
.button {
  display: inline-block;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 15px;
}

/* Pulsante Primario (usa stile pulsante prodotto) */
.primary-button {
  background-color: rgba(80, 80, 80, 1) !important;
  /* Grigio scuro prodotti */
  color: #ffffff !important;
  border: 1px solid rgba(100, 100, 100, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  font-weight: bold !important;
}

.primary-button:hover {
  background-color: rgba(60, 60, 60, 1) !important;
  border-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Stile per Icona SVG personalizzata (es. Regalo)
   ========================================================================== */
.promise-title-icon {
  /* Controlla la dimensione dell'icona (1em = grande come il testo) */
  width: 1em;
  height: 1em;
  /* Allinea l'icona verticalmente con il testo */
  vertical-align: -0.12em;
  margin-right: 0.3em;
  /* Assicura che l'icona prenda il colore del titolo (H1, H2, H3) */
  stroke: currentColor;
}

/* ==========================================================================
   OTTIMIZZAZIONE MOBILE (sotto 768px) - v2 (Allineato a sinistra)
   ========================================================================== */

@media (max-width: 768px) {

  /* 1. Riduci la dimensione del font H2 e H3 come richiesto */
  .promise-title {
    /* H3 */
    font-size: 1.1em !important;
  }

  .welcome-benefits h2 {
    /* H2 */
    font-size: 1.4em !important;
  }

  /* 2. Allinea il contenuto dei box a sinistra (più leggibile) */
  .promise-item,
  .welcome-benefits,
  .benefit-list li {
    text-align: left !important;
  }

  /* 3. Il testo CTA rimane allineato a sinistra (coerenza) */
  .cta-text {
    display: inline-block;
    /* Non più 'block' */
    text-align: left;
  }

  /* 4. Icona "Omaggi": Rimpiccioliscila e centrala, senza float */
  .promise-icon-image {
    float: none !important;
    display: block !important;
    width: 70px !important;
    /* Rimpicciolita */
    margin: 0 auto 15px auto !important;
    /* Centrata sopra il testo */
  }

  /* 5. Centra il testo *solo* nel paragrafo degli omaggi
     per allinearlo all'immagine centrata */
  .promise-item p:has(.promise-icon-image) {
    text-align: center !important;
  }

  /* 6. Pulsante CTA full-width */
  .primary-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   STILE HEADER UNIFICATO (v6 - Fix Definitivo Ricerca Mobile)
   ========================================================================== */

/* --- Stile di base per allineare tutti i pulsanti --- */
.header-actions--buttons .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
  border-radius: 6px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  height: auto;
  min-height: 48px;
  /* Altezza minima fissa per tutti */
  box-sizing: border-box;
}


/* --- 1. Stile "Account" (Solid - Grigio Scuro) --- */
.header-actions--buttons a[href*="account.nutrienergy.it"] {
  background: var(--blue-royal-card-text) !important;
  color: var(--blue-solid) !important;
  border: 2px solid var(--blue-solid) !important;
}

.header-actions--buttons a[href*="account.nutrienergy.it"]:hover {
  background-color: rgba(60, 60, 60, 1) !important;
  border-color: rgba(80, 80, 80, 1) !important;
  transform: translateY(-1px) !important;
}

/* Icone SVG Account (BIANCHE) */
.header-actions--buttons a[href*="account.nutrienergy.it"] .button__icon svg * {
  stroke: #5c462b !important;
  fill: #5c462b !important;
}

.header-actions--buttons a[href*="account.nutrienergy.it"] .button__icon svg path {
  fill: none !important;
}


/* --- 2. Stile "Carrello" (Outline - Sfondo Chiaro) --- */
.header-actions--buttons a[data-js-sidebar-handle],
.header-actions--buttons a[href="/cart"] {
  background: var(--blue-royal-card-text) !important;
  color: var(--blue-solid) !important;
  border: 2px solid var(--blue-solid) !important;
  box-shadow: none !important;
}

.header-actions--buttons a[data-js-sidebar-handle]:hover,
.header-actions--buttons a[href="/cart"]:hover {
  background-color: rgba(80, 80, 80, 0.05) !important;
  border-color: rgba(80, 80, 80, 1) !important;
}

/* Icone SVG Carrello (GRIGIO SCURO) */
.header-actions--buttons a[data-js-sidebar-handle] .button__icon svg *,
.header-actions--buttons a[href="/cart"] .button__icon svg * {
  stroke: #5c462b !important;
  fill: #5c462b !important;
}

.header-actions--buttons a[data-js-sidebar-handle] .button__icon svg path:not(.circle),
.header-actions--buttons a[href="/cart"] .button__icon svg path:not(.circle) {
  fill: none !important;
}

.header-actions--buttons a[data-js-sidebar-handle] span[data-header-cart-total],
.header-actions--buttons a[data-js-sidebar-handle] span[data-header-cart-count] {
  color: rgba(80, 80, 80, 1) !important;
}

/* --- 3. Stile e FIX "Ricerca" (Outline - Sfondo Chiaro) --- */
.header-actions--buttons .site-search-handle {
  background: linear-gradient(to bottom, #fffcf5, rgb(255, 255, 255)) !important;
  border: 2px solid var(--blue-solid) !important;
  color: rgba(80, 80, 80, 1) !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.header-actions--buttons .site-search-handle:hover {
  background-color: rgba(80, 80, 80, 0.05) !important;
  border-color: rgba(80, 80, 80, 1) !important;
}

.header-actions--buttons .site-search-handle .button__icon {
  display: none !important;
}

.header-actions--buttons .site-search-handle form {
  padding-left: 0 !important;
  width: 100%;
  display: flex !important;
  height: 100% !important;
}

.header-actions--buttons .site-search-handle form input[type="search"] {
  color: rgba(80, 80, 80, 1) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2 !important;
  width: 100% !important;
  height: 100% !important;
  font-weight: bold !important;
  font-size: inherit;
  line-height: inherit;
}

.header-actions--buttons .site-search-handle form input[type="search"]::placeholder {
  color: rgba(80, 80, 80, 1) !important;
  opacity: 0.7;
}

/* --- 4. Stile Mobile (coerenza) --- */
.mobile-menu-button svg g {
  fill: rgba(80, 80, 80, 1) !important;
}

.mobile-cart-button svg path {
  stroke: rgba(80, 80, 80, 1) !important;
}

.mobile-cart-button svg path.circle {
  fill: rgba(80, 80, 80, 1) !important;
  stroke: rgba(80, 80, 80, 1) !important;
}

.mobile-cart-button span[data-header-cart-count] {
  color: rgba(80, 80, 80, 1) !important;
  font-weight: bold;
  background-color: transparent !important;
}

/* ==================================================================
   --- 5. Stile Ricerca DENTRO IL MENU MOBILE (FIX Angoli e Colori) ---
   ================================================================== */

/* Selettore più specifico per il CONTENITORE della ricerca mobile */
div#site-menu-sidebar .site-search-handle {
  background-color: transparent !important;
  border: 2px solid rgba(80, 80, 80, 0.2) !important;
  /* Bordo desktop */
  color: rgba(80, 80, 80, 1) !important;
  /* Colore testo desktop */
  box-shadow: none !important;
  border-radius: 6px !important;
  /* Angoli desktop */
  padding: 0 1.25rem !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Stile per l'hover del contenitore */
div#site-menu-sidebar .site-search-handle:hover {
  background-color: rgba(80, 80, 80, 0.05) !important;
  border-color: rgba(80, 80, 80, 1) !important;
}

/* Nascondi icona */
div#site-menu-sidebar .site-search-handle .button__icon {
  display: none !important;
}

/* Stile per il FORM */
div#site-menu-sidebar .site-search-handle form {
  padding-left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
}

/* Selettore più specifico per l'INPUT */
div#site-menu-sidebar .site-search-handle input[type="search"] {
  color: rgba(80, 80, 80, 1) !important;
  /* Colore font */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  height: 100% !important;
  width: 100% !important;
  font-weight: bold !important;
  font-size: inherit !important;
  line-height: inherit !important;
  appearance: none !important;
  /* Rimuove stili nativi iOS */
  -webkit-appearance: none !M important;
  /* Rimuove stili nativi iOS */
  border-radius: 0 !important;
  /* Rimuove border-radius interno su iOS */
}

/* Selettore per il PLACEHOLDER */
div#site-menu-sidebar .site-search-handle input[type="search"]::placeholder {
  color: rgba(80, 80, 80, 1) !important;
  /* Colore placeholder */
  opacity: 0.7 !important;
}




input,
:before,
:after,
* {
  box-sizing: border-box;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  display: none;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type=search]::-ms-clear {
  display: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

button {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.hide,
.hidden {
  display: none;
}

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

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

*:focus:not(:focus-visible) {
  outline: none !important;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.gutter--small {
  padding: var(--gutter-small);
}

.gutter--regular {
  padding: var(--gutter-regular);
}

.gutter--large {
  padding: var(--gutter-large);
}

.gutter--xlarge {
  padding: var(--gutter-xlarge);
}

.gutter-top--small {
  padding-top: var(--gutter-small);
}

.gutter-top--regular {
  padding-top: var(--gutter-regular);
}

.gutter-top--large {
  padding-top: var(--gutter-large);
}

.gutter-top--xlarge {
  padding-top: var(--gutter-xlarge);
}

.gutter-bottom--small {
  padding-bottom: var(--gutter-small);
}

.gutter-bottom--regular {
  padding-bottom: var(--gutter-regular);
}

.gutter-bottom--large {
  padding-bottom: var(--gutter-large);
}

.gutter-bottom--xlarge {
  padding-bottom: var(--gutter-xlarge);
}

.spacing--xsmall>* {
  margin-bottom: 0.25em;
}

.spacing--xsmall>*.increased-spacing {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.spacing--small>* {
  margin-bottom: 0.5em;
}

.spacing--small>*.increased-spacing {
  margin-top: 1em;
  margin-bottom: 1em;
}

.spacing--large>* {
  margin-bottom: 0.75em;
}

.spacing--large>*.increased-spacing {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.spacing--xlarge>* {
  margin-bottom: 1em;
}

.spacing--xlarge>*.increased-spacing {
  margin-top: 2em;
  margin-bottom: 2em;
}

.panel,
.card {
  border: solid var(--border-width-cards) var(--color-borders-cards);
  border-radius: var(--border-radius-cards);
  overflow: hidden;
  background-color: var(--color-background-cards);
  position: relative;
  color: var(--color-text-cards);
  box-shadow: var(--shadow-x-cards) var(--shadow-y-cards) var(--shadow-blur-cards) var(--color-shadow-cards);
  margin-bottom: calc(var(--shadow-y-cards) + var(--shadow-blur-cards));
  margin-inline-end: calc(var(--shadow-x-cards) + var(--shadow-blur-cards));
}

.has-negative-shadow-x .panel,
.has-negative-shadow-x .card {
  margin-inline-end: 0;
  margin-inline-start: calc((var(--shadow-x-cards) * -1) + var(--shadow-blur-cards));
}

.has-negative-shadow-y .panel,
.has-negative-shadow-y .card {
  margin-bottom: 0;
  margin-top: calc((var(--shadow-y-cards) * -1) + var(--shadow-blur-cards));
}

.card .button {
  color: var(--color-text-cards);
}

.card .button--solid {
  background-color: var(--color-text-cards);
  border-color: var(--color-text-cards);
  color: var(--color-foreground-cards);
}

.card .button--icon svg * {
  stroke: var(--color-text-cards);
}

.no-touchevents .card .button:not(.button--outline-hover):hover {
  background-color: var(--color-accent-cards);
  border-color: var(--color-accent-cards);
  color: var(--color-foreground-accent-cards);
}

.no-touchevents .card .button:not(.button--outline-hover):hover svg * {
  stroke: var(--color-foreground-accent-cards);
}

.card .button--outline-hover:hover {
  border-color: var(--color-accent-cards);
  color: var(--color-accent-cards);
}

.card a {
  color: var(--color-text-cards);
}

.card .text-animation--underline {
  background-image: linear-gradient(to right, var(--color-text-cards), var(--color-text-cards));
}

@media screen and (max-width: 1023px) {

  .text-with-icon--tooltip .text-with-icon__label,
  .text-size--xsmall {
    font-size: calc(11px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  .text-with-icon--tooltip .text-with-icon__label,
  .text-size--xsmall {
    font-size: calc(12px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {
  .text-size--small {
    font-size: calc(12px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .text-size--small {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 474px) {

  input,
  textarea,
  select,
  .text-size--regular {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {

  input,
  textarea,
  select,
  .text-size--regular {
    font-size: calc(15px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  input,
  textarea,
  select,
  .text-size--regular {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  .shopify-challenge__container .shopify-challenge__message,
  .text-size--large {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  .shopify-challenge__container .shopify-challenge__message,
  .text-size--large {
    font-size: calc(18px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 474px) {
  .text-size--xlarge {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  .text-size--xlarge {
    font-size: calc(20px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .text-size--xlarge {
    font-size: calc(24px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {
  .text-size--heading {
    font-size: calc(38px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .text-size--heading {
    font-size: calc(42px / 60 * var(--base-headings-size) + 0px);
  }
}

.button--small {
  padding: var(--button-padding-small);
}

@media screen and (max-width: 474px) {
  .button--small {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  .button--small {
    font-size: calc(15px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .button--small {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

.button--regular {
  padding: var(--button-padding-regular);
}

@media screen and (max-width: 1023px) {
  .button--regular {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .button--regular {
    font-size: calc(18px / 16 * var(--base-body-size) + 0px);
  }
}

.button--large {
  padding: var(--button-padding-large);
}

@media screen and (max-width: 1023px) {
  .button--large {
    font-size: calc(18px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .button--large {
    font-size: calc(20px / 16 * var(--base-body-size) + 0px);
  }
}

.alert {
  display: inline-flex;
  padding: 0.875rem 1rem 0.75rem;
  margin-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  border-radius: var(--border-radius-forms);
  border: 1px solid;
  line-height: 1.1;
  clear: left;
  align-items: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-stack-headings);
  font-weight: var(--font-weight-headings);
  font-style: var(--font-style-headings);
  line-height: var(--base-headings-line);
  margin-bottom: 1rem;
}

@media screen and (max-width: 1023px) {

  h1,
  .h1 {
    font-size: calc(38px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h1,
  .h1 {
    font-size: calc(58px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h2,
  .h2 {
    font-size: calc(32px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h2,
  .h2 {
    font-size: calc(42px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h3,
  .h3 {
    font-size: calc(26px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h3,
  .h3 {
    font-size: calc(32px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h4,
  .h4 {
    font-size: calc(20px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h4,
  .h4 {
    font-size: calc(24px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h5,
  .h5 {
    font-size: calc(16px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h5,
  .h5 {
    font-size: calc(18px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h6,
  .h6 {
    font-size: calc(15px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h6,
  .h6 {
    font-size: calc(16px / 60 * var(--base-headings-size) + 0px);
  }
}

a {
  color: var(--color-text-main);
}

body,
input,
textarea,
select {
  font-family: var(--font-stack-body);
  font-weight: var(--font-weight-body);
  font-style: var(--font-style-body);
  line-height: var(--base-body-line);
}

body {
  background: var(--color-background-main);
  color: var(--color-text-main);
}

@media screen and (max-width: 474px) {
  body {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  body {
    font-size: calc(15px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  body {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

input,
textarea,
select {
  font-size: calc(16px / 16 * var(--base-body-size) + 0px);
}

.text-weight--bold {
  font-weight: var(--font-weight-body-bold);
}

.text-color--secondary {
  color: var(--color-secondary-text-main);
}

.text-color--opacity {
  opacity: 0.62;
}

.text-decoration--underline {
  text-decoration: underline;
}

.text-decoration--line-through {
  text-decoration: line-through;
}

.text-line-height--small {
  line-height: 1.1;
}

.text-line-height--medium {
  line-height: 1.25;
}

.text-style--italic {
  font-style: italic;
}

.text-style--normal {
  font-style: normal;
}

.text-align--left {
  text-align: start;
}

.text-align--center {
  text-align: center;
}

.text-align--right {
  text-align: end;
}

.text-animation--underline {
  background-image: linear-gradient(to right, var(--color-text-main), var(--color-text-main));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  display: inline;
  padding-bottom: 3px;
  transition: all 100ms linear;
}

html[dir=rtl] .text-animation--underline {
  background-position: right calc(1em + 3px);
}

html[dir=ltr] .text-animation--underline {
  background-position: left calc(1em + 3px);
}

.no-touchevents a:hover .text-animation--underline,
.no-touchevents button:hover .text-animation--underline {
  background-size: 100% 2px;
}

@media screen and (max-width: 1023px) {
  a .text-animation--underline.underline-mobile {
    background-size: 100% 2px;
  }
}

.text-animation--underline-thin {
  background-image: linear-gradient(to right, var(--color-text-main), var(--color-text-main));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  display: inline;
  padding-bottom: 3px;
  transition: all 100ms linear;
}

html[dir=rtl] .text-animation--underline-thin {
  background-position: right calc(1em + 2px);
}

html[dir=ltr] .text-animation--underline-thin {
  background-position: left calc(1em + 2px);
}

.no-touchevents a:hover .text-animation--underline-thin,
.no-touchevents button:hover .text-animation--underline-thin {
  background-size: 100% 1px;
}

@media screen and (max-width: 1023px) {
  a .text-animation--underline-thin.underline-mobile {
    background-size: 100% 1px;
  }
}

.text-animation--underline-in-header {
  background-image: linear-gradient(to right, var(--color-accent-header), var(--color-accent-header));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  display: inline;
  padding-bottom: 3px;
  transition: all 100ms linear;
}

html[dir=rtl] .text-animation--underline-in-header {
  background-position: right calc(1em + 2px);
}

html[dir=ltr] .text-animation--underline-in-header {
  background-position: left calc(1em + 2px);
}

.no-touchevents a:hover .text-animation--underline-in-header,
.no-touchevents button:hover .text-animation--underline-in-header {
  background-size: 100% 1px;
}

@media screen and (max-width: 1023px) {
  a .text-animation--underline-in-header.underline-mobile {
    background-size: 100% 1px;
  }
}

.text-with-icon {
  position: relative;
  color: var(--color-text-main);
  display: inline-flex;
  align-items: center;
  margin-inline-end: 1.25rem;
}

.text-with-icon svg * {
  fill: var(--color-text-main);
}

.text-with-icon .text-animation--underline-thin {
  background-position: 100% calc(1em + 4px);
  padding-bottom: 0;
}

.text-with-icon--compact {
  margin-inline-end: 1.875rem;
}

.text-with-icon--compact .text-with-icon__icon {
  margin-inline-end: 0.625rem;
}

.text-with-icon--tooltip {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-inline-end: 0.625rem;
}

.text-with-icon--tooltip .text-with-icon__label {
  position: absolute;
  top: -100%;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  background: var(--color-text-main);
  color: var(--color-background-main);
  padding: 0.0625rem 0.4375rem;
  border-radius: clamp(0px, var(--border-radius-buttons), 5px);
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
}

.text-with-icon--tooltip .text-with-icon__label:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: var(--color-text-main);
  border-width: 0.3125rem;
  margin-inline-start: -0.3125rem;
}

.text-with-icon--tooltip:hover .text-with-icon__label {
  opacity: 1;
}

.text-with-icon__icon {
  display: flex;
  align-items: center;
  margin-inline-end: 0.5rem;
}

.text-with-icon--small svg {
  width: 1.375rem;
  height: 1.375rem;
}

.text-with-icon--large svg {
  width: 2rem;
  height: 2rem;
}

#main a.text-link,
.rte a {
  color: var(--color-text-main);
  border-bottom: 1px solid;
  padding-bottom: 1px;
  transition: all 100ms linear;
}

.no-touchevents #main a.text-link:hover,
.no-touchevents .rte a:hover {
  color: var(--color-accent-main);
}

a.text-link {
  border-bottom: 1px solid;
  padding-bottom: 1px;
  transition: all 100ms linear;
}

.no-touchevents a.text-color--opacity:hover {
  opacity: 1;
}

.text-link--has-icon {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gutter-small);
}

.text-link--has-icon svg path {
  fill: var(--color-text-main);
}

.text-link--has-icon span {
  border-bottom: solid 1px;
}

del {
  text-decoration: line-through;
  opacity: 0.62;
}

strong {
  font-weight: var(--font-weight-body-bold);
}

em {
  font-style: italic;
}

p {
  margin-bottom: 1rem;
}

.rte ul,
.rte ol {
  margin-top: 0.75rem;
  margin-bottom: 1em;
  margin-inline-start: 2em;
}

.rte ul li:not(:first-child),
.rte ol li:not(:first-child) {
  margin-top: 0.75rem;
}

.rte ul ul,
.rte ul ol,
.rte ol ul,
.rte ol ol {
  margin-inline-start: 2em;
}

.rte ul {
  list-style: disc outside;
}

.rte ul ul {
  list-style: circle outside;
}

.rte ul ul ul {
  list-style: square outside;
}

.rte ol {
  list-style: decimal outside;
}

.rte blockquote {
  padding: 0.75rem 1.125rem;
  border-left: 0.1875rem solid var(--color-borders-main);
}

.rte blockquote:not(:first-child) {
  margin-top: 1.5rem;
}

.rte blockquote:not(:last-child) {
  margin-bottom: 1.5rem;
}

.rte img {
  max-width: 100%;
  height: auto;
}

iframe[src*=youtube],
iframe[src*=vimeo] {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.remove-line-height-space {
  margin-bottom: calc(1em * var(--base-body-line) / -2 + 0.3125rem);
}

.remove-line-height-space--small {
  margin-bottom: calc(1em * 1.1 / -2);
}

.remove-line-height-space--medium {
  margin-bottom: calc(1em * 1.25 / -2 + 0.3125rem);
}

.rte table {
  width: 100%;
  border: 1px solid var(--color-borders-main);
}

html[dir=rtl] .rte table {
  text-align: right;
}

html[dir=ltr] .rte table {
  text-align: left;
}

.rte table tr {
  border-top: 1px solid var(--color-borders-main);
}

.rte table thead tr {
  border-top: none;
}

.rte table th,
.rte table td {
  min-height: 41px;
  padding: 10px 14px 8px;
}

html[dir=rtl] .rte table th,
html[dir=rtl] .rte table td {
  border-left: 1px solid var(--color-borders-main);
}

html[dir=ltr] .rte table th,
html[dir=ltr] .rte table td {
  border-right: 1px solid var(--color-borders-main);
}

.rte table td,
.rte table th {
  vertical-align: top;
}

.jdgm-widget select {
  background-image: none !important;
}

.container--small {
  margin: 0 auto;
  width: 100%;
  max-width: 667px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

.container--compact {
  margin: 0 auto;
  width: 100%;
  max-width: 867px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

.container--medium {
  margin: 0 auto;
  width: 100%;
  max-width: 1023px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

.container--large {
  margin: 0 auto;
  width: 100%;
  max-width: 1360px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

@media screen and (max-width: 1360px) {
  .container--large-with-mobile-padding {
    padding-inline-start: var(--gutter-xlarge);
    padding-inline-end: var(--gutter-xlarge);
  }
}

.container--fullwidth {
  max-width: 100%;
  padding: 0;
}

.container--vertical-space {
  margin-top: var(--container-vertical-space);
}

.container--vertical-space-small {
  margin-top: clamp(2.5rem, var(--container-vertical-space), 5rem);
}

.container--vertical-space-xsmall {
  margin-top: calc(var(--container-vertical-space) * 0.5);
}

.container--no-margin-if-not-first:not(:first-of-type) {
  margin-top: 0;
}

.container--remove-bottom-margin {
  margin-bottom: calc(var(--container-vertical-space) * -0.5);
}

.shopify-section:last-child .container--fullwidth,
.shopify-section:last-child .container--has-background {
  margin-bottom: calc(var(--container-vertical-space) * -1);
}

.mount-slideshow:last-child .css-slider--bottom-navigation .css-slider-navigation-container {
  margin-bottom: -0.75rem;
}

#main .shopify-section:first-child .container--vertical-space:not(.container--fullwidth) {
  margin-top: clamp(24px, calc(var(--container-vertical-space) / 2), 50px);
}

#main .shopify-section:first-child .container--fullwidth {
  margin-top: 0;
}

.container--remove-margin-after+.container--remove-margin-before {
  margin-top: 0;
}

.section--remove-bottom-margin-after+.shopify-section>.container--vertical-space:first-of-type {
  margin-top: 0;
}

.container--negative-margin {
  margin-bottom: calc(var(--container-vertical-space) * -1);
}

.shopify-section {
  position: relative;
}

.container--has-background {
  padding-top: var(--container-vertical-space);
  padding-bottom: var(--container-vertical-space);
  /*	&:after {
  		content: "";
  		background-color: var(--color-background-section);
  		z-index: -1;
  		@extend %absolute-fill;
  	}*/
}

@media screen and (max-width: 767px) {
  .container--has-background {
    padding-top: calc(var(--container-vertical-space) / 2);
    padding-bottom: calc(var(--container-vertical-space) / 2);
  }
}

.remove-empty-space>*:empty {
  display: none;
}

.remove-empty-space>*:first-child {
  margin-top: 0;
}

.remove-empty-space>*:last-child {
  margin-bottom: 0;
}

.gutter-bottom--page {
  margin-bottom: calc(var(--gutter-large) * .8);
}

.margin-bottom--regular {
  margin-bottom: var(--gutter-regular);
}

.margin-bottom--large {
  margin-bottom: var(--gutter-large);
}

.margin-top--regular {
  margin-top: var(--gutter-regular);
}

.align-content {
  display: flex;
  height: 100%;
  position: relative;
}

.align-content--horizontal-left {
  justify-content: flex-start;
  text-align: start;
}

.align-content--horizontal-center {
  justify-content: center;
  text-align: center;
}

.align-content--horizontal-right {
  justify-content: flex-end;
  text-align: end;
}

.align-content--vertical-top {
  align-items: flex-start;
}

.align-content--vertical-middle {
  align-items: center;
}

.align-content--vertical-bottom {
  align-items: flex-end;
}

.element--wrap-paranth:before {
  content: " (";
  white-space: pre;
}

.element--wrap-paranth:after {
  content: ") ";
  white-space: pre;
}

.element--height-small {
  min-height: 40vh;
}

.element--height-regular {
  min-height: 60vh;
}

.element--height-large {
  min-height: 80vh;
}

.element--body-bgc {
  background-color: var(--color-background-main);
}

.element--card-bgc {
  background-color: var(--color-background-cards);
}

.element--has-border {
  border-radius: 12px;
  border: 2px solid var(--blue-solid) !important;
  border-style: solid;
}

.element--has-border--body {
  border-color: var(--color-borders-main);
  border-width: var(--border-width-cards);
  border-style: solid;
}

.element--has-shadow {
  box-shadow: var(--shadow-x-cards) var(--shadow-y-cards) var(--shadow-blur-cards) var(--color-shadow-cards);
  margin-bottom: var(--shadow-y-cards);
  margin-inline-end: var(--shadow-x-cards);
}

.has-negative-shadow-x .element--has-shadow {
  margin-inline-end: 0;
  margin-inline-start: calc((var(--shadow-x-cards) * -1) + var(--shadow-blur-cards));
}

.has-negative-shadow-y .element--has-shadow {
  margin-bottom: 0;
  margin-top: calc((var(--shadow-y-cards) * -1) + var(--shadow-blur-cards));
}

.element--has-border-thin {
  border-width: 1px;
}

.element--no-border {
  border: 0;
}

@media screen and (max-width: 767px) {
  .element--no-border-on-small {
    border: 0;
  }
}

.element--border-radius {
  border-radius: var(--border-radius-cards);
  overflow: hidden;
}

.element--border-radius .lazy-image:before,
.element--border-radius .lazy-image:after {
  border-radius: var(--border-radius-cards);
}

.element--border-radius img {
  border-radius: var(--border-radius-cards);
}

.element--border-radius-top {
  border-radius: var(--border-radius-cards) var(--border-radius-cards) 0 0;
}

.element--border-radius-top .lazy-image:before,
.element--border-radius-top .lazy-image:after {
  border-radius: var(--border-radius-cards) 0 0;
}

.element--border-radius-top img {
  border-radius: var(--border-radius-cards) var(--border-radius-cards) 0 0;
}

.element--border-width-clamped {
  border-style: solid;
  border-width: clamp(0px, var(--border-width-cards), 1px);
}

.element--no-radius {
  border-radius: 0;
}

.element--is-inline-block {
  display: inline-block;
}

.element--display-none {
  display: none;
}

@media screen and (max-width: 767px) {
  .element--hide-on-small {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .element--hide-on-desk {
    display: none;
  }
}

.element--align-self-center {
  align-self: center;
}

.element--z-1 {
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .element--is-sticky {
    position: sticky !important;
    top: var(--col-gap);
  }
}

.element--overflow-hidden {
  overflow: hidden;
}

.element--vertically-centered {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  width: 100%;
}

.shopify-policy__container {
  width: 100%;
  max-width: 1360px !important;
  padding-left: var(--gutter-container) !important;
  padding-right: var(--gutter-container) !important;
  margin-top: clamp(2.5rem, var(--container-vertical-space), 4.375rem) !important;
}

.shopify-policy__title {
  text-align: left !important;
}

.grid {
  --col-gap: var(--grid-gap);
  --col-size: calc((100% - var(--col-gap) * (var(--visible-cols) - 1)) / var(--visible-cols));
  display: grid;
  grid-gap: var(--col-gap);
}

.grid-1 {
  --visible-cols: 1;
}

.grid-2 {
  --visible-cols: 2;
}

.grid-3 {
  --visible-cols: 3;
}

.grid-4 {
  --visible-cols: 4;
}

.grid-5 {
  --visible-cols: 5;
}

.grid-6 {
  --visible-cols: 6;
}

@media screen and (max-width: 1280px) {
  .grid-laptop-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-6 {
    --visible-cols: 6;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-6 {
    --visible-cols: 6;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-6 {
    --visible-cols: 6;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-6 {
    --visible-cols: 6;
  }
}

.grid--slider {
  grid-auto-flow: column;
  grid-template-columns: var(--col-size);
  grid-auto-columns: var(--col-size);
  position: relative;
}

.grid--layout {
  grid-template-columns: repeat(var(--visible-cols), var(--col-size));
}

@media screen and (min-width: 1024px) {
  .grid--highlight-first-item {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid--highlight-first-item div:first-child {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 359px) {
  .grid-tiny-1:not(.kill-grid-tiny) {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 1280px) {
  .laptop-hide {
    display: none !important;
  }

  .laptop-show {
    display: block;
  }
}

@media screen and (max-width: 1023px) {
  .portable-hide {
    display: none !important;
  }

  .portable-show {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .lap-hide {
    display: none !important;
  }

  .lap-show {
    display: block;
  }
}

@media screen and (max-width: 474px) {
  .palm-hide {
    display: none !important;
  }

  .palm-show {
    display: block;
  }
}

.grid--gap-small {
  --col-gap: 18px;
}

.grid--gap-large {
  --col-gap: calc(var(--gutter-xlarge) * 0.6);
}

.grid--gap-xlarge {
  --col-gap: calc(var(--gutter-xlarge) * 0.8);
}

.grid--gap-none {
  --col-gap: 0px;
}

.grid--gap-bottom {
  row-gap: var(--gutter-xlarge);
}

.grid--no-stretch {
  align-items: start;
}

.grid--align-items-start {
  align-items: start;
}

.grid-offset-1 {
  grid-column-start: span 1;
}

.grid-offset-2 {
  grid-column-start: span 2;
}

.grid-offset-3 {
  grid-column-start: span 3;
}

.grid-offset-4 {
  grid-column-start: span 4;
}

.grid-offset-5 {
  grid-column-start: span 5;
}

.grid-offset-6 {
  grid-column-start: span 6;
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 1023px) {
  .portable--grid--slider {
    --col-gap: var(--grid-gap);
    --col-size: calc((100% - var(--col-gap) * (var(--visible-cols) - 1)) / var(--visible-cols)) !important;
    grid-auto-flow: column !important;
    grid-template-columns: var(--col-size) !important;
    grid-auto-columns: var(--col-size) !important;
  }

  .portable--grid--slider.grid-1 {
    --visible-cols: 1;
  }
}

:root {
  --gutter-small: 15px;
  --gutter-regular: 25px;
  --gutter-large: 50px;
  --gutter-xlarge: 80px;
  --gutter-container: 40px;
  --sidebar-width: 420px;
  --sidebar-gutter: 40px;
  --full-height: 100vh;
  --button-padding-large: 0.9375rem 2.875rem;
  --button-padding-regular: 0.6875rem 2.25rem;
  --button-padding-regular-unmodified: 0.6875rem 2.25rem;
  --button-padding-small: 0.5rem 1.625rem;
  --button-checkout-size: 48px;
  --input-padding: 0.75rem;
  --button-product: 3.75rem;
  --button-checkout-product-size: 60px;
  --header-vertical-space: 30px;
  --container-vertical-space: var(--container-vertical-space-base);
  --grid-gap: var(--grid-gap-original-base);
}

@media screen and (max-width: 1280px) {
  :root {
    --gutter-small: 12px;
    --gutter-regular: 20px;
    --gutter-large: 35px;
    --gutter-xlarge: 60px;
    --container-vertical-space: calc(var(--container-vertical-space-base) * 0.8);
    --grid-gap: calc(var(--grid-gap-original-base) * 0.8);
  }
}

@media screen and (max-width: 1023px) {
  :root {
    --gutter-small: 9px;
    --gutter-regular: 15px;
    --gutter-large: 25px;
    --gutter-xlarge: 40px;
    --gutter-container: 30px;
    --button-padding-large: 0.75rem 2.5rem;
    --button-checkout-size: 46px;
    --sidebar-width: 375px;
    --sidebar-gutter: 20px;
    --header-vertical-space: 20px;
    --container-vertical-space: calc(var(--container-vertical-space-base) * 0.6);
    --grid-gap: calc(var(--grid-gap-original-base) * 0.5);
  }
}

@media screen and (max-width: 767px) {
  :root {
    --button-padding-large: 0.75rem 2rem;
    --button-padding-regular: 0.5rem 1.5rem;
    --button-padding-small: 0.375rem 0.875rem;
    --button-checkout-size: 40px;
    --input-padding: 0.5rem;
    --button-product: 3.125rem;
    --button-checkout-product-size: 50px;
    --gutter-container: 20px;
    --header-vertical-space: 15px;
  }
}

@media screen and (max-width: 474px) {
  :root {
    --sidebar-width: 100%;
    --sidebar-gutter: 15px;
    --gutter-container: 15px;
  }
}

.alert strong {
  text-transform: capitalize;
}

.alert a {
  text-decoration: underline;
}

.alert--error {
  background-color: #EFE3E3;
  border-color: #E1D2D2;
  color: #000;
}

.alert--success {
  background-color: #EEF3EB;
  border-color: #D8E1D2;
  color: #000;
}

.alert--blank {
  border-color: var(--color-borders-main);
}

.alert--note {
  background-color: var(--color-third-background-main);
  border-color: var(--color-borders-main);
  color: var(--color-text-main);
}

.alert--unstyled {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.alert--circle {
  line-height: 1;
}

.alert--circle:before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 100%;
  margin-inline-end: 0.625rem;
  position: relative;
  top: 0.125rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.alert--circle.alert--blank:before {
  border: 2px solid;
  opacity: 0.25;
}

.alert--circle.alert--note:before {
  border: 2px solid;
  opacity: 0.5;
}

.alert--circle.alert--success:before {
  background-color: #52C057;
}

.alert--circle.alert--error:before {
  background-color: #E56D6D;
}

.alert--circle.alert--circle-loading:before {
  animation: circle-bounce 0.4s linear infinite alternate;
}

.alert__icon {
  width: 1.3125rem;
  height: 1.3125rem;
  display: inline-flex;
  float: left;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  position: relative;
  top: 0;
  margin-inline-end: 0.75rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.alert__icon svg * {
  fill: #fff !important;
  stroke: none !important;
}

.alert--error .alert__icon {
  background-color: #E56D6D;
}

.alert--success .alert__icon {
  background-color: #52C057;
}

.card .alert {
  color: var(--color-text-cards);
}

.alert[onclick] {
  cursor: pointer;
}

.alert--wide {
  width: 100%;
  display: flex;
}

@keyframes circle-bounce {
  0% {
    border-width: 2px;
    opacity: 0.5;
  }

  100% {
    border-width: 4px;
    opacity: 0.25;
  }
}

.button {
  text-align: center;
  display: inline-block;
  border-style: solid;
  border-radius: var(--border-radius-buttons);
  border-width: var(--border-width-buttons);
  transition: all 100ms linear;
  font-weight: var(--font-weight-buttons);
  line-height: 1.25;
  cursor: pointer;
  border-width: var(--border-width-buttons);
  color: var(--color-text-main);
  box-shadow: var(--shadow-x-buttons) var(--shadow-y-buttons) var(--shadow-blur-buttons) var(--color-shadow-buttons);
  /*@include at-query($max, $palm) {
  	.card__text & {
  		width: 100%;
  	}
  }*/
}

.button--regular-mobile {
  padding: var(--button-padding-regular-unmodified);
}

.button--fullwidth {
  width: 100%;
}

.button--icon {
  align-items: center;
  display: inline-flex;
  position: relative;
  padding-inline-start: 3.3125rem;
}

.button--icon span {
  line-height: 1;
}

.button--icon .button__icon {
  width: 22px;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  pointer-events: none;
  align-items: center;
}

html[dir=rtl] .button--icon .button__icon {
  right: 1.25rem;
}

html[dir=ltr] .button--icon .button__icon {
  left: 1.25rem;
}

.button--icon svg {
  width: 22px;
  height: 100%;
}

.button--icon svg * {
  stroke: var(--color-text-main);
  transition: all 100ms linear;
}

.button--loader {
  position: relative;
}

.button--loader .button__preloader {
  position: absolute;
  margin: 0;
  width: 20px;
  height: 20px;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  display: none;
}

.button--loader .button__preloader-element {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  margin: auto;
}

html[dir=rtl] .button--loader .button__preloader-element {
  right: 0;
}

html[dir=ltr] .button--loader .button__preloader-element {
  left: 0;
}

.button--loader .button__preloader-element circle {
  stroke-dasharray: 150, 200;
  stroke-dashoffset: -10;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

.button--loader.button--outline circle {
  stroke: var(--color-text-main);
}

.button--loader.button--solid circle {
  stroke: var(--color-foreground-main);
}

.card .button--loader circle {
  stroke: var(--color-text-cards);
}

.button--loader.working {
  pointer-events: none;
}

.button--loader.working .button__text {
  opacity: 0;
}

.button--loader.working .button__preloader {
  display: block;
}

.button--outline {
  background-color: transparent;
}

.button--solid {
  background-color: var(--color-text-main);
  border-color: var(--color-text-main);
  color: var(--color-foreground-main);
}

.button--no-padding {
  padding: 0;
}

.no-touchevents .button:not(.button--outline-hover):hover {
  background-color: var(--color-accent-main);
  border-color: var(--color-accent-main);
  color: var(--color-foreground-accent-main);
}

.no-touchevents .button:not(.button--outline-hover):hover svg * {
  stroke: var(--color-foreground-accent-main);
}

.no-touchevents .button--outline-hover:not(.button--no-hover):hover {
  border-color: var(--color-accent-main);
  color: var(--color-accent-main);
}

.button:focus-visible {
  box-shadow: 0 0 0 3px var(--color-secondary-background-main);
}

.button--invisibile-trigger {
  display: block !important;
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  opacity: 0;
}

a.button__icon {
  padding-top: 1px;
}

.flex-buttons {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: calc(100% + 0.625rem);
  margin-inline-start: -0.3125rem;
  margin-top: 0.625rem !important;
}

.flex-buttons>* {
  margin: 0.625rem 0.3125rem 0;
  flex: auto;
  width: auto;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

.main-go-top {
  position: fixed;
  bottom: var(--gutter-regular);
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-radius: var(--border-radius-buttons);
  border-width: var(--border-width-buttons);
  border-color: var(--color-borders-main);
  background: var(--color-background-main);
  cursor: pointer;
  transform: translateY(200%);
  transition: 250ms linear transform;
}

html[dir=rtl] .main-go-top {
  left: var(--gutter-regular);
}

html[dir=ltr] .main-go-top {
  right: var(--gutter-regular);
}

.main-go-top__icon svg {
  transform: scaleY(-1);
  transform-origin: 0% 40%;
}

.main-go-top__icon path {
  fill: var(--color-text-main);
}

.main-go-top.show {
  transform: translateY(0);
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--border-radius-buttons);
  --shopify-accelerated-checkout-skeleton-background-color: var(--color-text-main);
}

shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-checkout-size);
}

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: var(--button-checkout-product-size);
}

.sidebar .additional-checkout-buttons {
  margin-top: 0.75rem !important;
}

@media screen and (max-width: 474px) {
  .sidebar .additional-checkout-buttons {
    margin-top: 0.5rem !important;
  }
}

.template-cart .additional-checkout-buttons {
  margin-top: 0 !important;
}

.card--no-sideborders {
  border-left: 0;
  border-right: 0;
}

.card--no-radius {
  border-radius: 0;
  --border-radius-cards: 0;
}

.card--no-shadow {
  box-shadow: none;
  margin: 0 !important;
}

.card--no-borders {
  border: 0;
}

.card--fullwidth {
  width: 100%;
}

.card__icon {
  width: 3.125rem;
  margin: 0 auto;
  background-color: var(--color-background-main);
  overflow: hidden;
  position: relative;
}

.card__icon a {
  width: 100%;
  height: 100%;
  display: block;
}

.card__icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

.card__icon svg path {
  stroke: black;
}

.card__icon-size--small {
  width: 120px;
  height: 120px;
}

.card__icon-size--regular {
  width: 160px;
  height: 160px;
}

.card__icon-size--large {
  width: 220px;
  height: 220px;
}

@media screen and (max-width: 1023px) {
  .card__icon-size--large {
    width: 160px;
    height: 160px;
  }
}

@media screen and (max-width: 474px) {
  .card__icon {
    width: 120px;
    height: 120px;
  }
}

.card__icon--is-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 50%;
  height: 50%;
}

.card__image {
  height: 0;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}

.card__image svg {
  background: rgba(0, 0, 0, 0.08);
}

.card__image--with-overlay:after {
  content: "";
  background: var(--color-background-cards);
  opacity: 0.36;
  border-radius: var(--border-radius-cards);
}

.card__text {
  z-index: 99;
  word-wrap: break-word;
  word-break: break-word;
}

.card__text>* {
  display: block;
}

@media screen and (max-width: 767px) {
  .card__text.gutter--xlarge {
    padding: var(--gutter-large);
  }
}

.card__text:empty {
  display: none;
}

.card__whole-link {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 9;
  cursor: pointer;
}

.card__whole-link:focus-visible {
  outline: none;
}

.card__whole-link:focus-visible .card__text {
  outline: auto 5px -webkit-focus-ring-color;
}

input,
textarea,
select {
  transition: all 100ms linear;
  background-color: var(--color-background-main);
  border: var(--border-width-forms) solid var(--color-borders-forms-primary);
  border-radius: var(--border-radius-forms);
  color: var(--color-text-main);
  resize: none;
  padding: var(--input-padding);
  vertical-align: middle;
  -webkit-appearance: none;
  outline: none !important;
  transition: all 100ms linear;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--color-text-main);
  opacity: 0.66;
  transition: all 100ms linear;
}

.no-touchevents input:hover,
input:focus,
.no-touchevents textarea:hover,
textarea:focus,
.no-touchevents select:hover,
select:focus {
  border-color: var(--color-borders-forms-secondary);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 0.1875rem var(--color-secondary-background-main);
}

.site-header-container input,
.site-header-container textarea,
.site-header-container select {
  color: var(--color-text-header);
  background: transparent;
}

textarea {
  height: 7.8125rem;
  line-height: 1.4;
  padding-top: 0.625rem;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

input[type=number] {
  -moz-appearance: textfield;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill:hover,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill:focus,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1.875rem var(--color-background-main) inset !important;
}

input[type=checkbox],
input[type=radio] {
  width: 20px;
  height: 20px;
}

input[type=checkbox]:not(.styled-checkbox) {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

input[type=radio]:not(.styled-radio) {
  -moz-appearance: radio;
  -webkit-appearance: radio;
  appearance: radio;
}

.styled-checkbox,
.styled-radio {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  position: relative;
}

.styled-checkbox::before,
.styled-radio::before {
  content: "";
  clip-path: polygon(86% 11%, 39% 67%, 12% 43%, 0% 57%, 40% 95%, 100% 22%);
  transform-origin: top left;
  background-color: var(--color-background-main);
  background-size: contain;
  width: 70%;
  height: 70%;
  transform: scale(0) translate(-50%, -50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform ease 250ms;
}

.styled-checkbox:checked,
.styled-radio:checked {
  background: var(--color-text-main);
}

.styled-checkbox:checked::before,
.styled-radio:checked::before {
  transform: scale(1) translate(-50%, -50%);
}

select {
  background-repeat: no-repeat;
  background-position: calc(100% - 1.5rem) center;
  background-size: 0.8125rem 0.5rem;
  padding: var(--input-padding);
  width: 100%;
  cursor: pointer;
  text-align: start;
  transition: border 100ms linear;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

html[dir=rtl] select {
  background-position: 1.25rem center;
}

html[dir=rtl] select {
  padding-left: 3.3125rem;
  padding-right: 1rem;
}

html[dir=ltr] select {
  padding-right: 3.3125rem;
  padding-left: 1rem;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.form-field label {
  display: block;
  margin-bottom: 0.375rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
}

.shopify-challenge__container {
  background-color: rgba(0, 0, 0, 0.01);
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  padding: var(--gutter-large) 0;
  margin-top: 100px !important;
}

.shopify-challenge__container .shopify-challenge__message {
  padding: var(--gutter-large) 0 var(--gutter-small);
}

.shopify-challenge__container input[type=submit] {
  background-color: var(--color-accent-main);
  border-color: var(--color-accent-main);
  color: var(--color-foreground-accent-main);
  margin-top: 1.25rem;
  cursor: pointer;
}

.form-row {
  width: 100%;
  display: block;
  padding-top: var(--gutter-small);
}

.form-row input {
  width: 100%;
}

.contact-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: var(--gutter-large) 0;
  gap: var(--gutter-regular);
}

@media screen and (max-width: 1023px) {
  .contact-form {
    grid-template-columns: 100%;
    gap: var(--gutter-xlarge);
  }
}

.contact-form__row label {
  padding-bottom: 0.25rem;
  display: inline-block;
}

.contact-form__row input:not([type=checkbox]) {
  width: 100%;
}

.contact-form__row textarea {
  width: 100%;
  height: 14.25rem;
}

.contact-form__row {
  padding-bottom: var(--gutter-small);
}

.contact-form__row--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-form__row--checkbox label {
  padding-bottom: 0;
}

.contact-form__row--checkbox:first-child:last-child {
  padding-bottom: 0;
}

.contact-form__info a {
  text-decoration: underline;
}

.lazy-image {
  position: relative;
  overflow: hidden;
}

.lazy-image:not(.lazy-image--no-transition):before,
.lazy-image:not(.lazy-image--no-transition):after {
  content: "";
  z-index: -1;
}

.lazy-image:not(.lazy-image--no-transition):before {
  background: var(--color-fourth-background-main);
}

.lazy-image:not(.lazy-image--no-transition):after {
  background: var(--color-secondary-background-main);
  animation: lazy-loading 5s infinite;
}

.lazy-image.lazy-image--animation.lazyloaded {
  overflow: hidden;
}

.lazy-image.lazy-image--animation.lazyloaded img {
  transform: scale(1);
  transition: transform 450ms ease-in-out, opacity 300ms linear;
}

.no-touchevents a:hover .lazy-image.lazy-image--animation.lazyloaded img {
  transform: scale(1.1);
  transition: transform 0.6s ease-out, opacity 300ms !important;
}

.lazy-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 300ms linear;
  vertical-align: bottom;
  position: relative;
  z-index: 9;
  opacity: 0;
}

.lazy-image.lazyloaded:before,
.lazy-image.lazyloaded:after {
  display: none;
}

.lazy-image.lazyloaded img {
  opacity: 1;
}

.lazy-image.lazy-image--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: 0;
  padding-top: 0 !important;
}

.lazy-image.lazy-image--background img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.lazy-image.lazy-image--fit img {
  object-fit: contain !important;
  padding: var(--image-fit-padding);
}

.lazy-image.lazy-image--fit.lazy-image--small img {
  padding: 5%;
}

.lazy-image[data-ratio] {
  height: 0;
}

.lazy-image[data-ratio] img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

html[dir=rtl] .lazy-image[data-ratio] img {
  right: 0;
}

html[dir=ltr] .lazy-image[data-ratio] img {
  left: 0;
}

@keyframes lazy-loading {
  0% {
    width: 0;
    left: 0;
  }

  50% {
    width: 100%;
    left: 0;
  }

  100% {
    left: 100%;
    width: 0;
  }
}

.onboarding-svg {
  position: relative;
  display: block;
  text-align: center;
  width: 100%;
}

.onboarding-svg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.svg-placeholder {
  display: block;
  font-size: 0;
  position: relative;
}

.svg-placeholder svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: var(--color-secondary-text-main);
  width: 80%;
  height: 80%;
}

.svg-placeholder--foreground {
  background: var(--color-secondary-background-main);
}

body.modal-opened,
body.sidebar-opened {
  overflow: hidden;
}

.main-content {
  position: relative;
}

.search-page-form form {
  display: flex;
  gap: var(--gutter-regular);
  flex-wrap: wrap;
}

.search-page-form form .site-search-handle {
  flex-grow: 1;
}

.search-page-form form input {
  width: 100%;
}

.search-page-form form svg path {
  fill: var(--color-text-main);
}

.search-title {
  font-weight: var(--font-weight-body);
}

.search-item.active {
  background-color: var(--color-third-background-main);
  outline: 0.625rem solid var(--color-third-background-main);
  border-radius: clamp(0px, var(--border-radius-cards), 1px);
}

.search-more.active {
  background-color: var(--color-accent-main) !important;
  color: var(--color-foreground-accent-main) !important;
  border-color: transparent !important;
}

.skip-to-content:focus {
  clip-path: none;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  color: var(--color-text-main);
  background-color: var(--color-background-main);
  position: fixed;
  padding: 10px;
  opacity: 1;
  z-index: 10000;
  transition: none;
  top: 0;
}

html[dir=rtl] .skip-to-content:focus {
  right: 0;
}

html[dir=ltr] .skip-to-content:focus {
  left: 0;
}

html[dir=rtl] .disclosure-has-popup[open]>summary:before {
  left: 0 !important;
}

.panel--no-sideborders {
  border-left: 0;
  border-right: 0;
}

.panel--no-radius {
  border-radius: 0;
}

.panel--no-borders {
  border: 0;
}

.show-more {
  position: relative;
  display: block;
  padding-bottom: var(--gutter-regular);
  --height: 200px;
}

@media screen and (max-width: 767px) {
  .show-more {
    padding-bottom: 1.875rem;
  }
}

@media screen and (max-width: 767px) {
  .facets__wrapper .show-more:not(.disabled) {
    padding-bottom: 2.5rem;
  }
}

.show-more--active-not-active {
  padding-bottom: 0;
}

.show-more_toggler {
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .facets__wrapper .show-more_toggler {
    top: calc(100% - 30px);
  }
}

.show-more_toggler.disabled {
  display: none;
}

.show-more_toggler.disabled+.show-more_panel {
  margin-bottom: 0;
}

.show-more_toggler.active+.show-more_panel:after {
  display: none;
}

.show-more_toggler:not(.init),
.show-more_toggler:not(.init)+.show-more_panel:after {
  visibility: hidden;
}

.show-more_panel {
  position: relative;
  z-index: 0;
  max-height: var(--height);
  overflow: hidden;
  transition: all ease 500ms;
}

.show-more_panel:after {
  display: inline-block;
  content: "";
  background: var(--color-background-main);
  background: linear-gradient(0deg, var(--color-background-main) 10%, var(--color-opacity-background-main) 100%);
  position: absolute;
  bottom: 0;
  display: inline-block;
  height: 1.25rem;
  width: 100%;
  z-index: 2;
}

html[dir=rtl] .show-more_panel:after {
  right: 0;
}

html[dir=ltr] .show-more_panel:after {
  left: 0;
}

.section-heading {
  color: var(--color-text-main);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.section-heading__title {
  margin-bottom: 10px;
  display: block;
}

.section-heading__subheading {
  display: inline-block;
  width: 100%;
}

.section-heading__text {
  padding-inline-end: 10%;
  word-break: break-word;
}

.section-heading__actions {
  flex-shrink: 0;
}

.section-heading--center {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.section-heading--center .section-heading__text {
  padding-inline-end: 0;
}

@media screen and (max-width: 767px) {
  .section-heading:not(.section-heading--single-line) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .section-heading:not(.section-heading--single-line) .section-heading__actions {
    margin-top: 0.625rem;
  }
}

.section-heading:empty {
  display: none;
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  margin-inline-start: -0.3125rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.3125rem;
  border: none;
}

.social-icons a .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons a .icon svg {
  height: 100%;
  width: 100%;
}

.card__image svg,
.card__image--background,
.card__image--with-overlay:after,
.lazy-image:not(.lazy-image--no-transition):before,
.lazy-image:not(.lazy-image--no-transition):after,
.svg-placeholder.svg-placeholder--background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

html[dir=rtl] .card__image svg,
.card__image html[dir=rtl] svg,
html[dir=rtl] .card__image--background,
html[dir=rtl] .card__image--with-overlay:after,
html[dir=rtl] .lazy-image:not(.lazy-image--no-transition):before,
html[dir=rtl] .lazy-image:not(.lazy-image--no-transition):after,
html[dir=rtl] .svg-placeholder.svg-placeholder--background {
  right: 0;
}

html[dir=ltr] .card__image svg,
.card__image html[dir=ltr] svg,
html[dir=ltr] .card__image--background,
html[dir=ltr] .card__image--with-overlay:after,
html[dir=ltr] .lazy-image:not(.lazy-image--no-transition):before,
html[dir=ltr] .lazy-image:not(.lazy-image--no-transition):after,
html[dir=ltr] .svg-placeholder.svg-placeholder--background {
  left: 0;
}

/* ==========================================================================
   SOLUZIONE FINALE: LAYOUT FLESSIBILE
   *** FIX: Pulsante Full-Width (Mobile+Desktop) e Grassetto ***
   ========================================================================== */

/* -------------------------------------------
   1. STILE GLOBALE CARD (Valido per Mobile e Desktop)
   ------------------------------------------- */
div.product-item.card {
  /* --- Stile Minimal --- */

  /* === BORDO MODIFICATO === */
  border: 4px solid #575e75 !important;
  /* Nuovo colore richiesto */

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;

  /* --- Reset di base --- */
  padding: 0 !important;

  /* Garantisce che la card possa allungarsi (necessario per il flex-grow) */
  height: 100% !important;
  display: flex !important;
  /* Forza il flex per gestire l'altezza 100% */
  flex-direction: column !important;
}


/* Immagine interna (riempimento) - Stile globale */
.product-item__image-figure,
.product-item__image-figure img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* === RIPRISTINO: 'contain' per non tagliare le immagini === */
  object-fit: contain !important;
}


/* -------------------------------------------
   2. STILI GLOBALI ELEMENTI INTERNI (Titolo, Prezzo, Pulsante)
   ------------------------------------------- */

/* Contenitore flex per testo (Titolo/Prezzo) */
div.product-item.card>div.card__text.product-item__text {
  display: flex !important;
  flex-direction: column !important;

  /* Assicura che questo blocco non si restringa */
  flex-shrink: 0 !important;

  /* === SFONDO CONTENITORE === */
  background-color: #f5f5f5 !important;
  /* Grigio chiaro neutro */
  border-radius: 6px !important;
  /* Arrotonda il contenitore */

  /* Padding unificato per mobile/desktop */
  padding: 0.5rem !important;

  /* === min-height (7 righe) === */
  line-height: 1.3em !important;
  /* Base di calcolo */
  min-height: 2.6em !important;
  /* 7 * 1.3em = 9.1em */
  justify-content: space-between !important;
  /* Distribuisce lo spazio */
}

/* Selettore +a> del titolo */
div.product-item.card .product-item__title {
  /* === REGOLA ORDINE === */
  order: 1 !important;
}

/* --- A. Titolo (Stile dello SPAN interno) --- */
div.product-item.card .product-item__title span {
  font-weight: bold !important;
  text-shadow: none !important;
  font-size: 0.9375rem !important;
  /* 15px */
  line-height: 1.3 !important;
  /* Mantenuto per coerenza interna */
  background-image: none !important;

  /* === MODIFICA: Stile "Glass Badge" Titolo === */
  background-color: #ebebeba6 !important;
  /* Sfondo Grigio Chiaro trasparente */
  color: #004a99 !important;
  /* Testo Blu Scuro (Suggerito) */
  border: 2px solid #b5b5b5 !important;
  /* Bordo grigio più scuro */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  /* Sfumatura 1px */

  padding: 3px 6px !important;
  display: inline-block !important;
  /* Per applicare padding */

  /* === MODIFICA BORDO (Globale) === */
  /* border-width: 2px !important; */
  /* Rimosso, già incluso in 'border:' */
  border-radius: 6px !important;
}

/* Rimuovi effetto al clic */
div.product-item.card .product-item__title:active {
  opacity: 1 !important;
  /* Previene cambio opacità al clic */
}


/* --- B. Prezzo --- */
div.product-item.card .product-item__price {
  font-size: 0.875rem !important;
  /* 14px */
  font-weight: bold !important;
  margin-bottom: 2px !important;

  /* === REGOLA ORDINE === */
  order: 3 !important;

  /* === MODIFICA: Stile "Glass Badge" Prezzo === */
  background-color: #ebebeba6 !important;
  /* Sfondo Grigio Chiaro trasparente */
  color: #445cb6 !important;
  /* Testo Rosso Scuro (Suggerito) */
  border: 2px solid #b5b5b5 !important;
  /* Bordo grigio più scuro */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  /* Sfumatura 1px */

  padding: 3px 6px !important;
  display: inline-block !important;
  /* Per "abbracciare" il testo */

  /* === MODIFICA BORDO (Globale) === */
  /* border-width: 2px !important; */
  /* Rimosso, già incluso in 'border:' */
  border-radius: 6px !important;
}

/* === MODIFICA: FIX PREZZO BARRATO NASCOSTO === */
div.product-item.card .product-price--original {
  display: inline-block !important;
}

div.product-item.card .product-price--compare {
  display: inline-block !important;
  margin-inline-start: 0.5rem !important;
  text-decoration: line-through !important;

  /* Adatta al badge chiaro */
  color: #222222 !important;
  opacity: 0.6 !important;
}

/* === FINE MODIFICA === */


/* --- C. Stile Descrizione --- */
div.product-item.card p.product-item__description {
  /* Font aggiornato (più piccolo) */
  font-size: 0.8125rem !important;
  /* 13px */
  font-weight: bold !important;
  /* Mantenuto grassetto */

  /* Stili aggiuntivi per coerenza */
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  text-align: inherit !important;
  /* Eredita l'allineamento (left/center) */

  /* === REGOLA ORDINE === */
  order: 2 !important;

  /* === MODIFICA: Stile "Glass Badge" Descrizione === */
  background-color: #ebebeba6 !important;
  /* Sfondo Grigio Chiaro trasparente */
  color: #060606 !important;
  /* Testo Verde Scuro (Suggerito) */
  border: 2px solid #b5b5b5 !important;
  /* Bordo grigio più scuro */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  /* Sfumatura 1px */

  padding: 3px 6px !important;
  display: inline-block !important;
  /* Per "abbracciare" il testo */

  /* === MODIFICA BORDO (Globale) === */
  /* border-width: 2px !important; */
  /* Rimosso, già incluso in 'border:' */
  border-radius: 6px !important;
}


/* --- C. Pulsante --- */
div.product-item.card .product-item__quick-buy .button--solid {
  background-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(100, 100, 100, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;

  /* === MODIFICHE PULSANTE (Full-width + Grassetto) === */
  display: block !important;
  /* Sostituisce inline-block */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-weight: bold !important;

  margin: 0 !important;
  padding: 10px 18px !important;
  font-size: 0.8125rem !important;
  /* 13px */
  transition: all 0.2s ease !important;
}

/* Hover Pulsante */
div.product-item.card .product-item__quick-buy .button--solid:hover {
  background-color: rgba(60, 60, 60, 1) !important;
  border-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Nasconde il contenitore dei badge (es. "-20%") */
div.product-item.card .product-item__badges {
  display: none !important;
}


/* ==========================================================================
   LAYOUT MOBILE: ORIZZONTALE (fino a 749px)
   ========================================================================== */
@media screen and (max-width: 749px) {



  /* === MODIFICA: Badge Full-Width (Mobile) === */
  div.product-item.card .product-item__title span,
  div.product-item.card .product-item__price,
  div.product-item.card p.product-item__description {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === FINE MODIFICA === */

  /* 1. Card Layout (Grid Orizzontale) */
  div.product-item.card {
    display: grid !important;
    grid-template-columns: 40% 1fr !important;
    grid-template-rows: 1fr auto !important;
    flex-direction: row !important;
    /* Sovrascrive il 'column' globale */
    height: auto !important;
    /* Sovrascrive 'height: 100%' globale */
    min-height: 200px !important;
    /* Diamo un'altezza minima per estetica */
  }

  /* 2. Blocco Immagine (Colonna 1) */
  div.product-item.card>a.card__image.product-item__image {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    padding-top: 0 !important;
    height: 90% !important;
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0 !important;
    flex-grow: 0 !important;
    /* Sovrascrive il 'flex-grow' globale */
  }

  /* 3. Blocco Testo (Titolo/Prezzo) (Colonna 2, Riga 1) */
  div.product-item.card>div.card__text.product-item__text {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    text-align: left !important;
    overflow: hidden !important;
    order: 0 !important;
    /* Resetta l'ordine desktop */
  }

  /* 4. Blocco Pulsante (Colonna 2, Riga 2) */
  div.product-item.card>div.product-item__text:has(div.product-item__quick-buy) {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    align-self: end !important;
    width: 100% !important;

    padding: 0.5rem 0.75rem 0.75rem 0.75rem !important;
    text-align: left !important;
    order: 0 !important;
    /* Resetta l'ordine desktop */
    margin-top: 0 !important;
    /* Resetta l'ordine desktop */
  }

  /* 5. Allineamento Testo Mobile */
  div.product-item.card .product-item__price,
  div.product-item.card .product-item__title {
    text-align: left !important;
  }

  /* 6. Regola immagine mobile (assicura 'contain') */
  @media screen and (max-width: 749px) {
    div.product-item.card .product-item__image-figure img {
      width: 80% !important;
      height: 80% !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      /* === RIPRISTINO: 'contain' per non tagliare le immagini === */
      object-fit: contain !important;

    }
  }
}


/* ==========================================================================
   LAYOUT DESKTOP: VERTICALE (da 750px in su)
   ========================================================================== */
@media screen and (min-width: 750px) {



  /* 1. Card Layout (Flex Verticale) */
  div.product-item.card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* LASCIARE 100% per allineamento griglia */

    /* === NUOVO MARGINE DESKTOP === */
    margin: 10px !important;
  }

  /* 2. Blocco Testo (Titolo/Prezzo) (Ordine 1) */
  div.product-item.card>div.card__text.product-item__text {
    order: 1 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 3. Blocco Immagine (Ordine 2) */
  /* === RIPRISTINO: Altezza flessibile per allineare le CARD === */
  div.product-item.card>a.card__image.product-item__image {
    order: 2 !important;
    position: relative !important;
    display: block !important;
    flex-shrink: 1 !important;
    /* RIPRISTINATO: Lascia che si rimpicciolisca */

    flex-grow: 1 !important;
    /* RIPRISTINATO: Falla riempire lo spazio restante */
    height: 1px !important;
    /* RIPRISTINATO: Hack per far funzionare flex-grow */

    padding-bottom: 0 !important;
    /* Rimuove 1:1 */

    overflow: hidden !important;
    grid-column: unset !important;
    grid-row: unset !important;
    min-height: 250px !important;
    /* RIPRISTINATO: Altezza minima */
  }

  /* Contenitore Figure (necessario per il posizionamento) */
  div.product-item.card .product-item__image-figure {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80% !important;
    height: 80% !important;

    /* === BORDO IMMAGINE (SOLO DESKTOP) === */
    padding: 0.5rem !important;
    /* Spazio tra bordo e immagine */
    box-sizing: border-box !important;
    /* Per includere padding */
  }

  /* Immagine interna (centrata e 100%) */
  div.product-item.card .product-item__image-figure img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 80% !important;
    height: 80% !important;

    /* === RIPRISTINO: 'contain' per non tagliare le immagini === */
    object-fit: contain !important;
  }

  /* 4. Blocco Pulsante (Ordine 3) */
  div.product-item.card>div.product-item__text:has(div.product-item__quick-buy) {
    order: 3 !important;
    margin-top: auto !important;
    /* SPINGE IL PULSANTE IN FONDO */
    text-align: center !important;
    flex-shrink: 0 !important;

    padding: 0.5rem !important;

    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 5. Allineamento Testo Desktop */
  div.product-item.card .product-item__price,
  div.product-item.card .product-item__title {
    text-align: center !important;
  }


  /* ==============================================================
     *** NUOVE REGOLE DESKTOP: Full-width e margini ridotti ***
     ============================================================== */

  /* Riduci i margini verticali tra i badge */
  div.product-item.card p.product-item__description {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }

  div.product-item.card .product-item__price {
    margin-bottom: 3px !important;
  }

  /* Forza i badge a prendere tutta la larghezza */
  div.product-item.card .product-item__title span,
  div.product-item.card .product-item__price,
  div.product-item.card p.product-item__description {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Importante per il padding */
  }

}




/* IL CODICE DA QUI IN POI NON SI TOCCA */
:root {
  --nutrienergy-brand-color: #597fba;
  --nutrienergy-text-color: #333;
  --nutrienergy-highlight-bg: #e6effa;
  --nutrienergy-spacing: 20px;
  --nutrienergy-secondary-button-color: rgba(80, 80, 80, 1);
}

/* Contenitore principale */
.nutrienergy-intro-section {
  /* RIDOTTO: Padding verticale della sezione principale */
  padding: 30px 0;
  background-color: #f9f9f9;
  border-top: 5px solid var(--nutrienergy-brand-color);
}

.nutrienergy-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nutrienergy-spacing);
}

.intro-subtitle {
  /* Sottotitolo: Nero, 16px, non grassetto */
  color: black;
  /* <-- Questo rende il testo nero */
  font-size: 16px;
  font-weight: normal;
  margin-top: 5px;
}

/* Stili Header */
.intro-header {
  text-align: center;
  /* RIDOTTO: Margine inferiore dopo l'intestazione */
  margin-bottom: 25px;
}

/* --- STILI H1 E SOTTOTITOLO (Mantenuti) --- */

.intro-header h1 {
  color: var(--nutrienergy-brand-color);
  font-size: 24px;
  margin-bottom: 5px;
  line-height: 1.2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.intro-subtitle {
  color: black;
  font-size: 16px;
  font-weight: normal;
  margin-top: 5px;
}

.slogan {
  font-size: 14px;
  color: var(--nutrienergy-text-color);
  font-weight: 500;
  margin-top: 0;
}

.brand-highlight {
  color: var(--nutrienergy-brand-color);
  font-weight: 700;
}

/* --- Griglia Promesse Chiave (Responsiva) --- */

.key-promises-grid {
  display: flex;
  flex-direction: column;
  /* MODIFICA: Spazio ridotto tra i riquadri (da 20px a 10px) */
  gap: 5px;
  /* Distanza ottimizzata */
  margin-bottom: 20px;
}

.promise-item {
  background-color: #fff;
  border: 1px solid #eee;
  padding: var(--nutrienergy-spacing);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.promise-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.promise-title {
  font-size: 1.3em;
  color: var(--nutrienergy-brand-color);
  margin-top: 0;
  margin-bottom: 10px;
}

/* Media Query per layout Desktop (Layout 1, 2 affiancati, 1) */
@media (min-width: 769px) {
  .key-promises-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    display: grid;
  }

  .promise-item:nth-child(1) {
    grid-column: 1 / -1;
  }

  .promise-item:nth-child(2) {
    grid-column: 1 / 2;
  }

  .promise-item:nth-child(3) {
    grid-column: 2 / 3;
  }

  .promise-item:nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* --- Stili specifici per l'icona degli omaggi (100px) --- */
.promise-icon-image {
  width: 100px;
  height: auto;
  /* MODIFICA FONDAMENTALE: Fa "galleggiare" l'immagine a sinistra */
  float: left;
  /* Aumentato il margine per dare più spazio tra immagine e testo */
  margin-right: 15px;
  /* Aggiungiamo un margine inferiore per staccarla dal testo che si avvolge sotto */
  margin-bottom: 5px;
  border-radius: 5px;
}

/* --- Vantaggi Esclusivi (Cashback) --- */
.welcome-benefits {
  background-color: var(--nutrienergy-highlight-bg);
  border-radius: 8px;
  /* RIDOTTO: Padding interno della sezione */
  padding: 25px;
  text-align: center;
}

.welcome-benefits h2 {
  color: var(--nutrienergy-brand-color);
  margin-top: 0;
  font-size: 1.8em;
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  /* RIDOTTO: Margine della lista */
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.benefit-list li {
  background: white;
  margin-bottom: 8px;
  /* RIDOTTO: Spazio tra gli elementi della lista */
  padding: 15px;
  border-radius: 6px;
  border-left: 5px solid var(--nutrienergy-brand-color);
  font-size: 1.1em;
}

.cta-text {
  font-size: 1.1em;
  margin-top: 20px;
  /* RIDOTTO: Margine prima della CTA */
}

/* Stili Pulsante CTA (Mantenuti) */
.button {
  display: inline-block;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 15px;
}

.primary-button {
  background-color: var(--nutrienergy-brand-color);
  color: white;
}

.primary-button:hover {
  background-color: #436398;
}

/* ... Altri stili promise-item (Mantenuti) ... */

/* Media Query per layout Desktop (schermi maggiori di 768px) - Layout 1, 2 affiancati, 1 */
@media (min-width: 769px) {
  .key-promises-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    display: grid;
    /* Importante: Ritorna a grid su desktop */
  }

  /* 1. Il primo riquadro occupa entrambe le colonne in alto */
  .promise-item:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* 2. Il secondo e 3. Il terzo riquadro occupano la seconda riga affiancati */
  .promise-item:nth-child(2) {
    grid-column: 1 / 2;
  }

  .promise-item:nth-child(3) {
    grid-column: 2 / 3;
  }

  /* 4. L'ultimo riquadro occupa entrambe le colonne nella terza riga (rettangolo) */
  .promise-item:nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* --- Stili specifici per l'icona degli omaggi (100px) --- */
.promise-icon-image {
  width: 100px;
  height: auto;
  vertical-align: middle;
  margin-right: 15px;
  border-radius: 5px;
}

/* ... Tutto il resto del CSS (Vantaggi Esclusivi, Pulsanti) è mantenuto ... */





input,
:before,
:after,
* {
  box-sizing: border-box;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  display: none;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type=search]::-ms-clear {
  display: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

button {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.hide,
.hidden {
  display: none;
}

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

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

*:focus:not(:focus-visible) {
  outline: none !important;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.gutter--small {
  padding: var(--gutter-small);
}

.gutter--regular {
  padding: var(--gutter-regular);
}

.gutter--large {
  padding: var(--gutter-large);
}

.gutter--xlarge {
  padding: var(--gutter-xlarge);
}

.gutter-top--small {
  padding-top: var(--gutter-small);
}

.gutter-top--regular {
  padding-top: var(--gutter-regular);
}

.gutter-top--large {
  padding-top: var(--gutter-large);
}

.gutter-top--xlarge {
  padding-top: var(--gutter-xlarge);
}

.gutter-bottom--small {
  padding-bottom: var(--gutter-small);
}

.gutter-bottom--regular {
  padding-bottom: var(--gutter-regular);
}

.gutter-bottom--large {
  padding-bottom: var(--gutter-large);
}

.gutter-bottom--xlarge {
  padding-bottom: var(--gutter-xlarge);
}

.spacing--xsmall>* {
  margin-bottom: 0.25em;
}

.spacing--xsmall>*.increased-spacing {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.spacing--small>* {
  margin-bottom: 0.5em;
}

.spacing--small>*.increased-spacing {
  margin-top: 1em;
  margin-bottom: 1em;
}

.spacing--large>* {
  margin-bottom: 0.75em;
}

.spacing--large>*.increased-spacing {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.spacing--xlarge>* {
  margin-bottom: 1em;
}

.spacing--xlarge>*.increased-spacing {
  margin-top: 2em;
  margin-bottom: 2em;
}

.panel,
.card {
  border: solid var(--border-width-cards) var(--color-borders-cards);
  border-radius: var(--border-radius-cards);
  overflow: hidden;
  background-color: var(--color-background-cards);
  position: relative;
  color: var(--color-text-cards);
  box-shadow: var(--shadow-x-cards) var(--shadow-y-cards) var(--shadow-blur-cards) var(--color-shadow-cards);
  margin-bottom: calc(var(--shadow-y-cards) + var(--shadow-blur-cards));
  margin-inline-end: calc(var(--shadow-x-cards) + var(--shadow-blur-cards));
}

.has-negative-shadow-x .panel,
.has-negative-shadow-x .card {
  margin-inline-end: 0;
  margin-inline-start: calc((var(--shadow-x-cards) * -1) + var(--shadow-blur-cards));
}

.has-negative-shadow-y .panel,
.has-negative-shadow-y .card {
  margin-bottom: 0;
  margin-top: calc((var(--shadow-y-cards) * -1) + var(--shadow-blur-cards));
}

.card .button {
  color: var(--color-text-cards);
}

.card .button--solid {
  background-color: var(--color-text-cards);
  border-color: var(--color-text-cards);
  color: var(--color-foreground-cards);
}

.card .button--icon svg * {
  stroke: var(--color-text-cards);
}

.no-touchevents .card .button:not(.button--outline-hover):hover {
  background-color: var(--color-accent-cards);
  border-color: var(--color-accent-cards);
  color: var(--color-foreground-accent-cards);
}

.no-touchevents .card .button:not(.button--outline-hover):hover svg * {
  stroke: var(--color-foreground-accent-cards);
}

.card .button--outline-hover:hover {
  border-color: var(--color-accent-cards);
  color: var(--color-accent-cards);
}

.card a {
  color: var(--color-text-cards);
}

.card .text-animation--underline {
  background-image: linear-gradient(to right, var(--color-text-cards), var(--color-text-cards));
}

@media screen and (max-width: 1023px) {

  .text-with-icon--tooltip .text-with-icon__label,
  .text-size--xsmall {
    font-size: calc(11px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  .text-with-icon--tooltip .text-with-icon__label,
  .text-size--xsmall {
    font-size: calc(12px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {
  .text-size--small {
    font-size: calc(12px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .text-size--small {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 474px) {

  input,
  textarea,
  select,
  .text-size--regular {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {

  input,
  textarea,
  select,
  .text-size--regular {
    font-size: calc(15px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  input,
  textarea,
  select,
  .text-size--regular {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  .shopify-challenge__container .shopify-challenge__message,
  .text-size--large {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  .shopify-challenge__container .shopify-challenge__message,
  .text-size--large {
    font-size: calc(18px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 474px) {
  .text-size--xlarge {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  .text-size--xlarge {
    font-size: calc(20px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .text-size--xlarge {
    font-size: calc(24px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {
  .text-size--heading {
    font-size: calc(38px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .text-size--heading {
    font-size: calc(42px / 60 * var(--base-headings-size) + 0px);
  }
}

.button--small {
  padding: var(--button-padding-small);
}

@media screen and (max-width: 474px) {
  .button--small {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  .button--small {
    font-size: calc(15px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .button--small {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

.button--regular {
  padding: var(--button-padding-regular);
}

@media screen and (max-width: 1023px) {
  .button--regular {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .button--regular {
    font-size: calc(18px / 16 * var(--base-body-size) + 0px);
  }
}

.button--large {
  padding: var(--button-padding-large);
}

@media screen and (max-width: 1023px) {
  .button--large {
    font-size: calc(18px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  .button--large {
    font-size: calc(20px / 16 * var(--base-body-size) + 0px);
  }
}

.alert {
  display: inline-flex;
  padding: 0.875rem 1rem 0.75rem;
  margin-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  border-radius: var(--border-radius-forms);
  border: 1px solid;
  line-height: 1.1;
  clear: left;
  align-items: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-stack-headings);
  font-weight: var(--font-weight-headings);
  font-style: var(--font-style-headings);
  line-height: var(--base-headings-line);
  margin-bottom: 1rem;
}

@media screen and (max-width: 1023px) {

  h1,
  .h1 {
    font-size: calc(38px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h1,
  .h1 {
    font-size: calc(58px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h2,
  .h2 {
    font-size: calc(32px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h2,
  .h2 {
    font-size: calc(42px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h3,
  .h3 {
    font-size: calc(26px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h3,
  .h3 {
    font-size: calc(32px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h4,
  .h4 {
    font-size: calc(20px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h4,
  .h4 {
    font-size: calc(24px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h5,
  .h5 {
    font-size: calc(16px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h5,
  .h5 {
    font-size: calc(18px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (max-width: 1023px) {

  h6,
  .h6 {
    font-size: calc(15px / 60 * var(--base-headings-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {

  h6,
  .h6 {
    font-size: calc(16px / 60 * var(--base-headings-size) + 0px);
  }
}

a {
  color: var(--color-text-main);
}

body,
input,
textarea,
select {
  font-family: var(--font-stack-body);
  font-weight: var(--font-weight-body);
  font-style: var(--font-style-body);
  line-height: var(--base-body-line);
}

body {
  background: var(--color-background-main);
  color: var(--color-text-main);
}

@media screen and (max-width: 474px) {
  body {
    font-size: calc(14px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 475px) and (max-width: 1023px) {
  body {
    font-size: calc(15px / 16 * var(--base-body-size) + 0px);
  }
}

@media screen and (min-width: 1024px) {
  body {
    font-size: calc(16px / 16 * var(--base-body-size) + 0px);
  }
}

input,
textarea,
select {
  font-size: calc(16px / 16 * var(--base-body-size) + 0px);
}

.text-weight--bold {
  font-weight: var(--font-weight-body-bold);
}

.text-color--secondary {
  color: var(--color-secondary-text-main);
}

.text-color--opacity {
  opacity: 0.62;
}

.text-decoration--underline {
  text-decoration: underline;
}

.text-decoration--line-through {
  text-decoration: line-through;
}

.text-line-height--small {
  line-height: 1.1;
}

.text-line-height--medium {
  line-height: 1.25;
}

.text-style--italic {
  font-style: italic;
}

.text-style--normal {
  font-style: normal;
}

.text-align--left {
  text-align: start;
}

.text-align--center {
  text-align: center;
}

.text-align--right {
  text-align: end;
}

.text-animation--underline {
  background-image: linear-gradient(to right, var(--color-text-main), var(--color-text-main));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  display: inline;
  padding-bottom: 3px;
  transition: all 100ms linear;
}

html[dir=rtl] .text-animation--underline {
  background-position: right calc(1em + 3px);
}

html[dir=ltr] .text-animation--underline {
  background-position: left calc(1em + 3px);
}

.no-touchevents a:hover .text-animation--underline,
.no-touchevents button:hover .text-animation--underline {
  background-size: 100% 2px;
}

@media screen and (max-width: 1023px) {
  a .text-animation--underline.underline-mobile {
    background-size: 100% 2px;
  }
}

.text-animation--underline-thin {
  background-image: linear-gradient(to right, var(--color-text-main), var(--color-text-main));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  display: inline;
  padding-bottom: 3px;
  transition: all 100ms linear;
}

html[dir=rtl] .text-animation--underline-thin {
  background-position: right calc(1em + 2px);
}

html[dir=ltr] .text-animation--underline-thin {
  background-position: left calc(1em + 2px);
}

.no-touchevents a:hover .text-animation--underline-thin,
.no-touchevents button:hover .text-animation--underline-thin {
  background-size: 100% 1px;
}

@media screen and (max-width: 1023px) {
  a .text-animation--underline-thin.underline-mobile {
    background-size: 100% 1px;
  }
}

.text-animation--underline-in-header {
  background-image: linear-gradient(to right, var(--color-accent-header), var(--color-accent-header));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  display: inline;
  padding-bottom: 3px;
  transition: all 100ms linear;
}

html[dir=rtl] .text-animation--underline-in-header {
  background-position: right calc(1em + 2px);
}

html[dir=ltr] .text-animation--underline-in-header {
  background-position: left calc(1em + 2px);
}

.no-touchevents a:hover .text-animation--underline-in-header,
.no-touchevents button:hover .text-animation--underline-in-header {
  background-size: 100% 1px;
}

@media screen and (max-width: 1023px) {
  a .text-animation--underline-in-header.underline-mobile {
    background-size: 100% 1px;
  }
}

.text-with-icon {
  position: relative;
  color: var(--color-text-main);
  display: inline-flex;
  align-items: center;
  margin-inline-end: 1.25rem;
}

.text-with-icon svg * {
  fill: var(--color-text-main);
}

.text-with-icon .text-animation--underline-thin {
  background-position: 100% calc(1em + 4px);
  padding-bottom: 0;
}

.text-with-icon--compact {
  margin-inline-end: 1.875rem;
}

.text-with-icon--compact .text-with-icon__icon {
  margin-inline-end: 0.625rem;
}

.text-with-icon--tooltip {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-inline-end: 0.625rem;
}

.text-with-icon--tooltip .text-with-icon__label {
  position: absolute;
  top: -100%;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  background: var(--color-text-main);
  color: var(--color-background-main);
  padding: 0.0625rem 0.4375rem;
  border-radius: clamp(0px, var(--border-radius-buttons), 5px);
  opacity: 0;
  transition: opacity 120ms linear;
  pointer-events: none;
}

.text-with-icon--tooltip .text-with-icon__label:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: var(--color-text-main);
  border-width: 0.3125rem;
  margin-inline-start: -0.3125rem;
}

.text-with-icon--tooltip:hover .text-with-icon__label {
  opacity: 1;
}

.text-with-icon__icon {
  display: flex;
  align-items: center;
  margin-inline-end: 0.5rem;
}

.text-with-icon--small svg {
  width: 1.375rem;
  height: 1.375rem;
}

.text-with-icon--large svg {
  width: 2rem;
  height: 2rem;
}

#main a.text-link,
.rte a {
  color: var(--color-text-main);
  border-bottom: 1px solid;
  padding-bottom: 1px;
  transition: all 100ms linear;
}

.no-touchevents #main a.text-link:hover,
.no-touchevents .rte a:hover {
  color: var(--color-accent-main);
}

a.text-link {
  border-bottom: 1px solid;
  padding-bottom: 1px;
  transition: all 100ms linear;
}

.no-touchevents a.text-color--opacity:hover {
  opacity: 1;
}

.text-link--has-icon {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gutter-small);
}

.text-link--has-icon svg path {
  fill: var(--color-text-main);
}

.text-link--has-icon span {
  border-bottom: solid 1px;
}

del {
  text-decoration: line-through;
  opacity: 0.62;
}

strong {
  font-weight: var(--font-weight-body-bold);
}

em {
  font-style: italic;
}

p {
  margin-bottom: 1rem;
}

.rte ul,
.rte ol {
  margin-top: 0.75rem;
  margin-bottom: 1em;
  margin-inline-start: 2em;
}

.rte ul li:not(:first-child),
.rte ol li:not(:first-child) {
  margin-top: 0.75rem;
}

.rte ul ul,
.rte ul ol,
.rte ol ul,
.rte ol ol {
  margin-inline-start: 2em;
}

.rte ul {
  list-style: disc outside;
}

.rte ul ul {
  list-style: circle outside;
}

.rte ul ul ul {
  list-style: square outside;
}

.rte ol {
  list-style: decimal outside;
}

.rte blockquote {
  padding: 0.75rem 1.125rem;
  border-left: 0.1875rem solid var(--color-borders-main);
}

.rte blockquote:not(:first-child) {
  margin-top: 1.5rem;
}

.rte blockquote:not(:last-child) {
  margin-bottom: 1.5rem;
}

.rte img {
  max-width: 100%;
  height: auto;
}

iframe[src*=youtube],
iframe[src*=vimeo] {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.remove-line-height-space {
  margin-bottom: calc(1em * var(--base-body-line) / -2 + 0.3125rem);
}

.remove-line-height-space--small {
  margin-bottom: calc(1em * 1.1 / -2);
}

.remove-line-height-space--medium {
  margin-bottom: calc(1em * 1.25 / -2 + 0.3125rem);
}

.rte table {
  width: 100%;
  border: 1px solid var(--color-borders-main);
}

html[dir=rtl] .rte table {
  text-align: right;
}

html[dir=ltr] .rte table {
  text-align: left;
}

.rte table tr {
  border-top: 1px solid var(--color-borders-main);
}

.rte table thead tr {
  border-top: none;
}

.rte table th,
.rte table td {
  min-height: 41px;
  padding: 10px 14px 8px;
}

html[dir=rtl] .rte table th,
html[dir=rtl] .rte table td {
  border-left: 1px solid var(--color-borders-main);
}

html[dir=ltr] .rte table th,
html[dir=ltr] .rte table td {
  border-right: 1px solid var(--color-borders-main);
}

.rte table td,
.rte table th {
  vertical-align: top;
}

.jdgm-widget select {
  background-image: none !important;
}

.container--small {
  margin: 0 auto;
  width: 100%;
  max-width: 667px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

.container--compact {
  margin: 0 auto;
  width: 100%;
  max-width: 867px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

.container--medium {
  margin: 0 auto;
  width: 100%;
  max-width: 1020px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

.container--large {
  margin: 0 auto;
  width: 100%;
  max-width: 1360px;
  padding-inline-start: var(--gutter-container);
  padding-inline-end: var(--gutter-container);
}

@media screen and (max-width: 1360px) {
  .container--large-with-mobile-padding {
    padding-inline-start: var(--gutter-xlarge);
    padding-inline-end: var(--gutter-xlarge);
  }
}

.container--fullwidth {
  max-width: 100%;
  padding: 0;
}

.container--vertical-space {
  margin-top: var(--container-vertical-space);
}

.container--vertical-space-small {
  margin-top: clamp(2.5rem, var(--container-vertical-space), 5rem);
}

.container--vertical-space-xsmall {
  margin-top: calc(var(--container-vertical-space) * 0.5);
}

.container--no-margin-if-not-first:not(:first-of-type) {
  margin-top: 0;
}

.container--remove-bottom-margin {
  margin-bottom: calc(var(--container-vertical-space) * -0.5);
}

.shopify-section:last-child .container--fullwidth,
.shopify-section:last-child .container--has-background {
  margin-bottom: calc(var(--container-vertical-space) * -1);
}

.mount-slideshow:last-child .css-slider--bottom-navigation .css-slider-navigation-container {
  margin-bottom: -0.75rem;
}

#main .shopify-section:first-child .container--vertical-space:not(.container--fullwidth) {
  margin-top: clamp(24px, calc(var(--container-vertical-space) / 2), 50px);
}

#main .shopify-section:first-child .container--fullwidth {
  margin-top: 0;
}

.container--remove-margin-after+.container--remove-margin-before {
  margin-top: 0;
}

.section--remove-bottom-margin-after+.shopify-section>.container--vertical-space:first-of-type {
  margin-top: 0;
}

.container--negative-margin {
  margin-bottom: calc(var(--container-vertical-space) * -1);
}

.shopify-section {
  position: relative;
}

.container--has-background {
  padding-top: var(--container-vertical-space);
  padding-bottom: var(--container-vertical-space);
  /*	&:after {
  		content: "";
  		background-color: var(--color-background-section);
  		z-index: -1;
  		@extend %absolute-fill;
  	}*/
}

@media screen and (max-width: 767px) {
  .container--has-background {
    padding-top: calc(var(--container-vertical-space) / 2);
    padding-bottom: calc(var(--container-vertical-space) / 2);
  }
}

.remove-empty-space>*:empty {
  display: none;
}

.remove-empty-space>*:first-child {
  margin-top: 0;
}

.remove-empty-space>*:last-child {
  margin-bottom: 0;
}

.gutter-bottom--page {
  margin-bottom: calc(var(--gutter-large) * .8);
}

.margin-bottom--regular {
  margin-bottom: var(--gutter-regular);
}

.margin-bottom--large {
  margin-bottom: var(--gutter-large);
}

.margin-top--regular {
  margin-top: var(--gutter-regular);
}

.align-content {
  display: flex;
  height: 100%;
  position: relative;
}

.align-content--horizontal-left {
  justify-content: flex-start;
  text-align: start;
}

.align-content--horizontal-center {
  justify-content: center;
  text-align: center;
}

.align-content--horizontal-right {
  justify-content: flex-end;
  text-align: end;
}

.align-content--vertical-top {
  align-items: flex-start;
}

.align-content--vertical-middle {
  align-items: center;
}

.align-content--vertical-bottom {
  align-items: flex-end;
}

.element--wrap-paranth:before {
  content: " (";
  white-space: pre;
}

.element--wrap-paranth:after {
  content: ") ";
  white-space: pre;
}

.element--height-small {
  min-height: 40vh;
}

.element--height-regular {
  min-height: 60vh;
}

.element--height-large {
  min-height: 80vh;
}

.element--body-bgc {
  background-color: var(--color-background-main);
}

.element--card-bgc {
  background-color: var(--color-background-cards);
}

.element--has-border {
  border-radius: 12px;
  border: 2px solid var(--blue-solid) !important;
  border-style: solid;
}

.element--has-border--body {
  border-color: var(--color-borders-main);
  border-width: var(--border-width-cards);
  border-style: solid;
}

.element--has-shadow {
  box-shadow: var(--shadow-x-cards) var(--shadow-y-cards) var(--shadow-blur-cards) var(--color-shadow-cards);
  margin-bottom: var(--shadow-y-cards);
  margin-inline-end: var(--shadow-x-cards);
}

.has-negative-shadow-x .element--has-shadow {
  margin-inline-end: 0;
  margin-inline-start: calc((var(--shadow-x-cards) * -1) + var(--shadow-blur-cards));
}

.has-negative-shadow-y .element--has-shadow {
  margin-bottom: 0;
  margin-top: calc((var(--shadow-y-cards) * -1) + var(--shadow-blur-cards));
}

.element--has-border-thin {
  border-width: 1px;
}

.element--no-border {
  border: 0;
}

@media screen and (max-width: 767px) {
  .element--no-border-on-small {
    border: 0;
  }
}

.element--border-radius {
  border-radius: var(--border-radius-cards);
  overflow: hidden;
}

.element--border-radius .lazy-image:before,
.element--border-radius .lazy-image:after {
  border-radius: var(--border-radius-cards);
}

.element--border-radius img {
  border-radius: var(--border-radius-cards);
}

.element--border-radius-top {
  border-radius: var(--border-radius-cards) var(--border-radius-cards) 0 0;
}

.element--border-radius-top .lazy-image:before,
.element--border-radius-top .lazy-image:after {
  border-radius: var(--border-radius-cards) 0 0;
}

.element--border-radius-top img {
  border-radius: var(--border-radius-cards) var(--border-radius-cards) 0 0;
}

.element--border-width-clamped {
  border-style: solid;
  border-width: clamp(0px, var(--border-width-cards), 1px);
}

.element--no-radius {
  border-radius: 0;
}

.element--is-inline-block {
  display: inline-block;
}

.element--display-none {
  display: none;
}

@media screen and (max-width: 767px) {
  .element--hide-on-small {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .element--hide-on-desk {
    display: none;
  }
}

.element--align-self-center {
  align-self: center;
}

.element--z-1 {
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .element--is-sticky {
    position: sticky !important;
    top: var(--col-gap);
  }
}

.element--overflow-hidden {
  overflow: hidden;
}

.element--vertically-centered {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  width: 100%;
}

.shopify-policy__container {
  width: 100%;
  max-width: 1360px !important;
  padding-left: var(--gutter-container) !important;
  padding-right: var(--gutter-container) !important;
  margin-top: clamp(2.5rem, var(--container-vertical-space), 4.375rem) !important;
}

.shopify-policy__title {
  text-align: left !important;
}

.grid {
  --col-gap: var(--grid-gap);
  --col-size: calc((100% - var(--col-gap) * (var(--visible-cols) - 1)) / var(--visible-cols));
  display: grid;
  grid-gap: var(--col-gap);
}

.grid-1 {
  --visible-cols: 1;
}

.grid-2 {
  --visible-cols: 2;
}

.grid-3 {
  --visible-cols: 3;
}

.grid-4 {
  --visible-cols: 4;
}

.grid-5 {
  --visible-cols: 5;
}

.grid-6 {
  --visible-cols: 6;
}

@media screen and (max-width: 1280px) {
  .grid-laptop-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 1280px) {
  .grid-laptop-6 {
    --visible-cols: 6;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 1023px) {
  .grid-portable-6 {
    --visible-cols: 6;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 767px) {
  .grid-lap-6 {
    --visible-cols: 6;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-1 {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-2 {
    --visible-cols: 2;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-3 {
    --visible-cols: 3;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-4 {
    --visible-cols: 4;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-5 {
    --visible-cols: 5;
  }
}

@media screen and (max-width: 474px) {
  .grid-palm-6 {
    --visible-cols: 6;
  }
}

.grid--slider {
  grid-auto-flow: column;
  grid-template-columns: var(--col-size);
  grid-auto-columns: var(--col-size);
  position: relative;
}

.grid--layout {
  grid-template-columns: repeat(var(--visible-cols), var(--col-size));
}

@media screen and (min-width: 1024px) {
  .grid--highlight-first-item {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid--highlight-first-item div:first-child {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 359px) {
  .grid-tiny-1:not(.kill-grid-tiny) {
    --visible-cols: 1;
  }
}

@media screen and (max-width: 1280px) {
  .laptop-hide {
    display: none !important;
  }

  .laptop-show {
    display: block;
  }
}

@media screen and (max-width: 1023px) {
  .portable-hide {
    display: none !important;
  }

  .portable-show {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .lap-hide {
    display: none !important;
  }

  .lap-show {
    display: block;
  }
}

@media screen and (max-width: 474px) {
  .palm-hide {
    display: none !important;
  }

  .palm-show {
    display: block;
  }
}

.grid--gap-small {
  --col-gap: 18px;
}

.grid--gap-large {
  --col-gap: calc(var(--gutter-xlarge) * 0.6);
}

.grid--gap-xlarge {
  --col-gap: calc(var(--gutter-xlarge) * 0.8);
}

.grid--gap-none {
  --col-gap: 0px;
}

.grid--gap-bottom {
  row-gap: var(--gutter-xlarge);
}

.grid--no-stretch {
  align-items: start;
}

.grid--align-items-start {
  align-items: start;
}

.grid-offset-1 {
  grid-column-start: span 1;
}

.grid-offset-2 {
  grid-column-start: span 2;
}

.grid-offset-3 {
  grid-column-start: span 3;
}

.grid-offset-4 {
  grid-column-start: span 4;
}

.grid-offset-5 {
  grid-column-start: span 5;
}

.grid-offset-6 {
  grid-column-start: span 6;
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 1280px) {
  .grid-offset-laptop-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 1023px) {
  .grid-offset-portable-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 767px) {
  .grid-offset-lap-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-1 {
    grid-column-start: span 1;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-2 {
    grid-column-start: span 2;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-3 {
    grid-column-start: span 3;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-4 {
    grid-column-start: span 4;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-5 {
    grid-column-start: span 5;
  }
}

@media screen and (max-width: 474px) {
  .grid-offset-palm-6 {
    grid-column-start: span 6;
  }
}

@media screen and (max-width: 1023px) {
  .portable--grid--slider {
    --col-gap: var(--grid-gap);
    --col-size: calc((100% - var(--col-gap) * (var(--visible-cols) - 1)) / var(--visible-cols)) !important;
    grid-auto-flow: column !important;
    grid-template-columns: var(--col-size) !important;
    grid-auto-columns: var(--col-size) !important;
  }

  .portable--grid--slider.grid-1 {
    --visible-cols: 1;
  }
}

:root {
  --gutter-small: 15px;
  --gutter-regular: 25px;
  --gutter-large: 50px;
  --gutter-xlarge: 80px;
  --gutter-container: 40px;
  --sidebar-width: 420px;
  --sidebar-gutter: 40px;
  --full-height: 100vh;
  --button-padding-large: 0.9375rem 2.875rem;
  --button-padding-regular: 0.6875rem 2.25rem;
  --button-padding-regular-unmodified: 0.6875rem 2.25rem;
  --button-padding-small: 0.5rem 1.625rem;
  --button-checkout-size: 48px;
  --input-padding: 0.75rem;
  --button-product: 3.75rem;
  --button-checkout-product-size: 60px;
  --header-vertical-space: 30px;
  --container-vertical-space: var(--container-vertical-space-base);
  --grid-gap: var(--grid-gap-original-base);
}

@media screen and (max-width: 1280px) {
  :root {
    --gutter-small: 12px;
    --gutter-regular: 20px;
    --gutter-large: 35px;
    --gutter-xlarge: 60px;
    --container-vertical-space: calc(var(--container-vertical-space-base) * 0.8);
    --grid-gap: calc(var(--grid-gap-original-base) * 0.8);
  }
}

@media screen and (max-width: 1023px) {
  :root {
    --gutter-small: 9px;
    --gutter-regular: 15px;
    --gutter-large: 25px;
    --gutter-xlarge: 40px;
    --gutter-container: 30px;
    --button-padding-large: 0.75rem 2.5rem;
    --button-checkout-size: 46px;
    --sidebar-width: 375px;
    --sidebar-gutter: 20px;
    --header-vertical-space: 20px;
    --container-vertical-space: calc(var(--container-vertical-space-base) * 0.6);
    --grid-gap: calc(var(--grid-gap-original-base) * 0.5);
  }
}

@media screen and (max-width: 767px) {
  :root {
    --button-padding-large: 0.75rem 2rem;
    --button-padding-regular: 0.5rem 1.5rem;
    --button-padding-small: 0.375rem 0.875rem;
    --button-checkout-size: 40px;
    --input-padding: 0.5rem;
    --button-product: 3.125rem;
    --button-checkout-product-size: 50px;
    --gutter-container: 20px;
    --header-vertical-space: 15px;
  }
}

@media screen and (max-width: 474px) {
  :root {
    --sidebar-width: 100%;
    --sidebar-gutter: 15px;
    --gutter-container: 15px;
  }
}

.alert strong {
  text-transform: capitalize;
}

.alert a {
  text-decoration: underline;
}

.alert--error {
  background-color: #EFE3E3;
  border-color: #E1D2D2;
  color: #000;
}

.alert--success {
  background-color: #EEF3EB;
  border-color: #D8E1D2;
  color: #000;
}

.alert--blank {
  border-color: var(--color-borders-main);
}

.alert--note {
  background-color: var(--color-third-background-main);
  border-color: var(--color-borders-main);
  color: var(--color-text-main);
}

.alert--unstyled {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.alert--circle {
  line-height: 1;
}

.alert--circle:before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 100%;
  margin-inline-end: 0.625rem;
  position: relative;
  top: 0.125rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.alert--circle.alert--blank:before {
  border: 2px solid;
  opacity: 0.25;
}

.alert--circle.alert--note:before {
  border: 2px solid;
  opacity: 0.5;
}

.alert--circle.alert--success:before {
  background-color: #52C057;
}

.alert--circle.alert--error:before {
  background-color: #E56D6D;
}

.alert--circle.alert--circle-loading:before {
  animation: circle-bounce 0.4s linear infinite alternate;
}

.alert__icon {
  width: 1.3125rem;
  height: 1.3125rem;
  display: inline-flex;
  float: left;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  position: relative;
  top: 0;
  margin-inline-end: 0.75rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.alert__icon svg * {
  fill: #fff !important;
  stroke: none !important;
}

.alert--error .alert__icon {
  background-color: #E56D6D;
}

.alert--success .alert__icon {
  background-color: #52C057;
}

.card .alert {
  color: var(--color-text-cards);
}

.alert[onclick] {
  cursor: pointer;
}

.alert--wide {
  width: 100%;
  display: flex;
}

@keyframes circle-bounce {
  0% {
    border-width: 2px;
    opacity: 0.5;
  }

  100% {
    border-width: 4px;
    opacity: 0.25;
  }
}

.button {
  text-align: center;
  display: inline-block;
  border-style: solid;
  border-radius: var(--border-radius-buttons);
  border-width: var(--border-width-buttons);
  transition: all 100ms linear;
  font-weight: var(--font-weight-buttons);
  line-height: 1.25;
  cursor: pointer;
  border-width: var(--border-width-buttons);
  color: var(--color-text-main);
  box-shadow: var(--shadow-x-buttons) var(--shadow-y-buttons) var(--shadow-blur-buttons) var(--color-shadow-buttons);
  /*@include at-query($max, $palm) {
  	.card__text & {
  		width: 100%;
  	}
  }*/
}

.button--regular-mobile {
  padding: var(--button-padding-regular-unmodified);
}

.button--fullwidth {
  width: 100%;
}

.button--icon {
  align-items: center;
  display: inline-flex;
  position: relative;
  padding-inline-start: 3.3125rem;
}

.button--icon span {
  line-height: 1;
}

.button--icon .button__icon {
  width: 22px;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  pointer-events: none;
  align-items: center;
}

html[dir=rtl] .button--icon .button__icon {
  right: 1.25rem;
}

html[dir=ltr] .button--icon .button__icon {
  left: 1.25rem;
}

.button--icon svg {
  width: 22px;
  height: 100%;
}

.button--icon svg * {
  stroke: var(--color-text-main);
  transition: all 100ms linear;
}

.button--loader {
  position: relative;
}

.button--loader .button__preloader {
  position: absolute;
  margin: 0;
  width: 20px;
  height: 20px;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  display: none;
}

.button--loader .button__preloader-element {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  margin: auto;
}

html[dir=rtl] .button--loader .button__preloader-element {
  right: 0;
}

html[dir=ltr] .button--loader .button__preloader-element {
  left: 0;
}

.button--loader .button__preloader-element circle {
  stroke-dasharray: 150, 200;
  stroke-dashoffset: -10;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

.button--loader.button--outline circle {
  stroke: var(--color-text-main);
}

.button--loader.button--solid circle {
  stroke: var(--color-foreground-main);
}

.card .button--loader circle {
  stroke: var(--color-text-cards);
}

.button--loader.working {
  pointer-events: none;
}

.button--loader.working .button__text {
  opacity: 0;
}

.button--loader.working .button__preloader {
  display: block;
}

.button--outline {
  background-color: transparent;
}

.button--solid {
  background-color: var(--color-text-main);
  border-color: var(--color-text-main);
  color: var(--color-foreground-main);
}

.button--no-padding {
  padding: 0;
}

.no-touchevents .button:not(.button--outline-hover):hover {
  background-color: var(--color-accent-main);
  border-color: var(--color-accent-main);
  color: var(--color-foreground-accent-main);
}

.no-touchevents .button:not(.button--outline-hover):hover svg * {
  stroke: var(--color-foreground-accent-main);
}

.no-touchevents .button--outline-hover:not(.button--no-hover):hover {
  border-color: var(--color-accent-main);
  color: var(--color-accent-main);
}

.button:focus-visible {
  box-shadow: 0 0 0 3px var(--color-secondary-background-main);
}

.button--invisibile-trigger {
  display: block !important;
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  opacity: 0;
}

a.button__icon {
  padding-top: 1px;
}

.flex-buttons {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: calc(100% + 0.625rem);
  margin-inline-start: -0.3125rem;
  margin-top: 0.625rem !important;
}

.flex-buttons>* {
  margin: 0.625rem 0.3125rem 0;
  flex: auto;
  width: auto;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

.main-go-top {
  position: fixed;
  bottom: var(--gutter-regular);
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-radius: var(--border-radius-buttons);
  border-width: var(--border-width-buttons);
  border-color: var(--color-borders-main);
  background: var(--color-background-main);
  cursor: pointer;
  transform: translateY(200%);
  transition: 250ms linear transform;
}

html[dir=rtl] .main-go-top {
  left: var(--gutter-regular);
}

html[dir=ltr] .main-go-top {
  right: var(--gutter-regular);
}

.main-go-top__icon svg {
  transform: scaleY(-1);
  transform-origin: 0% 40%;
}

.main-go-top__icon path {
  fill: var(--color-text-main);
}

.main-go-top.show {
  transform: translateY(0);
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--border-radius-buttons);
  --shopify-accelerated-checkout-skeleton-background-color: var(--color-text-main);
}

shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: var(--button-checkout-size);
}

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: var(--button-checkout-product-size);
}

.sidebar .additional-checkout-buttons {
  margin-top: 0.75rem !important;
}

@media screen and (max-width: 474px) {
  .sidebar .additional-checkout-buttons {
    margin-top: 0.5rem !important;
  }
}

.template-cart .additional-checkout-buttons {
  margin-top: 0 !important;
}

.card--no-sideborders {
  border-left: 0;
  border-right: 0;
}

.card--no-radius {
  border-radius: 0;
  --border-radius-cards: 0;
}

.card--no-shadow {
  box-shadow: none;
  margin: 0 !important;
}

.card--no-borders {
  border: 0;
}

.card--fullwidth {
  width: 100%;
}

.card__icon {
  width: 3.125rem;
  margin: 0 auto;
  background-color: var(--color-background-main);
  overflow: hidden;
  position: relative;
}

.card__icon a {
  width: 100%;
  height: 100%;
  display: block;
}

.card__icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

.card__icon svg path {
  stroke: black;
}

.card__icon-size--small {
  width: 120px;
  height: 120px;
}

.card__icon-size--regular {
  width: 160px;
  height: 160px;
}

.card__icon-size--large {
  width: 220px;
  height: 220px;
}

@media screen and (max-width: 1023px) {
  .card__icon-size--large {
    width: 160px;
    height: 160px;
  }
}

@media screen and (max-width: 474px) {
  .card__icon {
    width: 120px;
    height: 120px;
  }
}

.card__icon--is-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 50%;
  height: 50%;
}

.card__image {
  height: 0;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
}

.card__image svg {
  background: rgba(0, 0, 0, 0.08);
}

.card__image--with-overlay:after {
  content: "";
  background: var(--color-background-cards);
  opacity: 0.36;
  border-radius: var(--border-radius-cards);
}

.card__text {
  z-index: 99;
  word-wrap: break-word;
  word-break: break-word;
}

.card__text>* {
  display: block;
}

@media screen and (max-width: 767px) {
  .card__text.gutter--xlarge {
    padding: var(--gutter-large);
  }
}

.card__text:empty {
  display: none;
}

.card__whole-link {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 9;
  cursor: pointer;
}

.card__whole-link:focus-visible {
  outline: none;
}

.card__whole-link:focus-visible .card__text {
  outline: auto 5px -webkit-focus-ring-color;
}

input,
textarea,
select {
  transition: all 100ms linear;
  background-color: var(--color-background-main);
  border: var(--border-width-forms) solid var(--color-borders-forms-primary);
  border-radius: var(--border-radius-forms);
  color: var(--color-text-main);
  resize: none;
  padding: var(--input-padding);
  vertical-align: middle;
  -webkit-appearance: none;
  outline: none !important;
  transition: all 100ms linear;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--color-text-main);
  opacity: 0.66;
  transition: all 100ms linear;
}

.no-touchevents input:hover,
input:focus,
.no-touchevents textarea:hover,
textarea:focus,
.no-touchevents select:hover,
select:focus {
  border-color: var(--color-borders-forms-secondary);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 0.1875rem var(--color-secondary-background-main);
}

.site-header-container input,
.site-header-container textarea,
.site-header-container select {
  color: var(--color-text-header);
  background: transparent;
}

textarea {
  height: 7.8125rem;
  line-height: 1.4;
  padding-top: 0.625rem;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

input[type=number] {
  -moz-appearance: textfield;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill:hover,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill:focus,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1.875rem var(--color-background-main) inset !important;
}

input[type=checkbox],
input[type=radio] {
  width: 20px;
  height: 20px;
}

input[type=checkbox]:not(.styled-checkbox) {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

input[type=radio]:not(.styled-radio) {
  -moz-appearance: radio;
  -webkit-appearance: radio;
  appearance: radio;
}

.styled-checkbox,
.styled-radio {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  position: relative;
}

.styled-checkbox::before,
.styled-radio::before {
  content: "";
  clip-path: polygon(86% 11%, 39% 67%, 12% 43%, 0% 57%, 40% 95%, 100% 22%);
  transform-origin: top left;
  background-color: var(--color-background-main);
  background-size: contain;
  width: 70%;
  height: 70%;
  transform: scale(0) translate(-50%, -50%);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform ease 250ms;
}

.styled-checkbox:checked,
.styled-radio:checked {
  background: var(--color-text-main);
}

.styled-checkbox:checked::before,
.styled-radio:checked::before {
  transform: scale(1) translate(-50%, -50%);
}

select {
  background-repeat: no-repeat;
  background-position: calc(100% - 1.5rem) center;
  background-size: 0.8125rem 0.5rem;
  padding: var(--input-padding);
  width: 100%;
  cursor: pointer;
  text-align: start;
  transition: border 100ms linear;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

html[dir=rtl] select {
  background-position: 1.25rem center;
}

html[dir=rtl] select {
  padding-left: 3.3125rem;
  padding-right: 1rem;
}

html[dir=ltr] select {
  padding-right: 3.3125rem;
  padding-left: 1rem;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.form-field label {
  display: block;
  margin-bottom: 0.375rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
}

.shopify-challenge__container {
  background-color: rgba(0, 0, 0, 0.01);
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  padding: var(--gutter-large) 0;
  margin-top: 100px !important;
}

.shopify-challenge__container .shopify-challenge__message {
  padding: var(--gutter-large) 0 var(--gutter-small);
}

.shopify-challenge__container input[type=submit] {
  background-color: var(--color-accent-main);
  border-color: var(--color-accent-main);
  color: var(--color-foreground-accent-main);
  margin-top: 1.25rem;
  cursor: pointer;
}

.form-row {
  width: 100%;
  display: block;
  padding-top: var(--gutter-small);
}

.form-row input {
  width: 100%;
}

.contact-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: var(--gutter-large) 0;
  gap: var(--gutter-regular);
}

@media screen and (max-width: 1023px) {
  .contact-form {
    grid-template-columns: 100%;
    gap: var(--gutter-xlarge);
  }
}

.contact-form__row label {
  padding-bottom: 0.25rem;
  display: inline-block;
}

.contact-form__row input:not([type=checkbox]) {
  width: 100%;
}

.contact-form__row textarea {
  width: 100%;
  height: 14.25rem;
}

.contact-form__row {
  padding-bottom: var(--gutter-small);
}

.contact-form__row--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-form__row--checkbox label {
  padding-bottom: 0;
}

.contact-form__row--checkbox:first-child:last-child {
  padding-bottom: 0;
}

.contact-form__info a {
  text-decoration: underline;
}

.lazy-image {
  position: relative;
  overflow: hidden;
}

.lazy-image:not(.lazy-image--no-transition):before,
.lazy-image:not(.lazy-image--no-transition):after {
  content: "";
  z-index: -1;
}

.lazy-image:not(.lazy-image--no-transition):before {
  background: var(--color-fourth-background-main);
}

.lazy-image:not(.lazy-image--no-transition):after {
  background: var(--color-secondary-background-main);
  animation: lazy-loading 5s infinite;
}

.lazy-image.lazy-image--animation.lazyloaded {
  overflow: hidden;
}

.lazy-image.lazy-image--animation.lazyloaded img {
  transform: scale(1);
  transition: transform 450ms ease-in-out, opacity 300ms linear;
}

.no-touchevents a:hover .lazy-image.lazy-image--animation.lazyloaded img {
  transform: scale(1.1);
  transition: transform 0.6s ease-out, opacity 300ms !important;
}

.lazy-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 300ms linear;
  vertical-align: bottom;
  position: relative;
  z-index: 9;
  opacity: 0;
}

.lazy-image.lazyloaded:before,
.lazy-image.lazyloaded:after {
  display: none;
}

.lazy-image.lazyloaded img {
  opacity: 1;
}

.lazy-image.lazy-image--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: 0;
  padding-top: 0 !important;
}

.lazy-image.lazy-image--background img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.lazy-image.lazy-image--fit img {
  object-fit: contain !important;
  padding: var(--image-fit-padding);
}

.lazy-image.lazy-image--fit.lazy-image--small img {
  padding: 5%;
}

.lazy-image[data-ratio] {
  height: 0;
}

.lazy-image[data-ratio] img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

html[dir=rtl] .lazy-image[data-ratio] img {
  right: 0;
}

html[dir=ltr] .lazy-image[data-ratio] img {
  left: 0;
}

@keyframes lazy-loading {
  0% {
    width: 0;
    left: 0;
  }

  50% {
    width: 100%;
    left: 0;
  }

  100% {
    left: 100%;
    width: 0;
  }
}

.onboarding-svg {
  position: relative;
  display: block;
  text-align: center;
  width: 100%;
}

.onboarding-svg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.svg-placeholder {
  display: block;
  font-size: 0;
  position: relative;
}

.svg-placeholder svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: var(--color-secondary-text-main);
  width: 80%;
  height: 80%;
}

.svg-placeholder--foreground {
  background: var(--color-secondary-background-main);
}

body.modal-opened,
body.sidebar-opened {
  overflow: hidden;
}

.main-content {
  position: relative;
}

.search-page-form form {
  display: flex;
  gap: var(--gutter-regular);
  flex-wrap: wrap;
}

.search-page-form form .site-search-handle {
  flex-grow: 1;
}

.search-page-form form input {
  width: 100%;
}

.search-page-form form svg path {
  fill: var(--color-text-main);
}

.search-title {
  font-weight: var(--font-weight-body);
}

.search-item.active {
  background-color: var(--color-third-background-main);
  outline: 0.625rem solid var(--color-third-background-main);
  border-radius: clamp(0px, var(--border-radius-cards), 1px);
}

.search-more.active {
  background-color: var(--color-accent-main) !important;
  color: var(--color-foreground-accent-main) !important;
  border-color: transparent !important;
}

.skip-to-content:focus {
  clip-path: none;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  color: var(--color-text-main);
  background-color: var(--color-background-main);
  position: fixed;
  padding: 10px;
  opacity: 1;
  z-index: 10000;
  transition: none;
  top: 0;
}

html[dir=rtl] .skip-to-content:focus {
  right: 0;
}

html[dir=ltr] .skip-to-content:focus {
  left: 0;
}

html[dir=rtl] .disclosure-has-popup[open]>summary:before {
  left: 0 !important;
}

.panel--no-sideborders {
  border-left: 0;
  border-right: 0;
}

.panel--no-radius {
  border-radius: 0;
}

.panel--no-borders {
  border: 0;
}

.show-more {
  position: relative;
  display: block;
  padding-bottom: var(--gutter-regular);
  --height: 200px;
}

@media screen and (max-width: 767px) {
  .show-more {
    padding-bottom: 1.875rem;
  }
}

@media screen and (max-width: 767px) {
  .facets__wrapper .show-more:not(.disabled) {
    padding-bottom: 2.5rem;
  }
}

.show-more--active-not-active {
  padding-bottom: 0;
}

.show-more_toggler {
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .facets__wrapper .show-more_toggler {
    top: calc(100% - 30px);
  }
}

.show-more_toggler.disabled {
  display: none;
}

.show-more_toggler.disabled+.show-more_panel {
  margin-bottom: 0;
}

.show-more_toggler.active+.show-more_panel:after {
  display: none;
}

.show-more_toggler:not(.init),
.show-more_toggler:not(.init)+.show-more_panel:after {
  visibility: hidden;
}

.show-more_panel {
  position: relative;
  z-index: 0;
  max-height: var(--height);
  overflow: hidden;
  transition: all ease 500ms;
}

.show-more_panel:after {
  display: inline-block;
  content: "";
  background: var(--color-background-main);
  background: linear-gradient(0deg, var(--color-background-main) 10%, var(--color-opacity-background-main) 100%);
  position: absolute;
  bottom: 0;
  display: inline-block;
  height: 1.25rem;
  width: 100%;
  z-index: 2;
}

html[dir=rtl] .show-more_panel:after {
  right: 0;
}

html[dir=ltr] .show-more_panel:after {
  left: 0;
}

.section-heading {
  color: var(--color-text-main);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.section-heading__title {
  margin-bottom: 10px;
  display: block;
}

.section-heading__subheading {
  display: inline-block;
  width: 100%;
}

.section-heading__text {
  padding-inline-end: 10%;
  word-break: break-word;
}

.section-heading__actions {
  flex-shrink: 0;
}

.section-heading--center {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.section-heading--center .section-heading__text {
  padding-inline-end: 0;
}

@media screen and (max-width: 767px) {
  .section-heading:not(.section-heading--single-line) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .section-heading:not(.section-heading--single-line) .section-heading__actions {
    margin-top: 0.625rem;
  }
}

.section-heading:empty {
  display: none;
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  margin-inline-start: -0.3125rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.3125rem;
  border: none;
}

.social-icons a .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons a .icon svg {
  height: 100%;
  width: 100%;
}

.card__image--with-overlay:after,
.lazy-image:not(.lazy-image--no-transition):before,
.lazy-image:not(.lazy-image--no-transition):after,
.svg-placeholder.svg-placeholder--background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

html[dir=rtl] .card__image svg,
.card__image html[dir=rtl] svg,
html[dir=rtl] .card__image--background,
html[dir=rtl] .card__image--with-overlay:after,
html[dir=rtl] .lazy-image:not(.lazy-image--no-transition):before,
html[dir=rtl] .lazy-image:not(.lazy-image--no-transition):after,
html[dir=rtl] .svg-placeholder.svg-placeholder--background {
  right: 0;
}

html[dir=ltr] .card__image svg,
.card__image html[dir=ltr] svg,
html[dir=ltr] .card__image--background,
html[dir=ltr] .card__image--with-overlay:after,
html[dir=ltr] .lazy-image:not(.lazy-image--no-transition):before,
html[dir=ltr] .lazy-image:not(.lazy-image--no-transition):after,
html[dir=ltr] .svg-placeholder.svg-placeholder--background {
  left: 0;
}


/* ==========================================================================
   SOLUZIONE FINALE: LAYOUT FLESSIBILE
   *** FIX: Pulsante Full-Width (Mobile+Desktop) e Grassetto ***
   ========================================================================== */

/* -------------------------------------------
   1. STILE GLOBALE CARD (Valido per Mobile e Desktop)
   ------------------------------------------- */
div.product-item.card {
  /* --- Stile Minimal --- */

  /* === BORDO MODIFICATO === */
  border: 0 solid #575e75 !important;
  /* Nuovo colore richiesto */

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;

  /* --- Reset di base --- */
  padding: 0 !important;

  /* Garantisce che la card possa allungarsi (necessario per il flex-grow) */
  height: 100% !important;
  display: flex !important;
  /* Forza il flex per gestire l'altezza 100% */
  flex-direction: column !important;
}


/* Immagine interna (riempimento) - Stile globale */
.product-item__image-figure,
.product-item__image-figure img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* === RIPRISTINO: 'contain' per non tagliare le immagini === */
  object-fit: contain !important;
}


/* -------------------------------------------
   2. STILI GLOBALI ELEMENTI INTERNI (Titolo, Prezzo, Pulsante)
   ------------------------------------------- */

/* Contenitore flex per testo (Titolo/Prezzo) */
div.product-item.card>div.card__text.product-item__text {
  display: flex !important;
  flex-direction: column !important;

  /* Assicura che questo blocco non si restringa */
  flex-shrink: 0 !important;

  /* === SFONDO CONTENITORE === */
  background-color: #f5f5f5 !important;
  /* Grigio chiaro neutro */
  border-radius: 6px !important;
  /* Arrotonda il contenitore */

  /* Padding unificato per mobile/desktop */
  padding: 0.5rem !important;

  /* === min-height (7 righe) === */
  line-height: 1.3em !important;
  /* Base di calcolo */
  min-height: 2.6em !important;
  /* 7 * 1.3em = 9.1em */
  justify-content: space-between !important;
  /* Distribuisce lo spazio */
}

/* Selettore <a> del titolo */
div.product-item.card .product-item__title {
  /* === REGOLA ORDINE === */
  order: 1 !important;
}

/* --- A. Titolo (Stile dello SPAN interno) --- */
div.product-item.card .product-item__title span {
  font-weight: bold !important;
  text-shadow: none !important;
  font-size: 0.9375rem !important;
  /* 15px */
  line-height: 1.3 !important;
  /* Mantenuto per coerenza interna */
  background-image: none !important;

  /* === MODIFICA: Stile "Glass Badge" Titolo === */
  background-color: #ebebeba6 !important;
  /* Sfondo Grigio Chiaro trasparente */
  color: #004a99 !important;
  /* Testo Blu Scuro (Suggerito) */
  border: 2px solid #b5b5b5 !important;
  /* Bordo grigio più scuro */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  /* Sfumatura 1px */

  padding: 3px 6px !important;
  display: inline-block !important;
  /* Per applicare padding */

  /* === MODIFICA BORDO (Globale) === */
  /* border-width: 2px !important; */
  /* Rimosso, già incluso in 'border:' */
  border-radius: 6px !important;
}

/* Rimuovi effetto al clic */
div.product-item.card .product-item__title:active {
  opacity: 1 !important;
  /* Previene cambio opacità al clic */
}


/* --- B. Prezzo --- */
div.product-item.card .product-item__price {
  font-size: 0.875rem !important;
  /* 14px */
  font-weight: bold !important;
  margin-bottom: 2px !important;

  /* === REGOLA ORDINE === */
  order: 3 !important;

  /* === MODIFICA: Stile "Glass Badge" Prezzo === */
  background-color: #ebebeba6 !important;
  /* Sfondo Grigio Chiaro trasparente */
  color: #445cb6 !important;
  /* Testo Rosso Scuro (Suggerito) */
  border: 2px solid #b5b5b5 !important;
  /* Bordo grigio più scuro */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  /* Sfumatura 1px */

  padding: 3px 6px !important;
  display: inline-block !important;
  /* Per "abbracciare" il testo */

  /* === MODIFICA BORDO (Globale) === */
  /* border-width: 2px !important; */
  /* Rimosso, già incluso in 'border:' */
  border-radius: 6px !important;
}

/* === MODIFICA: FIX PREZZO BARRATO NASCOSTO === */
div.product-item.card .product-price--original {
  display: inline-block !important;
}

div.product-item.card .product-price--compare {
  display: inline-block !important;
  margin-inline-start: 0.5rem !important;
  text-decoration: line-through !important;

  /* Adatta al badge chiaro */
  color: #222222 !important;
  opacity: 0.6 !important;
}

/* === FINE MODIFICA === */


/* --- C. Stile Descrizione --- */
div.product-item.card p.product-item__description {
  /* Font aggiornato (più piccolo) */
  font-size: 0.8125rem !important;
  /* 13px */
  font-weight: bold !important;
  /* Mantenuto grassetto */

  /* Stili aggiuntivi per coerenza */
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  text-align: inherit !important;
  /* Eredita l'allineamento (left/center) */

  /* === REGOLA ORDINE === */
  order: 2 !important;

  /* === MODIFICA: Stile "Glass Badge" Descrizione === */
  background-color: #ebebeba6 !important;
  /* Sfondo Grigio Chiaro trasparente */
  color: #060606 !important;
  /* Testo Verde Scuro (Suggerito) */
  border: 2px solid #b5b5b5 !important;
  /* Bordo grigio più scuro */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  /* Sfumatura 1px */

  padding: 3px 6px !important;
  display: inline-block !important;
  /* Per "abbracciare" il testo */

  /* === MODIFICA BORDO (Globale) === */
  /* border-width: 2px !important; */
  /* Rimosso, già incluso in 'border:' */
  border-radius: 6px !important;
}


/* --- C. Pulsante --- */
div.product-item.card .product-item__quick-buy .button--solid {
  background-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(100, 100, 100, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;

  /* === MODIFICHE PULSANTE (Full-width + Grassetto) === */
  display: block !important;
  /* Sostituisce inline-block */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-weight: bold !important;

  margin: 0 !important;
  padding: 10px 18px !important;
  font-size: 1rem !important;
  /* 13px */
  transition: all 0.2s ease !important;
}

/* Hover Pulsante */
div.product-item.card .product-item__quick-buy .button--solid:hover {
  background-color: rgba(60, 60, 60, 1) !important;
  border-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Nasconde il contenitore dei badge (es. "-20%") */
div.product-item.card .product-item__badges {
  display: none !important;
}


/* ==========================================================================
   LAYOUT MOBILE: ORIZZONTALE (fino a 749px)
   ========================================================================== */
@media screen and (max-width: 749px) {



  /* === MODIFICA: Badge Full-Width (Mobile) === */
  div.product-item.card .product-item__title span,
  div.product-item.card .product-item__price,
  div.product-item.card p.product-item__description {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === FINE MODIFICA === */

  /* 1. Card Layout (Grid Orizzontale) */
  div.product-item.card {
    display: grid !important;
    grid-template-columns: 40% 1fr !important;
    grid-template-rows: 1fr auto !important;
    flex-direction: row !important;
    /* Sovrascrive il 'column' globale */
    height: auto !important;
    /* Sovrascrive 'height: 100%' globale */
    min-height: 200px !important;
    /* Diamo un'altezza minima per estetica */
  }

  /* 2. Blocco Immagine (Colonna 1) */
  div.product-item.card>a.card__image.product-item__image {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    padding-top: 0 !important;
    height: 90% !important;
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0 !important;
    flex-grow: 0 !important;
    /* Sovrascrive il 'flex-grow' globale */
  }

  /* 3. Blocco Testo (Titolo/Prezzo) (Colonna 2, Riga 1) */
  div.product-item.card>div.card__text.product-item__text {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    text-align: left !important;
    overflow: hidden !important;
    order: 0 !important;
    /* Resetta l'ordine desktop */
  }

  /* 4. Blocco Pulsante (Colonna 2, Riga 2) */
  div.product-item.card>div.product-item__text:has(div.product-item__quick-buy) {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    align-self: end !important;
    width: 100% !important;

    padding: 0.5rem 0.75rem 0.75rem 0.75rem !important;
    text-align: left !important;
    order: 0 !important;
    /* Resetta l'ordine desktop */
    margin-top: 0 !important;
    /* Resetta l'ordine desktop */
  }

  /* 5. Allineamento Testo Mobile */
  div.product-item.card .product-item__price,
  div.product-item.card .product-item__title {
    text-align: left !important;
  }

  /* 6. Regola immagine mobile (assicura 'contain') */
  @media screen and (max-width: 749px) {
    div.product-item.card .product-item__image-figure img {
      width: 80% !important;
      height: 80% !important;
      /* === RIPRISTINO: 'contain' per non tagliare le immagini === */
      object-fit: contain !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
  }
}


/* ==========================================================================
   LAYOUT DESKTOP: VERTICALE (da 750px in su)
   ========================================================================== */
@media screen and (min-width: 750px) {



  /* 1. Card Layout (Flex Verticale) */
  div.product-item.card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* LASCIARE 100% per allineamento griglia */

    /* === NUOVO MARGINE DESKTOP === */
    margin: 10px !important;
  }

  /* 2. Blocco Testo (Titolo/Prezzo) (Ordine 1) */
  div.product-item.card>div.card__text.product-item__text {
    order: 1 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 3. Blocco Immagine (Ordine 2) */
  /* === RIPRISTINO: Altezza flessibile per allineare le CARD === */
  div.product-item.card>a.card__image.product-item__image {
    order: 2 !important;
    position: relative !important;
    display: block !important;
    flex-shrink: 1 !important;
    /* RIPRISTINATO: Lascia che si rimpicciolisca */

    flex-grow: 1 !important;
    /* RIPRISTINATO: Falla riempire lo spazio restante */
    height: 1px !important;
    /* RIPRISTINATO: Hack per far funzionare flex-grow */

    padding-bottom: 0 !important;
    /* Rimuove 1:1 */

    overflow: hidden !important;
    grid-column: unset !important;
    grid-row: unset !important;
    min-height: 250px !important;
    /* RIPRISTINATO: Altezza minima */
  }

  /* Contenitore Figure (necessario per il posizionamento) */
  div.product-item.card .product-item__image-figure {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80% !important;
    height: 80% !important;
    padding: 0.5rem !important;
    /* Spazio tra bordo e immagine */
    box-sizing: border-box !important;
    /* Per includere padding */
  }

  /* Immagine interna (centrata e 100%) */
  div.product-item.card .product-item__image-figure img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 10% !important;
    width: 80% !important;
    height: 80% !important;

    /* === RIPRISTINO: 'contain' per non tagliare le immagini === */
    object-fit: contain !important;
  }

  /* 4. Blocco Pulsante (Ordine 3) */
  div.product-item.card>div.product-item__text:has(div.product-item__quick-buy) {
    order: 3 !important;
    margin-top: auto !important;
    /* SPINGE IL PULSANTE IN FONDO */
    text-align: center !important;
    flex-shrink: 0 !important;

    padding: 0.5rem !important;

    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 5. Allineamento Testo Desktop */
  div.product-item.card .product-item__price,
  div.product-item.card .product-item__title {
    text-align: center !important;
  }


  /* ==============================================================
     *** NUOVE REGOLE DESKTOP: Full-width e margini ridotti ***
     ============================================================== */

  /* Riduci i margini verticali tra i badge */
  div.product-item.card p.product-item__description {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }

  div.product-item.card .product-item__price {
    margin-bottom: 3px !important;
  }

  /* Forza i badge a prendere tutta la larghezza */
  div.product-item.card .product-item__title span,
  div.product-item.card .product-item__price,
  div.product-item.card p.product-item__description {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Importante per il padding */
  }

}

/* ==========================================================================
   STILE FINESTRA POPUP "VISTA RAPIDA" (MODAL-CONTENT) - Con Menu a Tendina
   ========================================================================== */

/* 1. Sfondo e Bordo del Pannello Principale */
div.modal-content {
  /* === BORDO ESTERNO === */
  border-radius: 12px;
  border: 2px solid var(--blue-solid) !important;

  /* === SFONDO INTERNO === */
  background-color: #f5f5ff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  overflow: visible !important;
  position: relative !important;

  /* === Larghezza minima Desktop === */
  min-width: 450px !important;
  width: auto !important;
  min-height: 550px !important;
}

/* 1b. Regole larghezza Mobile (MODIFICATO: Full Screen) */
@media screen and (max-width: 749px) {
  div.modal-content {
    /* === MODIFICA: Full Screen Mobile === */
    width: 100% !important;
    height: 100% !important;
    min-width: unset !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    /* Niente angoli arrotondati */
    overflow-y: auto !important;
    /* Rende il popup scorrevole */

    /* Assicurati che sia posizionato correttamente */
    position: fixed !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* === FIX MARGINE MOBILE: Rimuovi spazio sotto la galleria === */
  div.modal-content .product-gallery.product-gallery--slider {
    margin-bottom: 0 !important;
  }
}

/* <-- Chiusura del @media query */

/* 2. Bottone per chiudere (X in alto) - MODIFICATO */
div.modal-content .product-quick-view__close {
  /* === MODIFICA: Posizione interna === */
  position: absolute !important;
  top: 10px !important;
  /* Spazio dal bordo */
  right: 10px !important;
  /* Spazio dal bordo */

  /* === MODIFICA: Stile "Pulsante" === */
  background-color: rgba(80, 80, 80, 1) !important;
  border: 1px solid rgba(100, 100, 100, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  /* Stesso raggio dei bottoni */
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  transition: all 0.2s ease !important;
}

/* Colore della X (icona SVG) */
div.modal-content .product-quick-view__close path,
div.modal-content .product-quick-view__close .icon-close {
  /* Supporta più temi */
  stroke: #ffffff !important;
  /* Colore BIANCO */
  fill: #ffffff !important;
}

/* Hover per il pulsante chiudi */
div.modal-content .product-quick-view__close:hover {
  background-color: rgba(60, 60, 60, 1) !important;
  border-color: rgba(80, 80, 80, 1) !important;
  transform: translateY(-1px) !important;
}


/* 3. Stile Blocco Galleria Immagini (Mobile-Default) */
div.modal-content .product-gallery.product-gallery--slider {
  position: relative !important;
  width: 100% !important;
  /* Altezza fissa rimossa per far funzionare il mobile */
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 12px;
  border: 2px solid var(--blue-solid) !important;
  overflow: hidden !important;
  /* Nasconde ciò che esce dai bordi */
  margin-bottom: 1rem !important;
  /* Mantenuto per Desktop */
  background-color: #ffffff !important;
  min-height: 320px !important;
}

/* 3b. NUOVO: Applica l'altezza fissa SOLO al desktop */
@media screen and (min-width: 750px) {
  div.modal-content .product-gallery.product-gallery--slider {
    height: 80% !important;
    /* <-- Altezza fissa solo per Desktop */
  }
}

/* ================================================= */
/* === INIZIO REGOLE IMMAGINE (Backup) === */
/* ================================================= */

/* 4b. Applica le TUE regole alla <figure> (come sfondo)
   Lavorando CON il padding-top del tema */
div.modal-content .product-gallery-item .lazy-image {

  /* === REGOLE RICHIESTE (Posizione e Box) === */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;

  /* === REGOLE RICHIESTE (Immagine) === */
  background-size: contain !important;
  /* object-fit: contain */
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* Reset di sicurezza */
  display: block !important;
  padding-top: 0 !important;
  /* Annulla il padding se lo eredita */
  margin: 0 !important;
}

/* 4c. Applica le STESSE regole all'<img> (Opzione Tag Immagine) */
div.modal-content .product-gallery-item .lazy-image img {
  /* === Forza Visibilità === */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* === Posizione e Box === */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;

  /* === Stile Immagine === */
  object-fit: contain !important;

  /* Reset */
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* ================================================= */
/* === FINE REGOLE IMMAGINE === */
/* ================================================= */




/* 5b. NUOVO: Nascondi controlli slider */
div.modal-content .css-slider-navigation-container,
div.modal-content .css-slider-index-navigation {
  display: none !important;
  visibility: hidden !important;
}


/* 6. Titolo del Prodotto (Stile Badge) */
div.modal-content .product__title {
  /* Colore richiesto (grigio scuro) */
  color: var(--blue-solid) !important;
  /* Grassetto per evidenziare */
  font-weight: 600 !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Dimensione più contenuta */
  font-size: 1.6rem;



  /* Rimuovo il maiuscolo e il bordo */
  text-transform: none;
  border-bottom: none;
  letter-spacing: normal;



  margin-bottom: 10px;
  padding-bottom: 5px;
}

/* 7. Etichette delle Varianti (es. "Formato", "Gusto") */
div.modal-content .product-variant__name {
  font-weight: bold !important;
  font-size: 0.9rem !important;
  color: #333 !important;
  margin-bottom: 0.5rem !important;
}

/* 8. NUOVO: Stile Menu a Tendina Varianti */
div.modal-content .select-wrapper {
  position: relative !important;
  display: block !important;
}

div.modal-content .product-variant__select {
  /* Aspetto del bottone */
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  border: 2px solid #b5b5b5 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;

  /* Testo */
  color: #333 !important;
  font-weight: bold !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem !important;
  /* Spazio per la freccia */
  font-size: 0.9rem !important;

  /* Dimensioni */
  width: 100% !important;
  height: 44px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

div.modal-content .product-variant__select:hover {
  border-color: #575e75 !important;
}

/* Stile della freccetta SVG */
div.modal-content .select-wrapper .icon-chevron-down {
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  color: #575e75 !important;
  pointer-events: none !important;
  /* Non cliccabile */
  fill: currentColor !important;
}


/* 9b. NUOVO: Stile Pulsanti Quantità (+/-) */
div.modal-content .product-quantity {
  display: flex !important;
  align-items: center !important;
  border: 2px solid #575e75 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  height: 44px !important;
  /* Allinea altezza */
  box-sizing: border-box !important;
}

div.modal-content .product-quantity .product-quantity__minus,
div.modal-content .product-quantity .product-quantity__plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 100% !important;
  /* Riempi l'altezza */
  background-color: #ebebeba6 !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

div.modal-content .product-quantity .product-quantity__minus:hover,
div.modal-content .product-quantity .product-quantity__plus:hover {
  background-color: #b5b5b5 !important;
}

/* Stile SVG interni (+/-) */
div.modal-content .product-quantity svg {
  fill: #575e75 !important;
  width: 14px !important;
  height: 14px !important;
}

/* Input numerico */
div.modal-content .product-quantity .product-quantity__selector {
  border: none !important;
  text-align: center !important;
  font-weight: bold !important;
  font-size: 1.1rem !important;
  width: 45px !important;
  height: 100% !important;
  padding: 0 5px !important;
  background-color: #ffffff !important;
  color: #222 !important;
}

/* Nasconde le frecce default dell'input number */
div.modal-content .product-quantity .product-quantity__selector::-webkit-outer-spin-button,
div.modal-content .product-quantity .product-quantity__selector::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

div.modal-content .product-quantity .product-quantity__selector {
  -moz-appearance: textfield;
}


/* 10. Pulsante "Aggiungi al carrello" */
div.modal-content .add-to-cart.button--product {
  background-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(100, 100, 100, 1) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  padding: 12px 18px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  height: 44px !important;
  /* Allinea altezza */
  box-sizing: border-box !important;
}

/* 11. Hover Pulsante "Aggiungi al carrello" */
div.modal-content .add-to-cart.button--product:hover {
  background-color: rgba(60, 60, 60, 1) !important;
  border-color: rgba(80, 80, 80, 1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}



/* * ------------------------------------------------------------------
 * DA QUI INIZIANO LE MODIFICHE
 * ------------------------------------------------------------------
 */

/* * ------------------------------------------------------------------
 * INIZIO CSS CUSTOM - Nascondi varianti non disponibili
 * ------------------------------------------------------------------
 */

.product-variant__container--radios .product-variant-value[data-disabled]+label {
  display: none !important;
}

.product-variant__container--radios .product-variant-value[data-disabled]+label::after {
  display: none !important;
}

/* * ------------------------------------------------------------------
 * INIZIO CSS CUSTOM - Blocca DRAG e SWIPE dello slider
 * ------------------------------------------------------------------
 */

/* * Usiamo la classe .main-product (che è sul contenitore della pagina prodotto)
 * per assicurarci che questa regola si applichi solo qui.
 *
 * 1. Disabilitiamo TUTTI gli eventi del mouse e del tocco sul "viewport"
 * (l'area che l'utente trascina).
 */
.main-product .css-slider-viewport {
  pointer-events: none;
  cursor: default;
}

/* * 2. Ri-abilitiamo gli eventi sulla singola slide (.product-gallery-item).
 * Questo permette allo script dello zoom sull'immagine di funzionare,
 * ma dato che il contenitore "viewport" è bloccato, il drag non 
 * partirà.
 */
.main-product .product-gallery-item {
  pointer-events: auto;
}

/* * ------------------------------------------------------------------
 * INIZIO SCRIPT CUSTOM - Fix "Fast Scroll" Immagini (Mobile) V2
 * ------------------------------------------------------------------
 */
@media (max-width: 768px) {

  /*
   * Troviamo i contenitori dello slider e forziamo
   * lo scorrimento istantaneo ('auto') solo su mobile,
   * sovrascrivendo l'animazione 'smooth' del tema.
   */
  .product-gallery[data-js-product-gallery] .css-slider-viewport,
  .product-gallery[data-js-product-gallery] .grid--slider,
  .product-gallery[data-js-product-gallery] .portable--grid--slider {
    scroll-behavior: auto !important;
  }
}

/* * ------------------------------------------------------------------
 * FINE SCRIPT CUSTOM
 * ------------------------------------------------------------------
 */

/* * ------------------------------------------------------------------
 * INIZIO CSS CUSTOM - Rendi compatti i menu varianti
 * ------------------------------------------------------------------
 */

/*
 * Seleziona i singoli menu a tendina ("Formato" e "Gusti")
 * e riduce lo spazio SOTTO ognuno di loro.
 * Questo li avvicina tra loro.
 */
/* * [RIMOSSO DUPLICATO]
product-page .product-variant[data-js-product-variant] {
  margin-bottom: 1px !important; 
}
*/

/*
 * Seleziona l'INTERO blocco dei menu (il contenitore di entrambi)
 * e riduce lo spazio SOTTO di esso, per avvicinarlo
 * al blocco prezzo/pulsanti.
 */
/*
 * [RIMOSSO DUPLICATO]
product-page product-variants[data-main-product-variants] {
  margin-bottom: 1px !important; 
}
*/
/* * ------------------------------------------------------------------
 * INIZIO CSS CUSTOM - Layout Compattato (Targeting Specifico V2)
 * ------------------------------------------------------------------
 */

/*
 * 1. Resetta il "div genitore" (.product-variant)
 * Rimuove TUTTO il padding interno e le altezze minime.
 * Questo lo forza ad essere "grande il giusto" (Obiettivo 2).
 */
product-page .product-variant[data-js-product-variant] {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  /* Lascia solo un piccolo spazio sotto per staccarlo
     dal blocco "Gusti" (che è anche un .product-variant) */
  margin-bottom: 15px !important;
}

/*
 * 2. Resetta l'etichetta ("Formato")
 * Rimuove il suo margine inferiore per la "minima distanza" (Obiettivo 1).
 */
product-page .product-variant__name {
  margin-bottom: 5px !important;
  /* Spazio minimo tra etichetta e menu */
}

/*
 * 3. Resetta il menu a tendina (.product-variant-container)
 * Rimuove i suoi margini (Obiettivo 3) e normalizza l'altezza.
 */
product-page .product-variant-container {
  margin: 0 !important;
  /* Rimuove tutti i margini dal menu */
  height: auto !important;
  min-height: 0 !important;

  /* Mantiene un'altezza "normale" per il menu stesso */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/*
 * 4. Controlla lo spazio sotto TUTTI i menu
 * (per avvicinarli al Prezzo)
 */
product-page product-variants[data-main-product-variants] {
  margin-bottom: 20px !important;
  /* Spazio prima del Prezzo */
}

/* * ------------------------------------------------------------------
 * INIZIO CSS CUSTOM - Layout Compattato (per QUICK VIEW)
 * ------------------------------------------------------------------
 */

/*
 * Queste sono le stesse regole del V2, ma con il selettore
 * ".product-quick-view__product" invece di "product-page"
 */

/* 1. Resetta il "div genitore" (.product-variant) */
.product-quick-view__product .product-variant[data-js-product-variant] {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 15px !important;
}

/* 2. Resetta l'etichetta ("Formato") */
.product-quick-view__product .product-variant__name {
  margin-bottom: 5px !important;
}

/* 3. Resetta il menu a tendina (.product-variant-container) */
.product-quick-view__product .product-variant-container {
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 4. Controlla lo spazio sotto TUTTI i menu */
.product-quick-view__product product-variants[data-main-product-variants] {
  margin-bottom: 20px !important;
  /* Spazio prima del Prezzo */
}




/* ==========================================================================
   BLOCCA TUTTE LE INTERAZIONI UTENTE SULLA GALLERIA QUICK VIEW
   (Blocca click, swipe e drag)
   ========================================================================== */

/*
 * 1. Disabilitiamo TUTTI gli eventi del mouse e del tocco sul "viewport"
 * (l'area che l'utente trascina o clicca) dentro la quick view.
 * Questo impedirà al click di cambiare l'immagine.
 */
div.modal-content .css-slider-viewport {
  pointer-events: none !important;
  cursor: default !important;
}

/*
 * 2. Nascondiamo anche frecce e pallini per sicurezza,
 * per evitare che l'utente pensi di poter scorrere.
 */
div.modal-content .css-slider-navigation-container,
div.modal-content .css-slider-index-navigation {
  display: none !important;
  visibility: hidden !important;
}

/* --- Inizio Stile Quick-Buy Card (Blocchi Separati) --- */

/* 1. Layout Contenitore Flex (MODIFICATO: Gap reinserito) */
.product-item__quick-buy .quick-add-to-cart-button .flex-buttons-quickbuy {
  display: flex !important;
  flex-flow: row nowrap !important;
  width: auto !important;
  margin-inline-start: 0 !important;
  margin-top: 0 !important;
  gap: 8px;
  /* <<< Spazio di 8px tra i due blocchi */
  align-items: stretch;
}

/* 2. Reset figli (invariato) */
.product-item__quick-buy .quick-add-to-cart-button .flex-buttons-quickbuy>* {
  margin: 0 !important;
  flex: none !important;
  width: auto !important;
}

/* 3. Il Pulsante "Aggiungi" (MODIFICATO: Blocco separato) */
.product-item__quick-buy .quick-add-to-cart-button .flex-buttons-quickbuy .button {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: calc(60%) !important;
  /* 50% - metà gap */
  min-width: 0;
  border-radius: var(--border-radius-buttons, 5px) !important;
  /* Angoli normali */
  margin-left: 0;
  /* Reset */
  z-index: 1;
  height: 40px !important;
  /* Altezza 40px */
  font-size: 15px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 4. Selettore Quantità (MODIFICATO: Bordo rimosso, sfondo aggiunto) */
.quick-buy-quantity {
  display: flex;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: calc(30%) !important;
  /* 50% - metà gap */
  border: none !important;
  /* <<< BORDO RIMOSSO */
  background-color: var(--color-secondary-background-main, #f6f6f6);
  /* Sfondo per definirlo */
  border-radius: var(--border-radius-buttons, 5px);
  /* Angoli normali */
  overflow: hidden;
  box-sizing: border-box !important;
  height: 40px !important;
  /* Altezza 40px */
  z-index: 2;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 4px;
}

/* 5. Input (il numero) */
.quick-buy-quantity__selector {
  width: auto;
  flex-grow: 0;
  text-align: center;
  border: none;
  background: transparent;
  /* Sfondo trasparente */
  padding: 0 2px;
  -moz-appearance: textfield;
  font-size: var(--font-size-button, 14px);
  font-weight: var(--font-weight-buttons, normal);
  color: var(--color-text-main, #333);
  line-height: 1;
}

.quick-buy-quantity__selector::-webkit-outer-spin-button,
.quick-buy-quantity__selector::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 6. Pulsanti + e - (Bordo rimosso, sfondo per cerchio) */
.quick-buy-quantity__plus,
.quick-buy-quantity__minus {
  flex-grow: 0;
  flex-shrink: 0;
  background: var(--color-background-main, #ffffff);
  /* Sfondo bianco per il cerchio */
  border: none;
  /* Bordo rimosso */
  border-radius: 50%;
  /* Cerchio */
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-main, #5c462b);
  font-size: var(--font-size-button, 14px);
}

.quick-buy-quantity__plus svg path,
.quick-buy-quantity__minus svg path,
.quick-buy-quantity__plus svg rect,
.quick-buy-quantity__minus svg rect {
  fill: var(--color-text-main, #5c462b) !important;
  stroke: none !important;
}

.quick-buy-quantity__plus svg circle,
.quick-buy-quantity__minus svg circle {
  stroke: var(--color-text-main, #5c462b) !important;
}

.quick-buy-quantity__plus:hover,
.quick-buy-quantity__minus:hover {
  background: var(--color-secondary-background-main, #f0f0f0);
  /* Sfondo hover */
}

/* 7. Pulsante "Scegli Opzioni" */
.quick-buy-choose-options {
  height: 40px !important;
  font-size: var(--font-size-button, 14px) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* --- Fix Mobile (già corretto per layout separati) --- */
@media (max-width: 767px) {
  .product-item__quick-buy .quick-add-to-cart-button .flex-buttons-quickbuy {
    flex-flow: column nowrap !important;
    gap: 8px !important;
  }

  .product-item__quick-buy .quick-add-to-cart-button .flex-buttons-quickbuy .button {
    flex-basis: 100% !important;
    margin-left: 0 !important;
    border-radius: var(--border-radius-buttons, 5px) !important;
    height: 40px !important;
  }

  .quick-buy-quantity {
    flex-basis: 100% !important;
    border-radius: var(--border-radius-buttons, 5px) !important;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px !important;
  }
}

/* --- Fine Stile Quick-Buy Card (Blocchi Separati) --- */

/* 1. Rendi la card un contenitore flex verticale */
.product-item.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Assicura che la card occupi tutto lo spazio dato dalla griglia */
}

/* 2. Fai in modo che il blocco di testo principale (titolo/prezzo)
      si espanda per riempire lo spazio vuoto.
      Usiamo :not() per selezionare il primo blocco di testo. */
.product-item.card .card__text:not([style*="padding-top: 0"]) {
  flex-grow: 1;
}

/* 3. Il blocco del pulsante (il secondo .card__text)
      rimarrà in fondo con la sua altezza naturale */
.product-item.card .card__text[style*="padding-top: 0"] {
  flex-grow: 0;
  flex-shrink: 0;
}

/* --- Fine Fix Altezza Card Prodotto --- */

/* ================================================ */
/* Stile per variante singola (Aggiunto da noi)     */
/* ================================================ */
.single-variant-display {
  padding: 12px 15px;
  background-color: rgba(var(--color-text-main-rgb), 0.04);
  border-radius: var(--border-radius-forms, 6px);
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid rgba(var(--color-text-main-rgb), 0.1);
  line-height: 1.4;
}

.single-variant-display span {
  opacity: 0.85;
  /* Rende l'etichetta (es. Formato:) più chiara */
}



/* ================================================ */
/* Stile personalizzato Pulsanti Acquisto (Desktop + Mobile) */
/* ================================================ */

/* --- FIX PULSANTI PAGINA PRODOTTO (Style = Card Mobile) --- */
.main-product .product-form .add-to-cart.button.button--solid,
.main-product .product-form .shopify-payment-button__button,
.sticky-add-to-cart .sticky-add-to-cart__button .button.button--solid {
  /* Sfondo Sfumato Nero > Grigio Scuro */
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;

  /* Forma e Ombre */
  border-radius: 8px !important;
  box-shadow: none !important;

  /* Dimensioni */
  height: 44px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;

  /* Allineamento */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease !important;
}

/* Hover */
.main-product .product-form .add-to-cart.button.button--solid:hover,
.main-product .product-form .shopify-payment-button__button:hover,
.sticky-add-to-cart .sticky-add-to-cart__button .button.button--solid:hover {
  opacity: 0.9 !important;
}

/* Forza il testo del pulsante dinamico (es. PayPal) 
  ad essere bianco.
*/
.main-product .product-form .shopify-payment-button__button * {
  color: #ffffff !important;
}

/* --- INIZIO FIX 3 COLONNE DESKTOP --- */

@media screen and (min-width: 750px) {

  /* 1. Forza la griglia della collezione a 3 colonne */
  /* Uso l'ID della sezione che mi ha mostrato prima per essere super-specifico */
  #shopify-section-template--24875556962637__product-grid .grid--layout {

    --visible-cols: 3 !important;
    /* Forza 3 colonne */

    /* Annulla qualsiasi margine esterno che potrebbe rompere la griglia */
    margin: 0 !important;
  }

  /* 2. ANNULLA la regola 'margin: 10px' sulle card 
     che stava rompendo il layout della griglia. */
  #shopify-section-template--24875556962637__product-grid div.product-item.card {
    margin: 0 !important;
  }
}

/* ======================================================
   FIX V5 - CONFLITTO RISOLTO (TUTTO SCOPED AL 100%)
   ====================================================== */

/* --- 1. RESET E STILI DI BASE (Scoped) --- */
div.product-item.card[data-js-product-item] .product-item__title,
div.product-item.card[data-js-product-item] .product-item__title span,
div.product-item.card[data-js-product-item] a.product-item__title,
div.product-item.card[data-js-product-item] .product-item__description,
div.product-item.card[data-js-product-item] .product-item__description span,
div.product-item.card[data-js-product-item] .product-item__price,
div.product-item.card[data-js-product-item] .product-price--original,
div.product-item.card[data-js-product-item] .product-price--compare,
div.product-item.card[data-js-product-item] .product-price--compare span,
div.product-item.card[data-js-product-item] .card__text,
div.product-item.card[data-js-product-item] .product-item__text,
div.product-item.card[data-js-product-item] .remove-line-height-space,
div.product-item.card[data-js-product-item] .remove-line-height-space--small,
div.product-item.card[data-js-product-item] .text-animation--underline,
div.product-item.card[data-js-product-item] .text-size--large,
div.product-item.card[data-js-product-item] .text-line-height--small,
div.product-item.card[data-js-product-item] .text-weight--bold {
  background: transparent !important;
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  display: inline !important;
}

/* === INIZIO MODIFICA: PARENTESI INTERNE (Scoped) === */
div.product-item.card[data-js-product-item] {
  position: relative !important;
  z-index: 1 !important;
}




/* === FINE MODIFICA: PARENTESI INTERNE === */


/* Re-imposta display e stili per i blocchi di testo (Scoped) */
div.product-item.card[data-js-product-item] p.product-item__description {
  display: block !important;
  font-weight: 500 !important;
  color: var(--blue-solid) !important;
  font-size: 13px !important;
  margin-top: 3px !important;
}

div.product-item.card[data-js-product-item] a.product-item__title {
  display: block !important;
  color: #0F1111 !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
}

div.product-item.card[data-js-product-item] .product-item__title span.text-animation--underline {
  font-weight: 550 !important;
  font-size: 15px !important;
  color: #1c1b1a !important;
}

div.product-item.card[data-js-product-item] .product-item__price {
  display: block !important;
  font-weight: 600 !important;
  color: #ff6370 !important;
  font-size: 15px !important;
  margin-top: 3px !important;
}

div.product-item.card[data-js-product-item] .product-price {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

div.product-item.card[data-js-product-item] .product-price--compare,
div.product-item.card[data-js-product-item] .product-price--compare span {
  text-decoration: line-through !important;
  color: #4f2929 !important;
  font-size: 15px !important;
}

/* Badge Sconto Diagonale (Scoped) */
div.product-item.card[data-js-product-item] .discount-badge {
  position: absolute !important;
  top: 25px !important;
  left: -35px !important;
  width: 140px !important;
  padding: 5px 0 !important;
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.2 !important;
  transform: rotate(-45deg) !important;
  z-index: 10 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}



/* Nascondiamo il vecchio stile di percentuale (Scoped) */
div.product-item.card[data-js-product-item] .product-price--percent-savings {
  display: none !important;
}


/* --- 2. LAYOUT DESKTOP (Stile +/- aggiornato) --- */
@media screen and (min-width: 769px) {

  /* GENITORE (Card) (Scoped) */
  div.product-item.card[data-js-product-item] {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    padding: 10px !important;
    height: 100% !important;
    border: 2px solid var(--blue-solid) !important;
    border-top-left-radius: 12 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12 !important;
    border-bottom-left-radius: 12px !important;
  }

  /* FIGLIO 1: IMMAGINE (Link) (Scoped) */
  div.product-item.card[data-js-product-item]>a.card__image {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 0 !important;
  }

  /* Immagine (Figure o Img) (Scoped) */
  div.product-item.card[data-js-product-item]>a.card__image figure,
  div.product-item.card[data-js-product-item]>a.card__image img {
    width: 100% !important;
    height: 300px !important;
    object-fit: contain !important;
    position: relative !important;
    padding: 3% !important;
    margin: auto !important;
  }

  /* FIGLIO 2: TESTO (Prezzo, Titolo, Descrizione) (Scoped) */
  div.product-item.card[data-js-product-item]>div.card__text {
    order: 2 !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    background: transparent !important;
    min-height: 3.9em !important;
  }

  /* FIGLIO 3: PULSANTI (Contenitore) (Scoped) */
  div.product-item.card[data-js-product-item]>div.product-item__text:last-of-type {
    order: 3 !important;
    margin-top: auto !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
  }

  /* ======================================================
       STILE BADGE OMAGGIO e SPEDIZIONE (DESKTOP) (Scoped)
       ====================================================== */

  div.product-item.card[data-js-product-item] .all-badges-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    align-items: center !important;
  }

  div.product-item.card[data-js-product-item] .gift-badge-wrapper {
    margin-top: 0 !important;
  }

  div.product-item.card[data-js-product-item] .gift-badge-text {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #005E9C !important;
    background-color: #E6F3FB !important;
    border: 1px solid #BDE3F8 !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  div.product-item.card[data-js-product-item] .shipping-badge-text {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #006400 !important;
    background-color: #E6FBE6 !important;
    border: 1px solid #BDE3BD !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* === INIZIO STILE PULSANTI DESKTOP (Scoped) === */

  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    align-items: center !important;
  }

  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy .quick-buy-quantity {
    width: 40% !important;
    flex-shrink: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--blue-royal-deep) !important;
    color: #ffffff !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
  }

  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy .button {
    width: 60% !important;
    flex-grow: 1 !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  div.product-item.card[data-js-product-item] .product-item__quick-buy .quick-add-to-cart>a.button {
    width: 100% !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  div.product-item.card[data-js-product-item] .quick-buy-quantity button {
    width: 30px !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #fffcf5, #fff) !important;
    border-radius: 8px;
    border: 2px solid var(--blue-solid) !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  div.product-item.card[data-js-product-item] .quick-buy-quantity input {
    border: none !important;
    background: transparent !important;
    width: 30px !important;
    text-align: center !important;
    font-weight: bold !important;
    padding: 0 !important;
    height: 30px !important;
    font-size: 14px !important;
    color: #ffffff !important;
  }

  /* === FINE MODIFICHE STILE DESKTOP === */
}


/* 1. GENITORE IMMAGINE (Serve per centrare) */
div.product-item.card[data-js-product-item]>a.card__image {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  display: flex !important;
  /* Attiva Flexbox */
  align-items: center !important;
  /* Centra Verticalmente */
  justify-content: center !important;
  /* Centra Orizzontalmente */
  height: 100% !important;
  /* Occupa tutta l'altezza disponibile della cella */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. IMMAGINE REALE (Le tue modifiche) */
div.product-item.card[data-js-product-item]>a.card__image img,
div.product-item.card[data-js-product-item] figure img {
  max-width: 95% !important;
  max-height: 95% !important;
  width: auto !important;
  height: 180px !important;
  /* Tua altezza fissa */
  object-fit: contain !important;
  padding: 1% !important;
  margin: 0 auto !important;
  /* Sicurezza extra orizzontale */
}

/* ======================================================
  FIX V5 - Aggiunta Posizionamento per Badge Immagine
  ====================================================== */
div.product-item.card[data-js-product-item]>a.card__image {
  position: relative !important;
}

/* ======================================================
  FIX V5 - Stile Badge "Più Venduto" (Scoped)
  ====================================================== */
div.product-item.card[data-js-product-item] .badge-piu-venduto {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background-color: #008000 !important;
  /* Verde Best Seller */
  border-radius: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;


  /* Reset da altri stili */
  display: inline-block !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Adattamento Mobile per il badge */
@media screen and (max-width: 768px) {
  div.product-item.card[data-js-product-item] .badge-piu-venduto {
    font-size: 11px !important;
    padding: 3px 6px !important;
    top: 5px !important;
    right: 5px !important;
  }
}

/* ======================================================
  FIX V5 - STILE "HOT" (v5.9 - Fix Selettore Badge)
  ====================================================== */

/*
  Stile base della card Eroe (statica)
*/
div.product-item.card[data-js-product-item].is-hero-product-card {
  box-shadow: 0 8px 20px rgba(128, 128, 128, 0.4) !important;
  z-index: 10 !important;
  transform: none !important;
}

div.product-item.card[data-js-product-item].is-hero-product-card:hover {
  transform: none !important;
}

/* Rimuoviamo il glow dall'immagine */
div.product-item.card[data-js-product-item].is-hero-product-card .card__image {
  box-shadow: none !important;
}


/* ==============================================
  Angoli "Infuocati"
  ============================================== */

/* Angolo Alto-Destra "HOT" */
div.product-item.card[data-js-product-item].is-hero-product-card::before {
  border-top-color: #b39359 !important;
  border-right-color: var(--blue-solid) !important;
  box-shadow: inset -2px 2px 5px #FFD700 !important;
}



/* ==============================================
  Stile Badge "PIU HOT" (FIX SELETTORE SPECIFICITA')
  ============================================== */

div.product-item.card[data-js-product-item].is-hero-product-card .badge-piu-venduto {
  /* Sfondo "infuocato" con gradiente */
  background: linear-gradient(135deg, #ff6370 0%, #ff9ca3 50%, #ff6370 100%) !important;
  background-size: 200% 200% !important;

  color: #ffffff !important;
  font-weight: 700 !important;

  /* Ombra del testo per effetto "glow" */

  padding: 6px 12px !important;
  border-radius: 5px !important;
  border: 1px solid var(--blue-solid) !important;
  /* Bordo dorato sottile */

  /* POSIZIONAMENTO: in alto e centrato (Mobile + Desktop) */
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  /* Fondamentale per annullare il 'right: 10px' */

  /* Ombra esterna del badge piu definita */

  z-index: 11 !important;

  /* Forza il testo su una riga */
  white-space: nowrap !important;
}


/* ==============================================
  Reset degli altri stili (titolo, prezzo, bottone)
  ============================================== */

.is-hero-product-card .product-item__title .text-animation--underline {
  color: rgba(80, 80, 80, 1) !important;
  /* Ripristina colore default FIX V5 */
  text-shadow: none !important;
}

.is-hero-product-card .product-price--original {
  color: #ff6370 !important;
  /* Ripristina colore default FIX V5 */
  font-weight: 600 !important;
  font-size: 15px !important;
}

.is-hero-product-card .button--regular.button--fullwidth {
  background-color: #333 !important;
  /* Ripristina colore default FIX V5 */
  border-color: #333 !important;
  color: #fff !important;
  font-weight: bold !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}

/* ======================================================
   FIX V8 - RIPRISTINO BADGE V5 + GRADIENTI B&W RICHIESTI
   ====================================================== */

/* --- 1. RESET E STILI DI BASE (Scoped) --- */
div.product-item.card[data-js-product-item] .product-item__title,
div.product-item.card[data-js-product-item] .product-item__title span,
div.product-item.card[data-js-product-item] a.product-item__title,
div.product-item.card[data-js-product-item] .product-item__description,
div.product-item.card[data-js-product-item] .product-item__description span,
div.product-item.card[data-js-product-item] .product-item__price,
div.product-item.card[data-js-product-item] .product-price--original,
div.product-item.card[data-js-product-item] .product-price--compare,
div.product-item.card[data-js-product-item] .product-price--compare span,
div.product-item.card[data-js-product-item] .card__text,
div.product-item.card[data-js-product-item] .product-item__text,
div.product-item.card[data-js-product-item] .remove-line-height-space,
div.product-item.card[data-js-product-item] .remove-line-height-space--small,
div.product-item.card[data-js-product-item] .text-animation--underline,
div.product-item.card[data-js-product-item] .text-size--large,
div.product-item.card[data-js-product-item] .text-line-height--small,
div.product-item.card[data-js-product-item] .text-weight--bold {
  background: transparent !important;
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-shadow: none !important;
  display: inline !important;
}

/* === INIZIO MODIFICA: PARENTESI INTERNE (Scoped) === */
div.product-item.card[data-js-product-item] {
  position: relative !important;
  z-index: 1 !important;
}



/* === FINE MODIFICA: PARENTESI INTERNE === */


/* Re-imposta display e stili per i blocchi di testo (Scoped) */
div.product-item.card[data-js-product-item] p.product-item__description {
  display: block !important;
  font-weight: 500 !important;
  color: var(--blue-solid) !important;
  font-size: 13px !important;
  margin-top: 3px !important;
}

div.product-item.card[data-js-product-item] a.product-item__title {
  display: block !important;
  color: #0F1111 !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
}

div.product-item.card[data-js-product-item] .product-item__title span.text-animation--underline {

  font-size: 12px !important;
  color: var(--blue-solid) !important;
  /* Grassetto per evidenziare */
  font-weight: 650 !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

div.product-item.card[data-js-product-item] .product-item__price {
  display: block !important;
  font-weight: 600 !important;
  color: #ff6370 !important;
  font-size: 15px !important;
  margin-top: 3px !important;
}

div.product-item.card[data-js-product-item] .product-price {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

div.product-item.card[data-js-product-item] .product-price--compare,
div.product-item.card[data-js-product-item] .product-price--compare span {
  text-decoration: line-through !important;
  color: #4f2929 !important;
  font-size: 15px !important;
}

/* Badge Sconto Diagonale (Scoped) */
div.product-item.card[data-js-product-item] .discount-badge {
  position: absolute !important;
  top: 25px !important;
  left: -35px !important;
  width: 140px !important;
  padding: 5px 0 !important;
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.2 !important;
  transform: rotate(-45deg) !important;
  z-index: 10 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* Nascondiamo il vecchio stile di percentuale (Scoped) */
div.product-item.card[data-js-product-item] .product-price--percent-savings {
  display: none !important;
}


/* --- 2. LAYOUT DESKTOP (Stile +/- aggiornato) --- */
@media screen and (min-width: 769px) {

  /* GENITORE (Card) (Scoped) */
  div.product-item.card[data-js-product-item] {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    padding: 10px !important;
    height: 100% !important;
    border: 2px solid var(--blue-solid) !important;
    border-top-left-radius: 12 !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12 !important;
    border-bottom-left-radius: 12px !important;
  }

  /* FIGLIO 1: IMMAGINE (Link) (Scoped) */
  div.product-item.card[data-js-product-item]>a.card__image {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 0 !important;
  }

  /* Immagine (Figure o Img) (Scoped) */
  div.product-item.card[data-js-product-item]>a.card__image figure,
  div.product-item.card[data-js-product-item]>a.card__image img {
    width: 100% !important;
    height: 300px !important;
    object-fit: contain !important;
    position: relative !important;
    padding: 3% !important;
    margin: auto !important;
  }

  /* FIGLIO 2: TESTO (Prezzo, Titolo, Descrizione) (Scoped) */
  div.product-item.card[data-js-product-item]>div.card__text {
    order: 2 !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    background: transparent !important;
    min-height: 3.9em !important;
  }

  /* FIGLIO 3: PULSANTI (Contenitore) (Scoped) */
  div.product-item.card[data-js-product-item]>div.product-item__text:last-of-type {
    order: 3 !important;
    margin-top: auto !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
  }

  /* ======================================================
        STILE BADGE OMAGGIO e SPEDIZIONE (DESKTOP) (Scoped)
        ====================================================== */

  div.product-item.card[data-js-product-item] .all-badges-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    align-items: center !important;
  }

  div.product-item.card[data-js-product-item] .gift-badge-wrapper {
    margin-top: 0 !important;
  }

  div.product-item.card[data-js-product-item] .gift-badge-text {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #005E9C !important;
    background-color: #E6F3FB !important;
    border: 1px solid #BDE3F8 !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  div.product-item.card[data-js-product-item] .shipping-badge-text {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #006400 !important;
    background-color: #E6FBE6 !important;
    border: 1px solid #BDE3BD !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* === INIZIO STILE PULSANTI DESKTOP (Black & Gray Gradient) === */

  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    align-items: center !important;
  }

  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy .quick-buy-quantity {
    width: 40% !important;
    flex-shrink: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--blue-royal-deep) !important;
    color: #ffffff !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
  }

  /* PULSANTE 1: GRADIENTE NERO > GRIGIO (Aggiungi al carrello) */
  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy .button,
  div.product-item.card[data-js-product-item] .product-item__quick-buy .quick-add-to-cart>a.button,
  div.product-item.card[data-js-product-item] button.button {
    width: 60% !important;
    flex-grow: 1 !important;
    height: 40px !important;
    border-radius: 8px !important;

    /* Gradiente: Nero profondo verso Grigio Scuro/Metal */
    background: var(--blue-royal-deep) !important;
    color: #fff !important;
    border: 1px solid transparent !important;

    padding: 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  }

  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy .button:hover,
  div.product-item.card[data-js-product-item] .product-item__quick-buy .quick-add-to-cart>a.button:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-1px) !important;
  }

  /* PULSANTE 2: GRADIENTE INVERTITO (Selettore Opzioni / Link Prodotto) 
       Se il tuo tema usa 'a.button' per 'Scegli Opzioni' e 'button' per 'Aggiungi', 
       questo codice applica l'inversione.
    */
  div.product-item.card[data-js-product-item] a.button {
    /* Inversione: Grigio Metal > Nero */
    background: linear-gradient(90deg, #4d4d4d 0%, #000000 100%) !important;
  }

  /* Se i pulsanti usano la stessa classe, il primo stile vince per uniformità. 
       Se 'Scegli Opzioni' ha una classe specifica (es. .button--secondary), dimmelo per raffinarlo. */

  div.product-item.card[data-js-product-item] .product-item__quick-buy .quick-add-to-cart>a.button {
    width: 100% !important;
  }

  div.product-item.card[data-js-product-item] .quick-buy-quantity button {
    width: 30px !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #fffcf5, #fff) !important;
    border-radius: 8px;
    border: 2px solid var(--blue-solid) !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  div.product-item.card[data-js-product-item] .quick-buy-quantity input {
    border: none !important;
    background: transparent !important;
    width: 30px !important;
    text-align: center !important;
    font-weight: bold !important;
    padding: 0 !important;
    height: 30px !important;
    font-size: 14px !important;
    color: #ffffff !important;
  }

  /* === FINE MODIFICHE STILE DESKTOP === */
}


/* --- 3. LAYOUT MOBILE --- */
@media screen and (max-width: 768px) {

  /* GENITORE (Card) (Scoped) */
  div.product-item.card[data-js-product-item] {
    display: grid !important;
    grid-template-columns: 50% 1fr !important;
    grid-template-rows: 280px auto !important;
    /* Aumentato da 250px a 280px */
    background-color: #ffffff !important;
    padding: 10px !important;
    height: auto !important;
    align-items: stretch !important;
    gap: 5px !important;
    border: 2px solid var(--blue-solid) !important;
    border-radius: 12px !important;
  }

  /* FIGLIO 1: IMMAGINE (Link) (Scoped) */
  div.product-item.card[data-js-product-item]>a.card__image {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: auto !important;
    height: 310px !important;
    /* Aumentato da 280px */
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  div.product-item.card[data-js-product-item]>a.card__image img,
  div.product-item.card[data-js-product-item] figure img {
    max-width: 95% !important;
    max-height: 95% !important;
    width: auto !important;
    height: 210px !important;
    /* Aumentato da 180px per mantenere proporzioni */
    object-fit: contain !important;
    padding: 0 !important;
  }

  /* FIGLIO 2: TESTO (Colonna 2, Riga 1) (Scoped) */
  div.product-item.card[data-js-product-item]>div.card__text.product-item__text {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    background-color: transparent !important;
    height: 310px !important;
    /* Aumentato da 280px */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: start !important;
    text-align: left !important;
    padding-left: 5px !important;
    padding-top: 25px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  /* Titolo (Scoped) */
  div.product-item.card[data-js-product-item]>a.product-item__title {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    text-align: left !important;
    padding-left: 5px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
  }

  div.product-item.card[data-js-product-item] .product-item__title span {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #0F1111 !important;
    padding: 0 !important;
  }

  /* FIGLIO 3: PULSANTI (Colonna 1 e 2, Riga 2) (Scoped) */
  div.product-item.card[data-js-product-item]>div.product-item__text:not(.card__text) {
    grid-column: 1 / 3 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
    display: block !important;
  }

  /* STILE PULSANTE MOBILE: GRADIENTE NERO > GRIGIO */
  div.product-item.card[data-js-product-item] .button {
    width: 100% !important;
    border-radius: 8px !important;

    /* Gradiente Mobile Coerente */
    background: var(--blue-royal-deep) !important;
    color: #fff !important;
    border: 1px solid transparent !important;

    padding: 0 !important;
    height: 40px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* INVERSIONE PER MOBILE (Opzionale, se distinguibile) */
  div.product-item.card[data-js-product-item] a.button {
    background: var(--blue-royal-deep) !important;
  }

  /* Contenitore dei pulsanti (Scoped) */
  div.product-item.card[data-js-product-item] .product-item__quick-buy form,
  div.product-item.card[data-js-product-item] .product-item__quick-buy .quick-add-to-cart-button,
  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy {
    display: block !important;
    width: 100% !important;
  }

  /* Selettore Quantità (+ e -) (Scoped) */
  div.product-item.card[data-js-product-item] .quantity-selector,
  div.product-item.card[data-js-product-item] .quick-buy-quantity {
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 5px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--blue-royal-deep) !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
  }

  /* Pulsante "Aggiungi al Carrello" (quando è sotto il selettore) (Scoped) */
  div.product-item.card[data-js-product-item] .product-item__quick-buy .button,
  div.product-item.card[data-js-product-item] .flex-buttons-quickbuy .button {
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 40px !important;
  }

  /* Stile bottoni + e - (Tornati chiari) (Scoped) */
  div.product-item.card[data-js-product-item] .quick-buy-quantity button {
    width: 30px !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #fffcf5, #fff) !important;
    border-radius: 8px;
    border: 2px solid var(--blue-solid) !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Input interno (tra + e -) (Scoped) */
  div.product-item.card[data-js-product-item] .quick-buy-quantity input {
    border: none !important;
    background: transparent !important;
    width: 30px !important;
    text-align: center !important;
    font-weight: bold !important;
    padding: 0 !important;
    height: 30px !important;
    font-size: 14px !important;
    color: #ffffff !important;
  }

  /* SEPARATORE MOBILE (Scoped) */
  div.product-item.card[data-js-product-item] .mobile-divider {
    display: block !important;
    width: 100%;
    height: 1px;
    border: 0;
    background-color: #eeeeee !important;
    margin: 8px 0 !important;
    padding: 0 !important;
  }

  /* Override Badge Diagonale per Mobile (Scoped) */
  div.product-item.card[data-js-product-item] .discount-badge {
    top: 18px !important;
    left: -40px !important;
    width: 120px !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
  }

  /* ======================================================
        STILE BADGE OMAGGIO e SPEDIZIONE (MOBILE) (Scoped)
        ====================================================== */

  div.product-item.card[data-js-product-item] .all-badges-container {
    display: block !important;
    margin-top: 5px !important;
    text-align: left !important;
  }

  div.product-item.card[data-js-product-item] .gift-badge-wrapper {
    margin-top: 0 !important;
    display: block !important;
  }

  div.product-item.card[data-js-product-item] .shipping-badge-wrapper {
    display: block !important;
    margin-top: 5px !important;
  }

  div.product-item.card[data-js-product-item] .gift-badge-text {
    font-size: 9px !important;
    padding: 1.5px 5px !important;
    letter-spacing: 0.2px !important;

    display: inline-block !important;
    font-weight: 700 !important;
    color: #005E9C !important;
    background-color: #E6F3FB !important;
    border: 1px solid #BDE3F8 !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
  }

  div.product-item.card[data-js-product-item] .shipping-badge-text {
    font-size: 9px !important;
    padding: 1.5px 5px !important;
    letter-spacing: 0.2px !important;

    display: inline-block !important;
    font-weight: 700 !important;
    color: #006400 !important;
    background-color: #E6FBE6 !important;
    border: 1px solid #BDE3BD !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
  }


}

/* ======================================================
  FIX V5 - Aggiunta Posizionamento per Badge Immagine
  ====================================================== */
div.product-item.card[data-js-product-item]>a.card__image {
  position: relative !important;
}

/* ======================================================
  FIX V5 - Stile Badge "Più Venduto" (Scoped)
  ====================================================== */
/* RIPRISTINATO ESATTAMENTE COME V5 */
div.product-item.card[data-js-product-item] .badge-piu-venduto {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background-color: #008000 !important;
  /* Verde Best Seller */
  border-radius: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;

  /* Reset da altri stili */
  display: inline-block !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Adattamento Mobile per il badge */
@media screen and (max-width: 768px) {
  div.product-item.card[data-js-product-item] .badge-piu-venduto {
    font-size: 11px !important;
    padding: 3px 6px !important;
    top: 5px !important;
    right: 5px !important;
  }
}

/* ======================================================
  FIX V5 - STILE "HOT" (v5.9 - Fix Selettore Badge)
  ====================================================== */

/* Stile base della card Eroe (statica) */
div.product-item.card[data-js-product-item].is-hero-product-card {
  box-shadow: 0 8px 20px rgba(128, 128, 128, 0.4) !important;
  z-index: 10 !important;
  transform: none !important;
}

div.product-item.card[data-js-product-item].is-hero-product-card:hover {
  transform: none !important;
}

/* Rimuoviamo il glow dall'immagine */
div.product-item.card[data-js-product-item].is-hero-product-card .card__image {
  box-shadow: none !important;
}


/* ==============================================
  Angoli "Infuocati"
  ============================================= */




/* ==============================================
  Stile Badge "PIU HOT" (FIX SELETTORE SPECIFICITA')
  ============================================= */

/* Questo selettore ora include il suo scope FIX V5 e vincera' */
/* Questo selettore include il fix V5 e vince su tutto */
div.product-item.card[data-js-product-item].is-hero-product-card .badge-piu-venduto {

  /* ORO VIVO EFFETTO 3D */
  /* Scuro -> Luce Brillante -> Scuro (Simula il lingotto) */
  background: linear-gradient(135deg, #cfa247 0%, #fff0b3 50%, #cfa247 100%) !important;
  background-size: 200% 200% !important;

  /* TESTO: Blu Scuro (Obbligatorio per leggere su Oro Vivo) */
  color: var(--blue-solid) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;

  padding: 6px 12px !important;
  border-radius: 5px !important;

  /* Bordo Blu per abbinarsi al testo */
  border: 1px solid var(--blue-solid) !important;

  /* POSIZIONAMENTO */
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  z-index: 11 !important;
  white-space: nowrap !important;

  /* Opzionale: ombra leggera per staccarlo dallo sfondo */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}


/* ==============================================
  Reset degli altri stili (titolo, prezzo, bottone)
  ============================================= */

.is-hero-product-card .product-item__title .text-animation--underline {
  color: rgba(80, 80, 80, 1) !important;
  /* Ripristina colore default FIX V5 */
  text-shadow: none !important;
}

.is-hero-product-card .product-price--original {
  color: #ff6370 !important;
  /* Ripristina colore default FIX V5 */
  font-weight: 600 !important;
  font-size: 15px !important;
}

.is-hero-product-card .button--regular.button--fullwidth {
  background-color: #333 !important;
  /* Ripristina colore default FIX V5 */
  border-color: #333 !important;
  color: #fff !important;
  font-weight: bold !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}

/* ======================================================
   RIPRISTINO BADGE SCONTO DIAGONALE (Priority Fix)
   ====================================================== */

div.product-item.card[data-js-product-item] .discount-badge {
  /* Assicura che sia visibile e non tagliato */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Posizionamento Diagonale */
  position: absolute !important;
  top: 25px !important;
  left: -35px !important;
  width: 140px !important;
  transform: rotate(-45deg) !important;

  /* Stile Grafico */
  padding: 5px 0 !important;
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.2 !important;

  /* Z-INDEX CRITICO: Deve essere superiore all'immagine (che è 1) */
  z-index: 50 !important;
  pointer-events: none !important;
  /* Evita che clicchi sul badge invece che sul prodotto */
}

/* --- FIX DIMENSIONI MOBILE --- */
@media screen and (max-width: 768px) {
  div.product-item.card[data-js-product-item] .discount-badge {
    top: 18px !important;
    left: -40px !important;
    width: 120px !important;
    font-size: 11px !important;
    padding: 4px 0 !important;
  }
}

/* ============================================================
   ESTENSIONE BADGE SCONTO: PAGINA PRODOTTO & QUICK VIEW
   [Basato su Configurazione Salvata 2025-11-17]
   ============================================================ */

/* 1. Assicuriamoci che il contenitore tagli il nastro correttamente */
.product-gallery-item,
.product__media-item,
.quick-view-image-container {
  position: relative !important;
  overflow: hidden !important;
  /* Fondamentale per l'effetto "angolo" */
}

/* 2. Applicazione Stile Badge ai nuovi contenitori */
.product-gallery-item .discount-badge,
.product__media-item .discount-badge,
.quick-view-image-container .discount-badge {
  /* Logica di visibilità */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Posizionamento (Identico alla Card) */
  position: absolute !important;
  top: 25px !important;
  left: -35px !important;
  width: 140px !important;
  transform: rotate(-45deg) !important;

  /* Stile Grafico (Rosso #E70054) */
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 5px 0 !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;

  /* Z-Index per stare sopra l'immagine */
  z-index: 20 !important;
  pointer-events: none !important;
}

/* --- Adattamento per Mobile (Pagina Prodotto) --- */
@media screen and (max-width: 768px) {

  .product-gallery-item .discount-badge,
  .product__media-item .discount-badge {
    top: 18px !important;
    left: -40px !important;
    width: 120px !important;
    font-size: 12px !important;
  }
}

/* 3. Pallino MOLTO EVIDENTE */
.product-style-box li::before {
  content: '●' !important;
  /* Cerchio pieno */
  position: absolute !important;
  left: 0 !important;

  /* Aumento dimensione e contrasto */
  font-size: 20px !important;
  /* Molto più grande */
  color: #000000 !important;
  /* Nero assoluto */

  /* Aggiustamento fine per centrarlo con il testo più grande */
  top: -2px !important;
  line-height: 1.2 !important;
}

/* --- FIX ELENCO PUNTATO MANUALE (MIGLIORATO) --- */

/* 1. Resettiamo il contenitore per togliere margini strani */
.product-style-box ol,
.product-style-box ul {
  list-style: none !important;
  /* Rimuove qualsiasi stile nativo rotto */
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
}

/* 2. Impostiamo la riga della lista */
.product-style-box li {
  list-style: none !important;
  /* Sicurezza extra */
  position: relative !important;
  /* Serve da riferimento per il pallino */
  padding-left: 25px !important;
  /* Aumentato spazio per il pallino più grande */
  margin-bottom: 8px !important;
  /* Spazio tra le righe più generoso */
  text-align: left !important;
  font-size: 16px !important;
  /* (Opzionale) Dimensione testo della lista */
  line-height: 1.5 !important;
  /* Altezza riga del testo per leggibilità */
  color: rgb(255, 255, 255) !important;
  font-weight: 550 !important;
}

/* 3. SIMBOLO SPUNTA (Checkmark) GRIGIO */
.product-style-box li::before {
  content: '✔' !important;
  /* Simbolo di spunta */
  position: absolute !important;
  left: 0 !important;

  /* Stile */
  font-size: 22px !important;
  /* La spunta è visivamente più "pesante", 22-24px è l'ideale */
  color: #666666 !important;
  /* Grigio sfumato */
  font-weight: bold !important;

  /* Allineamento preciso */
  top: 0px !important;
  line-height: 1.5 !important;
}

/* --- STILE TESTO LISTA (SOLO MOBILE) --- */
@media screen and (max-width: 768px) {
  .product-style-box li {
    /* 1. Grandezza Testo */
    font-size: 14px !important;
    /* Dimensione standard ottimale per lettura mobile */

    /* 2. Spaziatura Righe (Interlinea) */
    line-height: 1.6 !important;
    /* Più aria tra le righe per non affaticare l'occhio */

    /* 3. Peso (Opzionale) */
    font-weight: 500 !important;
    /* 400 è normale, 500 è leggermente più marcato */

    /* 4. Spaziatura dal bordo */
    padding-left: 25px !important;
    /* Mantiene spazio per il simbolo */
    margin-bottom: 10px !important;
    /* Separa bene ogni punto dell'elenco */
  }
}

/* --- FIX QUANTITÀ PAGINA PRODOTTO (Basato sul tuo HTML) --- */

/* 1. IL CONTENITORE (product-quantity) */
product-quantity.product-quantity[data-js-product-quantity] {
  background: var(--blue-royal-deep) !important;
  border: none !important;
  border-radius: 8px !important;
  /* Arrotondato */
  width: 140px !important;
  /* Larghezza fissa */
  height: 44px !important;
  /* Altezza identica al pulsante "Aggiungi" */
  padding: 5px !important;
  /* Spazio interno per i bottoni */

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
}

/* 2. I PULSANTI (button con classi .product-quantity__minus e .product-quantity__plus) */
product-quantity.product-quantity button.product-quantity__minus,
product-quantity.product-quantity button.product-quantity__plus {
  background: linear-gradient(to bottom, #fffcf5, #fff) !important;
  border-radius: 8px;
  border: 2px solid var(--blue-solid) !important;
  color: #ffffff !important;
  width: 34px !important;
  /* Larghezza fissa */
  height: 34px !important;
  /* Altezza fissa */
  min-width: 34px !important;
  /* Forza la larghezza */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: background 0.2s ease !important;
}

/* Hover sui pulsanti */
product-quantity.product-quantity button:hover {
  background-color: #f2f2f2 !important;
}

/* 3. L'INPUT NUMERICO (input con classe .product-quantity__selector) */
product-quantity.product-quantity input.product-quantity__selector {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-align: center !important;

  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;

  -moz-appearance: textfield !important;
  /* Firefox */
}

/* Rimuove le frecce di default (Chrome/Safari) */
product-quantity.product-quantity input::-webkit-outer-spin-button,
product-quantity.product-quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 4. CENTRATURA ICONE SVG */
product-quantity.product-quantity button svg {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
  margin: auto !important;
}

/* ======================================================
   FIX QUICK VIEW (MODAL) - Stile Uniformato alla Pagina Prodotto
   ====================================================== */

/* 1. QUANTITÀ (Contenitore Pillola Grigia) */
div.modal-content product-quantity.product-quantity,
div.modal-content .product-quantity {
  background: var(--blue-royal-deep) !important;
  border: none !important;
  /* Via i vecchi bordi */
  border-radius: 8px !important;

  width: 140px !important;
  height: 44px !important;
  padding: 5px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  /* Allineamento col bottone */
}

/* 2. PULSANTI + e - (Quadratini Bianchi) */
div.modal-content product-quantity button.product-quantity__minus,
div.modal-content product-quantity button.product-quantity__plus,
div.modal-content .product-quantity .product-quantity__minus,
div.modal-content .product-quantity .product-quantity__plus {
  background: linear-gradient(to bottom, #fffcf5, #fff) !important;
  border-radius: 8px;
  border: 2px solid var(--blue-solid) !important;
  color: #ffffff !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: background 0.2s ease !important;
}

/* Hover pulsanti + e - */
div.modal-content product-quantity button:hover,
div.modal-content .product-quantity button:hover {
  background-color: #f2f2f2 !important;
}

/* Centratura icone SVG nei pulsanti */
div.modal-content product-quantity button svg,
div.modal-content .product-quantity button svg {
  width: 10px !important;
  height: 10px !important;
  fill: #333 !important;
  display: block !important;
  margin: auto !important;
}

/* 3. INPUT CENTRALE (Trasparente e Bold) */
div.modal-content product-quantity input.product-quantity__selector,
div.modal-content .product-quantity .product-quantity__selector {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: #ffffff !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-align: center !important;

  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

/* 4. PULSANTE "AGGIUNGI AL CARRELLO" (Gradiente Nero) */
div.modal-content .add-to-cart.button--product,
div.modal-content button[name="add"] {
  /* Gradiente Nero > Grigio Scuro */
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;

  border-radius: 8px !important;
  box-shadow: none !important;

  height: 44px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  padding: 0 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease !important;
}

/* Hover del pulsante */
div.modal-content .add-to-cart.button--product:hover,
div.modal-content button[name="add"]:hover {
  opacity: 0.9 !important;
  background: linear-gradient(90deg, #4d4d4d 0%, #000000 100%) !important;
  transform: none !important;
  /* Rimuove vecchi effetti di movimento */
}


/* ======================================================
   FIX DEFINITIVO: NASCONDI SOLO IL PREZZO DUPLICATO IN ALTO
   Target: Attributo 'price-compact' trovato via Ispeziona
   ====================================================== */

div.modal-content [data-update-block="price-compact"] {
  display: none !important;
}

/* ============================================================
   FIX DEFINITIVO LAYOUT DESKTOP: QUANTITÀ + AGGIUNGI AL CARRELLO
   Target: .product__cart-functions .flex-buttons
   ============================================================ */

@media screen and (min-width: 769px) {

  /* 1. IL CONTENITORE GENITORE (Li forza su una riga) */
  .product__cart-functions .flex-buttons {
    display: flex !important;
    flex-direction: row !important;
    /* Orizzontale */
    flex-wrap: nowrap !important;
    /* Vietato andare a capo */
    align-items: center !important;
    /* Centrati verticalmente */
    gap: 10px !important;
    /* Spazio tra i due */
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* 2. IL SELETTORE QUANTITÀ (Bloccato a sinistra) */
  .product__cart-functions product-quantity.product-quantity {
    width: 180px !important;
    /* Larghezza fissa identica alla Quick View */
    min-width: 140px !important;
    /* Non si schiaccia */
    flex-shrink: 0 !important;
    margin: 0 !important;
    /* Rimuove margini che rompono il layout */
    height: 44px !important;
    /* Altezza sincronizzata */
  }

  /* 3. IL PULSANTE "AGGIUNGI AL CARRELLO" (Riempie lo spazio) */
  .product__cart-functions button[name="add"],
  .product__cart-functions .add-to-cart {
    width: auto !important;
    /* Reset del 100% */
    flex-grow: 1 !important;
    /* Occupa tutto lo spazio rimanente a destra */
    margin: 0 !important;
    /* Rimuove margini */
    height: 44px !important;
    /* Altezza sincronizzata */
  }

}

/* --- NASCONDI SOTTOTITOLO (VENDOR/BRAND) --- */
.product__subtitle {
  display: none !important;
}

/* =========================================
   CUSTOM HEADER MOBILE (Account + Layout)
   [Aggiornato al 2025-11-19]
   ========================================= */

/* 1. Nascondi l'icona account mobile su Desktop (Schermi grandi) */
.header__icon--mobile-account {
  display: none;
}

/* FIX HEADER MOBILE DEFINITIVO (Layout + Menu Rilevante + Badge) */
@media screen and (max-width: 989px) {

  /* --- 1. LAYOUT GENERALE --- */
  .header__content,
  .header-mobile-container,
  .header__icons {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    height: 60px;
  }

  /* --- 2. POSIZIONAMENTO ELEMENTI --- */

  /* MENU (Sinistra) - RESO PIÙ RILEVANTE */
  .mobile-menu-button,
  .header__icon--menu {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10;
  }

  /* Regola specifica per ingrandire SOLO l'icona Menu */
  .mobile-menu-button svg,
  .header__icon--menu svg {
    width: 28px !important;
    /* Più grande (era 24px) */
    height: 28px !important;
    stroke-width: 1.7px !important;
    /* Più spessa (era 1.3px) */
    color: inherit;
  }

  /* LOGO (Centro) */
  .header__heading,
  .header__logo,
  .site-header__logo {
    position: relative !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 1;
  }

  /* CARRELLO (Destra Estrema) */
  .mobile-cart-button,
  .header__icon--cart {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10;
    overflow: visible !important;
  }

  /* ACCOUNT (A sinistra del carrello) */
  .header__icon--mobile-account {
    position: absolute !important;
    right: 65px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10;
    display: flex !important;
  }

  /* Regola per Account e Carrello (Restano fini ed eleganti) */
  .header__icon--mobile-account svg,
  .mobile-cart-button svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 1.3px !important;
    /* Restano sottili */
    color: inherit;
  }

  /* --- 3. FIX BADGE CONTEGGIO CARRELLO --- */
  .mobile-cart-button span[data-header-cart-count],
  .header__icon--cart span[data-cart-count] {
    display: flex !important;
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: bold !important;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
  }

  .mobile-cart-button span[data-header-cart-count]:empty,
  .mobile-cart-button span[data-header-cart-count="0"] {
    display: none !important;
  }
}

/* ======================================================
   POSIZIONAMENTO BADGE (OMAGGIO + SPEDIZIONE)
   Strategia: Desktop (Flusso Normale) | Mobile (Top Right)
   ====================================================== */

/* 1. STILE BASE (Desktop & Default) */
div.product-item.card[data-js-product-item] .all-badges-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 8px !important;
  /* Su Desktop seguono il flusso naturale sotto il prezzo */
  position: relative !important;
  top: auto !important;
  right: auto !important;
  justify-content: flex-start !important;
}

/* Stile Testo Badge (Base) */
div.product-item.card[data-js-product-item] .gift-badge-text,
div.product-item.card[data-js-product-item] .shipping-badge-text {
  display: inline-block !important;
  font-size: 10px !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

/* Nascondi l'icona Account Mobile su schermi Desktop (larghezza > 989px) */
@media screen and (min-width: 990px) {
  .header__icon--mobile-account {
    display: none !important;
  }
}

/* Nasconde Account e Carrello Mobile quando lo schermo è Desktop (> 989px) */
@media screen and (min-width: 990px) {

  .header__icon--mobile-account,
  .header__icon--mobile-cart {
    display: none !important;
  }
}

/* qua iniziano le modifiche header e mega menu */


/* ==========================================================================
   GEMINI ROYAL LUXURY PACK - V49 (READABILITY FIX)
   Stato: Hover Menu Leggibile (Oro Solido), Categorie Eleganti (No Background).
   ========================================================================== */
/* 0. PALETTE PREMIUM */
:root {
  --gold-bright2: #d4af37;
  --gold-metal: linear-gradient(135deg, #8a6e2f 0%, #d4af37 50%, #8a6e2f 100%);
  --gold-bright: #ffd700;
  /* Oro per hover */
  --blue-royal-mega-menu: linear-gradient(to bottom, #ffffff 50%, #f0f4f8 100%);
  --blue-royal-deep1: linear-gradient(180deg, #040608 0%, #395f8c 100%);
  --blue-royal-deep: linear-gradient(135deg, #141e30 0%, #243b55 100%);
  --blue-royal-card-text: linear-gradient(to top, #dfe9f3 0%, #ffffff 100%) !important;
  --blue-solid: #051b35;
  --bordo-oro: #d4af37;
  --gold-glow: 0 0 15px rgba(207, 162, 71, 0.3);
  --shadow-luxury: 0 20px 50px rgba(0, 0, 0, 0.3);
}


html body {
  color: var(--blue-solid) !important;
}

/* -------------------------------------------------------
   1. SEARCH BAR
   ------------------------------------------------------- */
html body div#site-menu-sidebar .site-search-handle,
html body .mobile-search .site-search-handle {
  background: #fff !important;
  border: 2px solid transparent !important;
  border-image: var(--blue-royal-deep) 1 !important;
  color: var(--blue-solid) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  width: 100% !important;
}

html body div#site-menu-sidebar .site-search-handle:hover,
html body .mobile-search .site-search-handle:hover {
  box-shadow: 0 0 25px rgba(207, 162, 71, 0.5) !important;
}

html body div#site-menu-sidebar .site-search-handle .button__icon,
html body .mobile-search .site-search-handle .button__icon {
  display: none !important;
}

html body div#site-menu-sidebar .site-search-handle form,
html body .mobile-search .site-search-handle form {
  padding-left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  overflow: visible !important;
  margin: 0 !important;
}

html body div#site-menu-sidebar .site-search-handle input[type="search"],
html body .mobile-search .site-search-handle input[type="search"] {
  color: var(--blue-solid) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 15px !important;
  height: 100% !important;
  width: 100% !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  appearance: none !important;
  letter-spacing: 0.5px !important;
}

html body div#site-menu-sidebar .site-search-handle input[type="search"]::placeholder,
html body .mobile-search .site-search-handle input[type="search"]::placeholder {
  color: #8c857b !important;
  opacity: 0.7 !important;
}

/* Rimosso sfondo blu, ora è pulito su mobile */
.header-container.mobile-search {
  padding: 10px 15px !important;
  background: #fff !important;

  /* Definisce lo stile solido e la larghezza solo in basso */
  border-style: solid !important;
  border-width: 0 0 2px 0 !important;
  /* 0 sopra, 0 destra, 2px sotto, 0 sinistra */
  border-color: transparent !important;
  /* Colore di fallback */

  /* Applica il gradiente. Il numero '1' alla fine è lo "slice" fondamentale per vederlo */
  border-image: var(--gold-metal) 1 !important;
}

/* -------------------------------------------------------
   2. MONOLITE & HEADER
   ------------------------------------------------------- */
#shopigem-monolith {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
  background: var(--blue-royal-deep) !important;
  display: flex;
  flex-direction: column;
  height: auto !important;
  box-shadow: none !important;

  /* ANIMAZIONE FADE */
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s !important;
}

#shopigem-monolith::after {
  content: '';
  display: block !important;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px !important;
  background: var(--gold-metal);
  opacity: 1 !important;
  z-index: 100001;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

#shopigem-monolith.header-fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-100%) !important;
  pointer-events: none !important;
}

body main-header,
body #site-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: block !important;
  margin: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 0 !important;
}

.header__top {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

.header-container.header-container--bottom,
.header-bottom,
.site-nav,
.scrollable-navigation-button {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

body main-header::after,
body #site-header::after {
  display: none !important;
}

#site-header .logo-img img,
#site-header #logo img {
  max-height: 90px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

.header-wrapper,
.header-wrapper::after,
.header-wrapper::before {
  border: none !important;
  box-shadow: none !important;
}

@media screen and (max-width: 989px) {

  #site-header .logo-img img,
  #site-header #logo img {
    max-height: 80px !important;
    margin-top: 10px !important;
  }
}

.sticky-header,
.sticky-header.show,
#site-menu-sidebar {
  display: none !important;
}

#site-menu-sidebar input,
.sidebar__body>div:empty {
  display: none !important;
}

#site-cart-sidebar,
sidebar-drawer.sidebar {
  z-index: 2147483600 !important;
}

.sidebar__body,
.sidebar__header,
.sidebar__footer {
  visibility: visible !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------
   3. STILI PULSANTI
   ------------------------------------------------------- */
.god-toggle,
.shopigem-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(207, 162, 71, 0.5) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin-left: 10px !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
  box-shadow: none !important;
}

.god-link.is-active-orange .god-toggle,
.shopigem-menu-item.active .shopigem-toggle {
  background: var(--gold-metal) !important;
  border-color: #ffffff !important;
  color: var(--blue-solid) !important;
  transform: rotate(135deg) !important;

  /* FIX VISIBILITÀ TESTO */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--blue-solid) !important;
  /* Forza il colore bianco pieno */
}

.god-close {
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 1000 !important;
  font-size: 22px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.god-close:active {
  transform: scale(0.95) !important;
}


/* -------------------------------------------------------
   4. DESKTOP SYSTEM (Min 990px)
   ------------------------------------------------------- */
@media screen and (min-width: 990px) {
  body {
    padding-top: 70px !important;
    overflow-x: hidden !important;
  }

  body::before {
    content: "";
    display: block;
    width: 100%;
    height: 110px;
    background: transparent;
  }

  .shopigem-desktop-nav {
    position: static !important;
    width: 100%;
    height: 70px !important;
    background: transparent !important;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 0 auto !important;
    max-width: 1360px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
  }

  .shopigem-menu-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .shopigem-menu-item {
    position: static !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* LINK PRINCIPALI */
  .shopigem-menu-link {
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    padding: 25px 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    position: relative;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
  }

  .shopigem-menu-link::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--gold-metal);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateX(-50%);
  }

  .shopigem-menu-link:hover::after,
  .shopigem-menu-item.active .shopigem-menu-link::after {
    width: 100%;
  }

  /* FIX HOVER LEGGIBILE */
  .shopigem-menu-link:hover,
  .shopigem-menu-item.active .shopigem-menu-link {
    /* Rimosso background-clip per massima leggibilità */
    background: var(--gold-metal) !important;
    /* 2. Ritaglia il fondo sulla forma delle lettere */
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* 3. Rendi il testo trasparente (altrimenti copre il gradiente) */
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;


  }

  /* CONTAINER DROPDOWN */
  .native-mega-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--blue-royal-mega-menu) !important;
    padding: 30px 40px !important;
    border-bottom: 4px solid var(--blue-solid) !important;
    border-image: var(--blue-royal-deep) 1 !important;
    border-radius: 0 0 16px 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(10px) !important;
    overflow: visible !important;

  }

  .shopigem-menu-item.active .native-mega-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9000 !important;
    transform: translateY(0) !important;
  }

  .native-mega-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    max-width: 1600px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .mega-grid-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100% !important;
    /* Assicura che usi tutto lo spazio orizzontale disponibile */
    /* Nessun overflow o height qui */
  }

  /* AREA SINISTRA */
  .mega-left-80 {
    /* LAYOUT INTERNO */
    display: grid !important;
    /* Esempio: 3 colonne interne, adattale se serve */
    grid-template-columns: repeat(3) !important;
    gap: 30px 40px !important;

    /* GESTIONE SCROLL VERTICALE */
    max-height: 350px !important;
    /* Punto di attivazione scroll */
    overflow-y: auto !important;
    /* Scroll attivo se altezza > 350px */
    overflow-x: auto !important;
    /* Niente scroll orizzontale su questo box */

    /* GESTIONE RESIZE ORIZZONTALE */
    width: 100% !important;
    /* Si allarga/stringe insieme al genitore */
    box-sizing: border-box !important;
    /* Padding incluso nel calcolo larghezza */

    /* STABILITÀ GRIGLIA */
    align-content: start !important;
    /* Mantiene il contenuto in alto */
    min-height: 0 !important;
    /* Evita che il box si blocchi su dimensioni minime errate */

    /* ESTETICA */
    padding-right: 20px !important;
    padding-bottom: 10px !important;
    scrollbar-width: thin;
    scrollbar-color: #cfa247 #f0f0f0;
  }

  .mega-left-80::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .mega-left-80::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
  }

  .mega-left-80::-webkit-scrollbar-thumb {
    background-color: #cfa247;
    border-radius: 4px;
  }

  .native-mega-col {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border: none !important;
    padding: 0 !important;
  }



  /* SUB-LINKS */
  .mega-sub-list a {
    font-size: 14px !important;
    color: var(--blue-solid) !important;
    text-decoration: none;
    display: block !important;
    transition: all 0.2s ease !important;
    padding: 4px 0 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    position: relative;
    left: 0;
    font-weight: 500 !important;
  }

  .mega-sub-list a:hover {
    color: #b38728 !important;
    left: 5px;
    font-weight: 700 !important;
  }

  /* AREA DESTRA */
  .native-mega-col.special-slider-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: auto !important;
    min-width: 850px !important;
    margin-left: 30px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    border: none !important;
    margin-top: 0 !important;
  }

  #shopigem-god-drawer {
    display: none !important;
  }

  #site-menu-sidebar {
    display: none !important;
    visibility: hidden !important;
  }
}

/* -------------------------------------------------------
   5. MOBILE SYSTEM (Blu Profondo)
   ------------------------------------------------------- */
@media screen and (max-width: 989px) {
  body {
    padding-top: 120px !important;
    overflow-x: hidden !important;
  }

  body::before {
    height: 60px;
  }

  #shopigem-monolith {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    background: #fff !important;
    border-bottom: none !important;
  }

  #shopigem-monolith::after {
    display: none !important;
  }

  .header__top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 15px !important;
    position: relative !important;
  }

  .header__icons {
    margin-left: auto !important;
    z-index: 10;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    color: var(--blue-solid) !important;
  }

  .header__icons svg {
    fill: var(--blue-solid) !important;
    stroke: var(--blue-solid) !important;
  }

  button.mobile-menu-button {
    margin-right: auto !important;
    z-index: 20001 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 44px !important;
    width: 44px !important;
  }

  .mobile-menu-button svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: var(--blue-solid) !important;
  }

  body main-header,
  body #site-header {
    padding-top: 0 !important;
  }

  .shopigem-desktop-nav,
  .header-container.header-container--bottom {
    display: none !important;
  }

  #shopigem-god-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--blue-royal-deep) !important;
    z-index: 999999;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    box-shadow: none !important;
  }

  #shopigem-god-drawer.open {
    transform: translateY(0);
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
  }

  .god-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    height: 70px;
    background: #fff !important;
    border-bottom: 3px solid var(--blue-solid) !important;
  }

  .god-title {
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
  }

  .god-close {
    color: var(--blue-solid) !important;
    background: transparent;
    border: none;
    font-size: 24px;
  }

  .god-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 15px;
  }

  .god-link {
    background: var(--blue-royal-deep) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 15px 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    color: #fff !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.1s ease !important;
  }

  .god-link.is-active-orange {
    background: var(--gold-metal) !important;
    border-color: #fff !important;
    color: var(--blue-solid) !important;
    box-shadow: var(--gold-glow) !important;
  }

  .god-submenu {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease;
  }

  .god-submenu.open {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    padding: 10px 15px 20px 15px !important;
    margin-top: -5px;
    margin-bottom: 15px;
    background: #fff !important;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--blue-solid);
    border-top: none;
  }

  .god-submenu li a {
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee !important;
    font-size: 15px;
    color: var(--blue-solid) !important;
    display: block;
    font-weight: 500;
  }

  .god-submenu li:last-child a {
    border-bottom: none !important;
  }

  .header__logo,
  .logo-img {
    margin: 0 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2147483647 !important;
    pointer-events: none;
  }

  .header__logo a,
  .logo-img img {
    pointer-events: auto;
    position: relative;
    z-index: 2147483647;
  }

  .header__icons,
  .mobile-search,
  .site-search-handle {
    z-index: 10 !important;
    position: relative !important;
  }
}

/* ==========================================================================
   7. GEMINI FINAL SYSTEM (COMPONENTS - PREMIUM GOLD)
   ========================================================================== */

/* --- BADGE CATEGORIA (Elegante, No Background, Sottolineato) --- */
/* --- BADGE CATEGORIA (Fix Singola Linea) --- */
.mega-col-title {
  position: relative;
  border-bottom: none;
  display: inline-block !important;
  background: transparent !important;
  box-shadow: none !important;

  color: var(--blue-solid) !important;
  font-weight: 1000 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;

  /* MODIFICA QUI: Aumenta questi valori per allontanare i bordi dal testo */
  padding: 15px 10px !important;

  margin-bottom: 20px !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* ANGOLO BASSO-DESTRA (Oro) */
/* Parte dal centro basso -> va a destra -> sale fino a metà destra */
.mega-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  /* Occupa la metà destra */
  height: 50%;
  /* Occupa la metà inferiore */

  /* Disegna le due linee (L-shape) usando il background */
  background: var(--gold-metal) !important;
  background-repeat: no-repeat !important;

  /* Dimensione delle linee: 
       100% 2px = Linea orizzontale in basso
       2px 100% = Linea verticale a destra */
  background-size: 100% 2px, 2px 100% !important;

  /* Posizione delle linee: in basso a destra */
  background-position: bottom right !important;

  z-index: 1;
}

/* ANGOLO ALTO-SINISTRA (Blu) */
/* Parte dal centro alto -> va a sinistra -> scende fino a metà sinistra */
.mega-col-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  /* Occupa la metà sinistra */
  height: 50%;
  /* Occupa la metà superiore */

  background: var(--blue-royal-deep) !important;
  background-repeat: no-repeat !important;

  /* Dimensione delle linee: 
       100% 2px = Linea orizzontale in alto
       2px 100% = Linea verticale a sinistra */
  background-size: 100% 2px, 2px 100% !important;

  /* Posizione delle linee: in alto a sinistra */
  background-position: top left !important;

  z-index: 1;
}

.native-mega-col:not(.special-slider-col) .mega-col-title {
  width: auto !important;
  display: inline-block !important;
  padding-right: 20px !important;
}

/* --- PROMO BOX --- */
.nutri-promo-box {
  width: 270px !important;
  flex-shrink: 0 !important;
  text-align: left;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.nutri-promo-text {
  font-size: 13px;
  color: #fff;
  line-height: 1.6;
  margin: 0;
  background: var(--blue-royal-card-text);
  padding: 20px;
  border-radius: 12px;
  border: 2px solid var(--blue-solid) !important;
  border-image: var(--blue-solid) 1 !important;
  flex: 1;
  box-sizing: border-box;
}

.nutri-promo-text p {
  margin-bottom: 8px;
  margin-top: 0;
  color: #051b35 !important;
  ;
}

.nutri-promo-text strong {
  color: var(--gold-solid);
  font-weight: 800;
}

.nutri-promo-title {
  display: block !important;
  color: #8a6e2f !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.5px !important;
}

/* --- SLIDER --- */
.gemini-slider-container {
  width: 270px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.gemini-slider-wrapper {
  width: 270px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 2px solid var(--blue-solid) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
  padding-bottom: 15px !important;
  flex: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.gemini-slider-wrapper:hover {}

.gps-track {
  display: flex !important;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  width: 100% !important;
}

.gps-slide {
  width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
  padding: 20px 15px 5px 15px !important;
  text-align: center !important;
  background: #fff !important;
}

/* Immagine */
.gps-img-container {
  width: 100% !important;
  height: 145px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  position: relative;
}

.gps-img-container img {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transition: transform 0.6s ease;
}


/* BADGE SCONTO */
.gps-discount-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 10 !important;
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Testi */
.gps-info h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 0 5px 0 !important;
  color: var(--blue-solid) !important;
  line-height: 1.3 !important;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Prezzi */
.gps-price-container {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

.gps-price-current {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gold-solid) !important;
  line-height: 1 !important;
}

.gps-price-compare {
  font-size: 13px !important;
  color: #999 !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

/* Pulsante */
.gps-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  padding: 10px 0 !important;
  border-radius: 8px !important;
  background: var(--blue-royal-deep) !important;
  border: 2px solid var(--gold-solid) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-left: 0 !important;
  transition: all 0.3s cubic-bezier(.25, .46, .45, .94) !important;
  cursor: pointer;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.gps-btn:hover {
  background: var(--gold-metal) !important;
  color: var(--blue-solid) !important;
  box-shadow: 0 0 15px rgba(207, 162, 71, 0.5) !important;
  border-color: #fff !important;
}

/* --- MOBILE SPECIFIC --- */
@media screen and (max-width: 989px) {
  .native-mega-col.special-slider-col {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
  }

  .nutri-promo-box {
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  .gemini-slider-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }

  .gemini-slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border: 2px solid var(--blue-solid) !important;
    box-shadow: none !important;
  }

  .gps-img-container {
    height: 160px !important;
  }

  .gps-info h4 {
    font-size: 14px !important;
  }

  .gps-btn {
    padding: 12px 0 !important;
    font-size: 14px !important;
    background: var(--blue-royal-deep) !important;
    border: 2px solid var(--gold-solid) !important;
    color: #ffffff !important;
  }
}

/* qua finiscono le modifiche header e mega menu */


/* --- FIX Z-INDEX SUPREMO (Quick View sopra Header) --- */
.modal,
.modal-box,
.modal-container,
.quick-view-modal,
.product-quick-view,
.quick-add-modal,
div[role="dialog"] {
  z-index: 2147483647 !important;
  position: fixed !important;
  /* Forza posizione fissa rispetto alla finestra */
}

/* Assicuriamo che l'overlay scuro sia subito sotto la modale ma sopra l'header */
.modal-overlay,
.popup-overlay {
  z-index: 2147483646 !important;
}

/* ==========================================================================
   MOBILE APP INTERFACE V2 (Bottom Bar & Clean Header Fixed)
   ========================================================================== */

/* Nascondi la barra su Desktop */
.mobile-bottom-nav {
  display: none;
}

@media screen and (max-width: 989px) {

  /* 1. BODY PADDING (Spazio extra sotto per non coprire il footer) */
  body {
    padding-bottom: 80px !important;
  }

  /* 2. PULIZIA HEADER SUPERIORE (KILLER MODE) */
  /* Nascondiamo TUTTE le icone (Carrello, Account) e il vecchio hamburger */
  .header__top .mobile-menu-button,
  .header__top .header__icons,
  .header__top a[href="/cart"],
  .header__top a[href="/account"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  /* Centriamo perfettamente il logo */
  .header__top {
    justify-content: center !important;
    height: 60px !important;
    position: relative !important;
  }

  .header__logo,
  .logo-img {
    position: static !important;
    /* Rimuove posizionamento assoluto */
    transform: none !important;
    margin: 0 auto !important;
    left: auto !important;
    top: auto !important;
  }

  /* La barra di ricerca mobile ha bisogno di spazio */
  .header-container.mobile-search {
    margin-top: 10px !important;
    padding-top: 0 !important;
  }


  /* 3. STILE BOTTOM NAVIGATION BAR */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 65px !important;
    border-top: 2px solid var(--blue-solid) !important;
    background: var(--blue-royal-card-text) !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05) !important;
    /* Ombra verso l'alto */
    z-index: 2147483640 !important;
    /* Sotto al carrello/drawer */
    justify-content: space-around !important;
    align-items: center !important;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #f5f5f5;
  }

  /* Singolo Item */
  .mbn-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #888 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    width: 25% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
  }

  .mbn-item svg {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 4px !important;
    stroke: #333 !important;
    transition: stroke 0.2s ease;
  }

  /* Stato Active/Hover */
  .mbn-item:active svg {
    stroke: #FF4500 !important;
  }

  .mbn-item:active span {
    color: #FF4500 !important;
  }

  /* Pallino Conteggio Carrello */
  .mbn-cart-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #FF4500;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ========================================================
   FIX OVERRIDE: VISIBILITÀ MENU BARRA INFERIORE
   (Incollare alla fine del file CSS per forzare la comparsa)
   ======================================================== */

/* Forza il pulsante menu a mostrarsi SOLO dentro la barra in basso */
.mobile-bottom-nav .mobile-menu-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* Dimensioni per stare accanto agli altri */
  width: 25% !important;
  height: 100% !important;

  /* Reset visibilità */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  /* Reset stile bottone */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Forza lo stile dell'icona dentro il menu */
.mobile-bottom-nav .mobile-menu-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 4px !important;
  stroke: #333 !important;
  /* Colore icona scuro */
}

/* Forza lo stile del testo "Menu" */
.mobile-bottom-nav .mobile-menu-button span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #888 !important;
  /* Colore testo grigio come gli altri */
  line-height: 1.2 !important;
}

/* ========================================================
   FIX ALLINEAMENTO MENU BARRA INFERIORE
   ======================================================== */

/* Target specifico per il bottone nella barra in basso */
.mobile-bottom-nav .mobile-menu-button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* Reset totale posizionamento */
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;

  /* Dimensioni identiche agli altri item */
  width: 25% !important;
  height: 100% !important;

  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* FIX MENU MOBILE: Animazione Serranda + SCROLL FUNZIONANTE */

/* 1. Barra in basso sempre sopra */
.mobile-bottom-nav {
  z-index: 2147483647 !important;
  position: fixed !important;
  bottom: 0 !important;
}

/* 2. Contenitore Menu (Drawer) */
#shopigem-god-drawer {
  /* LAYOUT: Usa Flex per gestire lo scroll */
  display: flex !important;
  flex-direction: column !important;
  /* Dispone header e body in verticale */

  /* POSIZIONE: Fissa a tutto schermo */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 2147483640 !important;

  /* ANIMAZIONE (Serranda) */
  transform: translateY(-100%) !important;
  /* Parte nascosto in alto */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;

  /* Visibilità garantita */
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3. Stato APERTO */
#shopigem-god-drawer.open {
  transform: translateY(0) !important;
  /* Scende in posizione */
}

/* 4. FIX SCROLL (La parte che mancava) */
#shopigem-god-drawer .god-body {
  flex: 1 !important;
  /* Occupa tutto lo spazio rimanente sotto l'header */
  overflow-y: auto !important;
  /* Attiva lo scroll verticale SOLO qui */
  -webkit-overflow-scrolling: touch !important;
  /* Scroll fluido su iPhone */
  padding-bottom: 100px !important;
  /* Aggiunge spazio in fondo per non finire sotto la barra */
  height: auto !important;
}

/* Assicura che l'header del menu non si schiacci */
#shopigem-god-drawer .god-header {
  flex-shrink: 0 !important;
}

/* FIX DEFINITIVO: Scroll e Margine Inferiore */

#shopigem-god-drawer {
  /* Imposta il layout flessibile verticale per gestire lo spazio */
  display: flex !important;
  flex-direction: column !important;
}

#shopigem-god-drawer .god-body {
  /* Occupa tutto lo spazio verticale disponibile */
  flex: 1 !important;

  /* Abilita lo scroll verticale */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Fluidità su iPhone */

  /* AGGIUNGE LO SPAZIO IN FONDO: */
  /* 130px di margine interno per evitare che l'ultima voce finisca sotto la barra */
  padding-bottom: 130px !important;
}

/* STILE MENU VARIANTI - TEMA NUTRIHANGAR (GOLD) */

select.product-variant-container {
  /* 1. Reset stile browser */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;

  /* 2. Freccia personalizzata color ORO (#C5A059) */
  /* Ho inserito il codice colore dell'oro direttamente nell'icona SVG */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C5A059%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px !important;
  /* Dimensione bilanciata */

  /* 3. Spaziatura per non sovrapporre il testo alla freccia */
  padding-right: 35px !important;

}

.container--large {
  max-width: 1580px !important;
}

@media (min-width: 769px) {

  #site-header .logo-img img,
  #site-header #logo img {
    max-width: 400px !important;
  }
}

/* --- MEGA MENU COMPACT FIX (Riduzione Altezza 20%) --- */

/* 1. Riduci il padding verticale del contenitore generale */
.site-nav__dropdown,
.mega-menu-layout-wrapper {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

/* 2. Compatta i Titoli delle Categorie */
.mega-col-title {
  margin-bottom: 20px !important;
}

/* 3. Avvicina i link della lista (Sinistra) */
.mega-sub-list li {
  margin-bottom: 0 !important;
  line-height: 2 !important;
}

.mega-sub-list a {
  padding: 3px 0 !important;
  /* Riduce l'area cliccabile verticale */
  font-size: 13px !important;
  display: block !important;
}

/* 4. Slider Best Seller (Destra) - Riduzione Drastica */
.gemini-slider-wrapper {
  padding: 10px !important;
  /* Meno bordo interno */
  margin: 0 !important;
}

/* Forza l'immagine a un'altezza fissa ridotta */
.gps-img-container {
  height: 130px !important;
  /* Ridotto per risparmiare spazio */
  min-height: 0 !important;
}

.gps-img-container img {
  height: 100% !important;
  object-fit: contain !important;
  padding: 5px !important;
}

/* Testi della card prodotto più piccoli */
.gps-info h4 {
  font-size: 12px !important;
  margin: 4px 0 !important;
}

.gps-price-current {
  font-size: 13px !important;
}

.gps-btn {
  padding: 3px 10px !important;
  font-size: 11px !important;
  height: auto !important;
  line-height: 1.2 !important;
}

@media screen and (max-width: 989px) {

  #site-header .logo-img img,
  #site-header #logo img {
    max-height: 50px !important;
    margin-top: 10px !important;
  }
}


/* INIZIO MODIFICHE PAGINE DEI POST BLOG */

/* =========================================
   NUTRIHANGAR BLOG STYLES - V9 FINAL
   ========================================= */

/* --- 1. OVERRIDE TEMA (Container Blog) --- */
/* Sblocca la larghezza del tema solo sugli articoli. 
   Lascia che sia .nh-blog-wrapper a centrare il contenuto a 850px. */
body.template-article .container--medium,
body.template-blog .container--medium,
.template-article .container--medium {
  max-width: 1250px !important;
  /* Rimuove il limite di 1250px */
  width: 100% !important;
}

/* --- 1. FIX ANCORAGGI (NUMERINI) --- */
.nh-blog-wrapper [id^="ref-"],
.nh-blog-wrapper [id^="fonte-"] {
  scroll-margin-top: 260px;
  display: block;
  position: relative;
}

/* --- 2. LAYOUT & STRUTTURA --- */
.nh-blog-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--blue-solid);
  line-height: 1.7;
  max-width: 1250px !important;
  margin: 0 auto;
  padding: 30px 20px;
  box-sizing: border-box;
}

/* --- 3. TIPOGRAFIA --- */
.nh-main-title {
  color: var(--blue-solid);
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 15px;
}

.nh-subtitle {
  color: var(--gold-bright);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
  margin-bottom: 45px;
}

.nh-h2 {
  color: var(--blue-solid);
  font-size: 1.6rem;
  font-weight: 800;
  margin-top: 60px;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaeaea;
  position: relative;
}

.nh-h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--gold-bright);
}

.nh-h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-solid);
  margin-top: 30px;
  margin-bottom: 15px;
}

.nh-text {
  font-size: 1.05rem;
  margin-bottom: 24px;
  color: #333;
}

/* --- 4. LINK NEL TESTO --- */
.nh-blog-wrapper a:not(.nh-btn) {
  color: var(--blue-solid) !important;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid rgba(212, 175, 55, 0.4);
  transition: all 0.2s ease;
}

.nh-blog-wrapper a:not(.nh-btn):hover {
  background-color: rgba(212, 175, 55, 0.15);
  border-bottom-color: var(--gold-bright);
}

.nh-link-wrapper {
  margin: 25px 0;
  font-size: 1.1rem;
}

/* --- 5. BOX STYLES --- */
.nh-box-label {
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  display: block;
}

.nh-box-light {
  background: #f9f9f9;
  color: var(--blue-solid);
  border-left: 4px solid var(--gold-bright);
  padding: 30px;
  margin: 35px 0;
  border-radius: 4px;
}

.nh-box-dark {
  background: var(--blue-solid);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 50px 30px;
  margin-top: 70px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(5, 27, 53, 0.15);
}

.nh-blog-wrapper .nh-box-dark a:not(.nh-btn) {
  color: #fff !important;
  border-bottom-color: var(--gold-bright);
}

.nh-text-gold {
  color: var(--gold-bright);
  font-weight: 800;
}

/* --- 6. PULSANTE "VAI ALLA COLLEZIONE" (Sfondo Blu + Dettaglio Oro) --- */
.nh-btn {
  /* Layout Flexbox per Centratura Perfetta */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Dimensioni */
  width: 100%;
  max-width: 450px;
  height: 55px;
  margin: 35px auto 0 auto;
  padding: 0 20px;

  /* SFONDO: Blu Royal Mega Menu */
  background: var(--blue-royal-mega-menu) !important;

  /* TESTO: Bianco (per contrasto su blu) */
  color: var(--blue-solid) !important;

  /* RICHIAMO GRADIENTE: Bordo Sottile */
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;

  /* Font */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none !important;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.nh-btn:hover {
  color: var(--blue-solid) !important;
  /* Testo diventa Oro */
  background: var(--gold-metal) !important;
}

/* --- 7. LISTE & TABELLE --- */
.nh-list {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.nh-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  font-size: 1.05rem;
}

.nh-list li::before {
  content: '➤';
  position: absolute;
  left: 0;
  color: var(--gold-bright);
  font-size: 0.8rem;
  top: 4px;
}

.nh-table-container {
  overflow-x: auto;
  margin: 40px 0;
  border: 1px solid #eee;
  border-radius: 4px;
}

.nh-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.nh-table th {
  background: var(--blue-solid);
  color: #fff;
  padding: 18px;
  text-align: left;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.nh-table th.highlight {
  background: var(--gold-bright);
  color: var(--blue-solid);
}

.nh-table td {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.nh-table tr:nth-child(even) {
  background-color: #fafafa;
}

/* --- 8. BOX FONTI --- */
.nh-sources-box {
  margin-top: 60px;
  padding: 25px;
  background: #f4f4f4;
  border-left: 3px solid #ccc;
  font-size: 0.85rem;
  color: #666;
}

.nh-sources-box a {
  color: #555 !important;
  border-bottom: 1px dotted #999 !important;
  font-weight: 400 !important;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .nh-blog-wrapper {
    padding: 25px 15px;
  }

  .nh-main-title {
    font-size: 1.8rem;
  }

  .nh-btn {
    width: 100%;
    max-width: 100%;
    font-size: 0.95rem;
  }
}

/* NASCONDI TITOLI DEFAULT SHOPIFY */
body.template-blog h1.section-header__title,
body.template-blog .main-page-title,
body#magazine h1,
.template-blog .page-width>h1 {
  display: none !important;
}

/* FINE MODIFICHE PAGINE DEI POST BLOG */


/* --------------------------------------------------------------------------
   BLOG CUSTOMIZATION (VERSIONE 4 COLONNE - GAP LARGO)
   1. Griglia: 4 colonne Desktop (gap 35px), 1 colonna Mobile.
   2. Layout Card: Titolo (in alto) > Foto > Descrizione.
   3. Desktop: Titolo forza spazio per 2 righe.
   4. Mobile: Larghezza 90%, centrato, linea divisoria.
   -------------------------------------------------------------------------- */

/* --- A. RIORGANIZZAZIONE INTERNA CARD (Tutti i device) --- */
.blog-item {
  display: flex !important;
  flex-direction: column !important;
}

/* Titolo: in alto */
.blog-item .blog-item__title-holder {
  order: -1 !important;
  margin-bottom: 10px;
}

/* Immagine: margini aggiustati */
.blog-item .blog-item__image {
  margin-bottom: 15px !important;
  margin-top: 0 !important;
}

/* --- B. REGOLE SPECIFICHE DESKTOP (> 990px) --- */
@media screen and (min-width: 990px) {

  /* Griglia a 4 colonne con spaziatura larga */
  .grid.grid--layout:has(.blog-item) {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 35px;
    /* Distanza mantenuta larga come richiesto */
  }

  /* Altezza minima titolo per allineamento (circa 2 righe) */
  .blog-item .blog-item__title-holder {
    min-height: 3.5em;
    display: block;
  }
}

/* --- C. REGOLE SPECIFICHE MOBILE (< 767px) --- */
@media screen and (max-width: 767px) {

  /* Contenitore padre: 1 colonna, largo 90%, centrato */
  .grid.grid--layout:has(.blog-item) {
    grid-template-columns: 1fr !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
  }

  /* Stile articolo mobile: linea divisoria in basso */
  .blog-item {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 25px !important;
    margin-bottom: 25px !important;
  }

  .blog-item:last-child {
    border-bottom: none;
    margin-bottom: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   BLOG CUSTOMIZATION (VERSIONE 4 COLONNE - GAP LARGO) FINE
   -------------------------------------------------------------------------- */




/* ==============================================
   NUTRIHANGAR LUXURY CART STYLES
   ============================================== */

/* --- 1. BARRA DI PROGRESSO --- */
#js-shipping-bar-container {
  background: var(--blue-royal-deep) !important;
  border-bottom: 2px solid var(--bordo-oro) !important;
  padding: 20px !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

#js-shipping-progress-text,
#js-shipping-success {
  color: #ffffff !important;
  font-family: 'Futura', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

#js-shipping-success {
  color: var(--gold-bright) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

#js-amount-remaining {
  color: var(--gold-bright2) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--gold-bright2);
}

.shipping-progress-bar {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.3);
  height: 10px !important;
  border-radius: 6px !important;
}

#js-progress-fill {
  background: var(--gold-metal) !important;
  box-shadow: var(--gold-glow);
  border-radius: 6px !important;
}

#js-footer-subtotal,
#js-footer-grand-total {
  color: #000000 !important;
  font-weight: bold !important;
}

/* --- 2. BOTTONI FOOTER (BLU + ORO + NO HOVER) --- */

/* --- A. BOTTONE CHECKOUT (ORO) --- */
.sidebar__body .cart-subtotal-footer .cart-buttons-container button[name="checkout"],
.cart-buttons-container button.button--solid {
  background: var(--gold-metal) !important;
  /* Sfondo ORO */
  background-color: #d4af37 !important;
  color: #000000 !important;
  /* Testo Nero */
  border: none !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--shadow-luxury) !important;
  padding: 15px !important;
  border-radius: 6px !important;
  /* Arrotondato */
  width: 100% !important;

  /* Blocco transizioni */
  transition: none !important;
  transform: none !important;
}

/* CHECKOUT NO HOVER: Copia esatta dello stato normale */
.cart-buttons-container button[name="checkout"]:hover,
.cart-buttons-container button[name="checkout"]:focus,
.cart-buttons-container button[name="checkout"]:active {
  background: var(--gold-metal) !important;
  background-color: #d4af37 !important;
  color: #000000 !important;
  box-shadow: var(--shadow-luxury) !important;
  transform: none !important;
  opacity: 1 !important;
}

/* --- B. BOTTONE VISUALIZZA CARRELLO (BLU SOLIDO) --- */
.sidebar__body .cart-subtotal-footer .cart-buttons-container a.button--outline,
.cart-buttons-container a[href="/cart"] {
  background: var(--blue-solid) !important;
  /* Sfondo BLU Variabile */
  border: 1px solid var(--blue-solid) !important;
  color: #ffffff !important;
  /* Testo BIANCO */
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px !important;
  text-align: center !important;
  display: block !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  /* Arrotondato */
  width: 100% !important;

  /* Blocco transizioni */
  transition: none !important;
  transform: none !important;
}

/* VISUALIZZA CARRELLO NO HOVER: Copia esatta dello stato normale */
.cart-buttons-container a.button--outline:hover,
.cart-buttons-container a.button--outline:focus,
.cart-buttons-container a.button--outline:active {
  background: var(--blue-solid) !important;
  border-color: var(--blue-solid) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ==============================================
   3. LUXURY HEADER & CHIUSURA (CSS ESTERNO)
   ============================================== */

/* Header Dorato */
.sidebar__header {
  background: var(--gold-metal) !important;
  /* Sfondo Oro */
  background-color: #d4af37 !important;
  /* Fallback */
  border-bottom: 3px solid var(--blue-solid) !important;
  padding: 15px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  min-height: 70px !important;
}

/* Titolo Header (Hai X articoli...) */
.sidebar__title {
  color: var(--blue-solid) !important;
  /* Testo Blu */
  font-family: 'Futura', sans-serif;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 14px !important;
  letter-spacing: 0.5px;
  margin: 0 !important;
  width: 80%;
  /* Lascia spazio al bottone */
}

/* Numero nel titolo */
.sidebar__title span[data-header-cart-count] {
  border-bottom: 2px solid var(--blue-solid);
  padding: 0 2px;
  font-size: 16px;
}

/* Reset e stile testuale per il tasto CHIUDI centrato */
button.sidebar__close {
  display: block !important;
  margin: 15px auto !important;
  /* Centra orizzontalmente */
  position: relative !important;
  /* Forza il posizionamento relativo */
  top: unset !important;
  right: unset !important;

  /* Aspetto Testuale */
  background: none !important;
  border: none !important;
  color: #d4af37 !important;
  /* Colore Oro per richiamare il brand */
  font-weight: bold !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  cursor: pointer;
  box-shadow: none !important;
  padding: 10px 20px !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  border-radius: 0 !important;

  /* Rimozione Totale Animazioni ed Effetti */
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Disabilita qualsiasi effetto hover o rotazione */
button.sidebar__close:hover {
  background: none !important;
  color: #d4af37 !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.8;
  /* Solo un leggero feedback visivo */
}

/* Nasconde eventuali icone residue se non rimosse dall'HTML */
button.sidebar__close svg {
  display: none !important;
}

/* ==============================================
   RIMOZIONE FORZATA VECCHIA SHIPPING BAR
   ============================================== */
shipping-notice,
.cart-notice,
[data-free-shipping] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: absolute !important;
  /* La rimuove dal flusso della pagina */
  z-index: -9999 !important;
  pointer-events: none !important;
}

/* ==============================================
   4. STILE PRODOTTI CARRELLO (REVISIONE BLU)
   ============================================== */

/* --- CONTENITORE PRODOTTO --- */
.cart-item,
.cart__item,
.cart-drawer__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding: 20px 0 !important;
  margin-bottom: 0 !important;
}

/* --- IMMAGINE PRODOTTO (Bordo Blu 2px) --- */
.cart-item__media img,
.cart__image img,
.cart-drawer__item-image img {
  border-radius: 8px !important;
  border: 2px solid var(--blue-solid) !important;
  /* BLU 2PX */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.3s ease !important;
}

.cart-item:hover .cart-item__media img,
.cart-drawer__item:hover .cart-drawer__item-image img {
  transform: scale(1.02) !important;
}

/* --- TITOLO PRODOTTO (Più Piccolo ed Elegante) --- */
.cart-item__name,
.cart__product-name,
.cart-drawer__item-title {
  color: var(--blue-solid) !important;
  font-family: 'Futura', sans-serif;
  font-weight: 700 !important;
  /* Grassetto ma non troppo pesante */
  text-transform: uppercase;
  font-size: 11px !important;
  /* RIDOTTO: Era 13px */
  line-height: 1.4 !important;
  /* Spaziatura righe */
  letter-spacing: 0.5px;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.cart-item__name:hover,
.cart__product-name:hover {
  color: #555 !important;
  text-decoration: none !important;
}

/* --- VARIANTI (Gusto, Formato) --- */
.product-option,
.cart-item__options,
.cart-drawer__item-subtitle {
  color: #666 !important;
  font-size: 11px !important;
  margin-bottom: 2px !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* --- PREZZO (Blu) --- */
.cart-item__price,
.price,
.cart-drawer__item-price,
.price__regular .price-item--regular {
  color: var(--blue-solid) !important;
  /* BLU */
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px;
  margin-top: 5px !important;
  display: block !important;
}

/* --- PREZZO DI CONFRONTO (Grigio Sbarrato) --- */
s.cart-item__old-price,
.price__sale s,
.price s,
.price-item--regular {
  color: #999 !important;
  /* GRIGIO */
  font-weight: normal !important;
  text-decoration: line-through !important;
  font-size: 12px !important;
  margin-right: 5px !important;
}

/* --- QUANTITÀ (Senza Bordo Esterno) --- */
cart-product-quantity,
.quantity,
.quantity-selector {
  border: none !important;
  /* RIMOSSO BORDO ESTERNO */
  background: transparent !important;
  margin-top: 8px !important;
  max-width: 110px !important;
  display: flex !important;
  align-items: center !important;
}

/* Stile Pulsanti + e - (Semplici e puliti) */
.quantity__button,
.quantity-selector button {
  color: var(--blue-solid) !important;
  background: transparent !important;
  border: 1px solid #eee !important;
  /* Bordino leggerissimo solo sul bottone */
  width: 30px !important;
  height: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* Input numero centrale */
.quantity__input,
.quantity-selector input {
  color: var(--blue-solid) !important;
  font-weight: bold !important;
  background: transparent !important;
  border: none !important;
  /* Nessun bordo sul numero */
  text-align: center !important;
  width: 40px !important;
}

/* ==============================================
   FIX MOBILE: SPAZIO PER BARRA DI NAVIGAZIONE
   Evita che i pulsanti del carrello finiscano sotto il menu fisso
   ============================================== */

/* ==============================================
   NASCONDI TITOLO "CARRELLO" NELLA PAGINA /cart
   ============================================== */
body.template-cart h1,
body.template-cart .section-header__title,
body.template-cart .page-title,
body.template-cart .main-page-title {
  display: none !important;
}




@media screen and (max-width: 768px) {

  /* Aggiunge spazio vuoto extra in fondo al footer del carrello */
  #site-cart-sidebar .sidebar__footer {
    padding-bottom: 100px !important;
    /* 100px dovrebbero bastare per superare la barra */
  }
}


/* --- STILE PULSANTE CHIUDI (QUADRATO ROSSO) --- */

sidebar-drawer#site-cart-sidebar .sidebar__close {
  /* Posizionamento assoluto nell'area bianca */
  position: absolute !important;
  top: 110px !important;
  /* Modifica questo valore se lo vuoi più in alto o in basso */
  right: 20px !important;
  /* Distanza dal bordo destro */
  bottom: auto !important;
  left: auto !important;

  /* Forma e Dimensioni (Quadrato arrotondato) */
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  /* Leggero arrotondamento degli angoli */
  box-sizing: border-box !important;

  /* Colori */
  background-color: #dc3545 !important;
  /* Rosso standard per chiusura */
  color: #ffffff !important;
  /* X Bianca */
  border: none !important;
  /* Nessun bordo */

  /* Centratura perfetta della X */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Tipografia della X */
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  /* Font semplice per una X pulita */
  font-weight: 700 !important;
  line-height: 1 !important;

  /* Altro */
  cursor: pointer !important;
  z-index: 105 !important;
  /* Assicura che sia sopra gli altri elementi */
  box-shadow: none !important;
  /* Rimuove eventuali ombre predefinite */
  transition: none !important;
  /* Disabilita transizioni */
}

/* --- DISABILITA EFFETTI HOVER/FOCUS --- */
/* Forza il pulsante a rimanere identico anche quando ci passi sopra o clicchi */
sidebar-drawer#site-cart-sidebar .sidebar__close:hover,
sidebar-drawer#site-cart-sidebar .sidebar__close:focus,
sidebar-drawer#site-cart-sidebar .sidebar__close:active {
  background-color: #dc3545 !important;
  /* Mantiene lo stesso rosso */
  color: #ffffff !important;
  /* Mantiene la stessa X bianca */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Nasconde il prezzo totale nel pulsante carrello dell'header (SOLO MOBILE) */
@media screen and (max-width: 989px) {
  [data-header-cart-total] {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  [data-header-cart-total] {
    display: inline-block !important;
  }
}

/* Assicura che il conteggio articoli rimanga visibile e ben spaziato */
[data-header-cart-count] {
  display: inline-block !important;
  margin-left: 5px !important;
}



/* ==============================================
   NUTRIHANGAR LUXURY CART STYLES
   ============================================== */


/* --- STILE PULSANTE CHIUDI (QUADRATO ROSSO) --- */




























/* === ROYAL LUXURY BADGE OVERRIDE === */
.discount-badge,
.product-item .discount-badge,
div.product-item.card[data-js-product-item] .discount-badge {
  background: var(--gold-metal) !important;
  color: #051b35 !important;
  /* Blu scuro per leggibilit� su Oro */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Freccetta/Angolo del badge (se presente) */
.discount-badge::before,
.discount-badge::after {
  border-color: transparent var(--gold-bright2) transparent transparent !important;
}


/* === ROYAL LUXURY PRODUCT CARD GLOW & INTERACTION === */
div.product-item.card[data-js-product-item],
.product-item.card,
.product-grid-item {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  border: 1px solid transparent !important;
}

div.product-item.card[data-js-product-item]:hover,
.product-item.card:hover {
  box-shadow: var(--gold-glow), 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--bordo-oro) !important;
  transform: translateY(-5px);
  z-index: 5;
  background: #fff;
  /* Assicura che la card rimanga leggibile */
}

/* Effetto sulle immagini prodotto al passaggio del mouse */
div.product-item.card[data-js-product-item]:hover .product-item__image {
  transform: scale(1.05);
  transition: transform 0.6s ease;
}


/* === ROYAL LUXURY EXTENSION: GALLERY & MODALS === */

/* 1. Immagine Principale Prodotto (Pagina e Quick View) */
.product-gallery-item,
.product-gallery-item__media {
  border-radius: 8px !important;
  /* Angoli morbidi */
  overflow: hidden;
  /* Assicura che l'immagine stia dentro i bordi */
  transition: all 0.4s ease;
  border: 1px solid transparent;
}

.product-gallery-item:hover,
.product-gallery-item__media:hover {
  box-shadow: var(--gold-glow), 0 10px 40px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--bordo-oro) !important;
  z-index: 2;
  /* Porta in primo piano */
}

/* 2. Modali (Quick View, Opzioni, etc.) */
.modal-content,
.drawer__content,
.quick-view-content {
  border: 1px solid var(--bordo-oro) !important;
  box-shadow: var(--shadow-luxury), 0 0 30px rgba(212, 175, 55, 0.15) !important;
  border-radius: 8px !important;
}

/* Header del Modale (Titolo) */
.modal-heading,
.drawer__header {
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.modal-heading h2,
.drawer__header h2 {
  background: var(--gold-metal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Pulsante Chiudi Modale */
.modal-close path,
.drawer__close path {
  stroke: var(--gold-bright2) !important;
  transition: all 0.3s ease;
}

.modal-close:hover path,
.drawer__close:hover path {
  stroke: #d4af37 !important;
  fill: rgba(212, 175, 55, 0.1);
}


/* === ROYAL LUXURY: GLOBAL DISCOUNT BADGE (DIAGONAL ORO) === */
.discount-badge {
  background: var(--gold-metal) !important;
  color: #051b35 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  padding: 6px 35px !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;

  /* Posizionamento Diagonale */
  position: absolute !important;
  top: 15px !important;
  left: -25px !important;
  transform: rotate(-45deg) !important;
  z-index: 10 !important;

  /* Ombra e Bordo Premium */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;

  /* Reset di stili pre-esistenti */
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
}

/* Fix specifico per la Pagina Prodotto e Quick View */
.product-gallery-item .discount-badge,
.product-gallery-item__media .discount-badge,
.quick-view-image-container .discount-badge {
  top: 20px !important;
  left: -35px !important;
  padding: 8px 45px !important;
}

/* === ROYAL LUXURY: MODAL CONTAINER GLOW (REFINEMENT) === */
.modal-content,
#shopigem-god-drawer,
.drawer__content {
  background: #ffffff !important;
  border: 2px solid var(--bordo-oro) !important;
  /* Bagliore Oro molto marcato sul contenitore */
  box-shadow: 0 0 50px rgba(212, 175, 55, 0.4), var(--shadow-luxury) !important;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Forza l'oro anche sul bordo interno se presente */
.modal-content::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  pointer-events: none;
  border-radius: 4px;
}


/* === FIX DEFINITIVO: BADGE & BORDI (OVERRIDE) === */

/* 1. BADGE SCONTO ORO (Massima Priorit�) */
html body .discount-badge,
html body .product-item .discount-badge,
html body .product-gallery-item .discount-badge,
html body .product__media-item .discount-badge,
html body .quick-view-image-container .discount-badge,
html body .product-gallery__main .discount-badge {
  background: var(--gold-metal) !important;
  background-color: #d4af37 !important;
  /* Fallback solido */
  color: #051b35 !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  z-index: 99 !important;

  /* Forza Geometria Diagonale */
  position: absolute !important;
  top: 25px !important;
  left: -35px !important;
  transform: rotate(-45deg) !important;
  width: 150px !important;
  /* Larghezza fissa per diagonale perfetta */
  text-align: center !important;
  padding: 5px 0 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
  /* I badge diagonali non hanno border radius */
}

/* Nascondi eventuali altri badge 'sale' standard che potrebbero apparire doppi */
html body .product-item__badge--sale {
  display: none !important;
}


/* 2. FIX BORDI GALLERIA (Sposta bordo da Foto a Slider) */

/* Resetta bordo sulle singole immagini */
html body .product-gallery-item,
html body .product-gallery-item__media {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html body .product-gallery-item:hover,
html body .product-gallery-item__media:hover {
  box-shadow: none !important;
  border-color: transparent !important;
  transform: none !important;
  /* Rimuovi zoom/lift che potrebbe rompere lo slider */
}

/* Applica Bordo Oro e Glow al CONTENITORE SLIDER RICHIESTO */
html body .product-gallery.product-gallery--slider {
  border: 1px solid var(--bordo-oro) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* Taglia le immagini agli angoli */
  box-shadow: var(--gold-glow), 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease;
  background: #fff;
  /* Sfondo bianco per evitare trasparenze */
}

/* Eccezione: Nel Quick View Modale, assicurati che il contenitore abbia lo stile */
html body .product-quick-view__container .product-gallery--slider {
  box-shadow: none !important;
  /* Nel quick view c'� gi� l'ombra del modale, evitiamo 'doppia ombra' eccessiva */
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
}


/* === FIX V10: BORDO PARZIALE BLU (PAGINA PRODOTTO) === */

/* 1. Reset e Setup per la Galleria Principale */
html body .product-gallery.product-gallery--slider {
  border: none !important;
  /* Rimuove il bordo oro completo */
  position: relative !important;
  overflow: visible !important;
  /* Permette ai bordi parziali di vedersi bene */
}

/* 2. Bordo Superiore (Blu, 50% larghezza) */
html body .product-gallery.product-gallery--slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 4px;
  /* Spessore */
  background: var(--blue-royal-deep);
  z-index: 20;
  pointer-events: none;
}

/* 3. Bordo Sinistro (Blu, 50% altezza) */
html body .product-gallery.product-gallery--slider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 4px;
  /* Spessore */
  background: var(--blue-royal-deep);
  z-index: 20;
  pointer-events: none;
}

/* === PULIZIA MODALE (Quick View) === */
/* Rimuove i bordi parziali nel contesto del Quick View/Modal */
html body .quick-view-content .product-gallery--slider::before,
html body .quick-view-content .product-gallery--slider::after,
html body .modal-content .product-gallery--slider::before,
html body .modal-content .product-gallery--slider::after {
  display: none !important;
}

/* Rimuove eventuali bordi residui nel modale */
html body .quick-view-content .product-gallery--slider,
html body .modal-content .product-gallery--slider {
  border: none !important;
  box-shadow: none !important;
}


/* === FIX V11: BORDO BLU SU GRIGLIA SPECIFICA (PAGINA PRODOTTO) === */

/* Target sulla classe specifica fornita dall'utente */
.template-product .grid.grid--slider.grid-1.grid--gap-small {
  position: relative !important;
}

/* Bordo Superiore (Blu, 50% larghezza) */
.template-product .grid.grid--slider.grid-1.grid--gap-small::before {
  content: '';
  position: absolute;
  top: -5px;
  /* Leggermente fuori per visibilit� */
  left: -5px;
  width: 50%;
  height: 3px;
  background: var(--blue-royal-deep);
  z-index: 50;
  pointer-events: none;
}

/* Bordo Sinistro (Blu, 50% altezza) */
.template-product .grid.grid--slider.grid-1.grid--gap-small::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  height: 50%;
  width: 3px;
  background: var(--blue-royal-deep);
  z-index: 50;
  pointer-events: none;
}

/* Assicurati che nel modale rimanga pulito */
.modal-content .grid.grid--slider.grid-1.grid--gap-small::before,
.modal-content .grid.grid--slider.grid-1.grid--gap-small::after {
  display: none !important;
}


/* === FIX V12: BORDO BLU COMPLETO E BADGE ATTACCATO === */

/* 1. Bordo Blu Completo intorno alla griglia */
.template-product .grid.grid--slider.grid-1.grid--gap-small {
  border: 3px solid var(--blue-royal-deep) !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  /* Taglia il badge se esce, ma noi lo attacchiamo */
  padding: 0 !important;
  /* Rimuove padding che stacca il badge */
}

/* Rimuovo i bordi parziali precedenti (before/after) */
.template-product .grid.grid--slider.grid-1.grid--gap-small::before,
.template-product .grid.grid--slider.grid-1.grid--gap-small::after {
  display: none !important;
}

/* 2. Fix Posizionamento Badge Sconto (attaccato al bordo) */
.template-product .grid.grid--slider.grid-1.grid--gap-small .discount-badge {
  top: 15px !important;
  left: -40px !important;
  /* Regolato per aderire perfettamente alla diagonale */
  margin: 0 !important;
  box-shadow: none !important;
  /* Rimuovo ombra esterna se lo distanzia visivamente */
}

/* Assicurati che le immagini dentro non abbiano margini che creano buchi bianchi */
.template-product .grid.grid--slider.grid-1.grid--gap-small .product-gallery-item {
  margin: 0 !important;
}


/* === FIX V13: BORDO BLU DIRETTO SULL'IMMAGINE (PAGINA PRODOTTO) === */

/* 1. Reset regole griglia precedenti (per sicurezza) */
.template-product .grid.grid--slider.grid-1.grid--gap-small {
  border: none !important;
  background: transparent !important;
}

/* 2. Applica Bordo Blu COMPLETO direttamente all'item della galleria */
.template-product .product-gallery-item {
  border: 3px solid var(--blue-royal-deep) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  /* Leggera ombra per staccarlo */
  margin-bottom: 0 !important;
  /* Rimuove spazi che potrebbero rompere il layout */
}

/* 3. Assicura che il badge sia attaccato a QUESTO bordo */
.template-product .product-gallery-item .discount-badge {
  top: 18px !important;
  left: -42px !important;
  z-index: 20 !important;
}

/* 4. Mantiene il modale PULITO (senza bordi) */
.modal-content .product-gallery-item,
.quick-view-content .product-gallery-item {
  border: none !important;
  box-shadow: none !important;
}


/* === FIX V14: CORNICE BLU COMPLETA (TECNICA OVERLAY) === */

/* 1. Preparazione Contenitore */
.template-product .grid.grid--slider.grid-1.grid--gap-small {
  position: relative !important;
  border: none !important;
  /* Rimuove tentativi precedenti falliti */
}

/* 2. Cornice Blu Overlay (Funziona sempre perch� galleggia sopra) */
.template-product .grid.grid--slider.grid-1.grid--gap-small::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid var(--blue-royal-deep);
  border-radius: 8px;
  z-index: 50;
  /* Sopra a tutto */
  pointer-events: none;
  /* Permette di cliccare sotto */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  /* Sottile luce interna */
}

/* 3. Posizionamento Badge per toccare la cornice */
.template-product .grid.grid--slider.grid-1.grid--gap-small .discount-badge {
  top: 15px !important;
  left: -38px !important;
  /* Calibrato per toccare il bordo blu */
  z-index: 60 !important;
  /* Sopra la cornice */
}

/* 4. Pulizia Modale (Nessun bordo l�) */
.modal-content .grid.grid--slider.grid-1.grid--gap-small::after,
.quick-view-content .grid.grid--slider.grid-1.grid--gap-small::after {
  display: none !important;
}


/* === FIX V15: BORDO BLU TOTALE SULLA GRIGLIA SPECIFICA === */

/* Target diretto sulla classe richiesta */
.grid.grid--slider.grid-1.grid--gap-small {
  border: 3px solid var(--blue-royal-deep) !important;
  border-radius: 8px !important;
  position: relative !important;
  /* overflow: visible per far vedere il badge se sporge */
  overflow: visible !important;
  box-shadow: 0 0 0 2px var(--blue-royal-deep) !important;
  /* Rinforzo visivo */
}

/* Assicura che gli item interni non abbiano margini che coprano il bordo */
.grid.grid--slider.grid-1.grid--gap-small>* {
  margin: 0 !important;
}

/* Badge attaccato all'angolo della griglia */
.grid.grid--slider.grid-1.grid--gap-small .discount-badge {
  top: 10px !important;
  left: -42px !important;
  z-index: 100 !important;
}

/* Escludi esplicitamente il MODALE per lasciarlo pulito */
.modal-content .grid.grid--slider.grid-1.grid--gap-small,
.quick-view-content .grid.grid--slider.grid-1.grid--gap-small {
  border: none !important;
  box-shadow: none !important;
}


/* === FIX V16: BORDO GRADIENTE (BORDER-IMAGE FIX) === */

/* Target sulla griglia specifica */
.grid.grid--slider.grid-1.grid--gap-small {
  /* 1. Definisci spessore e stile 'trasparente' per preparare il canvas */
  border: 3px solid transparent !important;

  /* 2. Applica il gradiente come immagine del bordo */
  border-image: var(--blue-royal-deep) 1 !important;

  /* 3. Reset radius (border-image non supporta angoli tondi) */
  border-radius: 0 !important;

  position: relative !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Badge Posizionamento per Angolo Squadrato */
.grid.grid--slider.grid-1.grid--gap-small .discount-badge {
  top: 20px !important;
  left: -32px !important;
  z-index: 50 !important;
}

/* Assicura Pulizia nel Modale */
.modal-content .grid.grid--slider.grid-1.grid--gap-small,
.quick-view-content .grid.grid--slider.grid-1.grid--gap-small {
  border: none !important;
  border-image: none !important;
  box-shadow: none !important;
}


/* === FIX V17: BORDO BLU SOLIDO (BLUE-SOLID) === */

/* Target sulla griglia specifica della pagina prodotto */
.template-product .grid.grid--slider.grid-1.grid--gap-small {
  border: 3px solid var(--blue-solid) !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Posizionamento Badge Sconto */
.template-product .grid.grid--slider.grid-1.grid--gap-small .discount-badge {
  top: 15px !important;
  left: -40px !important;
  z-index: 100 !important;
}

/* Assicura che le immagini non abbiano margini che coprano il bordo */
.template-product .grid.grid--slider.grid-1.grid--gap-small .product-gallery-item {
  border: none !important;
}

/* Mantiene il modale PULITO (senza bordi) */
.modal-content .grid.grid--slider.grid-1.grid--gap-small {
  border: none !important;
}


/* === ROYAL LUXURY: VARIANT PICKER & QUANTITY === */

/* 1. Pillole Varianti (Radio) */
.product-variant__container label {
  background: #f9f9f9 !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #333 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: inline-block !important;
  margin: 5px !important;
}

/* Stato SELEZIONATO */
.product-variant__container input[type='radio']:checked+label {
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  border: 2px solid var(--bordo-oro) !important;
  box-shadow: var(--gold-glow), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px);
}

/* Hover su non selezionate */
.product-variant__container label:hover {
  border-color: var(--bordo-oro) !important;
  background: #fff !important;
}

/* 2. Selettore Quantit� Luxury */
.product-quantity {
  background: #ffffff !important;
  border: 2px solid var(--blue-solid) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  max-width: 140px !important;
}

.product-quantity input {
  font-weight: 800 !important;
  color: var(--blue-solid) !important;
  font-size: 16px !important;
}

.product-quantity button {
  background: transparent !important;
  color: var(--gold-bright2) !important;
  font-size: 20px !important;
  font-weight: bold !important;
  transition: background 0.2s !important;
}

.product-quantity button:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

/* Nome Variante (Label) */
.product-variant__name {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--blue-solid) !important;
  margin-bottom: 10px !important;
  display: block !important;
}


/* === ROYAL LUXURY: VARIANT & QUANTITY (NUCLEAR OVERRIDE) === */

/* 1. PILLOLE VARIANTI (Stato Base) */
html body .product-variant__label {
  background: #f9f9f9 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-width: 60px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* Hover */
html body .product-variant__label:hover {
  border-color: var(--bordo-oro) !important;
  color: var(--blue-solid) !important;
  background: #fff !important;
}

/* 2. PILLOLE VARIANTI (Stato SELEZIONATO) */
html body .product-variant__input:checked+.product-variant__label {
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  border: 1px solid var(--bordo-oro) !important;
  box-shadow: var(--gold-glow) !important;
  transform: translateY(-2px) !important;
  font-weight: 800 !important;
}

/* 3. SELETTORE QUANTIT� (Container) */
html body product-quantity.product-quantity,
html body .product-quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--blue-royal-deep) !important;
  border-radius: 8px !important;
  background: #fff !important;
  height: 50px !important;
  /* Altezza fissa luxury */
  padding: 0 5px !important;
  overflow: hidden !important;
  width: auto !important;
}

/* Bottoni +/- */
html body .product-quantity__minus,
html body .product-quantity__plus {
  background: transparent !important;
  border: none !important;
  color: var(--gold-metal) !important;
  width: 40px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

html body .product-quantity__minus:hover,
html body .product-quantity__plus:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

/* Icone SVG dentro i bottoni */
html body .product-quantity__minus svg,
html body .product-quantity__plus svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--gold-bright2) !important;
  /* Forza colore oro icone */
}

/* Input Numero Centrale */
html body .product-quantity__selector {
  border: none !important;
  background: transparent !important;
  color: var(--blue-royal-deep) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  width: 50px !important;
  text-align: center !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
  /* Rimuovi frecce native */
}

html body .product-quantity__selector::-webkit-outer-spin-button,
html body .product-quantity__selector::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* === ROYAL LUXURY: VARIANT & QUANTITY (V2 - FORCED OVERRIDE) === */

/* 1. PILLOLE VARIANTI (Etichetta base) */
html body .product-variant__label {
  background: #fdfdfd !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  color: #051b35 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
}

/* Stato SELEZIONATO (Checked) */
html body .product-variant__input:checked+.product-variant__label {
  background: var(--blue-royal-deep) !important;
  color: #ffffff !important;
  border: 2px solid var(--bordo-oro) !important;
  box-shadow: var(--gold-glow), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-3px) !important;
}

/* Hover su pillole non attive */
html body .product-variant__label:hover {
  border-color: var(--gold-bright2) !important;
  background: #ffffff !important;
  transform: translateY(-1px);
}

/* 2. SELETTORE QUANTIT� LUXURY */
html body .product-quantity,
html body product-quantity.product-quantity {
  display: inline-flex !important;
  background: #ffffff !important;
  border: 2px solid var(--blue-solid) !important;
  border-radius: 10px !important;
  height: 55px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  width: auto !important;
  min-width: 150px !important;
}

/* Tasti Meno e Pi� */
html body .product-quantity__minus,
html body .product-quantity__plus,
html body .qty-minus,
html body .qty-plus {
  width: 50px !important;
  height: 100% !important;
  background: transparent !important;
  color: var(--gold-bright2) !important;
  border: none !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
}

html body .product-quantity__minus:hover,
html body .product-quantity__plus:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

/* Forza colore oro su icone SVG dentro i tasti */
html body .product-quantity svg *,
html body .qty-minus svg *,
html body .qty-plus svg * {
  fill: var(--gold-bright2) !important;
  stroke: var(--gold-bright2) !important;
}

/* Numero centrale */
html body .product-quantity__selector,
html body .qty-selector {
  width: 50px !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  color: var(--blue-solid) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}


/* STICKY FOOTER CART DRAWER - ROYAL LUXURY (FIXED) */
.sidebar--opened[data-js-site-cart-sidebar] .sidebar__body {
  overflow-y: auto !important;
  flex: 1 !important;
  /* In case it switches to flex */
}

.sidebar--opened[data-js-site-cart-sidebar] .sidebar__footer {
  z-index: 10 !important;
  background: #fff !important;
}


@media screen and (max-width: 768px) {
  sidebar-drawer .sidebar__footer {
    padding-bottom: 90px !important;
    /* Spazio extra per Mobile Nav Bar */
  }
}


/* FIX MOBILE INTERACTION */
@media screen and (max-width: 768px) {

  /* 1. Il Carrello si ferma prima della barra inferiore (cos� � cliccabile) */
  sidebar-drawer:not([style*='display: none']):not([style*='display:none']) {
    height: calc(100% - 60px) !important;
  }

  /* 2. Il Menu Mobile deve stare SOPRA il carrello se aperti entrambi */
  #shopigem-god-drawer {
    z-index: 2147483650 !important;
  }
}


/* FIX ULTIMO: BARRA MOBILE SEMPRE CLICCABILE */
.mobile-bottom-nav {
  z-index: 2147483647 !important;
  position: fixed !important;
  bottom: 0 !important;
  pointer-events: auto !important;
  transform: translateZ(0);
}


/* FIX OVERLAY: Lascia libera la barra mobile */
@media screen and (max-width: 768px) {
  .site-overlay {
    height: calc(100vh - 65px) !important;
    bottom: 65px !important;
    top: auto !important;
  }
}


/* FIX OVERLAY: Lascia libera la barra mobile */
@media screen and (max-width: 768px) {
  .site-overlay {
    height: calc(100vh - 65px) !important;
    bottom: 65px !important;
    top: auto !important;
  }
}


/* HIDE STICKY ATC WHEN CART IS OPEN */
body.sidebar-opened #royal-sticky-atc {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -1 !important;
  transform: translateY(200%) !important;
  /* Spingi gi� */
}


/* --- NUTRIHANGAR MICRO-ANIMATIONS & HAPTICS --- */
@keyframes nh-cart-bump {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.95);
  }

  75% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.nh-anim-bump {
  animation: nh-cart-bump 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes nh-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.nh-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: nh-ripple 0.6s linear;
  pointer-events: none;
}


/* --- COMPONENTS FOR AI CONTENT --- */

/* Wrapper Generale */
.product-style-wrapper {
  padding: 10px;
  /* AGGIORNATO: Era senza padding specifico o diverso */
  max-width: 100%;
}

.product-style-wrapper h2 {
  font-size: 16px !important;
  color: var(--gold-bright2) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 15px !important;
  border-bottom: 1px solid var(--bordo-oro) !important;
  padding-bottom: 8px !important;
  font-weight: 700 !important;
}

.product-style-wrapper h3 {
  font-size: 14px !important;
  color: var(--gold-bright2) !important;
  margin-top: 15px !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.product-style-wrapper h4 {
  font-size: 13px !important;
  color: var(--text-light) !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  font-style: italic !important;
}

/* Box Contenuto */
.product-style-box {
  background: linear-gradient(135deg, var(--blue-solid) 0%, rgba(5, 27, 53, 0.9) 100%);
  padding: 8px;
  /* RIDOTTO: Era 15px */
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* ACCORDION (Details/Summary) STYLE */
details.luxury-accordion {
  margin-bottom: 10px;
  background: var(--grad-night-blue);
  border: 1px solid var(--bordo-oro);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

details.luxury-accordion[open] {
  box-shadow: var(--gold-glow);
}

details.luxury-accordion summary {
  padding: 12px 15px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-bright2);
  text-transform: uppercase;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
}

/* Custom Icon per Summary */
details.luxury-accordion summary::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--gold-bright);
  transition: transform 0.3s;
}

details.luxury-accordion[open] summary::after {
  content: '-';
  transform: rotate(180deg);
}

/* Contenuto interno Accordion */
details.luxury-accordion .product-style-box {
  border: none;
  background: transparent;
  padding-top: 5px;
  margin-bottom: 0;
  color: #fff;
}

/* Links */
.product-style-wrapper a {
  color: var(--gold-bright2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.product-style-wrapper a:hover {
  color: var(--gold-bright);
}

/* --- HANGAR HUD (Tech Background System) --- */
.nh-hud-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  /* Background level */
  pointer-events: none;
  overflow: hidden;
  background: #fdfdfd;
  /* Off-white base */
}

/* Griglia Millimetrata */
.nh-hud-grid {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-image:
    linear-gradient(rgba(5, 27, 53, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 27, 53, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  /* Celle larghe */
  will-change: transform;
}

/* Elementi Telemetrici Decorativi */
.nh-hud-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Mirini (Crosshairs) */
.nh-hud-crosshair {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  /* Gold Metal */
}

.nh-hud-tl {
  top: 30px;
  left: 30px;
  border-right: none;
  border-bottom: none;
}

.nh-hud-br {
  bottom: 30px;
  right: 30px;
  border-left: none;
  border-top: none;
}

/* Dati Tecnici */
.nh-hud-data {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: rgba(5, 27, 53, 0.3);
  letter-spacing: 2px;
}

.nh-hud-coord-x {
  bottom: 35px;
  right: 70px;
}

.nh-hud-coord-y {
  top: 35px;
  left: 70px;
  transform: rotate(90deg);
  transform-origin: left;
}

/* Mobile Optimization: Disabilita parallax pesante */
@media (max-width: 768px) {
  .nh-hud-grid {
    background-size: 40px 40px;
  }

  .nh-hud-data {
    display: none;
  }
}

/* === AI NUTRI-SCANNER SYSTEM (Sci-Fi Upgrade 3) === */

.nutri-scanner-container {
  position: relative;
  background: #ffffff !important;
  /* Brand Blue con trasparenza 0.4 */
  border: 1px solid rgba(89, 127, 186, 0.3);
  /* Brand Blue low opacity */
  padding: 5px;
  /* RIDOTTO: Era 20px */
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.nutri-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(89, 127, 186, 0.2);
  padding-bottom: 8px;
  font-family: 'Courier New', Courier, monospace;
  /* Tech font */
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--nutrienergy-brand-color);
  text-transform: uppercase;
}

.scanner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scanner-icon {
  color: #ffd700;
  /* Gold metal */
  animation: pulse-gold 2s infinite;
}

.scanner-status {
  background: rgba(89, 127, 186, 0.1);
  padding: 2px 6px;
  border-radius: 2px;
  color: #a0c4ff;
  font-size: 0.65rem;
}

.nutri-scanner-container .product__description {
  position: relative;
  z-index: 2;
  /* Tech text style override */
  line-height: 1.6;
}

/* --- Scanline Animation --- */
.scanner-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(89, 127, 186, 0.8) 50%, transparent 100%);
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(89, 127, 186, 0.8);
  animation: scan-vertical 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* --- Tech Corners --- */
.scanner-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--nutrienergy-brand-color);
  border-style: solid;
  border-width: 0;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.nutri-scanner-container:hover .scanner-corner {
  width: 15px;
  height: 15px;
  opacity: 1;
  box-shadow: 0 0 5px var(--nutrienergy-brand-color);
}

.corner-tl {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

/* --- Animations --- */
@keyframes scan-vertical {
  0% {
    top: -5%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 105%;
    opacity: 0;
  }
}

@keyframes pulse-gold {
  0% {
    opacity: 0.6;
    text-shadow: 0 0 0px #ffd700;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 5px #ffd700;
  }

  100% {
    opacity: 0.6;
    text-shadow: 0 0 0px #ffd700;
  }
}

/* === END AI NUTRI-SCANNER SYSTEM === */


/* === QUANTUM CHARGE ATC BUTTON (Sci-Fi Upgrade 2) === */

/* Base Button Enhancement */
.product-form .button--solid,
.product-item__quick-buy .button--solid,
.sticky-add-to-cart .button--solid {
  position: relative;
  overflow: hidden;
  /* Contains the energy beam */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

/* Energy Bar (Pseudo-element) */
.product-form .button--solid::before,
.product-item__quick-buy .button--solid::before,
.sticky-add-to-cart .button--solid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  /* Start outside */
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 20%,
      rgba(255, 215, 0, 0.4) 50%,
      /* Gold core */
      rgba(255, 255, 255, 0.1) 80%,
      transparent 100%);
  z-index: -1;
  /* Behind text */
  transition: left 0.6s ease;
}

/* Hover State: Charge Up */
.product-form .button--solid:hover::before,
.product-item__quick-buy .button--solid:hover::before,
.sticky-add-to-cart .button--solid:hover::before {
  left: 100%;
  /* Slide across */
  transition: left 0.8s ease;
}

/* Hover State: Glow & Lift */
.product-form .button--solid:hover,
.product-item__quick-buy .button--solid:hover,
.sticky-add-to-cart .button--solid:hover {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  /* Gold Glow */
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.8) !important;
}

/* Active/Click State: Discharge */
.product-form .button--solid:active,
.product-item__quick-buy .button--solid:active,
.sticky-add-to-cart .button--solid:active {
  transform: scale(0.98);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.8);
}


/* === HOLOGRAPHIC SEARCH PROJECTION (Sci-Fi Upgrade 4 - FINAL v5 SCOPED FIX) === */

/* 0. Input Z-Index & Style (Globale ma specifico per header) */
.site-search-handle {
  position: relative;
  z-index: 1002 !important;
  transition: all 0.3s ease;
}

.site-search-handle:focus-within {
  background: #0c1423 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3) !important;
}

.site-search-handle input[type="search"] {
  color: #ffffff !important;
  text-shadow: none !important;
}

.site-search-handle input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.site-search-handle:focus-within .icon {
  fill: #d4af37 !important;
}

/* 1. Backdrop Oscuro */
.search-results-overlay.active,
.search-results-container:not(:empty)~.search-results-overlay,
.site-search-handle:focus-within~.search-results-overlay {
  display: block !important;
  background-color: rgba(0, 5, 15, 0.92) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 998;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* 2. Container Modale Olografica (DEPRECATED - Moved to search-void-terminal.css) */
/* === END HOLOGRAPHIC SEARCH PROJECTION === */

`n`n
/* --- COMPACT CART DRAWER UI (OVERFLOW FIX & FONT SIZE) --- */

/* 1. Flex Container Containment */
#site-cart-sidebar .cart-item {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  /* Safety net */
  padding-right: 5px !important;
}

#site-cart-sidebar .cart-item__content {
  flex: 1 !important;
  width: 0 !important;
  /* Trick standard per Flexbox overflow */
  min-width: 0 !important;
  padding-right: 10px !important;
  /* Spazio per evitare che il testo tocchi il bordo */
}

#site-cart-sidebar .cart-item__content>div {
  width: 100% !important;
}

/* 2. Typography Sizing & Truncation */
#site-cart-sidebar .cart-item__title,
#site-cart-sidebar .text-animation--underline-thin {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  /* RIDOTTO: Era 15px */
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}

#site-cart-sidebar .cart-item__variant {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
  /* RIDOTTO: Era 11px */
  opacity: 0.7 !important;
  line-height: 1.2 !important;
}

#site-cart-sidebar .cart-item__price strong {
  font-size: 12px !important;
  /* RIDOTTO: Era 14px */
}

#site-cart-sidebar .cart-item__price del {
  font-size: 10px !important;
  /* RIDOTTO: Era 12px */
}

/* 3. Scroll Logic */
#site-cart-sidebar .cart__items {
  max-height: 340px !important;
  /* Abilita scroll dopo 2 prodotti (ottimizzato) */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
}

/* Custom scrollbar per il carrello */
#site-cart-sidebar .cart__items::-webkit-scrollbar {
  width: 4px !important;
}

#site-cart-sidebar .cart__items::-webkit-scrollbar-thumb {
  background: #d4af37 !important;
  border-radius: 10px !important;
}

`n.nh-toast-container {
  `n position: fixed;
  `n top: 20px;
  `n right: 20px;
  `n z-index: 10000;
  `n display: flex;
  `n flex-direction: column;
  `n gap: 12px;
  `n pointer-events: none;
  `n
}

`n`n.nh-toast {
  `n min-width: 300px;
  `n max-width: 400px;
  `n background: rgba(0, 10, 20, 0.85);
  `n backdrop-filter: blur(12px) saturate(180%);
  `n -webkit-backdrop-filter: blur(12px) saturate(180%);
  `n border: 1px solid rgba(212, 175, 55, 0.3);
  `n padding: 16px;
  `n color: #ffffff;
  `n font-family: var(--font-stack-mono, monospace);
  `n font-size: 13px;
  `n text-transform: uppercase;
  `n letter-spacing: 1px;
  `n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(212, 175, 55, 0.1);
  `n position: relative;
  `n overflow: hidden;
  `n pointer-events: all;
  `n animation: nh-toast-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  `n display: flex;
  `n align-items: center;
  `n gap: 15px;
  `n
}

`n`n.nh-toast::before {
  `n content: '';
  `n position: absolute;
  `n left: 0;
  `n top: 0;
  `n width: 4px;
  `n height: 100%;
  `n background: #d4af37;
  `n box-shadow: 0 0 15px #d4af37;
  `n
}

`n`n.nh-toast.error {
  border-color: rgba(255, 50, 50, 0.4);
}

`n.nh-toast.error::before {
  background: #ff3232;
  box-shadow: 0 0 15px #ff3232;
}

`n`n.nh-toast-content {
  flex-grow: 1;
}

`n`n.nh-toast-icon {
  `n font-size: 18px;
  `n color: #d4af37;
  `n text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  `n
}

`n`n.nh-toast.error .nh-toast-icon {
  color: #ff3232;
  text-shadow: 0 0 10px rgba(255, 50, 50, 0.5);
}

`n`n.nh-toast-progress {
  `n position: absolute;
  `n bottom: 0;
  `n left: 0;
  `n height: 2px;
  `n background: rgba(212, 175, 55, 0.5);
  `n width: 100%;
  `n transform-origin: left;
  `n animation: nh-toast-progress 4s linear forwards;
  `n
}

`n`n@keyframes nh-toast-in {
  `n 0% {
    transform: translateX(120%) skewX(-10deg);
    opacity: 0;
  }

  `n 70% {
    transform: translateX(-10%) skewX(5deg);
    opacity: 1;
  }

  `n 100% {
    transform: translateX(0) skewX(0);
    opacity: 1;
  }

  `n
}

`n`n@keyframes nh-toast-out {
  `n 0% {
    transform: translateX(0);
    opacity: 1;
  }

  `n 100% {
    transform: translateX(120%) scale(0.8);
    opacity: 0;
  }

  `n
}

`n`n@keyframes nh-toast-progress {
  `n from {
    transform: scaleX(1);
  }

  `n to {
    transform: scaleX(0);
  }

  `n
}

`n`n.nh-toast.exit {
  `n animation: nh-toast-out 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  `n
}

`n`n@media screen and (max-width: 768px) {
  `n .nh-toast-container {
    `n top: 10px;
    `n right: 50%;
    `n transform: translateX(50%);
    `n width: 92%;
    `n max-width: none;
    `n align-items: center;
    `n
  }

  `n .nh-toast {
    `n width: 100%;
    `n min-width: 0;
    `n font-size: 12px;
    `n padding: 12px;
    `n
  }

  `n
}

/* --- TELEMETRIC STOCK COUNTER (SCI-FI UPGRADE 5) --- */
.telemetric-stock-container {
  margin-bottom: 15px;
  font-family: var(--font-heading-family);
  /* Use theme font */
  letter-spacing: 1px;
  position: relative;
  padding: 8px 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  /* Gold dim */
  background: rgba(5, 27, 53, 0.4);
  /* Deep Blue transparent */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
  /* Tech corner */
  opacity: 0;
  animation: fadeInHUD 0.8s forwards 0.3s;
}

@keyframes fadeInHUD {
  to {
    opacity: 1;
  }
}

.telemetric-header {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--gold-metal, #d4af37);
  text-transform: uppercase;
  margin-bottom: 6px;
  align-items: center;
}

.telemetric-label {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.telemetric-label::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--gold-metal, #d4af37);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--gold-metal, #d4af37);
  animation: pulseStock 2s infinite;
}

@keyframes pulseStock {
  0% {
    opacity: 0.5;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.telemetric-value {
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  font-family: monospace;
}

.stock-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stock-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-royal-deep1, #0a192f), var(--gold-metal, #d4af37));
  width: 0%;
  /* Dynamic */
  position: relative;
  transition: width 1s ease-out;
  box-shadow: 0 0 8px var(--gold-metal, #d4af37);
}

/* Low Stock State */
.stock-bar-fill.low-stock {
  background: linear-gradient(90deg, #330000, #ff0000);
  box-shadow: 0 0 8px #ff0000;
}

.stock-bar-fill.high-stock {
  background: linear-gradient(90deg, #001a00, #00ff00);
  box-shadow: 0 0 8px #00ff00;
}

.stock-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .3) 75%, transparent 75%, transparent);
  background-size: 6px 6px;
  opacity: 0.5;
}

.telemetric-decor-line {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 15px;
  height: 15px;
  border-bottom: 2px solid var(--gold-metal, #d4af37);
  border-right: 2px solid var(--gold-metal, #d4af37);
}


/* --- END OF THEME STYLES --- */

/* Overlay Sfondo */
.search-results-overlay.active {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px);
}


.site-search-handle {
  position: relative !important;
}


/* --- OMNIBUS PRICING COMPLIANCE (01/01/2026) --- */
:root {
  --color-price-list: #6a6a6a;
  /* Grigio medio elegante */
  --color-price-current: #051b35;
  /* Blu Royal Deep */
  --color-badge-save: #d4af37;
  /* Oro Metal */
  --bg-badge-save: rgba(212, 175, 55, 0.1);
}

/* ENFORCING PRICE COLORS GLOBALLY */
.price-item--regular,
.price-item--sale,
.product-item .price,
.product__price,
.price__current,
.product-price--original {
  color: var(--color-price-current) !important;
}

/* Listino (Barrato) */
.price__sale .price-item--regular,
.price s,
.product__price--compare,
.price-item--regular s,
.product-price--compare {
  color: var(--color-price-list) !important;
  text-decoration: line-through;
}

/* Label 'Listino:' */
.price-label-listino {
  font-size: 0.9em;
  color: var(--color-price-list);
  margin-right: 4px;
  font-weight: 400;
  text-transform: capitalize;
}

/* Badge Risparmio 'Risparmi �X' */
.badge-savings-absolute {
  display: inline-block;
  background-color: var(--bg-badge-save);
  color: var(--color-badge-save);
  border: 1px solid var(--color-badge-save);
  padding: 2px 6px;
  font-size: 0.8em;
  font-weight: 700;
  border-radius: 4px;
  margin-left: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Override per Mega Menu se necessario */
.gal-p-old {
  color: var(--color-price-list) !important;
}


/* --- CSS GLOBALE AGGIUNTIVO 01/01/2026 --- */

/* 1. Badge Risparmio Premium (Stile Hangar Tech) */
.badge-savings-absolute {
  display: inline-block;
  background-color: rgba(212, 175, 55, 0.08);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 4px 8px;
  font-family: var(--font-heading-family, sans-serif);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 2px;
  margin-top: 6px;
  box-shadow: none;
  white-space: nowrap;
}

/* 2. Pulizia Vecchi Badge (Quick View & Legacy Force Hide) */
.discount-badge,
.badge--sale,
.product-badge--sale,
.badge-sale-diagonal,
.product-item__badge,
.badge-overlay {
  display: none !important;
}

/* 3. Product Item Mobile: Prezzi in linea & Badge Sotto */
@media (max-width: 767px) {
  .product-item__price .product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 5px;
    row-gap: 2px;
  }

  /* Prezzo Corrente */
  .product-item__price .product-price--original {
    font-size: 15px !important;
    font-weight: 700;
    margin-right: 0 !important;
  }

  /* Wrapper Listino (Label + Prezzo Barrato) */
  .product-item__price .price-label-listino {
    font-size: 11px !important;
    opacity: 0.8;
  }

  .product-item__price .product-price--compare {
    font-size: 11px !important;
    margin-left: 0 !important;
  }

  /* Forza Badge Risparmio a capo */
  .product-item__price .badge-savings-absolute {
    display: block;
    width: fit-content;
    margin-top: 4px;
  }

  /* Omaggio e Spedizione: Affiancati sopra il bottone */
  .product-item__quick-buy .all-badges-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-bottom: 6px;
  }

  .product-item__quick-buy .gift-badge-wrapper,
  .product-item__quick-buy .shipping-badge-wrapper {
    font-size: 9px;
    padding: 2px 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #f9f9f9;
    white-space: nowrap;
  }
}