/* Theme compatibility layer for utility classes missing from the committed CMS CSS bundle. */

/* ── Product Card missing utilities ─────────────────────────────────────── */

.h-48 {
    height: 12rem;
}

.h-11 {
    height: 2.75rem;
}

.w-11 {
    width: 2.75rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.leading-tight {
    line-height: 1.25;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

/* Dark-mode card background used by product-card.php */
html.dark .dark\:bg-\[\#2a2214\] {
    background-color: #2a2214;
}

/* Active micro-interaction for card buttons */
.active\:translate-y-0\.5:active {
    transform: translateY(0.125rem);
}

/* Primary button hover state */
.hover\:bg-primary-hover:hover {
    background-color: #e09a10;
}

/* Ring utilities for product cards */
.ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000);
}

html.dark .dark\:ring-white\/10 {
    --tw-ring-color: rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────── */

.text-callisto-black {
    color: #181610;
}

.text-callisto-gray {
    color: #6f675b;
}

.w-auto {
    width: auto;
}

.max-h-full {
    max-height: 100%;
}

.max-h-\[calc\(100vh-72px\)\] {
    max-height: calc(100vh - 72px);
}

.mr-auto {
    margin-right: auto;
}

.shadow-card {
    box-shadow: 0 18px 40px rgba(24, 22, 16, 0.08), 0 4px 12px rgba(24, 22, 16, 0.05);
}

.ring-callisto-black\/5 {
    --tw-ring-color: rgba(24, 22, 16, 0.05);
}

.ring-primary\/20 {
    --tw-ring-color: rgba(255, 177, 20, 0.2);
}

.bg-\[\#1a150b\] {
    background-color: #1a150b;
}

.bg-\[\#1a1711\] {
    background-color: #1a1711;
}

.bg-\[\#231e15\] {
    background-color: #231e15;
}

.bg-\[\#231f17\] {
    background-color: #231f17;
}

.bg-\[\#3d2f16\] {
    background-color: #3d2f16;
}

.from-\[\#2a2416\] {
    --tw-gradient-from: #2a2416 var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(42, 36, 22, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#1a1711\] {
    --tw-gradient-to: #1a1711 var(--tw-gradient-to-position);
}

.from-black\/60 {
    --tw-gradient-from: rgba(0, 0, 0, 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.top-\[-20\%\] {
    top: -20%;
}

.min-w-\[120px\] {
    min-width: 120px;
}

.w-\[800px\] {
    width: 800px;
}

.h-\[2px\] {
    height: 2px;
}

.h-\[800px\] {
    height: 800px;
}

.blur-\[40px\] {
    filter: blur(40px);
}

.blur-\[80px\] {
    filter: blur(80px);
}

.blur-\[120px\] {
    filter: blur(120px);
}

.translate-x-1\/2 {
    transform: translateX(50%);
}

.tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-5 {
    gap: 1.25rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pb-20 {
    padding-bottom: 5rem;
}

.text-\[13px\] {
    font-size: 13px;
    line-height: 1.2;
}

.text-\[14px\] {
    font-size: 14px;
    line-height: 1.25rem;
}

.opacity-90 {
    opacity: 0.9;
}

.hover\:bg-\[\#2a251a\]:hover {
    background-color: #2a251a;
}

.hover\:bg-gray-50:hover {
    background-color: #f9fafb;
}

.hover\:border-primary\/30:hover {
    border-color: rgba(255, 177, 20, 0.3);
}

.hover\:opacity-80:hover {
    opacity: 0.8;
}

.hover\:opacity-100:hover {
    opacity: 1;
}

.hover\:text-gray-300:hover {
    color: #d1d5db;
}

.hover\:text-primary:hover {
    color: #ffb114;
}

.hover\:text-white:hover {
    color: #ffffff;
}

.hover\:underline:hover {
    text-decoration-line: underline;
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.group:hover .group-hover\:bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05);
}

.group:hover .group-hover\:text-gray-400 {
    color: #9ca3af;
}

.active\:scale-\[0\.98\]:active {
    transform: scale(0.98);
}

.active\:scale-\[0\.99\]:active {
    transform: scale(0.99);
}

.active\:translate-y-0\.5:active {
    transform: translateY(0.125rem);
}

html.dark .dark\:border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05);
}

html.dark .dark\:border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark .dark\:bg-\[\#231f17\] {
    background-color: #231f17;
}

html.dark .dark\:bg-\[\#1a150b\] {
    background-color: #1a150b;
}

html.dark .dark\:invert {
    filter: invert(1);
}

html.dark .dark\:brightness-200 {
    filter: brightness(2);
}

html.dark .dark\:invert.dark\:brightness-200 {
    filter: invert(1) brightness(2);
}

html.dark .dark\:hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:items-start {
        align-items: flex-start;
    }

    .md\:gap-0 {
        gap: 0;
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:h-24 {
        height: 6rem;
    }

    .md\:justify-center {
        justify-content: center;
    }

    .md\:border-t-0 {
        border-top-width: 0;
    }

    .md\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex;
    }

    .lg\:h-32 {
        height: 8rem;
    }
}

/* Fix missing dark mode card backgrounds and contrast classes */
html.dark .dark\:bg-\[\#2a2215\] {
    background-color: #2a2215 !important;
}

html.dark .dark\:text-gray-500 {
    color: #a8a29e !important; /* stone-400 readable light gray */
}

html.dark .dark\:text-gray-600 {
    color: #78716c !important; /* stone-500 readable muted gray */
}

/* Base grid columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .lg\:col-span-12 {
        grid-column: span 12 / span 12;
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}