/* Shop Frontend E1.1 - Guided Product Configurator, based on D1.5.5
   Scope: Frontend presentation only.
   No Preview Engine, Print Engine or AJAX backend changes.
*/

body.sk-shop-frontend-preview-active .sk-shop-frontend-preview-gallery,
body.sk-shop-frontend-preview-active .woocommerce-product-gallery.sk-shop-frontend-preview-gallery,
body.sk-shop-frontend-preview-active .woocommerce div.product div.images.sk-shop-frontend-preview-gallery{
    float:none!important;
    width:100%!important;
    max-width:820px!important;
    margin:0!important;
    opacity:1!important;
    display:block!important;
    clear:none!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

.sk-shop-frontend-preview-card{
    position:relative!important;
    display:block!important;
    border:1px solid rgba(226,235,244,.86)!important;
    border-radius:36px!important;
    background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 100%)!important;
    padding:30px!important;
    box-shadow:0 34px 95px rgba(15,39,72,.12)!important;
    min-height:660px!important;
    overflow:hidden!important;
}

.sk-shop-frontend-preview-card:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 22% 0%, rgba(95,115,216,.12), transparent 34%), radial-gradient(circle at 100% 18%, rgba(245,183,0,.10), transparent 30%);
    opacity:.9;
}

.sk-shop-frontend-preview-kicker,
.sk-shop-frontend-preview-title,
.sk-shop-frontend-preview-stage,
.sk-shop-frontend-preview-status{
    position:relative!important;
    z-index:1!important;
}

.sk-shop-frontend-preview-kicker{
    color:var(--school-secondary,var(--secondary,#6074df))!important;
    font-size:12px!important;
    font-weight:950!important;
    letter-spacing:.16em!important;
    text-transform:uppercase!important;
    margin-bottom:7px!important;
}

.sk-shop-frontend-preview-title{
    color:#0f2748!important;
    font-size:clamp(27px,2.2vw,34px)!important;
    line-height:1.05!important;
    font-weight:950!important;
    letter-spacing:-.045em!important;
    margin-bottom:20px!important;
}

.sk-shop-frontend-preview-stage{
    position:relative!important;
    min-height:565px!important;
    border-radius:30px!important;
    background:radial-gradient(circle at 50% 12%, rgba(255,255,255,.99), rgba(255,255,255,.66) 40%, rgba(241,245,249,.92) 78%), linear-gradient(180deg,#f8fafc,#edf3f8)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    box-shadow:inset 0 0 0 1px rgba(226,235,244,.72)!important;
}

.sk-shop-frontend-preview-stage:after{
    content:"";
    position:absolute;
    left:14%;
    right:14%;
    bottom:32px;
    height:36px;
    border-radius:999px;
    background:radial-gradient(ellipse at center, rgba(15,39,72,.14), transparent 68%);
    filter:blur(5px);
    pointer-events:none;
}

.sk-shop-frontend-preview-placeholder{
    padding:32px!important;
    text-align:center!important;
    color:#64748b!important;
    font-weight:900!important;
    z-index:2!important;
}

.sk-shop-frontend-preview-image{
    display:block;
    max-width:100%!important;
    width:auto!important;
    height:auto!important;
    max-height:560px!important;
    object-fit:contain!important;
    transform:scale(1.045);
    transform-origin:center center;
    filter:drop-shadow(0 20px 34px rgba(15,39,72,.11));
    position:relative!important;
    z-index:2!important;
}

.sk-shop-frontend-preview-image.is-next{
    position:absolute!important;
    z-index:3!important;
    opacity:0;
    display:none;
}

.sk-shop-frontend-preview-image.is-current{
    position:relative!important;
    z-index:2!important;
}

.sk-shop-frontend-preview-badge{
    position:absolute!important;
    top:18px!important;
    left:18px!important;
    z-index:5!important;
    background:#0f2748!important;
    color:#fff!important;
    border-radius:999px!important;
    padding:8px 14px!important;
    font-size:12px!important;
    font-weight:950!important;
    letter-spacing:.01em!important;
    box-shadow:0 10px 24px rgba(15,39,72,.18)!important;
}

.sk-shop-frontend-preview-status{
    min-height:18px!important;
    margin-top:12px!important;
    color:#708198!important;
    font-weight:800!important;
    font-size:12px!important;
}

.sk-shop-frontend-preview-spinner{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    width:24px!important;
    height:24px!important;
    border:3px solid rgba(15,39,72,.14)!important;
    border-top-color:#0f2748!important;
    border-radius:50%!important;
    animation:skShopFrontendPreviewSpin .7s linear infinite!important;
    z-index:6!important;
}

.sk-shop-frontend-preview-gallery.is-loading .sk-shop-frontend-preview-stage{
    opacity:.985!important;
}

.sk-shop-frontend-old-position-control{
    display:none!important;
}

.sk-shop-frontend-position-control{
    margin:26px 0 0!important;
    padding:24px 0 0!important;
    border-top:1px solid #dfe7ef!important;
}

.sk-shop-frontend-position-label{
    display:block!important;
    margin-bottom:12px!important;
    color:#0f243d!important;
    font-size:15px!important;
    font-weight:950!important;
}

.sk-shop-frontend-position-options{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
}

.sk-shop-frontend-position-option{
    min-height:62px!important;
    border:2px solid #dfe7ef!important;
    border-radius:18px!important;
    background:#fff!important;
    color:#0f243d!important;
    font-size:16px!important;
    font-weight:950!important;
    cursor:pointer!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}

.sk-shop-frontend-position-option:hover{
    transform:translateY(-1px)!important;
    border-color:#0f243d!important;
}

.sk-shop-frontend-position-option.is-active{
    background:#0f243d!important;
    border-color:#0f243d!important;
    color:#fff!important;
    box-shadow:0 12px 24px rgba(15,36,61,.14)!important;
}

@keyframes skShopFrontendPreviewSpin{
    to{ transform:rotate(360deg); }
}

@media(max-width:1100px){
    body.sk-shop-frontend-preview-active .sk-shop-frontend-preview-gallery,
    body.sk-shop-frontend-preview-active .woocommerce-product-gallery.sk-shop-frontend-preview-gallery,
    body.sk-shop-frontend-preview-active .woocommerce div.product div.images.sk-shop-frontend-preview-gallery{
        max-width:none!important;
    }
}

@media(max-width:900px){
    .sk-shop-frontend-preview-card{
        min-height:470px!important;
        padding:20px!important;
        border-radius:26px!important;
    }

    .sk-shop-frontend-preview-stage{
        min-height:410px!important;
        border-radius:22px!important;
    }

    .sk-shop-frontend-preview-image{
        max-height:405px!important;
        transform:scale(1.025);
    }
}

@media(max-width:560px){
    .sk-shop-frontend-preview-card{
        padding:16px!important;
        min-height:420px!important;
        border-radius:22px!important;
    }

    .sk-shop-frontend-preview-title{
        font-size:25px!important;
        margin-bottom:14px!important;
    }

    .sk-shop-frontend-preview-stage{
        min-height:355px!important;
        border-radius:18px!important;
    }

    .sk-shop-frontend-preview-image{
        max-height:350px!important;
        transform:scale(1.02);
    }

    .sk-shop-frontend-position-options{
        grid-template-columns:1fr!important;
    }
}


/* D1.5.5 - Let the hero preview use the available left column width. */
@media (min-width:1200px){
    body.sk-shop-frontend-preview-active .sk-shop-frontend-preview-gallery,
    body.sk-shop-frontend-preview-active .woocommerce-product-gallery.sk-shop-frontend-preview-gallery,
    body.sk-shop-frontend-preview-active .woocommerce div.product div.images.sk-shop-frontend-preview-gallery{
        max-width:none!important;
    }

    .sk-shop-frontend-preview-card{
        min-height:clamp(650px,43vw,780px)!important;
        padding:clamp(28px,2.3vw,42px)!important;
    }

    .sk-shop-frontend-preview-stage{
        min-height:clamp(545px,37vw,660px)!important;
    }

    .sk-shop-frontend-preview-image{
        max-height:clamp(535px,36vw,650px)!important;
    }
}