/*
 * Used iPhone Store — Professional Blocksy/Flexy Product Gallery
 * Compatible with the actual markup:
 * .woocommerce-product-gallery
 * .ct-product-gallery-container
 * .flexy-container / .flexy-view / .flexy-items / .flexy-item
 * .flexy-pills[data-type="thumbs"]
 */

/* =========================================================
   GALLERY CARD
   ========================================================= */

.product-gallery-column{
    position:relative;
    padding:14px;
    border:1px solid rgba(15,23,42,.09);
    border-radius:26px;
    background:
        radial-gradient(circle at 20% 0%,rgba(255,255,255,.95),transparent 38%),
        linear-gradient(145deg,#fff 0%,#f8fafc 100%);
    box-shadow:
        0 18px 45px rgba(15,23,42,.08),
        0 2px 8px rgba(15,23,42,.04),
        inset 0 1px 0 rgba(255,255,255,.95);
    overflow:hidden;
    transition:box-shadow .3s ease,border-color .3s ease;
}

.product-gallery-column:hover{
    border-color:rgba(15,23,42,.14);
    box-shadow:
        0 22px 55px rgba(15,23,42,.11),
        0 3px 10px rgba(15,23,42,.04),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* =========================================================
   MAIN IMAGE
   ========================================================= */

.product-gallery-column .woocommerce-product-gallery,
.product-gallery-column .ct-product-gallery-container,
.product-gallery-column .flexy-container{
    width:100%;
}

.product-gallery-column .woocommerce-product-gallery{
    border-radius:20px;
    background:transparent;
}

.product-gallery-column .flexy-view{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    background:#f8fafc;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.035);
}

.product-gallery-column .flexy-items{
    border-radius:20px;
}

.product-gallery-column .flexy-item{
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-gallery-column .flexy-item .ct-media-container{
    display:block;
    width:100%;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
}

.product-gallery-column .flexy-item .ct-media-container img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    border-radius:16px;
    transition:
        transform .45s cubic-bezier(.2,.75,.25,1),
        filter .35s ease;
}

.product-gallery-column .flexy-item:hover .ct-media-container img{
    transform:scale(1.018);
}

/* Subtle fade for non-active slides if Flexy exposes visibility classes */
.product-gallery-column .flexy-item:not(.flexy-item-is-visible) .ct-media-container img{
    filter:saturate(.96);
}

/* =========================================================
   NAVIGATION ARROWS
   ========================================================= */

.product-gallery-column .flexy-arrow-prev,
.product-gallery-column .flexy-arrow-next{
    z-index:10;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(15,23,42,.09);
    border-radius:50%;
    background:rgba(255,255,255,.88);
    box-shadow:0 8px 20px rgba(15,23,42,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:
        transform .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}

.product-gallery-column .flexy-arrow-prev:hover,
.product-gallery-column .flexy-arrow-next:hover{
    transform:scale(1.06);
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.16);
}

.product-gallery-column .flexy-arrow-prev:active,
.product-gallery-column .flexy-arrow-next:active{
    transform:scale(.96);
}

/* =========================================================
   PROFESSIONAL THUMBNAIL RAIL
   ========================================================= */

.product-gallery-column .flexy-pills[data-type="thumbs"]{
    display:block;
    width:100%;
    height:auto;
    margin:14px 0 0;
    padding:0 2px 3px;
    overflow:hidden;
}

.product-gallery-column .flexy-pills[data-type="thumbs"] ol{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:10px;
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:2px 1px 4px;
    list-style:none;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.product-gallery-column .flexy-pills[data-type="thumbs"] ol::-webkit-scrollbar{
    display:none;
}

/* Thumbnail item */
.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li{
    position:relative;
    flex:0 0 auto;
    float:none;
    width:auto;
    height:auto !important;
    min-width:0;
    min-height:0 !important;
    margin:0;
    padding:3px;
    box-sizing:border-box;
    border:1px solid rgba(15,23,42,.10);
    border-radius:13px;
    background:#fff;
    overflow:hidden;
    line-height:0;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(15,23,42,.045);
    transform:translateY(0);
    transition:
        transform .22s cubic-bezier(.2,.75,.25,1),
        border-color .22s ease,
        box-shadow .22s ease,
        background-color .22s ease;
}

.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li:hover{
    transform:translateY(-2px);
    border-color:rgba(15,23,42,.22);
    box-shadow:
        0 8px 18px rgba(15,23,42,.10),
        0 2px 5px rgba(15,23,42,.05);
}

/* Active thumbnail */
.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active{
    border-color:rgba(15,23,42,.72);
    background:#fff;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px rgba(15,23,42,.78),
        0 8px 22px rgba(15,23,42,.14);
    transform:translateY(-1px);
}

/* Active indicator */
.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:22px;
    height:3px;
    border-radius:999px;
    background:currentColor;
    transform:translateX(-50%);
    opacity:.9;
    pointer-events:none;
}

/* Actual thumbnail wrapper */
.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li > .ct-media-container{
    position:relative;
    display:block;
    width:88px !important;
    height:88px !important;
    min-width:88px;
    min-height:88px;
    max-width:88px;
    max-height:88px;
    aspect-ratio:1 / 1;
    margin:0;
    padding:0;
    box-sizing:border-box;
    border-radius:10px;
    overflow:hidden;
    background:#f8fafc;
    line-height:0;
}

/* Thumbnail image */
.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li > .ct-media-container img{
    display:block;
    width:88px !important;
    height:88px !important;
    min-width:88px;
    min-height:88px;
    max-width:88px;
    max-height:88px;
    aspect-ratio:1 / 1;
    margin:0;
    padding:0;
    box-sizing:border-box;
    object-fit:cover;
    border-radius:10px;
    transition:
        transform .3s cubic-bezier(.2,.75,.25,1),
        filter .25s ease;
}

.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li:hover img{
    transform:scale(1.055);
}

.product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active img{
    transform:scale(1.025);
}

/* Prevent generic theme image rules from stretching thumbnails */
.product-gallery-column .flexy-pills[data-type="thumbs"] img{
    vertical-align:top;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .product-gallery-column{
        padding:8px;
        border-radius:19px;
    }

    .product-gallery-column .flexy-view,
    .product-gallery-column .flexy-items,
    .product-gallery-column .flexy-item .ct-media-container{
        border-radius:14px;
    }

    .product-gallery-column .flexy-item .ct-media-container img{
        border-radius:11px;
    }

    .product-gallery-column .flexy-arrow-prev,
    .product-gallery-column .flexy-arrow-next{
        width:34px;
        height:34px;
    }

    .product-gallery-column .flexy-pills[data-type="thumbs"]{
        margin-top:9px;
        padding-left:1px;
        padding-right:1px;
    }

    .product-gallery-column .flexy-pills[data-type="thumbs"] ol{
        gap:7px;
        padding-top:2px;
        padding-bottom:4px;
    }

    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li{
        padding:2px;
        border-radius:10px;
    }

    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li > .ct-media-container,
    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li > .ct-media-container img{
        width:68px !important;
        height:68px !important;
        min-width:68px;
        min-height:68px;
        max-width:68px;
        max-height:68px;
        border-radius:7px;
    }

    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active{
        box-shadow:
            0 0 0 1px #fff,
            0 0 0 3px rgba(15,23,42,.78),
            0 6px 16px rgba(15,23,42,.13);
    }

    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active::after{
        bottom:2px;
        width:18px;
        height:2px;
    }
}

/* =========================================================
   DARK MODE
   ========================================================= */

[data-theme="dark"] .product-gallery-column,
.dark-mode .product-gallery-column{
    border-color:rgba(148,163,184,.18);
    background:
        radial-gradient(circle at 20% 0%,rgba(255,255,255,.035),transparent 38%),
        linear-gradient(145deg,#111827 0%,#0f172a 100%);
    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        0 2px 8px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.04);
}

[data-theme="dark"] .product-gallery-column .flexy-view,
[data-theme="dark"] .product-gallery-column .flexy-item .ct-media-container,
.dark-mode .product-gallery-column .flexy-view,
.dark-mode .product-gallery-column .flexy-item .ct-media-container{
    background:#111827;
}

[data-theme="dark"] .product-gallery-column .flexy-arrow-prev,
[data-theme="dark"] .product-gallery-column .flexy-arrow-next,
.dark-mode .product-gallery-column .flexy-arrow-prev,
.dark-mode .product-gallery-column .flexy-arrow-next{
    border-color:rgba(148,163,184,.18);
    background:rgba(15,23,42,.82);
    color:#fff;
}

[data-theme="dark"] .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li,
.dark-mode .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li{
    border-color:rgba(148,163,184,.18);
    background:#111827;
}

[data-theme="dark"] .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active,
.dark-mode .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li.active{
    border-color:rgba(255,255,255,.65);
    box-shadow:
        0 0 0 2px #111827,
        0 0 0 4px rgba(255,255,255,.7),
        0 8px 22px rgba(0,0,0,.25);
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
    .product-gallery-column,
    .product-gallery-column .flexy-item .ct-media-container img,
    .product-gallery-column .flexy-arrow-prev,
    .product-gallery-column .flexy-arrow-next,
    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li,
    .product-gallery-column .flexy-pills[data-type="thumbs"] ol > li img{
        transition:none !important;
    }
}