/* Card Structure & Gallery */
.card .thumb-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5; /* Adjust aspect ratio as needed */
    border-radius: 4px;
}

.card .thumb {
    display: block;
    width: 100%;
    height: 100%;
}

.card .card-gallery-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card .card-img.active {
    opacity: 1;
    z-index: 1;
}

/* Navigation Arrows */
.card .card-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%; /* Clickable area width */
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0; /* Hide text */
    color: transparent;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0;
}

.card:hover .card-nav {
    opacity: 1;
}

.card .card-nav.prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 10px;
}

.card .card-nav.next {
    right: 0;
    justify-content: flex-end;
    padding-right: 10px;
}

/* Visual Circle */
.card .card-nav::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    font-size: 22px;
    color: #111;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, background-color 0.2s;
}

.card .card-nav.prev::before {
    content: '\2039';
    padding-right: 2px;
}

.card .card-nav.next::before {
    content: '\203A';
    padding-left: 2px;
}

.card .card-nav:hover::before {
    background: #fff;
    transform: scale(1.1);
}

/* Quick Buy Overlay */
.card .quick-buy-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.card:hover .quick-buy-overlay {
    transform: translateY(0);
}

.card .quick-buy-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

/* Sizes Overlay */
.card .quick-sizes {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    border-top: 1px solid #eee;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    position: absolute;
    bottom: 100%; /* Above the button */
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

/* Show sizes when hovering the buy button OR the sizes container itself */
.card .quick-buy-btn:hover ~ .quick-sizes, /* This selector won't work because sizes is before button in HTML? No, I put sizes inside overlay. Wait. HTML structure: overlay > sizes, button. */
.card .quick-buy-overlay:hover .quick-sizes {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* If structure is: 
   <overlay>
     <sizes>
     <button>
   </overlay>
   Then hovering overlay works.
*/

.card .quick-size-btn {
    background: #fff;
    border: 1px solid #ddd;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
    transition: all 0.2s;
}

.card .quick-size-btn:hover {
    border-color: #000;
    background: #f9f9f9;
}

.card .quick-size-btn.selected {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Color Swatches (Below Image) */
.card .card-swatches {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    justify-content: center; /* or left */
}

.card .card-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ddd;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
}

.card .card-swatch:hover, .card .card-swatch.selected {
    transform: scale(1.2);
    border-color: #000;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000;
}

/* Price Styling */
.card .price {
    margin-top: 8px;
    font-size: 14px;
    color: #000;
    display: flex; /* Flex to align items if not grid */
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.card .price del.regular,
.card .price del {
    color: #999;
    text-decoration: line-through;
    font-size: 0.9em;
    opacity: 0.8;
}

.card .price strong.sale,
.card .price ins {
    color: #e63946; /* Red for sale */
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1em;
}

.card .price strong.regular {
    color: #000;
    font-weight: 700;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .card .quick-buy-overlay {
        transform: translateY(0); /* Always visible on mobile? Or maybe keep it hidden until tap? */
        /* Let's keep it hidden to avoid clutter, tap image to go to product page is standard. 
           Or maybe show a cart icon. For now, following the desktop hover logic which translates to 'tap to see' on mobile sometimes. */
    }
    
    .card .quick-sizes.active-mobile {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    .card .card-nav {
        opacity: 1; /* Always show arrows on mobile if multiple images */
    }
}