/*
Theme Name:   LesBrew Instrument
Theme URI:    https://lesbrew.coffee
Description:  Light gallery design language for LesBrew Coffee. The product is
              photographed on white, so the page is built on paper rather than
              fighting it: bone grounds, hairline rules, enormous product
              imagery and a single roast accent.
Author:       LesBrew
Template:     hello-elementor
Version:      2.0.2
Text Domain:  lesbrew-instrument
*/

/* ==========================================================================
   1. TOKENS
   A gallery register: warm paper, near-black ink, one roast accent. Every
   text token clears 4.5:1 on --paper. --ink-3 is the floor at 5.4:1 and
   nothing lighter than it is ever allowed to carry text.
   ========================================================================== */
:root {
  /* grounds */
  --paper:  #FCFBF9;   /* the page */
  --bone:   #F4F1EC;   /* alternating sections, product plates */
  --sand:   #EAE5DD;   /* quiet fills, hovers */
  --rule:   #E2DCD2;   /* hairlines */
  --rule-2: #C9C1B4;   /* emphasis rules */

  /* ink */
  --ink:   #17140F;    /* primary    17.4:1 */
  --ink-2: #4A443B;    /* secondary   9.1:1 */
  --ink-3: #6F675C;    /* labels      5.4:1  <- contrast floor */

  /* accent */
  --accent:   #7A3E1D; /* roast       8.1:1 */
  --accent-2: #A0562A;
  --accent-3: #F0E4D8;

  --ok:  #3F6B4A;
  --bad: #9B3B2E;

  /* space — gallery scale */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:40px; --s7:64px; --s8:96px; --s9:140px; --s10:200px;

  --r-sm:2px; --r-md:3px;

  --t-micro: 180ms cubic-bezier(.2,0,0,1);
  --t-mid:   380ms cubic-bezier(.2,0,0,1);
  --t-slow:  760ms cubic-bezier(.16,1,.3,1);
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-soft:  cubic-bezier(.4,0,.2,1);

  --disp: Archivo, "Helvetica Neue", Arial, sans-serif;
  --body: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1440px;
  --gut: var(--s7);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

html body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: clip;
}

html body a { color: var(--ink); text-decoration: none; }
html body a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0 var(--s4);
}
.lb-skip:focus {
  left: var(--s4); top: var(--s4); color: var(--paper);
  min-height: 44px; display: inline-flex; align-items: center;
}

/* the shared key style — a gallery caption, used everywhere */
.lb-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}

.lb-h1 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(44px, 8.4vw, 128px);
  line-height: .93; letter-spacing: -.035em;
  color: var(--ink); margin: 0;
}
.lb-h2 {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--ink); margin: 0;
}
.lb-h3 {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.22; letter-spacing: -.012em;
  color: var(--ink); margin: 0;
}
.lb-lede {
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55;
  color: var(--ink-2); text-wrap: pretty; margin: 0;
}

/* Elementor's global kit sets text-transform: capitalize on an ancestor and
   the property inherits — "Made for your grinder" rendered Title Case. All
   display copy here is sentence case by design. */
.lb-h1, .lb-h2, .lb-h3, .lb-lede, .lb-link, .lb-btn,
.lb-hdr, .lb-hdr a, .lb-ftr, .lb-ftr a,
.lb-main h1, .lb-main h2, .lb-main h3, .lb-main p, .lb-main a { text-transform: none; }

.lb-rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ==========================================================================
   3. SHELL
   ========================================================================== */
.lb-main { display: block; }

.lb-wrap {
  max-width: var(--shell); margin: 0 auto;
  padding-left: var(--gut); padding-right: var(--gut);
}

/* --------------------------------------------------------------- header - */
.lb-hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 251, 249, .86);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(14px)) {
  .lb-hdr { backdrop-filter: saturate(140%) blur(14px); }
}
.lb-hdr__in {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--s4) var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
}
.lb-hdr__logo { display: inline-flex; align-items: center; }
.lb-hdr__logo img { width: 124px; height: auto; display: block; }

.lb-nav__list { display: flex; flex-wrap: nowrap; gap: var(--s6); list-style: none; margin: 0; padding: 0; }
.lb-nav__list a {
  position: relative; color: var(--ink-2); font-size: 14px;
  padding: 10px 0; display: inline-block; white-space: nowrap;
  transition: color var(--t-micro);
}
.lb-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid);
}
.lb-nav__list a:hover { color: var(--ink); }
.lb-nav__list a:hover::after,
.lb-nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.lb-nav__list .current-menu-item > a { color: var(--ink); }

.lb-hdr__r { display: flex; align-items: center; gap: var(--s4); }
.lb-basket {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); min-height: 44px; padding: 0 2px;
}
.lb-basket:hover { color: var(--accent); }
.lb-basket__n { font-family: var(--mono); font-size: 12px; }

.lb-burger {
  display: none; background: none; border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
  width: 44px; height: 44px; align-items: center; justify-content: center;
  transition: border-color var(--t-micro), color var(--t-micro);
}
.lb-burger:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- drawer - */
.lb-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 120;
  background: var(--paper); border-left: 1px solid var(--rule);
  padding: var(--s5) var(--s6) var(--s7);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--t-mid), visibility var(--t-mid);
  overflow-y: auto;
}
.lb-drawer.is-open { transform: none; visibility: visible; }
/* finder.js has always added this class on open; nothing consumed it, so the
   page behind the drawer scrolled while the drawer sat still over it. */
html body.lb-drawer-open { overflow: hidden; }
/* The drawer covers part of the page but not all of it, and a click on what is
   left should close it rather than land on whatever is underneath. */
.lb-drawer__veil {
  position: fixed; inset: 0; z-index: 119;
  background: rgba(23, 20, 15, .38);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}
body.lb-drawer-open .lb-drawer__veil { opacity: 1; visibility: visible; }
.lb-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s7); }
.lb-drawer__top img { width: 124px; height: auto; }
.lb-drawer__top .lb-burger { display: inline-flex; }
.lb-drawer__list { list-style: none; margin: 0; padding: 0; }
.lb-drawer__list li { border-bottom: 1px solid var(--rule); }
.lb-drawer__list a {
  display: flex; align-items: center; min-height: 60px;
  font-family: var(--disp); font-size: 22px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ink);
}
.lb-drawer__list a:hover { color: var(--accent); }

/* --------------------------------------------------------------- footer - */
.lb-ftr { background: var(--bone); border-top: 1px solid var(--rule); margin-top: var(--s9); }
.lb-ftr__in {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--s8) var(--gut) var(--s7);
  display: grid; grid-template-columns: 1.1fr 2fr; gap: var(--s8);
}
.lb-ftr__brand img { width: 132px; height: auto; }
.lb-ftr__line { margin: var(--s4) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 30ch; }
.lb-ftr__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.lb-ftr__cols > div > .lb-lbl { display: block; margin-bottom: var(--s4); }
.lb-ftr__cols a { display: block; font-size: 15px; color: var(--ink-2); padding: 7px 0; }
.lb-ftr__cols a:hover { color: var(--accent); }
.lb-ftr__cols p { margin: 0 0 var(--s3); font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* the trading identity, printed site-wide by the business-details mu-plugin */
.lesbrew-business-details {
  background: var(--bone); border-top: 1px solid var(--rule);
  padding: var(--s5) var(--gut); text-align: center;
  font-size: 13px; line-height: 1.9; color: var(--ink-3);
}
.lesbrew-business-details a { color: var(--ink-2); }
.lesbrew-business-details a:hover { color: var(--accent); }
.lesbrew-business-details strong, .lesbrew-business-details b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   4. BUTTONS AND FIELDS
   One button language for the theme, WooCommerce and Elementor alike.
   ========================================================================== */
.lb-btn,
html body.woocommerce a.button,
html body.woocommerce button.button,
html body.woocommerce input.button,
html body.woocommerce .single_add_to_cart_button,
html body .e-cart-section .button,
html body .elementor-form .elementor-button,
html body #place_order {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 30px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  font-family: var(--disp); font-size: 15px; font-weight: 600;
  text-transform: none; cursor: pointer; line-height: 1.2;
  transition: color var(--t-micro), border-color var(--t-micro);
}
/* the roast fills from the floor rather than a flat colour swap */
.lb-btn::before,
html body.woocommerce a.button::before,
html body.woocommerce button.button::before,
html body.woocommerce .single_add_to_cart_button::before,
html body #place_order::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: translateY(101%);
  transition: transform var(--t-mid);
}
.lb-btn:hover::before,
html body.woocommerce a.button:hover::before,
html body.woocommerce button.button:hover::before,
html body.woocommerce .single_add_to_cart_button:hover::before,
html body #place_order:hover::before { transform: none; }
.lb-btn:hover,
html body.woocommerce a.button:hover,
html body.woocommerce button.button:hover,
html body.woocommerce .single_add_to_cart_button:hover,
html body #place_order:hover { color: var(--paper); border-color: var(--accent); }

.lb-btn--ghost,
html body.woocommerce button[name="update_cart"] {
  background: transparent; color: var(--ink); border-color: var(--rule-2);
}
.lb-btn--ghost:hover,
html body.woocommerce button[name="update_cart"]:hover { color: var(--accent); border-color: var(--accent); }
html body.woocommerce button[name="update_cart"]:disabled { opacity: .4; }

.lb-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--rule-2); padding-bottom: 4px;
  transition: color var(--t-micro), border-color var(--t-micro);
}
.lb-link:hover { color: var(--accent); border-color: var(--accent); }

html body input[type="text"],
html body input[type="search"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="password"],
html body select,
html body textarea,
html body .elementor-field-textual {
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); color: var(--ink);
  font-family: var(--body); font-size: 16px;
  padding: 13px 15px; min-height: 50px;
  transition: border-color var(--t-micro);
}
/* The border darkening is the resting-state cue; the outline is the focus
   indicator. An earlier version set `outline: none` here, which meant a
   keyboard user tabbing to the catalogue sort select got a 1px border tint and
   nothing else — the 2px accent ring every other control shows was suppressed
   on precisely the elements that most need it. Fields with a bespoke indicator
   (the finder row, the fit-check row) still suppress it in their own rules. */
html body input:focus, html body select:focus, html body textarea:focus,
html body .elementor-field-textual:focus { border-color: var(--ink); box-shadow: none; }
html body ::placeholder { color: var(--ink-3); opacity: 1; }

html body select,
html body.woocommerce .woocommerce-ordering select.orderby {
  appearance: none; -webkit-appearance: none;
  background: var(--paper) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317140F' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 15px center;
  padding-right: 40px; cursor: pointer;
}

/* ==========================================================================
   5. SECTION FURNITURE
   An index-card head: a numbered key left, the statement right. Gallery
   signage rather than a centred title.
   ========================================================================== */
.lb-sec { padding-top: var(--s9); padding-bottom: var(--s9); }
.lb-sec--bone { background: var(--bone); }
.lb-sec--tight { padding-top: var(--s8); padding-bottom: var(--s8); }

.lb-shead {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s7); align-items: end;
  padding-bottom: var(--s6); margin-bottom: var(--s7);
  border-bottom: 1px solid var(--ink);
}
.lb-shead__k { display: flex; align-items: baseline; gap: var(--s4); }
.lb-shead__n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.lb-shead__note { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }

/* ==========================================================================
   6. WOOCOMMERCE — the gallery
   The photography is shot on white. Rather than punching bright rectangles
   into a dark page, the plate IS the page: each object floats on bone,
   ruled rather than boxed, and the gaps in the grid are the rules.
   ========================================================================== */
html body.woocommerce .woocommerce-result-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}

/* --- the grid ------------------------------------------------------------ */
html body.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
}
html body.woocommerce ul.products::before,
html body.woocommerce ul.products::after { content: none; }

html body.woocommerce ul.products li.product {
  position: relative; margin: 0 !important; width: auto !important; float: none !important;
  background: var(--paper); padding: var(--s5) var(--s5) var(--s6);
  display: flex; flex-direction: column;
  transition: background-color var(--t-mid);
}
html body.woocommerce ul.products li.product:hover { background: var(--bone); }

html body.woocommerce ul.products li.product a img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--bone); margin: 0 0 var(--s5); padding: var(--s5);
  border-radius: var(--r-sm);
  transition: transform var(--t-slow), background-color var(--t-mid);
  will-change: transform;
}
html body.woocommerce ul.products li.product:hover a img { transform: scale(1.035); background: var(--sand); }

html body.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--disp); font-size: 17px; font-weight: 600;
  line-height: 1.28; letter-spacing: -.014em; color: var(--ink);
  margin: 0 0 var(--s3); padding: 0; text-transform: none;
}
html body.woocommerce ul.products li.product .price {
  font-family: var(--mono); font-size: 14px; color: var(--ink-2);
  margin: 0 0 var(--s4); display: block;
}
html body.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--ink); }
html body.woocommerce ul.products li.product .price del { color: var(--ink-3); margin-right: 8px; }
html body.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }

html body.woocommerce ul.products li.product::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid);
}
html body.woocommerce ul.products li.product:hover::after { transform: scaleX(1); }

html body.woocommerce span.onsale {
  position: absolute; top: var(--s5); left: var(--s5); right: auto; z-index: 2;
  background: var(--accent); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r-sm); padding: 5px 9px; min-height: 0; line-height: 1; margin: 0;
}

/* --- single product ------------------------------------------------------ */
html body.woocommerce div.product {
  max-width: var(--shell); margin: 0 auto; padding: var(--s6) var(--gut) var(--s8);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s8); align-items: start;
}
html body.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; }
html body.woocommerce div.product > .summary { grid-column: 2; margin: 0; position: sticky; top: 96px; }
html body.woocommerce div.product > .woocommerce-tabs,
html body.woocommerce div.product > .related,
html body.woocommerce div.product > .up-sells,
html body.woocommerce div.product > .lb-spec { grid-column: 1 / -1; }

html body.woocommerce div.product .woocommerce-product-gallery {
  background: var(--bone); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s5); margin: 0;
}
html body.woocommerce div.product .woocommerce-product-gallery__image { border-radius: var(--r-sm); overflow: hidden; }
html body.woocommerce div.product .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
html body.woocommerce div.product .flex-control-thumbs {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s4) 0 0 !important; padding: 0;
}
html body.woocommerce div.product .flex-control-thumbs li { margin: 0 !important; width: calc(20% - 7px) !important; list-style: none; }
html body.woocommerce div.product .flex-control-thumbs img {
  border-radius: var(--r-sm); background: var(--paper);
  border: 1px solid var(--rule); opacity: .55; cursor: pointer;
  transition: opacity var(--t-micro), border-color var(--t-micro);
}
html body.woocommerce div.product .flex-control-thumbs img:hover,
html body.woocommerce div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--ink); }
html body.woocommerce div.product .woocommerce-product-gallery__trigger {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--rule-2); width: 38px; height: 38px; border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center;
  top: var(--s5); right: var(--s5);
}

html body.woocommerce div.product .summary .product_title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.06; letter-spacing: -.03em; color: var(--ink);
  margin: 0 0 var(--s5); text-wrap: balance; text-transform: none;
}
html body.woocommerce div.product .summary p.price,
html body.woocommerce div.product .summary span.price {
  font-family: var(--disp); font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 var(--s4);
}
html body.woocommerce div.product .summary .woocommerce-product-details__short-description {
  font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-bottom: var(--s6);
}
/* WooCommerce prints "99 in stock" beneath the theme's own availability line */
html body.woocommerce div.product .summary p.stock { display: none; }

html body.woocommerce div.product form.cart { margin: 0 0 var(--s6); display: flex; gap: var(--s3); align-items: stretch; }
html body.woocommerce div.product form.cart .quantity input.qty { width: 76px; text-align: center; min-height: 52px; }

html body.woocommerce div.product .product_meta {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--s5);
  margin: 0; padding-top: var(--s5); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3);
}
html body.woocommerce div.product .product_meta > span { display: contents; text-transform: uppercase; }
html body.woocommerce div.product .product_meta a { color: var(--ink); text-transform: none; }
html body.woocommerce div.product .product_meta a:hover { color: var(--accent); }
/* tag slugs (bes870, blowouthopper, brevillebes870) are machine names, and
   the SKU already leads the specification table */
html body.woocommerce div.product .product_meta .tagged_as,
html body.woocommerce div.product .product_meta .sku_wrapper { display: none; }

html body.woocommerce div.product .woocommerce-tabs { margin-top: var(--s8); border-top: 1px solid var(--rule); padding-top: var(--s6); }
html body.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: var(--s6); margin: 0 0 var(--s6); padding: 0; list-style: none;
}
html body.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
html body.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
html body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
html body.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
html body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 0 10px; display: block; border-bottom: 1px solid transparent;
}
html body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
html body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); border-bottom-color: var(--ink); }
html body.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 74ch; color: var(--ink-2); font-size: 16px; line-height: 1.75; padding: 0; margin: 0;
}
html body.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }

html body.woocommerce .related > h2, html body.woocommerce .up-sells > h2 {
  font-family: var(--disp); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600;
  letter-spacing: -.024em; color: var(--ink); margin: var(--s8) 0 var(--s6); text-transform: none;
}

html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error {
  background: var(--bone); border: 1px solid var(--rule);
  border-left: 2px solid var(--accent); border-radius: var(--r-sm);
  color: var(--ink); font-size: 15px;
}
html body .woocommerce-message::before, html body .woocommerce-info::before { color: var(--accent); }
html body .woocommerce-message a, html body .woocommerce-info a { color: var(--accent); }

html body.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: var(--s2); justify-content: center; }
html body.woocommerce nav.woocommerce-pagination ul li { border: 0; }
html body.woocommerce nav.woocommerce-pagination ul li a,
html body.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 13px; color: var(--ink-2); padding: 0 12px;
}
html body.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
html body.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ==========================================================================
   7. CART / CHECKOUT / ACCOUNT
   Elementor Pro renders these with its own `e-cart-section` / `col-1` class
   names, none of which match WooCommerce's, so they need naming twice.
   ========================================================================== */
html body .e-cart-section,
html body .woocommerce-checkout .col-1,
html body .woocommerce-checkout .col-2,
html body .e-coupon-box,
html body .woocommerce-checkout-payment,
html body .woocommerce-account .woocommerce-MyAccount-content,
html body .woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); color: var(--ink);
}
html body .woocommerce-checkout .col-2:empty { display: none; }

html body .e-cart-section h2, html body .e-cart-section h3,
html body .woocommerce-checkout h3, html body .e-cart-totals h2 {
  font-family: var(--disp); font-size: 19px; font-weight: 600;
  color: var(--ink); text-transform: none; letter-spacing: -.015em;
}
html body .e-cart-section table, html body .e-cart-section th, html body .e-cart-section td {
  background: transparent; border-color: var(--rule); color: var(--ink);
}
html body .e-cart-section th,
html body .woocommerce-checkout label,
html body .woocommerce-checkout .form-row label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
html body .woocommerce-checkout .required { color: var(--accent); }
html body .e-cart-section .product-name a { color: var(--ink); font-weight: 500; }
html body .e-cart-section .product-name a:hover { color: var(--accent); }
html body .e-cart-totals .order-total .amount,
html body .woocommerce-checkout-review-order-table .order-total td { color: var(--ink); font-size: 20px; font-weight: 600; }

/* the kit computes .woocommerce-Price-currencySymbol to rgb(0,0,0) — fine on
   paper, but it must follow its parent wherever the ground is inverted */
html body .woocommerce-Price-currencySymbol { color: inherit; }

html body .payment_box, html body .payment_box.payment_method_stripe_cc {
  background: var(--bone); border: 1px solid var(--rule);
  border-radius: var(--r-sm); color: var(--ink-2);
}
html body .payment_box::before { border-bottom-color: var(--bone); }
html body .wc_payment_methods li { border-color: var(--rule); }
html body .wc_payment_methods label {
  font-family: var(--body); font-size: 15px; letter-spacing: 0;
  text-transform: none; color: var(--ink);
}
html body .StripeElement {
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); padding: 14px 15px;
}
html body .StripeElement--focus { border-color: var(--ink); }

/* Elementor zeroes the vertical padding and these collapse to 16px tall */
html body .wc-proceed-to-checkout a.checkout-button,
html body a.checkout-button.button.alt,
html body #place_order {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 16px 26px;
}

html body .e-cart-section a.remove, html body .product-remove a.remove {
  color: var(--ink-3); background: transparent; font-size: 20px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color var(--t-micro), background-color var(--t-micro);
}
html body .e-cart-section a.remove:hover { color: var(--bad); background: var(--sand); }

html body .shipping-calculator-button,
html body .e-cart-section a:not(.button),
html body .e-cart-totals a:not(.button) { color: var(--accent); }

/* ==========================================================================
   8. THE JOURNAL
   ========================================================================== */
.lb-journal { max-width: var(--shell); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.lb-jgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); }

.lb-jcard { border-top: 1px solid var(--ink); padding-top: var(--s4); }
.lb-jcard__link { display: block; color: inherit; }
.lb-jcard__shot { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone); border-radius: var(--r-sm); margin-bottom: var(--s4); }
.lb-jcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
.lb-jcard:hover .lb-jcard__shot img { transform: scale(1.04); }
.lb-jcard__noshot { display: block; width: 100%; height: 100%; background: var(--sand); }
.lb-jcard__meta { display: flex; gap: 8px; align-items: center; }
.lb-jcard__h {
  font-family: var(--disp); font-size: clamp(20px, 2vw, 27px); font-weight: 600;
  line-height: 1.16; letter-spacing: -.022em; color: var(--ink);
  margin: var(--s3) 0; text-transform: none; text-wrap: balance;
  transition: color var(--t-micro);
}
.lb-jcard:hover .lb-jcard__h { color: var(--accent); }
.lb-jcard__p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.lb-jcard__more {
  display: inline-block; margin-top: var(--s4); font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

.lb-post { max-width: 720px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s7); }
.lb-post__back { display: inline-block; color: var(--ink-3); margin-bottom: var(--s6); }
.lb-post__back:hover { color: var(--accent); }
.lb-post__h {
  font-family: var(--disp); font-size: clamp(32px, 4.6vw, 60px); font-weight: 700;
  line-height: 1.02; letter-spacing: -.032em; color: var(--ink);
  margin: 0 0 var(--s4); text-transform: none; text-wrap: balance;
}
.lb-post__meta { display: flex; gap: 8px; align-items: center; }
.lb-post__shot { margin: var(--s7) auto 0; max-width: 1080px; padding: 0 var(--s5); }
.lb-post__shot img { width: 100%; border-radius: var(--r-md); display: block; }
.lb-post__body { margin-top: var(--s7); font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.lb-post__body p { margin: 0 0 var(--s5); text-wrap: pretty; }
.lb-post__body h2, .lb-post__body h3 {
  font-family: var(--disp); color: var(--ink); text-transform: none;
  letter-spacing: -.022em; margin: var(--s7) 0 var(--s3);
}
.lb-post__body h2 { font-size: 30px; }
.lb-post__body h3 { font-size: 22px; }
.lb-post__body a { color: var(--accent); border-bottom: 1px solid var(--rule-2); }
.lb-post__body img { border-radius: var(--r-md); }
.lb-post__body blockquote {
  margin: var(--s6) 0; padding: var(--s5) var(--s6);
  border-left: 2px solid var(--accent); background: var(--bone);
  font-size: 21px; line-height: 1.5; color: var(--ink);
}
.lb-journal .navigation.pagination { margin-top: var(--s8); display: flex; justify-content: center; }
.lb-journal .nav-links { display: flex; gap: var(--s2); }
.lb-journal .page-numbers {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 14px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.lb-journal .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ==========================================================================
   9. THIRD-PARTY CHROME
   Three plugins render fixed widgets at max-int z-indexes, and Elementor's
   global kit paints every bare <button>. All of it is brought into the
   palette here rather than left to fight the design.
   ========================================================================== */

/* woocommerce-notification prints "Hugo from France, purchased …" over the
   gallery, carrying a `wn-new_year` theme class. Manufactured urgency has no
   place here; deleting the plugin is the real fix and saves the payload. */
html body #message-purchased,
html body [id^="message-purchased"],
html body .wn-background-template-type-2 { display: none !important; }

/* the currency switcher ships as a 250px panel at right:-210px, z-index
   2147483647 — a stub of raw codes welded to the viewport edge */
html body .woocommerce-multi-currency.wmc-sidebar {
  z-index: 80 !important;
  /* Width and resting offset are NOT set here — see "currency, sized once"
     near the end of this file, which is the only place that wins. */
  top: auto !important; bottom: var(--s5) !important; height: auto !important;
  background: rgba(252, 251, 249, .96) !important;
  border: 1px solid var(--rule) !important; border-right: 0 !important;
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
  box-shadow: -10px 0 40px rgba(23, 20, 15, .10) !important;
  overflow: hidden !important; transition: right var(--t-mid) !important;
}
html body .woocommerce-multi-currency.wmc-sidebar .wmc-list-currencies {
  max-height: min(50vh, 400px) !important; overflow-y: auto !important; overflow-x: hidden !important;
  scrollbar-width: thin; background: transparent !important; border: 0 !important;
}
html body .woocommerce-multi-currency.wmc-sidebar .wmc-title {
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--ink-3) !important; background: transparent !important;
  padding: 13px 15px 9px !important; border-bottom: 1px solid var(--rule) !important;
}
html body .woocommerce-multi-currency.wmc-sidebar .wmc-currency {
  border: 0 !important; border-bottom: 1px solid var(--rule) !important;
  background: transparent !important; min-height: 0 !important; padding: 0 !important;
}
html body .woocommerce-multi-currency.wmc-sidebar .wmc-currency a {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 10px 15px !important; font-family: var(--mono) !important;
  font-size: 11px !important; letter-spacing: .08em !important;
}
html body .woocommerce-multi-currency.wmc-sidebar .wmc-currency-content-left { width: 34px !important; flex: 0 0 34px !important; }
html body .woocommerce-multi-currency .wmc-currency,
html body .woocommerce-multi-currency .wmc-currency * { color: var(--ink-2) !important; }
/* :not(.wmc-active) matters — see the block near the end of this file. */
html body .woocommerce-multi-currency .wmc-currency:not(.wmc-active):hover { background: var(--sand) !important; }
html body .woocommerce-multi-currency .wmc-currency:not(.wmc-active):hover * { color: var(--ink) !important; }
html body .woocommerce-multi-currency .wmc-currency.wmc-active { background: var(--ink) !important; }
html body .woocommerce-multi-currency .wmc-currency.wmc-active * { color: var(--paper) !important; }

/* ar-contactus ships #008749 green with a red badge and a pulsing halo */
html body #arcontactus { z-index: 90 !important; }
html body #arcontactus .arcu-message-button,
html body #arcontactus .arcu-form-close,
html body #arcontactus .arcu-prompt-close {
  background: var(--ink) !important; color: var(--paper) !important;
  box-shadow: 0 10px 32px rgba(23, 20, 15, .22) !important;
}
/* Forcing both fill and stroke on every path turned the chat glyph into a
   solid blob. The icon is drawn with currentColor; setting the colour is
   enough, and outlined paths keep their counters. */
html body #arcontactus .arcu-message-button svg { fill: currentColor !important; }
html body #arcontactus .arcu-message-button svg path[fill="none"] { fill: none !important; stroke: currentColor !important; }
html body #arcontactus .pulsation,
html body #arcontactus .arcu-unread-badge { display: none !important; }
html body #arcontactus .messangers-block,
html body #arcontactus .arcu-forms-container,
html body #arcontactus .arcu-prompt {
  background: var(--paper) !important; border: 1px solid var(--rule) !important;
  border-radius: var(--r-md) !important; color: var(--ink) !important;
}
html body #arcontactus .messangers-block *,
html body #arcontactus .arcu-prompt * { color: var(--ink) !important; }

/* Elementor's global kit fills every bare <button>, which caught the menu
   trigger and rendered it as a filled block */
html body button.lb-burger,
html body .lb-drawer__top button.lb-burger {
  background: transparent !important; background-image: none !important;
  border: 1px solid var(--rule-2) !important; color: var(--ink) !important;
  box-shadow: none !important;
}

/* Elementor forms and the two accordion widgets in use */
html body .elementor a:not(.button):not(.elementor-button):not([class*="lb-"]) { color: var(--accent); }
html body .elementor-field-label {
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--ink-3) !important;
}
html body .elementor-accordion .elementor-accordion-item,
html body .elementor-toggle .elementor-toggle-item,
html body .ekit-accordion-wrapper .ekit-accordion--item {
  border: 0 !important; border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important; margin: 0 !important;
}
html body .elementor-accordion .elementor-tab-title,
html body .ekit-accordion--toggler {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: var(--s5) 0 !important;
  font-family: var(--disp) !important; font-size: 19px !important; font-weight: 500 !important;
  letter-spacing: -.016em !important; color: var(--ink) !important; text-transform: none !important;
}
html body .elementor-accordion .elementor-tab-title a { color: var(--ink) !important; text-transform: none !important; }
html body .ekit-accordion--toggler:hover,
html body .elementor-accordion .elementor-tab-title.elementor-active a { color: var(--accent) !important; }
html body .elementor-accordion .elementor-tab-content,
html body .ekit-accordion--content {
  background: transparent !important; border: 0 !important;
  color: var(--ink-2) !important; padding: 0 0 var(--s5) !important;
  font-size: 16px; line-height: 1.75; max-width: 74ch;
}
html body .elementor-accordion-icon, html body .ekit-accordion--icon { color: var(--accent) !important; }

/* The stock-photo banner every Elementor page opens with: a 2023 blog bean
   shot (blog1.jpg) behind a white title, 361px tall, above the cart. */
.elementor-top-section:has(> .elementor-background-overlay) {
  background-image: none !important;
  background-color: var(--paper) !important;
  border-bottom: 1px solid var(--rule);
  min-height: 0 !important;
  padding: var(--s8) 0 var(--s6) !important;
}
.elementor-top-section:has(> .elementor-background-overlay) > .elementor-background-overlay { display: none !important; }
.elementor-top-section:has(> .elementor-background-overlay) > .elementor-container,
.elementor-top-section:has(> .elementor-background-overlay) .elementor-column,
.elementor-top-section:has(> .elementor-background-overlay) .elementor-widget-wrap { min-height: 0 !important; height: auto !important; }
.elementor-top-section:has(> .elementor-background-overlay) .elementor-heading-title {
  font-family: var(--disp) !important;
  font-size: clamp(34px, 5vw, 68px) !important; font-weight: 700 !important;
  letter-spacing: -.032em !important; line-height: 1.02 !important;
  text-transform: none !important; color: var(--ink) !important; text-shadow: none !important;
}
.elementor-top-section:has(> .elementor-background-overlay) .elementor-widget-text-editor,
.elementor-top-section:has(> .elementor-background-overlay) .elementor-widget-text-editor * {
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--ink-3) !important;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
  :root { --gut: var(--s6); }
  html body.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.woocommerce div.product { grid-template-columns: 1fr; gap: var(--s6); }
  html body.woocommerce div.product > .woocommerce-product-gallery,
  html body.woocommerce div.product > .summary { grid-column: 1; }
  html body.woocommerce div.product > .summary { position: static; }
}

/* eight menu items wrap to two rows well before 900px */
@media (max-width: 1100px) {
  .lb-nav { display: none; }
  .lb-burger { display: inline-flex; }
}

@media (max-width: 900px) {
  :root { --gut: var(--s5); --s9: 88px; --s8: 64px; }

  .lb-shead { grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
  .lb-ftr__in { grid-template-columns: 1fr; gap: var(--s6); }
  .lb-ftr__cols { grid-template-columns: 1fr; gap: var(--s5); }
  .lb-ftr__cols a { min-height: 44px; display: flex; align-items: center; }
  .lb-jgrid { grid-template-columns: 1fr; gap: var(--s6); }

  /* the legal strip prints the phone number and email at 15px */
  .lesbrew-business-details a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 10px; }

  /* The currency tab and the bubble share the right edge and landed on the
     hero copy at 390px. Hiding the tab leaves no way to change currency on a
     phone, so the drawer carries the list instead — see .lb-drawer__cur, and
     lesbrew_currencies() for where the codes come from. */
  html body .woocommerce-multi-currency.wmc-sidebar { display: none !important; }
  html body #arcontactus { bottom: 12px !important; }
  html body #arcontactus .arcu-message-button { width: 48px !important; height: 48px !important; }

  /* a fixed bottom-right widget covers whatever is in that corner — on these
     pages that is a required field */
  body.woocommerce-cart #arcontactus,
  body.woocommerce-checkout #arcontactus,
  body.woocommerce-account #arcontactus { display: none !important; }
  .grecaptcha-badge { left: 4px !important; right: auto !important; }

  html body.woocommerce div.product form.cart {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--paper); border-top: 1px solid var(--rule);
    padding: var(--s3) 0; margin-bottom: 0;
  }
  html body.woocommerce div.product form.cart .button { flex: 1; }
}

@media (max-width: 700px) {
  html body.woocommerce ul.products { grid-template-columns: 1fr; }
  html body.woocommerce div.product .flex-control-thumbs li { width: calc(25% - 6px) !important; }
  .lb-post__body { font-size: 17px; }
}

/* --- the cart line item at phone width ----------------------------------- */
/* WooCommerce stacks the table, right-aligns every cell, hides the thumbnail
   and labels each row with a ::before whose colour comes from the kit. */
@media (max-width: 768px) {
  html body .e-cart-section .shop_table thead { display: none; }
  html body .e-cart-section .shop_table tbody tr.woocommerce-cart-form__cart-item {
    display: grid; grid-template-columns: 76px 1fr;
    grid-template-areas: "thumb name" "thumb price" "thumb qty" "sub sub";
    gap: 6px var(--s4); align-items: center;
    padding: var(--s4) 0; border-bottom: 1px solid var(--rule); position: relative;
  }
  html body .e-cart-section .shop_table td {
    text-align: left; border: 0; padding: 2px 0;
    display: flex; align-items: center; gap: 8px;
  }
  html body .e-cart-section .shop_table td::before {
    color: var(--ink-3); font-family: var(--mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
  }
  html body .e-cart-section .shop_table td.product-thumbnail { display: block; grid-area: thumb; padding: 0; }
  html body .e-cart-section .shop_table td.product-thumbnail::before { content: none; }
  html body .e-cart-section .shop_table td.product-thumbnail img {
    width: 76px; height: 76px; object-fit: contain; background: var(--bone);
    border: 1px solid var(--rule); border-radius: var(--r-sm); display: block;
  }
  html body .e-cart-section .shop_table td.product-name { grid-area: name; }
  html body .e-cart-section .shop_table td.product-price { grid-area: price; }
  html body .e-cart-section .shop_table td.product-quantity { grid-area: qty; }
  html body .e-cart-section .shop_table td.product-subtotal {
    grid-area: sub; justify-content: space-between;
    padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--rule);
  }
  html body .e-cart-section .shop_table td.product-name::before { content: none; }
  html body .e-cart-section .shop_table td.product-name a { font-family: var(--disp); font-size: 15px; font-weight: 600; line-height: 1.3; }
  html body .e-cart-section .shop_table td.product-remove { position: absolute; top: var(--s3); right: 0; padding: 0; display: block; }
  html body .e-cart-section .shop_table td.product-remove::before { content: none; }
  html body .e-cart-section .shop_table tbody tr:not(.woocommerce-cart-form__cart-item) td { display: block; width: 100%; }
  html body .e-cart-section .shop_table tbody tr:not(.woocommerce-cart-form__cart-item) td::before { content: none; }
  html body .e-cart-section .shop_table button[name="update_cart"] { width: 100%; }
}

/* ==========================================================================
   11. PRINT
   ========================================================================== */
@media print {
  .lb-hdr, .lb-drawer, .lb-ftr, #arcontactus, .wmc-sidebar, .grecaptcha-badge { display: none !important; }
  html body { background: #fff; color: #000; font-size: 12pt; }
}


/* ==========================================================================
   12. RECLAIMING THE GROUND FROM ELEMENTOR'S GLOBAL KIT
   The kit (elementor-kit-9923) is a site-wide stylesheet built for the old
   design. It sets `body { background: rgb(77,77,77); color: rgb(204,204,204) }`,
   paints every heading rgb(236,236,236), and pushes `text-transform:
   capitalize` down the tree — which is why "Made for your grinder" rendered
   as "Made For Your Grinder".

   Its selectors are scoped `.elementor-kit-9923 …`, i.e. a class on <body>,
   so they outrank `html body …`. `html body[class]` carries one more class-
   level of weight and wins cleanly, which keeps this to specificity rather
   than a wall of !important. The kit is left loaded because the remaining
   Elementor pages still depend on its container widths.
   ========================================================================== */

html body[class] {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
}

html body[class] h1,
html body[class] h2,
html body[class] h3,
html body[class] h4,
html body[class] h5,
html body[class] h6 {
  color: var(--ink);
  font-family: var(--disp);
  text-transform: none;
}

html body[class] a { color: var(--ink); }
html body[class] a:hover { color: var(--accent); }

/* the theme's own display classes, above anything the kit reaches */
html body[class] .lb-h1,
html body[class] .lb-h2,
html body[class] .lb-h3 { color: var(--ink); text-transform: none; }
html body[class] .lb-h1 { font-weight: 700; font-size: clamp(44px, 8.4vw, 128px); line-height: .93; letter-spacing: -.035em; }
html body[class] .lb-h2 { font-weight: 600; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.028em; }
html body[class] .lb-h3 { font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.22; letter-spacing: -.012em; }

html body[class] .lb-lbl,
html body[class] .lb-shead__n,
html body[class] .lb-part__m,
html body[class] .lb-makers__n,
html body[class] .lb-jcard__more {
  font-family: var(--mono); text-transform: uppercase;
}
html body[class] .lb-lbl { color: var(--ink-3); }
html body[class] .lb-lede { color: var(--ink-2); text-transform: none; }
html body[class] .lb-quote__p { color: var(--ink); text-transform: none; }
html body[class] .lb-part__p,
html body[class] .lb-cols p,
html body[class] .lb-shead__note { color: var(--ink-2); text-transform: none; }
html body[class] .lb-facts__n { color: var(--ink); font-family: var(--disp); }
html body[class] .lb-hero__quiet { color: var(--ink-3); }
html body[class] .lb-ticker__i { color: var(--ink-2); }

/* buttons keep their own ground */
html body[class] .lb-btn { background-color: var(--ink); color: var(--paper); }
html body[class] .lb-btn:hover { color: var(--paper); }
html body[class] .lb-makers a { color: var(--ink); }
html body[class] .lb-makers a:hover { color: var(--paper); }

/* WooCommerce surfaces the kit also tints */
html body[class].woocommerce ul.products li.product .woocommerce-loop-product__title,
html body[class].woocommerce div.product .summary .product_title,
html body[class].woocommerce div.product .summary p.price { color: var(--ink); text-transform: none; }
html body[class].woocommerce ul.products li.product .price { color: var(--ink-2); }


/* ==========================================================================
   13. CORRECTIONS FROM THE FIRST LIGHT BUILD
   ========================================================================== */

/* The hero headline is four lines of copy. At clamp(…, 8.4vw, 128px) it
   computed to 117px and stood 655px tall, pushing the object and the lede
   off the first screen — scale for its own sake rather than hierarchy.
   Large still, but sized to the sentence it has to carry. */
html body[class] .lb-h1,
html body[class] .lb-hero__h {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: .98;
  letter-spacing: -.032em;
}

/* The multi-currency plugin injects an inline <style> block that paints the
   active chip with !important on descendants of .wmc-list-currencies, so the
   active state came back pink. Matched at its own depth. */
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency.wmc-active,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency.wmc-active a {
  background: var(--ink) !important;
}
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency.wmc-active a,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency.wmc-active span,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency.wmc-active .wmc-currency-content-left,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency.wmc-active .wmc-currency-content-right {
  color: var(--paper) !important;
}
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency a,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency span,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency .wmc-currency-content-left,
html body[class] .woocommerce-multi-currency .wmc-list-currencies .wmc-currency .wmc-currency-content-right {
  color: var(--ink-2) !important;
}

/* the shop grid's product images blend the same way and need the same
   isolation so the photograph's white resolves to the card's own bone */
html body.woocommerce ul.products li.product a { isolation: isolate; display: block; }
html body.woocommerce ul.products li.product a img { mix-blend-mode: multiply; }
html body.woocommerce div.product .woocommerce-product-gallery { isolation: isolate; }
html body.woocommerce div.product .woocommerce-product-gallery__image img { mix-blend-mode: multiply; }


/* ==========================================================================
   14. COMPONENTS THE TEMPLATES EMIT
   These are rendered by functions.php — the shop finder, the maker filter,
   the card meta, the fitment confirmation and the specification table. They
   existed in the previous direction and needed carrying across, not dropping.
   ========================================================================== */

/* --- the shop's finder block --------------------------------------------- */
.lb-finder__label { display: block; margin-bottom: var(--s3); }
.lb-finder__row { position: relative; }
.lb-finder__hint { margin-top: var(--s3); font-size: 13px; color: var(--ink-3); }
html body.woocommerce .lb-finder {
  max-width: var(--shell); margin: 0 auto var(--s6);
  padding: var(--s6) var(--gut) 0;
}
html body.woocommerce .lb-finder input[type="search"] {
  width: 100%; font-family: var(--disp);
  font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.018em;
  padding: var(--s4) 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; min-height: 0;
}
html body.woocommerce .lb-finder input[type="search"]:focus { border-bottom-color: var(--accent); }

/* --- the maker filter strip ---------------------------------------------- */
.lb-brands {
  display: flex; flex-wrap: wrap; gap: 1px;
  max-width: var(--shell); margin: 0 auto var(--s7);
  padding: 0 var(--gut);
}
.lb-brands a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; min-height: 42px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-family: var(--disp); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: border-color var(--t-micro), color var(--t-micro), background-color var(--t-micro);
}
.lb-brands a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lb-brands__n { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.lb-brands a:hover .lb-brands__n { color: var(--paper); }

/* --- product card meta ---------------------------------------------------- */
.lb-card__maker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2);
}
.lb-card__stock {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 var(--s4);
}
.lb-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: 0 0 6px; }

/* --- the fitment confirmation on a product ------------------------------- */
.lb-fitment {
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: var(--r-sm); background: var(--bone);
  padding: var(--s4) var(--s5); margin: 0 0 var(--s5);
}
.lb-fitment__t {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--disp); font-size: 15px; font-weight: 600;
  letter-spacing: -.012em; color: var(--ink);
}
.lb-fitment__n {
  margin: var(--s2) 0 0;
  font-family: var(--mono); font-size: 10px; line-height: 1.7;
  letter-spacing: .06em; color: var(--ink-3);
}
.lb-stockline {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s5);
}

/* --- the specification table --------------------------------------------- */
.lb-spec { margin: var(--s7) 0 0; }
.lb-spec__h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); margin: 0 0 0;
}
.lb-spec__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.lb-spec__k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lb-spec__v { font-size: 15px; color: var(--ink); text-align: right; }

/* --- legacy section head (still used by the shop templates) --------------- */
.lb-sec__h {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5);
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--ink);
}
.lb-sec__note { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

.lb-jcard__body { padding: 0; }
.lb-post__head { margin-bottom: var(--s5); }

@media (max-width: 900px) {
  .lb-sec__h { flex-direction: column; align-items: flex-start; }
  .lb-brands { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%); }
  .lb-brands::-webkit-scrollbar { display: none; }
  .lb-brands a { flex: 0 0 auto; min-height: 44px; }
}

/* ==========================================================================
   15. THE BLEND, DONE PROPERLY
   mix-blend-mode composites an element — background included — against its
   backdrop. Giving the image its own bone background meant it multiplied
   itself against the card, leaving each photograph in a faintly lighter
   square. The image now carries no ground of its own and blends straight
   into the card, so the photography's white simply disappears.
   ========================================================================== */
html body.woocommerce ul.products li.product { isolation: isolate; }
html body.woocommerce ul.products li.product a { isolation: auto; display: block; }
html body.woocommerce ul.products li.product a img {
  background: transparent;
  padding: var(--s4);
  mix-blend-mode: multiply;
}

/* The closed currency stub sat as a 374px-tall white strip against the paper.
   Narrowed and quietened so it reads as an edge tab until it is opened. */
html body .woocommerce-multi-currency.wmc-sidebar {
  background: var(--bone) !important;
  box-shadow: -6px 0 24px rgba(23, 20, 15, .07) !important;
}
html body .woocommerce-multi-currency.wmc-sidebar .wmc-list-currencies { max-height: min(38vh, 300px) !important; }
html body .woocommerce-multi-currency.wmc-sidebar:hover { background: var(--paper) !important; }


/* ==========================================================================
   16. THE CARD, QUIETER
   Two corrections after seeing the grid rendered.

   1. Swapping the card's ground on hover fought the blended photograph: the
      backdrop changed underneath a multiplying image mid-transition and the
      shot's white reappeared as a pale rectangle. The card ground now stays
      put and the hover is carried by the accent rule and the image alone.

   2. Three filled black buttons across a row put all the weight on the least
      interesting thing in the card. The object should be loudest; the action
      is an outline that fills only when it is being aimed at.
   ========================================================================== */
html body.woocommerce ul.products li.product:hover { background: var(--paper); }
html body.woocommerce ul.products li.product:hover a img { background: transparent; }

html body.woocommerce ul.products li.product .button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-2);
  min-height: 46px;
  padding: 12px 22px;
  font-size: 14px;
}
html body.woocommerce ul.products li.product .button::before { background: var(--ink); }
html body.woocommerce ul.products li.product .button:hover {
  color: var(--paper);
  border-color: var(--ink);
}

/* WooCommerce lays the single product out with floats — `div.images` and
   `div.summary` both carry `width: 48%; float: left/right`. Inside a grid the
   float is inert but the 48% is not, so the gallery collapsed to a quarter of
   its column and the title wrapped to nine lines beside it. */
html body.woocommerce div.product > .woocommerce-product-gallery,
html body.woocommerce div.product > div.images,
html body.woocommerce div.product > .summary,
html body.woocommerce div.product > div.summary {
  width: 100%;
  max-width: none;
  float: none;
  margin-left: 0;
  margin-right: 0;
}

/* flexslider applies a transform to .woocommerce-product-gallery__wrapper,
   which creates a stacking context. The gallery's bone is painted outside it,
   so the multiplying image had nothing to blend into and the photograph's
   white showed as a pale rectangle. Painting the ground on the slide itself
   puts it inside the same context as the image. */
html body.woocommerce div.product .woocommerce-product-gallery__image,
html body.woocommerce div.product .woocommerce-product-gallery__wrapper { background: var(--bone); }
html body.woocommerce div.product .woocommerce-product-gallery__image { border-radius: var(--r-sm); }

/* flexslider lays every slide side by side inside .flex-viewport and relies
   on it to clip. A sliver of the next photograph was showing at the gallery's
   right edge. */
html body.woocommerce div.product .flex-viewport { overflow: hidden; border-radius: var(--r-sm); }


/* ==========================================================================
   17. ELEMENTOR PAGES — colours baked for the old dark ground
   Each Elementor page ships its own stylesheet with per-widget colours chosen
   when the site was dark: headings at #ECECEC (1.14:1 on paper), body copy at
   #CCCCCC (1.55:1) and eyebrow labels in the retired brass #E3BC8B (1.72:1).
   On paper they are close to invisible.

   Those rules are `.elementor-NNNN .elementor-element-XXXX .elementor-heading-
   title`, three classes deep. `html body[class] .elementor …` carries the same
   class weight plus two elements, so it wins without !important. Per-widget
   colours a person deliberately sets in Elementor will still need setting
   again there — this only replaces the inherited defaults.
   ========================================================================== */

html body[class] .elementor .elementor-heading-title {
  color: var(--ink);
  font-family: var(--disp);
  text-transform: none;
  letter-spacing: -.022em;
}

html body[class] .elementor .elementor-widget-text-editor,
html body[class] .elementor .elementor-widget-text-editor p,
html body[class] .elementor .elementor-widget-text-editor li,
html body[class] .elementor .ql-block,
html body[class] .elementor .elementor-text-editor {
  color: var(--ink-2);
  font-family: var(--body);
}

/* the little ruled eyebrow above each section heading */
html body[class] .elementor .elementor-divider__text {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html body[class] .elementor .elementor-divider-separator { border-color: var(--rule-2); }

/* counters and icon boxes */
html body[class] .elementor .elementor-counter-number-wrapper,
html body[class] .elementor .elementor-counter-number,
html body[class] .elementor .elementor-icon-box-title,
html body[class] .elementor .elementor-image-box-title { color: var(--ink); }
html body[class] .elementor .elementor-counter-title,
html body[class] .elementor .elementor-icon-box-description,
html body[class] .elementor .elementor-image-box-description { color: var(--ink-2); }
html body[class] .elementor .elementor-icon { color: var(--accent); }

/* icon lists (used on the business page) */
html body[class] .elementor .elementor-icon-list-text { color: var(--ink-2); }
html body[class] .elementor .elementor-icon-list-icon svg,
html body[class] .elementor .elementor-icon-list-icon i { color: var(--accent); fill: var(--accent); }

/* Elementor's cart widget re-asserts the kit's #5BC0DE link colour and paints
   the primary action with it — white on #5BC0DE is 2.09:1, and it is the
   button the whole page exists for. Matched at the widget's own weight. */
html body[class] .e-cart-section a:not(.button):not(.elementor-button),
html body[class] .e-cart-totals a:not(.button):not(.elementor-button),
html body[class] .shipping-calculator-button,
html body[class] .woocommerce-shipping-calculator a,
html body[class] .e-cart-section .product-name a { color: var(--accent); }
html body[class] .e-cart-section .product-name a { color: var(--ink); }
html body[class] .e-cart-section .product-name a:hover { color: var(--accent); }

html body[class] .wc-proceed-to-checkout a.checkout-button,
html body[class] a.checkout-button.button.alt,
html body[class] .e-cart-section a.checkout-button,
html body[class] #place_order {
  background: var(--ink);
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
html body[class] .wc-proceed-to-checkout a.checkout-button:hover,
html body[class] a.checkout-button.button.alt:hover,
html body[class] #place_order:hover { background-color: var(--accent); border-color: var(--accent); color: var(--paper); }

/* the cart panels shipped pure white rather than the page's paper */
html body[class] .e-cart-section,
html body[class] .e-coupon-box,
html body[class] .woocommerce-checkout-payment,
html body[class] .woocommerce-checkout .col-1,
html body[class] .woocommerce-checkout .col-2 { background-color: var(--paper); }


/* ==========================================================================
   18. ELEMENTOR'S GLOBAL COLOUR VARIABLES
   Chasing individual widget selectors was the wrong level. Every Elementor
   widget on every page resolves its colour from four variables the kit
   defines, and all four were chosen for the dark design:

       --e-global-color-primary    #E3BC8B   the retired brass
       --e-global-color-secondary  #ECECEC   headings — 1.14:1 on paper
       --e-global-color-text       #CCCCCC   body copy — 1.55:1
       --e-global-color-accent     #FFFFFF   invisible on paper

   Redefining them here re-colours About, FAQs, Contact, Business, the 404 and
   both checkout pages at once, and anything built in Elementor later inherits
   the right palette instead of the old one. The kit scopes them to
   `.elementor-kit-9923` (a body class); `html body[class]` outweighs that.
   ========================================================================== */
html body[class] {
  --e-global-color-primary:   #7A3E1D;   /* roast — eyebrows, accents  8.1:1 */
  --e-global-color-secondary: #17140F;   /* headings                  17.4:1 */
  --e-global-color-text:      #4A443B;   /* body copy                  9.1:1 */
  --e-global-color-accent:    #17140F;   /* was #FFFFFF               17.4:1 */
}


/* ==========================================================================
   19. ELEMENTOR'S GLOBAL TYPOGRAPHY VARIABLES
   The same lesson as the colours: `text-transform: capitalize` is not set on
   a selector, it is set on nine typography variables the kit defines and
   every widget resolves. That is why "How it started" kept rendering as
   "How It Started" no matter which selector was overridden.
   ========================================================================== */
html body[class] {
  --e-global-typography-primary-text-transform: none;
  --e-global-typography-secondary-text-transform: none;
  --e-global-typography-text-text-transform: none;
  --e-global-typography-accent-text-transform: none;
  --e-global-typography-177d72a-text-transform: none;
  --e-global-typography-2921a6b-text-transform: none;
  --e-global-typography-32d87c2-text-transform: none;
  --e-global-typography-7010c3b-text-transform: none;
  --e-global-typography-72fec17-text-transform: none;
  --e-global-typography-8212368-text-transform: none;
  --e-global-typography-cac3963-text-transform: none;
  --e-global-typography-fea603d-text-transform: none;
}

/* Elementor buttons carried black label text on a dark fill (2.53:1) left
   over from the old ground. They join the theme's button language. */
html body[class] .elementor .elementor-button,
html body[class] .elementor a.elementor-button {
  background-color: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--disp);
  font-weight: 600;
  text-transform: none;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  transition: background-color var(--t-micro), border-color var(--t-micro);
}
html body[class] .elementor .elementor-button:hover,
html body[class] .elementor a.elementor-button:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
html body[class] .elementor .elementor-button .elementor-button-text,
html body[class] .elementor .elementor-button .elementor-button-icon,
html body[class] .elementor .elementor-button i,
html body[class] .elementor .elementor-button svg { color: var(--paper); fill: var(--paper); }

/* Section 12's `html body[class] a { color: var(--ink) }` also caught the skip
   link, which sits on an ink ground — ink on ink, 1:1. It needs to outrank it. */
html body[class] a.lb-skip,
html body[class] a.lb-skip:focus,
html body[class] a.lb-skip:hover { background: var(--ink); color: var(--paper); }

/* At 70px the chat bubble is the largest single object in the bottom-right of
   a gallery page, and on the homepage it landed on a specification value.
   Smaller, and quiet until it is pointed at. */
html body[class] #arcontactus .arcu-message-button {
  width: 54px !important; height: 54px !important;
  opacity: .82; transition: opacity var(--t-micro), transform var(--t-micro);
}
html body[class] #arcontactus .arcu-message-button:hover { opacity: 1; transform: translateY(-2px); }
html body[class] #arcontactus .arcu-message-button span { display: none !important; }


/* ==========================================================================
   20. THE PHOTOGRAPHY'S OWN GROUND
   Sampled from the source files rather than guessed: every product shot is
   photographed on #FAFAFA, identical in all four corners across the ones
   checked (bes870, sette, mignon, ceado E37S, compak).

   That makes the whole mix-blend-mode approach unnecessary. Blending was
   fragile — it composites against the nearest stacking context, so a
   transform on a flexslider wrapper or a background on the image itself was
   enough to break it, and it left a faint rectangle every time. Matching the
   plate to the measured value is exact, needs no compositing, and cannot be
   broken by an ancestor.
   ========================================================================== */
:root { --shot: #FAFAFA; }   /* the tone the catalogue is shot on */

html body[class] .lb-plate,
html body[class] .lb-gal__plate,
html body[class] .lb-hero__plate,
html body[class] .lb-meas__plate,
html body[class].woocommerce ul.products li.product a img,
html body[class].woocommerce div.product .woocommerce-product-gallery,
html body[class].woocommerce div.product .woocommerce-product-gallery__image,
html body[class].woocommerce div.product .woocommerce-product-gallery__wrapper {
  background-color: var(--shot);
}

/* the blend is no longer doing any work, and it was the source of the
   stacking-context bugs — removed rather than left as decoration */
html body[class] .lb-plate img,
html body[class] .lb-gal__plate img,
html body[class] .lb-meas__plate img,
html body[class].woocommerce ul.products li.product a img,
html body[class].woocommerce div.product .woocommerce-product-gallery__image img { mix-blend-mode: normal; }

/* the cart thumbnail sits on the same ground */
html body[class] .e-cart-section .shop_table td.product-thumbnail img { background: var(--shot); }


/* ==========================================================================
   21. THE SHOP AS A FITMENT FINDER
   The catalogue is 51 parts and a buyer needs exactly one. The page opens on
   that question, filters in place as they type, and says so plainly when the
   fitment does not exist yet.
   ========================================================================== */
.lb-fit { border-bottom: 1px solid var(--rule); background: var(--bone); }
.lb-fit__in { max-width: var(--shell); margin: 0 auto; padding: var(--s8) var(--gut) var(--s6); }

.lb-fit__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6);
}
.lb-fit__h { margin: 0; }
.lb-fit__note {
  margin: 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* the field is the page's primary object: a ruled line, not a boxed input */
.lb-fit__row {
  display: flex; align-items: center; gap: var(--s4);
  border-bottom: 1px solid var(--ink); padding-bottom: var(--s3);
  margin-bottom: var(--s6);
  transition: border-color var(--t-micro);
}
.lb-fit__row:focus-within { border-bottom-color: var(--accent); }
.lb-fit__icon { color: var(--ink-3); flex: 0 0 20px; }
.lb-fit__row:focus-within .lb-fit__icon { color: var(--accent); }
html body[class] .lb-fit__row input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; border-radius: 0;
  padding: var(--s3) 0; min-height: 0;
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(22px, 3vw, 38px); letter-spacing: -.028em; color: var(--ink);
}
html body[class] .lb-fit__row input[type="search"]:focus { outline: none; box-shadow: none; }
html body[class] .lb-fit__row input::placeholder { color: var(--ink-3); opacity: 1; }
html body[class] .lb-fit__row input::-webkit-search-cancel-button { display: none; }
html body[class] .lb-fit__clear {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 26px; line-height: 1;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
html body[class] .lb-fit__clear:hover { color: var(--accent); }

/* maker buttons — the same object as the homepage grid, made interactive */
.lb-makers--filter {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: none; border: 0;
}
html body[class] .lb-makers--filter button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  padding: 9px 14px; min-height: 42px;
  font-family: var(--disp); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-micro), border-color var(--t-micro), color var(--t-micro);
}
html body[class] .lb-makers--filter button:hover { border-color: var(--ink); color: var(--ink); }
html body[class] .lb-makers--filter button.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
html body[class] .lb-makers--filter button.is-on .lb-makers__n { color: var(--paper); }

.lb-fit__empty {
  margin: var(--s5) 0 0; font-size: 16px; color: var(--ink-2);
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--accent); background: var(--paper);
}
.lb-fit__empty a { color: var(--accent); border-bottom: 1px solid var(--rule-2); }

/* a filtered card is removed from the grid, not just faded */
html body.woocommerce ul.products li.product[hidden] { display: none; }
html body.woocommerce ul.products.is-empty { border-color: transparent; background: transparent; }

html body.woocommerce .woocommerce-result-count { display: none; }
html body.woocommerce .woocommerce-notices-wrapper:empty { display: none; }
html body.woocommerce .woocommerce-ordering { margin: 0 0 var(--s5); display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
  .lb-fit__in { padding-top: var(--s7); }
  .lb-fit__head { margin-bottom: var(--s5); }
}

/* `[hidden]` is only a UA rule of `display: none`, so any component rule that
   sets display outranks it — the clear button and the empty state stayed
   visible while marked hidden. This restores the attribute's meaning. */
html body[class] [hidden] { display: none !important; }

html body.woocommerce .woocommerce-ordering { margin-top: var(--s6); }


/* ==========================================================================
   22. THE LAST TWO — CART AND CHECKOUT LINK COLOUR
   Elementor writes a stylesheet per page (post-69.css for the cart) with
   selectors three classes deep, e.g.
       .elementor-69 .elementor-element-xxxx a { color: #5BC0DE }
   which outranks `html body[class] .shipping-calculator-button` (two classes,
   two elements). Those files are generated and served from the uploads
   directory, so they cannot be edited or reliably out-specified — this is
   what !important is actually for.

   Scoped to the two elements that failed (2.02:1 and 2.09:1), not sprayed
   across the sheet.
   ========================================================================== */
html body[class] a.shipping-calculator-button,
html body[class] .woocommerce-shipping-calculator > a,
html body[class] .e-cart-section .product-name > a { color: var(--accent) !important; }
html body[class] .e-cart-section .product-name > a { color: var(--ink) !important; }
html body[class] .e-cart-section .product-name > a:hover,
html body[class] a.shipping-calculator-button:hover { color: var(--accent-2) !important; }

html body[class] a.checkout-button,
html body[class] .wc-proceed-to-checkout a.button,
html body[class] #place_order,
html body[class] button#place_order {
  background-color: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
html body[class] a.checkout-button:hover,
html body[class] .wc-proceed-to-checkout a.button:hover,
html body[class] #place_order:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--paper) !important;
}


/* ==========================================================================
   23. THE CONTENT PAGES
   About, FAQs, Contact and Business, rebuilt as real templates. The copy
   still lives in Elementor so the business can edit it; the composition
   belongs to the theme.
   ========================================================================== */

.lb-page { display: block; }
.lb-page__fallback { padding: var(--s7) 0; }

/* --- the page opening ---------------------------------------------------- */
.lb-phead {
  padding-top: var(--s9);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s8);
}
.lb-phead__h { margin: var(--s5) 0 0; }
.lb-phead__h em { font-style: normal; color: var(--accent); }
.lb-phead__lede { margin: var(--s6) 0 0; max-width: 46ch; }
.lb-phead__lede a { color: var(--accent); border-bottom: 1px solid var(--rule-2); }

/* --- the story run ------------------------------------------------------- */
/* Numbered sections in a two-column measure: the key in the margin, the prose
   in a column narrow enough to actually read. */
.lb-story { display: block; }
.lb-story__s {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s7);
  padding: var(--s7) 0;
  border-bottom: 1px solid var(--rule);
}
.lb-story__s:last-child { border-bottom: 0; }
.lb-story__k { display: flex; align-items: baseline; gap: var(--s4); }
.lb-story__h { margin: 0; }
.lb-story__b { max-width: 68ch; }
.lb-story__b p { margin: 0 0 var(--s5); font-size: 17px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.lb-story__b p:last-child { margin-bottom: 0; }
.lb-story__lede { font-size: clamp(19px, 1.8vw, 23px) !important; line-height: 1.55 !important; color: var(--ink) !important; }

/* --- FAQs ---------------------------------------------------------------- */
/* Native <details>: open before JavaScript loads, keyboard and screen-reader
   correct without ARIA plumbing, and findable by browser find-in-page. */
.lb-faq__g { margin-bottom: var(--s8); }
.lb-faq__gh { display: block; padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); margin: 0 0 var(--s2); }
.lb-faq__i { border-bottom: 1px solid var(--rule); }
.lb-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--disp); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500;
  line-height: 1.35; letter-spacing: -.016em; color: var(--ink);
  transition: color var(--t-micro);
}
.lb-faq__q::-webkit-details-marker { display: none; }
.lb-faq__q:hover { color: var(--accent); }
.lb-faq__mark { position: relative; flex: 0 0 16px; height: 16px; margin-top: 6px; }
.lb-faq__mark::before,
.lb-faq__mark::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1px;
  background: currentColor; transition: transform var(--t-mid);
}
.lb-faq__mark::after { transform: rotate(90deg); }
.lb-faq__i[open] .lb-faq__mark::after { transform: rotate(0deg); }
.lb-faq__i[open] .lb-faq__q { color: var(--accent); }
.lb-faq__a { padding: 0 0 var(--s6); max-width: 68ch; }
.lb-faq__a p { margin: 0 0 var(--s4); font-size: 16px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.lb-faq__a p:last-child { margin-bottom: 0; }

/* --- contact ------------------------------------------------------------- */
.lb-contact {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s8); align-items: start;
}
.lb-contact__aside { display: grid; gap: var(--s6); }
.lb-contact__b { border-top: 1px solid var(--ink); padding-top: var(--s4); }
.lb-contact__b h2 { margin: 0 0 var(--s3); }
.lb-contact__b p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }

/* --- business routes ----------------------------------------------------- */
.lb-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.lb-route { background: var(--paper); padding: var(--s6) var(--s5); transition: background-color var(--t-mid); }
.lb-route:hover { background: var(--shot); }
.lb-route__n { display: block; color: var(--accent); margin-bottom: var(--s4); }
.lb-route__h { margin: 0 0 var(--s3); }
.lb-route__p { margin: 0 0 var(--s3); font-size: 15px; line-height: 1.7; color: var(--ink-2); }

/* --- the closing call ---------------------------------------------------- */
.lb-cta { text-align: center; border-top: 1px solid var(--ink); }
.lb-cta .lb-h2 { margin: 0 auto; max-width: 20ch; }
.lb-cta .lb-lede { margin: var(--s5) auto 0; max-width: 46ch; }
.lb-cta .lb-btn { margin-top: var(--s6); }

@media (max-width: 900px) {
  .lb-phead { padding-top: var(--s7); padding-bottom: var(--s6); margin-bottom: var(--s6); }
  .lb-story__s { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s6) 0; }
  .lb-contact { grid-template-columns: 1fr; gap: var(--s7); }
  .lb-routes { grid-template-columns: 1fr; }
  .lb-faq__q { font-size: 17px; }
}

/* `.lb-lbl` is used on headings as well as divs (the FAQ group headings are
   <h2>). Section 12 reclaims heading colour and family from the kit but not
   size, so a labelled <h2> rendered at display scale. The label style has to
   carry its own metrics wherever it is applied. */
html body[class] .lb-lbl,
html body[class] h1.lb-lbl, html body[class] h2.lb-lbl, html body[class] h3.lb-lbl,
html body[class] h4.lb-lbl, html body[class] h5.lb-lbl, html body[class] h6.lb-lbl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}


/* ==========================================================================
   24. SHARED — the facts strip
   Used by the homepage and by About, so it cannot live in front-page.css
   (which is only enqueued on the front page). On About it was rendering as
   run-together 10px text because none of these rules were loaded.
   ========================================================================== */
.lb-facts { border-bottom: 1px solid var(--rule); }
.lb-facts__in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s6); padding-top: var(--s7); padding-bottom: var(--s7);
}
.lb-facts__n {
  display: block; font-family: var(--disp);
  font-size: clamp(34px, 3.6vw, 52px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
  margin-bottom: var(--s3);
}

/* The facts strip's responsive rule lived in front-page.css too, so on About
   the four columns never collapsed and the last one ("2000+ / CUSTOMERS") ran
   to 434px inside a 390px viewport. */
@media (max-width: 900px) {
  .lb-facts__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}
@media (max-width: 420px) {
  .lb-facts__n { font-size: clamp(28px, 8vw, 40px); }
}


/* ==========================================================================
   25. THE PRODUCT PAGE
   A buyer arrives here having already searched their grinder, so the page
   answers what follows: is this really mine, what am I getting, and what
   happens if it does not seat.
   ========================================================================== */

.lb-notmine {
  margin: 0 0 var(--s5);
  font-size: 14px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.lb-notmine__or { color: var(--ink-3); }

/* the three commitments, beside the button rather than in a policy page */
.lb-assure { margin: var(--s6) 0 0; border-top: 1px solid var(--rule); }
.lb-assure__r {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.lb-assure__r dt { margin: 0; }
.lb-assure__r dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* the sections below the fold */
.lb-psec {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--s8) var(--gut) 0;
}
.lb-psec .lb-shead { margin-bottom: var(--s6); }

/* the parts sheet, shared with the home page */
.lb-parts { border-top: 1px solid var(--ink); }
.lb-part {
  display: grid;
  grid-template-columns: 56px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--s5); align-items: baseline;
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-micro);
}
.lb-part:hover { background: var(--shot); }
.lb-part__n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.lb-part__h { margin: 0; }
.lb-part__m { color: var(--ink-3); }
.lb-part__p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

/* same-maker grid reuses the gallery card */
.lb-psec .lb-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }

@media (max-width: 1240px) {
  .lb-part { grid-template-columns: 44px minmax(0, 4fr) minmax(0, 8fr); }
  .lb-part__p { grid-column: 2 / -1; }
  .lb-psec .lb-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lb-psec { padding-top: var(--s7); }
  .lb-assure__r { grid-template-columns: 1fr; gap: 4px; }
  .lb-part { grid-template-columns: 36px 1fr; gap: var(--s2) var(--s4); }
  .lb-part__h, .lb-part__m, .lb-part__p { grid-column: 2; }
}
@media (max-width: 700px) {
  .lb-psec .lb-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
}


/* ==========================================================================
   26. PRODUCT PAGE CORRECTIONS
   ========================================================================== */

/* The new sections are children of `div.product`, which is a 7fr/5fr grid, so
   they were laying out inside the gallery column at 534px — "In the box"
   wrapped to three lines. They span the full row like the tabs do. */
html body.woocommerce div.product > .lb-psec,
html body.woocommerce div.product > .lb-spec { grid-column: 1 / -1; }

/* WooCommerce paints `.button.alt` with its own brand purple (#7f54b3). The
   add-to-cart is the page's primary action and it was the one element still
   wearing another product's colour. */
html body[class].woocommerce div.product .single_add_to_cart_button,
html body[class].woocommerce .button.alt,
html body[class] button.single_add_to_cart_button {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
html body[class].woocommerce div.product .single_add_to_cart_button:hover,
html body[class].woocommerce .button.alt:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* the description tab holds the business's own long copy — give it a measure */
html body.woocommerce div.product .woocommerce-tabs .panel > * { max-width: 74ch; }
html body.woocommerce div.product .woocommerce-tabs .panel img { max-width: min(100%, 420px); height: auto; }
html body.woocommerce div.product .woocommerce-tabs .panel h2,
html body.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-family: var(--disp); font-size: 22px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); margin: var(--s6) 0 var(--s3);
  text-transform: none;
}
html body.woocommerce div.product .woocommerce-tabs .panel ul { padding-left: 1.1em; margin: 0 0 var(--s5); }
html body.woocommerce div.product .woocommerce-tabs .panel li { margin-bottom: var(--s2); }


/* ==========================================================================
   27. BASKET AND CHECKOUT
   ========================================================================== */

.lb-steps {
  display: flex; align-items: center; gap: var(--s6);
  list-style: none; margin: 0 0 var(--s7); padding: 0 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}
.lb-steps__i {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
/* --rule-2 is a border token (#C9C1B4, 1.73:1) and must never carry text —
   the same slip as the ticker separators. --ink-3 is the floor. */
.lb-steps__n { color: var(--ink-3); }
.lb-steps__i.is-done { color: var(--ink-2); }
.lb-steps__i.is-done .lb-steps__n { color: var(--accent); }
.lb-steps__i.is-done a { color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.lb-steps__i.is-done a:hover { color: var(--accent); border-color: var(--accent); }
.lb-steps__i.is-now { color: var(--ink); }
.lb-steps__i.is-now .lb-steps__n { color: var(--accent); }

/* the shipping line, when there is nothing to show yet */
.lb-ship-wait, .lb-ship-none {
  display: block; font-family: var(--body); font-size: 13px;
  line-height: 1.6; color: var(--ink-2); text-align: right;
}
.lb-ship-none { color: var(--bad); }
.lb-ship-none a { color: var(--accent); border-bottom: 1px solid var(--rule-2); }
.lb-ship-note td { padding-top: 0 !important; border-top: 0 !important; }
.lb-ship-note .lb-lbl { color: var(--ok); }

@media (max-width: 700px) {
  .lb-steps { gap: var(--s5); flex-wrap: wrap; }
  .lb-ship-wait, .lb-ship-none { text-align: left; }
}

/* The checkout's own wrapper (.woocommerce) runs edge to edge, so the step
   rail, the form and the page heading each started at a different x. They all
   sit on the page measure now. */
html body.woocommerce-checkout .woocommerce,
html body.woocommerce-cart .woocommerce,
html body.woocommerce-account .woocommerce {
  max-width: var(--shell);
  margin-inline: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
html body.woocommerce-checkout .page-header,
html body.woocommerce-cart .page-header {
  max-width: var(--shell); margin-inline: auto;
  padding-left: var(--gut); padding-right: var(--gut);
}
html body.woocommerce-checkout .page-header .entry-title,
html body.woocommerce-checkout .page-header h1 { margin-left: 0; }

/* A standing guard: the two border tokens are not text colours. Anything that
   reaches for them to colour text lands on the contrast floor instead. */
html body[class] .lb-lbl,
html body[class] .lb-steps__n,
html body[class] .lb-shead__n { color: var(--ink-3); }
html body[class] .lb-shead__n { color: var(--accent); }


/* ==========================================================================
   28. THE TWO FLOATING WIDGETS, PROPERLY
   Both were half-fixed: recoloured but still structurally wrong.
   ========================================================================== */

/* --- chat ---------------------------------------------------------------- */
/* The button carries a "Contact us" label as a bare text node, so an earlier
   rule aimed at a <span> never hid it. At 10px inside a 54px circle it was
   cramped text on a disc. It is an icon button; the label is the aria-label. */
html body[class] #arcontactus .arcu-message-button {
  width: 56px !important;
  height: 56px !important;
  font-size: 0 !important;          /* silences the bare text node */
  line-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}
html body[class] #arcontactus .arcu-message-button svg,
html body[class] #arcontactus .arcu-message-button i,
html body[class] #arcontactus .arcu-message-button img {
  font-size: 22px !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* --- currency, sized once ------------------------------------------------ */
/* Collapsed, the panel shows the three-letter code and nothing else; the names
   appear when it opens.
   
   This is the ONLY place the panel's width and resting offset are set. They
   were previously declared in three separate blocks, and because this one
   carries body[class] it silently won every time — so tuning either of the
   others changed nothing at all.
   
   268 = 56px code column + 212px for the name. "United States (US) dollar" is
   the longest the store stocks and measures 202px at 12px, so it now fits
   instead of being cut mid-word by the panel's own overflow:hidden. The offset
   is -(width - 56) so the closed tab stays exactly the code column. */
html body[class] .woocommerce-multi-currency.wmc-sidebar {
  right: -224px !important;
  width: 280px !important;
}
/* The plugin's own rules for these are five classes deep, so anything written
   at the specificity used elsewhere in this file loses to them silently. That
   is why the row under the cursor was still the plugin's #f78080 salmon, and
   why the currency names sat centred — each row centring its own text, so no
   two lined up. */
/* The hover colour must skip the row that is already selected.
   
   The selected row is ink-on-paper reversed — a black band with pale text — and
   the hover rule set every descendant to ink. Hovering the currency you are
   already using therefore painted ink text onto an ink background: a contrast
   ratio of 1.00, the text simply gone. It is the row a returning visitor is
   most likely to point at, and it went unnoticed for as long as the audit only
   measured resting state.
   
   The selected row gets its own hover instead: the band lifts, the text stays
   pale. */
html body[class] .woocommerce-multi-currency.wmc-sidebar.style-1 .wmc-list-currencies .wmc-currency:not(.wmc-active):hover {
  background: var(--sand) !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar.style-1 .wmc-list-currencies .wmc-currency:not(.wmc-active):hover * {
  color: var(--ink) !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar.style-1 .wmc-list-currencies .wmc-currency.wmc-active:hover {
  background: var(--ink-2) !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar.style-1 .wmc-list-currencies .wmc-currency.wmc-active:hover * {
  color: var(--paper) !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar.style-1 .wmc-list-currencies .wmc-currency a {
  justify-content: flex-start !important;
  text-align: left !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar.style-1 .wmc-list-currencies .wmc-currency .wmc-currency-content-right {
  text-align: left !important;
  width: auto !important;
  flex: 1 1 auto !important;
}
/* The open state lives here too, and it has to.
   
   It used to be written as `html body …wmc-sidebar:hover`, which scores the
   same as the rule above but sits earlier in the file — so the resting offset
   won and the panel could not be opened at all. Anyone hovering the tab got
   nothing. */
html body[class] .woocommerce-multi-currency.wmc-sidebar:hover,
html body[class] .woocommerce-multi-currency.wmc-sidebar:focus-within {
  right: 0 !important;
}
/* The plugin pins each row to a literal 250px, so widening the panel alone
   left the name in the same too-narrow slot. The rows follow the panel. */
html body[class] .woocommerce-multi-currency.wmc-sidebar .wmc-list-currencies,
html body[class] .woocommerce-multi-currency.wmc-sidebar .wmc-list-currencies .wmc-currency {
  width: 100% !important;
}
/* the closed stub: code only, centred in its 56px */
html body[class] .woocommerce-multi-currency.wmc-sidebar .wmc-currency-content-left {
  width: 56px !important;
  flex: 0 0 56px !important;
  text-align: center !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar .wmc-currency-content-right {
  opacity: 0;
  transition: opacity var(--t-micro);
  white-space: nowrap;
  font-size: 12px !important;
  /* a safety net for any currency added later that is longer still: an
     ellipsis reads as deliberate where a hard cut reads as broken */
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar:hover .wmc-currency-content-right,
html body[class] .woocommerce-multi-currency.wmc-sidebar:focus-within .wmc-currency-content-right { opacity: 1; }
html body[class] .woocommerce-multi-currency.wmc-sidebar .wmc-currency a {
  padding: 0 !important;
  gap: 0 !important;
  min-height: 40px !important;
}
/* the title only makes sense once the panel is open */
html body[class] .woocommerce-multi-currency.wmc-sidebar .wmc-title {
  opacity: 0; transition: opacity var(--t-micro);
  padding: 12px 0 8px 14px !important; white-space: nowrap;
}
html body[class] .woocommerce-multi-currency.wmc-sidebar:hover .wmc-title,
html body[class] .woocommerce-multi-currency.wmc-sidebar:focus-within .wmc-title { opacity: 1; }

/* The chat label is a <p> four levels down —
   .arcu-message-button > .arcu-button-icon > .static > .static-container >
   .img-20 > p — which is why `font-size: 0` on the button and a rule aimed at
   a <span> both missed it. The inner icon stack is also a fixed 70px, so
   constraining only the button left a 70x56 lozenge rather than a circle. */
html body[class] #arcontactus .arcu-button-icon p { display: none !important; }
html body[class] #arcontactus .arcu-message-button,
html body[class] #arcontactus .arcu-button-icon,
html body[class] #arcontactus .arcu-button-icon .static,
html body[class] #arcontactus .arcu-button-icon .static-container {
  width: 56px !important;
  height: 56px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body[class] #arcontactus .arcu-button-icon .img-20 {
  width: auto !important; height: auto !important;
  display: flex !important; align-items: center; justify-content: center;
}
html body[class] #arcontactus .arcu-button-icon .img-20 svg {
  width: 24px !important; height: 24px !important; display: block !important;
}
/* the widget's own box was 70px wide, offsetting the circle */
html body[class] #arcontactus.arcu-widget { width: 56px !important; }

/* The chat widget's own forms ("Waiting for call", the email form) were never
   styled — only the bubble was. Their submit button computed to 1.08:1. They
   are real UI, so they join the theme's button and field language rather than
   being hidden. */
html body[class] #arcontactus .arcu-button,
html body[class] #arcontactus button.arcu-button {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--disp) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 46px !important;
  padding: 12px 20px !important;
  width: 100%;
}
html body[class] #arcontactus .arcu-button:hover { background: var(--accent) !important; border-color: var(--accent) !important; }
html body[class] #arcontactus .arcu-form-field {
  background: var(--paper) !important;
  border: 1px solid var(--rule-2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
}
html body[class] #arcontactus .arcu-form-label label,
html body[class] #arcontactus .arcu-form-header-content,
html body[class] #arcontactus .arcu-item-title,
html body[class] #arcontactus .arcu-form-success div,
html body[class] #arcontactus .arcu-form-error div { color: var(--ink) !important; }
html body[class] #arcontactus .arcu-field-errors,
html body[class] #arcontactus .arcu-form-field-errors { color: var(--bad) !important; }


/* ==========================================================================
   29. SHARED — the maker grid
   Used by the home page, the 404 and the search results, so like the facts
   strip it cannot live in front-page.css.
   ========================================================================== */
.lb-makers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.lb-makers a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--paper); padding: var(--s4) var(--s4);
  min-height: 60px; font-family: var(--disp); font-size: 14px; font-weight: 500;
  color: var(--ink); transition: background-color var(--t-micro), color var(--t-micro);
}
.lb-makers a:hover { background: var(--ink); color: var(--paper); }
.lb-makers__n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.lb-makers a:hover .lb-makers__n { color: var(--paper); }

/* --ink-3 is the contrast floor *on paper* (5.4:1). The shop's maker filter
   sits on the bone ground, where the same token is 4.08:1 — under the floor.
   The counts use --ink-2, which clears both grounds. */
html body[class] .lb-makers__n,
html body[class] .lb-brands__n { color: var(--ink-2); }
html body[class] .lb-makers a:hover .lb-makers__n,
html body[class] .lb-makers--filter button.is-on .lb-makers__n { color: var(--paper); }

/* The maker grid is six rigid columns, and it is declared here — after the
   shop filter's own rules — so `.lb-makers.lb-makers--filter` was inheriting
   `display: grid` and losing its flex layout entirely. Every filter chip was
   pinned to one sixth of the row (53px at 390px) while its label needed up to
   85px, so the names ran straight through their neighbours. The filter is a
   chip row at every width; this states that at a specificity the grid cannot
   overrule. */
html body[class] .lb-makers--filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  grid-template-columns: none;
  background: none; border: 0;
}
html body[class] .lb-makers--filter button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 900px) {
  /* one scrollable row, faded at the right edge to show it continues */
  html body[class] .lb-makers--filter {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
  html body[class] .lb-makers--filter::-webkit-scrollbar { display: none; }
  html body[class] .lb-makers--filter button { min-height: 44px; }
}

/* The grid itself had no responsive columns outside front-page.css, so on the
   404 and the search results — which use it too — it stayed at six columns
   down to 360px and the maker names collided there as well. */
@media (max-width: 1180px) { .lb-makers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .lb-makers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lb-makers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ==========================================================================
   30. THE CONTACT DOCK
   Replaces ar-contactus: 132 KB of CSS and 37 KB of JS for one button and two
   links. This is a <details> element — it opens with no JavaScript, takes
   focus and Esc for free, and weighs nothing.
   ========================================================================== */
.lb-dock {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 95;
}
.lb-dock__btn {
  list-style: none; cursor: pointer;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(23, 20, 15, .22);
  transition: background-color var(--t-micro), transform var(--t-micro);
  position: relative;
}
.lb-dock__btn::-webkit-details-marker { display: none; }
.lb-dock__btn:hover { background: var(--accent); transform: translateY(-2px); }
.lb-dock__btn svg { display: block; transition: opacity var(--t-micro); }

/* the button becomes a close affordance once open */
.lb-dock__x { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-micro); }
.lb-dock__x::before, .lb-dock__x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px;
  background: currentColor; transform-origin: center;
}
.lb-dock__x::before { transform: translate(-50%,-50%) rotate(45deg); }
.lb-dock__x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.lb-dock[open] .lb-dock__btn svg { opacity: 0; }
.lb-dock[open] .lb-dock__x { opacity: 1; }

.lb-dock__panel {
  position: absolute; right: 0; bottom: calc(56px + var(--s3));
  width: min(320px, calc(100vw - var(--s6)));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(23, 20, 15, .16);
  padding: var(--s5);
  animation: lb-dock-in 220ms var(--e-out) both;
}
@keyframes lb-dock-in { from { opacity: 0; transform: translateY(8px); } }
.lb-dock__h { display: block; margin-bottom: var(--s2); }
.lb-dock__note { margin: 0 0 var(--s4); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.lb-dock__i {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: 12px 0; border-top: 1px solid var(--rule);
  min-height: 46px;
}
.lb-dock__k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.lb-dock__v { font-size: 14px; color: var(--ink); text-align: right; }
.lb-dock__i:hover .lb-dock__v { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .lb-dock__panel { animation: none; }
}
@media (max-width: 700px) {
  .lb-dock { right: var(--s4); bottom: var(--s4); }
  /* `100vw` counts the scrollbar, so at a 320px window with a 15px scrollbar
     calc(100vw - 24px) resolved to 296px inside a 305px client area — and the
     panel, right-aligned 16px in from the edge, started at -7px.
     
     The allowance below covers the widest common scrollbar plus the dock's own
     inset, so the panel stays inside the viewport without needing a unit that
     knows about scrollbars — and it stays position:absolute, because a fixed
     panel escapes the collapsed <details> and shows when the dock is shut. */
  .lb-dock__panel { width: min(300px, calc(100vw - 60px)); }
}
/* the funnel stays clear */
body.woocommerce-checkout .lb-dock { display: none; }


/* ==========================================================================
   31. THE FIT CHECK
   The one question the product page exists to answer, made answerable in
   place. Its three states read differently on purpose — a confirmation, a
   redirection and an admission are not the same message.
   ========================================================================== */
.lb-fc {
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--bone);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-2);
  border-radius: var(--r-sm);
  transition: border-left-color var(--t-mid), background-color var(--t-mid);
}
.lb-fc__l { display: block; margin-bottom: var(--s2); }
.lb-fc__row { display: flex; align-items: center; }
html body[class] .lb-fc__row input[type="search"] {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  padding: 8px 0; min-height: 40px;
  font-family: var(--disp); font-size: 17px; font-weight: 500;
  letter-spacing: -.014em; color: var(--ink);
}
html body[class] .lb-fc__row input[type="search"]:focus { outline: none; border-bottom-color: var(--ink); }
html body[class] .lb-fc__row input::-webkit-search-cancel-button { display: none; }

.lb-fc__out { margin: var(--s3) 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); min-height: 1px; }
.lb-fc__out:empty { display: none; }
.lb-fc__out a { color: var(--accent); border-bottom: 1px solid var(--rule-2); }
.lb-fc__out strong { color: var(--ink); font-weight: 600; }

/* confirmation */
.lb-fc.is-yes { border-left-color: var(--ok); background: var(--paper); }
.lb-fc.is-yes .lb-fc__out { color: var(--ok); }
.lb-fc.is-yes .lb-fc__out strong { color: var(--ok); }
/* it fits something else */
.lb-fc.is-other { border-left-color: var(--accent); background: var(--paper); }
/* we do not make it yet */
.lb-fc.is-none { border-left-color: var(--bad); background: var(--paper); }
.lb-fc.is-none .lb-fc__out { color: var(--bad); }
.lb-fc.is-none .lb-fc__out a { color: var(--bad); }


/* ==========================================================================
   32. THE SHOP FLOW, RENDERED BY THE THEME
   Cart, checkout and account now render WooCommerce's own markup inside this
   theme's frame instead of Elementor Pro's widgets. The classic WooCommerce
   class names apply here (.shop_table, .cart_totals, .woocommerce-MyAccount-*)
   rather than e-cart-section / col-1, and Elementor no longer loads on any
   front-end route at all.
   ========================================================================== */
.lb-shoppage__in { padding-bottom: var(--s9); }
.lb-phead--tight { padding-bottom: var(--s6); margin-bottom: var(--s7); }

/* --- the cart table ------------------------------------------------------ */
html body[class] .lb-shoppage__in table.shop_table {
  width: 100%; border: 0; border-collapse: collapse; margin: 0 0 var(--s6);
  background: transparent;
}
html body[class] .lb-shoppage__in table.shop_table th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 0 var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--ink); background: transparent;
}
html body[class] .lb-shoppage__in table.shop_table td {
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule); background: transparent;
  vertical-align: middle;
}
html body[class] .lb-shoppage__in .product-thumbnail img {
  width: 76px; height: 76px; object-fit: contain;
  background: var(--shot); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
html body[class] .lb-shoppage__in td.product-name a {
  font-family: var(--disp); font-size: 15px; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
html body[class] .lb-shoppage__in td.product-name a:hover { color: var(--accent); }
html body[class] .lb-shoppage__in .product-price,
html body[class] .lb-shoppage__in .product-subtotal { font-family: var(--mono); font-size: 14px; }
html body[class] .lb-shoppage__in .product-subtotal { color: var(--ink); font-weight: 500; }
html body[class] .lb-shoppage__in td.actions { border-bottom: 0; padding-top: var(--s5); }
html body[class] .lb-shoppage__in .coupon { display: flex; gap: var(--s3); flex-wrap: wrap; }
html body[class] .lb-shoppage__in .coupon input[type="text"] { min-width: 220px; flex: 0 1 280px; }

/* --- totals -------------------------------------------------------------- */
html body[class] .lb-shoppage__in .cart-collaterals { display: flex; justify-content: flex-end; }
html body[class] .lb-shoppage__in .cart_totals {
  width: min(460px, 100%);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s5); background: var(--paper);
}
html body[class] .lb-shoppage__in .cart_totals h2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink);
}
html body[class] .lb-shoppage__in .cart_totals table th,
html body[class] .lb-shoppage__in .cart_totals table td {
  border-bottom: 1px solid var(--rule); padding: var(--s3) 0;
}
html body[class] .lb-shoppage__in .cart_totals .order-total td { font-size: 20px; font-weight: 600; color: var(--ink); }
html body[class] .lb-shoppage__in .wc-proceed-to-checkout { padding: var(--s5) 0 0; }

/* --- checkout ------------------------------------------------------------ */
html body[class] .lb-shoppage__in form.checkout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s8); align-items: start;
}
html body[class] .lb-shoppage__in #customer_details { grid-column: 1; }
html body[class] .lb-shoppage__in #order_review_heading,
html body[class] .lb-shoppage__in #order_review { grid-column: 2; }
html body[class] .lb-shoppage__in #order_review_heading {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s4);
}
html body[class] .lb-shoppage__in #order_review {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s5); background: var(--paper); position: sticky; top: 96px;
}
html body[class] .lb-shoppage__in .woocommerce-billing-fields h3,
html body[class] .lb-shoppage__in .woocommerce-shipping-fields h3,
html body[class] .lb-shoppage__in .woocommerce-additional-fields h3 {
  font-family: var(--disp); font-size: 19px; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); margin: 0 0 var(--s4); text-transform: none;
}
html body[class] .lb-shoppage__in .form-row { margin: 0 0 var(--s4); padding: 0; }
html body[class] .lb-shoppage__in .form-row label {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
html body[class] .lb-shoppage__in .form-row .required { color: var(--accent); }
html body[class] .lb-shoppage__in .select2-container--default .select2-selection--single {
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-sm); height: 50px;
}
html body[class] .lb-shoppage__in .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px; color: var(--ink); padding-left: 14px;
}
html body[class] .lb-shoppage__in .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

/* --- account ------------------------------------------------------------- */
html body[class] .lb-shoppage__in .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0 0 var(--s6); padding: 0;
  display: flex; flex-wrap: wrap; gap: 1px;
  border-bottom: 1px solid var(--rule);
}
html body[class] .lb-shoppage__in .woocommerce-MyAccount-navigation li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 2px solid transparent;
}
html body[class] .lb-shoppage__in .woocommerce-MyAccount-navigation li a:hover { color: var(--ink); }
html body[class] .lb-shoppage__in .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ink); border-bottom-color: var(--ink);
}
html body[class] .lb-shoppage__in .woocommerce-MyAccount-content { max-width: 74ch; }
html body[class] .lb-shoppage__in form.woocommerce-form-login,
html body[class] .lb-shoppage__in form.register {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s6); max-width: 460px; background: var(--paper);
}

@media (max-width: 1100px) {
  html body[class] .lb-shoppage__in form.checkout { grid-template-columns: 1fr; gap: var(--s6); }
  html body[class] .lb-shoppage__in #customer_details,
  html body[class] .lb-shoppage__in #order_review_heading,
  html body[class] .lb-shoppage__in #order_review { grid-column: 1; }
  html body[class] .lb-shoppage__in #order_review { position: static; }
}
@media (max-width: 768px) {
  html body[class] .lb-shoppage__in table.shop_table thead { display: none; }
  html body[class] .lb-shoppage__in table.shop_table tr.woocommerce-cart-form__cart-item {
    display: grid; grid-template-columns: 76px 1fr;
    grid-template-areas: "thumb name" "thumb price" "thumb qty" "sub sub";
    gap: 6px var(--s4); align-items: center; position: relative;
    padding: var(--s4) 0; border-bottom: 1px solid var(--rule);
  }
  html body[class] .lb-shoppage__in table.shop_table td {
    border: 0; padding: 2px 0; display: flex; align-items: center; gap: 8px; text-align: left;
  }
  html body[class] .lb-shoppage__in td.product-thumbnail { grid-area: thumb; display: block; }
  html body[class] .lb-shoppage__in td.product-name { grid-area: name; }
  html body[class] .lb-shoppage__in td.product-price { grid-area: price; }
  html body[class] .lb-shoppage__in td.product-quantity { grid-area: qty; }
  html body[class] .lb-shoppage__in td.product-subtotal {
    grid-area: sub; justify-content: space-between;
    padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--rule);
  }
  html body[class] .lb-shoppage__in td.product-remove { position: absolute; top: 8px; right: 0; padding: 0; }
  html body[class] .lb-shoppage__in table.shop_table td::before {
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  html body[class] .lb-shoppage__in .cart-collaterals { justify-content: stretch; }
  html body[class] .lb-shoppage__in .cart_totals { width: 100%; }
}


/* ==========================================================================
   33. TWO REGRESSIONS FROM MOVING THE SHOP FLOW OFF ELEMENTOR
   ========================================================================== */

/* WooCommerce's own `shop_table_responsive` layout fights the grid rows this
   theme uses at phone width: the table kept table-layout sizing, so it
   measured 368px starting at the 48px gutter and pushed the document to
   416px inside a 390px viewport. Making the table and its sections block-level
   lets the rows own their own width. */
@media (max-width: 768px) {
  html body[class] .lb-shoppage__in table.shop_table,
  html body[class] .lb-shoppage__in table.shop_table tbody,
  html body[class] .lb-shoppage__in table.shop_table tfoot {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  html body[class] .lb-shoppage__in table.shop_table tr { box-sizing: border-box; max-width: 100%; }
  html body[class] .lb-shoppage__in table.shop_table td { min-width: 0; box-sizing: border-box; }
  html body[class] .lb-shoppage__in td.product-name { min-width: 0; }
  html body[class] .lb-shoppage__in td.product-name a { overflow-wrap: anywhere; }
  html body[class] .lb-shoppage__in td.actions { display: block; }
}

/* The payment box keeps WooCommerce's default lavender (#dcd7e2). Stripe's
   "Save to account" label sat on it at 3.94:1 — under the floor. The earlier
   rule was scoped to the Elementor markup and no longer reaches this one. */
html body[class] .lb-shoppage__in .payment_box,
html body[class] .lb-shoppage__in ul.payment_methods li > .payment_box,
html body[class] .woocommerce-checkout .payment_box {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
html body[class] .lb-shoppage__in .payment_box::before,
html body[class] .woocommerce-checkout .payment_box::before {
  border-bottom-color: var(--bone);
}
html body[class] .lb-shoppage__in .payment_box label,
html body[class] .lb-shoppage__in .payment_box p,
html body[class] .woocommerce-checkout .payment_box label,
html body[class] .woocommerce-checkout .payment_box p {
  color: var(--ink-2);
  text-transform: none;
  font-family: var(--body);
  font-size: 14px;
  letter-spacing: 0;
}
html body[class] .lb-shoppage__in ul.payment_methods {
  list-style: none; margin: 0 0 var(--s5); padding: 0;
  border: 1px solid var(--rule); border-radius: var(--r-md);
}
html body[class] .lb-shoppage__in ul.payment_methods > li {
  padding: var(--s4); border-bottom: 1px solid var(--rule);
}
html body[class] .lb-shoppage__in ul.payment_methods > li:last-child { border-bottom: 0; }
html body[class] .lb-shoppage__in ul.payment_methods > li > label {
  font-family: var(--body); font-size: 15px; letter-spacing: 0;
  text-transform: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
html body[class] .lb-shoppage__in .woocommerce-terms-and-conditions-wrapper {
  margin-top: var(--s4); font-size: 14px; color: var(--ink-2);
}
html body[class] .lb-shoppage__in .woocommerce-terms-and-conditions-wrapper a { color: var(--accent); }


/* The cart's actions row holds the coupon field and the update button side by
   side. At 390px the button started at x=280 and ran to 416 — the last thing
   pushing the document past the viewport. They stack, and both take the full
   width rather than being left to find their own. */
@media (max-width: 768px) {
  html body[class] .lb-shoppage__in td.actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    padding-left: 0;
    padding-right: 0;
  }
  html body[class] .lb-shoppage__in td.actions .coupon {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    width: 100%;
    float: none;
  }
  html body[class] .lb-shoppage__in td.actions .coupon input[type="text"],
  html body[class] .lb-shoppage__in td.actions .coupon .button,
  html body[class] .lb-shoppage__in td.actions > .button,
  html body[class] .lb-shoppage__in td.actions button[name="update_cart"] {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    float: none;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   34. CART TABLE, FINISHED
   WooCommerce draws a full border box on .shop_table cells. Setting only
   border-bottom left its left, right and top edges in place, so the cart read
   as a spreadsheet rather than a ruled list.
   ========================================================================== */
html body[class] .lb-shoppage__in table.shop_table,
html body[class] .lb-shoppage__in table.shop_table th,
html body[class] .lb-shoppage__in table.shop_table td {
  border: 0;
  border-radius: 0;
}
html body[class] .lb-shoppage__in table.shop_table th {
  border-bottom: 1px solid var(--ink);
}
html body[class] .lb-shoppage__in table.shop_table td {
  border-bottom: 1px solid var(--rule);
}
html body[class] .lb-shoppage__in table.shop_table td.actions { border-bottom: 0; }

/* the remove control ships as WooCommerce red on a white disc */
html body[class] .lb-shoppage__in a.remove {
  color: var(--ink-3);
  background: transparent;
  font-size: 20px; line-height: 1;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color var(--t-micro), background-color var(--t-micro);
}
html body[class] .lb-shoppage__in a.remove:hover {
  color: var(--bad);
  background: var(--sand);
}

/* the quantity field */
html body[class] .lb-shoppage__in .quantity input.qty {
  width: 72px; text-align: center; min-height: 44px;
}

/* An empty basket needs a full page opening; a full one does not — the table
   is the content, so the header stands back. */
html body.woocommerce-cart .lb-phead { padding-top: var(--s7); padding-bottom: var(--s6); margin-bottom: var(--s6); }
html body.woocommerce-cart .lb-phead__h { font-size: clamp(34px, 4.6vw, 64px); }


/* ==========================================================================
   35. WOOCOMMERCE'S OWN BUTTON AND LINK COLOURS
   Measured on the rebuilt cart: the secondary buttons rendered #E9E6ED with
   #515151 text (WooCommerce's default grey-lavender) and the remove control
   #AA0000. The theme's button rules are scoped to `body.woocommerce a.button`
   and lost to WooCommerce's own more specific selectors in this markup.
   ========================================================================== */
html body[class] .lb-shoppage__in .button,
html body[class] .lb-shoppage__in button.button,
html body[class] .lb-shoppage__in input.button,
html body[class] .lb-shoppage__in button[type="submit"] {
  background-color: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  min-height: 50px;
  padding: 14px 24px;
  line-height: 1.2;
  transition: background-color var(--t-micro), border-color var(--t-micro), opacity var(--t-micro);
}
html body[class] .lb-shoppage__in .button:hover,
html body[class] .lb-shoppage__in button.button:hover,
html body[class] .lb-shoppage__in button[type="submit"]:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* Update basket is secondary — and disabled until something changes, which
   the default styling gave no way to tell. */
html body[class] .lb-shoppage__in button[name="update_cart"],
html body[class] .lb-shoppage__in input[name="update_cart"] {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
html body[class] .lb-shoppage__in button[name="update_cart"]:hover {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
html body[class] .lb-shoppage__in button[name="update_cart"]:disabled,
html body[class] .lb-shoppage__in button[name="update_cart"][disabled] {
  opacity: .4;
  cursor: default;
}

/* the remove control ships as #AA0000 */
html body[class] .lb-shoppage__in a.remove,
html body[class] .lb-shoppage__in td.product-remove a.remove {
  color: var(--ink-3);
  background: transparent;
  text-decoration: none;
}
html body[class] .lb-shoppage__in a.remove:hover,
html body[class] .lb-shoppage__in td.product-remove a.remove:hover {
  color: var(--bad);
  background: var(--sand);
}

/* the coupon field should not stretch to the button's height rules */
html body[class] .lb-shoppage__in .coupon input[type="text"] {
  min-height: 50px;
  font-family: var(--body);
  font-size: 15px;
}

/* the cart's left column is empty below the actions row; pull the totals up
   beside it rather than leaving a hole */
@media (min-width: 901px) {
  html body.woocommerce-cart .lb-shoppage__in .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s8);
    align-items: start;
  }
  html body.woocommerce-cart .lb-shoppage__in .woocommerce > .woocommerce-notices-wrapper,
  html body.woocommerce-cart .lb-shoppage__in .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
  html body.woocommerce-cart .lb-shoppage__in .woocommerce > .cart-collaterals { grid-column: 2; }
  html body.woocommerce-cart .lb-shoppage__in .cart-collaterals { display: block; }
  html body.woocommerce-cart .lb-shoppage__in .cart_totals { width: 100%; position: sticky; top: 96px; }
}


/* WooCommerce sets `a.remove { color: var(--wc-red) !important }` and
   `a.remove:hover { color: #fff !important }`. Nothing without !important can
   reach it, which is why two earlier attempts left the control red. */
html body[class] .lb-shoppage__in a.remove,
html body[class] .lb-shoppage__in td.product-remove a.remove { color: var(--ink-3) !important; }
html body[class] .lb-shoppage__in a.remove:hover,
html body[class] .lb-shoppage__in td.product-remove a.remove:hover {
  color: var(--bad) !important;
  background: var(--sand) !important;
}


/* ==========================================================================
   36. ORDER RECEIVED
   The post-purchase page. Three plain statements of what happens next, then
   WooCommerce's own order detail underneath.
   ========================================================================== */
.lb-next {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  margin-bottom: var(--s8); overflow: hidden;
}
.lb-next__i { background: var(--paper); padding: var(--s5); }
.lb-next__n { display: block; color: var(--accent); margin-bottom: var(--s3); }
.lb-next__i h2 { margin: 0 0 var(--s3); }
.lb-next__i p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }

.lb-order .woocommerce-order-overview,
.lb-order ul.order_details {
  list-style: none; margin: 0 0 var(--s7); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
.lb-order ul.order_details li {
  background: var(--paper); padding: var(--s4) var(--s5); margin: 0; border: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.lb-order ul.order_details li strong {
  display: block; margin-top: 6px;
  font-family: var(--disp); font-size: 17px; font-weight: 600;
  letter-spacing: -.012em; text-transform: none; color: var(--ink);
}
.lb-order .woocommerce-thankyou-order-received { display: none; }
.lb-order h2 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--ink);
  margin: var(--s7) 0 var(--s4);
}

@media (max-width: 900px) {
  .lb-next { grid-template-columns: 1fr; }
}


/* ==========================================================================
   37. POLICY PAGES
   Privacy, Terms, Shipping & Returns. A policy is read, not skimmed, so the
   measure is narrow, the section marks sit outside it in the margin, and the
   sibling policies are always one click away at the foot.
   ========================================================================== */
.lb-legal__h { max-width: 16ch; }

.lb-legal__meta {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink-3); font-family: var(--mono); font-size: 13px;
}

.lb-legal__body { margin-top: var(--s7); }

.lb-legal__s {
  display: grid; grid-template-columns: 220px minmax(0, 68ch);
  gap: var(--s6); align-items: start;
  padding: var(--s7) 0; border-top: 1px solid var(--rule);
}
.lb-legal__s:first-child { border-top: 0; padding-top: 0; }

.lb-legal__sh { margin: var(--s2) 0 0; }

/* A section with no heading of its own still keeps the reading column, so the
   measure never jumps between blocks. */
.lb-legal__s > .lb-legal__t:only-child { grid-column: 2; }

.lb-legal__t > p {
  margin: 0 0 var(--s4);
  font-size: 17px; line-height: 1.75; color: var(--ink-2);
}
.lb-legal__t > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- shipping zones - */
/* Built from the pairs the policy already states: a zone, its terms, and the
   estimate that follows it. */
.lb-zones { margin: var(--s5) 0 0; }
.lb-zones__r {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s5); padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}
.lb-zones__r:last-child { border-bottom: 1px solid var(--rule); }
.lb-zones__z {
  margin: 0; font-family: var(--disp); font-size: 18px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
}
.lb-zones__d { margin: 0; }
.lb-zones__terms { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.lb-zones__eta {
  display: flex; align-items: baseline; gap: var(--s3);
  margin: var(--s3) 0 0; font-size: 15px; color: var(--ink-2);
}

/* --------------------------------------------------- the other policies - */
.lb-legal__moreh { margin: 0 0 var(--s4); }
.lb-legal__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.lb-legal__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 78px; padding: var(--s4) var(--s5);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-family: var(--disp); font-size: 20px; font-weight: 500; letter-spacing: -.01em;
  transition: border-color var(--t-micro), color var(--t-micro), transform var(--t-micro);
}
.lb-legal__link:hover { border-color: var(--ink); color: var(--accent); transform: translateY(-2px); }
.lb-legal__link svg { flex: none; transition: transform var(--t-micro); }
.lb-legal__link:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .lb-legal__h { max-width: none; }
  .lb-legal__s { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s6) 0; }
  .lb-legal__s > .lb-legal__t:only-child { grid-column: 1; }
  .lb-zones__r { grid-template-columns: 1fr; gap: var(--s2); }
  .lb-legal__links { grid-template-columns: 1fr; }
  .lb-legal__link { min-height: 66px; font-size: 18px; }
  .lb-legal__t > p { font-size: 16px; }
}

/* A zone the copy does not name keeps the reading column rather than printing
   an empty term. */
.lb-zones__r--noterm { grid-template-columns: 1fr; }
.lb-zones__r--noterm .lb-zones__z { display: none; }


/* ==========================================================================
   38. CHECKOUT WIDTH — the compounding-gutter fix
   Measured at 390px: .lb-wrap gave 24px of gutter, then .woocommerce added
   another 24px inside it, then the payment list 17px, each payment method
   16px, and the payment box a further 15.6px. Five nested paddings turned a
   375px viewport into a 113px Stripe field — narrow enough that Stripe laid
   "Card Number", "MM / YY" and "CVC" on top of one another.

   The outer rule that adds the second gutter was written when .woocommerce
   still ran edge to edge; the theme's own cart/checkout/account templates put
   it inside .lb-wrap, so it has been doubling ever since.
   ========================================================================== */
html body[class] .lb-shoppage__in > .woocommerce {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* A child may not be wider than the form it sits in. */
html body[class] .lb-shoppage__in form.checkout > *,
html body[class] .lb-shoppage__in #order_review,
html body[class] .lb-shoppage__in .woocommerce-checkout-review-order {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 620px) {
  /* The remaining nested paddings, trimmed so the payment field keeps its
     width. These are em-based in WooCommerce and Stripe's own CSS, so they are
     named by their real classes and forced — `ul.payment_methods` alone lost. */
  html body[class] .lb-shoppage__in ul.wc_payment_methods,
  html body[class] .lb-shoppage__in ul.payment_methods {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  html body[class] .lb-shoppage__in ul.wc_payment_methods > li,
  html body[class] .lb-shoppage__in ul.payment_methods > li {
    padding-left: 12px !important; padding-right: 12px !important;
  }
  html body[class] .lb-shoppage__in .payment_box,
  html body[class] .lb-shoppage__in .payment_box.payment_method_stripe_cc,
  html body[class] .woocommerce-checkout .payment_box,
  html body[class] .woocommerce-checkout .payment_box.payment_method_stripe_cc {
    padding-left: 12px !important; padding-right: 12px !important;
  }
  html body[class] .lb-shoppage__in #order_review { padding-left: 14px; padding-right: 14px; }
}


/* ==========================================================================
   39. THE CONSENT BAR MUST NOT SIT ON TOP OF THE PAGE
   #lesbrew-consent is fixed to the bottom at z-index 99999 and is 147px tall
   at 390px. Measured on the checkout it was covering a billing input and, on a
   shorter viewport, the Place order button itself — the one control the page
   exists for. A fixed bar has to reserve its own space rather than borrow the
   bottom of the document.

   The reserve is keyed to the bar actually being on screen, so it disappears
   the moment the visitor accepts or declines.
   ========================================================================== */
body:has(#lesbrew-consent.is-visible) { padding-bottom: 190px; }
@media (min-width: 700px) {
  body:has(#lesbrew-consent.is-visible) { padding-bottom: 130px; }
}

/* --------------------------------------------------- the consent to terms - */
/* A statement someone is agreeing to should be set to be read. This one was
   inheriting the form-row label treatment — 10px mono, uppercase, 1.6px
   tracking — which is the right texture for a field label and the wrong one
   for the sentence that carries the legal weight. */
html body[class] .lb-shoppage__in .woocommerce-terms-and-conditions-wrapper label,
html body[class] .lb-shoppage__in .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
html body[class] .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
html body[class] .woocommerce-terms-and-conditions-wrapper a {
  color: var(--accent);
  border-bottom: 1px solid var(--rule-2);
}


/* ------------------------------------------------- currency, in the drawer - */
/* The floating switcher is hidden below 900px, so this is the only currency
   control a phone gets. Plain links, so they work with JavaScript off. */
.lb-drawer__cur { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.lb-drawer__curh { margin: 0 0 var(--s4); }
.lb-cur { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
html body[class] .lb-cur__i {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 58px; padding: 0 12px;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-2); background: transparent;
  transition: border-color var(--t-micro), color var(--t-micro), background-color var(--t-micro);
}
html body[class] .lb-cur__i:hover { border-color: var(--ink); color: var(--ink); }
html body[class] .lb-cur__i.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}


/* ==========================================================================
   40. THE DEFAULT PAGE, AND PROSE
   Eighteen published pages carry plain post_content and no bespoke template.
   Before page.php existed they fell through to the parent theme's index.php
   and rendered flush to the viewport edge with no measure at all. .lb-prose is
   the generic reading treatment for content this theme did not author and
   cannot predict.
   ========================================================================== */
.lb-doc__h { max-width: 20ch; }
.lb-doc__body { margin-top: var(--s7); }

.lb-prose { max-width: 72ch; }
.lb-prose > * { margin: 0 0 var(--s4); }
.lb-prose > *:last-child { margin-bottom: 0; }

.lb-prose p,
.lb-prose li {
  font-size: 17px; line-height: 1.75; color: var(--ink-2);
}
.lb-prose h2 {
  font-family: var(--disp); font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); margin: var(--s7) 0 var(--s3); text-transform: none; line-height: 1.2;
}
.lb-prose h3 {
  font-family: var(--disp); font-size: 20px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); margin: var(--s6) 0 var(--s3); text-transform: none; line-height: 1.3;
}
.lb-prose h4, .lb-prose h5, .lb-prose h6 {
  font-family: var(--disp); font-size: 17px; font-weight: 600;
  color: var(--ink); margin: var(--s5) 0 var(--s2); text-transform: none;
}
.lb-prose h2:first-child, .lb-prose h3:first-child { margin-top: 0; }

.lb-prose ul, .lb-prose ol { padding-left: 1.35em; margin-bottom: var(--s4); }
.lb-prose li { margin-bottom: 6px; }
.lb-prose li::marker { color: var(--ink-3); }

html body[class] .lb-prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--rule-2);
}
html body[class] .lb-prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lb-prose strong { color: var(--ink); font-weight: 600; }
.lb-prose em { font-style: italic; }

.lb-prose blockquote {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 2px solid var(--accent); background: var(--bone);
  font-size: 17px; line-height: 1.7; color: var(--ink-2);
}
.lb-prose hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }
.lb-prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* a table in content this theme did not author still must not push the page */
.lb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.lb-prose th, .lb-prose td {
  text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.lb-prose th { color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

.lb-doc__meta {
  display: flex; align-items: baseline; gap: var(--s3);
  margin: var(--s7) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink-3); font-family: var(--mono); font-size: 13px;
}

@media (max-width: 900px) {
  .lb-doc__h { max-width: none; }
  .lb-prose p, .lb-prose li { font-size: 16px; }
  .lb-prose h2 { font-size: 22px; }
  .lb-prose h3 { font-size: 18px; }
}