/**
 * WASP Brand — site-wide DARK skin ("certificate of analysis").
 *
 * Loads after Elementor/WooCommerce when the rebrand is enabled. Pushes the whole
 * site (shop, product, cart, checkout, account, generic pages) onto the dark
 * black + metallic-gold system from the approved homepage design, so every page
 * matches the custom front page rendered by the wasp-home plugin.
 *
 * Authoritative by design: uses !important on the structural pieces so it wins
 * over the theme's and Elementor's baked light styles without needing each page
 * edited. The front page is handled by wasp-home and is left alone.
 *
 * Tokens mirror the homepage prototype.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
	--ink:#0a0a0b; --ink-2:#060607; --panel:#101012;
	--gold:#c2993f; --gold-hi:#e8cf8c; --gold-deep:#8c6a2b;
	--paper:#f4f1e9; --paper-dim:#b3afa4; --paper-faint:#76736c;
	--line:rgba(194,153,63,.26); --line-soft:rgba(244,241,233,.10);
	--serif:'Cormorant Garamond',Georgia,serif;
	--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ===== Base ============================================================== */
html, body { background: var(--ink) !important; }
body {
	color: var(--paper-dim);
	font-family: var(--sans);
}
body, p, li, td, th, dd, dt, label, .elementor-widget-text-editor, .elementor-widget-container {
	color: var(--paper-dim);
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.woocommerce-loop-product__title, .product_title, .entry-title {
	font-family: var(--serif) !important;
	color: var(--paper) !important;
	letter-spacing: -.01em;
	font-weight: 600;
}
a { color: var(--gold); transition: color .2s ease; }
a:hover { color: var(--gold-hi); }
hr, .elementor-divider-separator { border-color: var(--line) !important; }

/* Common theme/Elementor wrappers — let the dark body show through. */
.site, #content, .site-content, #primary, .hfeed, main, .elementor,
.e-con, .e-con-inner, .elementor-section, .elementor-column-wrap,
.page, .post, article {
	background-color: transparent !important;
}

/* Flip hard-coded WHITE inline backgrounds to ink (common Elementor case). */
[style*="background-color:#FFFFFF" i],
[style*="background-color: #FFFFFF" i],
[style*="background-color:#fff" i],
[style*="background-color: #fff" i],
[style*="background:#FFFFFF" i],
[style*="background: #fff" i] {
	background-color: var(--ink) !important;
}

/* ===== Header / footer (Elementor Theme Builder locations) ============== */
.elementor-location-header, .elementor-location-footer,
header.site-header, footer.site-footer {
	background-color: var(--ink-2) !important;
	border-color: var(--line-soft) !important;
}
.elementor-location-header a, .elementor-location-header .elementor-item,
.elementor-nav-menu a {
	color: var(--paper-dim) !important;
}
.elementor-location-header a:hover, .elementor-nav-menu a:hover,
.elementor-item.elementor-item-active {
	color: var(--gold) !important;
}

/* ===== Buttons ========================================================== */
.elementor-button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .wc-block-components-button,
.checkout-button, .wp-block-button__link {
	background-color: var(--gold) !important;
	color: var(--ink) !important;
	border: 1px solid var(--gold) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-family: var(--mono) !important;
	font-size: 12px;
	font-weight: 500;
	transition: background-color .2s ease, color .2s ease;
}
.elementor-button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover, .checkout-button:hover, .wp-block-button__link:hover {
	background-color: var(--gold-hi) !important;
	color: var(--ink) !important;
}
/* Ghost variant — add CSS class `wasp-btn-ghost` to an Elementor button */
.wasp-btn-ghost .elementor-button, .elementor-button.wasp-btn-ghost {
	background: transparent !important; color: var(--gold) !important; border-color: var(--line) !important;
}

/* ===== WooCommerce — shop / archive ==================================== */
.woocommerce, .woocommerce-page { color: var(--paper-dim); }
.woocommerce ul.products li.product, ul.products li.product {
	background: linear-gradient(180deg,#0f0f11,#0b0b0d) !important;
	border: 1px solid var(--line-soft) !important;
	padding: 18px !important;
	border-radius: 0 !important;
	transition: transform .25s ease, border-color .25s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); border-color: var(--line) !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--paper) !important; font-size: 20px; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price,
.price, .amount, .woocommerce-Price-amount {
	color: var(--gold) !important; font-family: var(--serif) !important; font-weight: 600;
}
.woocommerce ul.products li.product .price del { color: var(--paper-faint) !important; }
.woocommerce span.onsale, .wc-block-components-product-badge {
	background: var(--gold) !important; color: var(--ink) !important; border-radius: 0 !important;
}
.star-rating span::before, .woocommerce .star-rating span::before { color: var(--gold) !important; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select { color: var(--paper-dim) !important; }

/* ===== WooCommerce — single product ==================================== */
.woocommerce div.product .product_title { color: var(--paper) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--panel) !important; border-color: var(--line-soft) !important; border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--ink-2) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--paper-dim) !important; }
.woocommerce .woocommerce-product-gallery { background: transparent !important; }
.woocommerce-tabs, .woocommerce .panel, .up-sells, .related.products { border-color: var(--line-soft) !important; }

/* ===== WooCommerce — cart / checkout / account ========================= */
.woocommerce table.shop_table, .woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce .cart_totals, .woocommerce-account .woocommerce-MyAccount-content {
	background: var(--panel) !important;
	border-color: var(--line-soft) !important;
	color: var(--paper-dim) !important;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border-color: var(--line-soft) !important; color: var(--paper-dim) !important;
}
/* HelloCommerce zebra-stripes CELLS white/near-white (#fff / #fbfbfb via
 * `.woocommerce tbody>tr:nth-child(…)>td/th` + a cart_totals first-row rule),
 * painting over the dark table background above — the big white boxes on the
 * cart page. Kill every cell background in Woo tables; the panel bg shows
 * through. The :not() spares the inline-styled yellow shipping-notice row. */
.woocommerce table.shop_table :is(thead, tbody, tfoot) > tr:not(.wasp-shipping-notice-row) > :is(th, td),
.woocommerce tbody > tr:not(.wasp-shipping-notice-row) > :is(th, td),
.woocommerce .cart_totals :is(th, td) {
	background: transparent !important;
}
.woocommerce table.shop_table .order-total .amount, .woocommerce .cart_totals .order-total .amount { color: var(--gold) !important; }
.woocommerce-MyAccount-navigation ul li { border-color: var(--line-soft) !important; }
.woocommerce-MyAccount-navigation a { color: var(--paper-dim) !important; }
.woocommerce-MyAccount-navigation .is-active a { color: var(--gold) !important; }

/* ===== Elementor Pro WooCommerce widgets (cart / checkout / side-cart) ===
 * These render their own light "card" containers (e-cart / e-checkout / the
 * slide-out menu cart) that the plain WooCommerce selectors above don't reach.
 * This is the stray white/gray box. Normalize it to the dark theme. */
.e-cart-section, .e-cart, .e-cart-form, .e-cart__container,
.e-checkout, .e-checkout__container, .e-checkout__column,
.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page {
	background-color: transparent !important;
	color: var(--paper-dim) !important;
}
/* The filled boxes within them: totals, order review, the side-cart panel. */
.e-cart-totals, .e-checkout__order_review, .e-checkout__payment,
.woocommerce-checkout-review-order, .e-cart-form > .cart,
.elementor-menu-cart__main, .elementor-menu-cart__container,
.elementor-menu-cart__products, .widget_shopping_cart_content {
	background-color: var(--panel) !important;
	border: 1px solid var(--line-soft) !important;
	color: var(--paper-dim) !important;
}
.e-cart-section :where(h1,h2,h3,h4,th,strong,label,.e-cart-totals__title),
.e-checkout :where(h1,h2,h3,h4,th,strong,label),
.elementor-menu-cart__main :where(a,span,strong) {
	color: var(--paper) !important;
}
/* Totals / prices stay gold. */
.e-cart-totals .amount, .e-checkout__order_review .amount,
.elementor-menu-cart__main .amount, .e-cart-section .amount,
.order-total .amount { color: var(--gold) !important; }
/* Rows/dividers inside the boxes follow the gold hairline. */
.e-cart-totals tr, .e-checkout__order_review tr, .e-cart-totals td,
.e-checkout__order_review td, .e-checkout__order_review th { border-color: var(--line-soft) !important; }

/* Side-cart (Elementor menu cart): remove the Checkout button — leave only
 * "View Cart", full-width. Checkout is reached from the cart page instead. */
.elementor-menu-cart__footer-buttons .elementor-button--checkout,
.elementor-menu-cart a.elementor-button--checkout,
.elementor-menu-cart__footer-buttons a.checkout,
.woocommerce-mini-cart__buttons a.checkout.wc-forward {
	display: none !important;
}
.elementor-menu-cart__footer-buttons { grid-template-columns: 1fr !important; }
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
	width: 100% !important;
	flex: 1 1 100% !important;
}

/* Form fields */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], textarea, select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
	background: var(--ink-2) !important;
	color: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
}
::placeholder { color: var(--paper-faint) !important; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	background: var(--panel) !important;
	border-top: 3px solid var(--gold) !important;
	color: var(--paper-dim) !important;
}
.woocommerce-message a, .woocommerce-info a { color: var(--gold) !important; }

/* ===== Old-brand remnants (hard-coded in the original kit) ============== */
/* Yellow→orange gradient heading text -> gold gradient */
.title-gradient {
	background: linear-gradient(95deg,var(--gold-deep),var(--gold) 50%,var(--gold-hi)) !important;
	-webkit-background-clip: text !important; background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
/* Custom scrollbar (was wasp yellow/orange) */
* { scrollbar-color: var(--gold) var(--ink-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); }
/* Page-transition flash colour (was peach #FFBC7D) */
e-page-transition, .elementor-kit-8 e-page-transition { background-color: var(--ink) !important; }

/* My Account page (post-13) — old "pop-up-image" wasp background -> dark. */
.elementor-13 .elementor-element.elementor-element-29643f5:not(.elementor-motion-effects-element-type-background),
.elementor-13 .elementor-element.elementor-element-29643f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-image: none !important;
	background-color: var(--ink) !important;
}
/* Any element anywhere still pointing at the old pop-up wasp graphic. */
[style*="pop-up-image" i] { background-image: none !important; }

/* Checkout-login prompt (wc_add_notice from the theme's checkout gate). */
.woocommerce-info, .wc-block-components-notice-banner.is-info {
	font-size: 14px;
}
/* Leftover hard-coded orange/yellow text */
[style*="color:#c76b00" i], [style*="color: #c76b00" i],
[style*="color:#e8dd18" i], [style*="color: #e8dd18" i] { color: var(--gold) !important; }

/* ===== RUO compliance strip (injected by class-brand-ruo.php) =========== */
.wasp-ruo-strip {
	background: var(--ink-2);
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
	color: var(--paper-faint);
	text-align: center; padding: 9px 16px; line-height: 1.5;
}
.wasp-ruo-strip b { color: var(--gold); font-weight: 500; }

/* ===== Age-verification gate (class-brand-agegate.php) ================== */
.wasp-agegate {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(6,6,7,.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	padding: 24px; font-family: var(--sans);
}
.wasp-agegate[hidden] { display: none; }
.wasp-agegate-box {
	max-width: 460px; width: 100%; text-align: center; position: relative;
	border: 1px solid var(--line); background: linear-gradient(180deg,#0e0e10,#08080a); padding: 48px 36px;
}
.wasp-agegate-box::before, .wasp-agegate-box::after { content:""; position:absolute; width:18px; height:18px; border:1px solid var(--gold); }
.wasp-agegate-box::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
.wasp-agegate-box::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.wasp-agegate-mark { width:60px; height:64px; margin:0 auto 20px; display:block; }
.wasp-agegate-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.wasp-agegate h2 { font-family:var(--serif); font-size:34px; font-weight:600; color:var(--paper); margin:0 0 16px; }
.wasp-agegate p { color:var(--paper-dim); font-size:14.5px; line-height:1.6; margin:0 0 22px; }
.wasp-agegate-check { display:flex; gap:10px; text-align:left; align-items:flex-start; color:var(--paper-dim); font-size:13px; line-height:1.5; cursor:pointer; margin-bottom:24px; }
.wasp-agegate-check input { margin-top:3px; accent-color:var(--gold); width:18px; height:18px; flex:0 0 auto; }
.wasp-agegate-actions { display:flex; gap:16px; align-items:center; justify-content:center; }
.wasp-agegate-enter { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; background:var(--gold); color:var(--ink); border:1px solid var(--gold); padding:14px 34px; cursor:pointer; transition:background-color .2s ease; }
.wasp-agegate-enter:hover:not(:disabled) { background:var(--gold-hi); }
.wasp-agegate-enter:disabled { opacity:.4; cursor:not-allowed; }
.wasp-agegate-leave { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); }
.wasp-agegate-leave:hover { color:var(--paper-dim); }
.wasp-agegate-legal { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-faint); margin:24px 0 0; }