/* =============================================
   MENU & NAVIGATION - FOR "FLOAT RIGHT" SETTING
   FOR GENERATEPRESS THEME - VERSION 11
   ============================================= */

/* =============================================
   CUSTOM FONT
   ============================================= */

@font-face {
    font-family: 'UI-Base';
    src: url('https://vinylpatches.com/wp-content/uploads/2026/01/UI-Base.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   HIDE HAMBURGER MENU (ALL SCREEN SIZES)
   ============================================= */

.menu-toggle,
.mobile-menu-control-wrapper,
button.menu-toggle,
#generate-slideout-menu,
.slideout-navigation {
    display: none !important;
    visibility: hidden !important;
}

/* =============================================
   REMOVE FOCUS OUTLINE ON NAV BUTTONS (ALL SIZES)
   ============================================= */

.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li a:active,
.main-navigation .main-nav ul li a:focus-visible,
.main-navigation a:focus,
.main-navigation a:active {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.main-navigation .main-nav ul li.current-menu-item > a:focus,
.main-navigation .main-nav ul li.current-menu-item > a:active,
.main-navigation .main-nav ul li.current_page_item > a:focus,
.main-navigation .main-nav ul li.current_page_item > a:active {
    outline: none !important;
    outline-width: 0 !important;
}

/* =============================================
   DESKTOP STYLES (1169px+)
   ============================================= */

@media (min-width: 1169px) {

    .site-header {
        background: rgba(250, 250, 250, 0.3) !important;
        backdrop-filter: blur(15px) saturate(180%) brightness(1.3) !important;
        -webkit-backdrop-filter: blur(15px) saturate(180%) brightness(1.3) !important;
        border-bottom: 1.5px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        overflow: visible !important;
    }

    .inside-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        padding-right: 280px !important;
    }

    .main-navigation,
    #site-navigation {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .main-navigation .main-nav > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    /* DESKTOP MENU BUTTONS - Normal state */
    .main-navigation .main-nav ul li a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 160px !important;
        height: 48px !important;
        padding: 8px 20px 0 20px !important;
        margin: 6px 8px !important;
        background: linear-gradient(180deg,
            rgba(130, 160, 175, 0.6) 0%,
            rgba(104, 143, 158, 0.5) 50%,
            rgba(90, 125, 140, 0.6) 100%) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1.5px solid rgba(104, 143, 158, 0.6) !important;
        border-radius: 18px !important;
        color: #1a1a1a !important;
        text-decoration: none !important;
        font-family: 'UI-Base', sans-serif !important;
        font-size: 0.6rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        line-height: normal !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(180, 200, 210, 0.4) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        outline: none !important;
    }

    /* DESKTOP MENU BUTTONS - Hover */
    .main-navigation .main-nav ul li a:hover {
        background: linear-gradient(180deg,
            rgba(150, 180, 195, 0.7) 0%,
            rgba(130, 160, 175, 0.6) 50%,
            rgba(110, 145, 160, 0.7) 100%) !important;
        transform: translateY(-2px) !important;
        border-color: rgba(130, 160, 175, 0.7) !important;
        color: #ffffff !important;
        outline: none !important;
    }

    /* DESKTOP MENU BUTTONS - Active/Press */
    .main-navigation .main-nav ul li a:active {
        background: rgba(255, 255, 255, 0.5) !important;
        transform: translateY(0px) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        outline: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    }

    /* DESKTOP MENU BUTTONS - Current page */
    .main-navigation .main-nav ul li.current-menu-item > a,
    .main-navigation .main-nav ul li.current_page_item > a {
        background:
            linear-gradient(135deg, rgba(212, 175, 130, 0.8), rgba(195, 160, 115, 0.8)),
            url('https://vinylpatches.com/wp-content/uploads/2026/01/Vinyl-Texture-S.png') repeat !important;
        background-size: auto, 0.7% !important;
        backdrop-filter: none !important;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(1px) !important;
        border-color: rgba(180, 145, 100, 0.9) !important;
        color: #e0e0e0 !important;
        text-shadow: -1px -1px 0 #6b4423, 1px -1px 0 #6b4423, -1px 1px 0 #6b4423, 1px 1px 0 #6b4423 !important;
        outline: none !important;
    }

    /* DESKTOP MENU BUTTONS - Current page on press */
    .main-navigation .main-nav ul li.current-menu-item > a:active,
    .main-navigation .main-nav ul li.current_page_item > a:active {
        background:
            linear-gradient(135deg, rgba(212, 175, 130, 0.8), rgba(195, 160, 115, 0.8)),
            url('https://vinylpatches.com/wp-content/uploads/2026/01/Vinyl-Texture-S.png') repeat !important;
        background-size: auto, 0.7% !important;
        border-color: rgba(180, 145, 100, 0.9) !important;
        outline: none !important;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    /* DESKTOP ACCOUNT & CART BUTTONS */
    .custom-header-buttons {
        position: absolute !important;
        top: 20px !important;
        right: 30px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        padding: 0 !important;
        display: flex !important;
        gap: 10px !important;
        z-index: 9999 !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .header-account-btn,
    .header-cart-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        padding: 12px 24px !important;
        min-height: 48px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 2px solid rgba(212, 184, 150, 0.5) !important;
        border-radius: 12px !important;
        color: #1a1a1a !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        outline: none !important;
    }

    .header-account-btn svg,
    .header-cart-btn svg {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    .header-account-btn:hover,
    .header-cart-btn:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) !important;
        transform: translateY(-2px) !important;
        border-color: rgba(212, 184, 150, 0.7) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2),
                    0 0 20px rgba(212, 184, 150, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
        color: #ffffff !important;
        outline: none !important;
    }

    .header-account-btn:active,
    .header-cart-btn:active {
        transform: translateY(0px) !important;
        background: linear-gradient(135deg, rgba(212, 184, 150, 0.3), rgba(212, 184, 150, 0.15)) !important;
        border-color: rgba(212, 184, 150, 0.5) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                    0 0 15px rgba(212, 184, 150, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        outline: none !important;
    }

    .header-account-btn:focus,
    .header-cart-btn:focus,
    .header-account-btn:focus-visible,
    .header-cart-btn:focus-visible {
        outline: none !important;
    }

    .cart-count {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        background: linear-gradient(135deg, #d4b896, #c9a87a) !important;
        color: #fff !important;
        border-radius: 50% !important;
        min-width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        border: 3px solid #fff !important;
    }

    .site-branding {
        margin-left: 40px !important;
    }

    /* ANIMATED BORDER LINE UNDER DESKTOP HEADER */
    .site-header::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        width: 200%;
        height: 6px;
        transform: translateX(-50%);
        background: linear-gradient(
            90deg,
            rgba(104, 143, 158, 0.6) 0%,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.9) 25%,
            rgba(255, 255, 255, 0.1) 30%,
            rgba(104, 143, 158, 0.6) 45%,
            rgba(104, 143, 158, 0.6) 55%,
            rgba(255, 255, 255, 0.1) 70%,
            rgba(255, 255, 255, 0.9) 75%,
            rgba(255, 255, 255, 0.1) 80%,
            rgba(104, 143, 158, 0.6) 100%
        );
        background-size: 200% 100%;
        box-shadow: 0 2px 8px rgba(104, 143, 158, 0.3);
        animation: sweepLine 9.8s linear infinite;
        z-index: 1000;
    }

    @keyframes sweepLine {
        0%   { background-position: 200% 0%; }
        100% { background-position: 0% 0%; }
    }

} /* end desktop (1169px+) */

/* =============================================
   MOBILE STYLES (1168px and below)
   ============================================= */

@media (max-width: 1168px) {

    /* HEADER */
    body .site-header,
    html body .site-header {
        background: rgba(250, 250, 250, 0.3) !important;
        backdrop-filter: blur(15px) saturate(180%) brightness(1.3) !important;
        -webkit-backdrop-filter: blur(15px) saturate(180%) brightness(1.3) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: none !important;
    }

    /* INSIDE HEADER */
    body .inside-header,
    html body .inside-header,
    .site-header .inside-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* LOGO - CENTERED */
    body .site-branding,
    html body .site-branding,
    .inside-header .site-branding,
    .site-header .site-branding {
        float: none !important;
        clear: both !important;
        margin: 0 auto !important;
        padding: 5px 0 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    body .site-branding-container,
    html body .site-branding-container,
    .site-branding .site-branding-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        float: none !important;
    }

    body .site-logo,
    html body .site-logo,
    .site-branding .site-logo {
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        float: none !important;
    }

    body .site-logo img,
    body .custom-logo,
    html body .site-logo img,
    html body .custom-logo {
        max-height: 80px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* NAVIGATION */
    body .main-navigation,
    body #site-navigation,
    html body .main-navigation,
    html body #site-navigation {
        float: none !important;
        clear: both !important;
        margin: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        margin-top: 12px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(20px) !important;
        background: linear-gradient(180deg,
            rgba(100, 115, 125, 0.65) 0%,
            rgba(85, 100, 110, 0.6) 50%,
            rgba(75, 90, 100, 0.65) 100%) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 2px solid rgba(80, 95, 105, 0.5) !important;
        border-bottom: 2px solid rgba(80, 95, 105, 0.5) !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: inset 0 10px 16px -6px rgba(0, 0, 0, 0.6) !important;
        padding: 14px 0 !important;
    }

    body .main-navigation .inside-navigation,
    html body .main-navigation .inside-navigation {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    body .main-navigation .main-nav,
    html body .main-navigation .main-nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }

    body .main-navigation .main-nav > ul,
    html body .main-navigation .main-nav > ul,
    body .main-navigation .main-nav ul,
    html body .main-navigation .main-nav ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 10px !important;
        list-style: none !important;
        background: transparent !important;
        float: none !important;
        text-align: center !important;
    }

    body .main-navigation .main-nav > ul > li,
    html body .main-navigation .main-nav > ul > li,
    body .main-navigation .main-nav ul li,
    html body .main-navigation .main-nav ul li {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        position: relative !important;
        text-align: center !important;
    }

    /* MOBILE MENU BUTTONS - Normal state */
    body .main-navigation .main-nav ul li a,
    html body .main-navigation .main-nav ul li a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;
        height: 42px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        line-height: 1 !important;
        border-radius: 6px !important;
        background: rgba(225, 225, 225, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(180, 180, 180, 0.6) !important;
        color: #1a1a1a !important;
        text-decoration: none !important;
        font-family: 'UI-Base', sans-serif !important;
        font-size: 0.52rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        float: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* MOBILE MENU BUTTONS - Hover */
    body .main-navigation .main-nav ul li a:hover,
    html body .main-navigation .main-nav ul li a:hover {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: rgba(180, 180, 180, 0.6) !important;
        outline: none !important;
    }

    /* MOBILE MENU BUTTONS - Active/Press */
    body .main-navigation .main-nav ul li a:active,
    html body .main-navigation .main-nav ul li a:active {
        background: rgba(240, 240, 240, 0.95) !important;
        border-color: rgba(180, 180, 180, 0.6) !important;
        transform: translateY(1px) !important;
        outline: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }

    /* MOBILE MENU BUTTONS - Current page */
    body .main-navigation .main-nav ul li.current-menu-item > a,
    body .main-navigation .main-nav ul li.current_page_item > a,
    html body .main-navigation .main-nav ul li.current-menu-item > a,
    html body .main-navigation .main-nav ul li.current_page_item > a {
        background:
            linear-gradient(135deg, rgba(212, 175, 130, 0.9), rgba(195, 160, 115, 0.9)),
            url('https://vinylpatches.com/wp-content/uploads/2026/01/Vinyl-Texture-S.png') repeat !important;
        background-size: auto, 12% !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1.5px solid #b59576 !important;
        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, 0.3),
            inset 0 1px 2px rgba(0, 0, 0, 0.35),
            0 1px 2px rgba(0, 0, 0, 0.15) !important;
        color: #ebebeb !important;
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.5),
            -1px -1px 0 #6b4423,
            1px -1px 0 #6b4423,
            -1px 1px 0 #6b4423,
            1px 1px 0 #6b4423 !important;
        transform: translateY(1px) !important;
        outline: none !important;
    }

    /* MOBILE MENU BUTTONS - Current page on press */
    body .main-navigation .main-nav ul li.current-menu-item > a:active,
    body .main-navigation .main-nav ul li.current_page_item > a:active,
    html body .main-navigation .main-nav ul li.current-menu-item > a:active,
    html body .main-navigation .main-nav ul li.current_page_item > a:active {
        background:
            linear-gradient(135deg, rgba(212, 175, 130, 0.2), rgba(195, 160, 115, 0.2)),
            url('https://vinylpatches.com/wp-content/uploads/2026/01/Vinyl-Texture-S.png') repeat !important;
        background-size: auto, 60% !important;
        border: 1.5px solid #b59576 !important;
        outline: none !important;
        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, 0.3),
            inset 0 1px 2px rgba(0, 0, 0, 0.35),
            0 1px 2px rgba(0, 0, 0, 0.15) !important;
    }

    /* MOBILE MENU BUTTONS - Focus */
    body .main-navigation .main-nav ul li a:focus,
    body .main-navigation .main-nav ul li a:focus-visible,
    html body .main-navigation .main-nav ul li a:focus,
    html body .main-navigation .main-nav ul li a:focus-visible {
        outline: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }

    /* ACCOUNT & CART BUTTONS - MOBILE */
    body .custom-header-buttons,
    html body .custom-header-buttons,
    .inside-header .custom-header-buttons {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        clear: both !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 15px 2px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        background: transparent !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
    }

    body .header-account-btn,
    body .header-cart-btn,
    html body .header-account-btn,
    html body .header-cart-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: calc(45vw - 10px) !important;
        min-width: 140px !important;
        max-width: 180px !important;
        height: 48px !important;
        flex: 0 0 auto !important;
        padding: 12px 20px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 2px solid rgba(212, 184, 150, 0.5) !important;
        border-radius: 12px !important;
        color: #1a1a1a !important;
        text-decoration: none !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        outline: none !important;
    }

    body .header-account-btn:active,
    body .header-cart-btn:active,
    html body .header-account-btn:active,
    html body .header-cart-btn:active {
        transform: scale(0.95) !important;
        background: linear-gradient(135deg, rgba(212, 184, 150, 0.4), rgba(212, 184, 150, 0.2)) !important;
        border-color: rgba(212, 184, 150, 0.5) !important;
        outline: none !important;
    }

    body .header-account-btn:focus,
    body .header-cart-btn:focus,
    body .header-account-btn:focus-visible,
    body .header-cart-btn:focus-visible,
    html body .header-account-btn:focus,
    html body .header-cart-btn:focus {
        outline: none !important;
    }

    body .header-account-btn svg,
    body .header-cart-btn svg,
    html body .header-account-btn svg,
    html body .header-cart-btn svg {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    body .cart-count,
    html body .cart-count {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        background: linear-gradient(135deg, #d4b896, #c9a87a) !important;
        color: #fff !important;
        border-radius: 50% !important;
        min-width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        border: 3px solid #fff !important;
    }

} /* end mobile (1168px and below) */

/* =============================================
   SMALL PHONES (375px and below)
   ============================================= */

@media (max-width: 375px) {

    body .main-navigation .main-nav ul li a,
    html body .main-navigation .main-nav ul li a {
        width: 95px !important;
        min-width: 95px !important;
        max-width: 95px !important;
        height: 38px !important;
        font-size: 0.45rem !important;
    }

    body .main-navigation .main-nav > ul,
    html body .main-navigation .main-nav > ul {
        gap: 6px !important;
    }

    body .header-account-btn,
    body .header-cart-btn,
    html body .header-account-btn,
    html body .header-cart-btn {
        min-width: 120px !important;
        height: 44px !important;
        font-size: 13px !important;
    }

} /* end small phones (375px) */

/* =============================================
   VERY SMALL PHONES (320px and below)
   ============================================= */

@media (max-width: 320px) {

    body .main-navigation .main-nav ul li a,
    html body .main-navigation .main-nav ul li a {
        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
        height: 36px !important;
        font-size: 0.4rem !important;
    }

    body .main-navigation .main-nav > ul,
    html body .main-navigation .main-nav > ul {
        gap: 4px !important;
    }

} /* end very small phones (320px) */

/* =============================================
   ACCESSIBILITY - Keyboard focus only
   ============================================= */

.main-navigation .main-nav ul li a:focus-visible {
    outline: 2px solid rgba(100, 100, 100, 0.5) !important;
    outline-offset: 2px !important;
}

.header-account-btn:focus-visible,
.header-cart-btn:focus-visible {
    outline: 2px solid rgba(100, 100, 100, 0.5) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}
/* =============================================
   CUSTOM ORDER SUBMENU (standalone div at end of body)
   ============================================= */

#st-order-submenu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(225, 198, 165, 0.95), rgba(215, 188, 155, 0.95));
    border: 1.5px solid rgba(200, 170, 130, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

#st-order-submenu.st-submenu-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Order button z-index: sits ON TOP of the tan backing ── */

.main-navigation .main-nav > ul > li > a {
    position: relative !important;
    z-index: 1000000 !important;
}

/* ── Submenu: Desktop ── */

@media (min-width: 1169px) {
    #st-order-submenu {
        width: 125px;
        min-width: 125px;
        padding: 8px 6.5px 5px 6.5px;
        border-radius: 0;
        gap: 6px;
    }

    .st-submenu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 110% !important;
        margin-left: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 0 8px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.3 !important;
        font-family: 'UI-Base', sans-serif !important;
        font-size: 0.55rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg,
            rgb(115, 148, 163) 0%,
            rgb(93, 130, 145) 50%,
            rgb(80, 115, 130) 100%) !important;
        border: 1.5px solid rgb(85, 122, 137) !important;
        outline: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(180, 210, 220, 0.4) !important;
        box-sizing: border-box !important;
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
        color: #f0f0f0 !important;
        text-decoration: none !important;
        text-shadow: none !important;
    }

    .st-submenu-btn:hover {
        background: linear-gradient(180deg,
            rgb(130, 165, 180) 0%,
            rgb(108, 148, 163) 50%,
            rgb(95, 132, 148) 100%) !important;
        border-color: rgb(100, 140, 155) !important;
        color: #ffffff !important;
        text-shadow: none !important;
    }

    /* Desktop press: darker blue + black text */
    .st-submenu-btn:active,
    .st-submenu-btn.st-btn-pressed {
        background: linear-gradient(180deg,
            rgb(70, 105, 120) 0%,
            rgb(55, 90, 105) 50%,
            rgb(45, 78, 93) 100%) !important;
        border-color: rgb(50, 85, 100) !important;
        color: #1a1a1a !important;
        text-shadow: none !important;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
        outline: none !important;
    }

    .st-submenu-btn:focus,
    .st-submenu-btn:focus-visible {
        outline: none !important;
    }

    .st-submenu-btn:last-child {
        margin-bottom: -4px !important;
    }
}

/* ── Submenu: Mobile ── */

@media (max-width: 1168px) {
    #st-order-submenu {
        width: 105px;
        min-width: 105px;
        padding: 7px 5px 4.5px 5px;
        border-radius: 0;
        gap: 4px;
    }

    .st-submenu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 38px !important;
        padding: 0 4px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.3 !important;
        font-family: 'UI-Base', sans-serif !important;
        font-size: 0.5rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        border-radius: 6px !important;
        background: rgba(225, 225, 225, 0.95) !important;
        border: 1px solid rgba(180, 180, 180, 0.6) !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        color: #1a1a1a !important;
        text-shadow: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        box-sizing: border-box !important;
        transition: none !important;
        text-decoration: none !important;
    }

    /* Lock hover/focus identical to normal */
    .st-submenu-btn:hover,
    .st-submenu-btn:focus,
    .st-submenu-btn:focus-visible {
        background: rgba(225, 225, 225, 0.95) !important;
        background-image: none !important;
        border: 1px solid rgba(180, 180, 180, 0.6) !important;
        color: #1a1a1a !important;
        text-shadow: none !important;
        outline: none !important;
        transform: none !important;
        -webkit-tap-highlight-color: transparent !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }

    /* Mobile press: JS adds .st-btn-pressed class */
    .st-submenu-btn:active,
    .st-submenu-btn.st-btn-pressed {
        background: rgba(195, 195, 195, 0.95) !important;
        background-image: none !important;
        border-color: rgba(165, 165, 165, 0.7) !important;
        color: #1a1a1a !important;
        text-shadow: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(1px) !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .st-submenu-btn:last-child {
        margin-bottom: -4px !important;
    }
}

@media (max-width: 375px) {
    #st-order-submenu {
        width: 95px;
        min-width: 95px;
    }

    .st-submenu-btn {
        font-size: 0.45rem !important;
        min-height: 34px !important;
    }
}

@media (max-width: 320px) {
    #st-order-submenu {
        width: 85px;
        min-width: 85px;
    }
}

/* ── Fix: Lock Order button texture on mobile when current page ── */

html body .main-navigation .main-nav > ul > li.current-menu-item > a,
html body .main-navigation .main-nav > ul > li.current-menu-item > a:hover,
html body .main-navigation .main-nav > ul > li.current-menu-item > a:focus,
html body .main-navigation .main-nav > ul > li.current-menu-item > a:focus-visible,
html body .main-navigation .main-nav > ul > li.current-menu-item > a:active,
html body .main-navigation .main-nav > ul > li.current_page_item > a,
html body .main-navigation .main-nav > ul > li.current_page_item > a:hover,
html body .main-navigation .main-nav > ul > li.current_page_item > a:focus,
html body .main-navigation .main-nav > ul > li.current_page_item > a:focus-visible,
html body .main-navigation .main-nav > ul > li.current_page_item > a:active {
    background:
        linear-gradient(135deg, rgba(212, 175, 130, 0.9), rgba(195, 160, 115, 0.9)),
        url('https://vinylpatches.com/wp-content/uploads/2026/01/Vinyl-Texture-S.png') repeat !important;
    background-size: auto, 12% !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        -1px -1px 0 #6b4423,
        1px -1px 0 #6b4423,
        -1px 1px 0 #6b4423,
        1px 1px 0 #6b4423 !important;
    transform: none !important;
    outline: none !important;
}