html, body{
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* MOBILE CLASSES */
.show_on_mobile {
    display: none !important;
}
@media (max-width:480px){ /* MOBILE ONLY CLASSES */
    .show_on_mobile {
        display: block !important;
    }
    .hide_on_mobile {
        display: none !important;
    }
    .fs-10px {
        font-size: 10px !important;
    }
    .overflow-hidden-mobile {
        overflow: hidden !important;
    }
}

/* MINI MOBILE CLASSES*/
.show_on_mini_mobile {
    display: none !important;
}
@media (max-width:350px){ /* MOBILE ONLY CLASSES */
    .show_on_mini_mobile {
        display: block !important;
    }
    .hide_on_mini_mobile {
        display: none !important;
    }
    .overflow-hidden-mini-mobile {
        overflow: hidden !important;
    }
}

.main_placeholder_logo{
    -webkit-filter: drop-shadow(0px 4px 4px #555555);
    filter:         drop-shadow(0px 4px 4px #555555);
}
.shadow-top{
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}

.shadow-bottom{
    box-shadow: 0 +0.5rem 1rem rgba(0, 0, 0, 0.25) !important;
}

/* SELECT FIX FOR GRAY OUT THE NULL/FIRST ENTRY */
select, select option {
    color: black;
}
select:invalid, select option[value=""] {
    color: rgba(33, 37, 41, 0.75);
}
select.optionClass:not(.selDef){
    border-color: rgba(33, 37, 41, 0.75) !important;
}
select.optionClass.selDef{
    color: rgba(33, 37, 41, 0.75) !important;
}

/* CUSTOM ICON */
.i-circle {
    display: table-cell;
    font-size: calc(0.9rem + .3vw);
    width:     calc(1.3rem + .3vw);
    height:    calc(1.3rem + .3vw);
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    color: #212529;
    border-radius: 50%;
    border: calc(1.05px + 0.075vw) solid #212529;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-weight: 900;
}

/* CATALOGO moved to stand-alone CSS */

/* DETTAGLI */
.thumb-img{
    height:52px;
    width:auto;
    object-fit:contain;
    display:block;
}
.detail-main-img{
    max-height:60vh;
    object-fit:contain;
}
.meta-label{
    /*width:170px;*/
    width: 0.1%;
    text-wrap: nowrap;
    color: rgba(33, 37, 41, .75)!important;
}
@media (max-width:576px){
    .thumb-img{ height:44px; }
    /*.meta-label{ width:140px; }*/
}
.magnifier-lens{
    position:fixed;
    width:220px; height:220px;
    border:2px solid rgba(255,255,255,.95);
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.25);
    background-repeat:no-repeat;
    background-color:rgba(255,255,255,.12);
    backdrop-filter:saturate(1.05) contrast(1.03);
    pointer-events:none;
    display:none;
    z-index:9999;
}
@media (max-width:576px){
    .magnifier-lens{ width:140px; height:140px;}
}

.rating-stars .star{ font-size:1rem; color:#ced4da; }
.rating-stars .star.filled{ color:#f59f00; }

.workInProgress{
    position:relative;
}
.workInProgress>*{
    opacity:.50;
    -webkit-filter: grayscale(.8) blur(1px);
    /* -moz-filter: grayscale(.8) blur(1px); */
    -ms-filter: blur(1px);
    filter:grayscale(.8) blur(1px);
    pointer-events:none
}
.workInProgress::after{
    content:"...work in progress...";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:clamp(1rem,2.5vw,1.25rem);
    letter-spacing:.08em;
    color:rgba(33,37,41);
    text-transform:uppercase;
    /* background:repeating-linear-gradient(45deg,rgba(255,193,7,.18) 0 12px,rgba(255,193,7,.1) 12px 24px),linear-gradient(to bottom,rgba(255,255,255,.65),rgba(255,255,255,.35)); */
    border-radius:inherit
}

/* Badge circolare (overlay icona) */
.badge-circle{
    --size: 18px;                  /* cambia qui la dimensione */
    width: var(--size);
    height: var(--size);
    padding: 0;                    /* niente padding, altrimenti viene ovale */
    border-radius: 50%;
    display: inline-flex;          /* per centrare l'icona */
    align-items: center;
    justify-content: center;

    line-height: 1;
    font-size: calc(var(--size) * 0.75);
}

/* Taglie opzionali */
.badge-circle.badge-lg { --size: 20px; }
.badge-circle.badge-sm { --size: 16px; }
.badge-circle.badge-xs { --size: 14px; }

/* Dimensione icona coerente alla badge */
.badge-circle i,
.badge-circle svg{
    line-height: 1;
    width: 1em;   /* per gli SVG: mantieni proporzioni */
    height: 1em;
}

.card-detail-view{
    border-radius: 10px;
    overflow: hidden;
}