/* ═══════════════════════════════════════════════════════════════ */
/* THEME 1 - GENERAL LAYOUT (Based on General1_Layout_Demo) */
/* Modern, Clean, Professional Design with Smooth Animations */
/* ═══════════════════════════════════════════════════════════════ */

/* THEME 1 CONTAINER */
.vthink-v8-container.theme-theme-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
}

/* THEME 1 PRODUCT CARD */
/* overflow forced with !important: the active theme's own generic card class
   can otherwise override this and let the hover icons spill outside the card. */
.vthink-v8-container.theme-theme-1 .vthink-v8-product {
    background: #fff;
    border-radius: 12px;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* HOVER LIFT EFFECT */
.vthink-v8-container.theme-theme-1 .vthink-v8-product:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* BADGE - RED SALE */
/* right/transform/width explicitly reset: themes-v8.css has a generic, older
   .ribbon rule (diagonal corner ribbon) that otherwise leaks right:-35px and
   transform:rotate(45deg) into this element since this rule doesn't set them. */
.vthink-v8-container.theme-theme-1 .ribbon {
    position: absolute;
    left: 12px;
    right: auto;
    top: 12px;
    width: auto;
    background: #e53935;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    z-index: 10;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: none;
    transform: none;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* IMAGE SECTION */
/* position/overflow forced with !important: the active theme's own generic
   .product-image class can otherwise override these and let the hover icons
   spill outside the image/card. */
.vthink-v8-container.theme-theme-1 .product-image {
    position: relative !important;
    overflow: hidden !important;
    height: 250px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* IMAGE */
.vthink-v8-container.theme-theme-1 .product-image img {
    width: 100%;
    height: 100%;
    display: block;
    transition: 0.5s ease;
    object-fit: cover;
}

/* SKELETON LOADER - only present when Skeleton Loader is enabled */
.vthink-v8-container.theme-theme-1 .skeleton-loader {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: vt8Shimmer 1.4s ease infinite;
    transition: opacity 0.3s ease;
}
.vthink-v8-container.theme-theme-1 .skeleton-loader.vt8-loaded {
    opacity: 0;
    pointer-events: none;
}
@keyframes vt8Shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* PRODUCT VIDEO (hover) - only present when Product Video is enabled and the
   product has a video URL set */
.vthink-v8-container.theme-theme-1 .product-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    z-index: 3 !important;
    pointer-events: none;
    transition: opacity 0.3s ease !important;
    border: none !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.vthink-v8-container.theme-theme-1 .vthink-v8-product:hover .product-video {
    opacity: 1 !important;
}

/* VIDEO BY DEFAULT - video is the resting-state visual; hovering reveals the
   2nd gallery image instead (opposite of .product-video above).
   !important + translateZ(0): some browsers (notably Safari/iOS) promote a
   <video> onto its own hardware compositing layer that ignores normal z-index
   stacking, rendering it above later siblings regardless of z-index. Forcing
   both elements onto their own layer via translateZ(0) makes stacking behave
   consistently again. !important also guards against the active theme's own
   generic image/opacity rules winning here, as has happened elsewhere in this
   plugin (Font Awesome, ribbon, icon overflow). */
.vthink-v8-container.theme-theme-1 .product-video-default {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    z-index: 1 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.vthink-v8-container.theme-theme-1 .hover-reveal-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    z-index: 2 !important;
    transition: opacity 0.3s ease !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.vthink-v8-container.theme-theme-1 .vthink-v8-product:hover .hover-reveal-image {
    opacity: 1 !important;
}

/* SECONDARY IMAGE (FADE SWAP) - only present when Hover Image Effect = Fade */
.vthink-v8-container.theme-theme-1 .product-image img.secondary-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
}
.vthink-v8-container.theme-theme-1 .vthink-v8-product.has-secondary-image:hover .product-image img.secondary-image {
    opacity: 1;
}
.vthink-v8-container.theme-theme-1 .vthink-v8-product.has-secondary-image:hover .product-image > img:not(.secondary-image) {
    opacity: 0;
}

/* FLIP IMAGE (3D) - only present when Hover Image Effect = Flip */
.vthink-v8-container.theme-theme-1 .product-image {
    perspective: 1000px;
}
.vthink-v8-container.theme-theme-1 .flip-3d {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}
.vthink-v8-container.theme-theme-1 .vthink-v8-product:hover .flip-3d {
    transform: rotateY(180deg);
}
.vthink-v8-container.theme-theme-1 .flip-front,
.vthink-v8-container.theme-theme-1 .flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}
.vthink-v8-container.theme-theme-1 .flip-back {
    transform: rotateY(180deg);
}
.vthink-v8-container.theme-theme-1 .flip-front img,
.vthink-v8-container.theme-theme-1 .flip-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* IMAGE ZOOM ON HOVER */
.vthink-v8-container.theme-theme-1 .vthink-v8-product:hover .product-image img {
    transform: scale(1.08);
}

/* ICONS CONTAINER */
.vthink-v8-container.theme-theme-1 .product-icons {
    position: absolute;
    right: -60px;
    top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: 0.35s ease;
    z-index: 5;
}

/* ICONS SLIDE ON HOVER */
.vthink-v8-container.theme-theme-1 .vthink-v8-product:hover .product-icons {
    right: 15px;
}

/* ICON BUTTONS */
.vthink-v8-container.theme-theme-1 .product-icons a {
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2da9d7;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
    font-size: 16px;
}

.vthink-v8-container.theme-theme-1 .product-icons a:hover {
    background: #2da9d7;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(45, 169, 215, 0.3);
}

/* Force correct FA6 font on these icons in case the active theme loads a
   conflicting/older Font Awesome that redefines these classes elsewhere. */
.vthink-v8-container.theme-theme-1 .product-icons a i.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.vthink-v8-container.theme-theme-1 .product-icons a i.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* CONTENT SECTION */
.vthink-v8-container.theme-theme-1 .product-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* CATEGORY */
.vthink-v8-container.theme-theme-1 .product-category {
    font-size: 13px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* PRODUCT TITLE */
.vthink-v8-container.theme-theme-1 h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0;
    color: #222;
    line-height: 1.3;
}

.vthink-v8-container.theme-theme-1 h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.vthink-v8-container.theme-theme-1 h3 a:hover {
    color: #2da9d7;
}

/* RATING STARS */
.vthink-v8-container.theme-theme-1 .product-rating {
    color: #ffb400;
    font-size: 14px;
    margin: 8px 0;
    letter-spacing: 1px;
}

/* PRICE */
.vthink-v8-container.theme-theme-1 .product-price {
    margin: 12px 0;
    font-size: 22px;
    font-weight: bold;
    color: #222;
}

/* COUNTDOWN TIMER */
.vthink-v8-container.theme-theme-1 .countdown-timer {
    display: inline-block;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 4px 0;
    letter-spacing: 0.5px;
}
.vthink-v8-container.theme-theme-1 .countdown-timer.countdown-ended {
    background: #999;
}

/* LOAD MORE BUTTON */
.vt8-load-more-wrap {
    text-align: center;
    padding: 20px 0;
    grid-column: 1 / -1;
}
.vt8-load-more-btn {
    background: #111;
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.3s ease;
}
.vt8-load-more-btn:hover {
    background: #2da9d7;
}
.vt8-load-more-btn:disabled {
    cursor: not-allowed;
}

/* SKU */
.vthink-v8-container.theme-theme-1 .product-sku {
    font-size: 12px;
    color: #999;
    margin: 4px 0;
}

/* STOCK STATUS */
.vthink-v8-container.theme-theme-1 .product-stock {
    font-size: 12px;
    font-weight: 600;
    margin: 4px 0;
}
.vthink-v8-container.theme-theme-1 .product-stock.stock-instock { color: #2e7d32; }
.vthink-v8-container.theme-theme-1 .product-stock.stock-outofstock { color: #e53935; }
.vthink-v8-container.theme-theme-1 .product-stock.stock-onbackorder { color: #f57c00; }

/* OLD PRICE (STRIKETHROUGH) */
.vthink-v8-container.theme-theme-1 .old-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}

/* ADD TO CART BUTTON */
.vthink-v8-container.theme-theme-1 .add-to-cart-btn {
    display: block;
    text-align: center;
    background: #111;
    color: #fff;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    transition: 0.3s ease;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.vthink-v8-container.theme-theme-1 .add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #2da9d7;
    transition: left 0.3s ease;
    z-index: -1;
}

.vthink-v8-container.theme-theme-1 .add-to-cart-btn:hover {
    background: #2da9d7;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(45, 169, 215, 0.3);
}

.vthink-v8-container.theme-theme-1 .add-to-cart-btn:active {
    transform: translateY(0);
}

/* PLACEHOLDER IMAGE FALLBACK */
.vthink-v8-container.theme-theme-1 .product-image::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    z-index: -1;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
    .vthink-v8-container.theme-theme-1 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .vthink-v8-container.theme-theme-1 {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    
    .vthink-v8-container.theme-theme-1 .product-image {
        height: 180px;
    }
    
    .vthink-v8-container.theme-theme-1 h3 {
        font-size: 14px;
    }
    
    .vthink-v8-container.theme-theme-1 .product-price {
        font-size: 16px;
    }
    
    .vthink-v8-container.theme-theme-1 .product-icons {
        right: -45px;
    }
    
    .vthink-v8-container.theme-theme-1 .vthink-v8-product:hover .product-icons {
        right: 8px;
    }
}

@media (max-width: 480px) {
    .vthink-v8-container.theme-theme-1 {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }
}