/* ============================================
   Oola Shop All Section Styles
   Gold Standard Compliant
   ============================================ */

/* Inner Container */
.oola-shop-all__inner {
    max-width: 1400px;
    margin   : 0 auto;
}

/* Category Sections */
.oola-shop-all__category {
    margin-bottom: var(--space-3xl);
}

.oola-shop-all__category:last-child {
    margin-bottom: 0;
}

/* Heading Styles */
.oola-shop-all__heading {
    margin        : 0 0 var(--space-xl);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Grid Layout */
.oola-shop-all__grid {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : var(--space-lg);
}

/* Tablet: 3 columns */
@media (min-width: 768px) {
    .oola-shop-all__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
    .oola-shop-all__grid {
        grid-template-columns: repeat(4, 1fr);
        gap                  : var(--space-xl);
    }
}

/* Product Card */
.oola-shop-all__card {
    display       : flex;
    flex-direction: column;
}

/* Card Link */
.oola-shop-all__card-link {
    text-decoration: none;
    color          : inherit;
    display        : flex;
    flex-direction : column;
    height         : 100%;
}

/* Image Wrapper */
.oola-shop-all__image-wrapper {
    position        : relative;
    width           : 100%;
    padding-bottom  : 100%; /* 1:1 aspect ratio */
    overflow        : hidden;
    border-radius   : var(--radius-sm);
    background-color: rgb(var(--color-border) / 0.1);
    margin-bottom   : var(--space-sm);
}

/* Image Styles */
.oola-shop-all__image {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Image Hover Effect */
.oola-shop-all__card-link:hover .oola-shop-all__image {
    transform: scale(1.05);
}

/* Product Title */
.oola-shop-all__title {
    margin        : 0 0 var(--space-xs);
    text-align    : center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Purchase Options Container */
.oola-shop-all__options {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : var(--space-2xs);
}

/* Option Text */
.oola-shop-all__option {
    font-size: var(--text-xs);
    color    : rgb(var(--color-foreground) / 0.7);
}

/* Subscribe Option Hover */
.oola-shop-all__option--subscribe:hover {
    color: rgb(var(--color-primary));
}