/* Custom styles using the design system */
body {
    font-family: var(--font-font-2), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--background-global-default, #F2F3F7);
    color: var(--text-main);
    font-size: var(--typography-body-size-medium);
    line-height: var(--typography-body-lineheight-medium);
}
.navbar-container {
    border-radius: var(--border-radius-m, 12px);
    background: var(--background-global-paper1, #FFF);
    height: 40px;
    padding: var(--spacing-xs);
    gap: var(--spacing-xl);
}
.navbar-container .logo{
    max-width: 150px;
}
.navbar-container .logo img{
    max-height: 40px;
}
.container {
    display: flex;
    width: var(--wl---page-page-container, 1200px);
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.languages  {
    text-decoration: none;
    color: var(--menu-label-foreground, #0D0D0D);
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-small, 14px);
    font-style: normal;
    font-weight: var(--typography-body-weight-small, 300);
    line-height: var(--typography-body-line-height-small, 16px); /* 114.286% */
}
.languages a {
    text-decoration: none;
    color: var(--menu-label-foreground, #0D0D0D);
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-small, 14px);
    font-style: normal;
    font-weight: var(--typography-body-weight-small, 300);
    line-height: var(--typography-body-line-height-small, 16px); /* 114.286% */
}
.languages img {
    width: 20px;
    border-radius: 3px;
}
.languages .btn-link {
    color: var(--text-main);
    text-decoration: none;
}
.hero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.hero h1{
    color: var(--text-main, #0D0D0D);
    text-align: center;
    font-family: var(--font-font-1, "DM Sans"), sans-serif;
    font-size: var(--typography-heading-size-medium, 48px);
    font-style: normal;
    font-weight: var(--typography-heading-weight-medium, 500);
    line-height: var(--typography-heading-line-height-medium, 48px); /* 100% */
}
.hero h5{
    color: var(--text-secondary, #666);
    text-align: center;
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-large, 18px);
    font-style: normal;
    font-weight: var(--typography-body-weight-large, 400);
    line-height: var(--typography-body-line-height-large, 24px); /* 133.333% */
}

.card-miticko {
    display: flex;
    padding: var(--card-padding);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-s);
    align-self: stretch;
    border-radius: var(--card-border-radius);
    border: var(--card-border-width) solid var(--card-border);
    background: var(--card-background);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.20);
    margin-bottom: var(--spacing-m);
}
.card-miticko .card-header {
    width: 100%;
    text-align: left;
}
.card-miticko .card-header small{
    color: var(--text-secondary, #666);
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-small, 14px);
    font-style: normal;
    font-weight: var(--typography-body-weight-small, 300);
    line-height: var(--typography-body-lineheight-small, 16px); /* 114.286% */
}
.card-miticko .card-header h1 {
    color: var(--text-main, #0D0D0D);
    font-family: var(--typography-title-font, "DM Sans"), sans-serif;
    font-size: var(--size, 28px);
    font-style: normal;
    font-weight: var(--weight, 600);
    line-height: var(--line-height, 34px); /* 121.429% */
}
.card-miticko .card-header h2 {
    color: var(--card-title, #0D0D0D);
    font-family: var(--title-font-type, "DM Sans"), sans-serif;
    font-size: var(--title-font-size, 18px);
    font-style: normal;
    font-weight: var(--title-font-weight, 700);
    line-height: var(--title-font-line-height, 24px); /* 133.333% */
}
.card-miticko .card-header p {
    margin: 0;
}

.card-miticko .card-body {
    width: 100%;
    position: relative;
    color: var(--card-subtitle, #666);
    font-family: var(--subtitle-font-type, "DM Sans"), sans-serif;
    font-size: var(--subtitle-font-size, 16px);
    font-style: normal;
    font-weight: var(--subtitle-font-weight, 400);
    line-height: var(--subtitle-font-line-height, 22px); /* 137.5% */
}
.card-spacing {
    margin-bottom: var(--spacing-m, 12px);
}
.product-card {
    margin-bottom: var(--spacing-m, 12px);
    gap: var(--spacing-m, 12px);;
}
.product-tags .supporting-text {
    color: var(--text-main, #0D0D0D);
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-small, 14px);
    font-style: normal;
    font-weight: var(--typography-body-weight-small, 300);
    line-height: var(--typography-body-lineheight-small, 16px); /* 114.286% */
}
.footer-text {
    color: var(--text-secondary);
    font-family: var(--font-font-2), sans-serif;
    font-size: var(--typography-label-size-medium, 12px);
    font-style: normal;
    font-weight: var(--typography-label-weight-medium, 400);
    line-height: var(--typography-label-lineheight-medium, 12px); /* 100% */
}

.utils {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-m, 12px);
    align-self: stretch;
    padding: 0;
}
.utils li{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    align-self: stretch;
    list-style: none;
    margin: 0;
}
.utils li a{
    overflow: hidden;
    color: var(--secondary-brand, #2A3493);
    text-overflow: ellipsis;
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-medium, 16px);
    font-style: normal;
    font-weight: var(--typography-body-weight-medium, 400);
    line-height: var(--typography-body-lineheight-medium, 22px); /* 137.5% */
    text-decoration: none;
}

.bt-miticko {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-m);
    padding: var(--button-paddingtop) var(--button-paddingright) var(--button-paddingbottom) var(--button-paddingleft);
    border-radius: var(--button-corner-radius, 12px);
    border: var(--button-resting-border-width, 0) solid var(--button-resting-border-color, rgba(255, 255, 255, 0.00));
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight, 600);
    line-height: var(--button-font-line-height, 16px);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--button-resting-background);
    font-family: var(--button-font, "DM Sans"), sans-serif;
    min-height: 36px;
    color: var(--button-resting-foreground);
}

.bt-miticko:hover {
    background: var(--button-hover-background);
    color: var(--button-hover-foreground);
}

.bt-miticko.bt-m-default {
    background: var(--button-resting-background, #D24600);
    color: var(--button-resting-foreground);
}

.bt-miticko.bt-m-light {
    background: var(--light-background);
    color: var(--light-foreground);
}
.bt-miticko.bt-m-light:hover {
    background: var(--light-backgroundhover);
    color: var(--light-foregroundhover);
}
.bt-miticko.bt-m-outlined {
    background: var(--outlined-background);
    color: var(--outlined-foreground);
    border: var(--outlined-borderwidth) solid var(--outlined-bordercolor);
}
.bt-miticko.bt-m-outlined:hover {
    background: var(--outlined-backgroundhover);
    color: var(--outlined-foregroundhover);
}
.bt-miticko.bt-m-text-only {
    background: var(--neutral-transparent);
    color: var(--primary-brand);
    border: none;
}
.bt-miticko.bt-m-text-only:hover {
    background: var(--neutral-transparent);
    color: var(--primary-brandhover);
}
.bt-miticko.bt-m-medium .icon {
    width: var(--typography-button-size-medium);
}
.bt-miticko.bt-m-text-only-disabled {
    background: var(--neutral-transparent);
    color: var(--primary-brand);
    border: none;
}
.bt-chip {
    display: flex;
    padding: var(--chip-paddingtop, 12px) var(--chip-paddingright, 24px) var(--chip-paddingbottom, 12px) var(--chip-paddingleft, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--chip-spacing, 4px);
    border-radius: var(--chip-borderradius, 40px);
    border: var(--chip-borderwidth, 1px) solid var(--secondary-brand, #2A3493);
    background: var(--secondary-brand, #2A3493);

    /* Elevation */
    box-shadow: var(--X, 0) var(--Y, 0) var(--Blur, 0) var(--Spread, 0) var(--Color, rgba(255, 255, 255, 0.00));

}
.label-miticko {
    width: fit-content;
    display: flex;
    min-height: var(--label-min-height, 18px);
    padding: var(--label-padding-top, 4px) var(--label-padding-right, 4px) var(--label-padding-bottom, 4px) var(--label-padding-left, 4px);
    justify-content: center;
    align-items: center;
    gap: var(--label-spacing, 4px);
    border-radius: var(--label-border-radius, 4px);
    border: var(--border-width, 0) solid var(--border-color, rgba(255, 255, 255, 0.00));
    background: var(--background, #F2F5F2);
    box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
    color: var(--foreground, #29670E);
    font-family: var(--label-font-family, "DM Sans");
    font-size: var(--label-font-size, 10px);
    font-style: normal;
    font-weight: var(--label-font-weight, 500);
    line-height: var(--label-font-line-height, 7px); /* 70% */
    text-transform: uppercase;
}
.supporting-text {
    color: var(--text-secondary, #666);

    /* bodySmall */
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-small, 14px);
    font-style: normal;
    font-weight: var(--typography-body-weight-small, 300);
    line-height: var(--typography-body-lineheight-small, 16px); /* 114.286% */
}

.container-filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-s, 8px);
    align-self: stretch;
}
.card-product{
    display: flex;
    flex-direction: column;
    padding: var(--spacing-l, 16px);
    align-items: flex-start;
    gap: var(--spacing-xl, 24px);
    align-self: stretch;
    margin-bottom: var(--spacing-m, 12px);
}
.card-product-container {
    display: flex;
    gap: var(--spacing-xl, 24px);
}
.card-product figure {
    display: flex;
    width: 200px;
    height: 200px;
    flex-direction: column;
    align-items: flex-start;
    aspect-ratio: 1/1;
    margin: 0;
}
.card-product figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-m, 8px);
}
.card-product .card-body  {
    align-items: flex-start;
    gap: var(--spacing-xl, 24px);
    align-self: stretch;
}
.card-product .card-body section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
}
.card-product .card-body section h3 {
    color: var(--text-main, #0D0D0D);
    font-family: var(--font-font-1, "DM Sans"), sans-serif;
    font-size: var(--typography-title-size-large, 28px);
    font-style: normal;
    font-weight: var(--typography-title-weight-large, 600);
    line-height: var(--typography-title-line-height-large, 34px);
}
.card-product .card-body .details {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-m, 12px);
}
.card-product .card-body .description {
    color: var(--text-secondary, #666);
    /* ❌ bodyMedium */
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-medium, 16px);
    font-style: normal;
    font-weight: var(--typography-body-weight-medium, 400);
    line-height: var(--typography-body-line-height-medium, 22px); /* 137.5% */
}
.card-product .card-body .price {
    min-width: auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-l, 16px);
    flex: 1 0 0;
    align-self: stretch;
    min-height: 100%;
}
.card-product .card-body .price b{
    white-space: nowrap;
    color: var(--text-main, #0D0D0D);
    text-align: right;
    /* ❌ titleMedium */
    font-family: var(--font-font-1, "DM Sans"), sans-serif;
    font-size: var(--typography-title-size-medium, 18px);
    font-style: normal;
    font-weight: var(--typography-title-weight-medium, 700);
    line-height: var(--typography-title-line-height-medium, 24px); /* 133.333% */
}
.card-product-container.is-unavailable h3,
.card-product-container.is-unavailable .description,
.card-product-container.is-unavailable .price b {
    color: var(--text-disabled, #999) !important;
}
.flatpickr-calendar.inline {
    box-shadow:none !important;
}
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month .cur-year {
    color: #000;
    text-align: center;
    font-family: var(--font-font-1), sans-serif;
    font-size: var(--typography-title-size-small);
    font-style: normal;
    font-weight: var(--typography-title-weight-small);
    line-height: var(--typography-title-lineheight-small); /* 70% */
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    padding: 5px;
}

.flatpickr-day.today {
    border-radius: var(--border-radius-0, 0) !important;
    background: var(--background-global-paper2, #FAFAFA) !important;
    border: none !important;
    color: var(--brand-secondary-brand, #3948D3) !important;
    text-align: center !important;

    /* Title */
    font-family: var(--typography-title-font, "DM Sans");
    font-size: var(--size, 14px);
    font-style: normal;
    font-weight: var(--weight, 700);
    line-height: var(--line-height, 18px); /* 128.571% */
}

.flatpickr-day:hover {
    border-radius: 0;
    background: var(--primary-onbrand);
}
.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
    border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
    background: var(--primary-brand);
    border-color: var(--primary-onbrandlight);
}
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
    border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
    background: var(--primary-brand);
    border-color: var(--primary-onbrandlight);
}
.button-progress {
    margin-top: var(--spacing-3xl, 48px);
}

.button-progress .bt-miticko {
    width: 100%;
}

/* Product Gallery Styles */
.product-gallery-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m, 16px);
    width: 100%;
    position: relative;
}

.gallery-main-image {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius-m, 12px);
    overflow: hidden;
    background: var(--neutral-grey-2, #F5F5F5);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .gallery-main-image {
        height: 400px;
    }
}

.gallery-main-image .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-thumbnails-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.gallery-thumbnails {
    display: flex;
    gap: var(--spacing-xs, 8px);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: var(--spacing-xs, 4px) 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: var(--neutral-grey-5, #E0E0E0);
    border-radius: 2px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background: var(--secondary-brand, #2A3493);
    border-radius: 2px;
}

.thumbnail-item {
    flex: 0 0 80px;
    height: 80px;
    border-radius: var(--border-radius-s, 8px);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: var(--neutral-grey-2, #F5F5F5);
}

@media (min-width: 768px) {
    .thumbnail-item {
        flex: 0 0 100px;
        height: 100px;
    }
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-item:hover {
    border-color: var(--secondary-brand, #2A3493);
    opacity: 0.8;
}

.thumbnail-item.active {
    border-color: var(--secondary-brand, #2A3493);
    box-shadow: 0 2px 8px rgba(42, 52, 147, 0.3);
}

.gallery-counter {
    position: absolute;
    top: var(--spacing-m, 16px);
    right: var(--spacing-m, 16px);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: var(--spacing-xs, 4px) var(--spacing-s, 12px);
    border-radius: var(--border-radius-s, 8px);
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-small, 14px);
    font-weight: var(--typography-body-weight-medium, 500);
    backdrop-filter: blur(4px);
}

.gallery-counter .separator {
    margin: 0 var(--spacing-xs, 4px);
}

.no-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m, 16px);
    padding: var(--spacing-xl, 48px);
    color: var(--text-disabled, #999);
}

.no-images i {
    font-size: 48px;
}

.no-images p {
    font-family: var(--font-font-2, "DM Sans"), sans-serif;
    font-size: var(--typography-body-size-medium, 16px);
    margin: 0;
}
.input-miticko {
    width: 100%;
}

#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}

.toast-top-right {
    top: 12px;
    right: 12px;
}

.toast {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 3px 3px 3px 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    opacity: 0.9;
    pointer-events: auto;
}



.toast-message {
    display: block;
    color: #FFFFFF;
}

.toast-title {
    font-weight: bold;
    display: block;
}

/* Animazione per il cambio immagine */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.main-image {
    animation: fadeIn 0.3s ease;
}
.chip-miticko {
    display: flex;
    padding: var(--chip-paddingtop, 12px) var(--chip-paddingright, 24px) var(--chip-paddingbottom, 12px) var(--chip-paddingleft, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--chip-spacing, 4px);
    border-radius: var(--chip-corner-radius, 9999px);
    border: var(--border-width, 1px) solid var(--border-color, #3948D3);
    background: var(--background, #FFF);

    /* Elevation */
    box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
    color: var(--foreground, #3948D3);
    /* Label */
    font-family: var(--typography-label-font, "DM Sans"), sans-serif;
    font-size: var(--size, 12px);
    font-style: normal;
    font-weight: var(--weight, 400);
    line-height: var(--line-height, 12px); /* 100% */
    cursor: pointer;
}
.icon-button-miticko {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--corner-radius, 12px);
    border: var(--button-resting-border-width, 0) solid var(--button-resting-border-color, rgba(255, 255, 255, 0.00));
    background: var(--button-resting-background, #FFE9E2);
    min-width: var(--min-width, 32px);
    min-height: var(--min-height, 32px);
    color: var(--button-resting-foreground, #AF3800);
}

.icon-button-miticko:hover {
    background: var(--button-hover-background, #FFE9E2);
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    outline: 0;
    border-radius: var(--border-radius-xl, 24px);
    background: var(--background-global-paper1, #FFF);
    box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
}
.modal-header {
    border-bottom: none;
}
.modal-header .modal-title {
    border-bottom: none;
    color: var(--text-main, #0D0D0D);
    font-family: var(--typography-title-font, "DM Sans"), sans-serif;
    font-size: var(--size, 18px);
    font-style: normal;
    font-weight: var(--weight, 700);
    line-height: var(--line-height, 24px); /* 133.333% */
}
#datePickerModal .modal-dialog {
    width: fit-content;
}