/* ═══════════════════════════════════════════════════════════
   SONGSHIFT CRITICAL OVERRIDES — wp_head p999 (loads last)
   Beats global-styles, block CSS, plugin CSS, Customizer CSS.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. LOGO SIZING ─────────────────────────────────────────
   WP custom_logo outputs: .site-logo > a.custom-logo-link > img.custom-logo
   WP core sets img { height: auto } which max-height cannot beat.
   We use height: 60px !important to win regardless of source order. */
#site-header img.custom-logo,
#site-header .custom-logo-link img,
#site-header .site-logo img,
#site-header .site-logo a img,
.site-logo img.custom-logo,
.custom-logo-link img,
img.custom-logo {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}
#site-header .site-logo,
.site-logo {
    max-height: 60px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}
#site-header .custom-logo-link,
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    max-height: 60px !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

/* ── 2. HEADER HEIGHT ───────────────────────────────────────*/
#site-header .header-inner,
.header-inner {
    height: 64px !important;
}

/* ── 3. PAGE CONTENT OFFSET — push below fixed 64px header ─*/
#main-content {
    padding-top: 64px !important;
}

/* ── 4. HERO: cancel the offset — hero self-pads 110px ─────*/
#main-content > .hero:first-child {
    margin-top: -64px !important;
}

/* ── 5. ADMIN BAR ADJUSTMENTS ───────────────────────────────*/
.admin-bar #site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
    .admin-bar #site-header { top: 46px !important; }
    .admin-bar #main-content { padding-top: 110px !important; }
}

/* ── 6. WC EMPTY STATE ───────────────────────────────────────
   Force flex-column on .woocommerce-info inside account area
   so the ::before emoji icon sits ABOVE the text, not on top.  */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 56px 40px 48px !important;
    border-left: none !important;
    position: static !important;
    min-height: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
    display: block !important;
    position: static !important;
    float: none !important;
    margin: 0 0 20px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* ── 7. ADDRESSES — kill WC floats, force grid layout ───────
   WC floats .u-column1/.u-column2 at 48% — must override.   */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .addresses,
.woocommerce-account .col2-set.addresses {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    overflow: visible !important;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1.woocommerce-Address,
.woocommerce-account .col-2.woocommerce-Address,
.woocommerce-account .woocommerce-Address {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: none !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-Addresses,
    .woocommerce-account .addresses,
    .woocommerce-account .col2-set.addresses {
        grid-template-columns: 1fr !important;
    }
}

/* ── 8. SELECT DROPDOWNS — dark theme visibility ────────────*/
.songshift-form select,
.songshift-order-form select,
select.songshift-select,
.ss-wizard-wrap select,
.ss-wizard-wrap .ss-select {
    color: #ffffff !important;
    background-color: #101827 !important;
    border: 2px solid rgba(0, 212, 255, 0.35) !important;
}
select { color: #ffffff !important; }
select option {
    color: #ffffff !important;
    background: #101827 !important;
}
select option:checked {
    background: #8fb0d4 !important;
    color: #000 !important;
}