/* ======================================================
   DANIELFANTASY.COM
   MERCY IN RUIN - COMPLETE WEBSITE DESIGN

   Includes:
   1. Original Spell Codex design
   2. Gothic website foundation
   3. Silver title animations
   4. Crimson ornamental details
   5. Artwork and button effects
   6. Ultimate Member form styling

   SPELL CODEX PAGE: 1459 - EXCLUDED
   ====================================================== */


/* ======================================================
   PART 1 - ORIGINAL SPELL CODEX
   ====================================================== */

/* CODEX HEADER */

.codex-header {
    padding: 24px;
    background: #0f0f0f;
    color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
}

.codex-header h1 {
    margin: 0 0 8px 0;
    font-size: 24px;
}

.codex-header p {
    opacity: 0.7;
    margin-bottom: 12px;
}

.codex-section {
    margin-bottom: 18px;
}

.codex-section strong {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.9;
}

.codex-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.codex-links a {
    padding: 5px 10px;
    background: #1f1f1f;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
}

.codex-links a:hover {
    background: #333;
}


/* CODEX GRID AND CARDS */

.wp-block-query {
    gap: 12px;
}

.wp-block-post-template {
    gap: 12px;
}

.wp-block-post {
    background: #111;
    padding: 10px 12px;
    border-radius: 8px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transition: transform 0.18s ease,
                box-shadow 0.18s ease;
}

.wp-block-post:hover {
    transform: translateY(-4px) scale(1.01);
    background: #1a1a1a;
    z-index: 5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.wp-block-post-title {
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.2px;
}

.wp-block-post-excerpt {
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.85;
    margin: 0;
    letter-spacing: 0.1px;
}

.wp-block-post-terms {
    font-size: 10px;
    opacity: 0.8;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wp-block-post-terms a {
    background: #222;
    padding: 2px 6px;
    border-radius: 3px;
    text-decoration: none;
    color: white;
}

.wp-block-post-template:hover .wp-block-post {
    opacity: 0.85;
}

.wp-block-post-template .wp-block-post:hover {
    opacity: 1;
}

.wp-block-post::after {
    content: "";
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 10px;
    opacity: 0;
    transition: 0.2s ease;
    color: rgba(255,255,255,0.4);
}

.wp-block-post:hover::after {
    opacity: 1;
}


/* SCHOOL COLOUR TAG SYSTEM */

a[href*="black-magic"] {
    border-left: 3px solid #5b2a86;
    padding-left: 6px;
}

a[href*="flow-magic"] {
    border-left: 3px solid #65EBDE;
    padding-left: 6px;
}

a[href*="singularity-magic"] {
    border-left: 3px solid #9E7B90;
    padding-left: 6px;
}

a[href*="demonology-magic"] {
    border-left: 3px solid #520C36;
    padding-left: 6px;
}

a[href*="blacklight-magic"] {
    border-left: 3px solid #9b59b6;
    padding-left: 6px;
}

a[href*="fire-elemental-magic"] {
    border-left: 3px solid #ff4b2b;
    padding-left: 6px;
}

a[href*="water-elemental-magic"] {
    border-left: 3px solid #3498db;
    padding-left: 6px;
}

a[href*="earth-elemental-magic"] {
    border-left: 3px solid #7d6608;
    padding-left: 6px;
}

a[href*="elemental-air-magic"] {
    border-left: 3px solid #85c1e9;
    padding-left: 6px;
}

a[href*="necrotic-magic"] {
    border-left: 3px solid #27ae60;
    padding-left: 6px;
}

a[href*="illumination_magic"] {
    border-left: 3px solid #f1c40f;
}


/* SCHOOL GLOW SYSTEM */

.wp-block-post:has(a[href*="black-magic"]) {
    box-shadow: 0 0 10px rgba(91,42,134,0.25);
    border-left: 3px solid #5b2a86;
}

.wp-block-post:has(a[href*="fire-elemental-magic"]) {
    box-shadow: 0 0 10px rgba(255,75,43,0.25);
    border-left: 3px solid #ff4b2b;
}

.wp-block-post:has(a[href*="water-elemental-magic"]) {
    box-shadow: 0 0 10px rgba(52,152,219,0.25);
    border-left: 3px solid #3498db;
}

.wp-block-post:has(a[href*="earth-elemental-magic"]) {
    box-shadow: 0 0 10px rgba(125,102,8,0.25);
    border-left: 3px solid #7d6608;
}

.wp-block-post:has(a[href*="elemental-air-magic"]) {
    box-shadow: 0 0 10px rgba(133,193,233,0.25);
    border-left: 3px solid #85c1e9;
}

.wp-block-post:has(a[href*="necrotic-magic"]) {
    box-shadow: 0 0 10px rgba(39,174,96,0.25);
    border-left: 3px solid #27ae60;
}

.wp-block-post:has(a[href*="illumination_magic"]) {
    box-shadow: 0 0 10px rgba(241,196,15,0.25);
    border-left: 3px solid #f1c40f;
}


/* CLASS AND RARITY */

a[href*="common"] {
    opacity: 0.8;
}

a[href*="noble"] {
    color: #d4af37;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(212,175,55,0.4);
}


/* CODEX EQUATIONS */

.codex-equation {
    font-family: monospace;
    font-size: 11px;
    opacity: 0.85;
    background: #1a1a1a;
    padding: 4px 6px;
    border-radius: 4px;
    margin-top: 4px;
}


/* CODEX TITLE UNDERLINE REMOVAL */

.entry-title,
.entry-title a,
.page-title,
.page-title a,
.wp-block-post-title,
.wp-block-post-title a {
    text-decoration: none !important;
    border-bottom: none !important;
}

.entry-title a::after,
.page-title a::after,
.wp-block-post-title a::after {
    display: none !important;
    content: none !important;
}

.entry-title a,
.page-title a,
.wp-block-post-title a {
    box-shadow: none !important;
}

.spells .entry-title,
.spells .entry-title a,
.single-spells .entry-title,
.single-spells .entry-title a {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}


/* CODEX BUTTONS */

.codex-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}

.codex-section {
    text-align: center;
}

.wp-block-html {
    text-align: center;
}


/* CODEX SEARCH */

.codex-search {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px auto;
}

.codex-search input[type="text"] {
    padding: 6px 10px;
    background: #111;
    border: 1px solid #333;
    color: white;
    border-radius: 6px;
    width: 220px;
}

.codex-search input[type="search"] {
    width: 260px;
    padding: 8px 12px;
    background: #111;
    color: white;
    border: 1px solid #444;
    border-radius: 6px;
    font-size: 14px;
}

.codex-search button {
    padding: 8px 16px;
    background: #222;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.codex-search button:hover {
    background: #333;
}


/* ======================================================
   PART 2 - MERCY IN RUIN GOTHIC FOUNDATION

   EXCLUSIONS:
   - Spell Codex page 1459
   - Individual spell entries
   - Spell archives
   - Pages containing Codex interfaces
   ====================================================== */


/* MAIN COLOUR SYSTEM */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form)) {
    --mir-black: #0a0a0c;
    --mir-charcoal: #18181b;
    --mir-ivory: #f0ece4;
    --mir-silver: #c7c2bc;
    --mir-crimson: #902d39;

    --global--color-background: #0a0a0c;
    --global--color-primary: #f0ece4;
    --wp--preset--color--background: #0a0a0c;

    background: #0a0a0c !important;
    color: #f0ece4;
}


/* REMOVE LIGHT THEME BACKGROUNDS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
:is(
    .site,
    .site-content,
    .wp-site-blocks,
    main,
    .site-main,
    .content-area,
    .entry-content,
    .wp-block-post-content
) {
    background-color: transparent !important;
}


/* CINEMATIC MAIN CONTENT */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main {
    background-image:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(135,45,56,0.15),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #151517 0%,
            #080809 65%,
            #111113 100%
        ) !important;

    color: #f0ece4;
}


/* GOTHIC TYPOGRAPHY */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(h1, h2, h3) {
    font-family: Georgia, "Times New Roman", serif !important;
    color: #f0ece4 !important;
    font-weight: 400;
    letter-spacing: 0.065em;
    text-shadow: 0 3px 18px rgba(255,255,255,0.11);
}

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main h1 {
    letter-spacing: 0.1em;
    text-shadow:
        0 0 30px rgba(255,255,255,0.12),
        0 4px 15px rgba(0,0,0,0.5);
}


/* BODY TEXT */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(p, li) {
    color: #cbc6bf;
    line-height: 1.8;
}


/* HEADER AND FOOTER */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
:is(
    .site-header,
    header.wp-block-template-part,
    .site-footer,
    footer.wp-block-template-part
) {
    background: #111113 !important;
    color: #f0ece4 !important;
    border-color: #393438;
}


/* NAVIGATION COLOURS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
:is(.site-header, .primary-navigation, .wp-block-navigation) a {
    color: #f0ece4 !important;
    transition: color 0.25s ease;
}

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
:is(.site-header, .primary-navigation, .wp-block-navigation) a:hover {
    color: #db9da4 !important;
}


/* ORNAMENTAL DIVIDERS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(.wp-block-separator, hr) {
    border: 0 !important;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #a09a91 35%,
        #902d39 50%,
        #a09a91 65%,
        transparent
    ) !important;
    opacity: 1;
}


/* MANUSCRIPT QUOTES */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(.wp-block-quote, blockquote) {
    color: #f0ece4;
    border-left: 2px solid #902d39;
    background: rgba(255,255,255,0.035);
    padding: 20px;
    font-family: Georgia, serif;
}


/* IVORY BUTTONS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main .wp-block-button__link {
    background: #f0ece4 !important;
    color: #101012 !important;
    border: 1px solid #f0ece4 !important;
    border-radius: 2px !important;
    font-family: Georgia, serif;
    letter-spacing: 0.065em;
    box-shadow: 0 4px 0 #752832;
    transition: 0.25s ease;
}

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main .wp-block-button__link:hover {
    background: #ffffff !important;
    color: #101012 !important;
    box-shadow: 0 6px 0 #902d39;
    transform: translateY(-2px);
}


/* ======================================================
   PART 3 - THE INQUISITION'S TOUCH
   SILVER, ORNAMENTS AND ANIMATIONS
   ====================================================== */


/* SILVER-SHIMMERING HEADINGS */

@supports (-webkit-background-clip: text) {

    body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
    main h1 {

        background-image: linear-gradient(
            110deg,
            #a8a5a2 0%,
            #f6f2e9 27%,
            #c0bcb8 47%,
            #ffffff 55%,
            #b5b0a8 84%
        );

        background-size: 240% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        animation: mir-silver-sheen 16s ease-in-out infinite alternate;
    }
}

@keyframes mir-silver-sheen {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}


/* CRIMSON ORNAMENTS BEFORE SECTION HEADINGS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(.entry-content, .wp-block-post-content) h2::before {

    content: "✦";
    display: inline-block;
    margin-right: 0.6em;

    color: #a8404b;
    font-size: 0.55em;
    vertical-align: 0.14em;

    text-shadow: 0 0 13px rgba(168,64,75,0.28);
}


/* ELEGANT NAVIGATION UNDERLINE */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
header :is(.wp-block-navigation-item__content, .menu-item > a) {

    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45em;

    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
header :is(.wp-block-navigation-item__content, .menu-item > a):hover {
    text-decoration-color: #ab5360;
}


/* ARTWORK FRAMES */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main figure.wp-block-image img {

    border: 1px solid rgba(225,219,207,0.16);

    box-shadow: 0 14px 32px rgba(0,0,0,0.28);

    transition:
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main figure.wp-block-image:hover img {

    filter: contrast(1.04) brightness(1.05);

    box-shadow:
        0 19px 42px rgba(0,0,0,0.36),
        0 0 19px rgba(255,255,255,0.045);
}


/* ORNAMENTAL QUOTE FRAMES */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(blockquote, .wp-block-quote) {

    border-top: 1px solid rgba(238,232,220,0.18);
    border-right: 1px solid rgba(238,232,220,0.18);
    border-bottom: 1px solid rgba(238,232,220,0.18);

    box-shadow: 0 12px 35px rgba(0,0,0,0.17);
}


/* REFINED BUTTON INTERACTIONS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main .wp-block-button__link {

    font-weight: 700;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ======================================================
   PART 4 - ULTIMATE MEMBER
   ARC REGISTRATION AND LOGIN
   ====================================================== */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
.um {

    background: linear-gradient(
        145deg,
        #1e1e20,
        #111113
    ) !important;

    color: #f0ece4 !important;

    border: 1px solid #5b5555;
    border-top: 2px solid #902d39;

    border-radius: 2px;
    padding: 24px;
    box-sizing: border-box;

    box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}


/* FORM LABELS AND OPTIONS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
.um :is(
    .um-field-label label,
    .um-field-radio-option,
    .um-field-checkbox-option,
    .um-field-description
) {
    color: #eee8dd !important;
    font-family: Georgia, serif;
}


/* FORM FIELDS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
.um :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select
) {

    background: #252527 !important;
    color: #ffffff !important;
    border: 1px solid #777 !important;
    border-radius: 2px !important;
}


/* FORM SUBMIT BUTTON */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
.um :is(.um-button, input[type="submit"].um-button) {

    background: #f0ece4 !important;
    color: #101012 !important;

    border-radius: 2px !important;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700 !important;
    letter-spacing: 0.055em;
}

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
.um :is(.um-button, input[type="submit"].um-button):hover {
    background: #ffffff !important;
    color: #101012 !important;
}


/* ======================================================
   PART 5 - ACCESSIBILITY AND FINAL DETAILS
   ====================================================== */

/* KEYBOARD FOCUS */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main :is(a, button, input, select, textarea):focus-visible {

    outline: 2px solid #f1e9dc !important;
    outline-offset: 3px;
}


/* TEXT SELECTION */

body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
main ::selection {
    color: #fff;
    background: #792b35;
}


/* MOBILE ADJUSTMENTS */

@media (max-width: 768px) {

    body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
    .um {
        padding: 18px 14px;
    }

    body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
    main h1 {
        letter-spacing: 0.045em;
        overflow-wrap: anywhere;
    }

}


/* REDUCED MOTION */

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

    body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
    main h1 {
        animation: none !important;
    }

    body:not(.page-id-1459):not(.single-spells):not(.post-type-archive-spells):not(:has(.codex-header, .codex-search, .post-password-form))
    main :is(
        .wp-block-button__link,
        figure.wp-block-image img
    ) {
        transition: none !important;
        transform: none !important;
    }

}


/* ======================================================
   END OF MERCY IN RUIN WEBSITE DESIGN
   ====================================================== */
/* ============================================
  
/* ============================================
   MERCY IN RUIN - NAVIGATION FIX V2
   Dark navigation dropdowns and centred titles
   Spell Codex page 1459 excluded
   ============================================ */

/* 1. CLASSIC THEME NAVIGATION COLOURS */

body:not(.page-id-1459) .primary-navigation,
body:not(.page-id-1459) .main-navigation,
body:not(.page-id-1459) #site-navigation {
    --primary-nav--color-background: #1c1c1e;
    --primary-nav--color-text: #f0ece4;
    --primary-nav--color-text-hover: #ffffff;
    --primary-nav--border-color: #555052;
}

/* 2. TOP NAVIGATION DROPDOWN BACKGROUNDS */

body:not(.page-id-1459) .primary-navigation .sub-menu,
body:not(.page-id-1459) .main-navigation .sub-menu,
body:not(.page-id-1459) #site-navigation .sub-menu,
body:not(.page-id-1459) .primary-menu ul,
body:not(.page-id-1459) .wp-block-navigation__submenu-container {
    background: #1c1c1e !important;
    background-color: #1c1c1e !important;
    color: #f0ece4 !important;
    border-color: #555052 !important;
}

/* 3. REMOVE WHITE BACKGROUNDS FROM MENU ROWS */

body:not(.page-id-1459) .primary-navigation .sub-menu li,
body:not(.page-id-1459) .main-navigation .sub-menu li,
body:not(.page-id-1459) .primary-menu ul li,
body:not(.page-id-1459) .wp-block-navigation__submenu-container li {
    background-color: transparent !important;
}

/* 4. ENSURE DROPDOWN LETTERING IS READABLE */

body:not(.page-id-1459) .primary-navigation .sub-menu a,
body:not(.page-id-1459) .main-navigation .sub-menu a,
body:not(.page-id-1459) #site-navigation .sub-menu a,
body:not(.page-id-1459) .primary-menu ul a,
body:not(.page-id-1459) .wp-block-navigation__submenu-container a {
    color: #f0ece4 !important;
    background-color: transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* 5. SUBTLE CRIMSON HOVER */

body:not(.page-id-1459) .primary-navigation .sub-menu li:hover,
body:not(.page-id-1459) .main-navigation .sub-menu li:hover,
body:not(.page-id-1459) .primary-menu ul li:hover,
body:not(.page-id-1459) .wp-block-navigation__submenu-container li:hover {
    background-color: #342126 !important;
}

/* 6. CENTRE PAGE TITLES */

body:not(.page-id-1459):not(.single-spells)
:is(
    main h1,
    .entry-header .entry-title,
    .page-header .page-title,
    h1.wp-block-post-title
) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:not(.page-id-1459):not(.single-spells)
:is(.entry-header, .page-header) {
    text-align: center !important;
}

/* END OF NAVIGATION FIX V2 */

/* ==========================================
   MERCY IN RUIN
   WOOCOMMERCE PRODUCT DROPDOWN FIX
   ========================================== */

/* Colour and Size selector boxes */

body.single-product form.variations_form .variations select,
body.single-product .woocommerce .variations select,
body.single-product .variations select {

    background-color: #27272a !important;
    color: #f0ece4 !important;

    -webkit-text-fill-color: #f0ece4 !important;

    border: 1px solid #8e8781 !important;
    border-radius: 4px !important;

    opacity: 1 !important;
    color-scheme: dark;

    font-size: 16px !important;

    padding: 10px 12px !important;

    box-shadow: none !important;
}

/* Options inside the dropdown */

body.single-product .variations select option {

    background-color: #27272a !important;
    color: #f0ece4 !important;

    -webkit-text-fill-color: #f0ece4 !important;
}

/* Highlight when a selector is focused */

body.single-product .variations select:focus {

    background-color: #303035 !important;
    color: #ffffff !important;

    border-color: #d5d0c8 !important;

    outline: 2px solid #a19a92 !important;
    outline-offset: 2px;
}

/* Keep the Colour and Size labels readable */

body.single-product .variations th.label label,
body.single-product .variations label {

    color: #f0ece4 !important;
    opacity: 1 !important;
}

/* ==========================================
   END WOOCOMMERCE DROPDOWN FIX
   ========================================== */