/**
 * TP Gallery PRO - Frontend Styles
 */

/* ==========================================================================
   Flipper Mode
   ========================================================================== */

.tp-loop-flipper {
    position: relative;
    overflow: hidden;
}

.tp-loop-flipper img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.35s ease;
}

.tp-loop-flipper .tp-flipper-second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.tp-loop-flipper.has-second-image:hover .tp-flipper-main {
    opacity: 0;
}

.tp-loop-flipper.has-second-image:hover .tp-flipper-second {
    opacity: 1;
}

/* ==========================================================================
   Slider Mode
   ========================================================================== */

.tp-loop-slider {
    position: relative;
    overflow: hidden;
}

.tp-loop-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-loop-slider .tp-slider-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Navigation Arrows */
.tp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: all 0.25s ease;
    background: #fff;
    color: #333;
}

.tp-loop-slider:hover .tp-slider-arrow {
    opacity: 1;
}

.tp-slider-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.tp-slider-arrow svg {
    display: block;
}

/* Arrow Positions */
.tp-loop-slider.arrows-inside .tp-slider-prev {
    left: 8px;
}

.tp-loop-slider.arrows-inside .tp-slider-next {
    right: 8px;
}

.tp-loop-slider.arrows-outside .tp-slider-prev {
    left: -16px;
}

.tp-loop-slider.arrows-outside .tp-slider-next {
    right: -16px;
}

/* Ensure swiper slides don't have unwanted styles */
.tp-loop-slider .swiper-wrapper {
    align-items: stretch;
}

.tp-loop-slider .swiper-slide img {
    object-fit: cover;
}

/* Hide arrows when only one image */
.tp-loop-slider .swiper-button-lock {
    display: none;
}

/* ==========================================================================
   Theme Compatibility
   ========================================================================== */

/* Ensure our wrapper takes full width */
.woocommerce ul.products li.product .tp-loop-flipper,
.woocommerce ul.products li.product .tp-loop-slider {
    width: 100%;
}

/* Fix for some themes that set absolute positioning on product images */
.woocommerce ul.products li.product .tp-loop-flipper img.tp-flipper-main,
.woocommerce ul.products li.product .tp-loop-slider .tp-slider-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

/* Elementor compatibility */
.elementor-widget-woocommerce-products .tp-loop-flipper,
.elementor-widget-woocommerce-products .tp-loop-slider {
    width: 100%;
}

/* Fix z-index for arrows in various themes */
.tp-loop-slider .tp-slider-arrow {
    z-index: 5;
}

/* Ensure proper image display in flex containers */
.tp-loop-flipper img,
.tp-loop-slider img {
    max-width: 100%;
    flex-shrink: 0;
}

/* Touch device support - always show arrows */
@media (hover: none) {
    .tp-slider-arrow {
        opacity: 1;
    }
}

/* ==========================================================================
   WooCommerce Blocks Compatibility
   ========================================================================== */

/* Block grid product image wrapper */
.wc-block-grid__product .tp-loop-flipper,
.wc-block-grid__product .tp-loop-slider,
.wc-block-product .tp-loop-flipper,
.wc-block-product .tp-loop-slider {
    width: 100%;
}

/* Ensure flipper/slider takes proper space in block layouts */
.tp-loop-flipper.wc-block-components-product-image,
.tp-loop-slider.wc-block-components-product-image {
    display: block;
    width: 100%;
}

.tp-loop-flipper.wc-block-components-product-image a,
.tp-loop-slider.wc-block-components-product-image a {
    display: block;
}

/* Slider link styling */
.tp-slide-link {
    display: block;
}

.tp-slide-link img {
    display: block;
    width: 100%;
}

/* Related Products Block Support */
.wp-block-woocommerce-related-products .tp-loop-flipper,
.wp-block-woocommerce-related-products .tp-loop-slider,
.wc-block-components-product-list .tp-loop-flipper,
.wc-block-components-product-list .tp-loop-slider {
    width: 100%;
}

/* ==========================================================================
   PRODUCT PAGE GALLERY
   ========================================================================== */

.tp-product-gallery {
    width: 100%;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Classic Theme Compatibility (Non-Block Themes)

   In classic WooCommerce themes, the product page uses floats/flex to position
   the gallery on the left and the summary (.entry-summary) on the right.
   We need to mimic the .woocommerce-product-gallery behavior.
   ========================================================================== */

/* When gallery is inside a product container (classic theme) */
.product .tp-product-gallery {
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 2rem;
}

/* Clear floats after the summary */
.product .summary.entry-summary {
    float: right;
    width: 48%;
}

/* Clearfix for the product container */
.product::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure tabs and related products are below both */
.product .woocommerce-tabs,
.product .related.products,
.product .upsells.products {
    clear: both;
    width: 100%;
    float: none;
}

/* Responsive - stack on smaller screens */
@media (max-width: 768px) {
    .product .tp-product-gallery,
    .product .summary.entry-summary {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

/* ==========================================================================
   Block Theme Compatibility

   In block themes, the layout is controlled by blocks, so we don't need floats.
   The gallery replaces the product-image-gallery block and takes full width
   within its block container.
   ========================================================================== */

/* Reset floats when inside block editor context */
.wp-block-woocommerce-product-image-gallery .tp-product-gallery,
.wc-block-components-product-gallery .tp-product-gallery,
.wp-block-group .tp-product-gallery {
    float: none;
    width: 100%;
    margin-right: 0;
}

/* Gallery Wrapper - Shared */
.tp-gallery-wrapper {
    display: flex;
    width: 100%;
}

/* ==========================================================================
   Thumbs Bottom Layout
   ========================================================================== */

.tp-gallery-wrapper.tp-thumbs-bottom {
    flex-direction: column;
    gap: 15px;
}

.tp-thumbs-bottom .tp-main-image-wrapper {
    width: 100%;
}

.tp-thumbs-bottom .tp-thumbs-wrapper {
    position: relative;
    width: 100%;
}

.tp-thumbs-bottom .tp-thumbs-swiper {
    padding: 0 40px;
}

.tp-thumbs-bottom .tp-thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #f5f5f5;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.tp-thumbs-bottom .tp-thumb-nav:hover {
    background: #e0e0e0;
}

.tp-thumbs-bottom .tp-thumb-prev {
    left: 0;
}

.tp-thumbs-bottom .tp-thumb-next {
    right: 0;
}

/* ==========================================================================
   Thumbs Left Layout
   ========================================================================== */

.tp-gallery-wrapper.tp-thumbs-left {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
}

.tp-thumbs-left .tp-main-image-wrapper {
    flex: 1;
    order: 2;
    min-width: 0;
}

.tp-thumbs-left .tp-thumbs-wrapper {
    width: 100px;
    flex-shrink: 0;
    order: 1;
    position: relative;
}

/* For vertical thumbs - use Swiper properly */
.tp-thumbs-left .tp-thumbs-swiper {
    height: calc((var(--thumbs-count, 4) * 100px) + ((var(--thumbs-count, 4) - 1) * var(--thumbs-gap, 10px)));
    overflow: hidden;
    padding: 0 4px 0 0;
}

.tp-thumbs-left .tp-thumbs-swiper .swiper-slide {
    width: 100% !important;
    height: auto !important;
}

.tp-thumbs-left .tp-thumb {
    width: 100%;
    aspect-ratio: 1;
}

.tp-thumbs-left .tp-thumb-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #f5f5f5;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.tp-thumbs-left .tp-thumb-nav:hover {
    background: #e0e0e0;
}

.tp-thumbs-left .tp-thumb-prev {
    top: -35px;
}

.tp-thumbs-left .tp-thumb-prev .dashicons {
    transform: rotate(90deg);
}

.tp-thumbs-left .tp-thumb-next {
    bottom: -35px;
}

.tp-thumbs-left .tp-thumb-next .dashicons {
    transform: rotate(90deg);
}

/* ==========================================================================
   Thumbs Right Layout
   ========================================================================== */

.tp-gallery-wrapper.tp-thumbs-right {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
}

.tp-thumbs-right .tp-main-image-wrapper {
    flex: 1;
    order: 1;
    min-width: 0;
}

.tp-thumbs-right .tp-thumbs-wrapper {
    width: 100px;
    flex-shrink: 0;
    order: 2;
    position: relative;
}

.tp-thumbs-right .tp-thumbs-swiper {
    height: calc((var(--thumbs-count, 4) * 100px) + ((var(--thumbs-count, 4) - 1) * var(--thumbs-gap, 10px)));
    overflow: hidden;
    padding: 0 4px 0 0;
}

.tp-thumbs-right .tp-thumbs-swiper .swiper-slide {
    width: 100% !important;
    height: auto !important;
}

.tp-thumbs-right .tp-thumb {
    width: 100%;
    aspect-ratio: 1;
}

.tp-thumbs-right .tp-thumb-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #f5f5f5;
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.tp-thumbs-right .tp-thumb-nav:hover {
    background: #e0e0e0;
}

.tp-thumbs-right .tp-thumb-prev {
    top: -35px;
}

.tp-thumbs-right .tp-thumb-prev .dashicons {
    transform: rotate(90deg);
}

.tp-thumbs-right .tp-thumb-next {
    bottom: -35px;
}

.tp-thumbs-right .tp-thumb-next .dashicons {
    transform: rotate(90deg);
}

/* ==========================================================================
   Thumbs Top Layout
   ========================================================================== */

.tp-gallery-wrapper.tp-thumbs-top {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tp-thumbs-top .tp-main-image-wrapper {
    order: 2;
}

.tp-thumbs-top .tp-thumbs-wrapper {
    order: 1;
    position: relative;
}

.tp-thumbs-top .tp-thumbs-swiper {
    overflow: hidden;
}

.tp-thumbs-top .tp-thumb {
    aspect-ratio: 1;
}

.tp-thumbs-top .tp-thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #f5f5f5;
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.tp-thumbs-top .tp-thumb-nav:hover {
    background: #e0e0e0;
}

.tp-thumbs-top .tp-thumb-prev {
    left: -35px;
}

.tp-thumbs-top .tp-thumb-next {
    right: -35px;
}

/* ==========================================================================
   Grid Layout
   ========================================================================== */

.tp-gallery-wrapper.tp-grid-layout {
    width: 100%;
}

.tp-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.tp-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.tp-grid-item.tp-grid-main {
    grid-column: span 2;
}

.tp-grid-item .tp-main-image {
    width: 100%;
    aspect-ratio: 1;
}

.tp-grid-item.tp-grid-main .tp-main-image {
    aspect-ratio: 16/10;
}

.tp-grid-item .tp-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-grid-item .tp-lightbox-trigger {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tp-grid-item:hover .tp-lightbox-trigger {
    opacity: 1;
}

/* ==========================================================================
   Slider Only Layout
   ========================================================================== */

.tp-gallery-wrapper.tp-slider-only {
    position: relative;
}

.tp-slider-only .tp-main-swiper {
    width: 100%;
}

.tp-slider-only .tp-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tp-slider-only .tp-slider-nav:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tp-slider-only .tp-slider-prev {
    left: 15px;
}

.tp-slider-only .tp-slider-next {
    right: 15px;
}

.tp-slider-only .tp-slider-pagination {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.tp-slider-only .tp-slider-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tp-slider-only .tp-slider-pagination .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.2);
}

/* ==========================================================================
   Thumbnails Shared Styles
   ========================================================================== */

.tp-thumb {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    aspect-ratio: 1;
}

.tp-thumb:hover,
.tp-thumb.active {
    border-color: #333;
}

.tp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Main Image Styles
   ========================================================================== */

.tp-main-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.tp-main-swiper {
    width: 100%;
    height: auto;
}

.tp-main-swiper .swiper-slide {
    width: 100%;
    height: auto;
}

.tp-main-image {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.tp-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Zoom Effect
   ========================================================================== */

.tp-main-image.tp-zoom-enabled {
    cursor: zoom-in;
    position: relative;
}

/* Inner Zoom */
.tp-main-image.tp-zoom-enabled .tp-gallery-image {
    transition: transform 0.15s ease-out;
    transform-origin: center center;
}

/* Lens Zoom */
.tp-zoom-lens {
    cursor: none;
}

/* Window Zoom */
.tp-zoom-window {
    display: none;
    width: 100%;
    flex-shrink: 0;
    order: 3;
}

.tp-zoom-window.active {
    display: block;
}

.tp-zoom-window-inner {
    width: 100%;
    aspect-ratio: 1;
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Thumbs layouts with zoom window - only when window zoom is active */
.tp-thumbs-left.tp-zoom-window-active .tp-zoom-window,
.tp-thumbs-right.tp-zoom-window-active .tp-zoom-window {
    width: calc(50% - 8px);
}

.tp-thumbs-left.tp-zoom-window-active .tp-main-image-wrapper,
.tp-thumbs-right.tp-zoom-window-active .tp-main-image-wrapper {
    width: calc(50% - 8px);
    flex: none;
}

.tp-thumbs-bottom .tp-zoom-window,
.tp-thumbs-top .tp-zoom-window {
    width: calc(50% - 8px);
    position: absolute;
    right: -55%;
    top: 0;
}

.tp-main-image-wrapper {
    position: relative;
}

/* Hide zoom window on mobile */
@media (max-width: 768px) {
    .tp-zoom-window {
        display: none !important;
    }

    .tp-zoom-lens {
        display: none !important;
    }
}

/* ==========================================================================
   Lightbox Trigger Button
   ========================================================================== */

.tp-lightbox-trigger {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
}

.tp-main-image:hover .tp-lightbox-trigger {
    opacity: 1;
}

.tp-lightbox-trigger:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.tp-lightbox-trigger svg {
    color: #333;
}

/* ==========================================================================
   Main Image Navigation Arrows
   ========================================================================== */

.tp-main-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tp-main-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.tp-main-nav svg {
    color: #333;
}

.tp-main-prev {
    left: 15px;
}

.tp-main-next {
    right: 15px;
}

/* Hover visibility mode */
.tp-nav-hover .tp-main-nav {
    opacity: 0;
}

.tp-nav-hover:hover .tp-main-nav {
    opacity: 1;
}

/* Always visible mode */
.tp-nav-always .tp-main-nav {
    opacity: 1;
}

/* ==========================================================================
   Responsive - Product Gallery
   ========================================================================== */

@media (max-width: 768px) {
    /* Switch thumbs-left to thumbs-bottom on mobile */
    .tp-gallery-wrapper.tp-thumbs-left {
        flex-direction: column;
        gap: 10px;
    }

    .tp-thumbs-left .tp-main-image-wrapper {
        order: 1;
    }

    .tp-thumbs-left .tp-thumbs-wrapper {
        width: 100%;
        order: 2;
    }

    .tp-thumbs-left .tp-thumbs-swiper .swiper-wrapper {
        flex-direction: row;
    }

    .tp-thumbs-left .tp-thumb-nav {
        top: 50%;
        left: auto;
        transform: translateY(-50%);
    }

    .tp-thumbs-left .tp-thumb-prev {
        top: 50%;
        left: 0;
    }

    .tp-thumbs-left .tp-thumb-prev .dashicons {
        transform: none;
    }

    .tp-thumbs-left .tp-thumb-next {
        top: 50%;
        right: 0;
        bottom: auto;
    }

    .tp-thumbs-left .tp-thumb-next .dashicons {
        transform: none;
    }

    /* Switch thumbs-right to thumbs-bottom on mobile */
    .tp-gallery-wrapper.tp-thumbs-right {
        flex-direction: column;
        gap: 10px;
    }

    .tp-thumbs-right .tp-main-image-wrapper {
        order: 1;
    }

    .tp-thumbs-right .tp-thumbs-wrapper {
        width: 100%;
        order: 2;
    }

    .tp-thumbs-right .tp-thumbs-swiper .swiper-wrapper {
        flex-direction: row;
    }

    .tp-thumbs-right .tp-thumb-nav {
        top: 50%;
        left: auto;
        transform: translateY(-50%);
    }

    .tp-thumbs-right .tp-thumb-prev {
        top: 50%;
        left: 0;
    }

    .tp-thumbs-right .tp-thumb-prev .dashicons {
        transform: none;
    }

    .tp-thumbs-right .tp-thumb-next {
        top: 50%;
        right: 0;
        bottom: auto;
    }

    .tp-thumbs-right .tp-thumb-next .dashicons {
        transform: none;
    }

    /* Grid on mobile - single column */
    .tp-grid-container {
        grid-template-columns: 1fr;
    }

    .tp-grid-item.tp-grid-main {
        grid-column: span 1;
    }

    /* Smaller nav buttons on mobile */
    .tp-slider-only .tp-slider-nav {
        width: 35px;
        height: 35px;
    }

    .tp-slider-only .tp-slider-prev {
        left: 10px;
    }

    .tp-slider-only .tp-slider-next {
        right: 10px;
    }
}

/* ==========================================================================
   Lightbox Thumbnails
   ========================================================================== */

.tp-lightbox-thumbs {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    z-index: 1500000;
    max-width: 90vw;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tp-lightbox-thumbs::-webkit-scrollbar {
    display: none;
}

.tp-lightbox-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.tp-lightbox-thumb:hover {
    opacity: 0.9;
}

.tp-lightbox-thumb.active {
    border-color: #fff;
    opacity: 1;
}

.tp-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .tp-lightbox-thumbs {
        bottom: 10px;
        padding: 8px 12px;
        gap: 8px;
    }

    .tp-lightbox-thumb {
        width: 50px;
        height: 50px;
    }
}

/* ==========================================================================
   Video Support
   ========================================================================== */

/* Video Play Button on Main Image */
.tp-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.tp-video-play-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

.tp-video-play-btn svg {
    margin-left: 4px;
}

/* Video Icon on Thumbnail */
.tp-thumb-has-video {
    position: relative;
}

.tp-thumb-video-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.tp-thumb-video-icon svg {
    margin-left: 2px;
    width: 12px;
    height: 12px;
}

/* Video Container (for inline playback) */
.tp-video-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 15;
}

.tp-video-container iframe,
.tp-video-container video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

/* Show video container and hide image when video is playing */
.tp-video-playing .tp-video-container {
    display: block !important;
}

.tp-video-playing .tp-video-play-btn {
    display: none !important;
}

.tp-video-playing .tp-gallery-image {
    opacity: 0;
}

.tp-video-playing .tp-lightbox-trigger {
    display: none !important;
}

/* Disable zoom on video slides */
.tp-has-video .tp-main-image.tp-zoom-enabled {
    cursor: pointer;
}

.tp-has-video .tp-main-image.tp-zoom-enabled:hover .tp-gallery-image {
    transform: none !important;
}

/* ==========================================================================
   Variation Swatches
   ========================================================================== */

.tp-swatches-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.tp-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Base swatch styles */
.tp-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid #e0e0e0;
    box-sizing: border-box;
    position: relative;
}

.tp-swatch:hover {
    border-color: #999;
}

.tp-swatch.selected {
    border-color: #333;
    box-shadow: 0 0 0 1px #333;
}

.tp-swatch.disabled,
.tp-swatch.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
    pointer-events: none;
}

.tp-swatch.disabled::after,
.tp-swatch.unavailable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #cc0000;
    transform: rotate(-45deg);
}

/* Hide unavailable swatches option (alternative to strikethrough) */
.tp-swatches-hide-unavailable .tp-swatch.unavailable {
    display: none;
}

/* Color swatches */
.tp-swatch-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Size variations */
.tp-swatches-small .tp-swatch-color {
    width: 24px;
    height: 24px;
}

.tp-swatches-large .tp-swatch-color {
    width: 40px;
    height: 40px;
}

/* Shape variations */
.tp-swatches-square .tp-swatch-color,
.tp-swatches-square .tp-swatch-image {
    border-radius: 0;
}

.tp-swatches-rounded .tp-swatch-color,
.tp-swatches-rounded .tp-swatch-image {
    border-radius: 4px;
}

/* Image swatches */
.tp-swatch-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
}

.tp-swatch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Label swatches */
.tp-swatch-label {
    min-width: 32px;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.tp-swatch-label:hover {
    background: #f5f5f5;
}

.tp-swatch-label.selected {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Tooltip */
.tp-swatch[title] {
    position: relative;
}

.tp-swatches-tooltip .tp-swatch::before {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #333;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.tp-swatches-tooltip .tp-swatch::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.tp-swatches-tooltip .tp-swatch:hover::before,
.tp-swatches-tooltip .tp-swatch:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Admin preview styles */
.tp-preview-swatches {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
}

/* ==========================================================================
   PRODUCT SLIDERS / GRIDS
   ========================================================================== */

.tp-products-wrapper {
    position: relative;
    margin: 30px 0;
    /* Reset WordPress default border-style on elements with border-width in style */
    border-style: none !important;
    border-width: 0 !important;
}

.tp-products-title {
    margin: 0 0 20px 0;
    font-size: 1.5em;
    font-weight: 600;
}

/* Grid Layout */
.tp-products-grid {
    display: grid;
    grid-template-columns: repeat(var(--tp-cols-desktop, 4), 1fr);
    gap: var(--tp-grid-gap, 20px);
}

@media (max-width: 1024px) {
    .tp-products-grid {
        grid-template-columns: repeat(var(--tp-cols-tablet, 3), 1fr);
    }
}

@media (max-width: 768px) {
    .tp-products-grid {
        grid-template-columns: repeat(var(--tp-cols-mobile, 2), 1fr);
    }
}

/* Slider Layout */
.tp-products-slider {
    position: relative;
    overflow: hidden;
}

.tp-products-slider .swiper-wrapper {
    display: flex;
}

.tp-products-slider .swiper-slide {
    height: auto;
    margin-bottom: 20px;
}

/* Slider Arrows */
.tp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tp-slider-arrow:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.tp-slider-prev { left: 10px; }
.tp-slider-next { right: 10px; }

/* Arrows outside */
.arrows-outside { padding: 0 50px; }
.arrows-outside .tp-slider-prev { left: 0; }
.arrows-outside .tp-slider-next { right: 0; }

/* Product Slider - arrows always visible (override loop slider opacity:0) */
.tp-products-slider .tp-slider-arrow {
    opacity: 1;
}

/* Optional: show arrows on hover only */
.tp-products-wrapper[data-arrows-hover="yes"] .tp-slider-arrow {
    opacity: 0;
}
.tp-products-wrapper[data-arrows-hover="yes"]:hover .tp-slider-arrow {
    opacity: 1;
}

/* Pagination Dots */
.tp-products-slider .swiper-pagination {
    margin-top: 15px;
    text-align: center;
}

.tp-products-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ddd;
    opacity: 1;
    margin: 0 5px;
}

.tp-products-slider .swiper-pagination-bullet-active {
    background: #333;
}

/* ==========================================================================
   PRODUCT CARD STYLES
   ========================================================================== */

.tp-product-card {
    background: var(--tp-card-bg, #fff);
    border-color: var(--tp-border-color, transparent);
    border-width: var(--tp-border-width, 0);
    border-style: solid;
    border-radius: var(--tp-border-radius, 0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

/* Card Styles */
.tp-card-bordered {
    border: 1px solid var(--tp-border-color, #eee);
}

.tp-card-shadow {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.tp-card-shadow:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

/* Text Alignment */
.tp-text-left .tp-product-card-content { text-align: left; }
.tp-text-center .tp-product-card-content { text-align: center; }
.tp-text-right .tp-product-card-content { text-align: right; }

/* Image Container */
.tp-product-card-image {
    position: relative;
    overflow: hidden;
}

.tp-product-card-image a {
    display: block;
}

.tp-product-card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.tp-product-card:hover .tp-product-card-image img {
    transform: scale(1.03);
}

/* Image Aspect Ratios */
.tp-ratio-1-1 .tp-product-card-image {
    aspect-ratio: 1/1;
}
.tp-ratio-4-3 .tp-product-card-image {
    aspect-ratio: 4/3;
}
.tp-ratio-3-4 .tp-product-card-image {
    aspect-ratio: 3/4;
}

.tp-ratio-1-1 .tp-product-card-image img,
.tp-ratio-4-3 .tp-product-card-image img,
.tp-ratio-3-4 .tp-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sale Badge - Base */
.tp-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tp-badge-bg, #e11d48);
    color: var(--tp-badge-text, #fff);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge Style: Default (Rectangle) */
.tp-sale-badge.tp-badge-default {
    border-radius: 3px;
}

/* Badge Style: Pill */
.tp-sale-badge.tp-badge-pill {
    padding: 6px 16px;
    border-radius: 20px;
}

/* Badge Style: Circle */
.tp-sale-badge.tp-badge-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-size: 10px;
}

/* Badge Style: Blob 1 - Organic rounded */
.tp-sale-badge.tp-badge-blob1 {
    padding: 10px 14px;
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
}

/* Badge Style: Blob 2 - Asymmetric organic */
.tp-sale-badge.tp-badge-blob2 {
    padding: 10px 14px;
    border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
}

/* Badge Style: Blob 3 - Flowing organic */
.tp-sale-badge.tp-badge-blob3 {
    padding: 10px 14px;
    border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
}

/* Badge Style: Wavy - Soft wave shape */
.tp-sale-badge.tp-badge-wavy {
    padding: 10px 14px;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
}

/* Badge Style: Scallop - Decorative edges */
.tp-sale-badge.tp-badge-scallop {
    width: 52px;
    height: 52px;
    padding: 0;
    font-size: 9px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Badge Style: Flower - Petal shape */
.tp-sale-badge.tp-badge-flower {
    width: 50px;
    height: 50px;
    padding: 0;
    font-size: 9px;
    border-radius: 50% 0 50% 0;
    transform: rotate(45deg);
}
.tp-sale-badge.tp-badge-flower span {
    transform: rotate(-45deg);
    display: block;
}

/* Badge Style: Cloud - Soft cloud shape */
.tp-sale-badge.tp-badge-cloud {
    padding: 10px 16px;
    border-radius: 50px 50px 50px 10px;
}

/* Badge Style: Organic - Natural free form */
.tp-sale-badge.tp-badge-organic {
    padding: 10px 14px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Badge Style: Ribbon - Side ribbon */
.tp-sale-badge.tp-badge-ribbon {
    left: 0;
    padding: 6px 18px 6px 10px;
    border-radius: 0 4px 4px 0;
    clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
}

/* Badge Style: Corner - Top corner fold */
.tp-sale-badge.tp-badge-corner {
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
    padding: 8px 0 0 6px;
    font-size: 9px;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    justify-content: flex-start;
    align-items: flex-start;
}

/* Badge Style: Flag - Hanging flag */
.tp-sale-badge.tp-badge-flag {
    top: 0;
    left: 15px;
    padding: 10px 8px 18px;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
}

/* Badge Animation */
.tp-sale-badge {
    animation: tp-badge-pop 0.3s ease-out;
}
@keyframes tp-badge-pop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.tp-sale-badge.tp-badge-flower {
    animation: tp-badge-pop-rotate 0.3s ease-out;
}
@keyframes tp-badge-pop-rotate {
    0% { transform: rotate(45deg) scale(0.8); opacity: 0; }
    50% { transform: rotate(45deg) scale(1.05); }
    100% { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* Draft Mode Indicator */
.tp-products-wrapper.tp-is-draft {
    position: relative;
    opacity: 0.85;
    padding: 20px;
}
.tp-products-wrapper.tp-is-draft::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px dashed #f59e0b;
    border-radius: 12px;
    pointer-events: none;
    z-index: 10;
}

/* Card Content */
.tp-product-card-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tp-product-card-category {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
}

.tp-product-card-title {
    margin: 0 0 8px 0;
    font-size: 1em;
    font-weight: 500;
}

.tp-product-card-title a {
    color: var(--tp-title-color, inherit);
    text-decoration: none;
}

.tp-product-card-title a:hover {
    text-decoration: underline;
}

.tp-product-card-rating {
    margin-bottom: 8px;
}

.tp-product-card-price {
    color: var(--tp-price-color, inherit);
    font-weight: 600;
    margin-bottom: 10px;
}

.tp-product-card-price del {
    opacity: 0.6;
    margin-right: 5px;
}

.tp-product-card-price ins {
    text-decoration: none;
    color: #e74c3c;
}

.tp-product-card-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
}

.tp-product-card-button {
    margin-top: auto;
}

.tp-product-card-button .button,
.tp-product-card-button .add_to_cart_button {
    background: var(--tp-btn-bg, #333);
    color: var(--tp-btn-color, #fff);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.tp-product-card-button .button:hover,
.tp-product-card-button .add_to_cart_button:hover {
    opacity: 0.9;
}

/* ==========================================================================
   IMAGE FLIP EFFECT
   ========================================================================== */

.tp-image-flip {
    position: relative;
    overflow: hidden;
}

.tp-image-flip .tp-image-main,
.tp-image-flip .tp-image-hover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.tp-image-flip .tp-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.tp-product-card:hover .tp-image-flip .tp-image-main {
    opacity: 0;
}

.tp-product-card:hover .tp-image-flip .tp-image-hover {
    opacity: 1;
}

/* ==========================================================================
   MINI IMAGE SLIDER (in product card)
   ========================================================================== */

.tp-image-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.tp-image-slider .swiper-wrapper {
    height: 100%;
}

.tp-image-slider .swiper-slide {
    height: 100%;
}

.tp-image-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-mini-prev,
.tp-mini-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.tp-product-card:hover .tp-mini-prev,
.tp-product-card:hover .tp-mini-next {
    opacity: 1;
}

.tp-mini-prev:hover,
.tp-mini-next:hover {
    background: #fff;
}

.tp-mini-prev { left: 8px; }
.tp-mini-next { right: 8px; }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .tp-products-title {
        font-size: 1.2em;
    }

    .tp-slider-arrow {
        width: 32px;
        height: 32px;
    }

    .tp-product-card-content {
        padding: 10px;
    }

    .tp-product-card-title {
        font-size: 0.9em;
    }

    .tp-product-card-button .button,
    .tp-product-card-button .add_to_cart_button {
        padding: 8px 15px;
        font-size: 13px;
    }
}