/*
 * Subrevtech Global Dark Theme
 * Applies to all pages: product, shop, category, cart, checkout, etc.
 */

/* ── VARIABLES ─────────────────────────────────────────── */
:root {
  --black:        #161616;
  --off-black:    #1c1c1c;
  --charcoal:     #222222;
  --mid:          #2a2a2a;
  --border:       #303030;
  --border-light: #3e3e3e;
  --muted:        #909090;
  --subtle:       #a8a8a8;
  --light:        #c0c0c0;
  --silver:       #c8c8c8;
  --white:        #f0efed;
  --accent:       #b8956a;
  --accent-light: #c9a87c;
  --accent-pale:  rgba(184,149,106,0.10);
}

/* ── BASE ───────────────────────────────────────────────── */
html, body {
  background: var(--black) !important;
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Global font reset — catches everything Storefront renders */
*, *::before, *::after {
  font-family: 'DM Sans', sans-serif;
}

a { color: var(--accent) !important; text-decoration: none !important; }
a:hover { color: var(--accent-light) !important; }

p, li, td, th, label, span, div {
  color: inherit;
  font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

/* Product title gets serif treatment like homepage */
.woocommerce div.product h1.product_title,
.woocommerce-loop-product__title,
.page-title,
.entry-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* Section headings — uppercase eyebrow style like homepage */
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2,
.woocommerce-products-header__title,
.widget-title,
.widgettitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* Body text — light weight matching homepage */
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce-tabs .panel p,
.woocommerce-tabs .panel li,
p {
  font-weight: 300 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--light) !important;
  line-height: 1.75 !important;
}

/* Focus outline — replace browser default purple with gold */
*:focus {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
  outline: none !important;
}
.site-header,
.storefront-sticky-header {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.site-header .site-branding a,
.site-header .site-title a {
  color: var(--white) !important;
}

/* Nav links */
.main-navigation ul li a,
.site-navigation ul li a {
  color: var(--silver) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.main-navigation ul > li,
.site-navigation ul > li {
  white-space: nowrap !important;
}

.main-navigation ul li a:hover,
.site-navigation ul li a:hover {
  color: var(--white) !important;
}

/* Dropdowns */
.main-navigation ul ul,
.site-navigation ul ul {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Cart icon */
.site-header-cart .cart-contents,
.site-header-cart a {
  color: var(--silver) !important;
}

.site-header-cart .widget_shopping_cart {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
}

/* ── BREADCRUMB ─────────────────────────────────────────── */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: var(--muted) !important;
  background: transparent !important;
}

/* ── MAIN CONTENT AREA ──────────────────────────────────── */
.site-content,
.hentry,
#primary,
#content,
.content-area,
main.site-main {
  background: var(--black) !important;
}

/* ── PRODUCT PAGE ───────────────────────────────────────── */
.woocommerce div.product {
  background: var(--black) !important;
}

/* Product title */
.woocommerce div.product h1.product_title {
  color: var(--white) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price .amount {
  color: var(--white) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
  color: var(--light) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* Product images */
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery {
  background: var(--off-black) !important;
  border-radius: 0 !important;
}

.woocommerce-product-gallery__image img {
  background: var(--off-black) !important;
}

/* Thumbnails */
.flex-control-thumbs li img {
  border: 1px solid var(--border) !important;
  opacity: 0.6 !important;
  filter: brightness(0.9) !important;
}

.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover {
  border-color: var(--accent) !important;
  opacity: 1 !important;
}

/* Variations / select */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart select {
  background: var(--mid) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.woocommerce div.product form.cart .variations label {
  color: var(--subtle) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Reset variation link */
.woocommerce div.product form.cart .reset_variations {
  color: var(--muted) !important;
}

/* Qty input */
.woocommerce div.product form.cart .qty,
.woocommerce .quantity input.qty {
  background: var(--mid) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent) !important;
  color: var(--black) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  transition: background 0.2s !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--accent-light) !important;
  color: var(--black) !important;
}

/* Secondary buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--mid) !important;
  color: var(--white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 0.1em !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}

/* ── PRODUCT TABS ───────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs {
  border-top: 1px solid var(--border) !important;
  margin-top: 40px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
  font-family: 'DM Sans', sans-serif !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--accent) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--white) !important;
  background: transparent !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  padding: 32px !important;
  margin-top: 0 !important;
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel td,
.woocommerce div.product .woocommerce-tabs .panel th {
  color: var(--light) !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3 {
  color: var(--white) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

/* Additional info table */
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  border-color: var(--border) !important;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  border-color: var(--border) !important;
  color: var(--light) !important;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:nth-child(even) td,
.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:nth-child(even) th {
  background: var(--mid) !important;
}

/* ── RELATED PRODUCTS ───────────────────────────────────── */
.related.products h2,
.upsells.products h2 {
  color: var(--white) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 32px !important;
}

.woocommerce ul.products li.product {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  transition: border-color 0.2s !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border-light) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--white) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}

.woocommerce ul.products li.product .price {
  color: var(--accent) !important;
}

.woocommerce ul.products li.product img {
  background: var(--charcoal) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── SHOP / CATEGORY PAGES ──────────────────────────────── */
.woocommerce-page #primary,
.woocommerce-shop #primary {
  background: var(--black) !important;
}

.woocommerce-products-header h1,
.woocommerce-products-header__title {
  color: var(--white) !important;
}

/* Ordering dropdown */
.woocommerce-ordering select {
  background: var(--mid) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Result count */
.woocommerce-result-count {
  color: var(--muted) !important;
}

/* ── GLOBAL FORM INPUTS ─────────────────────────────────── */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
textarea,
select {
  background: #2a2a2a !important;
  background-color: #2a2a2a !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus,
select:focus {
  background: #2a2a2a !important;
  background-color: #2a2a2a !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
}

/* ── CART ───────────────────────────────────────────────── */
.woocommerce-cart-form,
.woocommerce-cart-form__contents,
.woocommerce-cart table.cart,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-cart .shipping-calculator-form {
  background: transparent !important;
}

.woocommerce-cart table.cart {
  border: 1px solid var(--border) !important;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--light) !important;
}

.woocommerce-cart table.cart th {
  color: var(--subtle) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.woocommerce-cart table.cart .product-name a {
  color: var(--white) !important;
}

/* Coupon + update row */
.woocommerce-cart table.cart td.actions {
  background: transparent !important;
  border-color: var(--border) !important;
}

.woocommerce-cart table.cart td.actions .coupon input[type=text] {
  background: var(--mid) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--white) !important;
}

/* Cart totals box */
.cart_totals,
.cart_totals table,
.woocommerce .cart_totals {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
}

.woocommerce .cart_totals h2 {
  color: var(--white) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 20px 24px 0 !important;
}

.cart_totals table th,
.cart_totals table td {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--light) !important;
}

.cart-subtotal th, .cart-subtotal td,
.order-total th, .order-total td {
  color: var(--white) !important;
  border-color: var(--border) !important;
}

/* Shipping options */
.woocommerce-shipping-totals td,
.woocommerce-shipping-totals th {
  background: transparent !important;
  color: var(--light) !important;
}

.woocommerce .shipping-calculator-button,
.woocommerce a.shipping-calculator-button {
  color: var(--accent) !important;
}

/* Proceed to checkout */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--accent) !important;
  color: var(--black) !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: none !important;
}

/* ── CHECKOUT ───────────────────────────────────────────── */
.woocommerce-checkout,
.woocommerce form.checkout {
  background: transparent !important;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  background: transparent !important;
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-column__title {
  color: var(--white) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 12px !important;
}

.woocommerce-checkout label,
.woocommerce form .form-row label {
  color: var(--subtle) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Order review table */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review .shop_table {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--light) !important;
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
  color: var(--white) !important;
}

/* Payment box */
.woocommerce-checkout #payment {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  background: transparent !important;
  border-color: var(--border) !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  color: var(--light) !important;
}

.woocommerce-checkout #payment .payment_box {
  background: var(--mid) !important;
  color: var(--light) !important;
}

.woocommerce-checkout #payment .payment_box::before {
  border-bottom-color: var(--mid) !important;
}

.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
  background: var(--accent) !important;
  color: var(--black) !important;
  border-radius: 0 !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ── NOTICES ────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--off-black) !important;
  border-top-color: var(--accent) !important;
  color: var(--light) !important;
}

/* ── WIDGETS / SIDEBAR ──────────────────────────────────── */
.widget,
.widget_product_categories,
.widget_layered_nav {
  background: transparent !important;
  color: var(--light) !important;
}

.widget-title, .widgettitle {
  color: var(--white) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 10px !important;
}

.widget ul li a {
  color: var(--subtle) !important;
}

.widget ul li a:hover {
  color: var(--accent) !important;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--off-black) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.site-footer a {
  color: var(--muted) !important;
}

.site-footer a:hover {
  color: var(--accent) !important;
}

/* ── MISC ───────────────────────────────────────────────── */
.screen-reader-text { display: none; }

hr {
  border-color: var(--border) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--accent) !important;
  color: var(--black) !important;
  border-radius: 0 !important;
}

/* ── HIDE STICKY ADD TO CART BAR ───────────────────────── */
.woocommerce-store-notice,
.demo_store,
.wc-block-components-notice-banner,
.woocommerce-cart-form__contents .sticky-add-to-cart,
.sticky-add-to-cart {
  display: none !important;
}

.storefront-sticky-add-to-cart {
  display: none !important;
}

/* ── STOREFRONT MOBILE MENU ─────────────────────────────── */
.main-navigation .menu-toggle,
.storefront-handheld-footer-bar,
.site-header .menu-toggle {
  background: var(--off-black) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}

/* Mobile nav panel */
.main-navigation ul.nav-menu,
.main-navigation ul.menu,
.main-navigation div.nav-menu > ul {
  background: var(--off-black) !important;
  border-top: 1px solid var(--border) !important;
}

.main-navigation ul li,
.main-navigation ul li a {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--silver) !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}

/* Sub-menus */
.main-navigation ul ul {
  background: var(--black) !important;
  border-top: 1px solid var(--border) !important;
}

.main-navigation ul ul li a {
  background: var(--black) !important;
  color: var(--muted) !important;
  padding-left: 2em !important;
}

.main-navigation ul ul li a:hover {
  background: var(--off-black) !important;
  color: var(--white) !important;
}

/* Dropdown toggle button (the arrow) */
.main-navigation .dropdown-toggle {
  background: transparent !important;
  border-left: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.main-navigation .dropdown-toggle:hover,
.main-navigation .dropdown-toggle.toggled-on {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}

/* Handheld footer bar (cart/menu icons at bottom on mobile) */
.storefront-handheld-footer-bar {
  background: var(--off-black) !important;
  border-top: 1px solid var(--border) !important;
}

.storefront-handheld-footer-bar ul li a,
.storefront-handheld-footer-bar ul li span {
  color: var(--silver) !important;
}

.storefront-handheld-footer-bar ul li > a:hover {
  color: var(--accent) !important;
}

.storefront-handheld-footer-bar .cart .count {
  background: var(--accent) !important;
  color: var(--black) !important;
}

/* ── STOREFRONT NAV FULL OVERRIDE ───────────────────────── */
/* Desktop nav bar */
.site-header nav,
#site-navigation,
.primary-navigation,
.secondary-navigation {
  background: var(--off-black) !important;
}

/* All nav links at every level */
#site-navigation a,
.primary-navigation a,
.secondary-navigation a,
.site-header nav a {
  color: var(--silver) !important;
  background: transparent !important;
}

#site-navigation a:hover,
.primary-navigation a:hover {
  color: var(--white) !important;
  background: transparent !important;
}

/* Desktop dropdowns */
#site-navigation ul ul,
.primary-navigation ul ul {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

#site-navigation ul ul li,
.primary-navigation ul ul li {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

#site-navigation ul ul a,
.primary-navigation ul ul a {
  color: var(--muted) !important;
  background: var(--off-black) !important;
}

#site-navigation ul ul a:hover,
.primary-navigation ul ul a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

/* Mobile hamburger toggle button */
button.menu-toggle,
.menu-toggle {
  background: var(--off-black) !important;
  color: var(--white) !important;
  border: 1px solid var(--border) !important;
}

/* Mobile expanded nav */
.main-navigation.toggled ul,
.main-navigation.toggled .nav-menu {
  background: var(--off-black) !important;
}

.main-navigation.toggled ul li {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.main-navigation.toggled ul li a {
  color: var(--silver) !important;
  background: var(--off-black) !important;
}

.main-navigation.toggled ul li a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

.main-navigation.toggled ul ul {
  background: var(--black) !important;
}

.main-navigation.toggled ul ul li a {
  color: var(--muted) !important;
  background: var(--black) !important;
}

.main-navigation.toggled ul ul li a:hover {
  color: var(--white) !important;
  background: var(--off-black) !important;
}

/* Dropdown arrow toggle */
button.dropdown-toggle {
  background: transparent !important;
  color: var(--muted) !important;
  border-left: 1px solid var(--border) !important;
}

button.dropdown-toggle:hover,
button.dropdown-toggle.toggled-on {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}

/* ── STOREFRONT PRIMARY NAV (correct class) ─────────────── */
.storefront-primary-navigation,
.storefront-primary-navigation nav,
.storefront-primary-navigation .main-navigation {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.storefront-primary-navigation ul li a {
  color: var(--silver) !important;
  background: transparent !important;
}

.storefront-primary-navigation ul li a:hover {
  color: var(--white) !important;
  background: transparent !important;
}

/* Desktop dropdowns */
.storefront-primary-navigation ul ul {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.storefront-primary-navigation ul ul li {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.storefront-primary-navigation ul ul a {
  color: var(--muted) !important;
  background: var(--off-black) !important;
}

.storefront-primary-navigation ul ul a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

/* Mobile toggle button */
.storefront-primary-navigation .menu-toggle {
  background: var(--off-black) !important;
  color: var(--white) !important;
  border-color: var(--border) !important;
}

/* Mobile expanded */
.storefront-primary-navigation .main-navigation.toggled ul,
.storefront-primary-navigation .main-navigation.toggled .nav-menu {
  background: var(--off-black) !important;
}

.storefront-primary-navigation .main-navigation.toggled li {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.storefront-primary-navigation .main-navigation.toggled li a {
  color: var(--silver) !important;
}

.storefront-primary-navigation .main-navigation.toggled li a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

.storefront-primary-navigation .main-navigation.toggled ul ul li a {
  color: var(--muted) !important;
  background: var(--black) !important;
}

.storefront-primary-navigation button.dropdown-toggle {
  background: transparent !important;
  color: var(--muted) !important;
  border-left: 1px solid var(--border) !important;
}

.storefront-primary-navigation button.dropdown-toggle:hover,
.storefront-primary-navigation button.dropdown-toggle.toggled-on {
  background: var(--charcoal) !important;
  color: var(--white) !important;
}

/* ── NAV: EXACT CLASS TARGETING ─────────────────────────── */
/* Desktop nav links */
ul#menu-main-navigation-1 li a,
.primary-navigation ul.nav-menu li a,
.primary-navigation ul.menu li a {
  color: var(--silver) !important;
  background: transparent !important;
}

ul#menu-main-navigation-1 li a:hover,
.primary-navigation ul li a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

/* Desktop dropdowns */
ul#menu-main-navigation-1 li ul.sub-menu,
.primary-navigation .sub-menu {
  background: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

ul#menu-main-navigation-1 li ul.sub-menu li,
.primary-navigation .sub-menu li {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

ul#menu-main-navigation-1 li ul.sub-menu li a,
.primary-navigation .sub-menu li a {
  color: var(--muted) !important;
  background: var(--off-black) !important;
}

ul#menu-main-navigation-1 li ul.sub-menu li a:hover,
.primary-navigation .sub-menu li a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

/* Mobile handheld nav */
.handheld-navigation,
div.handheld-navigation {
  background: var(--off-black) !important;
}

.handheld-navigation ul,
.handheld-navigation ul li {
  background: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.handheld-navigation ul li a {
  color: var(--silver) !important;
  background: var(--off-black) !important;
}

.handheld-navigation ul li a:hover {
  color: var(--white) !important;
  background: var(--charcoal) !important;
}

.handheld-navigation ul ul,
.handheld-navigation .sub-menu {
  background: var(--black) !important;
}

.handheld-navigation ul ul li,
.handheld-navigation .sub-menu li {
  background: var(--black) !important;
}

.handheld-navigation ul ul li a,
.handheld-navigation .sub-menu li a {
  color: var(--muted) !important;
  background: var(--black) !important;
}

.handheld-navigation ul ul li a:hover,
.handheld-navigation .sub-menu li a:hover {
  color: var(--white) !important;
  background: var(--off-black) !important;
}

.handheld-navigation button.dropdown-toggle {
  background: transparent !important;
  color: var(--muted) !important;
  border-left: 1px solid var(--border) !important;
}

/* ── OVERRIDE STOREFRONT INLINE CSS ────────────────────── */
/* Storefront injects color:#333333 via inline style — match
   the exact selector and add !important to beat it */
.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a,
button.menu-toggle,
button.menu-toggle:hover,
.handheld-navigation .dropdown-toggle {
  color: var(--silver) !important;
}

/* Dropdowns specifically */
.main-navigation ul ul li a,
.main-navigation ul .sub-menu li a,
.handheld-navigation ul ul li a,
.handheld-navigation .sub-menu li a {
  color: var(--muted) !important;
  background-color: var(--off-black) !important;
}

/* Nav backgrounds */
.main-navigation ul li,
.handheld-navigation ul li {
  background-color: var(--off-black) !important;
  border-bottom: 1px solid var(--border) !important;
}

.main-navigation ul ul,
.main-navigation ul .sub-menu,
.handheld-navigation ul ul,
.handheld-navigation .sub-menu {
  background-color: var(--off-black) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

button.menu-toggle,
button.menu-toggle:hover {
  background-color: var(--off-black) !important;
  border-color: var(--border) !important;
}


/* ── CUSTOM NAV (sitewide) ─────────────────────────────── */
/* Subrevtech Homepage Styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --black:        #161616;
    --off-black:    #1c1c1c;
    --charcoal:     #222222;
    --mid:          #2a2a2a;
    --border:       #303030;
    --border-light: #3e3e3e;
    --muted:        #909090;
    --subtle:       #a8a8a8;
    --light:        #c0c0c0;
    --silver:       #c8c8c8;
    --white:        #f0efed;
    --accent:       #b8956a;
    --accent-light: #c9a87c;
    --accent-pale:  rgba(184,149,106,0.08);
    --deep:         #161616;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
  }

  
  /* ══════════════════════════════════════
     TWO-ROW NAV
     Row 1: logo + utility links (Cart, Home, Checkout, Contact, Warranty)
     Row 2: product category tabs, each with its own dropdown
     ══════════════════════════════════════ */

  nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(14,14,14,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    font-family: 'DM Sans', sans-serif;
  }

  /* ── ROW 1: utility bar ── */
  .nav-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 52px;
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-right: 0;
  }

  .nav-logo img {
    height: 30px;
    width: auto;
    filter: brightness(1.05);
  }

  .nav-util-links {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
  }

  .nav-util-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 52px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
  }

  .nav-util-links a:hover { color: var(--white); }

  .nav-util-links a.nav-cart-link {
    border-left: 1px solid var(--border);
    color: var(--subtle);
  }

  .nav-util-links a.nav-cart-link:hover { color: var(--white); }

  /* search + hamburger */
  .nav-row1-right {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .nav-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 52px;
    font-size: 12px;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: color 0.2s;
  }

  .nav-search-btn:hover { color: var(--white); }

  /* ── ROW 2: category tabs ── */
  .nav-row2 {
    display: flex;
    align-items: stretch;
    padding: 0 48px;
    height: 48px;
    gap: 0;
    position: relative;
  }

  .nav-cat-item {
    position: relative;
  }

  .nav-cat-item > button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 18px;
    height: 48px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--subtle);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: -1px; /* sit on border */
  }

  .nav-cat-item > button:hover {
    color: var(--white);
    border-bottom-color: var(--border-light);
  }

  .nav-cat-item.open > button {
    color: var(--white);
    border-bottom-color: var(--accent);
  }

  .nav-cat-chevron {
    width: 8px; height: 8px;
    transition: transform 0.2s;
    opacity: 0.4;
  }

  .nav-cat-item.open .nav-cat-chevron { transform: rotate(180deg); opacity: 0.8; }

  /* ── CATEGORY DROPDOWNS ── */
  .nav-cat-dropdown {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    background: var(--off-black);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    z-index: 300;
    min-width: 240px;
  }

  .nav-cat-item.open .nav-cat-dropdown { display: flex; }

  /* Two-panel layout: links left, preview right */
  .cat-dd-links {
    padding: 16px 0;
    min-width: 220px;
    border-right: 1px solid var(--border);
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
  }

  .cat-dd-links::-webkit-scrollbar {
    width: 4px;
  }

  .cat-dd-links::-webkit-scrollbar-track {
    background: transparent;
  }

  .cat-dd-links::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
  }

  .cat-dd-links a {
    display: block;
    padding: 9px 24px;
    font-size: 12px;
    font-weight: 300;
    color: var(--light);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
  }

  .cat-dd-links a:hover {
    color: var(--white);
    background: var(--charcoal);
  }

  .cat-dd-links .dd-sub-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 10px 24px 4px;
  }

  .cat-dd-links .dd-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
  }

  .cat-dd-links .dd-view-all {
    color: var(--accent) !important;
    font-weight: 400 !important;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px !important;
  }

  /* Preview panel */
  .cat-dd-preview {
    width: 220px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--charcoal);
  }

  .cat-dd-preview-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }

  .cat-dd-preview-title {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .cat-dd-preview-desc {
    font-size: 11px;
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 16px;
  }

  .cat-dd-preview-stat {
    font-size: 11px;
    color: var(--border-light);
    letter-spacing: 0.06em;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .cat-dd-preview-stat strong {
    color: var(--silver);
    font-weight: 400;
  }

  /* Search bar */
  .nav-search-bar {
    display: none;
    border-top: 1px solid var(--border);
    padding: 0 48px;
    height: 44px;
    align-items: center;
    gap: 12px;
    background: var(--off-black);
  }

  .nav-search-bar.open { display: flex; }

  .nav-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--white);
    padding: 0;
    max-width: 600px;
  }

  .nav-search-input::placeholder { color: var(--muted); }

  .nav-search-close {
    font-size: 11px;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.08em;
    font-family: 'DM Sans', sans-serif;
    transition: color 0.2s;
  }

  .nav-search-close:hover { color: var(--white); }

  /* Hamburger */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }

  .nav-hamburger span {
    display: block;
    height: 1px;
    background: var(--subtle);
  }

  /* Mobile menu */
  .nav-mobile { display: none; background: var(--off-black); border-top: 1px solid var(--border); }
  .nav-mobile.open { display: block; }
  .mob-section { border-bottom: 1px solid var(--border); }
  .mob-section-title {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px; font-size: 13px; font-weight: 400; color: var(--light);
    cursor: pointer; background: none; border: none; width: 100%; text-align: left;
    font-family: 'DM Sans', sans-serif;
  }
  .mob-chevron { transition: transform 0.2s; color: var(--muted); }
  .mob-section.open .mob-chevron { transform: rotate(90deg); }
  .mob-links { display: none; padding: 4px 0 10px; background: var(--charcoal); max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mob-section.open .mob-links { display: block; }
  .mob-links a { display: block; padding: 8px 32px; font-size: 12px; font-weight: 300; color: var(--muted); text-decoration: none; transition: color 0.2s; }
  .mob-links a:hover { color: var(--white); }
  .mob-links .mob-sub-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); padding: 8px 32px 3px; }
  .mob-direct a { display: block; padding: 12px 24px; font-size: 13px; color: var(--subtle); text-decoration: none; border-bottom: 1px solid var(--border); }
  .mob-direct a:hover { color: var(--white); }

  @media (max-width: 900px) {
    .nav-row2 { display: none; }
    .nav-util-links { display: none; }
    .nav-hamburger { display: flex; }
    .nav-row1 { padding: 0 24px; }
  }

  @media (max-width: 900px) {
    .nav-primary { display: none; }
    .nav-utils .nav-util-btn:not(.nav-cart-btn) { display: none; }
    .nav-hamburger { display: flex; }
    .nav-inner { padding: 0 24px; }
    .nav-search-wrap { padding: 0 24px; }
  }
/* ── MOBILE NAV: VIEW ALL LINK ──────────────────────────── */
.mob-view-all {
  display: block !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 10px 20px 6px !important;
  margin-top: 6px !important;
  border-top: 1px solid var(--border) !important;
}

/* ── BANKFUL NOTICE ─────────────────────────────────────── */
.wc-proceed-to-checkout::before {
  content: "Checkout will take you to Bankful Payment Gateway, our payments processor. Yes, this is legit.";
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--mid);
  line-height: 1.5;
}

/* ── BANKFUL NOTICE ─────────────────────────────────────── */
.bankful-notice {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  text-align: center !important;
  padding: 12px 16px !important;
  margin: 0 0 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--mid) !important;
  line-height: 1.5 !important;
}