/* Horizontal overflow guard: belt + suspenders. Clips any rogue child so
   the page can never be swiped sideways (mobile white-stripe bug). */
html,
body.d8-branded {
    overflow-x: clip;
    max-width: 100%;
}

/* d8 Global — sitewide light theme override on top of Electro.
   Scoped to body.d8-branded so only d8onlinestore is affected, not other sites. */

/* ===== Root surface ===== */
html,
body.d8-branded,
body.d8-branded.electro-light,
body.d8-branded #page,
body.d8-branded .site,
body.d8-branded .site-inner,
body.d8-branded .site-content,
body.d8-branded .site-content-inner,
body.d8-branded #primary,
body.d8-branded #primary.content-area,
body.d8-branded .content-area,
body.d8-branded .site-main,
body.d8-branded main,
body.d8-branded .main,
body.d8-branded .main-content,
body.d8-branded #main {
    background: var(--d8-bg) !important;
    color: var(--d8-text);
}

/* Electro-specific shop/archive wrappers commonly left dark */
body.d8-branded .site-content,
body.d8-branded.woocommerce .site-content,
body.d8-branded.woocommerce-shop .site-content,
body.d8-branded.woocommerce-page .site-content,
body.d8-branded .archive.woocommerce .site-content,
body.d8-branded .category-banner,
body.d8-branded .electro-shop-banner,
body.d8-branded .products-header {
    background: var(--d8-bg) !important;
}

/* Most aggressive override for Electro's dark shop inner.
   Use background-color (not shorthand) and double-specify to outrank any
   Electro rule that happens to use the same body.d8-branded selector
   with !important in the bundled CSS. */
html body.d8-branded .site-content-inner,
html body.d8-branded .site-content-inner.row,
html body.d8-branded div.site-content-inner,
html body.d8-branded #primary,
html body.d8-branded #primary.content-area,
html body.d8-branded div#primary {
    background-color: var(--d8-bg) !important;
    background-image: none !important;
    color: var(--d8-text) !important;
}

/* Electro's shop banner / hero block right before the breadcrumb (if any) */
body.d8-branded .page-header,
body.d8-branded .entry-header,
body.d8-branded .woocommerce-products-header,
body.d8-branded .shop-banner {
    background: var(--d8-bg) !important;
    color: var(--d8-text);
}

/* Electro select dropdowns (orderby, per-page, search category) */
body.d8-branded select.orderby,
body.d8-branded select.electro-wc-wppp-select,
body.d8-branded #electro_header_search_categories_dropdown,
body.d8-branded .postform {
    background: var(--d8-bg) !important;
    color: var(--d8-text) !important;
    border: 1px solid var(--d8-border) !important;
    border-radius: var(--d8-radius-md) !important;
    padding: var(--d8-space-2) var(--d8-space-3) !important;
    font-family: var(--d8-font-body) !important;
    font-size: var(--d8-text-sm) !important;
}

/* ===== Header ===== */
body.d8-branded .site-header,
body.d8-branded .site-branding,
body.d8-branded .header-main,
body.d8-branded .header-v1,
body.d8-branded .header-v2,
body.d8-branded .header-v3,
body.d8-branded .header-v4,
body.d8-branded .header-v5,
body.d8-branded .header-v6,
body.d8-branded .header-v7,
body.d8-branded .masthead {
    background: var(--d8-bg) !important;
    color: var(--d8-text);
    border-bottom: 1px solid var(--d8-border);
}
body.d8-branded .site-header a,
body.d8-branded .site-header .nav-link,
body.d8-branded .top-bar a,
body.d8-branded .masthead a {
    color: var(--d8-text);
    text-decoration: none;
}
body.d8-branded .site-header a:hover,
body.d8-branded .masthead a:hover {
    color: var(--d8-accent);
}

/* Top bar (if any) */
body.d8-branded .top-bar,
body.d8-branded .top-bar-v1,
body.d8-branded .top-bar-v2 {
    background: var(--d8-bg-alt) !important;
    color: var(--d8-text-muted);
    border-bottom: 1px solid var(--d8-border);
}

/* Primary nav links */
body.d8-branded .primary-nav,
body.d8-branded .primary-navbar,
body.d8-branded .primary-navbar .nav-link,
body.d8-branded .departments-menu,
body.d8-branded .main-navigation,
body.d8-branded .main-navigation a {
    background: var(--d8-bg) !important;
    color: var(--d8-text);
}
body.d8-branded .primary-nav .nav-link,
body.d8-branded .main-navigation .menu a {
    color: var(--d8-text);
}

/* Search bar */
body.d8-branded .hero-search-form,
body.d8-branded .site-search,
body.d8-branded .header-search-form,
body.d8-branded form.search-form,
body.d8-branded form.woocommerce-product-search {
    background: var(--d8-bg-alt);
    border: 1px solid var(--d8-border);
    border-radius: var(--d8-radius-md);
}
body.d8-branded .search-field,
body.d8-branded input.search-field {
    background: transparent;
    color: var(--d8-text);
    border: none;
}
body.d8-branded .search-field::placeholder {
    color: var(--d8-text-muted);
}

/* ===== Footer (but NOT our newsletter dark section — it wins via specificity) ===== */
body.d8-branded .site-footer,
body.d8-branded #colophon,
body.d8-branded .footer,
body.d8-branded .footer-widgets,
body.d8-branded .footer-v1,
body.d8-branded .footer-v2,
body.d8-branded .footer-v3,
body.d8-branded .footer-v4,
body.d8-branded .footer-v5 {
    background: var(--d8-bg-alt) !important;
    color: var(--d8-text);
    border-top: 1px solid var(--d8-border);
}
body.d8-branded .site-footer a,
body.d8-branded #colophon a,
body.d8-branded .footer a {
    color: var(--d8-text);
    text-decoration: none;
}
body.d8-branded .site-footer a:hover,
body.d8-branded #colophon a:hover,
body.d8-branded .footer a:hover {
    color: var(--d8-accent);
}
body.d8-branded .site-footer h3,
body.d8-branded .site-footer h4,
body.d8-branded .site-footer h5,
body.d8-branded .site-footer .widget-title {
    color: var(--d8-text) !important;
    font-family: var(--d8-font-heading);
    letter-spacing: var(--d8-track-tight);
}

/* Keep our intentional dark sections intact (newsletter + any explicit dark) */
body.d8-branded .d8-home-newsletter {
    background: var(--d8-text) !important;
    color: var(--d8-c-white) !important;
    border: none !important;
}
body.d8-branded .d8-home-newsletter a,
body.d8-branded .d8-home-newsletter h2 {
    color: var(--d8-c-white) !important;
}

/* ===== Generic text contrast on anything that inherited electro-dark light text ===== */
body.d8-branded p,
body.d8-branded span,
body.d8-branded li,
body.d8-branded div {
    color: inherit;
}
body.d8-branded h1,
body.d8-branded h2,
body.d8-branded h3,
body.d8-branded h4,
body.d8-branded h5,
body.d8-branded h6 {
    color: var(--d8-text);
}

/* Base link defaults */
body.d8-branded a {
    color: var(--d8-accent);
    text-decoration: none;
}
body.d8-branded a:hover {
    color: var(--d8-accent-hover);
}

/* ===== Sidebars (shop-left, blog-right, etc.) ===== */
body.d8-branded .sidebar,
body.d8-branded .widget-area,
body.d8-branded #secondary,
body.d8-branded .site-sidebar {
    background: var(--d8-bg) !important;
    color: var(--d8-text);
}

/* Breadcrumb container on generic Electro pages */
body.d8-branded .breadcrumb,
body.d8-branded .woocommerce-breadcrumb {
    background: transparent !important;
    color: var(--d8-text-muted);
    padding: var(--d8-space-3) 0;
    font: 700 var(--d8-text-xs) var(--d8-font-body);
    letter-spacing: var(--d8-track-loose);
    text-transform: uppercase;
}
body.d8-branded .breadcrumb a,
body.d8-branded .woocommerce-breadcrumb a {
    color: var(--d8-text-muted);
}
body.d8-branded .breadcrumb a:hover,
body.d8-branded .woocommerce-breadcrumb a:hover {
    color: var(--d8-accent);
}

/* Tables (cart, account, orders) */
body.d8-branded table,
body.d8-branded .shop_table,
body.d8-branded .cart_totals table,
body.d8-branded .woocommerce-orders-table {
    background: var(--d8-bg);
    color: var(--d8-text);
    border-color: var(--d8-border);
}
body.d8-branded table th,
body.d8-branded .shop_table th {
    background: var(--d8-bg-alt);
    color: var(--d8-text);
    border-color: var(--d8-border);
    font-family: var(--d8-font-heading);
    font-weight: 700;
    letter-spacing: var(--d8-track-tight);
}
body.d8-branded table td,
body.d8-branded .shop_table td {
    border-color: var(--d8-border);
    color: var(--d8-text);
}

/* Forms (cart, checkout) */
body.d8-branded input[type="text"],
body.d8-branded input[type="email"],
body.d8-branded input[type="password"],
body.d8-branded input[type="tel"],
body.d8-branded input[type="number"],
body.d8-branded input[type="search"],
body.d8-branded select,
body.d8-branded textarea {
    background: var(--d8-bg);
    color: var(--d8-text);
    border: 1px solid var(--d8-border);
    border-radius: var(--d8-radius-md);
    padding: var(--d8-space-3) var(--d8-space-4);
    font-family: var(--d8-font-body);
    font-size: var(--d8-text-base);
}
body.d8-branded input:focus,
body.d8-branded select:focus,
body.d8-branded textarea:focus {
    outline: none;
    border-color: var(--d8-accent);
    box-shadow: 0 0 0 3px rgba(212, 128, 74, 0.15);
}
body.d8-branded label {
    color: var(--d8-text);
    font-family: var(--d8-font-body);
    font-weight: 600;
    font-size: var(--d8-text-sm);
}

/* Generic buttons (Electro uses .btn + .button) */
body.d8-branded .btn-primary,
body.d8-branded button.button,
body.d8-branded .woocommerce button.button,
body.d8-branded .woocommerce a.button,
body.d8-branded input[type="submit"] {
    background: var(--d8-text) !important;
    color: var(--d8-c-white) !important;
    border: none !important;
    border-radius: var(--d8-radius-md) !important;
    font: 800 var(--d8-text-sm) var(--d8-font-body) !important;
    letter-spacing: var(--d8-track-loose) !important;
    text-transform: uppercase !important;
    padding: var(--d8-space-3) var(--d8-space-5) !important;
    cursor: pointer !important;
    transition: background var(--d8-dur-fast) var(--d8-ease-smooth) !important;
}
body.d8-branded .btn-primary:hover,
body.d8-branded button.button:hover,
body.d8-branded .woocommerce button.button:hover,
body.d8-branded .woocommerce a.button:hover,
body.d8-branded input[type="submit"]:hover {
    background: var(--d8-accent) !important;
}

/* Alerts / messages */
body.d8-branded .woocommerce-message,
body.d8-branded .woocommerce-info {
    background: var(--d8-accent-bg);
    color: var(--d8-text);
    border: 1px solid var(--d8-accent);
    border-left: 4px solid var(--d8-accent);
    padding: var(--d8-space-4);
    border-radius: var(--d8-radius-md);
}
body.d8-branded .woocommerce-error {
    background: rgba(185, 74, 62, 0.08);
    color: var(--d8-c-danger);
    border-left: 4px solid var(--d8-c-danger);
    padding: var(--d8-space-4);
    border-radius: var(--d8-radius-md);
}