/* ==========================================================
   Kasi Mattress
   Product Gallery
   File: assets/css/pages/product-gallery.css
   Version: 5.0.0
   ========================================================== */

.km-product-gallery{width:100%}

.km-gallery-frame{
    position:relative;
    width:100%;
    min-height:clamp(360px,48vw,620px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.km-gallery-main-image{
    display:block;
    width:100%;
    height:100%;
    max-height:620px;
    aspect-ratio:1/1;
    object-fit:contain;
    padding:clamp(20px,4vw,52px);
    transition:opacity .2s ease,transform .3s ease;
}

.km-gallery-frame:hover .km-gallery-main-image{transform:scale(1.01)}

.km-gallery-badge{
    position:absolute;
    top:20px;
    left:20px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    padding:8px 13px;
    border-radius:999px;
    background:var(--accent);
    color:var(--white);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.02em;
    box-shadow:var(--shadow-sm);
}

.km-gallery-nav{
    position:absolute;
    top:50%;
    z-index:4;
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-50%);
    transition:background .2s ease,color .2s ease;
}

.km-gallery-nav:hover{background:var(--primary);color:var(--white)}
.km-gallery-prev{left:18px}
.km-gallery-next{right:18px}

.km-gallery-nav:focus-visible,
.km-gallery-thumb:focus-visible{
    outline:3px solid var(--accent-light);
    outline-offset:3px;
}

.km-gallery-thumbnails{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(76px,1fr));
    gap:12px;
    margin-top:16px;
}

.km-gallery-thumb{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    padding:5px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--white);
    cursor:pointer;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.km-gallery-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:calc(var(--radius-md) - 4px);
}

.km-gallery-thumb:hover{
    border-color:var(--primary-light);
    transform:translateY(-1px);
}

.km-gallery-thumb.active{
    border:2px solid var(--accent);
    padding:4px;
    box-shadow:0 0 0 2px rgba(244,163,0,.12);
}

@media (max-width:768px){
    .km-gallery-frame{
        min-height:clamp(300px,78vw,520px);
        border-radius:var(--radius-md);
    }

    .km-gallery-main-image{padding:22px}
    .km-gallery-badge{top:14px;left:14px;padding:7px 11px}
    .km-gallery-nav{width:38px;height:38px}
    .km-gallery-prev{left:12px}
    .km-gallery-next{right:12px}
    .km-gallery-thumbnails{
        grid-template-columns:repeat(4,1fr);
        gap:8px;
        margin-top:12px;
    }
}

@media (max-width:576px){
    .km-gallery-frame{min-height:calc(100vw - 32px)}
    .km-gallery-main-image{padding:16px}
    .km-gallery-thumbnails{grid-template-columns:repeat(4,1fr)}
}

@media (prefers-reduced-motion:reduce){
    .km-gallery-main-image,.km-gallery-thumb,.km-gallery-nav{transition:none}
}