:root {
    --bs-primary: #f69537;
    --bs-primary-hover: #e6821f;
    --bs-primary-active: #cc741c;
    --bs-secondary: #fff6aa;
    --bs-secondary-hover: #fff27a;
    --bs-secondary-active: #ffed4d;
    --bs-focus-blue: #21313c;
}

/* --- BTN PRIMARY --- */
.btn-primary {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

.btn-primary:disabled {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 0.65;
}

/* --- BTN SECONDARY --- */
.btn-secondary {
    color: #000 !important;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #000 !important;
    background-color: var(--bs-secondary-hover) !important;
    border-color: var(--bs-secondary-hover) !important;
}

.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
    color: #000 !important;
    background-color: var(--bs-secondary-active) !important;
    border-color: var(--bs-secondary-active) !important;
}

.btn-secondary:disabled {
    color: #000 !important;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    opacity: 0.65;
}

/* --- BTN OUTLINE PRIMARY --- */
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

/* --- LINK STYLE OVERRIDE --- */
a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
}

a:hover,
a:focus {
    opacity: 0.8;
    text-decoration: none;
}

.btn-hover-eye {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.btn-hover-eye .bi-eye {
    position: absolute;
    right: -40px;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.btn-hover-eye .text {
    transition: all 0.3s ease;
}

.btn-hover-eye:hover .text {
    opacity: 0;
    transform: translateX(-20px);
}

.btn-hover-eye:hover .bi-eye {
    right: 50%;
    transform: translateX(50%);
    opacity: 1;
}

/* Contenitore slide principale */
#product, .slide {
    height: 100%;
    display: flex;
    justify-content: center; /* centra orizzontalmente */
    align-items: center; /* centra verticalmente */
    overflow: hidden; /* evita scroll/spostamenti */
}

/* Zoom container */
.zoom {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center; /* centra immagine di background */
    background-size: cover; /* mantiene proporzioni */
    overflow: hidden;
}

/* L’immagine dentro lo zoom */
.zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* evita deformazioni */
    pointer-events: none; /* consente mousemove su container */
}

/* Tiny Slider: forza slide singola centrata senza gutter */
.tns-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 !important; /* rimuove eventuali margini residui */
}

/* thumbnails */
#productThumbnails .thumbnails-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* eventuali bordi o ombre dovute a Tiny Slider */
#product .tns-item {
    box-shadow: none;
    border: none;
}

/* thumbnails base */
#productThumbnails .thumbnails-img {
    cursor: pointer;
    border: 2px solid transparent; /* default trasparente */
    border-radius: 6px;
    transition: border 0.2s;
}

/* thumbnail selezionata */
#productThumbnails .thumbnails-img.active {
    border: 2px solid rgba(0,0,0,0.1005) !important; /* evidenzia la selezione */
}