/*
Theme Name: Gumroad Brutalist Storefront Pro
Theme URI: https://github.com/gumroad-brutalist
Author: Gumroad Brutalist
Author URI: https://yourwebsite.com
Description: High-converting brutalist eCommerce theme with advanced marketing automation (exit intent, abandoned cart recovery, social proof, schema markup) and universal email integration supporting 15+ platforms including ConvertKit, Mailchimp, ActiveCampaign, FluentCRM, and Zapier. 100% free with zero paid dependencies.
Version: 3.2.2
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gumroad-brutalist
Tags: woocommerce, ecommerce, brutalist, digital-products, email-marketing, conversion-optimization, landing-page, custom-colors, custom-menu, featured-images, full-width-template, theme-options

Gumroad Brutalist Storefront Pro - A brutalist design system for digital product storefronts.
*/

/* ==========================================================================
   ALPINE.JS CLOAK - Must be first to prevent FOUC
   ========================================================================== */

[x-cloak] {
    display: none !important;
}


/* ==========================================================================
   CSS VARIABLES - Brutalist Design System
   ========================================================================== */

:root {
    /* Colors */
    --color-bg: #FFFFFF;
    --color-text: #000000;
    --color-accent: #FF90E8;
    --color-accent-dark: #ff6cd9;
    --color-accent-light: #ffb4f0;
    --color-success: #10B981;
    --color-error: #EF4444;
    --color-warning: #F59E0B;

    /* Gray Scale */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;

    /* Shadows - Brutalist (solid, no blur) */
    --shadow-sm: 4px 4px 0px #000;
    --shadow-md: 6px 6px 0px #000;
    --shadow-lg: 8px 8px 0px #000;
    --shadow-xl: 10px 10px 0px #000;
    --shadow-2xl: 12px 12px 0px #000;

    /* Hover Shadows */
    --shadow-sm-hover: 2px 2px 0px #000;
    --shadow-md-hover: 3px 3px 0px #000;
    --shadow-lg-hover: 4px 4px 0px #000;
    --shadow-xl-hover: 5px 5px 0px #000;

    /* Layout */
    --header-height: 80px;
    --marquee-height: 40px;
    --banner-height: 60px;

    /* Animation */
    --marquee-speed: 30s;
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;

    /* Z-Index Layers */
    --z-base: 1;
    --z-sticky: 10;
    --z-banner: 40;
    --z-marquee: 45;
    --z-header: 50;
    --z-cart-drawer: 60;
    --z-social-proof: 90;
    --z-modal: 100;
    --z-cookie: 110;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive Logo Fix */
.custom-logo {
    max-width: 100%;
    height: auto;
    width: auto;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-top: 0;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.875rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

@media (min-width: 1024px) {
    h1 {
        font-size: 4.5rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.25rem;
    }
}

p {
    margin-top: 0;

    /* Quantity Input Brutalist Styles */
    .quantity-wrapper .quantity {
        display: flex;
        align-items: center;
    }

    .quantity-wrapper .quantity input.qty {
        width: 3.5rem !important;
        height: 3.5rem !important;
        border: none !important;
        background: transparent !important;
        font-size: 1.5rem !important;
        font-weight: 900 !important;
        text-align: center !important;
        padding: 0 !important;
        -moz-appearance: textfield;
    }

    .quantity-wrapper .quantity input.qty::-webkit-outer-spin-button,
    .quantity-wrapper .quantity input.qty::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    margin-bottom: 1rem;
}

a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-dark);
}

/* ==========================================================================
   BRUTALIST COMPONENTS
   ========================================================================== */

/* Buttons */
.brutalist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text);
    background-color: var(--color-accent);
    border: 3px solid var(--color-text);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transform: translate(0, 0);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.brutalist-btn:hover {
    transform: translate(3px, 3px);
    box-shadow: var(--shadow-md-hover);
}

.brutalist-btn:active {
    transform: translate(6px, 6px);
    box-shadow: 0 0 0 #000;
}

.brutalist-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.brutalist-btn-large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.brutalist-btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.brutalist-btn-small:hover {
    box-shadow: var(--shadow-sm-hover);
}

.brutalist-btn-outline {
    background-color: transparent;
}

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

/* Cards */
.brutalist-card {
    background-color: var(--color-bg);
    border: 3px solid var(--color-text);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-fast);
}

.brutalist-card:hover {
    transform: translate(4px, 4px);
    box-shadow: var(--shadow-lg-hover);
}

/* Badges */
.brutalist-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--color-accent);
    border: 3px solid var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 3px solid var(--color-text);
    border-radius: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    width: 100%;
    transition: box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: var(--shadow-sm);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-gray-400);
}

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 1rem;
    background: var(--color-text);
    color: var(--color-bg);
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   ASPECT RATIOS - CRITICAL for Product Images
   ========================================================================== */

.aspect-2-3 {
    aspect-ratio: 2 / 3;
}

.aspect-2-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   WOOCOMMERCE OVERRIDES
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 0 !important;
    border: 3px solid var(--color-text) !important;
}

.woocommerce-message {
    background-color: var(--color-success) !important;
}

.woocommerce-error {
    background-color: var(--color-error) !important;
    color: var(--color-bg) !important;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-radius: 0 !important;
    border: 3px solid var(--color-text) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Ensure no border radius anywhere */
.woocommerce-page *,
.woocommerce * {
    border-radius: 0 !important;
}

/* ==========================================================================
   BRUTALIST STAR RATINGS
   ========================================================================== */

/* ==========================================================================
   BRUTALIST STAR RATINGS
   ========================================================================== */

.woocommerce p.stars {
    margin-bottom: 1rem;
    width: fit-content;
}

.woocommerce p.stars span {
    display: flex;
    gap: 10px;
    background: #000;
    padding: 10px;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}

.woocommerce p.stars a {
    position: relative;
    height: 40px;
    width: 40px;
    display: block;
    text-decoration: none;
    border: 3px solid #fff;
    background: #000;
    transition: all 0.2s ease;
    /* Hide the text "1 of 5 stars" */
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    overflow: hidden;
}

.woocommerce p.stars a::before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Restore font size for the number */
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    background: transparent;
    opacity: 1;
}

/* Specific Numbers */
.woocommerce p.stars a.star-1::before {
    content: "1";
}

.woocommerce p.stars a.star-2::before {
    content: "2";
}

.woocommerce p.stars a.star-3::before {
    content: "3";
}

.woocommerce p.stars a.star-4::before {
    content: "4";
}

.woocommerce p.stars a.star-5::before {
    content: "5";
}

/* Hover States */
.woocommerce p.stars:hover a {
    background: #FF90E8;
    border-color: #000;
    /* Black borders on hover */
}

.woocommerce p.stars:hover a::before {
    color: #000;
}

/* Gray out subsequent stars on hover (CSS only logic) */
.woocommerce p.stars a:hover~a {
    background: #000;
    border-color: #fff;
}

.woocommerce p.stars a:hover~a::before {
    color: #fff;
}

/* Active State (WooCommerce adds class 'active' to selected star) */
/* Active State (WooCommerce adds class 'active' to selected star) */
.woocommerce p.stars.selected a {
    background: #FF90E8;
    border-color: #000;
}

.woocommerce p.stars.selected a::before {
    color: #000;
}

.woocommerce p.stars.selected a.active~a {
    background: #000;
    border-color: #fff;
    opacity: 1;
}

.woocommerce p.stars.selected a.active~a::before {
    color: #fff;
    opacity: 1;
}


/* ==========================================================================
   MODAL OVERLAYS
   ========================================================================== */

/* Modal overlay - covers entire screen */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Modal content box */
.modal-content {
    position: relative;
    background-color: var(--color-bg);
    border: 3px solid var(--color-text);
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow-y: auto;
}

/* Hide content by default when using x-cloak */
[x-cloak] {
    display: none !important;
}

/* ==========================================================================
   SCROLL FIX - Ensure body can scroll by default
   ========================================================================== */

/* Ensure html and body allow scrolling */
html,
body {
    overflow-x: hidden;
}

html {
    overflow-y: scroll;
    /* Always show scrollbar to prevent layout shift */
}

body {
    overflow-y: auto;
    min-height: 100vh;
}

/* Only lock body scroll when modal is explicitly open via JS */
/* This class should be added/removed by JavaScript when opening/closing modals */
body.modal-open {
    overflow: hidden;
}

/* ==========================================================================
   HEADER STICKY FIX
   ========================================================================== */

/* Ensure sticky header works correctly */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-bg);
}

/* Ensure main content flows properly under sticky header */
#main-content,
main {
    position: relative;
    z-index: var(--z-base);
}

/* ==========================================================================
   CHECKOUT OPTIMIZATION (PHASE 7.5)
   ========================================================================== */

/* Payment Methods List */
#payment ul.payment_methods {
    list-style: none outside !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
}

#payment ul.payment_methods li {
    list-style: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    background: #fff;
    border: 3px solid #000;
}

#payment ul.payment_methods li.payment_method_stripe {
    /* Special styling for Stripe if needed */
}

/* Hide duplicate "Billing details" heading from WC default template */
.woocommerce-billing-fields>h3 {
    display: none;
}

/* Radio Button Label */
#payment ul.payment_methods li label {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 16px !important;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

/* Hover State */
#payment ul.payment_methods li:hover {
    box-shadow: 4px 4px 0px 0px #000;
    transform: translate(-1px, -1px);
}

/* Selected State logic relies on JS or checking input */
/* Since using standard WC, we use the input:checked state selector */
#payment ul.payment_methods li input[type=radio]:checked+label {
    background-color: #FF90E8;
    /* Accent */
    color: #000;
}

/* ==========================================================================
   CHECKOUT FORM LAYOUT
   ========================================================================== */

/* Wrapper Clearfix */
.woocommerce-billing-fields__field-wrapper:before,
.woocommerce-billing-fields__field-wrapper:after {
    content: " ";
    display: table;
}

.woocommerce-billing-fields__field-wrapper:after {
    clear: both;
}

/* Row Styling */
.woocommerce form .form-row {
    padding: 0;
    margin: 0 0 20px;
    width: 100%;
}

/* Columns */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 48%;
    float: left;
}

.woocommerce form .form-row-last {
    float: right;
    margin-right: 0;
}

.woocommerce form .form-row-wide {
    width: 100%;
    clear: both;
}

/* Label Styling */
.woocommerce form .form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1;
}

/* Required star */
.woocommerce form .form-row label .required {
    color: var(--color-error);
    text-decoration: none;
    visibility: visible;
}

/* Input/Select adjustment */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    width: 100%;
}

/* The Radio Button Itself */
#payment ul.payment_methods li input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 3px solid #000;
    background: #fff;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
}

#payment ul.payment_methods li input[type=radio]:checked {
    background: #000;
    box-shadow: inset 0 0 0 4px #fff;
    /* Create a 'dot' effect using borders */
}

/* Payment Box (Description/Card Fields) */
#payment div.payment_box {
    padding: 16px;
    background: #F3F4F6;
    border-top: 3px solid #000;
    font-size: 14px;
    color: #333;
    position: relative;
}

#payment div.payment_box::before {
    display: none !important;
    /* Remove the arrow triangle */
}

/* Place Order Button Container */
#payment .form-row.place-order {
    padding: 0 !important;
    margin-top: 24px !important;
}

/* Terms Checkbox */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 24px;
}

.woocommerce-form__input-checkbox {
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #000 !important;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    vertical-align: middle;
    margin-right: 8px;
}

.woocommerce-form__input-checkbox:checked {
    background: #000;
    box-shadow: inset 0 0 0 4px #fff;
}

/* Validation Styles (Added by JS) */
input.border-red-500 {
    border-color: #EF4444 !important;
    background-color: #FEF2F2 !important;
}

input.border-green-500 {
    border-color: #10B981 !important;
}

/* Button Processing State */
button.cursor-wait {
    cursor: wait !important;
}

/* ==========================================================================
   SELECT2 OVERRIDES (Country Dropdown)
   ========================================================================== */

.select2-container .select2-selection--single {
    height: 50px !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding-left: 12px !important;
    line-height: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 12px !important;
    width: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #000 transparent transparent transparent !important;
    border-width: 6px 4px 0 4px !important;
    margin-left: -4px !important;
    margin-top: -3px !important;
}

.select2-dropdown {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1) !important;
}

.select2-search__field {
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    padding: 8px !important;
}

.select2-results__option {
    padding: 8px 12px !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #FF90E8 !important;
    color: #000 !important;
}

/* ==========================================================================
   MY ACCOUNT NAVIGATION
   ========================================================================== */

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 3px solid #000;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 3px solid #000;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 1rem 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    transition: all 0.2s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #FF90E8;
    padding-left: 2rem;
    /* Slide effect */
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #000;
    color: #fff;
}

/* Layout for My Account Page (Sidebar + Content) */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.woocommerce-MyAccount-navigation {
    width: 100%;
    flex: 0 0 100%;
}

.woocommerce-MyAccount-content {
    width: 100%;
    flex: 1;
    border: 3px solid #000;
    padding: 2rem;
    background: #fff;
    box-shadow: 8px 8px 0px 0px #000;
}

@media (min-width: 768px) {
    .woocommerce-MyAccount-navigation {
        flex: 0 0 250px;
    }
}

/* ==========================================================================
   WISHLIST STYLING (Generic Support)
   ========================================================================== */

.wishlist_table,
.tinv-wishlist table,
table.yith-wcwl-table {
    border: 3px solid #000 !important;
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1) !important;
    background: #fff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 2rem !important;
}

.wishlist_table thead th,
.tinv-wishlist thead th,
table.yith-wcwl-table thead th {
    background-color: #000 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    padding: 1rem !important;
    border-bottom: 3px solid #000 !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.wishlist_table tbody td,
.tinv-wishlist tbody td,
table.yith-wcwl-table tbody td {
    border-bottom: 3px solid #000 !important;
    padding: 1rem !important;
    font-family: 'Space Mono', monospace !important;
}

.wishlist_table tr:last-child td,
.tinv-wishlist tr:last-child td,
table.yith-wcwl-table tr:last-child td {
    border-bottom: none !important;
}

/* Add to Cart Button in Wishlist */
.wishlist_table .add_to_cart_button,
.tinv-wishlist .add_to_cart_button {
    display: inline-block !important;
    border: 2px solid #000 !important;
    background-color: #fff !important;
    color: #000 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    box-shadow: 4px 4px 0px 0px #000 !important;
    transition: all 0.2s ease !important;
}

.wishlist_table .add_to_cart_button:hover,
.tinv-wishlist .add_to_cart_button:hover {
    background-color: #000 !important;
    color: #fff !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px 0px #000 !important;
}

/* =========================================
   10. HOMEPAGE REFINEMENTS
   ========================================= */

/* Marquee styles */
.marquee-wrapper {
    background-color: #000;
    color: #fff;
    white-space: nowrap;
    position: relative;
    z-index: 20;
}

.marquee-content {
    display: inline-block;
    animation: marquee var(--marquee-speed, 20s) linear infinite;
}

.marquee-item {
    display: inline-block;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* HARD GRID LAYOUT */
.custom-shop-grid {
    display: flex;
    flex-wrap: wrap;
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    gap: 0 !important;
}

.custom-shop-grid>li {
    margin: 0 !important;
    border: none !important;
    border-right: 3px solid #000 !important;
    border-bottom: 3px solid #000 !important;
}

/* Remove internal card styles for grid look */
.custom-shop-grid .brutalist-card,
.custom-shop-grid article {
    border: none !important;
    box-shadow: none !important;
    height: 100%;
}

.custom-shop-grid article:hover {
    transform: none !important;
    background-color: #f0f0f0;
}

/* ==========================================================================
   WOOCOMMERCE DEFAULT PRODUCTS GRID (Cross-sells, Up-sells, Related, etc)
   ========================================================================== */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 0 3rem 0 !important;
    padding: 0 !important;
}

ul.products.columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

ul.products.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

ul.products.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

ul.products li.product a.aspect-2-3 {
    display: block !important;
}

ul.products li.product a.aspect-2-3 img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {

    ul.products.columns-3,
    ul.products.columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    ul.products {
        grid-template-columns: 1fr !important;
    }
}