/*! tailwindcss v4.1.16 | Cleaned for WordPress */

/* SAFE RESET LAYER 
   This applies Tailwind-like resets but yields to WP Theme styles 
*/
@layer tailwind-reset {

    /* 1. The Nuclear Reset (Safe because it is layered) */
    :where(.products-full, .product-list) {

        *,
        ::after,
        ::before,
        ::backdrop,
        ::file-selector-button {
            box-sizing: border-box;
            /* Fixes width calculations */
            margin:     0;
            padding:    0;
            border:     0 solid;
        }

        /* 2. Fix Images (Tailwind default) */
        img,
        svg,
        video,
        canvas,
        audio,
        iframe,
        embed,
        object {
            display:        block;
            /* Removes bottom gap on inline images */
            vertical-align: middle;
            max-width:      100%;
            height:         auto;
        }

        /* 3. Inherit fonts so your inputs don't look weird */
        input,
        button,
        textarea,
        select {
            font:  inherit;
            color: inherit;
        }
    }
}

/* 1. VARIABLES - Needed for colors, spacing, and fonts */
@layer theme {

    :root,
    :host {
        /* --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
        /* --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */

        /* Colors */
        --color-red-50:     oklch(97.1% 0.013 17.38);
        --color-red-100:    oklch(93.6% 0.032 17.717);
        --color-red-200:    oklch(88.5% 0.062 18.334);
        --color-red-500:    oklch(63.7% 0.237 25.331);
        --color-red-700:    oklch(50.5% 0.213 27.518);
        --color-sky-50:     oklch(97.7% 0.013 236.62);
        --color-sky-100:    oklch(95.1% 0.026 236.824);
        --color-sky-200:    oklch(90.1% 0.058 230.902);
        --color-sky-500:    oklch(68.5% 0.169 237.323);
        --color-sky-600:    oklch(58.8% 0.158 241.966);
        --color-sky-700:    oklch(50% 0.134 242.749);
        --color-blue-50:    oklch(97% 0.014 254.604);
        --color-blue-100:   oklch(93.2% 0.032 255.585);
        --color-blue-200:   oklch(88.2% 0.059 254.128);
        --color-blue-600:   oklch(54.6% 0.245 262.881);
        --color-blue-700:   oklch(48.8% 0.243 264.376);
        --color-indigo-50:  oklch(96.2% 0.018 272.314);
        --color-indigo-100: oklch(93% 0.034 272.788);
        --color-indigo-200: oklch(87% 0.065 274.039);
        --color-indigo-500: oklch(58.5% 0.233 277.117);
        --color-indigo-700: oklch(45.7% 0.24 277.023);
        --color-gray-500:   oklch(55.1% 0.027 264.364);
        --color-gray-600:   oklch(44.6% 0.03 256.802);
        --color-gray-700:   oklch(37.3% 0.034 259.733);
        --color-gray-900:   oklch(21% 0.034 264.665);
        --color-white:      #fff;

        /* Typography & Spacing Scale */
        --spacing:               0.25rem;
        --text-xs:               0.75rem;
        --text-xs--line-height:  calc(1 / 0.75);
        --text-sm:               0.875rem;
        --text-sm--line-height:  calc(1.25 / 0.875);
        --text-lg:               1.125rem;
        --text-lg--line-height:  calc(1.75 / 1.125);
        --text-xl:               1.25rem;
        --text-xl--line-height:  calc(1.75 / 1.25);
        --text-2xl:              1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-4xl:              2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl:              3rem;
        --text-5xl--line-height: 1;
        --font-weight-medium:    500;
        --font-weight-semibold:  600;
        --font-weight-bold:      700;
        --font-weight-extrabold: 800;
        --tracking-widest:       0.1em;
        --leading-relaxed:       1.625;
        --radius-lg:             0.5rem;
        --radius-xl:             0.75rem;
    }

    :root,
    :host {
        /* REDS -> Cyan/Teal (Low contrast) */
        --color-red-50:  rgb(26, 36, 36);
        --color-red-100: rgb(26, 49, 49);
        --color-red-200: rgb(26, 69, 69);
        --color-red-500: rgb(29, 194, 186);
        --color-red-700: rgb(75, 230, 224);

        /* SKY -> Orange/Brown */
        --color-sky-50:  rgb(38, 30, 26);
        --color-sky-100: rgb(51, 36, 26);
        --color-sky-200: rgb(82, 46, 26);
        --color-sky-500: rgb(230, 97, 34);
        --color-sky-600: rgb(230, 124, 62);
        --color-sky-700: rgb(230, 146, 95);

        /* BLUE -> Yellow/Gold */
        --color-blue-50:  rgb(38, 33, 26);
        --color-blue-100: rgb(54, 42, 26);
        --color-blue-200: rgb(78, 54, 26);
        --color-blue-600: rgb(213, 155, 29);
        --color-blue-700: rgb(214, 173, 46);

        /* INDIGO -> Lime/Green */
        --color-indigo-50:  rgb(39, 36, 26);
        --color-indigo-100: rgb(50, 45, 26);
        --color-indigo-200: rgb(71, 62, 26);
        --color-indigo-500: rgb(152, 154, 26);
        --color-indigo-700: rgb(176, 194, 58);

        /* GRAYS */
        --color-gray-500: rgb(145, 138, 126);
        --color-gray-600: rgb(170, 162, 149);
        --color-gray-700: rgb(186, 178, 163);
        --color-gray-900: rgb(217, 210, 198);

        /* WHITE */
        --color-white: rgb(26, 26, 26);
    }

}

/* 2. UTILITIES - The specific classes used in your HTML */
@layer utilities {
    .mx-auto {
        margin-inline: auto;
    }

    .mt-1 {
        margin-top: calc(var(--spacing) * 1);
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2);
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4);
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2);
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2);
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3);
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4);
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6);
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .flex {
        display: flex;
    }

    .h-6 {
        height: calc(var(--spacing) * 6);
    }

    .w-6 {
        width: calc(var(--spacing) * 6);
    }

    .max-w-full {
        max-width: 100%;
    }

    .shrink-0 {
        flex-shrink: 0;
    }

    .list-disc {
        list-style-type: disc;
    }

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

    .flex-wrap {
        flex-wrap: wrap;
    }

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

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

    .gap-4 {
        gap: calc(var(--spacing) * 4);
    }

    .space-y-1> :not(:last-child) {
        margin-bottom: calc(var(--spacing) * 1);
    }

    .space-y-3> :not(:last-child) {
        margin-bottom: calc(var(--spacing) * 3);
    }

    .space-y-4> :not(:last-child) {
        margin-bottom: calc(var(--spacing) * 4);
    }

    .overflow-hidden {
        overflow: hidden;
    }

    .rounded-full {
        border-radius: 9999px;
    }

    .rounded-lg {
        border-radius: var(--radius-lg);
    }

    .rounded-xl {
        border-radius: var(--radius-xl);
    }

    .border-b-2 {
        border-bottom-style: solid;
        border-bottom-width: 2px;
    }

    .border-blue-200 {
        border-color: var(--color-blue-200);
    }

    .border-indigo-200 {
        border-color: var(--color-indigo-200);
    }

    .border-red-200 {
        border-color: var(--color-red-200);
    }

    .border-sky-200 {
        border-color: var(--color-sky-200);
    }

    .bg-blue-50 {
        /* background-color: var(--color-blue-50); */
        background-color: color-mix(in srgb, var(--color-blue-50) 80%, transparent);
    }

    .bg-blue-100 {
        background-color: var(--color-blue-100);
    }

    .bg-indigo-50 {
        /* background-color: var(--color-indigo-50); */
        background-color: color-mix(in srgb, var(--color-indigo-50) 80%, transparent);

    }

    .bg-indigo-100 {
        background-color: var(--color-indigo-100);
    }

    .bg-red-50 {
        /* background-color: var(--color-red-50); */
        background-color: color-mix(in srgb, var(--color-red-50) 80%, transparent);
    }

    .bg-red-100 {
        background-color: var(--color-red-100);
    }

    .bg-sky-50 {
        /* background-color: var(--color-sky-50); */
        background-color: color-mix(in srgb, var(--color-sky-50) 80%, transparent);
    }

    .bg-sky-100 {
        background-color: var(--color-sky-100);
    }

    .bg-white {
        background-color: var(--color-white);
    }

    .p-4 {
        padding: calc(var(--spacing) * 4);
    }

    .p-8 {
        padding: calc(var(--spacing) * 8);
    }

    .px-4 {
        padding-inline: calc(var(--spacing) * 4);
    }

    .py-2 {
        padding-block: calc(var(--spacing) * 2);
    }

    .pb-2 {
        padding-bottom: calc(var(--spacing) * 2);
    }

    .pl-4 {
        padding-left: calc(var(--spacing) * 4);
    }

    .text-2xl {
        font-size:   var(--text-2xl) !important;
        line-height: var(--text-2xl--line-height) !important;
    }

    .text-4xl {
        font-size:   var(--text-4xl) !important;
        line-height: var(--text-4xl--line-height) !important;
    }

    .text-sm {
        font-size:   var(--text-sm) !important;
        line-height: var(--text-sm--line-height) !important;
    }

    .text-xl {
        font-size:   var(--text-xl) !important;
        line-height: var(--text-xl--line-height) !important;
    }

    .text-xs {
        font-size:   var(--text-xs) !important;
        line-height: var(--text-xs--line-height) !important;
    }

    .leading-relaxed {
        line-height: var(--leading-relaxed) !important;
    }

    .font-bold {
        font-weight: var(--font-weight-bold) !important;
    }

    .font-extrabold {
        font-weight: var(--font-weight-extrabold) !important;
    }

    .font-medium {
        font-weight: var(--font-weight-medium) !important;
    }

    .font-semibold {
        font-weight: var(--font-weight-semibold) !important;
    }

    .tracking-widest {
        letter-spacing: var(--tracking-widest) !important;
    }

    .uppercase {
        text-transform: uppercase !important;
    }

    .text-blue-600 {
        color: var(--color-blue-600);
    }

    .text-blue-700 {
        color: var(--color-blue-700);
    }

    .text-gray-500 {
        color: var(--color-gray-500);
    }

    .text-gray-600 {
        color: var(--color-gray-600);
    }

    .text-gray-700 {
        color: var(--color-gray-700);
    }

    .text-gray-900 {
        color: var(--color-gray-900);
    }

    .text-indigo-500 {
        color: var(--color-indigo-500);
    }

    .text-indigo-700 {
        color: var(--color-indigo-700);
    }

    .text-red-500 {
        color: var(--color-red-500);
    }

    .text-red-700 {
        color: var(--color-red-700);
    }

    .text-sky-500 {
        color: var(--color-sky-500);
    }

    .text-sky-600 {
        color: var(--color-sky-600);
    }

    .text-sky-700 {
        color: var(--color-sky-700);
    }

    .shadow-sm {
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    .shadow-xl {
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

    /* Responsive Breakpoints */
    @media (width >=48rem) {
        .md\:flex {
            display: flex;
        }

        .md\:w-1\/2 {
            width: 50%;
        }

        .md\:p-12 {
            padding: calc(var(--spacing) * 12);
        }

        .md\:text-5xl {
            font-size:   var(--text-5xl) !important;
            line-height: var(--text-5xl--line-height) !important;
        }
    }
}

/* 3. PROPERTIES - Required definitions for modern CSS variables */
@property --tw-space-y-reverse {
    syntax:        "*";
    inherits:      false;
    initial-value: 0;
}

@property --tw-border-style {
    syntax:        "*";
    inherits:      false;
    initial-value: solid;
}

@property --tw-leading {
    syntax:   "*";
    inherits: false;
}

@property --tw-font-weight {
    syntax:   "*";
    inherits: false;
}

@property --tw-tracking {
    syntax:   "*";
    inherits: false;
}

@property --tw-shadow {
    syntax:        "*";
    inherits:      false;
    initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
    syntax:   "*";
    inherits: false;
}

@property --tw-shadow-alpha {
    syntax:        "<percentage>";
    inherits:      false;
    initial-value: 100%;
}

@property --tw-inset-shadow {
    syntax:        "*";
    inherits:      false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
    syntax:   "*";
    inherits: false;
}

@property --tw-inset-shadow-alpha {
    syntax:        "<percentage>";
    inherits:      false;
    initial-value: 100%;
}

@property --tw-ring-color {
    syntax:   "*";
    inherits: false;
}

@property --tw-ring-shadow {
    syntax:        "*";
    inherits:      false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
    syntax:   "*";
    inherits: false;
}

@property --tw-inset-ring-shadow {
    syntax:        "*";
    inherits:      false;
    initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
    syntax:   "*";
    inherits: false;
}

@property --tw-ring-offset-width {
    syntax:        "<length>";
    inherits:      false;
    initial-value: 0px;
}

@property --tw-ring-offset-color {
    syntax:        "*";
    inherits:      false;
    initial-value: #fff;
}

@property --tw-ring-offset-shadow {
    syntax:        "*";
    inherits:      false;
    initial-value: 0 0 #0000;
}