/*
Theme Name: DZL Store
Theme URI: https://dzlconstruction.com.au
Description: Storefront child theme for DZL — an industrial B2B storefront for precision CNC components and commercial LED lighting. Warm Industrial Luxe design: bone/sand neutrals, refined rust accent, Fraunces editorial serif with Inter + IBM Plex Mono. Original code and artwork.
Author: DZL Construction Pty Ltd
Template: storefront
Version: 0.2.0
Text Domain: dzl-store
*/

/* ============ Design tokens (Dark Premium — brass/copper on warm near-black) ============
   Industville-inspired: dark header/footer, large product photography that glows on
   dark, editorial serif, brass + copper metal accents. The token names are kept for
   backward compatibility with the layered rules below — their VALUES are flipped to a
   warm-dark, brass-accented system so most of the storefront re-skins from here.
   Depth stack (darkest→lightest): graphite < page < paper < band.
   ------------------------------------------------------------------------------------ */
:root {
  --dzl-graphite: #100d09;   /* deepest warm black — topbar / header chrome / footer / bands */
  --dzl-steel:    #c4b9a2;   /* repurposed: warm light secondary (hero lede, captions) */
  --dzl-accent:   #b96a3b;   /* copper — primary CTA / buttons */
  --dzl-accent-d: #d07f4d;   /* copper, brighter — hover (lifts on dark) */
  --dzl-blue:     #c9a76b;   /* repurposed: BRASS — links / spec values / prices / details */
  --dzl-blue-d:   #e4c88d;   /* brass, brighter — hover / glints */
  --dzl-brass:    #c9a76b;   /* brass alias (explicit) */
  --dzl-brass-bright: #e4c88d;
  --dzl-ink:      #f1ebdf;   /* warm off-white — headings / nav / titles */
  --dzl-body:     #b1a68f;   /* warm grey — body copy */
  --dzl-muted:    #8a8069;   /* warm muted — meta / fine print */
  --dzl-tile:     #0d0b08;   /* near-black tile — product image backing (photos pop) */
  --dzl-band:     #211c14;   /* warm section band / zebra rows / totals box */
  --dzl-border:   #342d22;   /* warm hairline */
  --dzl-grid:     #28231b;   /* faint grid line */
  --dzl-page:     #15110c;   /* warm near-black — page canvas */
  --dzl-paper:    #1e1913;   /* raised warm charcoal — cards / panels / header / inputs */
  --dzl-display:  "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --dzl-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dzl-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============ Base typography ============ */
body {
  font-family: var(--dzl-sans);
  font-size: 15px;
  letter-spacing: 0.1px;
  line-height: 1.65;
  color: var(--dzl-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.site-branding .site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--dzl-display);
  font-weight: 600;
  color: var(--dzl-ink);
  letter-spacing: 0.3px;
  line-height: 1.1;
}
a { color: var(--dzl-blue); text-decoration: none; }
a:hover { color: var(--dzl-blue-d); }

/* Full-bleed utility: band sections escape Storefront's centered .col-full. */
.dzl-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
#page { overflow-x: clip; }
#page .col-full { max-width: 1280px; }

/* Section heading pattern: mono uppercase kicker (with technical tick) + condensed title */
.dzl-kicker {
  display: block;
  color: var(--dzl-blue);
  font-family: var(--dzl-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}
.dzl-kicker::before { content: "// "; color: var(--dzl-accent); }
.dzl-section-title {
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin: 0 0 40px;
}
.dzl-section { padding: 72px 0; }
.dzl-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ============ Buttons: squared, safety-orange ============ */
.button, button, input[type="submit"], .dzl-btn,
.woocommerce #respond input#submit, .wc-block-components-button {
  font-family: var(--dzl-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background-color: var(--dzl-accent);
  color: #fff;
  border: 1px solid var(--dzl-accent);
  border-radius: 3px;
  padding: 13px 30px;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover, .dzl-btn:hover {
  background-color: var(--dzl-accent-d);
  border-color: var(--dzl-accent-d);
  color: #fff;
}
.dzl-btn { display: inline-block; }
.dzl-btn--ghost { background: transparent; color: var(--dzl-ink); border-color: var(--dzl-border); }
.dzl-btn--ghost:hover { background: var(--dzl-graphite); border-color: var(--dzl-graphite); color: #fff; }
.dzl-btn--blue { background: var(--dzl-blue); border-color: var(--dzl-blue); }
.dzl-btn--blue:hover { background: var(--dzl-blue-d); border-color: var(--dzl-blue-d); }

/* ============ Topbar (graphite, mono technical line) ============ */
.dzl-topbar {
  background: var(--dzl-graphite);
  color: #cfd6dd;
  font-family: var(--dzl-mono);
  font-size: 12px;
  letter-spacing: 0.6px;
}
.dzl-topbar .dzl-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
}
.dzl-topbar strong { color: var(--dzl-accent); font-weight: 600; }
.dzl-topbar a { color: #fff; }

/* ============ Header: logo left · nav center · cart right ============ */
.site-header {
  background: #fff;
  border-bottom: 2px solid var(--dzl-graphite);
  padding-top: 0;
}
.site-header .col-full {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1280px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-branding { margin: 0 !important; flex: 0 0 auto; }
.site-branding .site-title { font-size: 34px; margin: 0; line-height: 1; letter-spacing: 1px; }
.site-branding .site-title a { color: var(--dzl-graphite); text-transform: uppercase; }
.site-branding .site-title a::after { content: "."; color: var(--dzl-accent); }
.site-branding .site-description {
  font-family: var(--dzl-mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dzl-body);
  margin: 3px 0 0 2px;
  display: block;
}
.storefront-primary-navigation { background: transparent; flex: 1 1 auto; }
.site-header .main-navigation { margin: 0; }
.main-navigation ul.menu, .main-navigation ul.nav-menu { display: flex; justify-content: center; gap: 6px; }
.main-navigation ul li a {
  font-family: var(--dzl-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dzl-ink);
  padding: 10px 14px;
}
.main-navigation ul li a:hover, .main-navigation ul li.current-menu-item > a { color: var(--dzl-accent); }
.site-header .site-search { display: none; }
.site-header-cart { flex: 0 0 auto; margin: 0; display: flex; align-items: center; gap: 22px; width: max-content; max-width: none; }
.site-header-cart > li { flex: 0 0 auto; }
.dzl-account-li { list-style: none; margin: 0; padding: 0; }
.site-header-cart .cart-contents {
  padding: 0;
  font-family: var(--dzl-mono);
  font-size: 13px;
  color: var(--dzl-ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
/* Keep the amount + item count on one line, never shrinking/wrapping, so they
   stay tidy as values grow. */
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count { display: inline-block; white-space: nowrap; flex: 0 0 auto; }
.site-header-cart .cart-contents .amount { color: var(--dzl-accent); font-weight: 600; }
.site-header-cart .cart-contents .count { color: var(--dzl-muted); font-size: 12px; }
.site-header-cart .cart-contents::after { color: var(--dzl-ink); }
/* My Account link — inside the cart row, to the left of the cart, same palette */
.dzl-header-account { display: inline-flex; align-items: center; gap: 7px; font-family: var(--dzl-mono); font-size: 13px; color: var(--dzl-ink); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; white-space: nowrap; }
.dzl-header-account svg { width: 18px; height: 18px; fill: none; stroke: var(--dzl-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Beat the generic `ul.menu li a {color:#333}` (the cart ul carries .menu) so
   the account text isn't dimmed on WooCommerce pages. */
.site-header-cart .dzl-header-account, .site-header-cart .dzl-header-account span { color: var(--dzl-ink) !important; }
.site-header-cart .dzl-header-account:hover, .site-header-cart .dzl-header-account:hover span { color: var(--dzl-brass-bright) !important; }
.dzl-header-account:hover svg { stroke: var(--dzl-brass-bright); }
@media (max-width: 768px) { .dzl-header-account span { display: none; } .dzl-header-account { margin-right: 16px; } }
/* Nav row as flex: nav takes the slack, the cart cluster sizes to its content
   and grows (anchored right) instead of the old float that capped its width
   and wrapped the item count. */
.site-header .storefront-primary-navigation .col-full { padding: 0; display: flex; align-items: center; gap: 20px; }
.site-header .storefront-primary-navigation .main-navigation { flex: 1 1 auto; min-width: 0; }
.site-header .storefront-primary-navigation .site-header-cart { float: none !important; flex: 0 0 auto; }

/* ============ Hero (blueprint grid, accent rule) ============ */
.dzl-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(100deg, rgba(244,246,248,0.97) 0%, rgba(244,246,248,0.86) 46%, rgba(244,246,248,0.30) 78%),
    linear-gradient(180deg, #f4f6f8 0%, #e7ecf1 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--dzl-border);
}
.dzl-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.dzl-hero--photo { background-size: cover; background-position: center 42%; }
.dzl-hero__inner { position: relative; z-index: 2; }
.dzl-hero .dzl-kicker { text-align: left; }
.dzl-hero__title {
  font-size: 70px;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 22px;
  max-width: 640px;
}
.dzl-hero__title .accent { color: var(--dzl-accent); }
.dzl-hero__lede { max-width: 480px; font-size: 16px; margin: 0 0 30px; color: var(--dzl-steel); }
.dzl-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.dzl-hero__specbar {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--dzl-border);
  max-width: 620px;
}
.dzl-hero__specbar .num { font-family: var(--dzl-mono); font-size: 26px; color: var(--dzl-graphite); font-weight: 600; }
.dzl-hero__specbar .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--dzl-body); }

/* ============ Capability strip (stat row) ============ */
.dzl-caps { background: var(--dzl-graphite); color: #fff; }
.dzl-caps .dzl-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.dzl-cap { padding: 30px 24px; border-left: 1px solid #2c333c; display: flex; gap: 16px; align-items: center; }
.dzl-cap:first-child { border-left: 0; }
.dzl-cap__icon { color: var(--dzl-accent); flex: 0 0 38px; }
.dzl-cap__icon svg { width: 38px; height: 38px; }
.dzl-cap strong { display: block; font-family: var(--dzl-display); font-size: 19px; text-transform: uppercase; color: #fff; font-weight: 600; letter-spacing: 0.5px; }
.dzl-cap span:last-child { font-size: 12.5px; color: #9aa4af; }

/* ============ Category tiles (squared, industrial) ============ */
.dzl-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dzl-cat {
  text-decoration: none;
  border: 1px solid var(--dzl-border);
  background: #fff;
  padding: 30px 24px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  position: relative;
}
.dzl-cat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dzl-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms ease;
}
.dzl-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,24,28,0.10); border-color: var(--dzl-graphite); }
.dzl-cat:hover::before { transform: scaleX(1); }
.dzl-cat__disc { width: 56px; height: 56px; color: var(--dzl-graphite); display: flex; align-items: center; }
.dzl-cat__disc svg { width: 52px; height: 52px; }
.dzl-cat__photo { width: 100%; height: 150px; object-fit: cover; margin-bottom: 6px; }
.dzl-cat__name { font-family: var(--dzl-display); font-size: 22px; text-transform: uppercase; color: var(--dzl-ink); }
.dzl-cat__count { font-family: var(--dzl-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dzl-blue); }

/* ============ Services (split) ============ */
.dzl-services { background: var(--dzl-band); }
.dzl-services .dzl-container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.dzl-services .dzl-kicker, .dzl-services .dzl-section-title { text-align: left; }
.dzl-services__art { min-height: 440px; background: var(--dzl-graphite); position: relative; overflow: hidden; border: 1px solid var(--dzl-border); }
.dzl-services__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dzl-services__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dzl-service { display: flex; gap: 22px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--dzl-border); }
.dzl-service:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dzl-service__icon { flex: 0 0 50px; height: 50px; color: var(--dzl-accent); }
.dzl-service__icon svg { width: 48px; height: 48px; stroke-width: 1.4; }
.dzl-service h3 { font-size: 23px; text-transform: uppercase; margin: 0 0 6px; }
.dzl-service p { margin: 0; max-width: 460px; }

/* ============ Product cards (shop loop everywhere) ============ */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  margin: 0 0 1em;
  padding: 0;
}
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { ul.products, ul.products.columns-3 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { ul.products, ul.products.columns-3 { grid-template-columns: 1fr !important; } }

ul.products li.product {
  text-align: left;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--dzl-border);
  background: #fff;
  padding: 0 0 18px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
ul.products li.product:hover { border-color: var(--dzl-graphite); box-shadow: 0 12px 26px rgba(20,24,28,0.08); }
ul.products li.product .woocommerce-LoopProduct-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
ul.products li.product .onsale {
  position: absolute !important;
  top: 0; right: 0; left: auto;
  margin: 0 !important;
  z-index: 2;
}
ul.products li.product img {
  background: var(--dzl-tile);
  border-radius: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--dzl-border);
  transition: opacity 160ms ease;
}
ul.products li.product:hover img { opacity: 0.92; }
ul.products li.product .woocommerce-loop-product__title {
  font-size: 19px;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 6px;
  padding: 0 16px;
  min-height: 2.3em;
  color: var(--dzl-ink);
}
ul.products li.product .price {
  font-family: var(--dzl-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--dzl-graphite);
  padding: 0 16px;
  margin-top: auto;
}
ul.products li.product .price .dzl-from { font-family: var(--dzl-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--dzl-body); display: block; }
ul.products li.product .price del { color: #9aa4af; font-weight: 400; margin-right: 8px; }
ul.products li.product .button { margin: 14px 16px 0; align-self: flex-start; padding: 10px 22px; font-size: 12px; }
ul.products li.product .star-rating { margin: 0 16px 8px; }

.onsale {
  background: var(--dzl-accent) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--dzl-mono);
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 14px !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Full-width product archives (hide sidebar) */
.woocommerce-page .widget-area, .archive .widget-area { display: none; }
.woocommerce-page .content-area, .archive .content-area { width: 100%; float: none; }

/* ============ Single product: datasheet feel ============ */
.dzl-meta-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }
.dzl-chip {
  font-family: var(--dzl-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  background: var(--dzl-tile);
  border: 1px solid var(--dzl-border);
  border-left: 3px solid var(--dzl-blue);
  padding: 6px 12px;
  color: var(--dzl-graphite);
}
.dzl-chip b { color: var(--dzl-body); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; display: block; }
.dzl-chip--moq { border-left-color: var(--dzl-accent); }

.dzl-spec { margin: 28px 0; border: 1px solid var(--dzl-border); }
.dzl-spec__head {
  font-family: var(--dzl-display); text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 18px; color: #fff; background: var(--dzl-graphite);
  padding: 12px 16px;
}
.dzl-spec table { width: 100%; border-collapse: collapse; margin: 0; }
.dzl-spec th, .dzl-spec td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--dzl-border); font-size: 14px; vertical-align: top; }
.dzl-spec tr:last-child th, .dzl-spec tr:last-child td { border-bottom: 0; }
.dzl-spec tr:nth-child(even) { background: var(--dzl-band); }
.dzl-spec th { width: 38%; font-family: var(--dzl-sans); font-weight: 600; color: var(--dzl-body); text-transform: uppercase; font-size: 11px; letter-spacing: 0.8px; }
.dzl-spec td { font-family: var(--dzl-mono); color: var(--dzl-graphite); }

/* Tiered price ladder (volume pricing) */
.dzl-ladder { margin: 24px 0; border: 1px solid var(--dzl-border); }
.dzl-ladder__head { font-family: var(--dzl-display); text-transform: uppercase; font-size: 16px; color: #fff; background: var(--dzl-blue); padding: 10px 16px; letter-spacing: 0.5px; }
.dzl-ladder table { width: 100%; border-collapse: collapse; }
.dzl-ladder th, .dzl-ladder td { padding: 10px 16px; border-bottom: 1px solid var(--dzl-border); font-family: var(--dzl-mono); font-size: 14px; text-align: left; }
.dzl-ladder thead th { font-family: var(--dzl-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dzl-body); background: var(--dzl-band); }
.dzl-ladder td:last-child { color: var(--dzl-accent); font-weight: 600; }
.dzl-ladder tr:last-child td { border-bottom: 0; }

/* ============ Banner strip (quality statement) ============ */
.dzl-banner {
  position: relative;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--dzl-graphite);
  color: #fff;
}
.dzl-banner__art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.dzl-banner--photo { background-size: cover; background-position: center; }
.dzl-banner blockquote {
  position: relative; z-index: 2;
  font-family: var(--dzl-display);
  font-size: 34px;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
  border: 0; margin: 0; padding: 0 24px;
  max-width: 880px;
  background: transparent;
}
.dzl-banner blockquote .accent { color: var(--dzl-accent); }
.dzl-banner cite { display: block; margin-top: 16px; font-family: var(--dzl-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-style: normal; color: #9aa4af; }

/* ============ Industries strip ============ */
.dzl-industries__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.dzl-industry { text-align: center; padding: 22px 8px; border: 1px solid var(--dzl-border); }
.dzl-industry__icon { color: var(--dzl-blue); }
.dzl-industry__icon svg { width: 36px; height: 36px; }
.dzl-industry span:last-child { display: block; margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dzl-body); }
@media (max-width: 900px) { .dzl-industries__row { grid-template-columns: repeat(3, 1fr); } }

/* ============ Quote / newsletter band ============ */
.dzl-cta-band { background: var(--dzl-graphite); color: #fff; text-align: center; }
.dzl-cta-band .dzl-kicker { color: #9aa4af; }
.dzl-cta-band .dzl-section-title { color: #fff; margin-bottom: 16px; }
.dzl-cta-band__sub { color: #c2cad2; margin: 0 auto 28px; max-width: 560px; }
.dzl-cta-band__form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dzl-cta-band__form input[type="email"] {
  width: 360px; max-width: 90vw;
  border: 1px solid #3a424c;
  background: #1c2128;
  color: #fff;
  border-radius: 3px;
  padding: 13px 18px;
  font-family: var(--dzl-mono);
  font-size: 14px;
}
.dzl-cta-band__form input[type="email"]::placeholder { color: #79828c; }

/* ============ Story section ============ */
.dzl-story .dzl-container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.dzl-story .dzl-kicker, .dzl-story .dzl-section-title { text-align: left; }
.dzl-story__art { position: relative; padding-bottom: 48px; }
.dzl-story__art img { display: block; width: 100%; border: 1px solid var(--dzl-border); }
.dzl-story__art .dzl-story__inset {
  position: absolute; right: -18px; bottom: 0;
  width: 46%; border: 6px solid #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
.dzl-story p { max-width: 480px; }
.dzl-story__facts { list-style: none; margin: 22px 0 28px; padding: 0; }
.dzl-story__facts li { font-family: var(--dzl-mono); font-size: 14px; color: var(--dzl-graphite); padding: 8px 0; border-bottom: 1px solid var(--dzl-border); display: flex; gap: 12px; }
.dzl-story__facts li::before { content: "▸"; color: var(--dzl-accent); }
@media (max-width: 1024px) { .dzl-story .dzl-container { grid-template-columns: 1fr; } }

/* ============ Footer ============ */
.site-footer { background: var(--dzl-graphite); border-top: 3px solid var(--dzl-accent); color: #9aa4af; }
.dzl-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 60px 0 40px;
}
.dzl-footer-cols h3 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 18px; color: #fff; }
.dzl-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.dzl-footer-cols li { margin-bottom: 10px; }
.dzl-footer-cols a { color: #9aa4af; }
.dzl-footer-cols a:hover { color: var(--dzl-accent); }
.dzl-footer-brand { font-family: var(--dzl-display); font-size: 30px; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 10px; }
.dzl-footer-brand .accent { color: var(--dzl-accent); }
.dzl-footer-cols p { color: #9aa4af; }
.dzl-footer-cols .dzl-contact { font-family: var(--dzl-mono); font-size: 13px; }
.dzl-footer-bottom {
  border-top: 1px solid #2c333c;
  padding: 22px 0;
  font-family: var(--dzl-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: #79828c;
}
.dzl-footer-bottom a { color: #9aa4af; }
.site-info { display: none; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .dzl-hero__title { font-size: 50px; }
  .dzl-services .dzl-container { grid-template-columns: 1fr; }
  .dzl-footer-cols { grid-template-columns: 1fr 1fr; }
  .dzl-caps .dzl-container { grid-template-columns: repeat(2, 1fr); }
  .dzl-cap { border-left: 0; border-top: 1px solid #2c333c; }
  .dzl-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="search"], textarea, select { font-size: 16px !important; }
  .woocommerce-MyAccount-content .shop_table, .dzl-spec table, .dzl-ladder table { display: block; overflow-x: auto; }
  code { word-break: break-all; }
  .dzl-topbar .dzl-container { justify-content: center; }
  .dzl-topbar span + span { display: none; }
  .dzl-section { padding: 48px 0; }
  .dzl-section-title { font-size: 30px; }
  .dzl-hero { min-height: 460px; }
  .dzl-hero__title { font-size: 38px; }
  .dzl-cats { grid-template-columns: 1fr; }
  .dzl-industries__row { grid-template-columns: repeat(2, 1fr); }
  .dzl-footer-cols { grid-template-columns: 1fr; padding: 40px 0 20px; }
  .site-header .col-full { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===================================================================
   Refresh — reference-inspired polish (boxed grey page · defined white
   panels · flat squared components · image-forward category tiles ·
   full-width product CTAs · tighter rhythm).
   =================================================================== */

/* Grey page so white sections and product cards read as defined panels.
   !important beats WP core's body.custom-background inline rule. */
html body { background: var(--dzl-page) !important; }
.dzl-home > section.dzl-section:not(.dzl-bleed) { background: #fff; }
.dzl-section { padding: 60px 0; }

/* White panels on the grey page: archive / cart / checkout / account and the
   single product. Scoped to .site-main / div.product so the layout is intact. */
.woocommerce-shop .site-main,
.tax-product_cat .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
.single-product div.product {
  background: #fff;
  border: 1px solid var(--dzl-border);
  padding: 36px;
  margin: 28px 0;
}

/* Flat, sharp-cornered buttons (industrial) */
.button, button, input[type="submit"], .dzl-btn,
.woocommerce #respond input#submit, .wc-block-components-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit.alt, .added_to_cart { border-radius: 0; }

/* Product cards: square media, crisper rest state, full-width orange CTA */
ul.products li.product { box-shadow: 0 1px 2px rgba(20,24,28,0.04); }
ul.products li.product img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
ul.products li.product .button {
  display: block;
  align-self: stretch !important;
  margin: 16px 16px 0 !important;
  text-align: center;
  padding: 13px 16px;
  font-size: 12px;
}
ul.products li.product .star-rating { margin-top: 10px; }

/* Brand-orange CTAs everywhere — incl. the single-product .alt add-to-cart,
   which Storefront otherwise paints its own dark accent. */
.woocommerce button.button.alt, .woocommerce a.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button, button.single_add_to_cart_button {
  background-color: var(--dzl-accent) !important;
  border-color: var(--dzl-accent) !important;
  color: #fff !important;
}
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--dzl-accent-d) !important;
  border-color: var(--dzl-accent-d) !important;
}

/* Category tiles: fewer-but-bigger, edge-to-edge photo, hover zoom */
.dzl-cats { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.dzl-cat { padding: 0 0 24px; overflow: hidden; }
.dzl-cat__photo { width: 100%; height: 230px; object-fit: cover; margin: 0 0 18px; transition: transform 320ms ease; }
.dzl-cat:hover .dzl-cat__photo { transform: scale(1.04); }
.dzl-cat__name, .dzl-cat__count { padding: 0 24px; }
.dzl-cat__disc { margin: 30px 24px 6px; }

/* Single product: clear Storefront's floated gallery/summary before the custom
   spec block + tabs, so the dark .dzl-spec__head no longer renders up behind the
   summary. (Root cause of the "dark panel behind the title".) */
.single-product div.product::after { content: ""; display: block; clear: both; }
.single-product .dzl-spec,
.single-product .woocommerce-tabs,
.single-product .upsells,
.single-product .related { clear: both; }
.dzl-spec__head { line-height: 1.2; }

/* ===================================================================
   WARM INDUSTRIAL LUXE — editorial re-skin.
   Palette + serif are set in :root; this layer refines type, rhythm,
   components, centred categories, and the classic cart/checkout.
   =================================================================== */

html body { background: var(--dzl-page) !important; color: var(--dzl-body); }
body { font-size: 16px; line-height: 1.72; }
.dzl-home > section.dzl-section:not(.dzl-bleed) { background: transparent; }
.woocommerce-shop .site-main, .tax-product_cat .site-main,
.woocommerce-cart .site-main, .woocommerce-checkout .site-main,
.woocommerce-account .site-main, .single-product div.product {
  background: var(--dzl-paper); border-color: var(--dzl-border);
}

/* Editorial serif headings — sentence case, no tracking */
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title, .product_title, .dzl-section-title,
.dzl-hero__title, .dzl-cat__name, .dzl-service h3, .dzl-banner blockquote,
.dzl-footer-cols h3, .dzl-footer-brand, .site-branding .site-title, .dzl-cap strong {
  font-family: var(--dzl-display);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500;
}
.dzl-section { padding: 92px 0; }
.dzl-section-title { font-size: 46px; line-height: 1.08; margin: 0 0 16px; }
.dzl-kicker { color: var(--dzl-accent); font-size: 11px; letter-spacing: 2.5px; margin-bottom: 18px; }
.dzl-kicker::before { content: "—  "; color: var(--dzl-accent); }
a { color: var(--dzl-blue); }
a:hover { color: var(--dzl-accent); }

/* Buttons — refined micro-label, squared */
.button, button, input[type="submit"], .dzl-btn,
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button {
  font-family: var(--dzl-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; border-radius: 0; padding: 15px 32px;
}
.dzl-btn--ghost { background: transparent; color: var(--dzl-ink); border-color: var(--dzl-ink); }
.dzl-btn--ghost:hover { background: var(--dzl-ink); color: var(--dzl-paper); border-color: var(--dzl-ink); }
.dzl-btn--blue { background: var(--dzl-ink); border-color: var(--dzl-ink); }
.dzl-btn--blue:hover { background: var(--dzl-accent); border-color: var(--dzl-accent); }

/* Header / topbar */
.site-header { background: var(--dzl-paper); border-bottom: 1px solid var(--dzl-border); }
.site-branding .site-title { font-size: 30px; }
.site-branding .site-title a { color: var(--dzl-ink); }
.main-navigation ul li a { text-transform: uppercase; font-size: 12px; letter-spacing: 1.2px; color: var(--dzl-ink); font-weight: 500; }
.dzl-topbar { background: var(--dzl-graphite); color: #d8cdbb; }

/* Hero — editorial */
.dzl-hero { background: linear-gradient(180deg,#f8f3eb 0%, var(--dzl-page) 100%); border-bottom: 1px solid var(--dzl-border); min-height: 620px; }
.dzl-hero__art { opacity: .32; }
.dzl-hero__title { font-size: 76px; line-height: 1.03; font-weight: 500; margin: 0 0 24px; max-width: 11ch; }
.dzl-hero__title .accent { color: var(--dzl-accent); font-style: italic; }
.dzl-hero__lede { font-size: 18px; color: var(--dzl-steel); max-width: 46ch; }
.dzl-hero__specbar .num { font-family: var(--dzl-mono); color: var(--dzl-ink); font-weight: 500; }

/* Capability strip */
.dzl-caps { background: var(--dzl-graphite); }
.dzl-cap strong { font-size: 18px; }
.dzl-cap__icon { color: var(--dzl-accent); }

/* Category tiles — CENTRED, paper, editorial */
.dzl-cats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  justify-content: center; gap: 34px; max-width: 840px; margin: 0 auto;
}
.dzl-cat { background: var(--dzl-paper); border: 1px solid var(--dzl-border); padding: 0 0 28px; }
.dzl-cat::before { background: var(--dzl-accent); height: 2px; }
.dzl-cat__photo { height: 260px; }
.dzl-cat__name { font-size: 27px; padding: 22px 28px 0; }
.dzl-cat__count { padding: 6px 28px 0; color: var(--dzl-accent); font-size: 10.5px; letter-spacing: 1.5px; }
.dzl-cat:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(34,29,22,.12); border-color: var(--dzl-border); }

/* Product cards — warm paper */
ul.products li.product { background: var(--dzl-paper); border: 1px solid var(--dzl-border); box-shadow: none; transition: transform 220ms ease, box-shadow 220ms ease; }
ul.products li.product:hover { box-shadow: 0 18px 44px rgba(34,29,22,.11); border-color: var(--dzl-border); transform: translateY(-3px); }
ul.products li.product img { background: var(--dzl-tile); border-bottom: 1px solid var(--dzl-border); }
ul.products li.product .woocommerce-loop-product__title { font-size: 17.5px; line-height: 1.28; font-weight: 500; min-height: 2.6em; padding: 18px 18px 0; }
ul.products li.product .price { font-family: var(--dzl-mono); font-size: 14px; color: var(--dzl-ink); padding: 2px 18px 0; }

/* Bands + single product */
.dzl-services { background: var(--dzl-band); }
.dzl-banner, .dzl-cta-band { background: var(--dzl-graphite); }
.dzl-banner blockquote { font-size: 40px; font-weight: 500; }
.product_title { font-size: 38px; line-height: 1.08; }
.dzl-spec__head, .dzl-ladder__head { font-family: var(--dzl-display); text-transform: none; font-weight: 500; letter-spacing: 0; font-size: 19px; }
.dzl-ladder__head { background: var(--dzl-blue); }
.dzl-ladder td:last-child { color: var(--dzl-accent); }
.dzl-chip { background: var(--dzl-tile); border-color: var(--dzl-border); }

/* Footer */
.site-footer { background: var(--dzl-graphite); color: #b6ab98; border-top: 2px solid var(--dzl-accent); }
.dzl-footer-cols h3 { font-weight: 500; }
.dzl-footer-cols a, .dzl-footer-bottom a, .dzl-footer-cols p, .dzl-footer-bottom { color: #b6ab98; }
.dzl-footer-cols a:hover { color: var(--dzl-accent); }

/* ===== Cart & checkout (classic shortcodes) — clean paper ===== */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main { padding: 48px; }
.woocommerce table.shop_table { border: 1px solid var(--dzl-border); border-radius: 0; background: var(--dzl-paper); }
.woocommerce table.shop_table th { font-family: var(--dzl-mono); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--dzl-body); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--dzl-border); padding: 16px 14px; }
.woocommerce .cart_totals h2, .woocommerce #order_review_heading, .woocommerce form.checkout h3, .woocommerce .cart-collaterals h2 {
  font-family: var(--dzl-display); text-transform: none; font-weight: 500; font-size: 24px; letter-spacing: 0;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce #order_review {
  background: var(--dzl-band); border: 1px solid var(--dzl-border); padding: 26px;
}
.woocommerce #payment, .woocommerce-checkout #payment { background: transparent; }
.woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--dzl-border); }
.woocommerce #payment div.payment_box { background: var(--dzl-paper); border: 1px solid var(--dzl-border); color: var(--dzl-body); }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--dzl-paper); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single { border: 1px solid var(--dzl-border); border-radius: 0; background: var(--dzl-paper); padding: 12px 14px; min-height: 46px; }
.woocommerce-checkout #payment #place_order, .woocommerce a.checkout-button.button { display: block; width: 100%; text-align: center; }
.woocommerce .quantity input.qty { border: 1px solid var(--dzl-border); border-radius: 0; background: var(--dzl-paper); }

/* ===================================================================
   PHOTO-LED HOMEPAGE — real product imagery, no placeholder line-art.
   =================================================================== */

/* Hero: editorial copy + real product panel */
.dzl-hero { display: block; min-height: 0; padding: 84px 0 90px;
  background: linear-gradient(180deg,#f8f3eb 0%, var(--dzl-page) 72%); }
.dzl-hero__art { display: none; }
.dzl-hero__grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 60px; align-items: center; }
.dzl-hero__copy { max-width: 560px; }
.dzl-hero .dzl-kicker { text-align: left; }
.dzl-hero__media { position: relative; margin: 0; }
.dzl-hero__media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 16px;
  background: var(--dzl-graphite); box-shadow: 0 32px 72px rgba(34,29,22,.20); display: block; }
.dzl-hero__media figcaption { position: absolute; left: 18px; bottom: 18px; }
.dzl-tag { font-family: var(--dzl-mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; background: var(--dzl-accent); color: #fff; padding: 7px 12px; }

/* Category bento — rounded photo frames, centred */
.dzl-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 430px));
  justify-content: center; gap: 32px; max-width: 920px; margin: 0 auto; }
.dzl-cat { background: transparent; border: 0; padding: 0; }
.dzl-cat::before { display: none; }
.dzl-cat:hover { transform: none; box-shadow: none; }
.dzl-cat__frame { display: block; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--dzl-border); background: var(--dzl-tile); }
.dzl-cat__photo { width: 100%; height: 300px; object-fit: cover; display: block; margin: 0;
  transition: transform 520ms ease; }
.dzl-cat:hover .dzl-cat__photo { transform: scale(1.05); }
.dzl-cat__row { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 4px 0; }
.dzl-cat__name { font-size: 24px; padding: 0; margin: 0; }
.dzl-cat__count { padding: 0; color: var(--dzl-accent); font-family: var(--dzl-mono);
  font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; }

/* Feature rows (image + copy) */
.dzl-feature__grid, .dzl-services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dzl-feature .dzl-kicker, .dzl-feature .dzl-section-title,
.dzl-services .dzl-kicker, .dzl-services .dzl-section-title { text-align: left; }
.dzl-feature__media, .dzl-services__media { margin: 0; min-height: 0; background: none; border: 0; }
.dzl-feature__media img, .dzl-services__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 16px; background: var(--dzl-tile); border: 1px solid var(--dzl-border);
  display: block; box-shadow: 0 22px 54px rgba(34,29,22,.12); }
.dzl-services__art { display: none; }
.dzl-feature__copy p { max-width: 46ch; }
.dzl-feature__facts { list-style: none; margin: 24px 0 30px; padding: 0; }
.dzl-feature__facts li { font-family: var(--dzl-mono); font-size: 13.5px; color: var(--dzl-graphite);
  padding: 12px 0; border-bottom: 1px solid var(--dzl-border); display: flex; gap: 12px; }
.dzl-feature__facts li::before { content: "—"; color: var(--dzl-accent); }

/* Atmospheric product band (full-bleed photo + overlay) */
.dzl-photoband { background-color: var(--dzl-graphite); background-size: cover; background-position: center;
  color: #fff; padding: 120px 0; }
.dzl-photoband__copy { max-width: 540px; }
.dzl-photoband .dzl-kicker { text-align: left; color: #e7b58f; }
.dzl-photoband h2 { font-family: var(--dzl-display); font-size: 48px; font-weight: 500;
  line-height: 1.08; color: #fff; margin: 0 0 16px; text-transform: none; }
.dzl-photoband h2 .accent { color: #e0814b; font-style: italic; }
.dzl-photoband p { color: #d9cdbb; margin: 0 0 28px; font-size: 17px; }

/* Featured products: softly-rounded cards + 'view all' */
ul.products li.product { border-radius: 14px; overflow: hidden; }
.dzl-section__more { text-align: center; margin-top: 46px; }

/* Responsive */
@media (max-width: 980px) {
  .dzl-hero__grid, .dzl-feature__grid, .dzl-services__grid { grid-template-columns: 1fr; gap: 38px; }
  .dzl-hero { padding: 56px 0 64px; }
  .dzl-cat__photo { height: 240px; }
}

/* ===================================================================
   DARK PREMIUM — authoritative re-skin (Industville-inspired).
   Warm near-black canvas · large photography that glows on dark ·
   brass + copper accents · editorial serif. This final layer flips the
   hard-coded light values, repairs any dark-on-dark text left by the
   earlier (light) layers, dresses the chrome in brass, and makes every
   WooCommerce commerce surface legible on dark. Tokens already carry the
   palette; this is detailing + legibility + premium polish.
   =================================================================== */

/* ---- Base canvas + text rhythm ---- */
html body { background: var(--dzl-page) !important; color: var(--dzl-body); }
body { background: var(--dzl-page); }
::selection { background: rgba(201,167,107,0.28); color: var(--dzl-ink); }
h1, h2, h3, h4, h5, h6, .product_title, .woocommerce-loop-product__title { color: var(--dzl-ink); }
a { color: var(--dzl-brass); }
a:hover { color: var(--dzl-brass-bright); }
hr { border-color: var(--dzl-border); }
/* Visible, on-brand keyboard focus on dark */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .button:focus-visible {
  outline: 2px solid var(--dzl-brass); outline-offset: 2px;
}

/* ---- Topbar: deep black, brass divider, warm text ---- */
.dzl-topbar { background: var(--dzl-graphite); color: #cdbfa6; border-bottom: 1px solid rgba(201,167,107,0.16); }
.dzl-topbar strong { color: var(--dzl-brass); }
.dzl-topbar a { color: #e7ddca; }
.dzl-topbar a:hover { color: var(--dzl-brass-bright); }

/* ---- Header: dark chrome, hairline-brass top rule, brass nav affordance ---- */
.site-header { background: var(--dzl-paper) !important; border-bottom: 1px solid var(--dzl-border);
  box-shadow: inset 0 2px 0 var(--dzl-brass), 0 1px 0 rgba(0,0,0,0.4); }
.site-branding .site-title a { color: var(--dzl-ink); }
.site-branding .site-title a::after { color: var(--dzl-brass); }      /* the brass dot */
.site-branding .site-description { color: var(--dzl-muted); }
.main-navigation ul li a { color: var(--dzl-ink); position: relative; }
.main-navigation ul li a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: var(--dzl-brass); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease;
}
.main-navigation ul li a:hover, .main-navigation ul li.current-menu-item > a { color: var(--dzl-brass-bright); }
.main-navigation ul li a:hover::after, .main-navigation ul li.current-menu-item > a::after { transform: scaleX(1); }
.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children,
.main-navigation ul.menu ul li, .main-navigation ul.nav-menu ul li { background: var(--dzl-paper); }
.site-header-cart .cart-contents { color: var(--dzl-ink); }
.site-header-cart .cart-contents .amount { color: var(--dzl-brass); }
.site-header-cart .cart-contents::after { color: var(--dzl-ink); }
/* Storefront mobile menu toggle + handheld nav on dark */
.storefront-handheld-footer-bar, .storefront-handheld-footer-bar ul li > a { background: var(--dzl-graphite); color: var(--dzl-ink); }
button.menu-toggle, button.menu-toggle:hover { background: transparent; color: var(--dzl-ink); border: 1px solid var(--dzl-border); }
/* Handheld footer-bar search popup: Storefront defaults the panel to white — make
   it dark so it matches the theme. (The iOS native white-on-white search field is
   fixed by the `appearance: none` reset on the shared input rule further down.) */
.storefront-handheld-footer-bar .search .site-search,
.storefront-handheld-footer-bar .site-search { background: var(--dzl-graphite) !important; padding: 12px; border-top: 1px solid var(--dzl-border); }
.storefront-handheld-footer-bar .site-search .widget,
.storefront-handheld-footer-bar .site-search form { background: transparent !important; }
/* iOS Safari re-applies its native white "search pill" the instant the field is
   focused (typing), ignoring the default bg — so pin every state with !important,
   including -webkit-text-fill-color (iOS overrides `color` with it). */
.storefront-handheld-footer-bar .site-search .search-field,
.storefront-handheld-footer-bar .site-search .search-field:focus,
.storefront-handheld-footer-bar .site-search .search-field:active {
  width: 100% !important;
  -webkit-appearance: none !important; appearance: none !important;
  background-color: #0f0c08 !important;
  color: var(--dzl-ink) !important;
  -webkit-text-fill-color: var(--dzl-ink) !important;
  border: 1px solid var(--dzl-border) !important; border-radius: 0 !important;
}
.storefront-handheld-footer-bar .site-search .search-field::-webkit-search-decoration,
.storefront-handheld-footer-bar .site-search .search-field::-webkit-search-cancel-button,
.storefront-handheld-footer-bar .site-search .search-field::-webkit-search-results-button { -webkit-appearance: none; }

/* ---- Option B: compact product search at the right end of the primary nav ---- */
/* full-width nav row so margin-left:auto can push the search flush right (menu
   items stay left-aligned); desktop only — handheld menu is a separate element. */
.storefront-primary-navigation .main-navigation { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-right: 0 !important; float: none !important; }
.main-navigation > ul.menu, .main-navigation > ul.nav-menu { width: 100%; }
.main-navigation ul.menu li.dzl-nav-search,
.main-navigation ul.nav-menu li.dzl-nav-search { margin-left: auto; display: flex; align-items: center; padding: 0; border: 0; }
.dzl-nav-search::before, .dzl-nav-search::after { content: none !important; }
.dzl-nav-search .woocommerce-product-search, .dzl-nav-search form { margin: 0; display: flex; }
.dzl-nav-search label.screen-reader-text { position: absolute; left: -9999px; }
.dzl-nav-search .search-field {
  width: 190px; max-width: 30vw; height: 38px; padding: 6px 12px; font-size: 14px; line-height: 1.2;
  background: #0f0c08; border: 1px solid var(--dzl-border); color: var(--dzl-ink); border-radius: 0;
  -webkit-appearance: none; appearance: none; transition: width .18s ease, border-color .18s ease;
}
.dzl-nav-search .search-field:focus { width: 240px; border-color: var(--dzl-brass); }
.dzl-nav-search .search-field::placeholder { color: var(--dzl-muted); }
.dzl-nav-search button[type="submit"] {
  height: 38px; padding: 0 16px; border: 0; cursor: pointer; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; background: #b96a3b; color: #fff;
}
.dzl-nav-search button[type="submit"]:hover { background: #a85b30; }
@media (max-width: 768px) { li.dzl-nav-search { display: none !important; } }

/* ---- Hero: dramatic dark gradient + brass glow behind the product ---- */
.dzl-hero {
  background:
    radial-gradient(120% 90% at 78% 28%, rgba(201,167,107,0.10) 0%, rgba(201,167,107,0) 55%),
    linear-gradient(180deg, #1c1812 0%, var(--dzl-page) 78%) !important;
  border-bottom: 1px solid var(--dzl-border);
}
.dzl-hero__lede { color: var(--dzl-steel); }
.dzl-hero__title .accent { color: var(--dzl-brass); }
.dzl-hero__specbar { border-top-color: var(--dzl-border); }
.dzl-hero__specbar .num { color: var(--dzl-ink); }
.dzl-hero__specbar .num span { color: var(--dzl-brass); }
.dzl-hero__specbar .lbl { color: var(--dzl-muted); }
.dzl-hero__media img { background: var(--dzl-tile); box-shadow: 0 36px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--dzl-border); }
.dzl-tag { background: var(--dzl-accent); color: #fff; }

/* ---- Buttons: copper fill + brass ghost, premium micro-label ---- */
.button, button, input[type="submit"], .dzl-btn,
.woocommerce a.button, .woocommerce button.button, .wc-block-components-button,
.woocommerce #respond input#submit {
  background-color: var(--dzl-accent); border-color: var(--dzl-accent); color: #fff;
}
.button:hover, button:hover, input[type="submit"]:hover, .dzl-btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background-color: var(--dzl-accent-d); border-color: var(--dzl-accent-d); color: #fff;
}
.dzl-btn--ghost { background: transparent; color: var(--dzl-ink); border-color: var(--dzl-brass); }
.dzl-btn--ghost:hover { background: var(--dzl-brass); color: var(--dzl-graphite); border-color: var(--dzl-brass); }
.dzl-btn--blue { background: transparent; color: var(--dzl-brass); border-color: var(--dzl-brass); }
.dzl-btn--blue:hover { background: var(--dzl-accent); color: #fff; border-color: var(--dzl-accent); }

/* ---- Capability strip: deep black, brass icons, warm sub-text ---- */
.dzl-caps { background: var(--dzl-graphite); }
.dzl-caps .dzl-cap { border-left-color: var(--dzl-border); }
.dzl-cap__icon { color: var(--dzl-brass); }
.dzl-cap strong { color: var(--dzl-ink); }
.dzl-cap span:last-child { color: var(--dzl-muted); }

/* ---- Section kickers / titles ---- */
.dzl-kicker { color: var(--dzl-brass); }
.dzl-kicker::before { color: var(--dzl-brass); }
.dzl-section-title { color: var(--dzl-ink); }

/* ---- Category bento: dark photo frames, light name, brass count, glow on hover ---- */
.dzl-cat__frame { background: var(--dzl-tile); border-color: var(--dzl-border); }
.dzl-cat:hover .dzl-cat__frame { border-color: var(--dzl-brass); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.dzl-cat__name { color: var(--dzl-ink); }
.dzl-cat__count { color: var(--dzl-brass); }

/* ---- Feature / services rows ---- */
.dzl-services { background: var(--dzl-band); border-top: 1px solid var(--dzl-border); border-bottom: 1px solid var(--dzl-border); }
.dzl-feature__media img, .dzl-services__media img { background: var(--dzl-tile); border-color: var(--dzl-border); box-shadow: 0 28px 64px rgba(0,0,0,0.5); }
.dzl-service__icon { color: var(--dzl-brass); }
.dzl-service h3 { color: var(--dzl-ink); }
.dzl-feature__facts li, .dzl-story__facts li { color: var(--dzl-body); border-bottom-color: var(--dzl-border); }
.dzl-feature__facts li::before, .dzl-story__facts li::before { color: var(--dzl-brass); }

/* ---- Product cards (shop loop everywhere): glow on dark, brass price, copper CTA ---- */
ul.products li.product { background: var(--dzl-paper); border: 1px solid var(--dzl-border); box-shadow: none; }
ul.products li.product:hover { border-color: var(--dzl-brass); box-shadow: 0 22px 52px rgba(0,0,0,0.55); transform: translateY(-3px); }
ul.products li.product img { background: var(--dzl-tile); border-bottom: 1px solid var(--dzl-border); }
ul.products li.product .woocommerce-loop-product__title { color: var(--dzl-ink); }
ul.products li.product .price { color: var(--dzl-brass) !important; }
ul.products li.product .price .dzl-from { color: var(--dzl-muted); }
ul.products li.product .price del { color: var(--dzl-muted); opacity: .8; }
ul.products li.product .price ins { color: var(--dzl-brass); text-decoration: none; }
.star-rating span::before, .star-rating::before { color: var(--dzl-brass); }
.onsale { background: var(--dzl-accent) !important; color: #fff !important; }

/* ---- Atmospheric photo band ---- */
.dzl-photoband .dzl-kicker { color: var(--dzl-brass-bright); }
.dzl-photoband h2 .accent { color: var(--dzl-brass-bright); }

/* ---- Industries strip ---- */
.dzl-industry { border-color: var(--dzl-border); background: var(--dzl-paper); }
.dzl-industry__icon { color: var(--dzl-brass); }
.dzl-industry span:last-child { color: var(--dzl-body); }

/* ---- CTA / newsletter band ---- */
.dzl-cta-band { background: var(--dzl-graphite); border-top: 1px solid var(--dzl-border); }
.dzl-cta-band .dzl-kicker { color: var(--dzl-brass); }
.dzl-cta-band .dzl-section-title { color: var(--dzl-ink); }
.dzl-cta-band__sub { color: var(--dzl-body); }
.dzl-cta-band__form input[type="email"] {
  background: #0d0b08; border: 1px solid var(--dzl-border); color: var(--dzl-ink);
}
.dzl-cta-band__form input[type="email"]::placeholder { color: var(--dzl-muted); }
.dzl-cta-band__form input[type="email"]:focus { border-color: var(--dzl-brass); }

/* ---- Banner / quote strip ---- */
.dzl-banner { background: var(--dzl-graphite); }
.dzl-banner blockquote .accent { color: var(--dzl-brass-bright); }
.dzl-banner cite { color: var(--dzl-muted); }

/* ---- Footer: deepest black, brass headings + hover, brass top rule ---- */
.site-footer { background: var(--dzl-graphite); border-top: 2px solid var(--dzl-brass); color: var(--dzl-body); }
.dzl-footer-cols h3 { color: var(--dzl-ink); }
.dzl-footer-brand { color: var(--dzl-ink); }
.dzl-footer-brand .accent { color: var(--dzl-brass); }
.dzl-footer-cols a, .dzl-footer-cols p, .dzl-footer-cols .dzl-contact { color: var(--dzl-body); }
.dzl-footer-cols a:hover, .dzl-footer-bottom a:hover { color: var(--dzl-brass-bright); }
.dzl-footer-bottom { border-top-color: var(--dzl-border); color: var(--dzl-muted); }
.dzl-footer-bottom a { color: var(--dzl-body); }

/* ===================================================================
   Single product — dark datasheet
   =================================================================== */
.single-product div.product { background: var(--dzl-paper); border-color: var(--dzl-border); }
.product_title { color: var(--dzl-ink); }
.woocommerce div.product .woocommerce-product-rating { color: var(--dzl-body); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--dzl-brass); }
.woocommerce-product-details__short-description, .woocommerce div.product .woocommerce-tabs p { color: var(--dzl-body); }
/* Datasheet chips */
.dzl-chip { background: #0f0c08; border-color: var(--dzl-border); border-left-color: var(--dzl-brass); color: var(--dzl-ink); }
.dzl-chip b { color: var(--dzl-muted); }
.dzl-chip--moq { border-left-color: var(--dzl-accent); }
/* Spec table */
.dzl-spec { border-color: var(--dzl-border); }
.dzl-spec__head { background: #0f0c08; color: var(--dzl-ink); border-bottom: 1px solid var(--dzl-brass); }
.dzl-spec th, .dzl-spec td { border-bottom-color: var(--dzl-border); }
.dzl-spec tr:nth-child(even) { background: var(--dzl-band); }
.dzl-spec th { color: var(--dzl-muted); }
.dzl-spec td { color: var(--dzl-ink); }
/* Volume price ladder */
.dzl-ladder { border-color: var(--dzl-border); }
.dzl-ladder__head { background: #0f0c08 !important; color: var(--dzl-brass); border-bottom: 1px solid var(--dzl-brass); }
.dzl-ladder th, .dzl-ladder td { border-bottom-color: var(--dzl-border); color: var(--dzl-body); }
.dzl-ladder thead th { background: var(--dzl-band); color: var(--dzl-muted); }
.dzl-ladder td:last-child { color: var(--dzl-brass); }
/* Trade note */
.dzl-trade-note { background: var(--dzl-band) !important; color: var(--dzl-body) !important; border-left-color: var(--dzl-accent) !important; }
/* Product gallery: dark frame + brass trigger */
.woocommerce div.product div.images img { background: var(--dzl-tile); border: 1px solid var(--dzl-border); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { background: var(--dzl-paper); color: var(--dzl-brass); border: 1px solid var(--dzl-border); }
.flex-control-thumbs li img { opacity: .55; border: 1px solid transparent; }
.flex-control-thumbs li img.flex-active, .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--dzl-brass); }
/* Quantity stepper */
.woocommerce .quantity input.qty { background: #0f0c08; border: 1px solid var(--dzl-border); color: var(--dzl-ink); }
/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--dzl-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--dzl-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--dzl-band); border-color: var(--dzl-border); border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--dzl-body); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--dzl-paper); border-bottom-color: var(--dzl-paper); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--dzl-brass); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { border-color: var(--dzl-border); }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--dzl-border); background: var(--dzl-band); }

/* ===================================================================
   WooCommerce commerce surfaces on dark — shop / cart / checkout /
   account: panels, tables, forms, notices, breadcrumb, pagination.
   =================================================================== */
.woocommerce-shop .site-main, .tax-product_cat .site-main,
.woocommerce-cart .site-main, .woocommerce-checkout .site-main,
.woocommerce-account .site-main, .post-type-archive-product .site-main {
  background: var(--dzl-paper); border-color: var(--dzl-border);
}
/* Compact archive header — left-aligned, smaller, so products reach the fold */
.woocommerce-products-header { text-align: left !important; margin: 0 0 16px !important; }
.woocommerce-products-header__title.page-title,
.tax-product_cat .woocommerce-products-header__title,
.post-type-archive-product .woocommerce-products-header__title {
  text-align: left !important; font-size: 30px !important; line-height: 1.1 !important; margin: 0 0 10px !important;
}
.term-description, .woocommerce-archive-description {
  text-align: left !important; max-width: 80ch; margin: 0 0 4px !important; font-size: 15px;
}
.woocommerce, .woocommerce-page, .woocommerce p, .woocommerce td, .woocommerce li { color: var(--dzl-body); }
.woocommerce a:not(.button) { color: var(--dzl-brass); }
.woocommerce a:not(.button):hover { color: var(--dzl-brass-bright); }

/* Breadcrumb + result count + ordering */
.woocommerce-breadcrumb { color: var(--dzl-muted); }
.woocommerce-breadcrumb a { color: var(--dzl-brass); }
.woocommerce-result-count { color: var(--dzl-muted); }
.woocommerce .woocommerce-ordering select, .woocommerce-ordering select {
  background: #0f0c08; border: 1px solid var(--dzl-border); color: var(--dzl-ink); padding: 10px 12px; border-radius: 0;
}

/* Tables (cart, order details, account) */
.woocommerce table.shop_table { background: var(--dzl-paper); border-color: var(--dzl-border); }
.woocommerce table.shop_table th { color: var(--dzl-muted); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top-color: var(--dzl-border); color: var(--dzl-body); }
.woocommerce table.shop_table tbody td.product-name a, .woocommerce table.shop_table a { color: var(--dzl-brass); }
.woocommerce-cart table.cart td.actions, .woocommerce table.shop_table tfoot td { border-top-color: var(--dzl-border); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce #order_review,
.woocommerce-cart .cart-collaterals .cart_totals { background: var(--dzl-band); border-color: var(--dzl-border); }
.woocommerce .cart_totals h2, .woocommerce #order_review_heading,
.woocommerce form.checkout h3, .woocommerce .cart-collaterals h2 { color: var(--dzl-ink); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; }

/* Base: every text-like control is dark on the dark canvas (covers stray inputs
   outside WooCommerce form-rows: search, comments, login, etc.) */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"], input[type="date"],
textarea, select {
  background: #0f0c08; border: 1px solid var(--dzl-border); color: var(--dzl-ink);
  border-radius: 0; -webkit-appearance: none; appearance: none; /* stop iOS Safari rendering search inputs as native white (white-on-white) */
}
input[type="text"]::placeholder, input[type="email"]::placeholder,
input[type="search"]::placeholder, textarea::placeholder { color: var(--dzl-muted); }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
textarea:focus, select:focus { border-color: var(--dzl-brass); outline: none; }
/* Global iOS safety net: any focused search field stays dark (iOS reverts to a
   native white pill on focus otherwise). */
input[type="search"]:focus, input[type="search"]:active {
  -webkit-appearance: none !important; appearance: none !important;
  background-color: #0f0c08 !important;
  color: var(--dzl-ink) !important; -webkit-text-fill-color: var(--dzl-ink) !important;
}

/* Forms: inputs, textareas, selects, select2 */
.woocommerce form .form-row label, .woocommerce-checkout label, .woocommerce form .form-row { color: var(--dzl-body); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout input.input-text, .woocommerce #order_comments,
.select2-container--default .select2-selection--single,
.woocommerce form .form-row select, .woocommerce-account .woocommerce input.input-text {
  background: #0f0c08 !important; border: 1px solid var(--dzl-border) !important; color: var(--dzl-ink) !important;
}
.woocommerce form .form-row input.input-text::placeholder, .woocommerce form .form-row textarea::placeholder { color: var(--dzl-muted); }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--dzl-brass) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dzl-ink); }
.select2-dropdown, .select2-container--default .select2-results__option { background: var(--dzl-paper); color: var(--dzl-body); border-color: var(--dzl-border); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--dzl-accent); color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field { background: #0f0c08; border-color: var(--dzl-border); color: var(--dzl-ink); }

/* Notices (cart updated / PO note / errors) */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  background: var(--dzl-band); color: var(--dzl-body); border-top: 3px solid var(--dzl-brass);
}
.woocommerce-error { border-top-color: var(--dzl-accent); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--dzl-brass); }
.woocommerce-error::before { color: var(--dzl-accent); }
.woocommerce-message a.button, .woocommerce-info a.button { background: transparent; border-color: var(--dzl-brass); color: var(--dzl-brass); }

/* My Account dashboard — B2B panel */
.dzl-dash { margin-top: 26px; }
.dzl-dash-trade { background: rgba(201,167,107,0.10); border: 1px solid var(--dzl-brass); border-radius: 8px; padding: 12px 16px; margin-bottom: 24px; color: var(--dzl-ink); font-size: 14px; }
.dzl-dash-tradelabel { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--dzl-brass); margin-right: 8px; }
.dzl-dash-abn { color: var(--dzl-muted); }
.dzl-dash-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.dzl-dash-h { margin: 0 0 12px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.dzl-dash-orders { width: 100%; border-collapse: collapse; margin: 0; }
.dzl-dash-orders td { padding: 12px 10px; border-bottom: 1px solid var(--dzl-border); color: var(--dzl-body); }
.dzl-dash-orders td:first-child { padding-left: 0; }
.dzl-dash-orders td:first-child a { font-weight: 600; }
.dzl-dash-orders .dzl-dash-total { text-align: right; color: var(--dzl-ink); white-space: nowrap; }
.dzl-dash-status { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dzl-brass); }
.dzl-dash-help { margin-top: 28px; padding: 16px 18px; background: var(--dzl-band); border-radius: 8px; color: var(--dzl-body); font-size: 14px; line-height: 1.6; }
.dzl-dash-help strong { color: var(--dzl-ink); }
.dzl-dash-reorder { text-align: right; white-space: nowrap; }
.dzl-dash-reorder a { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dzl-brass); border: 1px solid var(--dzl-border); border-radius: 6px; padding: 6px 12px; }
.dzl-dash-reorder a:hover { border-color: var(--dzl-brass); color: var(--dzl-brass-bright); background: rgba(201,167,107,0.08); }

/* Required-field marker: a clean asterisk, not the browser's default dotted
   underline + help (?) cursor on <abbr title="required">. */
abbr.required, label .required, .required[title] {
    text-decoration: none !important;
    border-bottom: 0 !important;
    cursor: default !important;
}

/* WordPress block-library light defaults (gutenberg-blocks.css) leak a white/
   near-white background onto plain tables + fieldsets — neutralise on the dark
   theme so the password fieldset, dashboard table and order tables stay dark. */
table:not(.has-background) tbody td,
table:not(.has-background) tbody th,
table:not(.has-background) tbody tr:nth-child(2n) td,
fieldset, fieldset legend { background: transparent !important; }
.woocommerce-account fieldset { border: 1px solid var(--dzl-border); border-radius: 8px; padding: 6px 24px 24px; margin-top: 28px; }
.woocommerce-account fieldset legend { color: var(--dzl-ink); font-family: var(--dzl-display); font-size: 15px; padding: 0 10px; }
/* <mark> (order number / date / status, etc.) defaults to dark text — make the
   highlighted terms readable on the dark theme. */
mark, .woocommerce mark, .woocommerce-page mark { background: transparent !important; color: var(--dzl-ink) !important; }

/* Payment box (PO instructions on checkout) */
.woocommerce #payment, .woocommerce-checkout #payment { background: transparent; }
.woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--dzl-border); }
.woocommerce #payment ul.payment_methods li { color: var(--dzl-body); }
.woocommerce #payment div.payment_box { background: var(--dzl-band); border: 1px solid var(--dzl-border); color: var(--dzl-body); }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--dzl-band); }
.woocommerce #payment .place-order { border-top: 1px solid var(--dzl-border); }

/* Account dashboard */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--dzl-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--dzl-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--dzl-band); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { color: var(--dzl-body); padding: 12px 16px; display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--dzl-brass); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border-color: var(--dzl-border); }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--dzl-body); background: var(--dzl-paper); }
.woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--dzl-accent); color: #fff; }

/* Site-wide content area sits on the dark canvas */
#content, .site-content, #page { background: var(--dzl-page); }

/* ===================================================================
   PRODUCTION REDESIGN — architectural type (Space Grotesk), sticky/
   condensing header, scroll-reveal, watermark masking, redesigned hero,
   trust strip, big editorial category tiles, refined product cards.
   This is the last layer → authoritative for everything it touches.
   =================================================================== */

/* ---- Type re-tuning for Space Grotesk (grotesk: tight tracking, no italic) ---- */
h1, h2, h3, h4, h5, h6,
.dzl-section-title, .dzl-hero__title, .product_title, .dzl-cat__name,
.dzl-service h3, .dzl-footer-brand, .dzl-footer-cols h3, .dzl-cap strong,
.woocommerce-loop-product__title, .dzl-photoband h2,
.woocommerce div.product .product_title,
.woocommerce .cart_totals h2, .woocommerce #order_review_heading {
  font-family: var(--dzl-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-transform: none;
}
.dzl-section-title { font-size: 44px; line-height: 1.06; letter-spacing: -0.022em; }
.dzl-hero__title { font-weight: 600; font-size: 54px; line-height: 1.06; letter-spacing: -0.028em; max-width: none; }
.dzl-hero__title .accent { font-style: normal; color: var(--dzl-brass); }
.site-branding .site-title { font-family: var(--dzl-display); font-weight: 700; letter-spacing: 0.005em; }
.site-branding .site-title a { text-transform: uppercase; }
.main-navigation ul li a { font-family: var(--dzl-sans); }
.dzl-kicker, .dzl-card-cat, .dzl-trust span, .dzl-tag, .dzl-chip,
.dzl-spec th, .dzl-ladder thead th { font-family: var(--dzl-mono); }

/* ---- Sticky, condensing, glassy header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(28, 23, 18, 0.86) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: box-shadow 220ms ease, background 220ms ease;
}
.site-header .col-full { transition: padding 200ms ease; }
.dzl-scrolled .site-header { box-shadow: inset 0 2px 0 var(--dzl-brass), 0 10px 34px rgba(0,0,0,0.55); }
.dzl-scrolled .site-header .col-full { padding-top: 10px; padding-bottom: 10px; }
.dzl-scrolled .site-branding .site-title { font-size: 23px; }
.site-branding .site-title { transition: font-size 200ms ease; }

/* ---- Scroll-reveal (hide class is applied by JS only → safe without JS) ---- */
.dzl-reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
.dzl-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dzl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Watermark mask: dark corner scrim over the top-left supplier watermark ---- */
.dzl-mask { position: relative; overflow: hidden; display: block; }
.dzl-mask > img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--dzl-pos, center); }
.dzl-mask::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(16,13,9,0.92) 0%, rgba(16,13,9,0.5) 14%, rgba(16,13,9,0) 32%); }

/* ---- Hero: architectural detailing, brass-bracketed media, refined rhythm ---- */
.dzl-hero { padding: 96px 0 104px !important; }
.dzl-hero__grid { gap: 72px; align-items: center; }
.dzl-hero .dzl-kicker { display: inline-flex; align-items: center; }
.dzl-hero__lede { font-size: 17px; line-height: 1.7; }
.dzl-hero__cta { margin-top: 32px; }
.dzl-hero__specbar { margin-top: 40px; gap: 0; border-top: 1px solid var(--dzl-border);
  flex-wrap: nowrap; max-width: none; align-items: flex-start; }
.dzl-hero__specbar > div { padding: 0 16px; border-left: 1px solid var(--dzl-border); flex: 1 1 0; min-width: 0; }
.dzl-hero__specbar > div:first-child { padding-left: 0; border-left: 0; }
.dzl-hero__specbar .num { font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.dzl-hero__specbar .num span { font-size: 12px; }
.dzl-hero__specbar .lbl { font-size: 9.5px; letter-spacing: 0.6px; line-height: 1.35; }
.dzl-hero__media { position: relative; }
.dzl-hero__media .dzl-mask { border-radius: 16px; border: 1px solid var(--dzl-border);
  box-shadow: 0 40px 90px rgba(0,0,0,0.62); aspect-ratio: 5/4; }
.dzl-hero__media .dzl-mask > img { aspect-ratio: auto; border-radius: 0; box-shadow: none;
  background: var(--dzl-tile); }
.dzl-hero__media::before, .dzl-hero__media::after {
  content: ""; position: absolute; width: 30px; height: 30px; z-index: 3; border: 2px solid var(--dzl-brass); }
.dzl-hero__media::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.dzl-hero__media::after  { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
.dzl-hero__media figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 3; }
.dzl-hero__media--clean .dzl-mask::before { display: none; }   /* clean licensed image — no watermark to mask */
.dzl-hero__media--clean .dzl-mask { background: #000; }        /* melts into the dark page */

/* ---- Trust / certification strip ---- */
.dzl-trust { background: var(--dzl-graphite); border-top: 1px solid var(--dzl-border); border-bottom: 1px solid var(--dzl-border); }
.dzl-trust .dzl-container { display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 36px; padding: 22px 24px; }
.dzl-trust span { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--dzl-body);
  display: inline-flex; align-items: center; gap: 14px; }
.dzl-trust span::before { content: ""; width: 6px; height: 6px; background: var(--dzl-brass);
  transform: rotate(45deg); flex: 0 0 auto; }

/* ---- Category tiles → 2 large editorial cards with overlaid label ---- */
.dzl-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: none; margin: 0; }
.dzl-cat { position: relative; display: block; border: 1px solid var(--dzl-border); border-radius: 18px;
  overflow: hidden; padding: 0; min-height: 440px; background: var(--dzl-tile); }
.dzl-cat::before { display: none; }
.dzl-cat__frame { position: absolute; inset: 0; border: 0; border-radius: 0; background: var(--dzl-tile); overflow: hidden; }
.dzl-cat__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,13,9,0) 38%, rgba(16,13,9,0.88) 100%),
    linear-gradient(135deg, rgba(16,13,9,0.78) 0%, rgba(16,13,9,0) 26%); }
.dzl-cat__photo { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 600ms cubic-bezier(.2,.6,.2,1); }
.dzl-cat:hover .dzl-cat__photo { transform: scale(1.06); }
.dzl-cat:hover { transform: none; box-shadow: 0 26px 60px rgba(0,0,0,0.5); border-color: var(--dzl-brass); }
.dzl-cat__row { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 32px; }
.dzl-cat__name { color: #fff; font-size: 30px; padding: 0; }
.dzl-cat__count { color: var(--dzl-brass); padding: 0; font-size: 11px; letter-spacing: 1.6px; }
.dzl-cat__row::after { content: "→"; position: absolute; right: 32px; bottom: 34px; color: var(--dzl-brass);
  font-size: 22px; transform: translateX(-6px); opacity: 0; transition: opacity 240ms ease, transform 240ms ease; }
.dzl-cat:hover .dzl-cat__row::after { opacity: 1; transform: translateX(0); }

/* ---- Product cards: category micro-tag, watermark scrim, tighter rhythm ---- */
ul.products li.product .woocommerce-LoopProduct-link { position: relative; }
ul.products li.product .woocommerce-LoopProduct-link::before {
  content: ""; position: absolute; top: 0; left: 0; width: 62%; height: 96px; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(16,13,9,0.82) 0%, rgba(16,13,9,0.38) 40%, rgba(16,13,9,0) 72%); }
ul.products li.product img { object-position: center; }
.dzl-card-cat { display: block; padding: 16px 18px 0; font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--dzl-brass); }
ul.products li.product .woocommerce-loop-product__title { padding: 6px 18px 0; min-height: 2.4em; }
ul.products li.product .price { padding-top: 6px; }
ul.products li.product { transition: transform 260ms cubic-bezier(.2,.6,.2,1), box-shadow 260ms ease, border-color 260ms ease; }

/* ---- Section rhythm ---- */
.dzl-section { padding: 88px 0; }
.dzl-section-title { margin-bottom: 14px; }
.dzl-section .dzl-kicker + .dzl-section-title { margin-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .dzl-hero__title { font-size: 52px; }
  .dzl-section-title { font-size: 34px; }
  .dzl-cats { grid-template-columns: 1fr; }
  .dzl-cat { min-height: 340px; }
  .dzl-hero__media .dzl-mask { aspect-ratio: 4/3; }
}
@media (max-width: 600px) {
  .dzl-hero { padding: 56px 0 60px !important; }
  .dzl-hero__title { font-size: 40px; }
  .dzl-section { padding: 56px 0; }
  .dzl-trust .dzl-container { gap: 10px 22px; padding: 18px 16px; }
  .dzl-trust span { font-size: 10.5px; letter-spacing: 1.4px; }
  .dzl-hero__specbar { flex-wrap: wrap; }
  .dzl-hero__specbar > div { flex: 0 0 46%; padding: 10px 14px; border-left: 0; border-top: 1px solid var(--dzl-border); }
  .dzl-hero__specbar > div:nth-child(odd) { padding-left: 0; }
}

/* ===================================================================
   CHECKOUT / CART LEGIBILITY FIX — Storefront paints explicit light
   backgrounds on review-table cells (#f8f8f8 / #fdfdfd), the payment
   method row (#f5f5f5) and .place-order (#fafafa, which carries the
   privacy text). Override every one of them to the dark palette.
   (Verified against the live DOM, not guessed.)
   =================================================================== */

/* Review / cart / order-detail table cells */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tbody td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  background: var(--dzl-paper) !important;
  color: var(--dzl-body);
}
.woocommerce table.shop_table thead th,
.woocommerce-checkout-review-order-table thead th {
  background: var(--dzl-band) !important; color: var(--dzl-muted);
}
.woocommerce table.shop_table tfoot .order-total th,
.woocommerce table.shop_table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  background: var(--dzl-band) !important;
}
.woocommerce table.shop_table td.product-name,
.woocommerce table.shop_table td.product-name a,
.woocommerce-checkout-review-order-table .product-name,
.woocommerce table.shop_table tfoot .order-total .amount {
  color: var(--dzl-ink) !important;
}
.woocommerce table.shop_table .product-total,
.woocommerce table.shop_table .cart-subtotal td,
.woocommerce table.shop_table td .amount { color: var(--dzl-body); }
.woocommerce table.shop_table .order-total td .amount { color: var(--dzl-brass) !important; }

/* Payment methods list + selected method row */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment li.wc_payment_method,
.woocommerce-checkout #payment .wc_payment_method {
  background: var(--dzl-band) !important; color: var(--dzl-body);
}
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-checkout #payment ul.payment_methods li label * { color: var(--dzl-ink); }

/* Place-order area + privacy / terms copy (was on #fafafa) */
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-checkout #payment .place-order,
.woocommerce #payment .place-order { background: var(--dzl-band) !important; }
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-terms-and-conditions-wrapper * { color: var(--dzl-body) !important; }
.woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-wrapper a { color: var(--dzl-brass) !important; }

/* Order-received "receipt" overview — Storefront renders this as a sharp WHITE
   torn-paper receipt. Make it a warm dark card and drop the zigzag edges. */
.woocommerce ul.order_overview,
.woocommerce-order .woocommerce-order-overview {
  background: var(--dzl-band) !important;
  border: 1px solid var(--dzl-border);
  border-radius: 10px;
  color: var(--dzl-body);
  overflow: hidden;
}
.woocommerce ul.order_overview::before,
.woocommerce ul.order_overview::after,
.woocommerce-order-overview::before,
.woocommerce-order-overview::after { display: none !important; }     /* torn-paper zigzag */
.woocommerce ul.order_overview li,
.woocommerce-order-overview li {
  border-color: var(--dzl-border) !important;
  color: var(--dzl-muted) !important;
}
.woocommerce ul.order_overview li strong,
.woocommerce-order-overview li strong { color: var(--dzl-ink); }
.woocommerce ul.order_overview li.woocommerce-order-overview__total strong,
.woocommerce ul.order_overview li.woocommerce-order-overview__payment-method strong { color: var(--dzl-brass); }

/* ===================================================================
   SINGLE-PRODUCT PREV/NEXT — Storefront ships these as two fixed, 500px
   white panels parked off-screen at the viewport edges (slide in on hover):
   confusing + off-brand. Convert to a clean, contained, on-brand bar.
   =================================================================== */
.storefront-product-pagination {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 1280px; margin: 48px auto 0; clear: both; padding: 0 24px;
}
.storefront-product-pagination a {
  position: static !important; width: auto !important; height: auto !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--dzl-paper) !important; border: 1px solid var(--dzl-border) !important;
  color: var(--dzl-body) !important; text-decoration: none; border-radius: 10px;
  transition: border-color 200ms ease;
}
.storefront-product-pagination a:hover { border-color: var(--dzl-brass) !important; }
.storefront-product-pagination a img {
  width: 54px !important; height: 54px !important; object-fit: cover; flex: 0 0 54px;
  border: 1px solid var(--dzl-border); background: var(--dzl-tile); border-radius: 6px; margin: 0 !important;
}
.storefront-product-pagination__title {
  font-family: var(--dzl-display); font-weight: 500; font-size: 14.5px; line-height: 1.25;
  color: var(--dzl-ink) !important;
}
.storefront-product-pagination a::before {
  font-family: var(--dzl-mono); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--dzl-brass); flex: 0 0 auto;
}
.storefront-product-pagination a[rel="prev"]::before { content: "‹ Prev"; order: 0; }
.storefront-product-pagination a[rel="prev"] img { order: 1; }
.storefront-product-pagination a[rel="prev"] .storefront-product-pagination__title { order: 2; }
.storefront-product-pagination a[rel="next"] { justify-content: flex-end; text-align: right; }
.storefront-product-pagination a[rel="next"] .storefront-product-pagination__title { order: 1; }
.storefront-product-pagination a[rel="next"] img { order: 2; }
.storefront-product-pagination a[rel="next"]::before { content: "Next ›"; order: 3; }
@media (max-width: 600px) { .storefront-product-pagination { grid-template-columns: 1fr; } }

/* ===================================================================
   FOOTER CONTRAST FIX — Storefront forces footer links to #333 (1.5:1,
   near-invisible on the near-black footer). Override to a clearly legible
   warm light, brass on hover. (Root cause verified live: linkColor #333.)
   =================================================================== */
.site-footer a,
.dzl-footer-cols a,
.dzl-footer-cols .dzl-contact a,
.dzl-footer-bottom a {
  color: #cdc1a8 !important;                 /* ~10:1 on #100d09 */
}
.site-footer a:hover,
.dzl-footer-cols a:hover,
.dzl-footer-cols .dzl-contact a:hover,
.dzl-footer-bottom a:hover { color: var(--dzl-brass-bright) !important; }
.dzl-footer-cols p,
.dzl-footer-cols .dzl-contact { color: #c4b9a1 !important; }
.dzl-footer-bottom { color: #a99e85 !important; }   /* was #8a8069 */

/* ===================================================================
   AUSTROX brand mark on precision-parts (metal) product images.
   WooCommerce tags each item with a `product_cat-<slug>` class, so the
   overlay is scoped to Precision CNC Parts only. The dark watermark-mask
   scrim (meant for LED supplier watermarks) is dropped for metal cards so
   the logo sits on the image's own light top-left corner.
   =================================================================== */

/* drop the dark corner scrim on metal cards (no supplier watermark there) */
li.product.product_cat-precision-cnc-parts .woocommerce-LoopProduct-link::before { display: none; }

/* loop card: AUSTROX mark, top-left */
li.product.product_cat-precision-cnc-parts .woocommerce-LoopProduct-link::after {
  content: ""; position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 104px; height: 72px; pointer-events: none;
  background: url(assets/austrox-mark.png) no-repeat left top / contain;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,0.55));
}

/* single product gallery: AUSTROX mark, top-left (div.images IS the gallery) */
div.product.product_cat-precision-cnc-parts div.images { position: relative; }
div.product.product_cat-precision-cnc-parts div.images::after {
  content: ""; position: absolute; top: 16px; left: 16px; z-index: 3; pointer-events: none;
  width: 150px; height: 104px;
  background: url(assets/austrox-mark.png) no-repeat left top / contain;
  filter: drop-shadow(0 1px 3px rgba(255,255,255,0.55));
}

/* ===================================================================
   HERO — WOW pass: larger immersive media, deeper brass glow, a slow
   Ken Burns zoom, and a floating certification badge that breaks the
   frame for depth. All motion honours prefers-reduced-motion.
   =================================================================== */
.dzl-hero {
  padding: 104px 0 116px !important;
  background:
    radial-gradient(64% 74% at 82% 40%, rgba(201,167,107,0.20) 0%, rgba(201,167,107,0) 60%),
    radial-gradient(130% 120% at 90% 28%, rgba(184,106,59,0.12) 0%, rgba(184,106,59,0) 55%),
    linear-gradient(180deg, #1d1812 0%, var(--dzl-page) 80%) !important;
}
/* image gets the larger share of the row + a taller, bigger frame */
.dzl-hero__grid { grid-template-columns: 0.82fr 1.18fr; gap: 54px; }
.dzl-hero__media .dzl-mask {
  aspect-ratio: 16 / 10;
  box-shadow: 0 54px 120px rgba(0,0,0,0.72), 0 0 0 1px var(--dzl-border);
}
.dzl-hero__media::before, .dzl-hero__media::after { width: 36px; height: 36px; }

/* slow Ken Burns zoom on the hero image */
@keyframes dzl-kenburns { from { transform: scale(1.001); } to { transform: scale(1.085); } }
.dzl-hero__media--clean .dzl-mask > img { animation: dzl-kenburns 22s ease-in-out infinite alternate; transform-origin: 62% 44%; }

/* floating certification badge — overlaps the lower-right, breaks the frame */
.dzl-hero__badge {
  position: absolute; right: 18px; bottom: 18px; z-index: 4;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(18,14,10,0.90); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--dzl-brass); border-bottom-width: 3px;
  padding: 11px 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  animation: dzl-float 6s ease-in-out infinite;
}
.dzl-hero__badge b { font-family: var(--dzl-mono); font-size: 14px; letter-spacing: 0.5px; color: var(--dzl-ink); font-weight: 600; }
.dzl-hero__badge span { font-family: var(--dzl-mono); font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dzl-muted); }
@keyframes dzl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .dzl-hero__media--clean .dzl-mask > img { animation: none; }
  .dzl-hero__badge { animation: none; }
}
@media (max-width: 980px) {
  .dzl-hero__grid { grid-template-columns: 1fr; }
  .dzl-hero__badge { right: 12px; bottom: 12px; }
}

/* ===================================================================
   AUSTROX mark on the "Made to your spec" feature image (precision parts).
   Drop that image's mask scrim so the mark sits on its light corner.
   =================================================================== */
.dzl-feature__media { position: relative; }
.dzl-feature__media .dzl-mask::before { display: none; }
.dzl-feature__media::after {
  content: ""; position: absolute; top: 18px; left: 18px; z-index: 3; pointer-events: none;
  width: 134px; height: 93px;
  background: url(assets/austrox-mark.png) no-repeat left top / contain;
  filter: drop-shadow(0 1px 3px rgba(255,255,255,0.55));
}

/* ===================================================================
   Footer links: don't show the underline until hover (reverse of the
   default). Plain text by default; a brass underline grows in on hover.
   =================================================================== */
.dzl-footer-cols a,
.dzl-footer-cols .dzl-contact a,
.dzl-footer-bottom a {
  text-decoration: none !important;
  background-image: linear-gradient(var(--dzl-brass-bright), var(--dzl-brass-bright));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 240ms ease, color 200ms ease;
}
.dzl-footer-cols a:hover,
.dzl-footer-cols .dzl-contact a:hover,
.dzl-footer-bottom a:hover { background-size: 100% 1px; }

/* Footer brand: smaller so the full company name fits on one line */
.dzl-footer-brand { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }

/* ===================================================================
   MINI-CART DROPDOWN — Storefront renders a light #f0f0f0 panel; warm it
   to the dark palette (panel, items, totals, buttons, remove).
   =================================================================== */
.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart_content,
.site-header .widget_shopping_cart {
  background: var(--dzl-paper) !important;
  border: 1px solid var(--dzl-border);
  color: var(--dzl-body);
  box-shadow: 0 26px 64px rgba(0,0,0,0.62);
}
.site-header-cart .widget_shopping_cart ul.cart_list,
.site-header-cart .widget_shopping_cart ul.product_list_widget { background: var(--dzl-paper); }
.site-header-cart .widget_shopping_cart li,
.site-header-cart .widget_shopping_cart ul.cart_list li {
  background: var(--dzl-paper) !important;
  border-bottom: 1px solid var(--dzl-border) !important;
  color: var(--dzl-body);
}
.site-header-cart .widget_shopping_cart a:not(.button) { color: var(--dzl-brass) !important; }
.site-header-cart .widget_shopping_cart a:not(.button):hover { color: var(--dzl-brass-bright) !important; }
.site-header-cart .widget_shopping_cart .quantity,
.site-header-cart .widget_shopping_cart .amount { color: var(--dzl-body); }
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message { color: var(--dzl-muted); }
.site-header-cart .widget_shopping_cart p.total,
.site-header-cart .widget_shopping_cart .total {
  color: var(--dzl-ink); border-top: 1px solid var(--dzl-border) !important; background: var(--dzl-band) !important;
}
.site-header-cart .widget_shopping_cart .total strong,
.site-header-cart .widget_shopping_cart .total .amount { color: var(--dzl-brass) !important; }
/* buttons row container */
.site-header-cart .widget_shopping_cart p.buttons,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons {
  background: var(--dzl-paper) !important; border-top: 1px solid var(--dzl-border);
}
/* buttons: View cart = brass ghost, Checkout = copper */
.site-header-cart .widget_shopping_cart p.buttons a.button { display: block; }
.site-header-cart .widget_shopping_cart p.buttons a.button:not(.checkout) {
  background: transparent !important; border: 1px solid var(--dzl-brass) !important; color: var(--dzl-brass) !important;
}
.site-header-cart .widget_shopping_cart p.buttons a.checkout {
  background: var(--dzl-accent) !important; border-color: var(--dzl-accent) !important; color: #fff !important;
}
/* remove (x) */
.site-header-cart .widget_shopping_cart a.remove,
.site-header-cart .widget_shopping_cart a.remove_from_cart_button {
  color: var(--dzl-brass) !important; background: transparent !important; border-color: var(--dzl-border) !important;
}
.site-header-cart .widget_shopping_cart a.remove:hover { color: #fff !important; background: var(--dzl-accent) !important; }

/* LED products: the dark-patch "bake" was reverted — original supplier photos
   are restored (Brandon watermark visible again) pending a proper content-aware
   inpainting pass to REMOVE the watermark cleanly. The global corner scrim
   (.woocommerce-LoopProduct-link::before) therefore applies to LED cards again,
   as it did originally. The dark-logo overlay above remains for the
   precision-parts (metal) cards, which have no baked-in watermark. */

/* Footer legal links row */
.dzl-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Brand logo mark — inline, right before the company name, ~cap height of the text */
.dzl-brandmark-img,
.dzl-footer-mark {
    height: 0.95em !important; width: auto !important; max-width: none !important;
    display: inline-block; vertical-align: -0.16em; margin-right: 0.34em;
}
.dzl-footer-name { white-space: nowrap; }

/* Brand name: never break mid-word, and drop the "Pty Ltd" legal suffix on
   small screens so the mobile logo reads cleanly as "DZL Construction" (it was
   wrapping as "DZL CONSTRUCTIO / N PTY LTD"). */
.site-branding .site-title a { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 768px) {
  .site-branding .site-title { font-size: 21px; letter-spacing: 0.5px; }
  .dzl-brand-suffix { display: none; }
}

/* Mobile (handheld) menu: vertical list — the desktop nav is flex/horizontal,
   which was cramming the items into one row and pushing them off-screen. */
.handheld-navigation ul.menu, .handheld-navigation ul.nav-menu { display: block !important; gap: 0 !important; }
.handheld-navigation ul li { display: block !important; width: 100%; float: none; margin: 0; }
.handheld-navigation ul li a { display: block; padding: 15px 2px; border-bottom: 1px solid var(--dzl-border); letter-spacing: 1.4px; }
.handheld-navigation ul li:last-child a { border-bottom: 0; }

/* Request-a-quote form */
.dzl-rfq-form { max-width: 760px; }
.dzl-rfq-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.dzl-rfq-accttype { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 22px; }
.dzl-rfq-accttype-label { font-family: var(--dzl-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dzl-ink); }
.dzl-rfq-accttype label { display: inline-flex; align-items: center; gap: 8px; color: var(--dzl-body); font-size: 15px; cursor: pointer; }
.dzl-rfq-accttype input[type=radio] { width: auto; margin: 0; }
.dzl-rfq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.dzl-rfq-form label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--dzl-ink); text-transform: uppercase; font-family: var(--dzl-sans); }
.dzl-rfq-form label span { color: var(--dzl-brass); margin-left: 3px; }
.dzl-rfq-form .dzl-rfq-wide { display: block; margin-top: 18px; }
.dzl-rfq-form input, .dzl-rfq-form textarea { width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--dzl-paper); color: var(--dzl-ink); border: 1px solid var(--dzl-border); border-radius: 8px; padding: 13px 15px; font-family: var(--dzl-sans); font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.dzl-rfq-form textarea { resize: vertical; }
.dzl-rfq-form input::placeholder, .dzl-rfq-form textarea::placeholder { color: var(--dzl-muted); }
.dzl-rfq-form input:focus, .dzl-rfq-form textarea:focus { outline: none; border-color: var(--dzl-brass); box-shadow: 0 0 0 3px rgba(201,167,107,0.18); }
.dzl-rfq-fine { margin-top: 16px; font-size: 13px; color: var(--dzl-muted); }
.dzl-rfq-note { padding: 16px 20px; border-radius: 9px; margin-bottom: 26px; font-size: 15px; color: var(--dzl-ink); }
.dzl-rfq-note--ok { background: rgba(201,167,107,0.12); border: 1px solid var(--dzl-brass); }
.dzl-rfq-note--err { background: rgba(185,106,59,0.14); border: 1px solid var(--dzl-accent); }
@media (max-width: 640px) { .dzl-rfq-grid { grid-template-columns: 1fr; } }

/* Checkout "Submit Purchase Order" overlay — branded loading state, not a grey blank */
.woocommerce-checkout .blockUI.blockOverlay { background-color: rgba(16,13,9,0.9) !important; opacity: 1 !important; }
.woocommerce-checkout .blockUI.blockOverlay::before { content: "" !important; display: block; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -46px 0 0 -19px; border: 3px solid rgba(201,167,107,0.25); border-top-color: var(--dzl-brass); border-radius: 50%; background: none !important; animation: dzl-spin 0.8s linear infinite; }
.woocommerce-checkout .blockUI.blockOverlay::after { content: "Submitting your purchase order…" !important; position: absolute; top: 50%; left: 0; right: 0; margin-top: 6px; text-align: center; color: var(--dzl-ink); font-family: var(--dzl-sans); font-size: 14px; letter-spacing: 0.04em; background: none !important; }
@keyframes dzl-spin { to { transform: rotate(360deg); } }

/* ===================================================================
   SHOP category filter bar
   =================================================================== */
.dzl-shop-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; clear: both; }
.dzl-chip-link {
  font-family: var(--dzl-mono); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dzl-body); background: var(--dzl-paper); border: 1px solid var(--dzl-border);
  padding: 9px 17px; border-radius: 999px; text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.dzl-chip-link:hover { border-color: var(--dzl-brass); color: var(--dzl-ink); }
.dzl-chip-link.is-active { background: var(--dzl-accent); border-color: var(--dzl-accent); color: #fff; }
.dzl-chip-link span { opacity: 0.6; margin-left: 4px; }

/* ===================================================================
   HEADER CART — premium on-brand widget. Replace Storefront's Font Awesome
   basket with a brass line-cart (CSS mask) and group icon + amount + count.
   =================================================================== */
.site-header-cart .cart-contents {
  display: inline-flex !important; align-items: center; gap: 9px;
  font-family: var(--dzl-mono); color: var(--dzl-body);
}
.site-header-cart .cart-contents::after { content: none !important; }   /* drop the FA basket glyph */
.site-header-cart .cart-contents::before {
  content: ""; display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; order: -1;
  background-color: var(--dzl-brass);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.2l2.1 10.4a1.6 1.6 0 0 0 1.6 1.3h8.2a1.6 1.6 0 0 0 1.6-1.3L20.5 7H6.2'/%3E%3Ccircle cx='9.2' cy='19.5' r='1.25'/%3E%3Ccircle cx='17.8' cy='19.5' r='1.25'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.2l2.1 10.4a1.6 1.6 0 0 0 1.6 1.3h8.2a1.6 1.6 0 0 0 1.6-1.3L20.5 7H6.2'/%3E%3Ccircle cx='9.2' cy='19.5' r='1.25'/%3E%3Ccircle cx='17.8' cy='19.5' r='1.25'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
  transition: background-color 180ms ease;
}
.site-header-cart .cart-contents:hover::before { background-color: var(--dzl-brass-bright); }
.site-header-cart .cart-contents .amount { color: var(--dzl-brass); font-weight: 600; }
.site-header-cart .cart-contents .count { color: var(--dzl-muted); font-size: 12px; letter-spacing: 0.4px; }