:root {
    color-scheme: dark;
}

/**
 * With Blocksy's defaults (and changed colors), the select dropdowns (e.g. billing country) ended up being hard to read on Firefox instances running dark mode.
 * This forces the select dropdowns to have a dark background and light text, which is more readable.
 */
select option {
    color: var(--theme-palette-color-3) !important;
    background-color: var(--theme-palette-color-8) !important;
}

.wc-block-components-order-summary-item__quantity {
    background-color: var(--theme-palette-color-5) !important;
}

/**
 * Page ID 2 is the "Home" page
 */
body.page-id-2 {
    background-image: url('/wp-content/uploads/2026/08/IMG_5387-scaled.jpg');
    background-position: bottom 15% right 15%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Slight adjustment for mobile */
@media (max-width: 768px) {
    body.page-id-2 {
        background-position: bottom 10% right 5%;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

/* Slight adjustment for large/4K+ desktop displays */
@media (min-width: 2560px) {
    body.page-id-2 {
        background-position: bottom 5% right 5%;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

@media (min-width: 3840px) {
    body.page-id-2 {
        background-position: bottom 0% right 0%;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
}

body.page-id-2 main {
    background-color: rgba(6, 7, 10, 0.69);
    padding: 24px 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}