/*
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.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: Factorize License (proprietary — see LICENSE.txt)
License URI: https://factorize.webyoungstown.com/license/
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: #e8e2d4;         /* warm cream: 13.5-15.3:1 on all surfaces */
  --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-deal: #5ecb70;          /* prices / savings / countdown */
  --et-text-2: #cfcfcf;        /* secondary text: footer nav, hours, logo tail */
  --et-text-3: #e8e8e8;        /* text inside checkout / block form fields    */
  --et-panel: var(--et-panel);         /* payment box, product tile backing           */
  --et-panel-2: #1c1c1c;       /* checkout blocks, notices                    */
  --et-panel-3: #161616;       /* block form fields                           */
  --et-alert: #ff6b6b;         /* active tab, remove links (AA on dark)       */
  --et-accent-hi: #e02525;     /* hero gradient — bright end                  */
  --et-accent-lo: #7c0f0f;     /* hero gradient — deep end                    */
  --et-accent-rgb: 212,33,33;  /* rgb triplets for translucent tints          */
  --et-accent-lo-rgb: 124,15,15;
  --et-gold-rgb: 232,176,75;
  --et-scrim-rgb: 10,10,10;    /* image scrims / overlays                     */
  --et-bar: #101010;           /* mobile bottom tab bar                       */
  --et-bar-border: #2a2a2a;
  --et-bar-text: #8a8a8a;
  --et-panel-4: #131313;       /* dashed empty-state / notice panel           */
  --et-text-4: #ddd8cc;        /* section / hero descriptions                 */
  --et-text-5: #b8b8b8;        /* checkout terms                              */
  --et-text-6: #b8b2a6;        /* totals descriptions                         */
  --et-deal-2: #4ade80;        /* bright savings label                        */
  --et-ok: #9fd7a8;            /* "returns accepted" green                    */
  --et-warn: #ffb26b;          /* "no returns" orange                         */
  --et-required: #e66a6a;      /* required-field asterisk                     */
  --et-alert-2: #ff8a8a;       /* reserve-not-met red                         */
  --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: var(--et-text-2); 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: var(--et-text); border-left-color: var(--et-accent); background: rgba(var(--et-accent-rgb),.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: var(--et-bar); border-top: 1px solid var(--et-bar-border);
  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: var(--et-bar-text);
  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-alert); } /* brand red is 3.66:1 at this size; this reads ~6.9:1 */
.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, var(--et-accent-hi) 0%, var(--et-accent) 34%, var(--et-accent-lo) 100%);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 12px 28px rgba(var(--et-accent-rgb),.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: var(--et-accent-dark) !important; border-color: #fff; }
.et-hero-card .elementor-button { background: #fff; color: var(--et-accent-dark) !important; }
.et-hero-card .elementor-button:hover { background: #ffe9e9; color: var(--et-accent-dark) !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: var(--et-panel-4); 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: var(--et-panel); 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: 18px;
  color: var(--et-text); padding: 0; margin: 0 0 8px; min-height: 36px;
  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(var(--et-scrim-rgb),.85); border: 1px solid var(--et-border-2);
  color: var(--et-text-2); 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(var(--et-gold-rgb),.14); color: var(--et-gold);
  border: 1px solid rgba(var(--et-gold-rgb),.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: var(--et-panel); color: var(--et-text); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--et-panel); }
.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: var(--et-text-2); 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: var(--et-deal-2);
}
.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(var(--et-scrim-rgb),.95) 0%, rgba(var(--et-scrim-rgb),.82) 55%, rgba(var(--et-scrim-rgb),.25) 100%);
}
.et-storefront__tagline {
  margin: 0 0 6px; font-size: 24px; line-height: 1.1; color: var(--et-text);
}
.et-storefront__sub {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--et-text-4); 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: var(--et-deal); 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: var(--et-alert);
}
/* 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: var(--et-text);
}
.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; margin-left: -10px; /* offset link tap-padding so rows align with the logo */ }

/* --- 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: var(--et-text-2); }
.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;
  /* FiboSearch ships the submit with pointer-events:none (decorative in some
     skins) — clicks fell through to the input, so the button did nothing. */
  pointer-events: auto !important; z-index: 3; cursor: pointer;
  /* 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: 54px;
  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 right, rgba(0,0,0,0) 90%, rgba(var(--et-scrim-rgb),.85) 100%),
    linear-gradient(to left, rgba(var(--et-accent-lo-rgb),0) 0%, rgba(var(--et-accent-lo-rgb),.55) 34%, rgba(var(--et-accent-rgb),.93) 62%, rgba(var(--et-accent-rgb),1) 80%),
    var(--et-hero-photo),
    linear-gradient(135deg, var(--et-accent-hi) 0%, var(--et-accent) 34%, var(--et-accent-lo) 100%);
  background-size: cover, cover, cover, cover;
  background-position: center, 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(var(--et-accent-lo-rgb),.25) 0%, rgba(var(--et-accent-lo-rgb),.86) 42%, rgba(var(--et-accent-rgb),1) 72%),
      var(--et-hero-photo),
      linear-gradient(135deg, var(--et-accent-hi) 0%, var(--et-accent) 34%, var(--et-accent-lo) 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: center; 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: var(--et-text-2); font-size: 14px; }
.et-visit__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; 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: var(--et-panel-3) !important;
  color: var(--et-text-3) !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: var(--et-muted) !important; }
.wc-block-components-checkout-step__description,
.wc-block-checkout__terms { color: var(--et-text-5) !important; }
/* Select dropdown panels (country/state) — dark, readable options. */
.components-custom-select-control__menu,
.wc-block-components-combobox-control__suggestions {
  background: var(--et-panel-2) !important; color: var(--et-text-3) !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: var(--et-text-3); }

/* 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; }

/* =============================================================
   AUCTIONS — theme the Ultimate Auction UI
   ============================================================= */
/* Countdown: the plugin ships a pale mint box that glows on the dark page.
   Dark card + green digits keeps the urgency without the glare. */
.uwa-main-auction-product.uwa_auction_product_countdown,
.uwa_auction_product_countdown .countdown_row,
.uwa_auction_product_countdown { background: var(--et-card) !important; border: 1px solid var(--et-border-2) !important; border-radius: var(--et-radius); color: var(--et-text) !important; overflow: hidden; }
.uwa_auction_product_countdown .countdown_amount,
.uwa_auction_product_countdown .countdown_section { color: var(--et-deal) !important; background: transparent !important; }
/* the plugin leaves a 6px-wide empty .countdown_row span that paints a white
   sliver at the card's right edge */
.uwa_auction_product_countdown span.countdown_row {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
}
.uwa_auction_product_countdown .countdown_section { border-color: var(--et-border-2) !important; }
/* Timezone line is developer noise for shoppers. */
.uwa_auction_product_timezone { display: none !important; }
/* Reserve status: keep it readable but not alarming-red-on-black harsh. */
.uwa_auction_reserve_not_met { color: var(--et-alert-2) !important; font-weight: 600; }
/* Bid box: match the theme controls. */
.uwa_auction_form input[name="uwa_bid_value"] {
  background: var(--et-card-2) !important; color: var(--et-text) !important;
  border: 1px solid var(--et-border-2) !important; border-radius: 6px !important;
  min-height: 48px !important; padding: 0 12px !important; font-size: 16px !important;
}
.uwa_auction_form .uwa_place_bid_button, .uwa_auction_form button {
  min-height: 48px; font-weight: 700;
}
.uwa_inc_price_hint { color: var(--et-muted); font-size: 13px; }
/* The blue circular hammer badge the plugin stamps on grid cards clashes
   with the brand; the "Starting bid" line + Bid now button already say
   "auction", so drop the sticker. */
ul.products li.product .uwa_auction_bage_icon,
.uwa_auction_bage_icon,
ul.products li.product .auction-bage,
ul.products li.product img[src*="auction"],
ul.products li.product [class*="uwa"] img[src*="hammer"] { display: none !important; }
/* Watchlist link + condition line, themed. */
.uwa-watchlist-button a { color: var(--et-gold); }
.uwa_auction_condition { color: var(--et-muted); }
/* Grid "Starting bid / Current bid" line gets the price treatment. */
ul.products li.product .woo-ua-auction-price {
  font-size: 20px; font-weight: 800; color: var(--et-text);
}
/* Pre-bid verification nudge on the product page. */
.et-bid-verify {
  border-left: 3px solid var(--et-accent); background: var(--et-card);
  border-radius: 0 var(--et-radius) var(--et-radius) 0;
  padding: 10px 12px; margin: 10px 0; font-size: 13.5px;
}

/* Buy Now on auction pages: the "skip the bidding" escape hatch. */
.et-buy-now { margin: 14px 0 6px; }
.et-buy-now form { margin: 0; }
.et-buy-now__btn { width: 100%; min-height: 50px; font-size: 16px; font-weight: 700; }
.et-buy-now__btn:disabled {
  background: var(--et-border) !important; color: var(--et-muted) !important; cursor: not-allowed;
}
.et-buy-now small { display: block; margin-top: 6px; color: var(--et-muted); font-size: 12.5px; }

/* =============================================================
   MEMBERSHIP / RETURNS / RETAIL / INFINITE SCROLL
   ============================================================= */
.et-retail-line { color: var(--et-muted); font-size: 14px; margin: 2px 0 8px; }
.et-retail-line del { color: var(--et-muted); }
.et-retail-line strong { color: var(--et-deal); }
.et-returns { font-size: 13.5px; margin: 8px 0; }
.et-returns--no { color: var(--et-warn); }
.et-returns--yes { color: var(--et-ok); }
.et-inventory-note {
  color: var(--et-muted); font-size: 12.5px; margin: 4px 0 10px;
  border-left: 3px solid var(--et-border-2); padding-left: 10px;
}
.et-member-nudge {
  background: var(--et-card); border: 1px dashed var(--et-border-2);
  border-radius: var(--et-radius); padding: 10px 12px;
  font-size: 13px; color: var(--et-text-2); margin: 10px 0;
}
.et-member-nudge a { font-weight: 700; }
.et-field-hint { display: block; color: var(--et-muted); font-size: 12px; margin-top: 4px; }
/* registration panel matches login styling */
.woocommerce-form-register .woocommerce-form-register__submit { min-height: 48px; font-size: 16px; }
@media (max-width: 700px) { .woocommerce-form-register .woocommerce-form-register__submit { display: block; width: 100%; } }

/* infinite scroll chrome */
.et-scroll-sentinel { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0; color: var(--et-muted); }
.et-scroll-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--et-border-2); border-top-color: var(--et-accent);
  animation: et-spin .8s linear infinite;
}
@keyframes et-spin { to { transform: rotate(360deg); } }
.et-scroll-end { text-align: center; color: var(--et-muted); padding: 18px 0 6px; font-size: 13.5px; }

/* early-access lock panel */
.et-early-lock {
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-left: 4px solid var(--et-gold); border-radius: var(--et-radius);
  padding: 14px 16px; margin: 12px 0; font-size: 14.5px; color: var(--et-text);
}

/* =============================================================
   STYLE FIXES — auction info pileup + blocks empty-cart upsell
   ============================================================= */
/* The plugin's own "Item condition" line duplicates the theme's styled
   condition note — one of them goes. */
.uwa_auction_condition, .uwa_auction_current_condition { display: none !important; }

/* Blocks empty-cart "New in store" grid ignored the theme entirely:
   gold underlined titles, no card surfaces, ghost badges. Bring it in line
   with the product cards everywhere else. */
.wc-block-grid__products { gap: 12px; }
.wc-block-grid__product {
  background: var(--et-card); border: 1px solid var(--et-border) !important;
  border-radius: var(--et-radius); padding: 10px;
}
.wc-block-grid__product-link { text-decoration: none !important; }
.wc-block-grid__product-title {
  color: var(--et-text) !important; font-family: var(--et-font-body);
  font-size: 13px !important; font-weight: 400; text-decoration: none !important;
  line-height: 1.35; margin: 6px 0 4px !important;
}
.wc-block-grid__product-price {
  color: var(--et-text) !important; font-size: 20px; font-weight: 800;
}
.wc-block-grid__product-price del { font-size: 13px; font-weight: 400; color: var(--et-muted); }
.wc-block-grid__product-price ins { text-decoration: none; }
.wc-block-grid__product-onsale {
  background: var(--et-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; padding: 4px 8px;
}
.wc-block-grid__product .wp-block-button__link { width: 100%; min-height: 44px; }
.wc-block-grid__product-image img { background: #fff; border-radius: 6px; }
/* Empty-cart face icon: tone it into the theme instead of hospital-gray. */
.wc-block-cart__empty-cart__title { color: var(--et-text); }

/* blocks grid buttons: solid brand red, never the washed outline variant */
.wc-block-grid__product .wp-block-button__link {
  background: var(--et-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--et-radius) !important; font-weight: 600;
  text-decoration: none !important;
}
.wc-block-grid__product .wp-block-button__link:hover { background: var(--et-accent-dark) !important; }

/* one-tap bid */
.et-quick-bid { margin: 12px 0 4px; }
.et-quick-bid__btn {
  width: 100%; min-height: 52px; font-size: 17px; font-weight: 800;
  letter-spacing: .02em;
}
.et-quick-bid__btn.is-armed {
  background: var(--et-gold) !important; color: #1a1a1a !important;
  animation: et-arm-pulse 1s ease-in-out infinite alternate;
}
@keyframes et-arm-pulse { from { filter: brightness(1); } to { filter: brightness(1.12); } }
.et-quick-bid__hint { display: block; margin-top: 6px; color: var(--et-muted); font-size: 12.5px; }

/* =============================================================
   SS-RETEST FIXES (2026-09-02 screenshot review round)
   ============================================================= */
/* 1. Title clamp could shear a 4th line mid-glyph when clamp support
   hiccups: cap the box at exactly three lines everywhere. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  overflow: hidden;
}

/* 2. Auction cards price ("Starting bid/Current bid") gets the same
   bottom-anchored two-line block as sale prices, so mixed rows align. */
ul.products li.product .woo-ua-auction-price {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 44px; margin-top: auto; padding-top: 6px;
}

/* 3. WooCommerce tabs: kill the light corner-curl pseudo elements that left
   white specks on the dark theme, and let the row wrap cleanly (the plugin
   adds a 4th "Private message" tab that overflows 390px). */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; margin: 0 0 10px;
  border-bottom: 1px solid var(--et-border-2);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0; border-radius: 6px;
}

/* 4. Checkout country/state selects were the last bright-white fields. */
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-form select,
.wc-block-checkout select {
  background: var(--et-panel-3) !important; color: var(--et-text-3) !important;
  border: 1px solid var(--et-border-2) !important; border-radius: 6px !important;
}
.wc-blocks-components-select .wc-blocks-components-select__label { color: var(--et-muted) !important; }
.wc-blocks-components-select .wc-blocks-components-select__container { background: transparent !important; border: 0 !important; }
.wc-blocks-components-select svg { fill: var(--et-muted) !important; }

/* 5. Order summary printed the unit price twice for qty 1. */
.wc-block-components-order-summary-item__individual-prices { display: none !important; }

/* 6. Anchor-based buttons inherited the content-link underline. */
a.et-btn, a.et-btn:link, a.et-btn:visited, .et-btn { text-decoration: none !important; }

/* 7. Map box: never a blank void — address placeholder sits behind the
   iframe while tiles load (or if they never do). */
.et-visit__map { position: relative; }
.et-visit__map::before {
  content: "Loading map…"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--et-muted); font-size: 14px; text-align: center; padding: 0 16px;
}
.et-visit__map iframe { position: relative; z-index: 1; }

/* 8. Stray horizontal overflow showed a scrollbar sliver beside the hero. */
body { overflow-x: clip; }

/* =============================================================
   CORNER POLISH — no square/white corners on any card or thumb
   ============================================================= */
/* Product gallery: WooCommerce wraps the main image in .flex-viewport, which
   clips SQUARE and defeats the img's own radius — round and clip the
   wrappers themselves so the photo can never show a square (white) corner. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a {
  border-radius: var(--et-radius);
  overflow: hidden;
}
/* Gallery thumbnail strip. */
.woocommerce div.product .flex-control-thumbs li img,
.woocommerce div.product .woocommerce-product-gallery ol img {
  border-radius: 6px;
}
/* Blocks cart / checkout / order-summary thumbnails were square-cornered —
   glaring when the photo has a white background. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.wc-block-components-product-image img,
.woocommerce-table--order-details img,
.woocommerce-order-overview + * img {
  border-radius: 6px;
}
/* Search suggestion thumbnails (white panel, but keep the language uniform). */
.dgwt-wcas-si img, .dgwt-wcas-suggestion img { border-radius: 4px; }

/* The blocks order-summary quantity badge is a WHITE circle pinned on the
   thumbnail corner — the "white corner" artifact on the dark checkout.
   Match the header cart badge instead. */
.wc-block-components-order-summary-item__quantity {
  background: var(--et-accent) !important;
  color: #fff !important;
  border: 2px solid var(--et-surface) !important;
  box-shadow: none !important;
}

/* =============================================================
   CARD VOICES — bid price / Buy Now / retail / urgency each speak
   in their own color + face
   ============================================================= */
/* The plugin drops a raw ": " text node between the label and the amount —
   with a flex column it became its own line. font-size:0 on the container
   swallows the stray colon; children get explicit sizes back. */
ul.products li.product .woo-ua-auction-price {
  font-size: 0 !important; display: block !important; min-height: 44px;
  margin-top: auto; padding-top: 6px;
}
ul.products li.product .woo-ua-auction-price .woo-ua-current {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--et-muted);
  margin-bottom: 2px;
}
ul.products li.product .woo-ua-auction-price .amount {
  font-size: 24px; font-weight: 900; color: var(--et-deal); line-height: 1.05;
}
/* Card extras stack under the price. */
ul.products li.product .et-card-extras { display: block; margin: 4px 0 2px; min-height: 39px; }
ul.products li.product .et-card-buynow {
  display: block; font-family: var(--et-font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--et-gold);
}
ul.products li.product .et-card-retail {
  display: block; font-size: 12px; font-weight: 600; color: var(--et-deal);
}
ul.products li.product .et-ends-soon {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  display: inline-block; margin: 0; font-size: 12px; font-weight: 800;
  color: #fff; background: var(--et-accent); border-radius: 5px; padding: 2px 8px;
  animation: et-arm-pulse 1.2s ease-in-out infinite alternate;
}

/* Quick bid, compact: sits beside Place Bid as an outlined red action. */
.uwa_auction_form .et-quick-bid { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
.uwa_auction_form .et-quick-bid .et-quick-bid__btn {
  width: auto; min-height: 48px; padding: 0 16px;
  background: transparent !important; color: var(--et-cream) !important;
  border: 2px solid var(--et-accent) !important;
  font-size: 15px; font-weight: 800; white-space: nowrap;
}
.uwa_auction_form .et-quick-bid .et-quick-bid__btn:hover { background: rgba(var(--et-accent-rgb),.15) !important; }
.uwa_auction_form .et-quick-bid .et-quick-bid__btn.is-armed {
  background: var(--et-gold) !important; color: #1a1a1a !important; border-color: var(--et-gold) !important;
}

/* Header account icon */
.et-account-link { position: relative; padding: 6px; display: inline-flex; color: var(--et-text); margin-right: 2px; }
.et-account-link svg { stroke: var(--et-text); }
.et-account-dot {
  position: absolute; top: 2px; right: 2px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--et-deal); border: 1.5px solid var(--et-bg);
}
.et-drawer__account {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 10px; padding: 12px 14px;
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-radius: var(--et-radius); color: var(--et-text) !important;
  font-family: var(--et-font-display); font-size: 14px; letter-spacing: .5px;
  text-transform: uppercase;
}
.et-drawer__account svg { stroke: var(--et-accent); }

/* One-portal sign in */
body.et-portal .et-portal__register-hidden { display: none !important; }
body.et-portal .et-portal__hide-head { display: none !important; }
body.et-portal .u-columns .u-column1, body.et-portal .col2-set .col-1 {
  width: 100% !important; max-width: 460px; margin: 14px auto 34px; float: none;
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-radius: 12px; padding: 26px 22px 22px;
}
/* Woo draws its own thin border+padding on the login form - the panel above
   replaces it. */
body.et-portal form.woocommerce-form-login {
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}
body.et-portal form.woocommerce-form-login label { color: var(--et-text); font-size: 14px; }
body.et-portal .woocommerce-form-login__submit,
body.et-portal form.woocommerce-form-login button[name="login"] {
  display: block; width: 100%; margin-top: 6px;
}
.et-portal__offer {
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-left: 4px solid var(--et-gold); border-radius: var(--et-radius);
  padding: 12px 14px; margin: 0 0 14px;
}
.et-portal__offer-text { margin: 0 0 10px; font-size: 14px; color: var(--et-text); }
.et-portal__phone-label { display: block; font-size: 13px; color: var(--et-muted); }
.et-portal__phone {
  display: block; width: 100%; margin-top: 4px;
  background: var(--et-card-2) !important; color: var(--et-text) !important;
  border: 1px solid var(--et-border-2) !important; border-radius: 6px !important;
  min-height: 42px; padding: 0 10px;
}

/* =============================================================
   ROUND 12 - CONTRAST COMFORT + ALIGNMENT
   Page-by-page audit: soften near-white-on-near-black text to the
   cream scale, raise the few below-AA spots, theme the classic
   WooCommerce forms, and square up the leftover alignment drift.
   ============================================================= */
/* Classic Woo forms (login portal, addresses, account details) rendered
   default WHITE inputs - a glaring block on the dark theme. Match the
   dark field style used by the blocks checkout. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--et-panel-2); color: var(--et-text);
  border: 1px solid var(--et-border-2); border-radius: 6px;
  padding: 12px 14px; width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--et-gold); outline: none;
  box-shadow: 0 0 0 2px rgba(var(--et-gold-rgb),.18);
}
/* WooCommerce's default #a00 required-asterisk is 2.5:1 on this theme. */
.woocommerce form .form-row .required { color: var(--et-required); }
/* Secondary/utility text was rendering at full text brightness. */
.wc-block-cart .wc-block-cart-item__remove-link { color: var(--et-muted) !important; }
.wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--et-alert) !important; }
#wc-guest-checkout-notice,
.wc-block-components-totals-shipping__via { color: var(--et-muted); }
/* Cards without the auction extras block (rare non-auction items) keep
   their button on the shared baseline. */
ul.products li.product:not(:has(.et-card-extras)) .price { margin-bottom: 45px; }
/* Logged-out account page: the sign-in panel is centered, so center its
   heading too (inline-block keeps the red bar hugging the text). */
body.et-portal .et-page-head { text-align: center; }
body.et-portal .et-page-head h1 { display: inline-block; }
body.et-portal .et-login-note { text-align: center; }
/* My Account: square the notice card up with the nav column's top. */
.woocommerce-MyAccount-content > .woocommerce-info:first-of-type,
.woocommerce-MyAccount-content > .woocommerce-message:first-of-type { margin-top: 8px; }
.woocommerce-info::before, .woocommerce-message::before { display: none !important; }
.woocommerce-info, .woocommerce-message { padding-left: 20px !important; }
/* Mobile: a right-floated button inside the empty-state notice left a
   ragged hole - stack it full-width instead. */
@media (max-width: 480px) {
  .woocommerce-MyAccount-content .woocommerce-info .button,
  .woocommerce-MyAccount-content .woocommerce-message .button {
    float: none; display: block; width: 100%; margin: 12px 0 0; text-align: center;
  }
}

/* Title clamp, with force: WooCommerce's higher-specificity title rule was
   overriding display back to flow-root and re-adding .5em vertical padding,
   which ate 13px of the 54px box and sheared the third line mid-glyph.
   -webkit-box + line-clamp ends line 3 with a clean ellipsis instead. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 18px !important;
  line-clamp: 3;
  min-height: 54px;
}
/* "via Flat rate" helper inherits a Blocks opacity - the plain muted grey
   landed under 4.5:1 at 12px. Warmer, brighter tone compensates. */
.wc-block-components-totals-shipping__via,
.wc-block-components-totals-item__description { color: var(--et-text-6); }
/* My Account notices, mobile: drop the icon gutter so the stacked
   full-width button sits symmetrically in the card. */
@media (max-width: 480px) {
  .woocommerce-MyAccount-content .woocommerce-info,
  .woocommerce-MyAccount-content .woocommerce-message {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .woocommerce-MyAccount-content .woocommerce-info::before,
  .woocommerce-MyAccount-content .woocommerce-message::before { display: none !important; }
}

/* =============================================================
   ROUND 13 — BUG + LAYOUT SWEEP
   Findings from the interaction-state design review: search dim,
   drawer close, desktop nav, dead-end states, the auction "money
   spot", account polish, checkout mobile cleanup.
   ============================================================= */

/* --- live search: theme-owned page dim while suggestions are open -------- */
body.et-search-open::after {
  content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  z-index: 54; pointer-events: none;
}
body.et-search-open .site-header { position: relative; z-index: 56; }
/* suggestion panel: never taller than the screen, escape hatch stays pinned */
.dgwt-wcas-suggestions-wrapp { max-height: calc(100dvh - 130px); overflow-y: auto; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more { position: sticky; bottom: 0; background: #fff; }
.dgwt-wcas-suggestions-wrapp ins, .dgwt-wcas-details-wrapp ins { text-decoration: none; font-weight: 700; }
.dgwt-wcas-details-wrapp { max-width: 340px; }

/* --- drawer: visible close control; roomier at desktop widths ------------- */
.et-drawer__brand { position: relative; }
.et-drawer__close {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--et-text); cursor: pointer;
}
.et-drawer__close svg { stroke: currentColor; }
@media (min-width: 1024px) {
  .et-drawer { width: 340px; }
  .et-drawer nav li a { font-size: 16px; padding: 15px 26px; }
}

/* --- desktop nav row (drawer stays for mobile) ---------------------------- */
.et-nav-desktop { display: none; }
@media (min-width: 1000px) {
  .et-nav-desktop { display: block; border-top: 1px solid var(--et-border); }
  .et-nav-desktop ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px;
    list-style: none; margin: 0 auto; padding: 0 16px; max-width: 1200px;
  }
  .et-nav-desktop li { margin: 0; }
  .et-nav-desktop a {
    display: block; padding: 10px 14px; color: var(--et-text);
    font-family: var(--et-font-display); font-size: 13.5px;
    letter-spacing: 1.2px; text-transform: uppercase;
    border-bottom: 2px solid transparent;
  }
  .et-nav-desktop a:hover { color: var(--et-gold); }
  .et-nav-desktop li.current-menu-item > a { color: var(--et-text); border-bottom-color: var(--et-accent); }
  .et-nav-desktop .sub-menu { display: none; }
}

/* --- zero-results search: guided dead end --------------------------------- */
.et-no-results { padding: 8px 0 24px; }
.et-no-results__msg { font-size: 15.5px; color: var(--et-text); max-width: 52ch; }
.et-no-results__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.et-no-results__actions .et-btn { min-height: 48px; display: inline-flex; align-items: center; }

/* --- empty cart: even grid on desktop (no orphan card) -------------------- */
@media (min-width: 992px) {
  .wc-block-cart__empty-cart .wc-block-grid__products,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: flex; flex-wrap: wrap;
  }
  .wc-block-cart__empty-cart .wc-block-grid__product,
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    flex: 1 1 22%; max-width: 25%;
  }
}

/* --- auction money spot: one grouped bid unit ----------------------------- */
.uwa_auction_form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-radius: var(--et-radius); padding: 14px;
}
.uwa_auction_form input[name="uwa_bid_value"] {
  flex: 1 1 140px; width: auto !important; min-width: 0;
  background: var(--et-panel-2) !important; color: var(--et-text) !important;
  border: 1px solid var(--et-border-2) !important; border-radius: 6px !important;
  padding: 10px 12px; font-size: 16px;
}
.uwa_auction_form .uwa_currency { align-self: center; font-weight: 700; color: var(--et-muted); }
.uwa_auction_form .et-quick-bid { margin: 0; display: flex; }
.uwa_auction_form .et-quick-bid .et-quick-bid__btn { height: 100%; }
/* the plugin's "(Enter more than or equal to : $X )" hint duplicates the
   quick-bid label right above it */
.uwa_auction_form small.uwa_inc_price,
.uwa_auction_form .uwa_inc_price_hint,
.uwa_inc_price_hint { display: none !important; }
@media (max-width: 480px) {
  .uwa_auction_form .quantity { flex: 1 1 100%; }
  .uwa_auction_form .bid_button { flex: 1 1 0; min-width: 0; }
  .uwa_auction_form .et-quick-bid { flex: 1 1 0; min-width: 0; }
  .uwa_auction_form .et-quick-bid .et-quick-bid__btn { width: 100%; padding: 0 8px; }
}
.et-bid-or {
  text-align: center; color: var(--et-muted); font-size: 12px;
  font-family: var(--et-font-display); letter-spacing: .14em; text-transform: uppercase;
  margin: 12px 0 8px; display: flex; align-items: center; gap: 12px;
}
.et-bid-or::before, .et-bid-or::after {
  content: ""; flex: 1; border-top: 1px solid var(--et-border-2);
}

/* --- description tab: kill leftover spacer paragraphs --------------------- */
.woocommerce-Tabs-panel p:has(> br:only-child) { display: none; }
.woocommerce-Tabs-panel--description p { margin: 0 0 10px; }

/* --- back-in-stock panel: theme alignment + readable success -------------- */
.cwginstock-panel-heading, .cwginstock-subscribe-form .panel-heading { text-align: left !important; }
.cwginstock-subscribe-form input[type="text"],
.cwginstock-subscribe-form input[type="email"] { text-align: left !important; }
.cwginstocksuccess { color: var(--et-deal) !important; font-weight: 600; }

/* --- account: horizontal nav chips on mobile ------------------------------ */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex; overflow-x: auto; gap: 8px; padding: 0 0 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; margin: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    white-space: nowrap; margin-bottom: 0; padding: 10px 14px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    border-left: 0; border-bottom: 3px solid var(--et-accent);
  }
}

/* --- native controls follow the dark scheme ------------------------------- */
input[type="checkbox"], input[type="radio"] { color-scheme: dark; }

/* --- account details: fieldset, buttons, name row, address card ----------- */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--et-border-2); border-radius: var(--et-radius);
  padding: 4px 16px 16px; margin: 22px 0 18px;
}
.woocommerce-EditAccountForm legend {
  font-family: var(--et-font-display); text-transform: uppercase;
  letter-spacing: 1px; font-size: 14px; color: var(--et-gold); padding: 0 8px;
}
@media (max-width: 700px) {
  .woocommerce-EditAccountForm .woocommerce-Button,
  .woocommerce-EditAccountForm button[name="save_account_details"],
  .woocommerce-address-fields .button { display: block; width: 100%; }
}
@media (max-width: 480px) {
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; }
}
.woocommerce-MyAccount-content address {
  font-style: normal; background: var(--et-card); border: 1px solid var(--et-border-2);
  border-radius: var(--et-radius); padding: 14px 16px; line-height: 1.6; max-width: 420px;
}
.woocommerce-EditAccountForm em, .woocommerce-MyAccount-content em {
  font-style: normal; color: var(--et-muted); font-size: 13px;
}

/* --- checkout: one order summary on mobile, anchored action row ----------- */
@media (max-width: 899px) {
  .wc-block-checkout .wc-block-components-sidebar { display: none; }
}
.wc-block-checkout__actions_row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button { margin: 0; }
.wc-block-checkout .wp-block-woocommerce-checkout-order-note-block { margin-bottom: 18px; }

/* =============================================================
   ROUND 15 — MOBILE FIXES + PRICE POP + FINE-PRINT FOLD
   ============================================================= */

/* Prices pop in deal-green — distinct from cream text, and red stays
   reserved for CTAs (owner picked green over red, Sept 3). */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
ul.products li.product .woo-ua-auction-price .amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .summary > .woocommerce-Price-amount,
.woocommerce div.product .summary .woo-ua-auction-price .amount,
.woocommerce div.product .summary .uwa-auction-price,
.woo_ua_current_bid .woocommerce-Price-amount { color: var(--et-deal) !important; }
/* ...but never inside buttons (white on red) or struck-through old prices. */
.summary .button .woocommerce-Price-amount, .summary button .woocommerce-Price-amount,
ul.products li.product .button .woocommerce-Price-amount { color: inherit !important; }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount,
.woocommerce div.product .summary del .woocommerce-Price-amount { color: var(--et-muted) !important; }

/* Bid input: the flex child is the .quantity WRAPPER, not the input —
   without this it collapsed to 78px on mobile. */
.uwa_auction_form .quantity {
  flex: 1 1 160px; display: flex; align-items: stretch;
  margin: 0 !important; min-width: 0;
}
.uwa_auction_form .quantity input[name="uwa_bid_value"] {
  width: 100% !important; flex: 1 1 auto; min-width: 0;
}

/* Fine print folded into one quiet row on product pages. */
.et-fineprint {
  margin: 10px 0 4px; border: 1px solid var(--et-border);
  border-radius: var(--et-radius); background: transparent;
}
.et-fineprint summary {
  cursor: pointer; padding: 10px 14px; color: var(--et-muted);
  font-size: 13px; font-family: var(--et-font-display);
  letter-spacing: .08em; text-transform: uppercase; list-style: none;
}
.et-fineprint summary::-webkit-details-marker { display: none; }
.et-fineprint summary::after { content: " +"; color: var(--et-gold); }
.et-fineprint[open] summary::after { content: " –"; }
.et-fineprint__body { padding: 0 14px 10px; }
.et-fineprint__body > * { margin: 0 0 8px; }

/* Same fine print, stated at checkout where it matters. */
.et-checkout-fineprint {
  max-width: 1024px; margin: 18px auto 8px; padding: 12px 16px;
  background: var(--et-card); border: 1px solid var(--et-border-2);
  border-radius: var(--et-radius); color: var(--et-muted);
  font-size: 13px; line-height: 1.55;
}
.et-checkout-fineprint strong { color: var(--et-text); }

/* Mobile: the fixed bottom bar was covering page ends (cart's checkout
   button, footer fine print) — clear it at the true end of every page. */
@media (max-width: 899px) {
  .site-footer {
    padding-bottom: calc(var(--et-bottombar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  }
  .wc-block-cart .wc-block-cart__submit-container {
    margin-bottom: 8px;
  }
}

/* Small screens: amount field on its own line, the two bid actions share
   the row below it. (Declared last so it wins the cascade over the
   desktop flex-basis above.) */
@media (max-width: 480px) {
  .uwa_auction_form .quantity { flex: 1 1 100%; }
  .uwa_auction_form .bid_button { flex: 1 1 0; min-width: 0; }
  .uwa_auction_form .et-quick-bid { flex: 1 1 0; min-width: 0; }
  .uwa_auction_form .et-quick-bid .et-quick-bid__btn { width: 100%; padding: 0 8px; }
}

/* Native number-input spinners render as a light box on the dark theme
   (the bid amount field's "weird outline"). Numbers here are always short
   - typing beats 1-cent spinner clicks - so hide them everywhere. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* "source" verification link on the % -below-retail claims: quiet, but there
   for anyone who wants to check the number is real. */
.et-retail-source {
  color: var(--et-muted); font-size: 11px; text-decoration: underline;
  text-underline-offset: 2px; margin-left: 4px; white-space: nowrap;
}
.et-retail-source:hover { color: var(--et-gold); }
ul.products li.product .et-card-retail .et-retail-source { font-size: 10.5px; }