/* ============================================ */
/* VARIABILI CSS */
/* ============================================ */
:root {
    --item-m-aspect-width: 1;
    --item-m-aspect-height: 1.05;

    /* Configurazione background per zimh - Desktop default */
    --zimh-bg-position-x: right -40px;
    --zimh-bg-position-y: bottom 140px;
    --zimh-bg-size: auto 85%;
    --nav-color: #ffffff;
    --page-padding: 30px;
    --page-padding-mobile: 30px;
    --accent-color: #9f0471;
    --accent-dark-color: #53003a;
    --hover-color: #9f0471;
    --product-accent: #1b3245;
    --text-accent: #000000;

    /* LIGHT MODE (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #fafafa;
    --text-primary: #000000;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --overlay-bg: rgba(255, 255, 255, 0.95);
}

/* DARK MODE */
html.dark-mode {
    /* Colori dark mode */
    --bg-primary: #1a1a1a;
    --bg-secondary: #252525;
    --bg-tertiary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --border-color: #404040;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --overlay-bg: rgba(26, 26, 26, 0.95);

    /* Aggiusta alcuni colori specifici per dark mode */
    --nav-color: #ff8db9;
    --accent-color: #ff8db9;
    --hover-color: #ff8db9;
    --product-accent: #ff8db9;
}

/* ============================================ */
/* APPLICAZIONE VARIABILI DARK MODE */
/* ============================================ */
/* Elementi con sfondo secondario */
.product-image,
.product-image-allshoes,
.hero-content-block-product,
.hero-content-block-product_b {
    background-color: var(--bg-secondary);
}

.series-banner-text {
    font-family: 'Juana Alt';
    color: #ffffff;
    font-size: 80px;
    font-weight: 800;
    line-height: 0.8;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    padding: 0;
    letter-spacing: -2px;
    text-align: center;

    /* white-space: nowrap */
    /* text-overflow: ellipsis */
    /* display: inline-block */
    /* text-align: center */
}

/* Testi principali */
.product-title,
.hero-description-product,
.hero-description-product_b,
.hero-description-product_c {
    color: var(--text-primary);
}

/* Testi secondari */
.series-tag,
.product-spec-label,
.product-spec-label_b {
    color: var(--text-secondary);
}

/* Bordi */
.series-tag-product,
.size-item-btn {
    border-color: var(--border-color);
}

/* Pannelli e overlay */
#newsizer,
#newsizer_b {
    background-color: var(--bg-tertiary);
}

/* Menu e navigazione */
.menu-bg {
    background-color: var(--overlay-bg);
}

/* Pulsanti */
.buy-button {
    background: var(--product-accent);
    color: var(--text-primary);
}

/* Dark mode specific adjustments */
html.dark-mode .product-image,
html.dark-mode .product-image-allshoes {
    background-color: var(--bg-secondary);
}

html.dark-mode .series-tag {
    border-color: var(--text-secondary);
}

html.dark-mode .size-item-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .size-item-btn.selected {
    background-color: var(--product-accent);
    color: white;
}

.nav-color {
    color: var(--nav-color);
}

.accent-bg-product {
    background-color: var(--product-accent) !important;
}

.prod-accent {
    color: var(--product-accent) !important;
    fill: var(--product-accent) !important;
}

.txt-accent {
    color: var(--text-accent) !important;
    fill: var(--text-accent) !important;
}

/* Font smoothing applicato a TUTTI gli elementi */
* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

html {
    width: 100%;
    height: 100%;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    touch-action: manipulation;
    backface-visibility: hidden;
    padding: 0 var(--page-padding);
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    font-synthesis: none;
    background-color: var(--bg-html);
}

bo
dy {
    background-color: transparent;

    /* Lo sfondo è gestito dallo script su html */
    color: var(--text-primary
    );
    transition: color 0.3s ease;

    /* margin: 0 auto; */
    /* Centra il body */
    padding: 0;
    overflow-x: hidden;

    /* Previene scroll orizzontale */
    /* width: calc(1600px - (var(--page-padding) * 2)); */
    /* Default: sopra 1600px - sottrae il padding */
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    font-synthesis: none;
}

.product-two-column-layout {
    display: grid;
    grid-template-columns: calc(30% - 5px) calc(70% - 5px);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    padding-top: 0;
}

.feature-icon > .material-icons.md-18 {
    margin: 0;
    padding: 0;
}

.product-two-column-layout_b {
    display: grid;
    grid-template-columns: calc(30% - 5px) calc(70% - 5px);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 400px;
    box-sizing: border-box;
}

.product-two-column-layout_c {
    display: grid;
    grid-template-columns: calc(60% - 7px) calc(22% - 7px) calc(18% - 6px);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 220px;
    box-sizing: border-box;
}

/* Layout a tre colonne uguali */
.product-three-column-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    padding: 20px 0;
}

.product-column-third {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.height-product {
    height: 450px;
}

/* Colonna sinistra */
.product-column-left {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: end;

    /* Altezza minima per contenere il dropdown */
}

.product-column-left_b {
    width: 100%;
    position: relative;
    min-height: auto;
    overflow: hidden;
    display: flex;
    align-items: end;

    /* Altezza minima per contenere il dropdown */
    padding: 40px 40px 40px 0;
}

.product-column-left_c {
    width: 100%;
    position: relative;
    min-height: auto;
    overflow: hidden;

    /* Altezza minima per contenere il dropdown */
}

/* Colonna destra */
.product-column-right {
    width: 100%;
}

/* Variabili CSS per facile modifica delle proporzioni */
:root {
    --product-col-left: 30%;

    /* Modifica qui per cambiare larghezza colonna sinistra */
    --product-col-right: 70%;

    /* Modifica qui per cambiare larghezza colonna destra */
}

/* ============================================ */
/* BOTTONI SIZE E ADD TO BAG - PRODUCT PAGE */
/* ============================================ */
.product-size-cart-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

/* Box per bottone SIZE */
.size-selector-box {
    flex-shrink: 0;
}

.size-button-product {
    margin: 0;
    padding: 15px 0 15px 0;
    background-color: #ffffff;
    cursor: pointer;
    border-radius: 45px;
    width: 120px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.size-icon-product {
    font-size: 20px;
}

.size-arrow-product {
    transition: all 0.3s ease;
    margin: 0 0 0 0;
}

/* Box per bottone ADD TO BAG */
.cart-button-box {
    flex-grow: 1;
}

.add-to-bag-button {
    width: 100%;
    text-align: center;
    padding: 15px 20px;
    border-radius: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transition: all 0.3s ease;
}

.add-to-bag-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.price-tag-product {
    font-weight: bold;
    font-size: 16px;
}

.bag-icon-product {
    font-size: 20px;
}

.bag-text-product {
    font-size: 14px;
}

/* Responsive per bottoni */
/* Reset universale - Box model e margini/padding */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Reset specifico per elementi HTML5 semantici */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
    margin: 0;
    padding: 0;
}

/* Reset heading */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* Reset paragrafi e elementi di testo */
p,
blockquote,
pre,
address {
    margin: 0;
    padding: 0;
}

/* Reset liste */
ul,
ol,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Reset form elements */
button,
input,
optgroup,
select,
textarea {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* Reset link */
a {
    text-decoration: none;
    color: inherit;
}

/* Reset immagini */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Reset tabelle */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Reset elementi inline */
span,
strong,
em,
b,
i,
u,
small,
sub,
sup {
    margin: 0;
    padding: 0;
}

.right-menu-container .icon.hamburger {
    display: none;
    cursor: pointer;
}

.hideit {
    display: none !important;
}

/* Immagini - configurazione base desktop */
#top-tier .itemM .zimh {
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* CONFIGURAZIONE TOP-TIER */
/* Aspect ratio per itemM: modificare qui per cambiare proporzioni */
img {
    image-rendering: auto;
    vertical-align: middle;
}

.content-top-group {
    width: 33%;
}

.backbtncont {
    position: fixed;
    top: -30px;
    left: 50%;
    margin-left: -32px;
    z-index: 20;
    cursor: pointer;
}

#bottommenu {
    vertical-align: central;
    font-family: "open_sanssemibold",sans-serif;
    font-size: 12px;
    line-height: 3px;
    color: #fdfdfd;
    opacity: 0;
}

.highlight {
    color: #41aa92;
}

.unit-product {
    display: flex;
    padding-bottom: 0;
    align-items: center;
    margin-bottom: 15px;
    justify-content: flex-start;
    flex-direction: row;
}

.unit-product_b {
    display: flex;
    padding-bottom: 0;
    align-items: center;
    margin-bottom: 15px;
    justify-content: flex-end;
    flex-direction: row;
}

#topTitle {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    touch-callout: none;
    user-select: none;
    text-decoration: none;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.item_View {
    width: 175px;
    height: 175px;
    position: relative;
    margin-left: 10px;
}

#whishlist .item_View {
    width: 155px;
    height: 155px;
    position: relative;
    margin-left: 0;
}

#topTitle br {
    display: none;
}

#topTitle .sp {
    display: inline;
}

.breaker {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: rgba(174,27,29,.54);
    z-index: 2;
}

.fixC {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container,
#container,
#container-top,
#recent_items {
    clear: both;
    overflow: hidden;
}

#container,
#container-top,
.container {
    margin: 0 auto;
    width: 100%;
}

#container_product {
    padding: 20px;
}

#recent_items {
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    padding-bottom: var(--page-padding);
}

.main_descr {
    font-family: 'Lato';
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 10px;
    color: black;
    margin-bottom: 20px;
}

/* Contenitore per .adb nella griglia */
.adb-container {
    position: relative;
    width: 0;

    /* Non occupa spazio orizzontale */
    height: 0;

    /* Non occupa spazio verticale */
    overflow: visible;

    /* Permette all'elemento di uscire */
}

.adb {
    position: absolute;

    /* Posizione assoluta rispetto al contenitore */
    width: 1415px;
    height: 1500px;
    background-image: url('../images/Products/Bay_A0_Trans_LITH_PP.png');
    background-size: contain;
    background-position: -180px -40px;
    background-repeat: no-repeat;
    z-index: 1000;
    overflow: visible;
    pointer-events: none;
    box-sizing: border-box;

    /* Posizionamento relativo alla cella della griglia */
    left: -40px;

    /* Sposta a sinistra rispetto alla cella */
    top: -450px;

    /* Sposta in alto rispetto alla cella */
    transform: rotate(20deg);
}

/* Grid layout per recent items - nuova implementazione */
#recent_items.recent-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Nuova classe per gli item nella griglia */
.recent-grid-item {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0;

    /* Rimuove i margini, gap gestito dalla grid */
}

/* Contenitore immagine per recent grid items */
.recent-grid-item .zimh_best {
    height: 100%;
    background-size: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    transition-duration: 1.3s;
    -webkit-transition-duration: 1.3s;
    -moz-transition-duration: 1.3s;
    -o-transition-duration: 1.3s;
}

/* Storia/timeline container per recent grid */
.recent-grid-item .zimhb-smallleft_history {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 20px 0 20px 0;
}

/* Testo timeline per recent grid */
.recent-grid-item .txhSmall_timeline {
    font-family: "Juana Alt";
    max-width: 100%;
    font-weight: 400;
    font-size: 18px;

    /* Corretto il valore del font-size */
    line-height: 20px;
    color: #fff;
    text-align: center;
    margin-left: 0;
    margin-bottom: 0;
}

.recently-viewed {
    background-color: transparent;
    margin-left: calc(var(--page-padding) * -1);
    margin-right: calc(var(--page-padding) * -1);
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    width: calc(100% + (var(--page-padding) * 2));
    box-sizing: border-box;
    padding-bottom: calc(var(--page-padding)*1.1);

    /* Ombra rimossa - spostata sul footer */
    position: relative;
    z-index: 10;
}

.make-it-large {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;

    /* Padding di default - verrà sovrascritto nei breakpoint */
    padding-left: calc((100vw - 1600px) / 2 + var(--page-padding));
    padding-right: calc((100vw - 1600px) / 2 + var(--page-padding));
    background-color: white;
}

#container .item,
#container .itemE,
#container .itemQ {
    overflow-x: hidden;
    overflow-y: hidden;
    float: left;
    border: 0;
    border-radius: 25px;
    width: 0px;
    height: 0px;
}

/* Nasconde gli elementi solo quando non siamo in Pinegrow */
body:not(.pg-editing) #container .item,
body:not(.pg-editing) #container .itemE,
body:not(.pg-editing) #container .itemQ {
    visibility: hidden;
}

#txx0,
#txx1,
#txx2,
#bottommenu,
#txx3 {
    opacity: 0;
}

#txx3 {
    font-family: "socialmedianormal",sans-serif;
    font-size: 142px;
    color: #fff;
    margin: -30px 0;
    padding: 15px 0;
    text-align: center;
}

.m1 {
    font-family: "socialmedianormal",sans-serif;
    font-size: 142px;
    color: #fff;
    margin-bottom: 85px;
    margin-left: -10px;
    text-align: center;
}

.txthov {
    max-width: 800px;
    color: #000;
    margin: 0 0 55px 30px;
}

/* Stile specifico per txthov dentro brownO */
.txthov-brownO {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    max-width: calc(100% - 60px);
    color: #ffffff;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Contenitore per il testo a sinistra */
.txthov-brownO-content {
    flex: 1;
    text-align: left;
}

.txthovinside {
    position: absolute;
    bottom: 10px;
    max-width: 100%;
    color: #000;
}

.btnhov {
    position: absolute;
    bottom: 19px;
    right: 19px;
    width: 31px;
    height: 31px;
    color: #fff;
    font-size: 45px;
    font-family: "socialmedianormal",sans-serif;
    cursor: pointer;
}

.txh1 {
    font-family: "Lato",sans-serif;
    font-weight: 700;
    text-align: left;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 9px 17px 9px 15px;
    background-color: #fff;
    border-radius: 20px;
    font-smoothing: antialiased;
    display: inline-block;
    width: auto;
    height: auto;
    border: 0;
}

txh2 {
    font-family: "Lato",sans-serif;
    font-weight: 700;
    font-size: .62em;
    color: #fff;
    letter-spacing: -.1px;
    line-height: 22px;
    text-transform: uppercase;
}

.zimh {
    height: 100%;
    background-size: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: background-size 0.3s ease;
    background-color: #3a3a3a;
}

.zimh_left {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: transparent;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    transition-duration: 1.3s;
}

.zimh_leftb {
    height: auto;
    width: 100%;
    transition-duration: 1.3s;
}

.zimh_best {
    height: 100%;
    background-size: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    transition-duration: 1.3s;
}

.zimh_best_large {
    height: 100%;
    background-size: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    transition-duration: 1.3s;
}

/* Classe per prodotti con offset dal bottom */
.zimh_best.product-offset {
    background-position: center bottom;
}

/* Varianti di offset - puoi usarle dinamicamente */
.zimh_best.offset-10 {
    background-position: center calc(100% - 10px);
}

.zimh_best.offset-20 {
    background-position: center calc(100% - 20px);
}

.zimh_best.offset-30 {
    background-position: center calc(100% - 30px);
}

.zimh_best.offset-40 {
    background-position: center calc(100% - 40px);
}

.zimh_best.offset-50 {
    background-position: center calc(100% - 50px);
}

/* Classe dinamica con variabile CSS custom */
.zimh_best.product-dynamic {
    background-position: center calc(100% - var(--bottom-offset, 0px));
    --bottom-offset: 45px;
    background-repeat: no-repeat;
    background-color: #fafafa;
}

.zimh_best.product-dynamicQ {
    background-position: center calc(100% - var(--bottom-offset, 0px));
    --bottom-offset: -50px;
    background-repeat: no-repeat;
    background-color: #fafafa;
}

.zimh_descrpr {
    height: 100%;
    background-size: 100%;
    width: 70%;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    transition-duration: 1.3s;
    background-color: transparent;
    text-align: left;
    box-sizing: border-box;
}

.zimhb-smallleft {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 20px 0 20px 20px;
}

.zimhb-smallleft_best {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px 30px 25px 30px;
}

.zimhb-smallleft_top {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px 30px 25px 30px;
}

.zimhb-smallleft_history {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 20px 0 20px 0;
}

.zimhb-largeleft {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 40px 0 40px 40px;
}

.zimhb-largecenter {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 35px 0 45px 0;
    position: absolute;
    right: 0;
}

.zimhb {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 40px 0 40px 0;
}

select {
    appearance: none;
    appearance: none;
    background: #f0f0f0;
    padding: 6px;
    font-family: "Lato";
    font-weight: 400;
    font-size: 14px;
    border: 1px thin #d4e96b;
    border-radius: 1px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    display: block;
    padding-right: 30px;
    color: #333;
    width: 200px;
}

select::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #444;
    font-size: 10px;
}

select:focus {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

#lodino {
    position: absolute;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 100%;
    touch-callout: none;
    user-select: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.btnleft {
    position: fixed;
    bottom: 50%;
    left: -60px;
    width: 31px;
    height: 31px;
    vertical-align: central;
    cursor: pointer;
    z-index: 30;
}

.btnright {
    position: fixed;
    bottom: 50%;
    right: -60px;
    width: 31px;
    height: 31px;
    vertical-align: central;
    cursor: pointer;
    z-index: 30;
}

.sText {
    display: none;
    font-family: "bitterregular",serif;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: #d4d4d4;
    flex-direction: column;
}

.m2 {
    line-height: 14px;
    font-size: 18px;
    text-align: center;
    width: 100%;
    white-space: pre-wrap;
}

.boxShadow2 {
    box-shadow: 0 0 20px 0 rgba(0,0,0,.5);
}

.boxShadow {
    box-shadow: 0 0 0 0 transparent;
}

.loader {
    width: 15px;
    height: 15px;
    border-radius: 12px;
    margin-bottom: 220px;
    margin-left: 60px;
    animation: loaderm 1.5s ease-in-out infinite;
}

@keyframes loaderg {
    0% {
        background-color: rgba(255,255,255,.2);
    }

    25% {
        background-color: #fff;
    }

    50% {
        background-color: rgba(255,255,255,.2);
    }

    75% {
        background-color: rgba(255,255,255,.2);
    }

    to {
        background-color: rgba(255,255,255,.2);
    }
}

@keyframes loaderm {
    0% {
        background-color: rgba(255,255,255,.2);
    }

    25% {
        background-color: rgba(255,255,255,.2);
    }

    50% {
        background-color: #fff;
    }

    75% {
        background-color: rgba(255,255,255,.2);
    }

    to {
        background-color: rgba(255,255,255,.2);
    }
}

@keyframes loaderd {
    0% {
        background-color: rgba(255,255,255,.2);
    }

    25% {
        background-color: rgba(255,255,255,.2);
    }

    50% {
        background-color: rgba(255,255,255,.2);
    }

    75% {
        background-color: #fff;
    }

    to {
        background-color: rgba(255,255,255,.2);
    }
}

.txh4,
.txh4_in {
    font-family: "Juana Alt";
    font-weight: 400;
    font-size: 90px;
    margin-bottom: 15px;
    line-height: 85px;
    color: var(--nav-color);
}

.txh4_in {
    margin-bottom: 0;
    line-height: 60px;
    font-size: 80px;
    line-height: 80px;
}

/* Recently viewed title */
.recently-viewed-title,
.details-title-product {
    font-family: "Juana Alt";
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    color: #ffffff;
    padding-top: 40px;
    width: 100%;
    text-align: left;
    margin-bottom: 14px;

    /* Forza a capo solo tra parole intere */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    white-space: normal;
}

.details-title-product {
    color: #000000;
}

.details-title-product .accent {
    font-weight: 900;
    font-family: 'Juana Alt';
    color: var(--nav-color);
    color: #000000;
}

.recently-viewed-title .accent {
    font-weight: 900;
    font-family: 'Juana Alt';
    color: var(--accent-color);
}

/* Contenitore principale hero */
.hero-content-block,
.hero-content-block-allshoes,
.hero-content-block-product,
.hero-content-block-product-down {
    /* max-width: 800px */
    color: #000;
    position: absolute;
    bottom: 0;
    padding: 0;
    width: 100%;
}

.hero-content-block-allshoes {
    margin: 70px 0 0 0;
}

.hero-top-badge {
    font-family: 'Lato';
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translateX(-50%);
    padding: 5px 8px;
    font-weight: 200;
    font-size: 14px;
    color: #ffffff;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 8px;
    line-height: 1;
    width: auto;
    background-color: #9f0471;
    top: -20px;
    margin-bottom: 10px;
    left: 0;
    position: relative;
    padding: 5px 8px;
}

.hero-content-block-product {
    display: flex;
    margin: 0;
    position: relative;

    /* Aggiunto per posizionare correttamente favl-product */
    /* Assicura che gli elementi interni siano uno sotto l'altro */
    padding: 40px;
    background-color: transparent;
    border-radius: 45px;
    flex-direction: column;
    justify-content: space-between;

    /* height: 970px */
    height: auto;
    width: 100%;
    overflow: hidden;
    padding: 40px 40px 40px 0;
}

.hero-content-block-product_b {
    display: flex;
    margin: 0;
    position: relative;

    /* Aggiunto per posizionare correttamente favl-product */
    /* Assicura che gli elementi interni siano uno sotto l'altro */
    padding: 35px;
    background-color: #ffffff;
    border-radius: 35px 35px 0 0;
    flex-direction: column;
    justify-content: space-between;

    /* height: 970px */
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Reset margini di default del browser per heading dentro section */
.hero-content-block-product h1,
.hero-content-block-product h2,
.hero-content-block-product h3,
.hero-content-block-product h4,
.hero-content-block-product h5,
.hero-content-block-product h6 {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-top: 5px;

    /* Spazio uniforme sotto ogni heading */
}

.hero-main-heading-product {
    font-family: "Juana Alt";
    font-weight: 900;
    font-size: 70px;
    margin-top: 0;

    /* Rimuove spazio extra dopo category label */
    line-height: 60px;

    /* da txh4-hero */
    color: #000000;
}

.hero-content-block-product_b .hero-main-heading-product {
    margin-bottom: 0 !important;
    margin-top: 0px !important;
    line-height: 30px !important;
    font-size: 34px !important;
}

.hero-content-block-product_b {
    padding: 20px 45px 20px 35px;
    margin-bottom: 20px;
    border-radius: 65px;
}

.hero-content-block-product_b .buy-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    padding: 14px 20px;
    bottom: auto;
}

.hero-content-block-product_b .product-price-product b {
    font-size: 20px;
    font-weight: 400;
    display: none;
}

.hero-content-block-product_b .product-price-product {
    margin-top: 0 !important;
}

.hero-content-block-product_b .favl-product {
    top: 25px;
    right: 35px;
    display: none;
}

.hero-content-block-product_b .series-content-badge-product {
    transform: translateX(-8px);
    margin: 0;
}

.hero-content-block-product_b .series-tag-product {
    margin: 0;
}

.hero-content-block-product_b .spec-value-with-arrow {
    font-size: 20px !important;
    font-weight: 400 !important;
}

/* Label categoria - sostituisce bestseller_txt_large */
.hero-category-label {
    text-align: left;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 6px;
    line-height: 18px;
}

.hero-category-label-product {
    text-align: left;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 18px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Heading principale - sostituisce txh4 + txh4-hero */
.hero-main-heading {
    font-family: "Juana Alt";
    font-weight: 400;
    font-size: 110px;
    margin-top: 0;

    /* Rimuove spazio extra dopo category label */
    margin-bottom: 16px;
    line-height: 91px;

    /* da txh4-hero */
}

.hero-main-subheading {
    font-family: "Juana Alt";
    font-weight: 400;
    font-size: 80px;
    margin-top: 0;

    /* Rimuove spazio extra dopo category label */
    margin-bottom: 10px;
    line-height: 70px;
    color: black;
}

/* Accent per heading - sostituisce text-bold-juana */
.hero-heading-accent {
    font-weight: 900;
    font-family: 'Juana Alt';
}

/* Descrizione hero - sostituisce mainPay + text-white-juana */
.hero-description {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 43px;
    line-height: 1;

    /* Aggiunto line-height per mantenere interlinea */
    color: #ffffff;
    margin-top: 0;

    /* Rimuove spazio extra */
    margin-bottom: 36px;

    /* da text-white-juana   display: none; */
}

.hero-description-product {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 22px;
    line-height: 22px;

    /* Aggiunto line-height per mantenere interlinea */
    color: #000000;
    margin-top: 2px;

    /* Rimuove spazio extra */
    margin-bottom: 0;

    /* da text-white-juana */
}

.hero-description-product_b {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 24px;
    line-height: 22px;
    font-weight: 900;

    /* Aggiunto line-height per mantenere interlinea */
    color: var(--product-accent);
    margin-top: 0;

    /* Rimuove spazio extra */
    margin-bottom: 3px;

    /* da text-white-juana */
}

.hero-description-product_c {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 26px;
    line-height: 22px;
    font-weight: 900;

    /* Aggiunto line-height per mantenere interlinea */
    color: var(--product-accent);
    margin-top: 0;

    /* Rimuove spazio extra */
    margin-bottom: 3px;

    /* da text-white-juana */
    min-height: 28px;
}

.mgp {
    margin-bottom: 95px;
}

.hero-description-product_d {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 50px;
    line-height: 50px;

    /* Aggiunto line-height per mantenere interlinea */
    color: var(--product-accent);
    margin-top: 0;

    /* Rimuove spazio extra */
    margin-bottom: 10px;

    /* da text-white-juana */
    min-height: 28px;
}

.hero-description-product_d b {
    font-family: 'Juana Alt';
    font-weight: 900;
}

/* CTA link - sostituisce tag8 */
.hero-cta-link {
    display: inline-block;
    border-radius: 30px;
    padding: 18px 28px;
    font-size: 16px;
    margin: 15px 0 0 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 16px;
    cursor: pointer;
    color: var(--nav-color);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: var(--nav-color);
}

.hero-cta-link-buy {
    display: inline-block;
    border-radius: 20px;
    padding: 14px 24px 14px 24px;
    font-size: 16px;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 16px;
    cursor: pointer;
    color: var(--nav-color);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: var(--nav-color);
}

.hero-cta-link:hover,
.hero-cta-link-buy:hover {
    /* filter: brightness(1.1) */
    /* color: var(--hover-color) */
    background-color: var(--accent-dark-color);
}

/* ========================================
   MODAL SYSTEM - NOOVA DESIGN
   ======================================== */
/* Global overlay - usato per tutti i modal */
#global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    z-index: 999;
    opacity: 0.6;
}

/* Container per modal - centrato */
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
}

/* Promo modal specifico */
#promo-modal {
    width: 90%;
    max-width: 500px;
}

/* Classe debug per vedere il modal durante lo sviluppo */
.modal-container.debug-visible {
    display: block !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* Mostra anche l'overlay in debug mode */
.debug-visible ~ #global-overlay,
#global-overlay.debug-visible {
    display: block !important;
}

/* Modal content container - usando padder di Noova */
.modal-content {
    background-color: #ffffff;
    border-radius: 20px;
    max-width: 400px;
    width: 90%;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
    text-align: center;
}

/* Padder class aggiunge padding 70px come nel sistema Noova */
.padder {
    padding: 40px 70px;
}

/* Stili specifici per elementi Noova nel modal */
.boldy {
    font-family: 'Juana Alt';
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 0;
    color: #000000;
    width: 100%;
}

.bb_section {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.modal_section,
.smaller {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.smaller {
    font-size: 14px;
    margin-top: 4px;
}

.mm_space_5 {
    height: 10px;
    display: block;
    margin: 0;
    padding: 0;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal close button */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-family: 'Lato',  sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.15;
    color: #444343;
    text-transform: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: button;
    border-style: none;
    box-sizing: border-box;
}

.modal-close:hover {
    color: var(--hover-color);
}

/* Form input stile Noova */
#promo-modal .noova-input {
    width: 80%;
    margin: 0;
    margin-bottom: 8px;
    padding: 10px 10px 10px 10px;
    background-color: #f8f8f8;
    border: none;
    border-radius: 10px;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    overflow: visible;
    box-sizing: border-box;
}

#promo-modal .noova-input:focus {
    outline: none;
    border-color: #ffaeae;
}

#promo-modal .noova-input:not(:placeholder-shown) {
    font-weight: 700;
}

/* Tag6 button stile Noova */
#promo-modal .tag6 {
    display: inline-block;
    position: relative;
    margin: 15px 0 0 0;
    padding: 12px 24px;
    background-color: #ffc9c9;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
}

#promo-modal .tag6.ohhv:hover {
    transform: scale(0.98);
}

#promo-modal .tag6.ohhv:focus {
    transform: scale(0.98);
    outline: none;
}

/* Form layout */
#promo-modal .promo-form {
    margin-top: 5px;
}

/* Masonry break separator */
.masonry-break {
    width: 100%;
    color: var(--nav-color);
    top: 40px;
    font-size: 40px;
    text-align: left;

    /* margin: 40px 0 20px 0 */
    font-family: 'Juana Alt';
    font-weight: 400;

    /* Forza a capo solo tra parole intere */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    white-space: normal;
}

/* Assicura che gli span dentro masonry-break non interferiscano con il wrapping */
.masonry-break span {
    display: inline;
    word-break: inherit;
    white-space: inherit;
}

.modal-title {
    width: 100%;
    color: #333333;
    font-size: 40px;
    text-align: center;
    margin: 0;
    font-family: 'Juana Alt';
    font-weight: 600;
}

.modal-coupon {
    background-color: #b9b9b9;
    border-radius: 10px;
    padding: 8px 0;
    font-weight: 300;
    color: white;
    width: 80%;
    margin: 0 auto;
}

.masonry-break-accent {
    font-weight: 900;
    font-family: 'Juana Alt';
    color: var(--accent-color);
}

/* Full width item - inherits from itemE */
#container .itemE-full,
#container-top .itemE-full,
#container-top .itemE-allshoes,
#container .itemE-allshoes,
#container .itemE-product {
    overflow-x: hidden;
    overflow-y: hidden;
    float: left;
    border: 0;
    width: 100% !important;
}

.itemE-full {
    height: 70vh;
    position: relative;
}

.txhLarge {
    font-family: "Juana Alt";
    max-width: 70%;
    font-size: 48px;

    /* margin-bottom: 25px */
    line-height: 50px;
    color: #fff;
}

.txhSmall {
    font-family: "Juana Alt";
    max-width: 80%;
    font-size: 40px;
    line-height: 36px;
    color: #fff;
    text-align: left;
    margin-left: 15px;
    margin-bottom: 0;
}

.txhSmallCard {
    font-family: "Juana Alt";
    max-width: 80%;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    text-align: left;
    margin-left: 15px;
    margin-bottom: 14px;
}

.txhSmall_best {
    font-family: "Juana Alt";
    max-width: 100%;
    font-weight: 400;
    font-size: 40px;
    line-height: 36px;
    color: #fff;
    text-align: left;
    margin-bottom: 0;
}

.txhSmall_timeline {
    font-family: "Juana Alt";
    max-width: 100%;
    font-weight: 400;
    font-size: 118;
    line-height: 20px;
    color: #fff;
    text-align: center;
    margin-left: 0;
    margin-bottom: 0;
}

.card {
    position: relative;
    overflow: hidden;
    background-size: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    margin: 12px;
}

.textBox {
    line-height: 34px;
    font-size: 19px;
    text-indent: 20px;
}

.intro {
    font-size: 22px;
}

.myCenter {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.myRed {
    color: #f44930;
}

.myCenterb {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.cut-corner::before {
    content: '';
    width: 40px;

    /* Adjust this value to control the size of the cut */
    height: 40px;

    /* Adjust this value to control the size of the cut */
    background-color: white;

    /* Should be the same as the background color */
    border-top-left-radius: 14px;
    transform: translate(50%, -50%) rotate(45deg);
}

.cut-corner::after {
    content: '';
    width: 40px;

    /* Adjust this value to control the size of the cut */
    height: 40px;

    /* Adjust this value to control the size of the cut */
    background-color: #4CAF50;
    border-top-left-radius: 14px;
    transform: translate(50%, -50%);
}

.two-columns {
    column-count: 2;
    column-gap: 20px;

    /* Spazio tra le colonne */
}

/* Nascondi elementi dal layout Masonry */
.masonry-hidden {
    display: none !important;
}

/* Stili per elementi dentro txthov-brownO */
.txthov-brownO .bestseller_txt_large {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.txthov-brownO .txh4-hero {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 65px;
    line-height: 60px;
    margin-bottom: 10px;
    color: #ffffff;
}

.txthov-brownO .text-bold-juana {
    font-weight: 900;
}

.txthov-brownO {
    color: #ffb2b2;
}

.txthov-brownO .mainPay {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 0;
    color: #ffffff;
}

/* Classe univoca per il pulsante del Box 1 */
.txthov-brownO .tag8-1 {
    background-color: #ffffff;
    color: #333333;
    padding: 12px 24px 12px 24px;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    align-self: flex-end;
    margin-bottom: 0;
}

.txthov-brownO .tag8-1:hover {
    color: var(--hover-color);
}

/* Stile specifico per txhSeriesb dentro brownO */
.txhSeries-brownO {
    position: absolute;
    top: 55px;

    /* Aumentato per fare spazio all'icona */
    left: 30px;
    color: #ffffff;
    font-size: 55px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 50px;
    letter-spacing: -1px;
    z-index: 10;
}

/* Icona sopra txhSeries-brownO */
.icon-brownO {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

/* Classe per colorare SVG inline - Box 1 */
.icon-brownO svg {
    fill: #ffffff;

    /* Verde lime come il testo */
    height: 15px;
    width: auto;

    /* Mantiene le proporzioni originali */
}

/* Classi per Box 2 */
.icon-brownO-2 {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.icon-brownO-2 svg {
    fill: #ff6b6b;

    /* Rosso */
    height: 15px;
    width: auto;
}

.txhSeries-brownO-2 {
    position: absolute;
    top: 60px;
    left: 30px;
    color: #ff6b6b;

    /* Rosso */
    font-size: 55px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 50px;
    letter-spacing: -1px;
    z-index: 10;
}

.txhSeries-brownO-2 span {
    display: block;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 20px;
    margin-top: 5px;
    line-height: 20px;
    color: #ff6b6b;
    letter-spacing: 8px;
    text-align: left;
    text-transform: uppercase;
}

.txthov-brownO-2 {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    max-width: calc(100% - 60px);
    color: #ffffff;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.txthov-brownO-2 .txh4-hero {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 65px;
    line-height: 60px;
    margin-bottom: 10px;
    color: #ff6b6b;
}

/* Classi specifiche per il contenuto interno di ogni box */
.txthov-brownO-content-2 {
    flex: 1;
    text-align: left;
}

.txthov-brownO-2 .tag8-2 {
    background-color: #ffffff;
    color: #333333;
    padding: 12px 24px 12px 24px;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    align-self: flex-end;
    margin-bottom: 0;
}

.txthov-brownO-2 .tag8-2:hover {
    ccolor: var(--hover-color);
}

/* Classi per Box 3 */
.icon-brownO-3 {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.icon-brownO-3 svg {
    fill: #4ecdc4;

    /* Turchese */
    height: 15px;
    width: auto;
}

.txhSeries-brownO-3 {
    position: absolute;
    top: 60px;
    left: 30px;
    color: #4ecdc4;
    font-size: 55px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 50px;
    letter-spacing: -1px;
    z-index: 10;
}

.txhSeries-brownO-3 span {
    display: block;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 20px;
    margin-top: 5px;
    line-height: 20px;
    color: #4ecdc4;
    letter-spacing: 8px;
    text-align: left;
    text-transform: uppercase;
}

.txthov-brownO-3 {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    max-width: calc(100% - 60px);
    color: #ffffff;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.txthov-brownO-3 .txh4-hero {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 65px;
    line-height: 60px;
    margin-bottom: 10px;
    color: #4ecdc4;
}

.txthov-brownO-content-3 {
    flex: 1;
    text-align: left;
}

.txthov-brownO-3 .tag8-3 {
    background-color: #ffffff;
    color: #333333;
    padding: 12px 24px 12px 24px;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    align-self: flex-end;
    margin-bottom: 0;
}

.txthov-brownO-3 .tag8-3:hover {
    color: var(--hover-color);
}

/* Classi per Box 4 */
.icon-brownO-4 {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.icon-brownO-4 svg {
    fill: #ff9f1c;

    /* Arancione */
    height: 15px;
    width: auto;
}

.txhSeries-brownO-4 {
    position: absolute;
    top: 60px;
    left: 30px;
    color: #ff9f1c;
    font-size: 55px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 50px;
    letter-spacing: -1px;
    z-index: 10;
}

.txhSeries-brownO-4 span {
    display: block;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 20px;
    margin-top: 5px;
    line-height: 20px;
    color: #ff9f1c;
    letter-spacing: 8px;
    text-align: left;
    text-transform: uppercase;
}

.txthov-brownO-4 {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    max-width: calc(100% - 60px);
    color: #ffffff;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.txthov-brownO-4 .txh4-hero {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 65px;
    line-height: 60px;
    margin-bottom: 10px;
    color: #ff9f1c;
}

.txthov-brownO-content-4 {
    flex: 1;
    text-align: left;
}

.txthov-brownO-4 .tag8-4 {
    background-color: #ffffff;
    color: #333333;
    padding: 12px 24px 12px 24px;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    align-self: flex-end;
    margin-bottom: 0;
}

.txthov-brownO-4 .tag8-4:hover {
    color: var(--hover-color);
}

/* Classi per Box 5 */
.icon-brownO-5 {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.icon-brownO-5 svg {
    fill: #a78bfa;

    /* Viola */
    height: 15px;
    width: auto;
}

.txhSeries-brownO-5 {
    position: absolute;
    top: 60px;
    left: 30px;
    color: #a78bfa;
    font-size: 55px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 50px;
    letter-spacing: -1px;
    z-index: 10;
}

.txhSeries-brownO-5 span {
    display: block;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 20px;
    margin-top: 5px;
    line-height: 20px;
    color: #a78bfa;
    letter-spacing: 8px;
    text-align: left;
    text-transform: uppercase;
}

.txthov-brownO-5 {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    max-width: calc(100% - 60px);
    color: #ffffff;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.txthov-brownO-5 .txh4-hero {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 65px;
    line-height: 60px;
    margin-bottom: 10px;
    color: #a78bfa;
}

.txthov-brownO-content-5 {
    flex: 1;
    text-align: left;
}

.txthov-brownO-5 .tag8-5 {
    background-color: #ffffff;
    color: #333333;
    padding: 12px 24px 12px 24px;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    align-self: flex-end;
    margin-bottom: 0;
}

.txthov-brownO-5 .tag8-5:hover {
    color: var(--hover-color);
}

.txhSeries-brownO span {
    display: block;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 20px;
    margin-top: 5px;
    line-height: 20px;
    color: #ffffff;
    letter-spacing: 8px;
    text-align: left;
    text-transform: uppercase;
}

/* ========================================
   LITH BOX - SISTEMA CLASSI BASE + VARIANTI
   ======================================== */
/* CLASSI BASE (condivise da tutti i box) */
.series-box {
    /* Box già eredita stili da itemD e col2 */
}

.series-box .series-icon {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.series-box .series-iconB {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.series-box .series-icon svg {
    height: 15px;
    width: auto;
    fill: white;
}

.series-box .series-title {
    font-size: 50px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 50px;
    letter-spacing: -1px;
    z-index: 10;
    margin-top: 5px;
}

.series-box .series-titleb {
    font-size: 50px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: left;
    line-height: 16px;

    /* letter-spacing: -1px */
    z-index: 10;

    /* margin-bottom: 5px */
}

.series-box .series-display {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 15px;
    margin-right: 40px;
    position: relative;
}

.series-display img {
    width: 100%;
    height: auto;

    /* IMPORTANTE: usa auto per mantenere proporzioni */
    max-width: none;

    /* rimuove limiti */
}

.series-display.variant-2 {
    background-color: #ffffff !important;
    color: #ffffff;
}

.series-display.variant-3 {
    background-color: #ffffff !important;
    color: #ffffff;
}

.series-display.variant-4 {
    background-color: #ffffff !important;
    color: #ffffff;
}

.series-display.variant-5 {
    background-color: #a78bfa !important;
    color: #ffffff;
}

.series-display.variant-6 {
    background-color: #ff7eb3 !important;
    color: #ffffff;
}

.series-display.variant-7 {
    background-color: #ffffff !important;
    color: #ffffff;
}

.series-display.variant-8 {
    background-color: #ff7eb3 !important;
    color: #ffffff;
}

.series-box .series-title span {
    display: block;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 20px;
    margin-top: 5px;
    line-height: 20px;
    letter-spacing: 8px;
    text-align: left;
    text-transform: uppercase;
}

.series-box .series-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    z-index: 10;
    display: flex;

    /* justify-content: space-between */
    /* box-sizing: border-box */
    padding: 30px;
    background-color: transparent;
    overflow-x: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* flex-direction: column */
}

.series-box .series-content-wrapper {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;

    /* Fix per flickering durante animazioni */
    /* -webkit-backface-visibility: hidden */
    /* backface-visibility: hidden */
    /* transform: translateZ(0) */
    /* will-change: transform */
    /* Previeni overflow che potrebbe causare bordini */
    /* margin-bottom: 10px */
}

.series-box .series-subtitle {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tags-title {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 20px;
    color: var(--nav-color);
}

.series-box .series-hero {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 55px;
    margin-top: 30px;
    letter-spacing: -2px;
}

.series-box .series-hero .text-bold {
    font-weight: 900;
}

.series-box .series-description {
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 0;
    color: #ffffff;
}

.series-box .series-button {
    background-color: #656662;
    color: #333333;
    padding: 10px 18px 10px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;

    /* transition: all 0.3s ease */
    flex-shrink: 0;

    /* margin-left: 20px */
    align-self: flex-center;
    margin-bottom: 0;
    text-align: center;

    /* position: relative */
    overflow: hidden;

    /* display: none */
    margin-top: 17px;
    text-transform: uppercase;
}

.series-button-product {
    background-color: #656662;
    color: #333333;
    padding: 10px 18px 10px 18px;
    border-radius: 20px;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    align-self: flex-end;
    margin-bottom: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Immagine nel bottone */
.series-button-image {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 180px;
    object-fit: contain;
}

/* Testo del bottone */
.series-button-text {
    position: relative;
    z-index: 2;
}

/* Progress Bars per Caratteristiche Scarpe */
.characteristic-item {
    margin-bottom: 15px;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

/* Animazione al caricamento */
.progress-bar-fill.animate {
    animation: fillBar 0.8s ease-out forwards;
}

/* Layout grid a 4 colonne per le caratteristiche */
.shoe-characteristics-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);

    /* margin-bottom: 40px */
    margin-top: 10px;
    margin-top: 0;
}

/* Stile per ogni item caratteristica */
.characteristic-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@keyframes fillBar {
    from {
        width: 0%;
    }
}

/* VARIANTI COLORE   Variant 1 - Verde lime (originale) */
.series-variant-1 .zimh {
    background-image: url(../images/home_banner_bast_f4.jpg);
    background-repeat: no-repeat;
    background-size: calc(100% + 0vw) auto;
    background-position: center center;
}

.series-variant-1 .series-icon svg {
    fill: #ffffff;
}

.series-variant-1 .series-title {
    color: #ffffff;
}

.series-variant-1 .series-title span {
    color: #fdfdfd;
}

.series-variant-1 .series-hero {
    color: #86653f;
    font-size: 100px;
    white-space: nowrap;

    /* overflow: hidden */
    /* text-overflow: ellipsis */
    font-weight: 800;
    display: inline-block;
    text-align: center;
}

.series-variant-1 .series-button {
    background-color: #ffffff;
    color: #000000;
}

.series-variant-1 .series-button:hover {
    color: var(--hover-color);
}

.series-variant-1 .series-content {
    color: #ffffff;
}

.series-variant-1 .series-description {
    color: #a4ed28;
}

.series-variant-1 .series-subtitle {
    color: #ffffff;
}

/* Variant 2 - Rosso */
.series-variant-2 .zimh {
    /* background-image: url(../images/Magic_Home.jpg); */
    background-size: 101%;
    background-position: 0px 0;
}

.series-variant-2 .series-icon svg {
    fill: #ffffff;
}

.series-variant-2 .series-title {
    color: #ffffff;
}

.series-variant-2 .series-title span {
    color: #ff6b6b;
}

.series-variant-2 .series-hero {
    color: #e3be9a;
    font-size: 100px;
    white-space: nowrap;

    /* text-overflow: ellipsis */
    font-weight: 800;
    display: inline-block;
    text-align: center;
}

.series-variant-2 .series-button {
    background-color: #ffffff;
    color: #000000;
}

.series-variant-2 .series-button:hover {
    /* più chiaro di #57412a */
}

.series-variant-2 .series-content {
    color: #000000;
}

.series-variant-2 .series-description {
    color: #57412a;
}

.series-variant-2 .series-subtitle {
    color: #ffffff;
}

/* Variant 3 - Turchese */
.series-variant-3 .zimh {
    background-image: url(../images/home_banner_bast_f3.jpg);
    background-repeat: no-repeat;
    background-size: calc(100% + 0vw) auto;
    background-position: center center;
}

.series-variant-3 .series-icon svg {
    fill: white;
}

.series-variant-3 .series-title {
    color: white;
}

.series-variant-3 .series-title span {
    color: #4ecdc4;
}

.series-variant-3 .series-hero {
    color: #a4ed28;
    font-size: 100px;
    white-space: nowrap;

    /* overflow: hidden */
    /* text-overflow: ellipsis */
    font-weight: 800;
    display: inline-block;
    text-align: center;
}

.series-variant-3 .series-button {
    background-color: #ffffff;
    color: #000000;
}

.series-variant-3 .series-button:hover {
    background-color: #f0f0f0;

    /* più scuro di bianco */
    color: #000000;
}

.series-variant-3 .series-content {
    color: #000000;
}

.series-variant-3 .series-description {
    color: #000000;
}

.series-variant-3 .series-subtitle {
    color: #ffffff;
}

.series-variant-14 .zimh {
    /* background-image: url(../images/Batik_Home2.jpg); */
    background-size: 101%;
    background-position: 0px 0;
}

.series-variant-14 .series-icon svg {
    fill: #ffffff;
}

.series-variant-14 .series-title {
    color: #ffffff;
}

.series-variant-14 .series-title span {
    color: #4ecdc4;
}

.series-variant-14 .series-hero {
    color: #000000;
}

.series-variant-14 .series-button {
    background-color: #ffffff;
    color: #000000;
}

.series-variant-14 .series-button:hover {
    background-color: #f0f0f0;

    /* più scuro di bianco */
    color: #000000;
}

.series-variant-14 .series-content {
    color: #000000;
}

.series-variant-14 .series-description {
    color: #000000;
}

.series-variant-14 .series-subtitle {
    color: #000000;
}

/* Variant 4 - Arancione */
.series-variant-4 .zimh {
}

.series-variant-4 .series-icon svg {
    fill: #ffffff;
}

.series-variant-4 .series-title {
    color: #ffffff;
}

.series-variant-4 .series-title span {
    color: #ff9f1c;
}

.series-variant-4 .series-hero {
    color: #fd83a5;
    font-size: 110px;

    /* white-space: nowrap */
    /* overflow: hidden */
    /* text-overflow: ellipsis */
    font-weight: 800;

    /* display: inline-block */
    line-height: 110px;
}

.series-variant-4 .series-button {
    background-color: #ffffff;
    color: #000000;
}

.series-variant-4 .series-button:hover {
    background-color: #6d000b;

    /* più chiaro di #3b0006 */
}

.series-variant-4 .series-content {
    color: #ffffff;
}

.series-variant-4 .series-description {
    color: #c47683;
}

.series-variant-4 .series-subtitle {
    color: #ffffff;
}

/* Variant 5 - Viola */
.series-variant-5 .zimh {
}

.series-variant-5 .series-icon svg {
    fill: #a78bfa;
}

.series-variant-5 .series-title {
    color: #a78bfa;
}

.series-variant-5 .series-title span {
    color: #a78bfa;
}

.series-variant-5 .series-hero {
    color: #a78bfa;
}

.series-variant-5 .series-button {
    background-color: #a4ed28;
    color: #0b1119;
}

.series-variant-5 .series-button:hover {
    background-color: #c4b5fd;

    /* più chiaro di #a78bfa */
    color: #000000;
}

.series-variant-5 .series-content {
    color: #ffffff;
}

.series-variant-5 .series-description {
    color: #d4c5ff;
}

.series-variant-5 .series-subtitle {
}

/* TEST MASONRY - rendere series-variant-5 alto il doppio */
.series-variant-5 {
    grid-row: span 2;
    aspect-ratio: unset !important;
}

/* PRODUCT GRID BOX - griglia 2x3 con 6 prodotti */
.product-grid-box {
    background-color: #f8f8f8;
    border-radius: 20px;
    padding: 20px;
    grid-column: span 2;
    aspect-ratio: unset !important;
}

.product-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 90px 90px 90px;
    gap: 15px;
    width: 100%;
}

.product-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    overflow: hidden;
}

.product-grid-item:last-child {
    grid-column: span 3;
    grid-row: 1;
}

.product-grid-item .series-display {
    width: 100%;
    height: auto;
    max-height: 100px;
    margin-right: 0;
}

.product-grid-item .series-display img {
    width: auto;
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

/* Variant 6 - Rosa/Corallo */
.series-variant-6 .zimh {
    /* background-image: url('../images/Caramel_A0_Trans_MAGIC_PP.jpg') */
    /* background-size: 100% */
    /* background-position: 0px 0px */
}

.series-variant-6 .series-icon svg {
    fill: #f9f9f9;
}

.series-variant-6 .series-title {
    color: #ff7eb3;
}

.series-variant-6 .series-title span {
    color: #ff7eb3;
}

.series-variant-6 .series-hero {
    font-family: 'Juana Alt';
    color: #7b0033;
    font-size: 80px;
    font-weight: 800;
    line-height: 0.8;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    padding: 0;
    letter-spacing: -2px;

    /* white-space: nowrap */
    /* text-overflow: ellipsis */
    /* display: inline-block */
    /* text-align: center */
}

.series-variant-6 .series-button {
    background-color: #f8f8f8;
    color: #7c0033;
    padding: 10px 18px 10px 18px;
    border-radius: 20px;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 0;
    text-align: center;
    overflow: hidden;
}

.series-variant-6 .series-button:hover {
    background-color: #ffb2d6;
    color: #000000;
}

.series-variant-6 .series-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    z-index: 10;
    display: flex;
    padding: 30px;
    background-color: transparent;
    overflow-x: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.series-variant-6 .series-content-wrapper {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
}

.series-variant-6 .series-description {
    color: #ffb2d6;
    font-family: 'Juana Alt';
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 0;
}

.series-variant-6 .series-subtitle {
    color: #ffc4e1;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Variant 7 - Duplicato di Variant 2 */
.series-variant-7 .zimh {
    /* background-image: url(../images/Bast_Home_M.jpg); */
    background-size: 101%;
    background-position: 0px 0;
}

.series-variant-7 .series-icon svg {
    fill: #ffffff;
}

.series-variant-7 .series-title {
    color: #ffffff;
}

.series-variant-7 .series-title span {
    color: #ff6b6b;
}

.series-variant-7 .series-hero {
    color: #d5cfe4;
    font-size: 80px;
    white-space: nowrap;

    /* text-overflow: ellipsis */
    font-weight: 800;
    display: inline-block;
    text-align: center;
}

.series-variant-7 .series-button {
    background-color: #f2eef6;
    color: #302215;
}

.series-variant-7 .series-button:hover {
    background-color: #8a6a4a;

    /* più chiaro di #57412a */
}

.series-variant-7 .series-content {
    color: #000000;
}

.series-variant-7 .series-description {
    color: #ffffff;
}

.series-variant-7 .series-subtitle {
    color: #ffffff;
}

/* itemE-full hero section */
.itemE-full,
.itemE-allshoes,
.itemE-product {
    width: 100%;
    height: 70vh;
    max-height: 1080px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    /* Aggiungo padding per evitare che contenuti tocchino i bordi */
    margin-bottom: 48px;
}

.itemE-allshoes {
    margin: 0;
    align-items: flex-start;
    height: 550px;
    justify-content: space-between;
}

.itemE-product {
    margin: 0;
    align-items: flex-start;

    /* Mantiene il contenuto in basso */
    height: auto;
    justify-content: flex-start;

    /* Allinea a sinistra invece di distribuire */
    padding-top: 80px;
    margin-bottom: 80px;
}

/* CSS Grid per top-tier container - Mobile first */
#top-tier {
    display: grid !important;
    grid-template-columns: 1fr;

    /* Mobile: colonna singola */
    width: 100%;
    margin-bottom: 40px;
    overflow: visible;
    position: relative;
    clear: both;
    padding: 30px;
    gap: 10px;
}

/* Override clearfix per top-tier */
#top-tier.clearfix::after {
    display: none;
}

/* itemM in top-tier - tutto gestito via CSS */
#top-tier .itemM {
    width: 100%;
    aspect-ratio: var(--item-m-aspect-width) / var(--item-m-aspect-height);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
}

/* Contenitore principale ottimizzato */
.recent-item-optimized {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0;
    border-radius: 30px;
    overflow: hidden;
    background-size: 100%;
    background-position: center calc(100% + 15px);
    background-repeat: no-repeat;
    transition: all 1.3s ease;
    background-color: white;
}

/* Contenitore del testo */
.recent-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: transparent;
    text-align: center;
    padding: 20px 10px;
    box-sizing: border-box;
}

/* Testo del prodotto */
.recent-item-text {
    font-family: "Juana Alt";
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    color: #1e1e1e;
    text-align: center;
    margin: 0;
}

/* Variante del nome serie */
.recent-item-text .series-name {
    font-family: 'Juana Alt';
    font-weight: 900;
    color: #514023;
}

/* ========================================
   SISTEMA COLORE EREDITATO PER PRODOTTI
   ======================================== */
/* Gli elementi item e itemQ possono usare --product-color per propagare il colore */
/* Contenitore immagine prodotto - sostituisce zimh_best product-dynamic */
.product-image,
.product-image-allshoes {
    height: 100%;
    background-size: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    justify-content: flex-start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 14px;
    overflow: hidden;
    transition-duration: 1.3s;
    -webkit-transition-duration: 1.3s;
    -moz-transition-duration: 1.3s;
    -o-transition-duration: 1.3s;
    background-position: center calc(100% - var(--bottom-offset, 0px));
    background-repeat: no-repeat;
    background-color: #fafafa;
}

/* Variante Q per itemQ */
.product-image-q {
    --bottom-offset: -50px;
}

/* Varianti specifiche per item e itemQ */
.item .product-image {
    --bottom-offset: 35px;

    /* Offset standard per item */
}

.itemQ .product-image {
    /* Offset per itemQ - bandierata a sinistra */
    background-position: calc(0% + var(--left-offset, 0px)) calc(100% - var(--bottom-offset, 0px));
    background-size: 85%;
    --bottom-offset: -70px;
    --left-offset: -15px;
}

.itemQ .product-image-allshoes {
    /* Offset negativo per itemQ */
    background-position: left calc(100% - var(--bottom-offset, 0px));
    background-size: 85%;
    --bottom-offset: -65px;
}

/* Contenitore info prodotto - sostituisce zimhb-smallleft_best */
.product-info,
.product-infoQ,
.product-info-allshoes,
.product-infoQ-allshoes {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px 25px 20px 25px;
    background-color: transparent;
    text-align: left;
}

.product-infoQ,
.product-infoQ-allshoes {
    display: flex;
    flex-direction: row;

    /* Cambia da column a row */
    justify-content: space-between;
    align-items: flex-end;

    /* Usa flex-start invece di start per compatibilità */
}

.product-info-allshoes {
    background-color: white;
}

/* Tag serie prodotto - sostituisce bestseller_txt seriesTag */
.series-tag,
.series-tag-recent,
.series-tag-product {
    text-align: left;
    color: #000000;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 2px;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 8px;
    border: 0.5px solid #000000;
    border-radius: 8px;
    text-align: center;
    line-height: 12px;
}

.series-tag-recent {
    margin-top: 12px;
    transform: scale(0.78);
}

.series-tag-product {
    transform: scale(1.10) translateX(5px);
    background-color: white;
    border: 0;
}

.series-tag-product-b {
    margin-top: 12px;
    transform: scale(1.10) translateX(15px);
    background-color: white;
    display: flex;
}

/* Titolo prodotto - sostituisce txhSmall_best */
.product-title,
.product-title-recent {
    font-family: 'Juana Alt';
    max-width: 100%;
    font-weight: 900;
    font-size: 40px;
    line-height: 30px;
    margin-bottom: 3px;
    margin-top: 6px;
    text-align: left;
    color: #000000;

    /* Colore gestito da JavaScript */
}

.product-title-recent {
    font-weight: 900;
    font-size: 30px;
    color: rgb(73, 73, 73);
    text-align: center;
    margin-bottom: 0;
}

/* Prezzo prodotto - sostituisce bestseller_txt price */
.product-price,
.product-price-product {
    text-align: right;
    color: #000000;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    position: relative;
    margin-top: 8px;

    /* display: none */
}

.product-price-product,
.product-price-product b {
    font-size: 20px;
    text-align: left;
    color: var(--product-accent);
    display: flex;
    flex-direction: column;
}

.product-price-product b {
    font-size: 24px;
    text-align: left;
    color: var(--product-accent);
    margin-bottom: 0;
    font-weight: 400;
}

/* SVG animato - colore gestito da JavaScript */
.item .animated-svg,
.itemQ .animated-svg {
    fill: var(--accent-color);
}

/* Tag home - colore gestito da JavaScript */
.item .tag_home,
.itemQ .tag_home {
    background-color: var(--nav-color);
    color: #ffffff;
}

/* Override per hover su elementi con nuove classi */
/* .col2:hover {
    transform: scale(0.99);
    transition-duration: 0.3s;
    cursor: pointer;
} */
/* .zimh:hover {
    background-size: 103%;
    cursor: pointer;
} */
/* Ticker container styles */
.ticker-container {
    width: 100%;
    overflow: hidden;
    background-color: var(--product-accent);
    color: #fff;
    font-size: 14px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-transform: uppercase;

    /* Estendi full width della viewport */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

.ticker-content {
    font-family: 'Lato';
    font-weight: 400;
    position: absolute;
    white-space: nowrap;
    display: none;
    color: white;
}

/* Ticker background accent color */
.ticker-bg-pink {
    background-color: #ffc9c9 !important;
}

/* Tag home styles */
.tag_home,
.tag_home_new,
.tag_home-recent,
.tag_home-sale {
    font-family: 'Lato';
    position: absolute;
    right: 25px;
    padding: 8px 10px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    background-color: #7c0033;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 10px;
    line-height: 12px;
    width: auto;
    top: 25px;
}

.tag_home_banner {
    font-family: 'Lato';
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translateX(-50%);
    padding: 5px 8px;
    font-weight: 200;
    font-size: 14px;
    color: #ffffff;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 8px;
    line-height: 1;
    width: auto;
}

.tag_home-recent {
    right: 20px;
    top: 20px;
    background-color: rgb(206, 206, 206);
    width: fit-content;
    transform: scale(80%) translateX(5px) translateY(-5px);
    text-align: right;
}

.tag_home-recent-product {
    position: absolute;

    /* Cambiato da relative ad absolute per posizionamento corretto */
    right: 15px;
    top: 15px;
    background-color: rgb(206, 206, 206);
    width: fit-content;
    text-align: right;
}

.tag_home-sale {
    position: relative;
    top: -10px;
    margin-right: 8px;
    background-color: rgb(174, 1, 1);
    display: inline-block;
}

/* Icon styles */
.fav {
    position: absolute;
    top: 25px;
    left: 25px;
}

.tag_home_new {
    background-color: rgb(209, 0, 0) !important;
    color: #ffffff;
    right: auto;
    left: 25px;
}

/* Series content layout - yo variant */
.series-iconb {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
}

.series-iconb-product {
    display: flex;
    align-items: flex-start;
    width: auto;
    position: relative;
    flex-direction: row;
    justify-content: flex-end;
}

/* Reset series-display when inside yo variant */
series-iconb .series-display {
    flex: 0 0 auto;
    min-width: unset;
    width: 120px;
    height: 120px;
    margin-right: 0;
    position: relative;
}

/* Series iconb - contains SVG and title */
series-content-badge .series-iconb {
    flex: 0 0 auto;
    width: auto;
    position: relative;
    display: -ms-inline-flexbox;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

series-content-badge .series-iconb svg {
    width: 100px;
    height: auto;
    fill: white;
}

series-content-badge-product .series-iconb-product svg {
    width: 100px;
    height: auto;
    fill: white;
}

/* Series content wrapper - takes remaining space */
/* Series grid system */
#series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    /* Cambia 3 per modificare numero colonne */
    gap: 10px;
    width: 100%;
    padding: 0 0;
}

/* ===== SERIES GRID LOWER - Griglia normale senza complicazioni ===== */
.series-grid-lower {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    box-sizing: border-box;
    align-items: stretch;

    /* Spazio dalla griglia sopra */
    margin-bottom: 10px;
    width: 100%;
    height: 100%;
}

.series-grid-ptions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    box-sizing: border-box;
    align-items: stretch;

    /* Spazio dalla griglia sopra */
    width: 100%;
}

/* Elementi della griglia lower - semplici e puliti */
.series-grid-lower > div {
    aspect-ratio: 4 / 2;
    border-radius: 15px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

/* Fix per Safari - forza il gap verticale */
.series-grid-product-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    /* minmax(0, 1fr) invece di 1fr per Safari */
    grid-gap: 10px;

    /* Usa grid-gap invece di gap per compatibilità Safari */
    gap: 10px;

    /* Fallback per browser moderni */
}

#series-grid-product {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;

    /* Allinea le altezze */
    margin-bottom: 10px;
    margin-top: 120px;
}

/* Tutti gli elementi di series-grid-product con proporzione 4:3 */
#series-grid-product > div {
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 50px;

    /* Fallback per browser che non supportano aspect-ratio */
    min-height: 250px;
}

/* Primo div (series-content-badge-large-display_1): 30% di larghezza */
#series-grid-product > div:first-child {
    flex: 0 0 40%;
}

/* Secondo div (series-content-badge-large-display_X): 70% di larghezza */
#series-grid-product > .series-content-badge-large-display_X {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

/* Container principale con distribuzione space-between */
.series-content-badge-large-display_X .hero-content-block-product-down {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Gruppo superiore: titolo + descrizione + progress bar */
.series-content-badge-large-display_X .content-top-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;

    /* Allinea tutto a sinistra */
    justify-content: flex-start;

    /* Compatta tutto in alto */
}

/* Gruppo inferiore: bottoni Buy */
.series-content-badge-large-display_X .content-bottom-group {
    display: flex;
    flex-direction: row;

    /* Bottoni affiancati */
    gap: 10px;
    margin-top: auto;
    align-items: center;
    justify-content: flex-start;

    /* Allinea a sinistra */
}

/* Limita larghezza bottoni Buy */
.series-content-badge-large-display_X .buy-button,
.series-content-badge-large-display_X .hero-cta-link {
    width: auto;

    /* Larghezza automatica basata sul contenuto */
    display: inline-flex;
    padding: 12px 24px;
}

/* Reset margini per elementi interni */
.series-content-badge-large-display_X h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.series-content-badge-large-display_X .main_descr {
    width: 100%;

    /* Occupa tutta la larghezza disponibile */
}

.series-content-badge-large-display_X .shoe-characteristics-container {
    width: 100%;

    /* Le progress bar occupano tutta la larghezza */
    margin-bottom: 0;
    padding: 0;
    grid-template-columns: repeat(4, 1fr);

    /* 2 colonne in questo contesto compatto */
    gap: 15px;
}

/* Solo dal terzo elemento in poi ha overflow hidden */
#series-grid-product > div:nth-child(n+3) {
    overflow: hidden;
}

/* Primi due elementi uniti visualmente - target specifico solo div di primo livello */
#series-grid-product > div:first-child {
    border-radius: 15px 0 0 15px !important;
}

#series-grid-product > div:nth-child(2) {
    border-radius: 0 15px 15px 0 !important;
}

/* Dal terzo elemento in poi - normali */
#series-grid-product > div:nth-child(n+3) {
    border-radius: 15px !important;
}

/* Previeni che elementi interni ereditino questi stili
#series-grid-product > div * {
    border-radius: initial;
    margin-right: initial;
} */
/* Grid column spans per elementi larghi */
#series-grid {
    grid-column: span 1;
}

#series-grid {
    grid-column: span 3;
}

/* Series content badge variant */
.series-content-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 20px 40px;
    background-color: gray;
    border-radius: 55px;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    margin-bottom: 0;
}

.series-content-badge-large-display_1,
.series-content-badge-large-display_2,
.series-content-badge-large-display_3,
.series-content-badge-large-display_4,
.series-content-badge-large-display_5,
.series-content-badge-large-display_6,
.series-content-badge-large-display_7 {
    align-items: flex-end;
    background-color: #fafafa;
    border-radius: 45px;
    background-size: 100%;
    background-position: 0;
    display: flex;
    justify-content: flex-end;
    position: relative;
    overflow: visible;
}

.series-content-badge-detail-display,
.series-content-badge-detail-display_1,
.series-content-badge-detail-display_2,
.series-content-badge-detail-display_3,
.series-content-badge-detail-display_4,
.series-content-badge-detail-display_5 {
    align-items: flex-end;
    background-color: gray;
    border-radius: 45px;
    height: 100%;
    background-size: 100%;
    background-position: 0;
    display: flex;
    justify-content: flex-end;
}

.series-grid-product-details > * {
    aspect-ratio: 4 / 2;

    /* Proporzione 4:3 */
}

/* Overlay sneaker image style */
.series-content-badge-large-display .overlay-sneaker {
    position: absolute;
    width: 110%;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.series-content-badge-detail-display_1 {
    position: relative;

    /* Aggiunto per posizionare correttamente tag_home-recent-product */
    background-image: url('../images/Products/Bay_LITH_PD%20LOGO%20TONGUE%20DETAIL.jpg');
    background-position: 0;
}

.series-content-badge-detail-display_2 {
    background-image: url('../images/Products/Bay_LITH_PD%20ULTRALIGHT%20VIBRAM.jpg');
    background-position: 0;
}

.series-content-badge-detail-display_3 {
    background-image: url('../images/Products/Bay_LITH_PD%20TECHNICAL%20FABRIC.jpg');
    background-position: 0;
}

.series-content-badge-detail-display_4 {
    background-image: url('../images/Products/Bay_LITH_PD%20LEATHER%20DETAILS.jpg');
    background-position: 0;
}

.series-content-badge-large-display_1 {
    background-image: url('../images/Products/Bay_A3_Dark_LITH_PP.jpg');
    background-position: left -20px bottom -205px;
    background-size: 805px;
    background-repeat: no-repeat;
    background-color: #fafafa;
    position: relative;
}

.series-content-badge-large-display_2 {
    background-image: url('../images/Products/Bay_A2_Dark_LITH_PP.jpg');
    background-size: 33%;
    background-position: 7px -30px;
}

.series-content-badge-large-display_3 {
    background-image: url('../images/Products/Bay_A1_Dark_LITH_PP.jpg');
    background-position: 20px -38px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-color: #fafafa;
}

.series-content-badge-large-display_4 {
    background-image: url('../images/Products/Bay_A4_Dark_LITH_PP.jpg');
    background-size: 96%;
    background-position: 5px -16px;
    background-repeat: no-repeat;
    background-color: #fafafa;
}

.series-content-badge-large-display_5 {
    background-image: url('../images/Products/Bay_A5_Dark_LITH_PP.jpg');
    background-position: 16px 0px;
}

/* Griglia 2x2 quando è dentro l'ultimo elemento */
.series-content-badge-large-display_last .series-grid-product-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;

    /* 2 colonne invece di 4 */
    grid-template-rows: repeat(2, 1fr);

    /* 2 righe */
    gap: 10px;
    width: calc(100% - 20px);

    /* Sottrai padding se necessario */
    height: calc(100% - 20px);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

/* Assicura che gli elementi interni rispettino i limiti */
.series-content-badge-large-display_last .series-grid-product-details > * {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.series-content-badge-large-display_5 {
    background-image: url('../images/Products/Licorice_ALL_Dark_LITH_PP.jpg');
    background-position: 0;
}

.series-content-badge-large-display_6 {
    background-image: url('../images/Products/Licorice_ALL_Dark_LITH_PP.jpg');
    background-position: 0;
}

.series-content-badge-product-display {
    background-image: url('../images/Products/Licorice_ALL_Dark_LITH_PP.jpg');
    background-position: calc(50% + 70px) calc(50% - 0px);
}

.series-content-badge-large-display_X {
    background-color: #fafafa;
}

.sidebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background-color: gray;
    border-radius: 15px;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    width: 280px;
    height: 200px;
}

.series-content-badge-product {
    display: flex;
    gap: 10px;
    border-radius: 5px;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    width: fit-content;
    flex-direction: row;
    align-items: start;
}

.series-content-badge .series-iconb svg {
    width: 90px;
    height: auto;
    fill: white;
}

.series-content-badge-product .series-iconb-product svg {
    width: 90px;
    height: auto;
    fill: #000000;
}

.series-iconb {
    background-color: #fd83a5;
    padding: 4px 6px;
    border-radius: 6px;

    /* display: inline-block */
    /* margin-top: 6px */
}

.series-iconb .series-titleb {
    font-size: 16px;
    font-family: 'Juana Alt';
    font-weight: 900;

    /* letter-spacing: -1px */
    color: rgb(255, 255, 255);
}

.series-iconb .series-titleb .series-label {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 0;
}

.series-iconb svg {
    display: none;
}

.series-iconb-product .series-titleb {
    font-size: 17px;
    font-family: 'Juana Alt';
    font-weight: 900;
    text-align: center;
    letter-spacing: -1px;
    color: #000000;
    margin-right: 10px;
}

.series-content-badge .series-subtitleb {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.series-content-badge-product .series-subtitleb {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
}

.series-content-badge .series-display {
    flex: 0 0 120px !important;
    width: 120px !important;
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: white !important;
    border-radius: 40px !important;
}

.series-content-badge-product .series-display-product {
    position: absolute;
    right: 10px;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 15px;
}

.series-content-badge-product .series-display-product img {
    width: 150%;
    height: 150%;
    pointer-events: none;
}

.iconHistory,
.iconHistoryF,
.iconHistoryP {
    /* Adjust for padding */
    background-color: #ffffff;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909090;
    position: relative;
    top: -15px;
    right: 15px;
}

.iconHistoryP {
    color: #484848 !important;
    margin: 10px;
}

.series-content-badge .series-button {
    margin-left: auto !important;
    padding: 15px 30px;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 25px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 0 0 auto !important;
}

.series-content-badge .series-button:hover {
    background-color: #fff;
    color: var(--accent-color);
}

.iconBest {
    position: relative;
    left: 0;
    display: flex;
    align-items: center;
}

/* Tag styles from menu.css */
.tag5 {
    background-color: white;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: black;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 12px;
    position: relative;
}

.tag2 {
    margin: 15px 0 0 0;
    bottom: 0;
    left: 0;
    padding: 12px 24px 12px 24px;
}

.tag8 {
    border-radius: 20px;
    padding: 12px 24px 12px 24px;
    font-size: 16px;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 16px;
    position: relative;
    bottom: 10px;
    right: 0;
}

.bestseller_txt_inline {
    color: #a05117;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin-left: 10px;
}

.bestseller_txt_inline span {
    font-family: 'Lato';
    font-weight: 700;
}

.tag_centre {
    margin: 0 0 0 0;
    bottom: 0;
    left: 0;
    padding: 11px 16px;
}

.tag111 {
    background-color: white;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    color: black;
    margin: 0;
    font-family: 'Lato',  sans-serif;
    font-weight: 400;
    word-spacing: 0;
    vertical-align: middle;
}

.tag3,
.tag3-product,
.tag3-product-size {
    position: relative;
    padding: 4px 14px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    text-transform: capitalize;
    white-space: nowrap;
    line-height: 1.4;
    overflow: hidden;

    /* Importante per contenere lo pseudo-elemento */
    transition: all 0.3s ease;
    border-radius: 16px;
    background-color: var(--accent-color);
    cursor: pointer;
    font-weight: normal;
}

.tag3-product-size {
    color: #000000;
    background-color: #ffffff;
    font-weight: normal;
    border-radius: 12px;
    width: 44px;
    text-align: center;
    border: solid 1px #c3c3c3;
}

.tag3-product-size_c {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 14px 26px 14px 26px;
    background-size: 200% 200%;
    border: 0;
    border-radius: 45px;
    font: inherit;
    font-family: 'Lato',  sans-serif;
    font-size: 18px;
    color: #000000;
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    width: auto;
    z-index: 999;
    bottom: 35px;
    right: 35px;
    transition: all 0.3s ease !important;
    background-color: white;
    font-size: nomal;
}

.tag3-product-size b {
    color: #000000;
}

.tag3-product:hover,
.tag3-product:focus,
.tag3:hover,
.tag3:focus {
    background-color: rgba(255, 255, 255, 0.58);
    color: black;

    /* filter: invert(1) */
}

/* Tag variants (vecchie classi per retrocompatibilità) */
.tag-transparent-white {
    color: #ffffff;
    background-color: transparent;
}

.tag-transparent-white:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--hover-color);
}

.tag-pink-dark {
    color: #171717;
    background-color: var(--accent-color);
}

.tag-pink-dark:hover {
    background-color: var(--accent-color);
    color: var(--hover-color);
}

/* Tag accent styles */
.tag-accent-inspired {
    background-color: #ffc9c9;
    color: #0f0f0f;
    margin-left: 14px;
    right: 10px;
}

.tag-accent-checkout {
    background-color: #ffc9c9;
    color: #322d2a;
    margin-top: 10px;
}

/* Tag Get-10% */
.tag-promo {
    background-color: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    font-weight: 900;
}

.tag-dark-hidden {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
    display: none !important;
}

.tag-white-orange-hidden {
    background-color: #ffffff !important;
    color: #ca3d00 !important;
    display: none !important;
}

.tag-cream-brown-hidden {
    background-color: #ffecdf !important;
    color: #593e2c !important;
    display: none !important;
}

.tag-white-dark-hidden {
    background-color: #ffffff !important;
    color: #313131 !important;
    margin-left: 14px !important;
    right: 10px !important;
    display: none !important;
}

.tag-yellow-hidden {
    background-color: #f6c208 !important;
    color: #5a130a !important;
    display: none !important;
}

.tag-gold-hidden {
    background-color: #c3a327 !important;
    color: white !important;
    position: relative !important;
    bottom: 10px !important;
    margin: 0 !important;
    margin-top: 15px !important;
    margin-bottom: -15px !important;
    display: none !important;
}

.tag-brown-hidden {
    background-color: #7e5538 !important;
    color: white !important;
    position: relative !important;
    bottom: 10px !important;
    margin: 0 !important;
    margin-top: 15px !important;
    margin-bottom: -15px !important;
    display: none !important;
}

.tag-orange-explore-hidden {
    background-color: #d16415 !important;
    color: #ebede6 !important;
    margin-top: 10px !important;
    display: none !important;
}

.tag_home-series {
    left: 15px;
    top: 15px;
    background-color: rgb(206, 206, 206);
    transform: scale(0.95);
    width: fit-content;
}

.tagger-absolute {
    position: absolute;
}

.popular-tags,
.popular-tags-product,
.popular-tags-product-size,
.popular-tags-product-size_b {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-family: 'Lato';
    font-weight: 400;
    font-size: 10px;
    word-spacing: 5px;
    color: black;
    ont-family: 'Lato';
    font-weight: 400;
    font-size: 10px;
    word-spacing: 5px;
}

.popular-tags-product {
    gap: 8px;
    align-items: center;

    /* Allinea verticalmente gli elementi al centro */
    margin-bottom: 25px;
}

.popular-tags-product-size {
    gap: 4px;
    align-items: flex-start;

    /* Allinea verticalmente gli elementi al centro */
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;

    /* background-color: #fbfbfb */
    /* padding: 15px */
    width: 190px;
}

.popular-tags-product-size_b {
    gap: 4px;
    align-items: flex-start;

    /* Allinea verticalmente gli elementi al centro */
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;

    /* background-color: #fbfbfb */
    /* padding: 15px */
    width: 100%;
}

.quick {
    background-color: white;
    padding: 6px 8px 6px 8px;
    border-radius: 8px;
    bottom: 25px;
    height: 22px;
    height: 14px;
    fill: var(--nav-color);
}

.series-top-titles {
    height: auto;
    width: 100%;
    background-color: transparent;
    text-align: left;
}

.series-description {
    display: none;
}

#top-tier {
    grid-template-columns: repeat(auto-fit, minmax(clamp(520px, 45vw, 460px), 1fr));
    grid-auto-flow: dense;

    /* Full-bleed: scappa dal contenitore e riempie tutto lo schermo */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

:root {
    /* Aggiusta posizione background per schermi medi */
    --zimh-bg-position-x: right -30px;
    --zimh-bg-position-y: bottom 160px;
    --zimh-bg-size: auto 80%;
}

/* Footer Container */
.footer-main {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 80px 30px 60px;
    overflow: hidden;
    box-sizing: border-box;

    /* Estendi full width della viewport come ticker-container */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;

    /* Padding di default - verrà sovrascritto nei breakpoint */
    /* padding-left: calc((100vw - 1600px) / 2 + var(--page-padding)) */
    /* padding-right: calc((100vw - 1600px) / 2 + var(--page-padding)) */
    /* Ombra interna superiore per transizione da recently-viewed */
    box-shadow: inset 0 20px 60px -20px rgba(0, 0, 0, 0.2),
                inset 0 40px 80px -30px rgba(0, 0, 0, 0.1);
}

/* Footer Inner Container */
.footer-main__inner {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* Top Section - Text */
.footer-main__top {
    display: flex;
    justify-content: center;
}

/* Main Text */
.footer-main__text {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 300;
    max-width: 450px;
    color: #ffffff;
}

/* Bottom Section - Links Grid */
.footer-main__links {
    display: flex;
    gap: 60px;
    padding-top: 0;
    justify-content: space-between;
    align-items: start;
}

/* Newsletter section - allineata a destra */
.footer-main__newsletter {
    margin-left: auto;
    text-align: right;
    max-width: 300px;
}

.footer-main__newsletter p {
    color: #999999;
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-main__newsletter form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.footer-main__newsletter input[type="email"] {
    background-color: transparent;
    border: 1px solid #333;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    text-align: center;
}

.footer-main__newsletter button {
    background-color: var(--accent-color, #ffb2b2);
    border: none;
    color: #000000;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-main__newsletter button:hover {
    opacity: 0.8;
}

/* Link Column */
.footer-main__column {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Column Title */
.footer-main__title {
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--nav-color);
    margin: 0 0 15px 0;

    /* Rimuove margine superiore, aggiunge 15px sotto */
}

/* Links List */
.footer-main__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual Link */
.footer-main__link {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #d6d6d6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-main__link:hover {
    color: var(--hover-color);
}

/* Bottom Watermark Logo */
.footer-main__watermark {
    position: absolute;
    bottom: -160px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 95%;
    z-index: 1;
    pointer-events: none;
    fill: var(--nav-color);
    opacity: 0.02;
}

/* QR Code Section */
.footer-qr-section {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* QR text - base styles */
.qr-text {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    transform: scale(80%) translateX(-52px) translateY(-5px);
}

.footer-qr-section svg {
    height: 90%;
    width: auto;
    max-height: 200px;

    /* Limite massimo per evitare che diventi troppo grande */
    padding: 10px;
    background-color: #ffffff;
    border-radius: 20px;
}

.footer-qr-section .bestseller_txt {
    margin-bottom: 20px;
}

/* Responsive - Tablet */
/* Mobile - sotto 800px nascondi QR */
.selected {
    color: var(--nav-color);
    pointer-events: none;
    color: var(--hover-color);
}

/* @da mmenu */
/* Variabili CSS */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.dropdown-arrow {
    font-size: 14px !important;
    color: #000000;
    transition: transform 0.3s ease;
    margin-left: -2px;
}

.popular-tagsproduct {
    gap: 8px;
    align-items: center;

    /* Allinea verticalmente gli elementi al centro */
}

.tag3:hover,
.tag3:focus {
    background-color: #ffffff;
    color: var(--accent-color);
}

/* TEST - Header principale */
.main-header-layout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0);
}

#logo-responsive-trigger {
    fill: white;
}

/* Series box split - vertical subdivision */
#top-tier .itemM.series-box-split {
    display: grid !important;
    grid-template-rows: 1fr 1fr !important;
    grid-template-columns: 1fr !important;

    /* gap: 10px */
    padding: 0;
}

#top-tier .series-box-split > .series-box {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
}

.series-box-split .zimh {
    height: 100%;
    width: 100%;
}

/* Logo container */
.logo-container {
    display: flex;
    align-items: flex-end;

    /* padding-top: 20px */
}

/* Logo image */
.logo-img {
    height: 27px;
    width: auto;
    fill: var(--nav-color);
}

.logo-bottom {
    height: 14px;
    width: auto;
    margin-bottom: 10px;
    fill: var(--nav-color);
}

.mini-logo {
    height: 40px;
    width: auto;
    fill: var(--nav-color);
}

.mini-logo-modal {
    height: 40px;
    width: auto;
    fill: var(--nav-color);
    margin: 0 auto;
}

/* SVG logo specifico */
svg.logo-img {
    display: inline-block;
    vertical-align: middle;
}

/* Logo image */
.logo-img_b {
    height: 16px;
}

/* Popular tags modificato */
.popular-tags-text {
    padding-left: 30px;
    color: black;
    font-family: 'Lato';
    font-weight: 400;
    font-size: 10px;
    word-spacing: 10px;
    margin: 22px 0 0 8px;
}

/* Popular tags modificato */
.main_menu,
.main_menub {
    padding-left: 30px;
    color: black;
    font-family: 'Lato';
    font-weight: 400;
    font-size: 10px;
    margin: 22px 0 0 8px;
    display: flex;
    align-items: center;
}

.main_menub {
    padding-left: 0;
    color: black;
    font-family: 'Lato';
    font-weight: 400;
    font-size: 10px;
    word-spacing: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Menu superiore categorie (Man, Woman, etc) */
.menu-category {
    background-color: white;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #ffffff;
    margin: 0 8px 0 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.controller {
    background-color: rgba(255, 255, 255, 0);
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.controller_btn {
    color: var(--product-accent);
}

.menu-category-transparent {
    color: var(--nav-color);
    color: rgba(255, 255, 255, 0.95) !important;
    background-color: transparent;
}

.menu-category-transparent:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--hover-color);
}

.menu-category-active {
    color: var(--nav-color);
    background-color: var(--accent-color);
}

.menu-category-active-product {
    color: white;
    background-color: var(--product-accent);
}

.menu-category-active:hover {
    color: var(--hover-color);
}

.menu-category-promo {
    background-color: rgba(255, 255, 255, 0.09);
    color: #ff8db9;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 900;
}

.menu-category-promo:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--hover-color);
}

/* Tag variants (vecchie classi per retrocompatibilità) */
.tag-transparent-white {
    color: #ffffff;
    background-color: transparent;
}

.tag-transparent-white:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--hover-color);
}

.tag-pink-dark {
    color: #171717;
    background-color: var(--accent-color);
}

.tag-pink-dark:hover {
    background-color: var(--accent-color);
    color: var(--hover-color);
}

/* Spacer */
.spacer-15 {
    width: 15px;
}

.spacer-55 {
    width: 100%;
    height: 55px;
}

.spacer-45 {
    width: 100%;
    height: 45px;
}

.spacer-35 {
    width: 100%;
    height: 25px;
}

/* Accent color - rosa */
.accent-bg {
    background-color: var(--accent-color) !important;
}

.accent-text {
    color: var(--accent-color) !important;
}

.accent-svg path {
    fill: var(--accent-color) !important;
}

/* Per SVG esterni caricati come img - usa CSS mask per colorarli con accent-color */
img.accent-svg {
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--svg-url);
    mask-image: var(--svg-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--accent-color);
}

/* Classe specifica per il logo */
.accent-svg-mask.logo-img {
    display: inline-block;

    /* Larghezza tipica del logo Noova */
    height: 27px;
    width: 176px;
    background-color: var(--accent-color);
    -webkit-mask: url('../images/noova_logo_pink.svg') no-repeat center;
    mask: url('../images/noova_logo_pink.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Utility class generica per convertire qualsiasi immagine in accent color */
.svg-to-accent {
    display: inline-block;
    background-color: var(--accent-color);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Uso: <div class="svg-to-accent" style="-webkit-mask-image: url('path/to/svg.svg'); mask-image: url('path/to/svg.svg'); width: 30px; height: 30px;"></div> */
/* SVG che eredita il colore del testo */
.text-color-svg path {
    fill: currentColor !important;
}

/* Tag accent styles */
.tag-accent-inspired {
    background-color: #ffc9c9;
    color: #0f0f0f;
    margin-left: 14px;
    right: 10px;
}

.tag-accent-checkout {
    background-color: #ffc9c9;
    color: #322d2a;
    margin-top: 10px;
}

/* Tag Get-10% */
.tag-promo {
    background-color: rgba(255, 255, 255, 0.09);
    color: #ffffff;
    font-weight: 900;
}

/* Text styles */
.text-bold-juana {
    font-weight: 900;
    font-family: 'Juana Alt';
}

.text-white-juana {
    font-weight: 400;
    font-family: 'Juana Alt';
    color: #ffffff;
    margin-bottom: 36px;
}

.foot_minier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.txh4-hero {
    line-height: 75px;
}

/* Item heights */
.item-height-320 {
    height: 320px;
}

/* Background styles */
.bg-colors {
    background-image: url(../images/colors.jpg);
    background-size: 105%;
    background-position: 0px -98px;
}

.bg-beige-center {
    background-color: #ebe9e4;
    text-align: center;
}

.text-gray-a1 {
    color: #a1a1a1;
}

.bestseller-text-style {
    text-align: left;
    color: #212121;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.text-bold-juana-dark {
    font-family: 'Juana Alt';
    font-weight: 900;
    color: #3b3b3b;
}

.tag-dark-hidden {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
    display: none !important;
}

.bg-lithday {
    background-image: url(../images/lithday.jpg);
    background-size: 100%;
    background-position: 0 -40px;
}

.tagger-absolute {
    position: absolute;
}

.bg-orange-center {
    background-color: #e94e01;
    text-align: center;
}

.tag-white-orange-hidden {
    background-color: #ffffff !important;
    color: #ca3d00 !important;
    display: none !important;
}

.bg-bright {
    background-image: url(../images/bright.jpg);
    background-size: 185%;
    background-position: -140px -458px;
}

.bg-brown-center {
    background-color: #593e2c;
    text-align: center;
}

.text-white {
    color: #ffffff;
}

.bestseller-text-cream {
    text-align: left;
    color: #ffecdf;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.text-bold-juana-white {
    font-family: 'Juana Alt';
    font-weight: 900;
    color: #ffffff;
}

.tag-cream-brown-hidden {
    background-color: #ffecdf !important;
    color: #593e2c !important;
    display: none !important;
}

.bg-ex5 {
    background-image: url(../images/thumbs/ex5.png);
    background-size: 100%;
    background-position: 0 -115px;
    background-color: rgba(255, 255, 255, 0.94);
}

.text-gray-series {
    color: #71716a;
}

.text-gray-5f {
    color: #5f5f5f;
}

.bg-back10 {
    background-image: url(../images/backs/back10.jpg);
    background-position: 0 -100px;
}

.fav-top-left {
    position: absolute;
    top: 28px;
    left: 30px;
}

.txthov-bottom-left {
    bottom: 35px;
    left: 30px;
}

.text-white-large {
    color: #ffffff;
}

.text-lato-bold {
    font-family: 'Lato';
    font-weight: 900;
}

.tag-white-dark-hidden {
    background-color: #ffffff !important;
    color: #313131 !important;
    margin-left: 14px !important;
    right: 10px !important;
    display: none !important;
}

.bg-shop2 {
    background-image: url(../images/thumbs/shop2.png);
    background-size: 100%;
    background-position: 0 0px;
}

.zimhb-flex-center {
    background-color: transparent;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.app-title {
    margin-bottom: 0;
    color: #ffffff;
    text-align: center;
    margin-left: 0;
    font-size: 50px;
    font-weight: 900;
    line-height: 40px;
}

.app-title-light {
    font-family: 'Juana Alt';
    margin-bottom: 15px;
    color: #ffffff;
    text-align: center;
    margin-left: 0;
    font-size: 50px;
    font-weight: 400;
    line-height: 40px;
}

.text-lato-now {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 30px;
}

.position-fit {
    position: relative;
    width: fit-content;
}

.newsletter-center {
    text-align: center;
    margin-top: 15px;
}

.bg-cards {
    background-image: url(../images/cards.jpg);
    background-size: 195%;
    background-position: -50px -200px;
}

.bg-transparent-center {
    background-color: transparent;
    text-align: center;
}

.text-cream-ef {
    color: #efedea;
}

.bestseller-text-yellow {
    text-align: left;
    color: #ffcb02 !important;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.tag-yellow-hidden {
    background-color: #f6c208 !important;
    color: #5a130a !important;
    display: none !important;
}

.bg-ex81 {
    background-image: url(../images/ex81.jpg);
    background-position: -110px;
}

.ticker-blue-top {
    background-color: #006ca6;
    position: absolute;
    top: 0;
    height: 40px;
}

.icon-top-80 {
    position: absolute;
    top: 80px;
}

.zimhb-transparent-padded {
    background-color: transparent;
    text-align: center;
    padding: 20px 0 38px 0;
}

.logo-small {
    height: 20px;
    position: relative;
    top: 1px;
    margin-bottom: 6px;
}

.supplier-text {
    max-width: 100%;
    line-height: 10px;
    font-size: 30px;
    margin-left: 0;
    color: white;
    text-align: center;
}

.text-juana-official {
    font-family: 'Juana Alt';
    font-weight: 900;
    line-height: 38px;
}

.text-year-blue {
    font-family: 'Lato';
    font-weight: 700;
    color: #0198cc;
    font-size: 18px;
    line-height: 8px;
}

.bg-ex11 {
    background-image: url(../images/thumbs/ex11.png);
    background-size: 110%;
    background-position: 0px -65px;
    background-color: rgba(255, 255, 255, 0.94);
}

.txhSeries-gold {
    color: #c3a327;
    font-size: 55px;
}

.text-gold-bold {
    color: #c3a327;
    font-weight: 900;
}

.text-juana-gold {
    font-family: 'Juana Alt';
    font-weight: 400;
    color: #c3a327;
}

.tag-gold-hidden {
    background-color: #c3a327 !important;
    color: white !important;
    position: relative !important;
    bottom: 10px !important;
    margin: 0 !important;
    margin-top: 15px !important;
    margin-bottom: -15px !important;
    display: none !important;
}

.bg-ex15 {
    background-image: url(../images/thumbs/ex15.png);
    background-size: 105%;
    background-position: 0px -55px;
    background-color: rgba(255, 255, 255, 0.94);
}

.txhSeries-brown {
    color: #514023;
    font-size: 55px;
}

.text-brown {
    color: #514023;
}

.text-juana-brown-bold {
    font-family: 'Juana Alt';
    font-weight: 900;
    color: #514023;
}

.tag-brown-hidden {
    background-color: #7e5538 !important;
    color: white !important;
    position: relative !important;
    bottom: 10px !important;
    margin: 0 !important;
    margin-top: 15px !important;
    margin-bottom: -15px !important;
    display: none !important;
}

.bg-back9 {
    background-image: url(../images/backs/back9.jpg);
    background-position: -40px -50px;
    background-size: 170%;
}

.zimhb-green-center {
    background-color: #cedad1;
    text-align: center;
}

.text-orange-large {
    color: #e4853f;
}

.txhLarge-dark {
    color: #3b3430;
    text-align: center;
    margin-left: 0;
}

.text-juana-orange-bold {
    font-family: 'Juana Alt';
    font-weight: 900;
    color: #cc8758;
}

.tag-orange-explore-hidden {
    background-color: #d16415 !important;
    color: #ebede6 !important;
    margin-top: 10px !important;
    display: none !important;
}

/* Nav principale */
.main-nav {
    color: #ffffff;
    margin: 0;
    font-family: 'Lato';
    position: relative;
    left: 0;
    font-size: 16px;
    font-weight: 400;
    --nav-spacing: 10px;

    /* Variabile CSS per controllo centralizzato */
}

.nav-link {
    font-family: 'Lato';
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--nav-color);
    display: inline-block;
    margin-right: var(--nav-spacing, 10px);

    /* Usa la variabile CSS con fallback */
    text-decoration: none;
}

.nav-link:hover {
    color: var(--hover-color);
}

.nav-link-pink {
    font-family: 'Lato';
    color: #d69595;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 5px;
    display: inline-block;
}

.nav-link-pink:hover {
    color: var(--hover-color);
}

.nav-spacer {
    display: inline-block;
    width: 20px;
}

.nav-link.active {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-style: solid;
}

/* Menu icon container */
.menu-icon-container {
    margin-top: 10px;
}

/* Right menu */
.right-menu-container {
    display: flex;
    gap: 12px;
    padding: 0;
    margin: 0;
}

/* Body background */
.bg-cream {
    background-color: #fff1ec;
}

/* Hero background */
.hero-bg {
    /* Proprietà dirette - modificabili nei breakpoint */
    height: 100%;
    background-size: auto 1024px;
    background-position: center bottom;
    background-position: calc(50% + 110px) bottom;

    /* Proprietà fisse */
    /* transition: transform 1.5s ease-out; */
    /* RIMOSSO - interferisce con parallax JS */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -5;

    /* GPU optimization */
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.hero-bg-product {
    position: absolute;
    top: 0;

    /* Incollato in alto */
    left: 0;

    /* Incollato a sinistra */
    width: 100vw;

    /* Sempre grande quanto la finestra */
    height: 100vh;

    /* Sempre alto quanto la finestra */
    background-image: url('../images/Products/Bay_A0_Trans_LITH_PP.jpg');
    background-size: 1380px;

    /* Dimensione fissa immagine */
    background-position: calc(50% + 200px) calc(0% - 305px);

    /* OFFSET QUI! */
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -5;
}

/* Viewport Height Guide - DEV TOOL */
/* Safe area - altezza reale dispositivi meno UI browser */
/* Hover effect for cart icons */
.right-menu-container .icon {
    cursor: pointer;
}

.right-menu-container .icon svg {
    transition: fill 0.3s ease;
    fill: var(--accent-color);
    margin: 0;
    padding: 0;
}

.right-menu-container .icon svg path {
    fill: inherit;
}

.right-menu-container .icon:hover svg {
    fill: var(--hover-color);
}

/* Dropdown Editions - Works on all screen sizes */
/* Wrapper del dropdown */
.editions-dropdown-wrapper {
    display: inline-block;
    position: relative;
    margin-right: var(--nav-spacing, 20px);
}

/* Link trigger "Editions" */
.editions-trigger {
    font-family: 'Lato';
    cursor: pointer;
    color: var(--nav-color);
    color: rgba(255, 255, 255, 0.95) !important;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}

/* Mini logo */
.editions-trigger .mini-logo {
    width: auto;
    height: 14px;
    margin-right: 2px;
    vertical-align: baseline;
    position: relative;
    top: 1px;

    /* Aggiusta la posizione verticale */
    display: inline-block;
    fill: currentColor;

    /* Eredita il colore del testo */
}

/* Freccia */
.editions-trigger .arrow {
    font-size: 12px;
    margin-left: 3px;
    transition: transform 0.3s ease;
    display: inline-block;
    transform: rotate(90deg);

    /* Freccia già puntata verso il basso */
}

/* Sposta freccia verso il basso on hover */
.editions-dropdown-wrapper:hover .arrow {
    transform: rotate(90deg) translateX(3px);

    /* Dopo rotazione, X diventa il basso */
}

/* Dropdown menu */
.editions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background-color: transparent;
    padding: 10px 0 5px 0;
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

/* Mostra dropdown on hover */
.editions-dropdown-wrapper:hover .editions-dropdown {
    opacity: 1;
    visibility: visible;
    margin-top: 5px;
}

/* Link nel dropdown */
.editions-dropdown .nav-link {
    display: block !important;
    padding: 4px 0;
    margin: 0;
    color: #ffffff !important;
    text-align: left;
    white-space: nowrap;
    font-size: 16px;
}

.editions-dropdown .nav-link:hover {
    color: var(--hover-color) !important;
}

.pt_wrapper {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.favl {
    position: absolute;
    top: 30px;
    right: 30px;
}

.favl-product {
    position: absolute;
    top: 40px;
    right: 40px;
}

/* Wrapper per heading e favorito allineati */
.heading-favorite-wrapper {
    display: flex;
    align-items: flex-start;
}

/* Versione inline del favorito (non absolute) */
.favl-product-inline {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.favl-product-inline .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================ */
/* CLASSI PER BOTTONE ADD TO BAG */
/* ============================================ */
/* Bottone principale Add to Bag */
.buy-button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 16px 26px;
    background-size: 200% 200%;
    border: 0;
    border-radius: 45px;
    font: inherit;
    font-family: 'Lato',  sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    width: auto;

    /* z-index: 999 */
    position: absolute;
    bottom: 35px;
    right: 35px;
    transition: all 0.3s ease !important;

    /* box-shadow: 0 0 42px rgba(103, 103, 103, 0.62) !important */
}

.hero-content-block-product.buy-button {
    left: 20px;
}

.buy-button-cart {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 14px 26px 14px 26px;
    background-size: 200% 200%;
    border: 0;
    border-radius: 45px;
    font: inherit;
    font-family: 'Lato',  sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    width: auto;

    /* z-index: 999 */
    transition: all 0.3s ease !important;
}

/* Newsizer - posizione naturale nel DOM, nessun transform iniziale */
/* Il movimento è gestito solo via JS */
.whishlist {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 14px 26px 14px 26px;

    /* background: linear-gradient(45deg, #4461d1, #273362); */
    background-color: #000000;
    background-size: 200% 200%;
    border: 0;
    border-radius: 45px;
    font: inherit;
    font-family: 'Lato',  sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    background-color: white;
    color: black;
    box-sizing: border-box;
    border: 1px solid #959595;
}

/* Hover su bottone principale */
.noova-el-82245:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(48, 61, 113, 0.3);
}

/* Prezzo nel bottone */
.noova-el-823 {
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.noova-el-823 {
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.noova-el-824 {
    font-size: 20px;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

.noova-el-824 {
    font-size: 20px;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* Testo "Add to Bag" */
.noova-el-825 {
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 100%;
    line-height: 1;
    vertical-align: baseline;
    transition: opacity 0.3s ease;
    font-size: 16px;
    font-weight: normal;
}

/* Classe gradient-back per animazione gradiente */
.gradient-back {
    background: linear-gradient(135deg,
        var(--product-accent),
        color-mix(in srgb, var(--product-accent) 60%, white 40%));
    background-size: 200% 200%;
    animation: gradientAnimation 3s ease infinite;
}

/* RIMOSSO ::after che causava problemi con gli sfondi */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Classe ohhv per hover effects */
.ohhv:hover {
    transform: scale(0.98);
}

.ohhv:focus {
    transform: scale(0.98);
    outline: none;
}

/* Classe firstPay se necessaria */
.firstPay:hover::before {
    animation: shine 0.5s ease-in-out;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.black {
    fill: black !important;
    color: black !important;
}

.undisplay {
    display: none;
}

.grayed {
    color: rgb(132, 132, 132);
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================ */
/* STILI BOTTONE NOOVA-EL-82245 E TAG6 */
/* ============================================ */
.noova-el-82245 {
    display: inline-flex;
    padding: 14px 26px 14px 26px;
    background: linear-gradient(45deg, #4461d1, #273362);
    background-color: #303d71;
    background-size: 200% 200%;
    border: 0;
    border-radius: 45px;
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: white;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: gradientAnimation 3s ease infinite;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-synthesis: none;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Tag6 general style */
.tag6 {
    margin: 15px 0 0 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    padding: 12px 24px 12px 24px;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.get-10-product {
    background-color: #f0f0f0;
}

/* ============================================ */
/* CLASSI PANNELLO TAGLIE COMPLETO */
/* ============================================ */
.noova-el-835 {
    font: inherit;
    font-size: 100%;
    line-height: 1;
    vertical-align: baseline;
    list-style: none;
}

.noova-el-836 {
    display: flex;
    font: inherit;
    font-size: 100%;
    line-height: 1;
    color: #140202;
    vertical-align: baseline;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-synthesis: none;
    flex-direction: column;
    align-items: stretch;
}

.noova-el-52898 {
    display: inline-block;
    position: relative;
    padding: 8px 16px 8px 16px;
    background-color: white !important;
    background-color: transparent;
    border: 0;
    border-radius: 16px;
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #000;
    text-decoration: none;
    vertical-align: baseline;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.noova-el-52898:hover {
    background-color: #f5f5f5;
}

.noova-el-52898 b {
    font-weight: 700;
}

.noova-el-52898 span {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 3px;
    text-transform: uppercase;
}

.noova-el-52898.disabled {
    cursor: not-allowed !important;
    opacity: 0.3 !important;
}

/* Spacing classes */
.mm_space_10 {
    height: 10px;
}

.mm_space_5 {
    height: 5px;
}

.mm-about {
    display: flex;
    flex-direction: column;
}

/* Altri elementi Noova per pannello taglie */
.noova-el-837,
.noova-el-839,
.noova-el-773 {
    display: block;
}

.noova-el-839 {
    height: 10px;
}

.noova-el-773 {
    height: 5px;
}

.noova-el-524 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.noova-el-779 {
    font-size: 14px;
    color: #191919;
}

.noova-el-176 {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.noova-el-176:hover {
    background-color: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.noova-el-821 {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

/* Stile per pannello sizer */
#sizer-full {
    background-color: #fafafa;
    padding: 20px;
    border-radius: 12px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

/* Size container */
#sizesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0;
}

/* ============================================ */
/* PRODUCT SPECIFICATIONS GRID */
/* ============================================ */
.series-grid-ptions {
    display: flex;
    gap: 25px;
    margin: -25px 0 40px 0;
    height: 80px;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-end;
}

.product-spec-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    position: absolute;
    bottom: 35px;

    /* z-index: 996 */
}

.product-spec-item_b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    color: black;
    margin-left: 25px;

    /* z-index: 996 */
}

.product-spec-item-size {
    display: flex;
    flex-direction: row;
    align-items: center;
    top: 354px;
    gap: 2px;
    width: auto;
}

.product-spec-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;

    /* Linea tratteggiata uniforme */
}

.spec-label {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--product-accent)
    /* text-transform: uppercase */;
    margin-right: 4px;
}

/* Safari-specific fix per font-size 12px */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .spec-label {
        transform: scale(0.9);
        transform-origin: center;
    }
}

.spec-value {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.spec-value-size,
.spec-value-guide {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: normal;
    word-spacing: 4px;
    background-color: #f4f4f4;
    border-radius: 12px;
    padding: 4px 14px;
}

.spec-value-guide {
    word-spacing: 0;
}

/* Selettori cliccabili */
.product-spec-item.clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.product-spec-item.clickable:hover {
}

.spec-value-with-arrow {
    display: flex;
    align-items: center;
    gap: 2px;

    /* margin-top: 2px */
}

.product-spec-item.active .dropdown-arrow {
    transform: rotate(180deg);
}

.product-color {
    padding: 14px 26px 14px 26px !important;
    border: 5px solid #e6e6e6 !important;
    border-radius: 45px !important;
    cursor: pointer !important;
}

/* Stili per i tag unità */
.unit-tag {
    display: inline-block;
    padding: 6px 24px;
    margin: 0 5px 0 0;
    border-radius: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f5f5f5;
    color: #999;
    transform: scale(0.80);
    transform-origin: left center;
}

.unit-tag-product {
    display: inline-block;
    padding: 6px 24px;
    margin: 0 5px 0 0;
    border-radius: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f5f5f5;
    color: #999;
    transform: scale(0.80);
    transform-origin: left center;
}

.unit-tag:first-child {
    margin-left: 0;
}

.unit-tag:hover {
    background-color: #e8e8e8;
    color: #666;
}

.unit-tag.active {
    background-color: #303d71;
    color: white;
}

.unit-tag-product.actve {
    background-color: #303d71;
    color: white;
}

/* Stili per i bottoni delle taglie */
.noova-el-52898 {
    display: inline-block;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #000000;
    transition: all 0.2s;
    background-color: #f6f6f6 !important;
}

.noova-el-52898:hover {
    background-color: #f5f5f5;
    border-color: #303d71;
}

/* Animazione per pannello sizer */
#sizer-full {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    opacity: 1;
    max-height: 500px;
    overflow: hidden;
}

#sizer-full.hidden {
    opacity: 0;
    max-height: 0;
}

/* ============================================ */
/* DROPDOWN SLIDE ANIMATION */
/* ============================================ */
/* Nuovo stile per dropdown con animazione slide */
.size-dropdown-slide {
    position: absolute;
    top: 0;
    left: 0;

    /* Parte da left 0 ma spostato con transform */
    width: 280px;
    height: 100%;
    background-color: var(--product-accent);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    z-index: 1000;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
    border-radius: 0 20px 20px 0 ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    overflow-y: auto;
    padding: 20px;

    /* Inizialmente fuori e non cliccabile */
    pointer-events: none;
    opacity: 1;
}

.size-dropdown-slide.active {
    transform: translateX(0);
    pointer-events: auto;
}

/* NEWSIZER - solo animazione dal basso */
#newsizer {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.newsizer_b {
    position: absolute;
    bottom: -600px;
    left: 0;
    right: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 35px;
    border-radius: 40px 40px 40px 40px;
    background-color: #F8F8F8;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
    z-index: 300;
    visibility: hidden;
}

#newsizer.active {
    transform: translateY(0);
}

/* Bottone chiusura */
.close-dropdown-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 45%;
    width: 20px;
    height: 20px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-dropdown-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background: rgba(255, 255, 255, 0.2);
}

.close-dropdown-btn .material-icons {
    font-size: 20px;
    color: #ffffff;
}

.size-dropdown-slide quack {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 8px;
    text-align: center;
    display: block;
    margin-bottom: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* ===== PRODUCT COLOR CLASSES (duplicated from filter_sort.css with p- prefix) ===== */
/* Base color item classes */
.p-fs-item-color-white {
    display: flex;
    width: 40px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    margin: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
    background-color: #f9f9fa;
    border: 0;
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: normal;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    overflow: visible;
    box-sizing: border-box;
    border-radius: 8px;
}

.p-fs-item-color-white-black {
    min-height: 42px;
    max-height: 32px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    font: inherit;
    font-family: 'Lato', sans-serif;
    line-height: normal;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    border-radius: 8px;
}

.p-fs-item-color-white-yellow {
    display: flex;
    width: 40px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    margin: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
    background-color: transparent;
    border: 0;
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: normal;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
    overflow: visible;
    box-sizing: border-box;
    border-radius: 8px;
}

.p-fs-item-color-tan {
    display: flex;
    width: 40px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    margin: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0;
    background-color: #c1a384;
    border: 0;
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: normal;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    overflow: visible;
    box-sizing: border-box;
    border-radius: 8px;
}

/* Wrapper classes */
.p-fs-item-color-white-black-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
    font: inherit;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: normal;
    vertical-align: baseline;
    cursor: pointer;
    overflow: visible;
    box-sizing: border-box;
}

.p-fs-menu-colors-header {
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: rgb(73, 73, 73);
}

.temp-series {
    display: none;
    padding: 35px;
}

.alpha1 {
    padding-bottom: 40px;
    margin-top: 30px;
}

.tag3-product {
    color: #000000;
    background-color: rgba(255, 255, 255, 0.87);
}

.fvproduct {
    color: #FFF;
}

.prod-mrg {
    margin-bottom: 0 !important;
    margin-top: -100px;
}

.ugh {
    left: 200px;
    bottom: 40px;
}

/* ============================================ */
/* ANIMAZIONI E STILI DINAMICI */
/* ============================================ */
/* Gradient dinamico per buy button con taglia selezionata */
.buy-button-gradient {
    background: linear-gradient(135deg,
        var(--product-accent),
        color-mix(in oklch, var(--product-accent) 120%, black 20%)) !important;
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Gradient animato per tasti e buy button SENZA position relative */
.gradient-selection {
    background: linear-gradient(135deg,
        var(--product-accent),
        color-mix(in oklch, var(--product-accent) 120%, black 20%)) !important;
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}

/* Hover effect per taglie */
.tag3-product-size_c {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tag3-product-size_c:hover:not(.disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Barra diagonale per taglie disabled */
.tag3-product-size_c.disabled {
    display: inline-block;
    text-decoration: line-through;
    text-decoration-color: #999;
    text-decoration-thickness: 1px;
}

/* Hover effect per product-color - stesso delle taglie */
.product-color {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-color:hover:not(.disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Hover per iconHistoryP - semplice opacity su desktop */
.iconHistoryP {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.iconHistoryP:hover {
    transform: scale(1.1);
}

/* Hover per buy-button che preserva centratura verticale */
.buy-button:hover,
.buy-button-cart:hover {
    box-shadow: 0 6px 25px rgba(0,0,0,0.2) !important;
}

/* Hover specifico per buy-button in hero-content-block-product_b che mantiene translateY */
.hero-content-block-product_b .buy-button:hover {
    transform: translateY(-50%) scale(1.025);
    box-shadow: 0 6px 25px rgba(0,0,0,0.2) !important;
}

/* Per tutti gli altri buy-button senza translateY */
.hero-content-block-product .buy-button:hover,
.buy-button-cart:hover {
    transform: scale(1.025);
}

@keyframes head-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

.fs-menu-colors-container {
    display: grid;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    line-height: 1;
    color: black;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    grid-template-columns: repeat(3,1fr);
    justify-content: flex-start;
}

.noova-el-200,
.noova-el-235,
.noova-el-306,
.noova-el-489,
.noova-el-627,
.fs-menu-mobile-items-container,
.noova-el-894,
.fs-menu-sort-container,
.fs-menu-colors-section,
.fs-menu-colors-section_b {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    line-height: 1;
    flex-direction: column;
}

.fs-menu-colors-section_b {
    position: absolute;
    top: 0;
    right: 0;
}

.fs-menu-colors-section_b {
    position: absolute;
    top: 35px;
    right: 35px;
}

.fs-menu-colors-section_b > .fs-menu-colors-container {
    grid-template-columns: repeat(4,1fr);
    gap: 4px !important;
}

/* Viewport guide responsive heights - VALORI FISSI BASATI SU DISPOSITIVI REALI */
/* Desktop 4K/1440p */
@media (max-width: 1600px) {
    /* From menu section */
    body {
        /* width: calc(1440px - (var(--page-padding) * 2)); */
    }

    #top-tier {
        grid-template-columns: repeat(2, 1fr);

        /* Reset full-bleed: torna dentro il contenitore */
        /* width: 100%; */
        /* margin-left: 0; */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -30px;
        --zimh-bg-position-y: bottom 160px;
        --zimh-bg-size: auto 80%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    .footer-main,
    .make-it-large {
        padding-left: calc((100vw - 1440px) / 2 + var(--page-padding));
        padding-right: calc((100vw - 1440px) / 2 + var(--page-padding));
    }

    .hero-bg-product {
        background-size: 1320px;

        /* Dimensione fissa immagine */
        background-position: calc(50% + 180px) calc(0% - 275px);

        /* OFFSET QUI! */
    }

    .product-column-left_b {
        /* Altezza minima per contenere il dropdown */
        padding: 40px 20px 40px 0;
    }

    .series-content-badge-large-display_1 {
        background-position: left -44px bottom -205px;
        background-size: 805px;
    }
}

/* Desktop 1440p standard */
@media (max-width: 1440px) {
    /* From menu section */
    body {
        /* width: calc(1200px - (var(--page-padding) * 2)); */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -60px;
        --zimh-bg-position-y: bottom 150px;
        --zimh-bg-size: auto 75%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    #top-tier {
        grid-template-columns: repeat(2, 1fr);
    }

    .itemE-full,
    .itemE-allshoes,
    .itemE-product {
        height: 600px;
        margin-bottom: 48px;
    }

    .itemE-full {
        height: 70vh;
        margin-bottom: 40px;
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 110px) top;
    }

    .hero-bg-product {
        background-size: 1120px;
        background-position: calc(50% + 170px) calc(0% - 225px);

        /* OFFSET QUI! */
    }

    .product-two-column-layout {
        grid-template-columns: calc(35% - 5px) calc(75% - 5px);

        /* padding-bottom: 30px */
        /* padding-top: 80px */
    }

    .footer-main,
    .make-it-large {
        padding-left: calc((100vw - 1200px) / 2 + var(--page-padding));
        padding-right: calc((100vw - 1200px) / 2 + var(--page-padding));
    }

    .product-two-column-layout_b {
        display: grid;
        grid-template-columns: calc(35% - 5px) calc(65% - 5px);
    }

    .series-content-badge-large-display_1 {
        background-position: left -24px bottom -155px;
        background-size: 675px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(3,1fr);
        gap: 4px !important;
    }

    .fs-menu-colors-section_b {
        right: 35px;
        left: auto;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 13px !important;
        max-height: 13px !important;
        width: 55px !important;
        padding: 15px !important;
    }

    .product-two-column-layout_c {
        grid-template-columns: calc(40% - 7px) calc(32% - 7px) calc(28% - 6px);
    }

    .series-content-badge-detail-display,
    .series-content-badge-detail-display_1,
    .series-content-badge-detail-display_2,
    .series-content-badge-detail-display_3,
    .series-content-badge-detail-display_4,
    .series-content-badge-detail-display_5 {
        background-color: gray;
        border-radius: 45px;
        height: 100%;
        background-size: 100%;
        background-position: 0;
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 2.2;

        /* Proporzione 4:3 */
    }

    .series-content-badge-large-display_4 {
        background-size: 102%;
        background-position: -6px -44px;
        background-repeat: no-repeat;
        background-color: #fafafa;
    }

    .series-content-badge-large-display_3 {
        background-size: 100%;
        background-position: center -60px;
    }

    .series-content-badge-large-display_2 {
        background-size: 80%;
        background-position: center -55px;
        background-repeat: no-repeat;
    }
}

/* MacBook Pro 16" / Desktop small */
@media (max-width: 1200px) {
    body {
        /* width: calc(1024px - (var(--page-padding) * 2)); */
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 2.6;
        background-size: 120%;
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 110px) top;
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -60px;
        --zimh-bg-position-y: bottom 160px;
        --zimh-bg-size: auto 82%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    .shoe-characteristics-container {
        grid-template-columns: repeat(1, 1fr);
    }

    #top-tier {
        grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 45vw, 460px), 1fr));
    }

    .footer-main,
    .make-it-large {
        padding-left: calc((100vw - 1024px) / 2 + var(--page-padding));
        padding-right: calc((100vw - 1024px) / 2 + var(--page-padding));
    }

    .itemE-full,
    .itemE-allshoes,
    .itemE-product {
        height: 600px;
        margin-bottom: 48px;
    }

    .itemE-full {
        height: 70vh;
        margin-bottom: 40px;
    }

    #series-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Su tablet, col3 diventa col2 */
    #series-grid .col3 {
        grid-column: span 2;
    }

    .temp-series {
        display: block;
    }

    .hero-bg-product {
        background-size: 1000px;
        background-position: calc(50% + 160px) calc(0% - 115px);

        /* OFFSET QUI! */
    }

    .product-two-column-layout {
        grid-template-columns: calc(45% - 5px) calc(55% - 5px);

        /* padding-bottom: 30px */
        /* padding-top: 640px */
    }

    .product-two-column-layout_b {
        grid-template-columns: calc(45% - 5px) calc(55% - 5px);

        /* Una sola colonna che prende tutto */
    }

    .series-content-badge-large-display_1 {
        background-position: left -4px bottom -120px;
        background-size: 535px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(3,1fr);
        gap: 4px !important;
    }

    .fs-menu-colors-section_b {
        right: 35px;
        left: auto;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 13px !important;
        max-height: 13px !important;
        width: 52px !important;
        padding: 14px !important;
    }

    .series-content-badge-large-display_4 {
        background-size: 102%;
        background-position: -6px -24px;
        background-repeat: no-repeat;
        background-color: #fafafa;
    }

    .series-content-badge-large-display_3 {
        background-size: 100%;
        background-position: center -35px;
    }

    .series-content-badge-large-display_2 {
        background-size: 80%;
        background-position: center -30px;
        background-repeat: no-repeat;
    }
}

/* iPad Pro 12.9" landscape */
@media (max-width: 1024px) {
    /* From menu section */
    body {
        /* width: calc(940px - (var(--page-padding) * 2)); */
    }

    /* Footer responsive rules - tablet */
    .footer-main__links {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-between;
    }

    .footer-main__column {
        flex: 0 0 calc(50% - 15px);

        /* Two columns layout */
    }

    /* QR section tablet - positioned at top right of footer */
    .footer-qr-section {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120px;
        max-height: 120px;
    }

    .footer-qr-section .qr-text {
        display: block;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        order: -1;
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 170px) top;
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -60px;
        --zimh-bg-position-y: bottom 150px;
        --zimh-bg-size: auto 75%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    #top-tier {
        grid-template-columns: repeat(2, 1fr);
    }

    .make-it-large {
        padding-left: calc((100vw - 940px) / 2 + var(--page-padding));
        padding-right: calc((100vw - 940px) / 2 + var(--page-padding));
    }

    .footer-main {
        padding-left: calc(var(--page-padding) * 1.5);
        padding-right: calc(var(--page-padding) * 1.5);
    }

    .itemE-allshoes {
        height: 600px;
        margin-bottom: 48px;
    }

    .hero-bg-product {
        background-size: 950px;
        background-position: calc(50% + 120px) calc(0% - 95px);

        /* OFFSET QUI! */
    }

    .prod-mrg {
        margin-bottom: 0 !important;
        margin-top: -130px;
    }

    .product-two-column-layout {
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        padding-bottom: 30px;
        padding-top: 640px;
    }

    .product-two-column-layout_b {
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);

        /* Una sola colonna che prende tutto */
    }

    .series-content-badge-large-display_1 {
        background-position: left -4px bottom -80px;
        background-size: 435px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(5,1fr);
        gap: 4px !important;
    }

    .fs-menu-colors-section_b {
        left: 35px;
        right: auto;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 13px !important;
        max-height: 13px !important;
        width: 56px !important;
        padding: 14px !important;
    }

    .series-content-badge-detail-display,
    .series-content-badge-detail-display_1,
    .series-content-badge-detail-display_2,
    .series-content-badge-detail-display_3,
    .series-content-badge-detail-display_4,
    .series-content-badge-detail-display_5 {
        background-color: gray;
        border-radius: 45px;
        height: 100%;
        background-size: 100%;
        background-position: 0;
    }

    .series-content-badge-large-display_4 {
        background-size: 102%;
        background-position: -6px -10px;
        background-repeat: no-repeat;
        background-color: #fafafa;
    }

    .series-content-badge-large-display_3 {
        background-size: 100%;
        background-position: center -25px;
    }

    .series-content-badge-large-display_2 {
        background-size: 80%;
        background-position: center -20px;
        background-repeat: no-repeat;
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 3;
        background-size: 120%;
    }
}

/* iPad Air/Pro portrait */
@media (max-width: 940px) {
    body {
        /* width: calc(100% - (var(--page-padding) * 2)); */
        /* 100% sotto 800px */
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 160px) top;
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -70px;
        --zimh-bg-position-y: bottom 120px;
        --zimh-bg-size: auto 69%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    #top-tier {
        grid-template-columns: repeat(1, 1fr);
    }

    /* html {
        padding: 0 var(--page-padding-mobile);
    } */
    .footer-main {
        /* Su schermi piccoli, usa il padding normale */
        padding-left: calc(var(--page-padding) * 2);
        padding-right: calc(var(--page-padding) * 2);
    }

    .make-it-large {
        /* Su schermi piccoli, usa il padding normale */
        padding-left: calc(var(--page-padding) * 2);
        padding-right: calc(var(--page-padding) * 2);
    }

    /* Footer 3 columns layout */
    .footer-main__links {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between;
    }

    .footer-main__column {
        flex: 0 0 calc(33.33% - 14px);

        /* 3 columns */
    }

    .prod-mrg {
        margin-bottom: 230px !important;
        margin-top: -180px;
    }

    .hero-bg-product {
        background-size: 1000px;
        background-position: calc(50% + 40px) calc(0% + 15px);

        /* OFFSET QUI! */
    }

    .product-two-column-layout {
        grid-template-columns: 400px auto;
        padding-bottom: 30px;
        padding-top: 600px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(5,1fr);
        gap: 4px !important;
    }

    .fs-menu-colors-section_b {
        left: 35px;
        right: auto;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 13px !important;
        max-height: 13px !important;
        width: 50px !important;
        padding: 15px !important;
    }

    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 450px;
    }

    .product-two-column-layout_b section {
        padding: 0;
    }

    .height-product {
        height: max-content;
    }

    .series-content-badge-large-display_1 {
        background-position: left -30px bottom -165px;
        background-size: 705px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(3,1fr);
        gap: 4px !important;
    }

    .fs-menu-colors-section_b {
        right: 35px;
        left: auto;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 13px !important;
        max-height: 13px !important;
        width: 55px !important;
        padding: 15px !important;
    }

    .shoe-characteristics-container {
        margin-bottom: 20px;
    }

    .series-content-badge-large-display_4 {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #fafafa;
    }

    .series-content-badge-large-display_3 {
        background-size: cover;
        background-position: center center;
    }

    .series-content-badge-large-display_2 {
        background-size: 80%;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 3;
        background-size: 120%;
    }
}

/* Small tablet / Large phone landscape */
@media (max-width: 800px) {
    /* From menu section */
    body {
        /* width: calc(768px - (var(--page-padding) * 2)); */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right 40px;
        --zimh-bg-position-y: bottom 135px;
        --zimh-bg-size: auto 82%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    #top-tier {
        grid-template-columns: repeat(1, 1fr);
    }

    .itemE-full,
    .itemE-allshoes,
    .itemE-product {
        height: 500px;
        margin-bottom: 40px;
    }

    .itemE-full {
        height: 70vh;
        margin-bottom: 40px;
    }

    .series-box .series-hero {
        font-family: 'Juana Alt';
        font-weight: 400;
        font-size: 40px;
        line-height: 35px;
    }

    #top-tier {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Footer responsive rules - mobile */
    /* QR code visible and centered below everything */
    .footer-qr-section {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 40px;
        padding: 0;
        order: 999;
        height: 120px;
        max-height: 120px;

        /* Force QR code to appear last */
    }

    /* Mobile QR text styling */
    .footer-qr-section .qr-text {
        display: block;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        order: -1;
    }

    .footer-main {
        padding: 50px 20px 20px;
        position: relative;
    }

    .footer-main__inner {
        display: flex;
        flex-direction: column;
        gap: 20px;

        /* Reduced from 40px */
    }

    /* Each column centered */
    .footer-main__column {
        text-align: center;
        padding: 10px 0;
    }

    /* Titles */
    .footer-main__title {
        font-size: 14px;

        /* Reduced from 16px */
        margin-bottom: 10px;

        /* Reduced from 20px */
    }

    /* Links centered */
    .footer-main__list {
        gap: 8px;

        /* Reduced from 15px */
    }

    /* Watermark adjustment */
    .footer-main__watermark {
        position: absolute;
        bottom: -10px;
        width: 190%;
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 140px) top;
    }

    .prod-mrg {
        margin-bottom: 260px !important;
        margin-top: -110px;
    }

    .hero-bg-product {
        background-size: 1000px;
        background-position: calc(50% + 10px) calc(0% + 15px);

        /* OFFSET QUI! */
    }

    .product-two-column-layout > :first-child {
        grid-row: 2;
        grid-column: 1;

        /* Forza nella prima colonna */
    }

    .product-two-column-layout > :nth-child(2) {
        grid-row: 1;
        grid-column: 1;

        /* Forza nella prima colonna */
    }

    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 400px;
    }

    .product-two-column-layout_b section {
        padding: 0;
    }

    .height-product {
        height: max-content;
    }

    .series-content-badge-large-display_1 {
        background-position: left -30px bottom -145px;
        background-size: 635px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(3,1fr);
        gap: 4px !important;
    }

    .fs-menu-colors-section_b {
        right: 35px;
        left: auto;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 13px !important;
        max-height: 13px !important;
        width: 55px !important;
        padding: 15px !important;
    }

    .product-two-column-layout_c {
        grid-template-columns: calc(33% - 5px) calc(33% - 5px) calc(33% - 5px);
    }

    .product-three-column-layout {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }

    .series-content-badge-detail-display,
    .series-content-badge-detail-display_1,
    .series-content-badge-detail-display_2,
    .series-content-badge-detail-display_3,
    .series-content-badge-detail-display_4,
    .series-content-badge-detail-display_5 {
        background-color: gray;
        border-radius: 45px;
        height: 100%;
        background-size: 100%;
        background-position: 0;
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 4;
        background-size: 140%;
    }
}

@media (max-width: 799px) {
    .right-menu-container .icon:first-child,
    .right-menu-container .icon:nth-child(2) {
        display: none !important;
    }

    .right-menu-container .icon.hamburger {
        display: block !important;
        cursor: pointer;
    }

    .iconHistoryP {
        opacity: 0;
    }

    .series-content-badge-large-display_1:hover .iconHistoryP,
    .series-content-badge-large-display_2:hover .iconHistoryP,
    .series-content-badge-large-display_3:hover .iconHistoryP,
    .series-content-badge-large-display_4:hover .iconHistoryP {
        opacity: 1;
    }

    .series-content-badge-large-display_4 {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #fafafa;
    }

    .series-content-badge-large-display_3 {
        background-size: cover;
        background-position: center center;
    }

    .series-content-badge-large-display_2 {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

/* iPhone 15 Pro Max landscape */
@media (max-width: 768px) {
    /* Su mobile iconHistoryP sempre visibile */
    .product-title,
    .product-title-recent {
        font-size: 35px;
        line-height: 25px;
        margin-top: 8px;

        /* Colore gestito da JavaScript */
    }

    .product-image,
    .product-image-allshoes {
        background-position: center calc(70% - var(--bottom-offset, 0));
    }

    .iconHistoryP {
        opacity: 1;
    }

    .logo-container {
        display: flex;
        align-items: flex-end;
        padding-top: 0;
    }

    .itemE-full,
    .itemE-allshoes,
    .itemE-product {
        margin-bottom: 15px;
    }

    .itemE-full {
        height: 70vh;
        margin-bottom: 40px;
    }

    /* From menu section */
    body {
        /* width: 100%; */
        /* Sotto 320px usa tutta la larghezza */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -20px;
        --zimh-bg-position-y: bottom 130px;
        --zimh-bg-size: auto 85%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    #top-tier {
        grid-template-columns: repeat(1, 1fr);
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -30px;
        --zimh-bg-position-y: bottom 160px;
        --zimh-bg-size: auto 80%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    .series-box .series-hero {
        font-family: 'Juana Alt';
        font-weight: 400;
        font-size: 38px;
        line-height: 32px;
    }

    /* Recent items - forza 2 colonne */
    #recent_items.recent-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
    }

    #series-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* ===== MOBILE: Series Grid Product (con elementi uniti) ===== */
    #series-grid-product {
        flex-direction: column;
    }

    #series-grid-product > div {
        flex: 0 0 100%;

        /* 100% width su mobile */
    }

    #series-grid-product > div:first-child,
    #series-grid-product > div:nth-child(2) {
        border-radius: 15px !important;
        margin-right: 0 !important;
    }

    /* ===== MOBILE: Series Grid Lower (griglia normale) ===== */
    .series-grid-lower {
        grid-template-columns: 1fr;
    }

    .recent-item-optimized {
        width: 100%;
        height: auto;
        aspect-ratio: 175 / 150;

        /* Mantiene le proporzioni originali */
    }

    .footer-main__watermark {
        position: absolute;
        bottom: -30px;
        width: 490%;
    }

    .hero-content-block,
    .hero-content-block-allshoes,
    .hero-content-block-product {
        margin: 0 0 25px 0;
    }

    .hero-main-heading {
        transform: scale(80%) translateX(-30px) translateY(-10px);
    }

    .hero-content-block .hero-description {
        display: none;
    }

    .series-content-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 30px;
        background-color: gray;
        border-radius: 15px;
        flex-direction: column;
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        margin-bottom: 0;
    }

    .series-iconb {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
    }

    .series-content-badge .series-display {
        flex: 0 0 140px !important;
        width: 160px !important;
        height: 160px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: white !important;
        border-radius: 15px !important;
    }

    #series-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Su mobile, tutto occupa 1 colonna */
    #series-grid .col2,
    #series-grid .col3 {
        grid-column: span 1;
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 140px) top;
    }

    .shoe-characteristics-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .series-grid-ptions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .product-spec-item {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 0;
    }

    .product-spec-item:last-child {
        border-bottom: none;
    }

    .prod-mrg {
        margin-bottom: 210px !important;
        margin-top: -130px;
    }

    .hero-bg-product {
        background-size: 950px;
        background-position: calc(50% - 5px) calc(0% + -25px);

        /* OFFSET QUI! */
    }

    .iconHistoryP {
        opacity: 0;
    }

    .series-content-badge-large-display_1:hover .iconHistoryP,
    .series-content-badge-large-display_2:hover .iconHistoryP,
    .series-content-badge-large-display_3:hover .iconHistoryP,
    .series-content-badge-large-display_4:hover .iconHistoryP {
        opacity: 1;
    }

    .size-guide-link {
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #848484;
        text-align: right;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 2px;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .size-guide-link:hover {
        color: var(--hover-color);
        text-decoration: underline;
        text-decoration-style: dotted;
    }

    #size-dropdown {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 28px 20px 32px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(30px) !important;
        -webkit-backdrop-filter: blur(30px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.12) !important;
        animation: slideUp 0.3s ease-out;
        z-index: 1000 !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    #unit-dropdown {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 28px 20px 32px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(30px) !important;
        -webkit-backdrop-filter: blur(30px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.12) !important;
        animation: slideUp 0.3s ease-out;
        z-index: 1000 !important;
    }

    /* Overlay scuro per mobile */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
    }

    .mobile-overlay.active {
        display: block;
        animation: fadeIn 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Griglia adattiva per mobile
    #size-dropdown {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    @media (max-width: 400px) {
        #size-dropdown {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    } */
    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 450px;
    }

    .product-two-column-layout_b section {
        padding: 0;
    }

    .height-product {
        height: max-content;
    }

    .footer-main,
    .make-it-large {
        padding-left: calc(var(--page-padding));
        padding-right: calc(var(--page-padding));
    }

    .series-content-badge-large-display_1 {
        background-position: left -30px bottom -145px;
        background-size: 635px;
    }
}

/* iPhone 15/14 portrait */
@media (max-width: 600px) {
    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 110px) top;
    }

    /* From menu section (first 600px block) */
    body {
        /* width: 100%; */
        /* Sotto 320px usa tutta la larghezza */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right 0;
        --zimh-bg-position-y: bottom 140px;
        --zimh-bg-size: auto 82%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    #top-tier {
        grid-template-columns: repeat(1, 1fr);
    }

    html {
        padding: 0 var(--page-padding-mobile);
    }

    #top-tier {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .series-icon {
        transform: scale(90%) translateX(-10px) translateY(-10px);
    }

    /* Ticker mobile styles */
    .ticker-container {
        /* Mantieni full width viewport anche su mobile */
        padding-left: var(--page-padding-mobile);
        padding-right: var(--page-padding-mobile);
    }

    /* Footer responsive rules - small mobile */
    .footer-main__watermark {
        position: absolute;
        bottom: -30px;
        width: 690%;
    }

    .prod-mrg {
        margin-bottom: 230px !important;
        margin-top: -110px;
    }

    .hero-bg-product {
        background-size: 780px;
        background-position: calc(50% - 5px) calc(0% + 125px);

        /* OFFSET QUI! */
    }

    .product-two-column-layout {
        grid-template-columns: 1fr;
        padding-bottom: 30px;
        padding-top: 550px;
    }

    .hero-content-block-product {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .series-content-badge-large-display_1 {
        background-position: left 0px bottom -115px;
        background-size: cover;
    }

    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 500px;
    }

    .product-two-column-layout_c {
        grid-template-columns: 1fr;
        height: auto;

        /* Fix Safari */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .product-three-column-layout {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }

    .product-two-column-layout_c > * {
        aspect-ratio: 1 / 1;

        /* Fix Safari */
        width: 100%;
        max-width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .series-grid-product-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        /* minmax per Safari */
        height: auto;

        /* Fix Safari */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .series-grid-product-details > * {
        aspect-ratio: 1.4 / 1;

        /* Quadrato come gli altri elementi */
        /* Fix Safari */
        width: 100%;
        max-width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/* Android phones portrait */
@media (max-width: 480px) {
    /* From menu section (first 480px block) */
    body {
        /* width: 100%; */
        /* Sotto 320px usa tutta la larghezza */
    }

    /* Centra verticalmente il buy-button in modo matematico con absolute */
    .hero-content-block-product_b .buy-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        bottom: auto;
    }

    .product-title,
    .product-title-recent {
        font-size: 32px;
        line-height: 15px;
        margin-top: 10px;

        /* Colore gestito da JavaScript */
    }

    .product-image,
    .product-image-allshoes {
        background-position: center calc(80% - var(--bottom-offset, 0));
    }

    #series-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .series-content-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px;
        background-color: gray;
        border-radius: 15px;
        flex-direction: row;
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        margin-bottom: 0px;
    }

    .series-content-badge .series-display {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: 100px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: white !important;
        border-radius: 15px !important;
    }

    .series-iconb {
        display: flex;
        align-items: flex-start;
        width: 100%;
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* Modifica aspect ratio per mobile */
    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -40px;
        --zimh-bg-position-y: bottom 120px;
        --zimh-bg-size: auto 82%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    .price {
        display: none;
    }

    .pt_wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: start;
        gap: 10px;
        margin-top: 15px;
        flex-direction: column;
    }

    .series-box .series-hero {
        font-family: 'Juana Alt';
        font-weight: 400;
        font-size: 35px;
        line-height: 30px;
    }

    .series-box .series-display {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 15px;
        margin-right: 40px;
    }

    /* Recent items - forza 2 colonne */
    #recent_items.recent-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
    }

    .recent-item-optimized {
        width: 100%;
        height: auto;
        aspect-ratio: 175 / 150;

        /* Mantiene le proporzioni originali */
    }

    .footer-main__watermark {
        position: absolute;
        bottom: -30px;
        width: 390%;
    }

    /* Footer two column layout */
    .footer-main__links {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        align-items: stretch;
    }

    .footer-main__column {
        flex: 0 0 calc(50% - 7.5px);

        /* Two columns layout - adjusted for gap */
    }

    .product-size-cart-buttons {
        flex-direction: column;
    }

    .size-button-product {
        width: 100%;
    }

    .shoe-characteristics-container {
        padding: 15px 0;
        gap: 15px;
    }

    .prod-mrg {
        margin-bottom: 130px !important;
        margin-top: -130px;
    }

    .hero-bg-product {
        background-size: 640px;
        background-position: calc(50% - 5px) calc(0% + 115px);

        /* OFFSET QUI! */
    }

    .series-content-badge-large-display_1 {
        background-size: contain;
        background-position: right 0 bottom 40px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        width: 100% !important;
        gap: 4px !important;
        position: relative;

        /* Torna nel flusso normale */
        width: 100%;

        /* Prende tutta la larghezza */
        left: 0;
        right: 0;
        top: 0;
        margin: 0;

        /* Reset margini */
        padding: 0;
        transform: none;

        /* Reset transform */
    }

    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 430px;
    }

    .fs-menu-colors-section_b {
        display: block;
        width: 100%;
        left: 0;
        top: auto;
        bottom: 0;
        padding: 30px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 12px !important;
        max-height: 12px !important;
        width: 60px !important;
        padding: 12px !important;
        width: 100% !important;
    }

    .prod-mrg .buy-button {
        padding: 14px 18px !important;
        bottom: 60px;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 430px) {
    .hero-content-block-product_b .hero-main-heading-product {
        display: none;
    }

    .hero-content-block-product_b .buy-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        bottom: auto;
    }

    .hero-content-block-product_b {
        padding: 20px 20px;
    }
}

/* iPhone SE / smaller phones */
@media (max-width: 393px) {
    /* From menu section (first 393px block) */
    body {
        /* width: 100%; */
        /* Sotto 320px usa tutta la larghezza */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -50px;
        --zimh-bg-position-y: bottom 120px;
        --zimh-bg-size: auto 82%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    .product-title,
    .product-title-recent {
        font-size: 40px;
        line-height: 30px;
        margin-top: 8px;

        /* Colore gestito da JavaScript */
    }

    .product-image,
    .product-image-allshoes {
        background-position: center calc(100% - var(--bottom-offset, 0));
    }

    /* Links section - tutto verticale */
    .footer-main__links {
        order: 2;
        flex-direction: column;
        gap: 15px;

        /* Ridotto da 30px */
        align-items: stretch;
    }

    .footer-main__watermark {
        position: absolute;
        bottom: -30px;
        width: 690%;
    }

    .prod-mrg {
        margin-bottom: 100px !important;
        margin-top: -130px;
    }

    .hero-bg-product {
        background-size: 520px;
        background-position: calc(50% - 5px) calc(0% + 185px);

        /* OFFSET QUI! */
    }

    .series-content-badge-large-display_1 {
        background-size: contain;
        background-position: right 0 bottom 100px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        width: 100% !important;
        gap: 4px !important;
        position: relative;

        /* Torna nel flusso normale */
        width: 100%;

        /* Prende tutta la larghezza */
        left: 0;
        right: 0;
        top: 0;
        margin: 0;

        /* Reset margini */
        padding: 0;
        transform: none;

        /* Reset transform */
    }

    .fs-menu-colors-section_b {
        display: block;
        width: 100%;
        left: 0;
        top: auto;
        bottom: 0;
        padding: 30px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 12px !important;
        max-height: 12px !important;
        width: 60px !important;
        padding: 12px !important;
        width: 100% !important;
    }

    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 420px;
    }

    .series-grid-product-details {
        grid-template-columns: repeat (2,1fr);
        height: auto;
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 4;
        background-size: 150%;
    }
}

/* Very small phones */
@media (max-width: 320px) {
    /* From menu section */
    body {
        /* width: 100%; */
        /* Sotto 320px usa tutta la larghezza */
    }

    :root {
        /* Aggiusta posizione background per schermi medi */
        --zimh-bg-position-x: right -30px;
        --zimh-bg-position-y: bottom 140px;
        --zimh-bg-size: auto 69%;
        --item-m-aspect-width: 2114;
        --item-m-aspect-height: 2865;
    }

    .product-title,
    .product-title-recent {
        font-size: 32px;
        line-height: 15px;
        margin-top: 10px;

        /* Colore gestito da JavaScript */
    }

    .product-image,
    .product-image-allshoes {
        background-position: center calc(50% - var(--bottom-offset, 0));
    }

    .series-box .series-title {
        border: 0;
        margin: 0;
        padding: 0;
        font-size: 17px;
        padding: 1px 20px 1px 20px;
        background-color: var(--accent-color);
        border-radius: 15px;
        font-family: "lato";
        font-weight: 600;
        letter-spacing: 0.1px;
        line-height: 2.1;
        color: white;
    }

    .series-box .series-display,
    .series-icon svg {
        display: none;
    }

    .series-icon {
        transform: scale(80%) translateX(-20px) translateY(-20px);
    }

    .tag_home-recent {
        transform: scale(80%) translateX(10px) translateY(-10px) !important;
    }

    .footer-main__watermark {
        position: absolute;
        bottom: -30px;
        width: 690%;
    }

    #recent_items.recent-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }

    .series-content-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 30px;
        background-color: gray;
        border-radius: 15px;
        flex-direction: column;
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-width: 0;
        position: relative;
        margin-bottom: 0;
    }

    .series-iconb {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
    }

    .series-content-badge .series-display {
        flex: 0 0 140px !important;
        width: 160px !important;
        height: 160px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: white !important;
        border-radius: 15px !important;
    }

    .product-price {
        /* display: none; */
    }

    .pt_wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: start;
        gap: 0;
        margin-top: 15px;
        flex-direction: column;
    }

    .itemQ .product-image {
        /* Offset negativo per itemQ */
        background-position: left calc(100% - var(--bottom-offset, 0px));
        background-size: 100%;
        --bottom-offset: 10px;
    }

    .item .product-image {
        --bottom-offset: 10px;

        /* Offset standard per item */
    }

    .hero-main-heading {
        transform: scale(70%) translateX(-50px) translateY(-10px);
    }

    .itemE-full,
    .itemE-allshoes,
    .itemE-product {
        height: 450px;
        margin-bottom: 40px;
    }

    .itemE-full {
        height: 70vh;
        margin-bottom: 40px;
    }

    .hero-bg {
        /* Proprietà dirette - modificabili nei breakpoint */
        height: 100%;
        background-position: calc(50% + 60px) top;
    }

    .masonry-break,
    .masonry-break,
    .recently-viewed-title {
        font-size: 34px;
        text-align: left;
        padding-top: 20px;
    }

    .prod-mrg .buy-button {
        padding: 14px 18px !important;
        bottom: 60px;
        visibility: hidden;
        pointer-events: none;
    }

    .prod-mrg .hero-main-heading-product {
        font-size: 48px;
        line-height: 48px;
    }

    .prod-mrg .hero-description-product {
        font-size: 18px;
    }

    .prod-mrg quack {
        display: none;
    }

    .prod-mrg {
        margin-bottom: 40px !important;
        margin-top: -130px;
    }

    .hero-content-block-product {
        margin-top: 10px !important;
        justify-content: start !important;
    }

    .hero-bg-product {
        background-size: 410px;
        background-position: calc(50% - 5px) calc(0% + 135px);

        /* OFFSET QUI! */
    }

    .series-content-badge-large-display_1 {
        background-size: contain;
        background-position: right 0px bottom 120px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        width: 100% !important;
        gap: 4px !important;
        position: relative;

        /* Torna nel flusso normale */
        width: 100%;

        /* Prende tutta la larghezza */
        left: 0;
        right: 0;
        top: 0;
        margin: 0;

        /* Reset margini */
        padding: 0;
        transform: none;

        /* Reset transform */
    }

    .fs-menu-colors-section_b {
        display: block;
        width: 100%;
        left: 0;
        top: auto;
        bottom: 0;
        padding: 30px;
    }

    .fs-menu-colors-section_b > .fs-menu-colors-container > .p-fs-item-color-white-black {
        min-height: 12px !important;
        max-height: 12px !important;
        width: 60px !important;
        padding: 12px !important;
        width: 100% !important;
    }

    .product-two-column-layout_b {
        grid-template-columns: 1fr;
        grid-template-rows: auto 370px;
    }

    .product-three-column-layout {
        grid-template-columns: repeat(1, 1fr);
        height: auto;
    }

    .hero-content-block-product_b .hero-main-heading-product {
        display: none;
    }

    .hero-content-block-product_b .buy-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        bottom: auto;
    }

    .hero-content-block-product_b {
        padding: 20px 20px;
    }

    .series-grid-product-details {
        grid-template-columns: 1fr;
        height: auto;
    }

    .series-grid-product-details > * {
        aspect-ratio: 4 / 2;
        background-size: 100%;
    }

    .hero-description-product_d {
        font-size: 40px;
    }
}

.hero-bg {
    background-image: url('hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* > 1600px */
@media (max-width: 1600px) {
    .hero-bg {
        background-position: center 55%;
    }
}

/* ≤ 1440px */
@media (max-width: 1440px) {
    .hero-bg {
        background-position: center 60%;
    }
}

/* ≤ 1200px */
@media (max-width: 1200px) {
    .hero-bg {
        background-position: center 65%;
    }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
    .hero-bg {
        background-position: center 70%;
    }
}

/* ≤ 940px */
@media (max-width: 940px) {
    .hero-bg {
        background-position: center 75%;
    }
}

/* ≤ 800px */
@media (max-width: 800px) {
    .hero-bg {
        background-position: center 80%;
    }
}

/* ≤ 768px */
@media (max-width: 768px) {
    .hero-bg {
        background-position: center 85%;
    }
}

/* ≤ 600px */
@media (max-width: 600px) {
    .hero-bg {
        background-position: center 90%;
    }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .hero-bg {
        background-position: center 93%;
    }
}

/* ≤ 430px */
@media (max-width: 430px) {
    .hero-bg {
        background-position: center 95%;
    }
}

/* ≤ 393px */
@media (max-width: 393px) {
    .hero-bg {
        background-position: center 97%;
    }
}

/* ≤ 320px */
@media (max-width: 320px) {
    .hero-bg {
        background-position: 56% bottom;
    }
}

.series-hero .text-bold {
    display: none;
}