/**
 * Product Gallery — Slick Slider CSS
 * File: css/product-gallery.css
 * @package SwiftCart Child
 */

/* ── Variables ─────────────────────────────── */
:root {
    --sc-gold:      #c13124;
    --sc-red:       #c13124;
    --sc-dark:      #1a1209;
    --sc-border:    #e2d9cc;
    --sc-muted:      #6b5e4a;
    --sc-white:      #ffffff;
    --sc-radius:     8px;
    --sc-ease:       0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --sc-shadow:     0 4px 20px rgba(26,18,9,.10);
    --sc-shadow-lg:  0 20px 60px rgba(0,0,0,.55);
    --sc-thumb-w:    92px;   /* thumbnail width */
    --sc-thumb-gap:  8px;    /* gap between thumbs */
}

/* ════════════════════════════════════════════
   GALLERY OUTER WRAPPER
════════════════════════════════════════════ */
.sc-gallery-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    max-width: 640px;
    position: relative;
    flex-direction: column;
}
/* Thumbnail strip wrapper — arrows overlay the rail */
.sc-thumb-wrap {
    position: relative;
    width: 100%;
}

/* Scrollable thumbnail rail — max 6 thumbs visible */
#scThumbNav {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* 6 × thumb-width + 5 gaps */
    width: calc(6 * var(--sc-thumb-w) + 5 * 19px);
    max-width: 100%;
    padding: 10px 0;
    margin: -10px 0;
}

/* Arrow buttons — absolute, overlay each end of the rail */
.sc-tnav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--sc-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--sc-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: background var(--sc-ease), color var(--sc-ease);
    padding: 0;
}
.sc-tnav-btn:hover {
    background: var(--sc-gold);
    color: var(--sc-white);
    border-color: var(--sc-gold);
}
.sc-tnav-prev { left: 2px; top:50%; margin-top: -4px; }
.sc-tnav-next { right: 2px;top:50%; margin-top: -4px !important;}
.sc-tnav-btn[hidden] { display: none; }
/* PA P3: 44x44 touch target for the 26px thumbnail arrows (same visual size): a transparent ring around the circle
   (10px each side from the padding box, the 1px border included). Touch screens only, so a mouse click next to the circle still reaches the thumbnail under it. */
@media (pointer: coarse) {
    .sc-tnav-btn::after {
        content: '';
        position: absolute;
        inset: -10px;
    }

    /* The arrows sit 2px from the rail's ends and the column clips (overflow hidden), so the ring grows inward there. */
    .sc-tnav-prev::after {
        left: -2px;
        right: -18px;
    }

    .sc-tnav-next::after {
        left: -18px;
        right: -2px;
    }
}

.sc-tnav-btn:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
/* ════════════════════════════════════════════
   THUMBNAIL COLUMN  (left / bottom on mobile)
════════════════════════════════════════════ */
.sc-thumb-col {
    width: 100%;
    flex-shrink: 0;
    /* height clamped to match main image — set by JS */
    overflow: hidden;
    position: relative;
}

/* ── Slick overrides for thumb rail ── */
.sc-thumb-col .sc-thumb-slider {
    /* Slick sets display:block — we let it manage height */
}

/* Individual thumb slide */
.sc-thumb-slide {
    position: relative;
    flex: 0 0 var(--sc-thumb-w);   /* fixed width, never shrink */
    width: var(--sc-thumb-w);
    height: 95px;
    border: 2px solid var(--sc-border);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: var(--sc-white);
    transition: border-color var(--sc-ease), transform var(--sc-ease), box-shadow var(--sc-ease);
    outline: none;
    margin-bottom: var(--sc-thumb-gap);  /* vertical gap */
}
.sc-thumb-slide:last-child { margin-bottom: 0; }

.sc-thumb-slide:hover,
.sc-thumb-slide:focus-visible {
    border-color: var(--sc-gold);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(200,151,58,.3);
    z-index: 2;
}
.sc-thumb-slide.is-active,
.sc-thumb-slide.slick-current {
    border-color: var(--sc-red);
    box-shadow: 0 0 0 3px rgba(181,39,30,.15);
}
.sc-thumb-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform var(--sc-ease);
}
.sc-thumb-slide:hover img { transform: scale(1.08); }

/* Video overlay on thumb */
.sc-thumb-slide.is-video::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    border-radius: 4px;
    pointer-events: none;
}
.sc-thumb-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem;
    z-index: 2; pointer-events: none;
}

/* ── Thumb slider nav arrows ── */
.sc-tnav-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--sc-thumb-w) !important;
    height: 24px;
    background: var(--sc-white);
    border: 1px solid var(--sc-border);
    border-radius: 5px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--sc-dark);
    transition: background var(--sc-ease), color var(--sc-ease);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    /* Slick resets */
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    z-index: 1;
    margin: 0 auto;
    line-height: 1;
    padding: 0;
}
.sc-tnav-arrow:hover {
    background: var(--sc-gold);
    color: var(--sc-white);
    border-color: var(--sc-gold);
}
.sc-tnav-arrow.slick-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
.sc-tnav-prev { margin-bottom: 6px; }
.sc-tnav-next { margin-top: 6px; }
.sc-tnav-arrow {
    color: #1e1e1e00 !important;
}
.sc-tnav-arrow:after {
       content: '\f078';
    color: #1c1c1c;
    font-family: "fontawesome";
    left: -4px;
    position: relative;
    line-height: 0;
    height: 0;
    top: 0px;
    font-size: 18px;
}
.sc-tnav-arrow.sc-tnav-prev:after {
      content: '\f077';
    color: #1c1c1c;
    font-family: "fontawesome";
    left: -4px;
    position: relative;
    line-height: 0;
    height: 0;
    top: 2px;
    font-size: 18px;
    transform: rotate(0deg);
}
.sc-tnav-arrow:hover:after{
    color:#fff;
}
/* ════════════════════════════════════════════
   MAIN SLIDER COLUMN
════════════════════════════════════════════ */
.sc-main-col {
    flex: 1;
    position: relative;
    min-width: 0;
    /* .sc-gallery-wrap is a column flexbox with align-items:flex-start, so before Slick has set
       its own widths this column shrank to ~1px and the gallery grew to its real size after the
       JS ran (the shift of the thumbnails, zoom button and short description below it). Full
       width from the first paint; the phone rule below always had it. */
    width: 100%;
}

/* ── Slick main slider ── */
.sc-main-slider {
    border-radius: var(--sc-radius);
    overflow: hidden;
    background: var(--sc-white);
    box-shadow: var(--sc-shadow);
}

/* Individual main slide */
.sc-main-slide {
    position: relative;
    background: var(--sc-white);
    /* force square aspect */
    aspect-ratio: 1;
    overflow: hidden;
}

/* Reserve the final layout before Slick runs: server-rendered markup lists
   every slide as a plain stacked block, which would make the pre-JS gallery
   N slides tall. Show only the first (Slick's own single-slide box once
   .slick-initialized lands) so the box never resizes and nothing below the
   gallery jumps -- this is the fix for the CLS caused by Slick init. */
#scMainSlider:not(.slick-initialized) .sc-main-slide {
    display: none;
}
#scMainSlider:not(.slick-initialized) .sc-main-slide:first-child {
    display: block;
}

.woocommerce-page .sc-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block !important;
    background: var(--sc-white);
}

/* ── Main slider arrows ── */
.sc-main-arrow {
   position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, .88) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: .2;
    color: var(--sc-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    z-index: 10 !important;
    opacity: 0;
    transition: opacity var(--sc-ease), background var(--sc-ease);
    padding: 18px 17px 20px 16px;
}
.sc-main-slider:hover .sc-main-arrow { opacity: 1; }
.sc-main-arrow:hover { background: var(--sc-gold) !important; color: var(--sc-white); }
.sc-main-arrow.slick-disabled { opacity: 0 !important; pointer-events: none; }
.sc-main-prev { left: 10px !important;  right: auto !important; }
.sc-main-next { right: 10px !important; left: auto !important; }

/* ── Sale badge ── */
.sc-badge-sale {
    position: absolute;
    top: 12px; left: calc(var(--sc-thumb-w) + 12px + 12px);
    background: var(--sc-red); color: #fff;
    font-size: .7rem; font-weight: 700;
    padding: 4px 10px; border-radius: 3px;
    letter-spacing: 1px; text-transform: uppercase;
    z-index: 20; pointer-events: none;
}

/* ── Zoom button ── */
.sc-zoom-btn {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,.88);
    border: none; border-radius: 50%;
    width: 36px; height: 36px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 20;
    transition: background var(--sc-ease), transform var(--sc-ease);
    color: var(--sc-dark);
}
.sc-zoom-btn:hover { background: var(--sc-gold); color: var(--sc-white); transform: scale(1.1); }

/* ── Video overlay on main slide ── */
.sc-video-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,.04);
    transition: background var(--sc-ease);
    z-index: 5;
}
.sc-video-overlay:hover { background: rgba(0,0,0,.14); }
.sc-play-circle {
    width: 72px; height: 72px;
    background: rgba(0,0,0,.52);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    transition: background var(--sc-ease), transform var(--sc-ease);
}
.sc-video-overlay:hover .sc-play-circle {
    background: var(--sc-red);
    transform: scale(1.1);
}

/* ════════════════════════════════════════════
   VIDEO MODAL
════════════════════════════════════════════ */
.sc-video-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.87);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .3s ease;
}
.sc-video-modal:not([hidden]) { opacity: 1; }
.sc-video-modal[hidden]       { display: none !important; }

.sc-video-modal-inner {
    position: relative;
    width: min(880px, 94vw);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--sc-shadow-lg);
    transform: scale(.95);
    transition: transform .3s ease;
}
.sc-video-modal:not([hidden]) .sc-video-modal-inner { transform: scale(1); }

/* ════════════════════════════════════════════
   ZOOM MODAL
════════════════════════════════════════════ */
.sc-zoom-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.93);
    z-index: 999998;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
}
.sc-zoom-modal[hidden] { display: none !important; }
.sc-zoom-modal img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    object-fit: contain;
    pointer-events: none;
    box-shadow: var(--sc-shadow-lg);
}

/* ── Shared modal close button ── */
.sc-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(255,255,255,.14);
    border: none; color: #fff;
    font-size: 1rem; cursor: pointer;
    border-radius: 50%;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: background .2s;
}
.sc-modal-close:hover { background: var(--sc-red); }
.sc-zoom-modal .sc-modal-close { position: fixed; top: 16px; right: 20px; }

/* custom style */
.product-single-gallery-main .onsale {
    left: 20px !important;
    top: 20px !important;
}
.woocommerce .woocommerce-message a {
    color: #c13124;
    
}
span.posted_in {
    font-weight: 600;
}
span.posted_in a, span.posted_in span {
    font-weight: 400;
}
/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   Thumb slider moves below main, horizontal
════════════════════════════════════════════ */
@media (max-width: 768px) {
   
    
        span#variation-sale-badge {
    left:  20px !important;
    top: 27px !important;
}


    /* On mobile thumbs are horizontal — remove vertical margin, add horizontal */
    /* .sc-thumb-slide {
        margin-bottom: 0;
        margin-right: var(--sc-thumb-gap) !important;
        height: 60px;
        width: 60px !important;
    } */
    .sc-thumb-slide:last-child { margin-right: 0 !important; }

    /* Mobile thumb arrows point left/right */
    /* .sc-tnav-arrow {
        width: 26px !important;
        height: 60px;
    } */
    /* .sc-tnav-prev { margin-bottom: 0; margin-right: 4px !important; }
    .sc-tnav-next { margin-top: 0;    margin-left: 4px !important; } */

    .sc-badge-sale {
        left: 12px; /* reset — no thumb col on left on mobile */
    }

    .sc-main-arrow { opacity: 1 !important; } /* always show on touch */
    .product-single-gallery-main .onsale {
        left: 20px !important;
        top: 20px !important;
    }
    /* .scgv-slider-for {

    max-height: 470px;
} */
}

@media (max-width: 480px) {
     .sc-gallery-wrap {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 30px;
    }
    div#scMainCol{
            width:100%;
        }
    .sc-thumb-col {
        width: 100%;
      display:none;
    }
    :root { --sc-thumb-w: 60px; }
    
    .pt-80 {
        padding-top: 40px;
    }
  .product__details-title {
        font-size: 23px !important;
        margin-top: 25px;
    }
    table.variations tr th {
            border: none;
        }
        table.variations tr {
            display: flex;
            gap: 10px;
        }
        table.variations tr td {
            border: none;
            padding: 0px 0px;
            display: flex;
            vertical-align: middle;
            align-items: center;
            gap: 10px;
        }
        .vs-shop-product-grid .swiftcart-product-main {
            position: unset !important;
        }
        .vs-shop-product-grid {
            height: auto !important;
        }
        .sc-thumb-slide {
            width: 50px;
            height: 50px;
        }
        .sc-thumb-wrap {
            width: 100%;
        }
}