/*
Theme Name: Empire Tools
Theme URI: https://example.com/empire-tools
Author: WebYoungstown
Author URI: https://webyoungstown.com
Description: Dark, mobile-first WooCommerce theme for Empire Tools — deep-discount tools and home goods. Sticky header, slide-out menu, app-style bottom tab bar, sale badges, pickup-first messaging. Fully compatible with Elementor and Elementor page templates.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empire-tools
Tags: e-commerce, dark, one-column, custom-menu, sticky-post, translation-ready
*/

/* =============================================================
   1. DESIGN TOKENS — edit these five colors to retheme the site
   ============================================================= */
:root {
  --et-bg: #0a0a0a;            /* page background            */
  --et-surface: #0d0d0d;       /* content surface            */
  --et-card: #1a1a1a;          /* cards / tiles              */
  --et-card-2: #111111;        /* drawer / deep panels       */
  --et-border: #262626;
  --et-border-2: #333333;
  --et-text: #f2f2f2;
  --et-muted: #9a9a9a;
  --et-accent: #d42121;        /* Empire red                 */
  --et-accent-dark: #a81a1a;
  --et-gold: #e8b04b;          /* link / disclaimer gold     */
  --et-gold-light: #ffce7a;
  --et-cream: #f0ede6;         /* search input               */
  --et-radius: 8px;
  --et-font-display: 'Oswald', 'Arial Narrow', 'DejaVu Sans Condensed', sans-serif;
  --et-font-body: 'Barlow', 'Helvetica Neue', 'DejaVu Sans', Arial, sans-serif;
  --et-header-h: 118px;
  --et-bottombar-h: 62px;
}

/* =============================================================
   2. BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--et-bg);
  color: var(--et-text);
  font-family: var(--et-font-body);
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--et-gold); text-decoration: none; }
a:hover { color: var(--et-gold-light); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--et-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .5px;
  color: var(--et-text);
  margin: 0 0 .5em;
  text-transform: uppercase;
}
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 1em; }
::selection { background: var(--et-accent); color: #fff; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; word-wrap: normal !important;
}
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.site-main { background: var(--et-surface); min-height: 60vh; padding-bottom: calc(var(--et-bottombar-h) + env(safe-area-inset-bottom, 0px) + 24px); }
body.elementor-page .site-main > .container { max-width: none; padding: 0; }

/* =============================================================
   3. BUTTONS  (theme, WooCommerce, Gutenberg and Elementor)
   ============================================================= */
.et-btn,
.button, button, input[type=submit],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.wp-block-button__link,
.elementor-button {
  display: inline-block;
  background: var(--et-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--et-radius);
  padding: 13px 22px;
  font-family: var(--et-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease;
}
.et-btn:hover, .button:hover, button:hover, input[type=submit]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wp-block-button__link:hover, .elementor-button:hover {
  background: var(--et-accent-dark); color: #fff !important;
}
.et-btn--ghost,
.woocommerce a.button.et-btn--ghost {
  background: transparent;
  border: 1px solid var(--et-border-2);
  color: var(--et-text) !important;
}
.et-btn--ghost:hover { background: var(--et-card); border-color: var(--et-accent); }
.et-btn--block { display: block; width: 100%; }
.woocommerce .button.disabled, .woocommerce .button:disabled {
  background: var(--et-border) !important; color: var(--et-muted) !important;
}

/* =============================================================
   4. STICKY HEADER
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--et-bg);
  border-bottom: 1px solid var(--et-border);
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
.site-header__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; max-width: 1100px; margin: 0 auto;
}
.et-burger {
  background: none; border: none; padding: 8px; margin: -8px;
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
}
.et-burger span { display: block; width: 22px; height: 2px; background: var(--et-text); transition: transform .2s; }
.et-burger span:last-child { width: 14px; background: var(--et-accent); }
.site-logo {
  flex: 1; text-align: center;
  font-family: var(--et-font-display); line-height: 1;
  white-space: nowrap; overflow: hidden;
}
.site-logo a { display: inline-block; }
.site-logo .site-logo__a { font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--et-accent); }
.site-logo .site-logo__b { font-size: 22px; font-weight: 400; letter-spacing: 6px; color: #cfcfcf; margin-left: 6px; }
.site-logo img.custom-logo { margin: 0 auto; max-height: 42px; width: auto; }
.et-cart-link { position: relative; padding: 6px; display: inline-flex; color: var(--et-text); }
.et-cart-link svg { stroke: var(--et-text); }
.et-cart-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--et-accent); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.et-cart-count:empty, .et-cart-count[data-count="0"] { display: none; }
.site-header__search { display: flex; padding: 2px 16px 12px; max-width: 1100px; margin: 0 auto; }
.site-header__search .search-field {
  flex: 1; min-width: 0; background: var(--et-cream); border: none;
  border-radius: var(--et-radius) 0 0 var(--et-radius);
  padding: 13px 16px; color: #1a1a1a; font-family: var(--et-font-body);
  font-size: 16px; outline: none; min-height: 48px;
}
.site-header__search .search-submit {
  background: var(--et-accent); border: none;
  border-radius: 0 var(--et-radius) var(--et-radius) 0;
  padding: 0 18px; min-height: 48px; display: flex; align-items: center;
}
.site-header__search .search-submit svg { stroke: #fff; }

/* =============================================================
   5. SLIDE-OUT DRAWER MENU
   ============================================================= */
.et-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.et-drawer {
  position: fixed; top: 0; left: 0; transform: translateX(-105%);
  width: 280px; max-width: 82vw; height: 100vh; height: 100dvh;
  background: var(--et-card-2); z-index: 61;
  padding: 24px 0; box-shadow: 8px 0 30px rgba(0,0,0,.5);
  overflow-y: auto; transition: transform .22s ease;
}
body.et-menu-open { overflow: hidden; }
body.et-menu-open .et-overlay { opacity: 1; pointer-events: auto; }
body.et-menu-open .et-drawer { transform: translateX(0); }
.et-drawer__brand { padding: 0 22px 18px; border-bottom: 1px solid var(--et-border); margin-bottom: 8px; }
.et-drawer nav ul { list-style: none; margin: 0; padding: 0; }
.et-drawer nav li a {
  display: block; padding: 14px 22px; color: var(--et-text);
  font-family: var(--et-font-display); font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-left: 3px solid transparent;
}
.et-drawer nav li a:hover,
.et-drawer nav li.current-menu-item > a { color: #fff; border-left-color: var(--et-accent); background: rgba(212,33,33,.08); }
.et-drawer nav .sub-menu li a { padding-left: 38px; font-size: 13px; color: var(--et-muted); }

/* =============================================================
   6. BOTTOM TAB BAR (mobile app-style)
   ============================================================= */
.et-bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
  background: #101010; border-top: 1px solid #2a2a2a;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.et-bottombar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px; color: #8a8a8a;
  font-family: var(--et-font-display); font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; position: relative;
}
.et-bottombar a svg { stroke: currentColor; }
.et-bottombar a.is-active { color: var(--et-accent); }
.et-bottombar .et-cart-count { top: 2px; right: calc(50% - 20px); }
@media (min-width: 900px) {
  .et-bottombar { display: none; }
  .site-main { padding-bottom: 40px; }
}

/* =============================================================
   7. HOME SECTIONS (built-in front page + matching Elementor CSS)
   ============================================================= */
/* Compact hero card — fits in the first screen under the header,
   styled like a promo banner. Works for the built-in front page AND for
   any Elementor column/section given the class "et-hero-card". */
.et-hero-compact { padding: 12px 0 4px; }
.et-hero-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #e02525 0%, var(--et-accent) 34%, #7c0f0f 100%);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 12px 28px rgba(212, 33, 33, .18);
}
.et-hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.16), transparent 55%);
}
.et-hero-card::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -16px; bottom: -22px; width: 150px; height: 150px;
  transform: rotate(12deg); opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.et-hero-card > * { position: relative; z-index: 1; }
.et-hero-card h1, .et-hero-card h2 {
  margin: 0 0 8px; font-size: 24px; line-height: 1.15; color: #fff; letter-spacing: .2px;
}
.et-hero-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 36ch; }
.et-hero-card .et-btn--light,
.et-hero-card .et-btn--light:hover { background: #fff; color: #a31313 !important; border-color: #fff; }
.et-hero-card .elementor-button { background: #fff; color: #a31313 !important; }
.et-hero-card .elementor-button:hover { background: #ffe9e9; color: #a31313 !important; }
/* Same compact rhythm when the card is an Elementor column */
.et-hero-card > .elementor-widget-wrap { padding: 0; }
.et-hero-card .elementor-widget:not(:last-child) { margin-bottom: 4px; }
.et-hero-card .elementor-widget-button { margin-top: 6px; }
.et-disclaimer {
  text-align: center; padding: 14px 16px;
  border-top: 1px solid var(--et-border); border-bottom: 1px solid var(--et-border);
  background: var(--et-bg);
}
.et-disclaimer p { margin: 0; font-style: italic; color: var(--et-gold); font-size: 13.5px; }
.et-disclaimer .et-disclaimer__note { color: var(--et-accent); font-weight: 600; font-style: normal; margin-top: 4px; }
.et-section { padding: 30px 0 8px; }
.et-section--featured { padding-top: 18px; }
.et-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.et-section__head h2 { margin: 0; padding-left: 12px; border-left: 4px solid var(--et-accent); }
.et-section__head a { font-size: 13px; letter-spacing: .5px; }
.et-storecard {
  background: var(--et-card); border: 1px solid var(--et-border);
  border-radius: var(--et-radius); padding: 22px; text-align: center;
}
.et-storecard h2 { margin-bottom: 6px; }
.et-storecard p { color: var(--et-muted); font-size: 14px; }
.et-storecard__map {
  background: #131313; border: 1px dashed var(--et-border-2); border-radius: var(--et-radius);
  color: var(--et-muted); font-size: 13px; padding: 34px 12px; margin: 14px 0;
}
.et-storecard__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* =============================================================
   8. WOOCOMMERCE — GRID / LOOP
   ============================================================= */
.woocommerce-notices-wrapper { padding-top: 12px; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
  background: var(--et-card); color: var(--et-text);
  border-top-color: var(--et-accent); border-radius: var(--et-radius);
}
.woocommerce .woocommerce-message a.button { margin-left: 8px; }
.woocommerce-result-count { color: var(--et-muted); font-size: 13px; }
.woocommerce .woocommerce-ordering select, select, textarea,
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search] {
  background: var(--et-card); color: var(--et-text);
  border: 1px solid var(--et-border-2); border-radius: var(--et-radius);
  padding: 10px 12px; font-family: var(--et-font-body); font-size: 15px;
}
ul.products {
  display: grid !important; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin: 0 0 30px !important; padding: 0; list-style: none;
}
/* WooCommerce core adds clearfix ::before/::after to ul.products; in a grid
   container those become anonymous grid items and steal the first cell,
   pushing card #1 into the right column. Remove them. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }
@media (min-width: 700px)  { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products li.product, ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--et-card); border: 1px solid var(--et-border);
  border-radius: var(--et-radius); padding: 10px; position: relative;
  display: flex; flex-direction: column;
}
ul.products li.product a img, .et-photo {
  aspect-ratio: 1 / 1; object-fit: contain; width: 100%;
  border-radius: 6px; background: #202020; margin-bottom: 10px;
}
/* Product photos sit on a white plate, as they do on every major retailer.
   Two reasons: a minority of the catalogue PNGs (~3% of the alpha-capable
   ones) are true cut-outs that vanish against a dark card, and every image
   below the fold is lazy-loaded, so until it arrives the browser paints this
   background -- white reads as "loading", near-black reads as "broken".
   object-fit is `contain`, not `cover`: these are product shots and cropping
   a square out of a tall tool cuts the head or the handle off.
   Scoped with :not(.product-category) -- WooCommerce gives brand tiles BOTH
   classes (<li class="product-category product">), and those carry
   full-bleed banner art that must not sit on a white plate.
   (.et-photo is the "no photo" placeholder tile and stays dark on purpose.) */
ul.products li.product:not(.product-category) a img { background: #fff; }

/* Brand tiles: banner art edge-to-edge on the page background, no white. */
ul.products li.product-category,
ul.products li.product-category a { background: var(--et-bg); }
ul.products li.product-category a img {
  background: var(--et-bg) !important;
  object-fit: cover; /* banners are wide art -- fill the tile, no letterboxing */
}
.et-photo { display: flex; align-items: center; justify-content: center;
  color: #555; font-family: var(--et-font-display); letter-spacing: 3px; font-size: 13px; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  font-family: var(--et-font-body); font-size: 13.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; line-height: 1.35;
  color: var(--et-text); padding: 0; margin: 0 0 8px; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product .price, .price {
  color: var(--et-text); font-weight: 700; font-size: 16px;
}
.woocommerce ul.products li.product .price del, .price del {
  color: var(--et-muted); font-weight: 400; font-size: 13px; opacity: 1; margin-right: 6px;
}
.woocommerce ul.products li.product .price ins, .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin-top: auto; width: 100%; font-size: 14px; padding: 11px 10px; }
.woocommerce span.onsale, .et-flash {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  background: var(--et-accent); color: #fff;
  min-height: 0; min-width: 0; line-height: 1; border-radius: 6px;
  padding: 5px 8px; font-size: 12px; font-weight: 700; margin: 0;
}
.et-oos-badge {
  position: absolute; top: 46px; left: 16px; z-index: 5;
  background: rgba(10,10,10,.85); border: 1px solid var(--et-border-2);
  color: #cfcfcf; border-radius: 6px; padding: 5px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
}
li.product.outofstock img { opacity: .55; }
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--et-card); color: var(--et-text); border-radius: 6px; margin: 0 3px;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--et-accent); color: #fff; }

/* Category tiles ("Shop by Brand") */
ul.products li.product-category { padding: 0; overflow: hidden; border-color: var(--et-border-2); }

/* Little brand cards — add the class "et-brands" to the section wrapping
   [product_categories] (theme front page and the Elementor home both do).
   Compact 3-across name cards; the big category image is hidden here.
   Remove the img rule below if you upload real brand logos and want them
   shown on the cards. */
.et-brands ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; margin-bottom: 20px !important; }
.et-brands ul.products li.product-category { border-radius: 12px; }
.et-brands ul.products li.product-category a { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 4px; }
.et-brands ul.products li.product-category img { display: none !important; }
.et-brands ul.products li.product-category h2.woocommerce-loop-category__title {
  border: 0; padding: 0; margin: 0; width: 100%; font-size: 11px; letter-spacing: .3px;
  line-height: 1.3; text-align: center; overflow-wrap: break-word;
}
.et-brands ul.products li.product-category h2.woocommerce-loop-category__title::after {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--et-accent); margin: 6px auto 0;
}
@media (min-width: 700px) { .et-brands ul.products { grid-template-columns: repeat(6, 1fr) !important; } }
ul.products li.product-category a { display: block; }
ul.products li.product-category img { aspect-ratio: 5 / 2; margin: 0; border-radius: 0; object-fit: contain; background: var(--et-card); padding: 6px 10px; }
ul.products li.product-category h2.woocommerce-loop-category__title {
  font-family: var(--et-font-display); font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; text-align: center;
  color: var(--et-text); padding: 18px 8px; margin: 0; min-height: 0;
  border-top: 3px solid var(--et-accent); -webkit-line-clamp: unset; display: block;
}
ul.products li.product-category h2 .count { display: none; }
ul.products li.product-category:hover h2 { color: var(--et-gold); }

/* =============================================================
   9. WOOCOMMERCE — SINGLE PRODUCT
   ============================================================= */
.woocommerce .woocommerce-breadcrumb { color: var(--et-muted); font-size: 12.5px; padding-top: 14px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--et-muted); }
.woocommerce div.product { color: var(--et-text); }
.woocommerce div.product .product_title { font-size: 22px; text-transform: none; letter-spacing: .3px; }
.woocommerce div.product div.images { margin-bottom: 18px; position: relative; }
.woocommerce div.product div.images img { border-radius: var(--et-radius); background: #fff; }
.woocommerce div.product p.price { color: var(--et-text); font-size: 24px; font-weight: 700; }
.woocommerce div.product p.price del { color: var(--et-muted); font-size: 16px; }
.woocommerce div.product p.price ins { text-decoration: none; }
.et-save-badge {
  display: inline-block; background: rgba(232,176,75,.14); color: var(--et-gold);
  border: 1px solid rgba(232,176,75,.4); border-radius: 6px;
  padding: 4px 9px; font-size: 13px; font-weight: 700; margin: 2px 0 10px;
}
.et-condition-note {
  border-left: 3px solid var(--et-gold); background: var(--et-card);
  border-radius: 0 var(--et-radius) var(--et-radius) 0;
  padding: 10px 12px; margin: 14px 0; font-size: 13px; font-style: italic; color: var(--et-gold);
}
.et-pickup-note { display: flex; align-items: center; gap: 8px; color: var(--et-text); font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
.et-pickup-note svg { stroke: var(--et-accent); flex: none; }
.et-pickup-note small { color: var(--et-muted); font-weight: 400; }
.woocommerce div.product form.cart { margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce .quantity .qty {
  width: 74px; min-height: 46px; text-align: center;
  background: var(--et-card); border: 1px solid var(--et-border-2);
  color: var(--et-text); border-radius: var(--et-radius);
}
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-height: 46px; }
.woocommerce div.product .product_meta { color: var(--et-muted); font-size: 13px; border-top: 1px solid var(--et-border); padding-top: 12px; }
.woocommerce div.product .product_meta a { color: var(--et-gold); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--et-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--et-card); border-color: var(--et-border); border-radius: 8px 8px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--et-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--et-surface); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--et-text); }
.woocommerce div.product .woocommerce-tabs .panel { border: 1px solid var(--et-border); border-radius: 0 8px 8px 8px; padding: 16px; }
.related.products > h2, .upsells.products > h2 { padding-left: 12px; border-left: 4px solid var(--et-accent); }
.woocommerce div.product p.stock.out-of-stock { color: var(--et-accent); font-weight: 700; }

/* =============================================================
   10. CART / CHECKOUT / ACCOUNT
   ============================================================= */
.woocommerce table.shop_table { border: 1px solid var(--et-border); border-radius: var(--et-radius); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--et-border) !important; color: var(--et-text); }
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { border-color: var(--et-border); }
.woocommerce-cart table.cart img { border-radius: 6px; }
.woocommerce .cart_totals, .woocommerce .woocommerce-checkout-review-order,
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  background: var(--et-card); border-radius: var(--et-radius);
}
.woocommerce-checkout #payment div.payment_box { background: #202020; color: var(--et-text); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #202020; }
.woocommerce form .form-row label { color: var(--et-muted); font-size: 13px; }
.select2-container--default .select2-selection--single { background: var(--et-card); border: 1px solid var(--et-border-2); height: 42px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--et-text); line-height: 42px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 10px 14px; background: var(--et-card);
  border-radius: 6px; margin-bottom: 6px; color: var(--et-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-left: 3px solid var(--et-accent); }

/* =============================================================
   11. PAGES / POSTS / FOOTER
   ============================================================= */
.et-page-head { padding: 28px 0 6px; }
.et-page-head h1 { padding-left: 12px; border-left: 4px solid var(--et-accent); }
.entry-content { padding-bottom: 30px; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer { background: var(--et-bg); border-top: 1px solid var(--et-border); padding: 30px 0 26px; }
.site-footer .site-logo { text-align: left; margin-bottom: 14px; }
.site-footer nav ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer nav a { color: #cfcfcf; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-family: var(--et-font-display); }
.site-footer nav a:hover { color: var(--et-gold); }
.site-footer .et-footnote { color: var(--et-muted); font-size: 12.5px; margin: 0; }
.et-404 { text-align: center; padding: 70px 0; }
.et-404 h1 { font-size: 64px; color: var(--et-accent); }

/* =============================================================
   12. ELEMENTOR COMPATIBILITY
   ============================================================= */
.elementor-heading-title { font-family: var(--et-font-display); text-transform: uppercase; letter-spacing: .5px; }
.elementor-widget-text-editor { color: var(--et-text); }
.elementor a.elementor-button { color: #fff; }
.elementor-widget-shortcode .et-section { padding: 0; }
.elementor-kit- .elementor-section { background-color: transparent; }

/* =============================================================
   Shop by Brand — full-bleed banner pills.
   Banner image fills the ENTIRE pill; no frame, padding or border.
   ============================================================= */
.et-brands ul.products li.product-category {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  display: block;
  aspect-ratio: 3 / 1;
}
.et-brands ul.products li.product-category a {
  display: block;
  width: 100%; height: 100%;
  padding: 0 !important; margin: 0 !important;
  min-height: 0;
}
.et-brands ul.products li.product-category a img,
.et-brands ul.products li.product-category img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;   /* stretch to fill the whole pill; no crop */
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px;
}
.et-brands ul.products li.product-category h2.woocommerce-loop-category__title,
.et-brands ul.products li.product-category h2.woocommerce-loop-category__title::after {
  display: none !important;
}

/* Shop by Brand — 2 banners wide (bigger). Overrides the 3/6-col grid. */
.et-brands ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
@media (min-width: 700px) { .et-brands ul.products { grid-template-columns: repeat(2, 1fr) !important; } }

/* --- "x sold this week" social proof ------------------------------------ */
/* Only rendered when a product actually moved >=1 unit in the last 7 days,
   so it never shows a dead "0 sold". Green reads as momentum without
   competing with the red sale badge. */
.et-sold {
  display: inline-block; margin: 0 0 6px;
  font-family: var(--et-font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; color: #4ade80;
}
.woocommerce div.product .et-sold { font-size: 13px; margin-bottom: 10px; }

/* --- storefront band (replaces the old Hot Deals grid) ------------------- */
.et-storefront {
  position: relative; overflow: hidden;
  border-radius: var(--et-radius);
  border: 1px solid var(--et-border);
  aspect-ratio: 1 / 1;              /* mobile: square */
  display: flex; align-items: flex-end;
}
@media (min-width: 700px) {
  /* desktop: two tiles wide, matching the brand grid beside it */
  .et-storefront { aspect-ratio: 2 / 1; }
}
.et-storefront__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 0;
}
.et-storefront__copy {
  position: relative; z-index: 2; width: 100%;
  padding: 22px 20px 20px;
  background: linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 55%, transparent 100%);
}
.et-storefront__tagline {
  margin: 0 0 6px; font-size: 24px; line-height: 1.1; color: #fff;
}
.et-storefront__sub {
  margin: 0; font-size: 14px; line-height: 1.45; color: #e6e6e6; max-width: 52ch;
}
@media (min-width: 700px) {
  .et-storefront__copy { padding: 34px 32px 28px; }
  .et-storefront__tagline { font-size: 34px; }
  .et-storefront__sub { font-size: 15.5px; }
}

/* Product-page analytics line (views / adds to cart). Muted so it reads as
   supporting detail next to the price, not another badge competing for
   attention. Only rendered when a metric is actually non-zero. */
.et-stats {
  margin: 0 0 12px; font-size: 13px; color: var(--et-muted);
  letter-spacing: .01em;
}

/* =============================================================
   BACK IN STOCK NOTIFIER — themed to match
   ============================================================= */
/* The plugin ships a Bootstrap "panel panel-primary" in default blue, which
   reads as a third-party widget bolted onto a dark store. Restyled here to
   look like the rest of the product summary: dark card, Empire red action. */
.cwginstock-panel-primary,
.cwginstock-subscribe-form .panel {
  background: var(--et-card) !important;
  border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.cwginstock-panel-heading,
.cwginstock-subscribe-form .panel-heading {
  background: var(--et-accent) !important;
  border: 0 !important; color: #fff !important;
  font-family: var(--et-font-display); letter-spacing: .5px;
  text-transform: uppercase; font-size: 15px; padding: 12px 16px !important;
}
.cwginstock-panel-body { background: transparent !important; padding: 16px !important; }
.cwginstock-subscribe-form input[type="text"],
.cwginstock-subscribe-form input[type="email"],
input.cwgstock_name, input.cwgstock_email {
  background: var(--et-card-2) !important;
  border: 1px solid var(--et-border-2) !important;
  border-radius: 6px !important;
  color: var(--et-text) !important;
  min-height: 44px !important; padding: 0 12px !important;
  font-family: var(--et-font-body) !important; font-size: 15px !important;
  width: 100% !important; margin-bottom: 10px !important;
}
.cwginstock-subscribe-form input::placeholder { color: var(--et-muted) !important; opacity: 1; }
button.cwgstock_button, .cwgstock_button {
  background: var(--et-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--et-radius) !important;
  width: 100% !important; min-height: 46px !important;
  font-family: var(--et-font-body) !important; font-weight: 600 !important;
  font-size: 15px !important; cursor: pointer;
}
button.cwgstock_button:hover, .cwgstock_button:hover { background: var(--et-accent-dark) !important; }
.cwgstock_output { color: var(--et-text) !important; font-size: 14px; }

/* =============================================================
   WOOCOMMERCE BLOCKS (cart + checkout) — match the theme
   ============================================================= */
/* The blocks UI ships its own component styles, so the theme's button rules
   never reach it — "Place Order" rendered grey. Scope to the two primary
   submit buttons only: quantity steppers are also .wc-block components and
   must NOT turn red. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background: var(--et-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--et-radius) !important;
  font-family: var(--et-font-body) !important; font-weight: 600 !important;
  font-size: 16px !important; min-height: 50px !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover { background: var(--et-accent-dark) !important; }
/* Totals emphasis: the number people check before committing. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 22px; font-weight: 700; }

/* =============================================================
   UX PASS — price-first hierarchy, 44px tap targets, mobile focus
   (implements the 2026-09-01 page-by-page audit)
   ============================================================= */

/* --- product cards: the PRICE is the product on a discount store ---------- */
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price > .amount {
  font-size: 20px; font-weight: 800; letter-spacing: .01em;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount { font-size: 13px; font-weight: 400; }
/* Anchor price+button to the card bottom so rows align even when titles wrap
   to three lines (the old fixed min-height let prices float at odd heights). */
.woocommerce ul.products li.product .price { margin-top: auto; padding-top: 6px; }
.woocommerce ul.products li.product .button {
  margin-top: 8px; min-height: 44px; font-size: 15px; font-weight: 700; padding: 12px 10px;
}
/* Discount badge earns more presence next to the bigger price. */
.woocommerce span.onsale, .et-flash { font-size: 14px; padding: 5px 9px; }

/* --- pagination: 59 pages of catalog deserve thumb-sized controls --------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}

/* --- brand chip row on shop + search -------------------------------------- */
.et-brand-chips {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px; margin: 0 0 6px; scrollbar-width: none;
}
.et-brand-chips::-webkit-scrollbar { display: none; }
.et-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 40px; padding: 8px 16px;
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-radius: 999px; color: var(--et-text);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.et-chip:hover { border-color: var(--et-accent); color: #fff; }

/* --- single product: price dominates, CTA unmistakable -------------------- */
.woocommerce div.product p.price {
  font-size: 34px; font-weight: 800; color: var(--et-text); line-height: 1.1;
}
.woocommerce div.product p.price ins { font-size: 34px; font-weight: 800; text-decoration: none; }
.woocommerce div.product p.price del { font-size: 15px; font-weight: 400; opacity: .8; }
.woocommerce div.product form.cart .single_add_to_cart_button {
  min-height: 52px; font-size: 17px; font-weight: 700;
}
.woocommerce div.product form.cart .quantity .qty { min-height: 52px; }
.woocommerce div.product p.stock.in-stock {
  color: #5ecb70; font-weight: 700; font-size: 14.5px;
}
.woocommerce div.product p.stock.in-stock::before { content: "\2713\00a0"; }
.woocommerce div.product p.stock.out-of-stock {
  display: inline-block; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  border: 1px solid var(--et-accent); border-radius: 6px;
  padding: 5px 12px; color: #ff6b6b;
}
/* Description tab: hide the doubled heading + the empty spacer paragraphs
   the Wix export left behind. */
.woocommerce-Tabs-panel--description > h2:first-child { display: none; }
.woocommerce-Tabs-panel p:empty { display: none; }

/* --- out-of-stock notify panel: one red action only ----------------------- */
/* The panel HEADING was styled exactly like the primary button (solid red,
   full width) — two "buttons" where only Subscribe is tappable. Demote the
   heading to a label so the single real action keeps the red. */
.cwginstock-panel-heading,
.cwginstock-subscribe-form .panel-heading {
  background: var(--et-card-2) !important;
  color: var(--et-text) !important;
  border-left: 4px solid var(--et-accent) !important;
  font-size: 14px !important;
}

/* --- blocks cart/checkout: hierarchy + tap targets ------------------------ */
/* The sticky proceed bar sits exactly where the theme's fixed bottom tab bar
   lives; lift it above so neither control is buried. */
.wc-block-cart__submit-container--sticky {
  bottom: calc(var(--et-bottombar-h) + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--et-surface); border-top: 1px solid var(--et-border);
}
.wc-block-cart .wc-block-cart__submit-button { text-decoration: none !important; }
.wc-block-cart-items .wc-block-components-product-price__value.is-discounted {
  font-size: 18px; font-weight: 700; color: #fff;
}
.wc-block-components-sale-badge {
  background: var(--et-accent) !important; color: #fff !important; border-color: var(--et-accent) !important;
}
.wc-block-components-quantity-selector__button { min-width: 44px; min-height: 44px; }
.wc-block-cart-item__remove-link { display: inline-block; padding: 12px 8px; }
/* The short description merely echoes the title on every imported product. */
.wc-block-cart-items .wc-block-components-product-metadata__description { display: none; }
.wc-block-components-order-summary .wc-block-components-product-metadata__description { display: none; }
/* Checkout small controls under 44px */
.wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__add-note .wc-block-components-checkbox__label,
.wc-block-components-checkout-return-to-cart-button {
  min-height: 44px; display: inline-flex; align-items: center;
}


/* --- my account ----------------------------------------------------------- */
.et-login-note { color: var(--et-muted); font-size: 14.5px; margin: 0 0 16px; }
.woocommerce-form-login .woocommerce-form-login__submit { min-height: 48px; font-size: 16px; }
@media (max-width: 700px) {
  .woocommerce-form-login .woocommerce-form-login__submit { display: block; width: 100%; }
}
.woocommerce-form__input-checkbox { width: 22px; height: 22px; accent-color: var(--et-accent); }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }

/* --- 404: one big obvious way back to the deals --------------------------- */
.error404 .site-main { display: flex; align-items: center; justify-content: center; }
.error404 .site-main .container { width: 100%; }
.et-404 { padding: 40px 0; }
.et-404 .et-btn { font-size: 17px; font-weight: 700; padding: 16px 32px; min-height: 48px; margin: 4px 6px 0 0; }

/* --- hero CTA: biggest tappable element in the card ----------------------- */
.et-hero-card .elementor-button { font-size: 16px; font-weight: 700; padding: 14px 28px; }

/* --- footer: real tap targets without changing the look ------------------- */
.site-footer nav a { display: inline-block; padding: 12px 10px; }
.site-footer nav ul { gap: 0 8px; }

/* --- contact page action buttons ------------------------------------------ */
.et-call-btn { font-size: 18px; min-height: 50px; display: inline-flex; align-items: center; }
.et-directions-btn { margin-top: 8px; display: inline-flex; align-items: center; min-height: 46px; }

/* Pickup-only: a single shipping option is not a choice — hide the lone radio
   in cart totals so it reads as a fact, not a decision. (Checkout keeps its
   Pickup row, which the customer does confirm.) */
.wc-block-cart .wc-block-components-totals-shipping .wc-block-components-shipping-rates-control { display: none; }

/* =============================================================
   UX PASS v2 — price truly dominant, badge consistency, polish
   (from the before/after verification round)
   ============================================================= */

/* PRICE must be unmistakably the biggest thing on a card. The v1 bump to 20px
   still tied the bold 3-line title; go to 24px/900 and lighten the title so
   price wins at a glance. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price > .amount {
  font-size: 24px; font-weight: 900; line-height: 1.05;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount { font-size: 13px; font-weight: 400; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-weight: 400; font-size: 13px;
}

/* Single product: price dominates the buy box outright. */
.woocommerce div.product p.price,
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .amount { font-size: 38px; font-weight: 900; }
.woocommerce div.product .product_title.entry-title { font-size: 20px; font-weight: 700; }

/* One savings-badge treatment everywhere: solid red, matching the -% badge
   (was a gold outline on the product page, red fill in the cart). */
.et-save-badge {
  background: var(--et-accent); color: #fff; border: 0;
  font-size: 13px; font-weight: 800; letter-spacing: .02em; padding: 5px 10px;
}

/* Footer links: keep them in the warm palette, never the browser blue that a
   :visited state can leak in. */
.site-footer nav a,
.site-footer nav a:link,
.site-footer nav a:visited { color: #cfcfcf; }
.site-footer nav a:hover { color: var(--et-gold); }

/* Mobile: cap the product hero so price + Add to cart are reachable without a
   long scroll (the gallery was eating the whole first viewport). */
@media (max-width: 700px) {
  .woocommerce div.product .woocommerce-product-gallery { max-width: 78vw; margin: 0 auto; }
  .woocommerce div.product .woocommerce-product-gallery__image img { max-height: 60vh; object-fit: contain; }
}

/* Brand-chip row: a soft right-edge fade signals it scrolls rather than
   looking like the last chip is clipped. */
.et-brand-chips { position: relative; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%); mask-image: linear-gradient(to right, #000 92%, transparent 100%); }

/* =============================================================
   FIBOSEARCH — one small block; colors come from the plugin's
   own settings (see elementor-templates/store-config.php)
   ============================================================= */
.site-header__search .dgwt-wcas-search-wrapp {
  flex: 1; min-width: 0; max-width: none;
  background: transparent !important; padding: 0 !important; box-shadow: none !important;
}
.site-header__search .dgwt-wcas-search-input[type="search"],
.site-header__search .dgwt-wcas-search-input[type="search"]:focus,
.site-header__search .dgwt-wcas-search-wrapp.dgwt-wcas-active .dgwt-wcas-search-input[type="search"],
.site-header__search .dgwt-wcas-search-wrapp.dgwt-wcas-search-focused .dgwt-wcas-search-input[type="search"],
.site-header__search .dgwt-wcas-search-wrapp.dgwt-wcas-search-filled .dgwt-wcas-search-input[type="search"] {
  min-height: 46px !important; height: 46px !important;
  font-family: var(--et-font-body) !important; font-size: 16px !important;
  /* all four corners: the field runs full-width UNDER the absolutely-
     positioned button, and square right corners peeked out past the button's
     rounded ones as cream notches. The right pair hides behind the button. */
  border-radius: var(--et-radius) !important;
  border: 0 !important; box-shadow: none !important;
  /* pirx hands the field's background to its wrapper on focus; the wrappers
     are transparent here (halo fix), so the INPUT must own the cream in every
     state or typed text lands on the dark header again. */
  background: var(--et-cream) !important;
  background-color: var(--et-cream) !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  opacity: 1 !important;
}
.site-header__search .dgwt-wcas-search-input::placeholder { color: #6b6b6b !important; opacity: 1; }
.site-header__search .dgwt-wcas-sf-wrapp { position: relative !important; }
.site-header__search .dgwt-wcas-search-submit {
  min-height: 46px !important; height: 46px !important; width: 52px !important;
  border-radius: 0 var(--et-radius) var(--et-radius) 0 !important;
  border: 0 !important; margin: 0 !important;
  /* pirx absolutely-positions the submit on the LEFT below its mobile
     breakpoint, covering the placeholder — pin it to the right in all
     viewports instead. */
  position: absolute !important; left: auto !important; right: 0 !important; top: 0 !important;
  /* the plugin only regenerates its color CSS from its own settings screen,
     so paint the submit here as well */
  background: var(--et-accent) !important;
}
/* pirx pads the input on the left for that (relocated) button — rebalance. */
.site-header__search .dgwt-wcas-search-input[type="search"] {
  padding-left: 16px !important; padding-right: 60px !important;
}
.site-header__search .dgwt-wcas-search-submit:hover { background: var(--et-accent-dark) !important; }
.site-header__search .dgwt-wcas-search-submit svg,
.site-header__search .dgwt-wcas-search-submit path { fill: #fff !important; }
.dgwt-wcas-suggestions-wrapp { border-radius: 10px; overflow: hidden; z-index: 1000; }

/* =============================================================
   CARD UNIFORMITY — identical rows regardless of title length
   ============================================================= */
/* The title reserves EXACTLY three lines (its clamp maximum) whether the name
   fills one line or three, so image, title-block, price and button all start
   at the same y in every card of a row. Price+button are already pinned to
   the card bottom via .price { margin-top: auto }. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  min-height: calc(1.35em * 3);
  margin-bottom: 0;
}
/* Weekly-sold line (when present) must not shift the price row: give it a
   fixed slot inside the flexible gap instead of extra height. */
ul.products li.product .et-sold { margin: 4px 0 0; }

/* =============================================================
   RESTORED: hero storefront photo (regression — the round-5 CSS
   cleanup excised this block along with the stale search CSS)
   ============================================================= */
/* Extra BACKGROUND LAYERS, not a pseudo-element: .et-hero-card already uses
   ::before (corner glow) and ::after (bolt watermark). Layers top-first:
   red veil (opaque left -> clear right), the photo anchored right, then the
   original red gradient. --et-hero-photo is injected by inc/storefront.php
   and defaults to none so the card renders before any photo is set. */
:root { --et-hero-photo: none; }
.et-hero-card {
  background-image:
    linear-gradient(to left, rgba(124,15,15,0) 0%, rgba(150,17,17,.55) 34%, rgba(190,28,28,.93) 62%, rgba(212,33,33,1) 80%),
    var(--et-hero-photo),
    linear-gradient(135deg, #e02525 0%, var(--et-accent) 34%, #7c0f0f 100%);
  background-size: cover, cover, cover;
  background-position: center, right center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
@media (max-width: 700px) {
  .et-hero-card {
    background-image:
      linear-gradient(to left, rgba(124,15,15,.25) 0%, rgba(160,18,18,.86) 42%, rgba(212,33,33,1) 72%),
      var(--et-hero-photo),
      linear-gradient(135deg, #e02525 0%, var(--et-accent) 34%, #7c0f0f 100%);
  }
}

/* =============================================================
   SEARCH BAR — kill pirx's white inner wrapper (the "halo")
   ============================================================= */
/* pirx paints .dgwt-wcas-sf-wrapp white, which showed as a white pill around
   the cream field on the dark header. The bar should read as ONE control:
   cream input + red button, flush on the dark background — the original look. */
.site-header__search .dgwt-wcas-sf-wrapp,
.site-header__search .dgwt-wcas-search-form,
.site-header__search .dgwt-wcas-search-wrapp {
  background: transparent !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
}

/* =============================================================
   VISIT THE STORE — dark map block
   ============================================================= */
.et-visit { text-align: left; max-width: 720px; margin: 0 auto; }
.et-visit__map {
  border-radius: var(--et-radius); overflow: hidden;
  border: 1px solid var(--et-border-2); background: var(--et-card);
  aspect-ratio: 16 / 9;
}
.et-visit__map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  /* Google's keyless embed is light-only; this filter flips it dark while
     keeping roads/labels readable. Styled dark maps need the paid JS API. */
  filter: invert(92%) hue-rotate(180deg) contrast(.88) saturate(.35) brightness(.92);
}
.et-visit__addr { margin: 14px 0 2px; font-size: 16px; color: var(--et-text); }
.et-visit__hours { margin: 0 0 12px; color: #cfcfcf; font-size: 14px; }
.et-visit__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.et-visit__actions .et-btn { min-height: 48px; display: inline-flex; align-items: center; }
.et-visit__note { color: var(--et-muted); font-size: 12.5px; margin: 0; }

/* =============================================================
   CHECKOUT / CART CONTRAST — no glare, no black-on-black
   ============================================================= */
/* The blocks checkout rendered pure-white input slabs on the near-black page —
   maximum-contrast stripes that are hard on the eyes. Fields go dark-grey with
   light text (clear 9:1-ish contrast, far softer than white-on-black), and
   panels sit on the card grey so nothing is a raw #000/#fff boundary. */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-form .wc-block-components-select .components-custom-select-control__button,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-totals-coupon__input input {
  background: #161616 !important;
  color: #e8e8e8 !important;
  border: 1px solid var(--et-border-2) !important;
  border-radius: 6px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-totals-coupon__input input:focus {
  border-color: var(--et-accent) !important;
  box-shadow: 0 0 0 1px var(--et-accent) !important;
}
/* Floating labels + helper copy: muted, never pure white or invisible. */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-country-input label,
.wc-block-components-state-input label { color: #9a9a9a !important; }
.wc-block-components-checkout-step__description,
.wc-block-checkout__terms { color: #b8b8b8 !important; }
/* Select dropdown panels (country/state) — dark, readable options. */
.components-custom-select-control__menu,
.wc-block-components-combobox-control__suggestions {
  background: #1c1c1c !important; color: #e8e8e8 !important;
  border: 1px solid var(--et-border-2) !important;
}
/* Panels: order summary, shipping/payment option groups on card grey. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-shipping-rates-control__package,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-components-order-summary {
  background: var(--et-card) !important;
  border-color: var(--et-border-2) !important;
}
.wc-block-components-checkout-order-summary__title,
.wc-block-components-panel__button { color: var(--et-text) !important; }
/* Radios / checkboxes in brand red instead of default blue. */
.wc-block-checkout input[type="radio"],
.wc-block-checkout input[type="checkbox"],
.wc-block-cart input[type="checkbox"] { accent-color: var(--et-accent); }
/* Soften remaining hard-white headings inside the funnel only. */
.wc-block-checkout h2, .wc-block-checkout .wc-block-components-title,
.wc-block-cart h2 { color: #e5e5e5; }

/* Price block: identical two-line shape on every card. The struck original
   price gets its own small line above the big price — when both sat inline,
   longer amounts ($249.00 $120.00) wrapped and pushed that card's button a
   line below its neighbours'. min-height keeps the rare not-on-sale card the
   same shape too. */
.woocommerce ul.products li.product .price {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 44px; justify-content: flex-end;
}
.woocommerce ul.products li.product .price del { line-height: 1.3; }
.woocommerce ul.products li.product .price ins { line-height: 1.05; }