/*
 * Artech dark skin
 *
 * The garage sets the tone for the shop: near-black ground, warm oil accents,
 * red reserved for actions. Rather than restyle every theme component by hand,
 * this repaints the surfaces the storefront actually shows — chrome, cards,
 * forms, tables, footer — and lets the theme keep its layout.
 */

:root{
	--av-bg:#050608;
	--av-bg-2:#0a0d13;
	--av-panel:#0e1119;
	--av-line:rgba(255,255,255,.09);
	--av-ink:#eef1f7;
	--av-mut:#9aa4b4;
	--av-dim:#5b6472;
	--av-oil:#e0a63c;
	--av-oil-2:#b87a1e;
	--av-red:#e11d2a;
}

/* ---- ground ---- */
body.av-dark,
body.av-dark #page,
body.av-dark .site-content,
body.av-dark .site-main,
body.av-dark .content-area{background:var(--av-bg);color:var(--av-ink)}

body.av-dark h1,body.av-dark h2,body.av-dark h3,
body.av-dark h4,body.av-dark h5,body.av-dark h6{color:#fff}
body.av-dark p,body.av-dark li,body.av-dark dd,body.av-dark span{color:var(--av-ink)}
body.av-dark a{color:var(--av-ink)}
body.av-dark a:hover{color:var(--av-oil)}
body.av-dark hr{border-color:var(--av-line)}

/* ---- header / nav ---- */
body.av-dark .site-header,
body.av-dark .header-wrapper,
body.av-dark .header-main,
body.av-dark .header-bottom,
body.av-dark .header-top,
body.av-dark .klbth-header,
body.av-dark .main-navigation,
body.av-dark .navigation-wrapper{background:var(--av-bg-2)!important;border-color:var(--av-line)!important;color:var(--av-ink)}
body.av-dark .site-header a,
body.av-dark .main-navigation a{color:var(--av-ink)}
body.av-dark .site-header a:hover,
body.av-dark .main-navigation a:hover{color:var(--av-oil)}
body.av-dark .sub-menu,
body.av-dark .dropdown-menu,
body.av-dark .mega-menu{background:var(--av-panel)!important;border-color:var(--av-line)!important}

/* ---- panels, cards, products ---- */
body.av-dark .card,
body.av-dark .widget,
body.av-dark .product,
body.av-dark .product-inner,
body.av-dark .woocommerce-tabs,
body.av-dark .entry-content .wp-block-group,
body.av-dark .summary,
body.av-dark .cart_totals,
body.av-dark .cross-sells,
body.av-dark .woocommerce-billing-fields,
body.av-dark .woocommerce-checkout-review-order{background:var(--av-panel)!important;border-color:var(--av-line)!important;color:var(--av-ink)}

body.av-dark .price,body.av-dark .amount,body.av-dark .woocommerce-Price-amount{color:var(--av-oil)!important}
body.av-dark del,body.av-dark del .amount{color:var(--av-dim)!important}

/* ---- forms ---- */
body.av-dark input:not([type=submit]):not([type=button]),
body.av-dark select,
body.av-dark textarea,
body.av-dark .select2-selection{background:var(--av-panel)!important;border-color:var(--av-line)!important;color:var(--av-ink)!important}
body.av-dark ::placeholder{color:var(--av-dim)}
body.av-dark input:focus,body.av-dark select:focus,body.av-dark textarea:focus{border-color:var(--av-oil)!important;outline:none}
/* The reg plate is meant to read as a yellow UK plate, not as a dark form field. */
body.av-dark #avgPlateIn{background:#f7c800!important;border-color:transparent!important;color:#151206!important}
body.av-dark #avgPlateIn::placeholder{color:#7a6a10!important}

/* ---- buttons ---- */
body.av-dark .button,
body.av-dark button:not(.avg-back):not(.avg-pin):not(.avg-panel-x):not(.avg-btn):not(.avg-sbtn),
body.av-dark input[type=submit],
body.av-dark .wp-block-button__link,
body.av-dark .add_to_cart_button,
body.av-dark .single_add_to_cart_button,
body.av-dark .checkout-button{background:var(--av-red)!important;border-color:transparent!important;color:#fff!important}
body.av-dark .button:hover,
body.av-dark input[type=submit]:hover,
body.av-dark .add_to_cart_button:hover,
body.av-dark .single_add_to_cart_button:hover,
body.av-dark .checkout-button:hover{filter:brightness(1.1)}
body.av-dark .button.alt,
body.av-dark .checkout-button{background:linear-gradient(135deg,var(--av-oil),var(--av-oil-2))!important;color:#1a1206!important}

/* ---- tables ---- */
body.av-dark table,body.av-dark th,body.av-dark td{border-color:var(--av-line)!important;color:var(--av-ink)}
body.av-dark thead th{background:var(--av-bg-2)!important}

/* ---- notices ---- */
body.av-dark .woocommerce-message,
body.av-dark .woocommerce-info,
body.av-dark .woocommerce-error{background:var(--av-panel)!important;color:var(--av-ink)!important;border-top-color:var(--av-oil)!important}

/* ---- footer ---- */
body.av-dark .site-footer,
body.av-dark .footer-row,
body.av-dark .subfooter,
body.av-dark .footer-copyright{background:#040507!important;color:var(--av-mut);border-color:var(--av-line)!important}
body.av-dark .site-footer a{color:var(--av-mut)}
body.av-dark .site-footer a:hover{color:var(--av-oil)}

/* Images keep their own light; don't tint product photography. */
body.av-dark img{filter:none}

/* ---- v0.2 additions ---- */

/* The promo/countdown strip fights the black look; gone entirely. */
body.av-dark .header-row.header-notify{display:none!important}

/* Keep the garage's own buttons out of the generic red repaint. */
body.av-dark .avg-btn,
body.av-dark .avg-btn-oil{background:linear-gradient(135deg,var(--av-oil),var(--av-oil-2))!important;color:#1a1206!important}
body.av-dark .avg-btn-ghost{background:transparent!important;border:1px solid var(--av-line)!important;color:var(--av-ink)!important}
body.av-dark .avg-back{background:rgba(10,13,19,.72)!important;color:var(--av-ink)!important;border:1px solid var(--av-line)!important}

/* Header quick-access icon was a white square on black. */
body.av-dark .quick-button,
body.av-dark .quick-button-inner,
body.av-dark .quick-icon{background:var(--av-panel)!important;border-color:var(--av-line)!important;color:var(--av-ink)!important}
body.av-dark .quick-icon svg{fill:var(--av-ink)!important}

/* Sidebars (search results, blog, shop) were dark-on-dark. */
body.av-dark .widget,
body.av-dark .sidebar .widget,
body.av-dark .widget-area .widget{background:transparent!important}
body.av-dark .widget-title{color:#fff!important}
body.av-dark .widget a,
body.av-dark .widget li,
body.av-dark .widget span,
body.av-dark .widget label,
body.av-dark .widget p{color:var(--av-mut)!important}
body.av-dark .widget a:hover{color:var(--av-oil)!important}
body.av-dark .woocommerce-result-count,
body.av-dark .woocommerce-ordering select,
body.av-dark .shop-view span{color:var(--av-ink)!important}

/* Results toolbar strip */
body.av-dark .shop-toolbar,
body.av-dark .before-shop-loop,
body.av-dark .klbth-shop-header{background:var(--av-panel)!important;border-color:var(--av-line)!important;color:var(--av-ink)!important}

/* Breadcrumbs */
body.av-dark .breadcrumb,
body.av-dark .breadcrumb a,
body.av-dark .site-breadcrumb *{color:var(--av-mut)!important}

/* Price-filter slider labels */
body.av-dark .price_slider_amount,
body.av-dark .price_label{color:var(--av-mut)!important}

/* Account / login panels */
body.av-dark .woocommerce-MyAccount-navigation,
body.av-dark .woocommerce-MyAccount-content,
body.av-dark .login-register-wrapper{background:var(--av-panel)!important;border-color:var(--av-line)!important}

/* Pagination */
body.av-dark .page-numbers li .page-numbers{background:var(--av-panel)!important;color:var(--av-ink)!important;border-color:var(--av-line)!important}
body.av-dark .page-numbers li .page-numbers.current{background:var(--av-red)!important;color:#fff!important}

/* Topbar row above header */
body.av-dark .header-row.header-topbar,
body.av-dark .topbar,
body.av-dark .header-top-menu{background:var(--av-bg-2)!important;color:var(--av-mut)!important;border-color:var(--av-line)!important}

/* Whole header stack dark, including the topbar's stray white column. */
body.av-dark .site-header .header-row,
body.av-dark .site-header .header-inner,
body.av-dark .site-header .column{background:var(--av-bg-2)!important}
body.av-dark .site-header .header-row a,
body.av-dark .site-header .header-row span{color:var(--av-mut)!important}
body.av-dark .site-header .header-row a:hover{color:var(--av-oil)!important}
/* Garage hero search submit stays oil-amber. */
body.av-dark .avg-search .avg-sbtn{background:linear-gradient(135deg,var(--av-oil),var(--av-oil-2))!important;color:#1a1206!important}

/* ---- v0.2.2: audit fixes ---- */

/* Mobile menu drawer was white with light text — unreadable. */
body.av-dark .site-drawer,
body.av-dark .site-drawer-row,
body.av-dark .site-drawer-header,
body.av-dark .site-drawer-body,
body.av-dark .site-drawer-footer,
body.av-dark .drawer-primary,
body.av-dark .drawer-contacts{background:var(--av-bg-2)!important;border-color:var(--av-line)!important}
body.av-dark .site-drawer a,
body.av-dark .site-drawer p,
body.av-dark .site-drawer span,
body.av-dark .site-drawer .drawer-heading{color:var(--av-ink)!important}
body.av-dark .site-drawer a:hover{color:var(--av-oil)!important}

/* Footer inner wrappers carried their own white background. */
body.av-dark .site-footer .container,
body.av-dark .site-footer .footer-inner,
body.av-dark .site-footer .column,
body.av-dark .site-footer .copyright-row,
body.av-dark .site-footer .site-copyright{background:transparent!important}
body.av-dark .site-copyright,
body.av-dark .site-copyright p{color:var(--av-mut)!important}

/* Newsletter block in the footer. */
body.av-dark .klbth-newsletter,
body.av-dark .klbth-newsletter-form,
body.av-dark .newsletter-wrapper{background:transparent!important;color:var(--av-mut)!important}
body.av-dark .klbth-newsletter-form *{color:var(--av-mut)!important}

/* Our WhatsApp badge keeps white text on its green pill, whatever the
   surrounding widget rules say. The `html` prefix is load-bearing: the badge
   sits inside a footer widget, and `body.av-dark .widget span` is one element
   more specific than `body.av-dark .artech-wa-badge`, so it won the tie and
   painted the pill's text grey-on-green. */
html body.av-dark .artech-wa-badge,
html body.av-dark .artech-wa-badge *,
html body.av-dark .widget .artech-wa-badge,
html body.av-dark .widget .artech-wa-badge *,
html body.av-dark .awc-chip,
html body.av-dark .awc-chip *,
html body.av-dark .widget .awc-chip,
html body.av-dark .widget .awc-chip *{color:#fff!important}

/* WhatsApp's signature #25D366 carries white text at a contrast of 1.98 —
   fine for a big round icon button with no text on it, poor for an 11px
   label. The small chips drop to a darker WhatsApp teal, which reads cleanly
   and still says WhatsApp at a glance. The floating button keeps the bright
   green. */
html body.av-dark .artech-wa-badge,
html body.av-dark .widget .artech-wa-badge,
html body.av-dark .awc-chip,
html body.av-dark .widget .awc-chip{background:#0F7A6C!important}

/* Elementor-built pages — About Us, and anything else laid out with it.
   Elementor writes each element's colour into a generated per-page stylesheet
   (post-2349.css and friends) at a specificity no ordinary rule can outrank,
   and those colours were all picked against a white page: the About headings
   came through as #212529 on near-black, a contrast of 1.31. So this has to
   be !important. The cost is that a colour deliberately chosen inside
   Elementor is overridden too — if a heading loses a colour it should have
   kept, exempt it here rather than weakening the whole rule. */
body.av-dark .elementor-heading-title,
body.av-dark .elementor-widget-heading .elementor-heading-title,
body.av-dark .elementor-widget-text-editor,
body.av-dark .elementor-widget-text-editor p,
body.av-dark .elementor-widget-text-editor li,
body.av-dark .elementor-widget-text-editor span,
body.av-dark .elementor-text-editor,
body.av-dark .elementor-text-editor p,
body.av-dark .elementor-widget-container > p,
body.av-dark .elementor-widget-container > ul li,
body.av-dark .elementor-widget-container > ol li,
body.av-dark .elementor-icon-box-title,
body.av-dark .elementor-icon-box-title a,
body.av-dark .elementor-icon-list-text,
body.av-dark .elementor-tab-title,
body.av-dark .elementor-tab-content,
body.av-dark .elementor-accordion-title,
body.av-dark .elementor-toggle-title{color:var(--av-ink)!important}

/* Descriptive and secondary Elementor text sits back a step. */
body.av-dark .elementor-icon-box-description,
body.av-dark .elementor-image-box-description{color:var(--av-mut)!important}

/* The theme's "Ask a Specialist" block used to carry a photograph of the
   owner. The Customizer setting is cleared, but the theme still prints an
   empty <img> — and under lazy-loading its src is a placeholder rather than
   an empty string, so match the container instead of the image. Remove this
   rule if an avatar (a logo, say) is ever set again. */
.product-assistant .assistant-avatar{display:none}
.product-assistant{gap:0}

/* The logo is dark artwork drawn for a white header — its ink averages a
   luminance of 49/255, which all but disappears on this near-black bar.
   invert() alone would brighten it but also throw the red emblem to cyan, so
   hue-rotate turns the hues back: greys go light, brand red stays red. */
html body.av-dark .site-brand img,
html body.av-dark .site-header .logo img,
html body.av-dark .site-branding img,
html body.av-dark .site-logo img{filter:invert(1) hue-rotate(180deg)}

/* A price is the number the visitor came for; it does not belong on the dim
   tier the theme puts it on. */
html body.av-dark .woocommerce-Price-amount,
html body.av-dark .woocommerce-Price-amount *,
html body.av-dark .widget .woocommerce-Price-amount,
html body.av-dark .widget .woocommerce-Price-amount *,
html body.av-dark .amount,
html body.av-dark .widget .amount{color:var(--av-ink)!important}

/* Account tabs and other "active" links kept the theme's light-mode ink. */
html body.av-dark .woocommerce-MyAccount-navigation a,
html body.av-dark .woocommerce-MyAccount-navigation a.active,
html body.av-dark .klb-account-tabs a,
html body.av-dark .klb-account-tabs a.active,
html body.av-dark .login-tabs a,
html body.av-dark .login-tabs a.active,
html body.av-dark .account-tabs a.active{color:var(--av-ink)!important}

/* The sale flash was white-on-white once the surrounding card went dark. */
body.av-dark span.onsale,
body.av-dark .onsale,
body.av-dark .product-label,
body.av-dark .badge-sale{background:var(--av-red)!important;color:#fff!important}

/* WooCommerce Blocks paints its sale flash white-on-white once the card
   behind it goes dark. The wrapper carries the class and the label is a bare
   span inside it, so both have to be named. */
html body.av-dark .wc-block-grid__product-onsale{background:var(--av-red)!important;border-color:var(--av-red)!important}
html body.av-dark .wc-block-grid__product-onsale,
html body.av-dark .wc-block-grid__product-onsale span{color:#fff!important}

/* Login / register tabs on the account page kept the theme's light-mode ink. */
html body.av-dark .login-page-tab a,
html body.av-dark .login-page-tab a.active,
html body.av-dark .site-login .login-page-tab a{color:var(--av-ink)!important}

/* ---- mobile bottom bar ---- */
/* The theme's fixed phone menu duplicated the drawer (which carries search,
   the account links and the categories) and sat over the page as a light
   strip. Removed rather than restyled. */
body.av-dark .mobile-bottom-menu{display:none !important}
/* Search moves up into the phone header instead (see AVE_Skin). */
body.av-dark .header-mobile .av-msearch{cursor:pointer}
body.av-dark .header-mobile .av-msearch .quick-icon{display:flex;align-items:center;justify-content:center}

/* ---- theme panels that stayed white ---- */
/* Partdo paints a white rounded card behind the first column of an Elementor
   page and inside its quick-search modal. Both are pseudo-elements and plain
   background rules never reached them, so the dark skin lightened the text on
   top and left it white-on-white. */
body.av-dark .elementor-top-column::before{background:var(--av-bg)!important}
body.av-dark .klbth-modal-inner,
body.av-dark .klbth-modal-content,
body.av-dark .klbth-modal-header,
body.av-dark .klbth-modal-body{background-color:var(--av-panel)!important;color:var(--av-ink)!important}
body.av-dark .klbth-modal-inner .entry-title,
body.av-dark .klbth-modal-inner .entry-description,
body.av-dark .klbth-modal-inner .entry-description p{color:var(--av-ink)!important}
body.av-dark .klbth-modal-header{border-bottom-color:var(--av-line)!important}

/* ---- chrome we do not use ---- */
/* The header's garage icon opens a "Find the Right Parts Faster" modal that
   duplicates the search box beside it; the reg lookup on the homepage does the
   job properly. Hiding the button takes its modal with it. */
body.av-dark .site-header .quick-button.custom-button{display:none !important}
/* The footer newsletter block renders a raw [mc4wp_form] shortcode because
   Mailchimp for WordPress is deactivated, so the whole row is dead weight. */
body.av-dark .site-footer .footer-row.footer-newsletter{display:none !important}

/* ---- full-screen search overlay ---- */
/* Opened from the phone header. It ships white with near-white text, and its
   heading still names the theme rather than the shop, so both are replaced. */
body.av-dark .search-holder{background:var(--av-bg)!important}
body.av-dark .search-holder .search-holder-inner{background:transparent!important}
body.av-dark .search-holder .search-holder-header span{font-size:0}
body.av-dark .search-holder .search-holder-header span::after{
	content:"What are you looking for?";font-size:1.35rem;font-weight:700;color:var(--av-ink)}
body.av-dark .search-holder .site-close,
body.av-dark .search-holder .site-close a{background:transparent!important;color:var(--av-ink)!important}
body.av-dark .search-holder .site-close a{border:1px solid var(--av-line)!important;border-radius:8px}
body.av-dark .search-holder .search-input{background:var(--av-panel)!important;color:var(--av-ink)!important;border-color:var(--av-line)!important}
body.av-dark .search-holder .search-input::placeholder{color:var(--av-mut)!important}

/* ---- app badges ---- */
/* The theme's "Download App on Mobile" row still points at klbtheme.com demo
   images (broken) and there is no app. Hide the row, not just the pictures. */
body.av-dark .site-footer .mobile-app-content{display:none !important}
body.av-dark .site-footer .copyright-row:has(> .mobile-app-content){display:none !important}