.text-custom-green{
    color: #03AF42;
}

.bg-custom-green {
    background-color: #E3FDE5;
}

.h-\[80vh\] {
    height: 80vh;
}

.bg-offwhite {
    background-color: #FAFAFA;
}

.bg-offred {
    background-color: #FFEBEB;
}

.max-w-400 {
    max-width: 4px;
  }
.border-secondary\/10 {
    border-color: color-mix(in srgb, #000000 10%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .border-secondary\/10 {
        border-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
    }
}

.border-secondary\/\[0\.06\] {
    border-color: color-mix(in srgb, #000000 6%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .border-secondary\/\[0\.06\] {
        border-color: color-mix(in oklab, var(--color-secondary) 6%, transparent);
    }
}

.text-secondary\/50 {
    color: color-mix(in srgb, #000000 50%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .text-secondary\/50 {
        color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
    }
}

.text-secondary\/40 {
    color: color-mix(in srgb, #000000 40%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .text-secondary\/40 {
        color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
    }
}

.text-secondary\/30 {
    color: color-mix(in srgb, #000000 30%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .text-secondary\/30 {
        color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
    }
}

.bg-secondary\/\[0\.03\] {
    background-color: color-mix(in srgb, #000000 3%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/\[0\.03\] {
        background-color: color-mix(in oklab, var(--color-secondary) 3%, transparent);
    }
}

.bg-secondary\/\[0\.02\] {
    background-color: color-mix(in srgb, #000000 2%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .bg-secondary\/\[0\.02\] {
        background-color: color-mix(in oklab, var(--color-secondary) 2%, transparent);
    }
}

.bg-quaternary\/10 {
    background-color: color-mix(in srgb, #CA0A0A 10%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .bg-quaternary\/10 {
        background-color: color-mix(in oklab, var(--color-quaternary) 10%, transparent);
    }
}

.hover\:bg-secondary\/10:hover {
    background-color: color-mix(in srgb, #000000 10%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-secondary\/10:hover {
        background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
    }
}

.hover\:bg-quaternary\/10:hover {
    background-color: color-mix(in srgb, #CA0A0A 10%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-quaternary\/10:hover {
        background-color: color-mix(in oklab, var(--color-quaternary) 10%, transparent);
    }
}

/* ---------- Product Gallery (shared component) ---------- */
.gallery-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-gallery-thumbs {
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.gallery-stage {
    order: 1;
    flex: 1;
}

.gallery-main-img {
    max-height: 520px;
    transition: transform 300ms ease-out;
}

.gallery-overlay {
    background-color: rgba(0, 0, 0, 0.92);
}

.gallery-lightbox-img {
    max-height: 85vh;
    max-width: 90vw;
}

.gallery-ctrl {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.gallery-ctrl:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.gallery-expand {
    background-color: #CA0A0A;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.gallery-expand:hover {
    background-color: #a80808;
}

.gallery-lightbox-stage {
    touch-action: pan-y;
}

.gallery-swipe-stage {
    touch-action: pan-y;
}

.gallery-count {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

@media (min-width: 768px) {
    .gallery-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }

    .product-gallery-thumbs {
        order: 1;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 520px;
        padding-bottom: 0;
    }

    .gallery-stage {
        order: 2;
    }
}

/* Gallery utility gaps not present in compiled Tailwind output */
.bottom-3 {
    bottom: 0.75rem;
}

.bottom-5 {
    bottom: 1.25rem;
}

@media (min-width: 768px) {
    .md\:p-12 {
        padding: 3rem;
    }

    .md\:w-14 {
        width: 3.5rem;
    }

    .md\:h-14 {
        height: 3.5rem;
    }
}