/* ============================================================
   SoBotz — WooCommerce + template-specific styles
   Styles WooCommerce's generated markup + the Lessons / Builds /
   article / shop layouts that were page-local in the mockups.
   ============================================================ */

/* ---------- shared page chrome ---------- */
.site-content{ min-height:50vh; }
.skip-link{ position:absolute; left:-999px; }
.skip-link:focus{ left:12px; top:12px; z-index:300; background:var(--teal); color:var(--btn-ink); padding:8px 14px; border-radius:6px; }
.custom-logo{ height:30px; width:auto; }
.foot .custom-logo{ height:30px; }
.av-img{ border-radius:50%; }

/* catnav items from wp_nav_menu come as <li><a> */
.catnav ul{ display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
.catnav li{ list-style:none; }
.catnav .current-menu-item > a,
.catnav .current_page_item > a{ color:var(--teal-text); background:var(--teal-ink); }

/* ---------- hero (front page) ---------- */
.hero{ border-bottom:1px solid var(--line-soft); background:radial-gradient(900px 300px at 12% -10%, var(--teal-glow), transparent 70%); }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:42px 28px; }
.hero h1{ font-family:var(--display); font-size:clamp(34px,4.4vw,56px); font-weight:700; letter-spacing:-0.03em; line-height:1.0; }
.hero h1 em{ font-style:normal; color:var(--teal-text); }
.hero p{ color:var(--text-dim); font-size:16px; max-width:42ch; margin:18px 0 26px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.trust{ display:flex; gap:26px; margin-top:30px; }
.trust div{ display:flex; flex-direction:column; gap:3px; }
.trust b{ font-family:var(--display); font-size:22px; color:var(--text); }
.trust span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.spot{ background:var(--bg-1); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:8px; position:relative; overflow:hidden; }
/* ---- spotlight carousel (up to 4 slides, Customizer → SoBotz — Homepage) ----
   Slides are stacked and cross-faded rather than scrolled sideways: the card
   keeps the height of the tallest slide, so the hero never jumps as it turns. */
/* Two rows: the stacked slides, then the dots. The dots used to sit ON the
   card (grid-area 1/1, aligned to the bottom) where they landed on the
   spec line — a row of their own costs 20px and cannot overlap anything. */
.spot--carousel{ display:grid; grid-template-rows:1fr auto; }
.spot--carousel > .spot-slide{ grid-row:1; grid-column:1; opacity:0; visibility:hidden; transition:opacity .45s ease; }
.spot--carousel > .spot-slide.is-on{ opacity:1; visibility:visible; }
.spot-dots{ grid-row:2; grid-column:1; justify-self:center; display:flex; gap:7px; padding:10px 0 4px; }
.spot-dot{
  position:relative;
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.42); border:1px solid rgba(0,0,0,.18);
  transition:.18s ease;
}
/* an 8px dot is a 8px target on a phone. The dot keeps its size; the button
   gets a 24px one centred on it, which stays inside the dots row (8px of
   padding above, the card's own padding below) so it cannot swallow a click
   meant for the slide's CTA. */
.spot-dot::before{
  content:''; position:absolute; left:50%; top:50%;
  width:24px; height:24px; transform:translate(-50%,-50%);
}
.spot-dot:hover{ background:#fff; }
.spot-dot.is-on{ background:var(--teal); border-color:var(--teal); width:20px; border-radius:100px; }
.spot-dot:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .spot--carousel > .spot-slide{ transition:none; }
}
.spot-media{ aspect-ratio:16/11; border-radius:12px; overflow:hidden; background:var(--bg-2); position:relative; }
.spot-media img{ width:100%; height:100%; object-fit:cover; }
.spot-tag{ position:absolute; top:14px; left:14px; }
.spot-info{ padding:16px 14px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.spot-info h3{ font-family:var(--display); font-size:19px; font-weight:600; }
.spot-info .spec{ font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-top:7px; }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.sec-head .ttl{ display:flex; flex-direction:column; gap:10px; }

.feat{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feat-card{ background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:12px; transition:.18s ease; min-height:178px; }
.feat-card:hover{ border-color:var(--teal); background:var(--bg-2); }
.feat-card h4{ font-family:var(--display); font-size:18px; font-weight:600; }
.feat-card p{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:0; flex:1; }
.feat-card .arrow{ font-family:var(--mono); font-size:13px; color:var(--text-faint); }
.feat-card:hover .arrow{ color:var(--teal-text); }

/* ============================================================
   WOOCOMMERCE — shop / archive
   ============================================================ */
.shop{ display:grid; grid-template-columns:252px minmax(0,1fr); gap:34px; padding:30px 0 0; align-items:start; }
.shop--single{ display:block; padding-top:24px; }
.side{ position:sticky; top:140px; width:252px; display:flex; flex-direction:column; gap:26px; }
.side .fgroup h4{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin:0 0 12px; font-weight:500; }
.fopt{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:transparent; color:var(--text-dim); font-family:var(--body); font-size:14px; padding:9px 12px; border-radius:var(--r-sm); transition:.14s; border:1px solid transparent; }
.fopt:hover{ color:var(--text); background:var(--bg-1); }
/* the active filter is teal text on the pale teal surface — that pairing needs
   the darker text teal (the palette teal measured 3.04:1 here in light mode) */
.fopt.on{ color:var(--teal-text); background:var(--teal-ink); border-color:var(--teal-deep); }
.fopt .ct{ font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.fopt.on .ct{ color:var(--teal-text); }
.side-divider{ height:1px; background:var(--line-soft); }
.shop-main{ min-width:0; }

/* category filter: a sidebar block on desktop, a dropdown on mobile (set in @900) */
.catfilter{ position:relative; }
.catfilter-toggle{ display:none; }
.catfilter-toggle .caret{ width:16px; height:16px; flex:0 0 auto; transition:.18s ease; }
.catfilter.open .catfilter-toggle .caret{ transform:rotate(180deg); }

/* widgets dropped into the shop sidebar */
.side .widget{ border:none; padding:0; }
.side .widget .widget-title, .side .widget h4{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin:0 0 12px; font-weight:500; }
.side .widget ul{ list-style:none; margin:0; padding:0; }
.side .widget li{ padding:6px 0; font-size:14px; color:var(--text-dim); }
.side .widget a{ color:var(--text-dim); }
.side .widget a:hover{ color:var(--teal-text); }
.side .price_slider_amount .button{ background:var(--teal); color:var(--btn-ink); border:none; border-radius:var(--r-sm); font-family:var(--mono); font-size:12px; padding:8px 14px; }
.side .ui-slider{ background:var(--bg-3); border-radius:10px; height:5px; }
.side .ui-slider .ui-slider-range{ background:var(--teal); }
.side .ui-slider .ui-slider-handle{ background:var(--teal); border:2px solid var(--bg); border-radius:50%; width:14px; height:14px; }

.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.woocommerce-result-count{ font-family:var(--mono); font-size:13px; color:var(--text-dim); margin:0; }
.woocommerce-ordering select, .orderby{ background:var(--bg-1); border:1px solid var(--line-soft); color:var(--text); font-family:var(--mono); font-size:13px; padding:9px 12px; border-radius:var(--r-sm); cursor:pointer; }
.woocommerce-ordering select:focus{ border-color:var(--teal); }

/* product grid: WooCommerce outputs ul.products > li.product */
/* column counts come from Customizer → SoBotz — Shop & archive pages
   (--cols-pc / --cols-mob, printed inline by functions.php) */
ul.products{ display:grid; grid-template-columns:repeat(var(--cols-pc,4),minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.grid-products ul.products,
.home ul.products{ grid-template-columns:repeat(var(--cols-pc,4),minmax(0,1fr)); }
.shop-main ul.products{ grid-template-columns:repeat(var(--cols-pc,4),minmax(0,1fr)); }
/* kill WooCommerce's clearfix pseudo-elements — on a CSS grid they steal the
   first/last cell, which is the "empty first product" you saw. Needs !important
   because WooCommerce's own .woocommerce ul.products::before wins on specificity. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after{ content:none !important; display:none !important; }
ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; }
/* a stray empty <li> (whatever injected it) must never hold a grid cell */
ul.products > li:empty{ display:none !important; }

/* honour WooCommerce's columns-N class on shortcode/related grids.
   :where() keeps specificity low so the shop-sidebar auto-fit grid and the
   responsive breakpoints below still win where they apply. */
ul.products:where(.columns-2){ grid-template-columns:repeat(2,1fr); }
ul.products:where(.columns-3){ grid-template-columns:repeat(3,1fr); }
ul.products:where(.columns-4){ grid-template-columns:repeat(4,1fr); }
ul.products:where(.columns-5){ grid-template-columns:repeat(5,1fr); }

/* subcategory tiles (Customizer → Product Catalog → "Show categories") used to
   render as a bare/empty-looking first cell — style them as proper cards */
ul.products li.product-category{ background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:.2s ease; }
ul.products li.product-category:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
ul.products li.product-category a{ display:flex; flex-direction:column; }
ul.products li.product-category img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin:0; }
ul.products li.product-category h2,
ul.products li.product-category .woocommerce-loop-category__title{ font-family:var(--display); font-size:16px; font-weight:500; color:var(--text); padding:14px 15px 16px; margin:0; }
ul.products li.product-category .count{ background:none; color:var(--text-faint); font-family:var(--mono); font-size:12px; }

/* our card is the <li> itself (see content-product.php) */
li.product.card{ position:relative; display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:.2s ease; }
li.product.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -20px rgba(0,0,0,.7); }
li.product .card-media{ aspect-ratio:4/3; }
li.product .card-media img{ width:100%; height:100%; object-fit:cover; margin:0; }

/* card footer: price on top, full-width add-to-cart below (fits any WooCommerce label) */
.card-foot{ margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:12px; padding-top:12px; }
.card-foot .price{ font-family:var(--mono); font-weight:600; font-size:16px; }
/* loop add-to-cart: always a full-width button whose label never wraps.
   !important + high specificity defeat the .add-btn icon-button + WooCommerce defaults. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.card-foot .button,
.card-foot a.button,
.card-foot a.card-add,
.card-foot a.add_to_cart_button,
.card-foot a.button.product_type_variable,
.card-foot a.button.product_type_external,
.card-foot a.button.product_type_grouped{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  width:100% !important; height:auto; min-height:44px; margin:0 !important; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--bg-3); border:1px solid var(--line-strong); color:var(--text);
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.02em; line-height:1.25;
  /* wrap instead of overflow — long labels ("Select options", translations)
     go to a second line rather than spilling out of the button */
  white-space:normal; text-align:center; transition:.16s ease; box-shadow:none;
}
.woocommerce ul.products li.product .button:hover,
.card-foot .button:hover,
.card-foot a.card-add:hover,
.card-foot a.add_to_cart_button:hover{ background:var(--teal) !important; color:var(--btn-ink) !important; border-color:var(--teal); }
/* WooCommerce marks a finished ajax add with a ✓ pseudo-element and appends a
   "View cart" link — give both their own space instead of letting them sit on
   top of the button label. */
.card-foot a.added_to_cart{
  display:flex !important; align-items:center; justify-content:center; gap:6px;
  width:100%; margin:0 !important; padding:9px 10px; border-radius:var(--r-sm);
  background:var(--teal-ink); border:1px solid var(--teal-deep); color:var(--teal-text) !important;
  text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.02em; text-align:center;
}
.card-foot a.added_to_cart:hover{ background:var(--teal); color:var(--btn-ink) !important; border-color:var(--teal); }
.woocommerce ul.products li.product .button.added::after,
.card-foot .button.added::after{
  content:'' !important; display:inline-block; width:12px; height:12px;
  background:currentColor !important;
  -webkit-mask:var(--i-check) center/contain no-repeat;
          mask:var(--i-check) center/contain no-repeat;
  margin:0 0 0 8px !important; position:static !important; vertical-align:-1px; opacity:.9;
}
.woocommerce ul.products li.product .button.loading::after,
.card-foot .button.loading::after{ content:'…' !important; position:static !important; margin-left:8px !important; animation:none !important; }
.card-foot .loading{ opacity:.6; }
.card-foot .loading::after{ content:''; }

/* prices — force teal amounts, faint strike-through (overrides WooCommerce defaults) */
.price, .price .amount, .price bdi, .woocommerce-Price-amount{ color:var(--teal-text); }
.price del, .price del .amount, .price del bdi{ color:var(--text-faint); font-weight:400; }
.price ins, .price ins .amount, .price ins bdi{ color:var(--teal-text); text-decoration:none; font-weight:600; }

/* pagination */
.woocommerce-pagination ul, .build-pager .nav-links{ display:flex; gap:8px; justify-content:center; list-style:none; padding:0; margin:40px 0; }
.woocommerce-pagination a, .woocommerce-pagination span,
.build-pager a, .build-pager .current{
  font-family:var(--mono); font-size:13px; padding:9px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-soft); color:var(--text-dim); background:var(--bg-1);
}
.woocommerce-pagination .current, .build-pager .current{ background:var(--btn-fill); color:var(--btn-ink); border-color:var(--btn-edge); }
.woocommerce-pagination a:hover, .build-pager a:hover{ color:var(--teal-text); border-color:var(--teal); }
/* WooCommerce core paints the pager itself — `.woocommerce nav.woocommerce-pagination
   ul li span.current` is four levels deep and beat everything above, leaving the
   current page as purple-on-lilac (#816f98 on #e9e6ed, 3.65:1) with WooCommerce's
   own boxed-list border. Take the whole control back here.
   Do NOT prefix these with `body ` — WooCommerce puts the `.woocommerce` class
   ON the body, so `body .woocommerce` matches nothing at all. Its selector is
   (0,3,4), which ties or beats anything reasonable, hence !important on the
   handful of properties it paints. */
.woocommerce nav.woocommerce-pagination ul{
  border:none !important; margin:40px 0; padding:0;
  display:flex; gap:8px; justify-content:center;
}
.woocommerce nav.woocommerce-pagination ul li{
  border:none !important; margin:0; float:none !important; overflow:visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--mono); font-size:13px; line-height:1;
  padding:11px 15px !important; border-radius:var(--r-sm);
  border:1px solid var(--line-soft) !important;
  color:var(--text-dim) !important; background:var(--bg-1) !important; min-width:0;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus{
  background:var(--bg-1) !important; color:var(--teal-text) !important; border-color:var(--teal) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current{
  background:var(--btn-fill) !important; color:var(--btn-ink) !important;
  border-color:var(--btn-edge) !important; font-weight:600;
}

/* ---- search results: non-product rows + the empty state ----
   The row used to carry its whole appearance in a style attribute on the
   template, so it could not follow the card it is a sibling of. */
.search-row{ display:flex; gap:16px; align-items:center; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 18px; transition:.16s ease; }
.search-row:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
html[data-theme="light"] .search-row{ background:#ffffff; }
html[data-theme="light"] .search-row:hover{ box-shadow:0 18px 38px -22px rgba(12,40,45,.35); }
.search-row-body{ flex:1; min-width:0; }
.search-row-body h3{ font-family:var(--display); font-weight:500; font-size:18px; margin:4px 0 0; }

/* the no-results state: same care as the 404, which was the only dead end on
   the site that had been designed */
.noresults{ max-width:56ch; padding:26px 0 70px; }
.noresults-title{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,34px); letter-spacing:-0.02em; line-height:1.1; margin:0 0 12px; }
.noresults-text{ color:var(--text-dim); font-size:15.5px; line-height:1.65; margin:0 0 22px; }
.noresults-text b{ color:var(--text); font-weight:600; }
.noresults-search{ width:100%; max-width:420px; margin:0 0 22px; }
.noresults-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   WOOCOMMERCE — single product
   ============================================================ */
/* gallery column now WIDER than the summary (1.12fr vs 1fr) — the picture was
   the smaller half before and read as "too small" */
.single-product div.product{ display:grid !important; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important; gap:46px !important; padding:40px 0 10px; align-items:start !important; position:relative; }
/* WooCommerce floats the gallery + summary at width:48% — that's what made the
   description a narrow strip AND knocked the picture out of top alignment.
   Force both columns to fill their grid track and share the same top edge. */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary{ width:auto !important; max-width:none !important; min-width:0 !important; float:none !important; margin:0 !important; align-self:start !important; }
/* zero ANY inherited top margin on the two columns and the gallery's inner image,
   so the picture's top edge lines up exactly with the product title (no stray gap). */
.single-product div.product > *{ margin-top:0 !important; }
.single-product .summary > *:first-child,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__image:first-child{ margin-top:0 !important; }
/* WooCommerce drops an empty notices wrapper as the first grid child — it must
   never occupy a product column. */
.single-product div.product > .woocommerce-notices-wrapper{ grid-column:1 / -1; }
.single-product div.product > .woocommerce-notices-wrapper:empty{ display:none !important; }
/* gallery fills its whole column. position:relative (NOT static) so the zoom
   trigger anchors to the photo, and NO forced widths on the wrapper/slides —
   the slider JS sets inline widths (wrapper 1000%, slides in px) and forcing
   width:100% crushed the film-strip, which is why clicking a thumbnail showed
   empty space instead of the photo. */
.single-product .woocommerce-product-gallery{ float:none !important; width:100% !important; margin:0 !important; padding:0 !important; position:relative !important; align-self:start !important; }
.single-product .woocommerce-product-gallery__wrapper{ margin:0 !important; }
.single-product .woocommerce-product-gallery .flex-viewport{ width:100% !important; border-radius:var(--r-lg); }
.single-product .woocommerce-product-gallery__image{ position:relative; overflow:hidden; border-radius:var(--r-lg); }
/* :not(.zoomImg) — the hover-zoom clone must keep its huge inline width, or the
   inline zoom magnifies nothing (it was being squashed to container size) */
.single-product .woocommerce-product-gallery__image img:not(.zoomImg){ width:100%; height:auto; display:block; border-radius:var(--r-lg); border:1px solid var(--line-soft); }
.single-product .woocommerce-product-gallery img.zoomImg{ max-width:none !important; border:0 !important; border-radius:0 !important; }
/* zoom trigger: pinned to the photo's corner on every device */
.single-product .woocommerce-product-gallery__trigger{ position:absolute; top:14px; right:14px; left:auto !important; z-index:9; }
/* thumbnail strip below the main image — 4-up so each thumbnail is larger.
   margin needs !important: WooCommerce's own stylesheet zeroes it with a
   higher-specificity rule (that's why thumbs sat flush under the photo). */
.single-product .flex-control-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 0 !important; padding:0 !important; list-style:none; }
.single-product .flex-control-thumbs li{ width:auto !important; margin:0 !important; float:none !important; list-style:none; }
.single-product .flex-control-thumbs img{ width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line-soft); opacity:.55; cursor:pointer; transition:.16s ease; }
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active{ opacity:1; border-color:var(--teal); }
.single-product .product_title{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,40px); letter-spacing:-0.02em; line-height:1.05; margin:0 0 16px; }
.single-product .woocommerce-product-rating{ margin-bottom:14px; }
.single-product .price{ font-family:var(--mono); font-weight:600; font-size:26px; color:var(--teal-text); margin-bottom:6px; }
.single-product .price del{ color:var(--text-faint); font-weight:400; font-size:18px; }
/* readable long-form copy — short description (uses --text-read so it flips in light mode).
   body.single-product prefix raises specificity above WooCommerce's own colour rules. */
/* readable long-form copy — short description. Uses --text-read with a hard fallback
   so it stays readable even if a cached old core stylesheet lacks the variable. */
body.single-product .woocommerce-product-details__short-description,
body.single-product .woocommerce-product-details__short-description p,
body.single-product .woocommerce-product-details__short-description li{ color:var(--text-read,#dde7e8) !important; font-size:15.5px; line-height:1.7; }
body.single-product .woocommerce-product-details__short-description{ margin:18px 0 24px; border-top:1px solid var(--line-soft); padding-top:20px; }
/* WooCommerce core ships `.woocommerce:where(body:not(.woocommerce-uses-block-theme))
   div.product .stock` — :where() contributes nothing, so that computes as
   (0,3,1) and beat the old `.single-product .stock.in-stock` (0,3,0). The result
   was that stock state rendered in WooCommerce's olive #958E09 (3.03:1 in light
   mode) and the theme's own colours never applied at all. Matching on
   `body.single-product div.product` takes it to (0,4,2). Registered in
   sobotz-health's checked joints — if WooCommerce restructures that selector,
   this goes quiet rather than wrong. */
.single-product .stock{ font-family:var(--mono); font-size:13px; }
body.single-product div.product .stock.in-stock{ color:var(--ok-text); }
body.single-product div.product .stock.out-of-stock{ color:var(--danger-text); }
body.single-product div.product .stock.available-on-backorder{ color:var(--amber-text); }

/* Add-ons (inc/product-addons.php) render via woocommerce_before_add_to_cart_button,
   which puts them INSIDE `form.cart` — a flex row (quantity + button) below.
   flex-basis:100% forces this onto its own line above that row instead of
   squeezing in as a third flex item. */
/* --line-soft is the theme's page-hairline token (card outlines, footer
   rules) — nearly invisible on its own, fine when a card has an image and a
   price to give the eye something else to land on. This panel is a stack of
   flat text-only rows with nothing else to read by, so it needs the SAME
   boundary weight the theme already gives real controls: --line-strong is
   what `.chip`, `.badge-sold` and `.langseg` use, and that is the token every
   border in here reads now. The select/qty inputs also step up a full
   surface (--bg-3, not --bg-2) so they read as raised controls sitting IN the
   panel rather than a second, barely-different fill on top of the first. */
.product-addons{
  flex:1 1 100%; display:flex; flex-direction:column; gap:10px;
  margin:4px 0 4px; padding:14px 16px; background:var(--bg-1);
  border:1px solid var(--line-strong); border-radius:var(--r);
}
.addon-label{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint);
}
.addon-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.addon-row + .addon-row{ padding-top:10px; border-top:1px solid var(--line-soft); }
.addon-thumb{ width:38px; height:38px; flex:none; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-3); border:1px solid var(--line-soft); }
.addon-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.addon-info{ display:flex; flex-direction:column; gap:2px; flex:1 1 140px; min-width:120px; }
.addon-name{ font-family:var(--display); font-size:16px; font-weight:500; line-height:1.2; color:var(--text); }
.addon-name:hover{ color:var(--teal-text); }
.addon-price{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); }
.addon-variation select{
  height:38px; padding:0 10px; background:var(--bg-3); border:1px solid var(--line-strong);
  color:var(--text); border-radius:var(--r-sm); font-family:var(--mono); font-size:12.5px;
}
.addon-qty input{
  height:38px; width:56px; background:var(--bg-3); border:1px solid var(--line-strong);
  color:var(--text); border-radius:var(--r-sm); text-align:center; font-family:var(--mono);
  margin:0 !important;
}

/* cart row: quantity flush left, button fills the rest, equal 48px heights */
.single-product .quantity{ margin:0 !important; flex:0 0 auto; }
.single-product .quantity input{ height:48px; width:78px; background:var(--bg-1); border:1px solid var(--line-soft); color:var(--text); border-radius:var(--r-sm); text-align:center; font-family:var(--mono); margin:0 !important; }
.single-product form.cart{ display:flex; gap:12px; align-items:stretch; margin:20px 0; flex-wrap:wrap; }
.single-product form.cart > .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart > .single_add_to_cart_button{
  flex:1 1 auto; min-width:180px; min-height:48px; height:48px;
  display:inline-flex !important; align-items:center; justify-content:center; margin:0 !important;
}
/* express checkout (Stripe / Google Pay / Link / PayPal) under Add to cart */
.wc-stripe-payment-request-wrapper,
.wcpay-payment-request-wrapper,
.wc-block-components-express-payment,
#wcpay-payment-request-wrapper,
.woocommerce div.product .wc-stripe-product-checkout-container{
  width:100% !important; margin:4px 0 18px !important; padding:0 !important;
}
.wc-stripe-payment-request-wrapper + .wc-stripe-payment-request-button-separator,
.wc-block-components-express-payment__event-buttons + p,
.wcpay-payment-request-wrapper + p{
  font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint) !important; text-align:center; margin:10px 0 !important;
}

/* ---- Advanced Dynamic Pricing / bulk-discount tables ---- */
.wdp_pricing_table_wrapper, .wdp_bulk_table_content, .bulk_table,
.wdp_pricing_table_caption, .wdp_pricing_table_footer{ width:100% !important; max-width:none !important; }
.wdp_bulk_table_content, .bulk_table{ display:block; margin:4px 0 20px; }
.wdp_pricing_table_caption{
  display:block; font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-text) !important; margin-bottom:8px !important;
}
table.wdp_pricing_table{
  width:100% !important; max-width:none !important; border-collapse:separate !important; border-spacing:0;
  background:var(--bg-1) !important; border:1px solid var(--line-soft) !important; border-radius:var(--r) !important;
  overflow:hidden; margin:0 !important; color:var(--text) !important; font-family:var(--body) !important;
}
/* NOTE on specificity: the plugin prints an INLINE <style> from its settings
   with `.wdp_bulk_table_content table thead td{color:#6d6d6d!important}` — three
   elements + a class, so it outranks any short selector no matter the load
   order. Everything below therefore leads with `body .wdp_bulk_table_content`
   to outrank it. The header row uses <td> (not <th>), hence `thead td`. */
body .wdp_bulk_table_content table.wdp_pricing_table th,
body .wdp_bulk_table_content table.wdp_pricing_table td,
body .wdp_pricing_table_wrapper table.wdp_pricing_table td{
  background:transparent !important; border:none !important; border-bottom:1px solid var(--line-soft) !important;
  padding:11px 14px !important; text-align:center !important; color:var(--text-read,#dbe6e7) !important; font-size:14px !important;
}
body .wdp_bulk_table_content table.wdp_pricing_table thead td,
body .wdp_bulk_table_content table.wdp_pricing_table thead th,
body .wdp_pricing_table_wrapper table.wdp_pricing_table thead td{
  background:var(--bg-2) !important; color:var(--text) !important;
  font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600 !important; text-align:center !important;
}
body .wdp_bulk_table_content table.wdp_pricing_table tbody tr:last-child td{ border-bottom:none !important; }
body .wdp_bulk_table_content table.wdp_pricing_table tbody tr:hover td{ background:var(--bg-2) !important; }
/* discount + discounted price read as the brand accent */
body .wdp_bulk_table_content table.wdp_pricing_table tbody td:nth-child(2),
body .wdp_bulk_table_content table.wdp_pricing_table tbody td:nth-child(3),
body .wdp_bulk_table_content table.wdp_pricing_table tbody td .amount,
body .wdp_bulk_table_content table.wdp_pricing_table tbody td bdi{
  font-family:var(--mono) !important; color:var(--teal-text) !important; font-weight:600 !important;
}
body .wdp_bulk_table_content table.wdp_pricing_table tbody td:first-child{ font-family:var(--mono) !important; }
/* the plugin's optional "table footer" line — hidden because it is usually a
   leftover character. Clear it in the plugin settings, or delete this rule. */
.wdp_pricing_table_footer{ display:none !important; }
/* the "you save" / applied-rule notes the plugin prints in the summary + cart */
.wdp_pricing_table_wrapper *, .wdp_bulk_table_content *{ color:inherit; }
.wdp-cart-total-discount, .wdp_amount_saved, .wdp-you-saved{ color:var(--teal-text) !important; font-family:var(--mono) !important; }

/* ---- variable products (choosable options) — themed, left-aligned ---- */
.single-product form.cart.variations_form{ flex-direction:column; align-items:stretch; gap:0 !important; }
.single-product .variations{ width:100%; border-collapse:collapse; margin:0 0 6px !important; }
.single-product .variations tbody, .single-product .variations tr{ border:none !important; }
.single-product .variations tr{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:0 0 12px; }
.single-product .variations th.label,
.single-product .variations td.label{ padding:0 !important; text-align:left; font-weight:500; border:none !important; }
.single-product .variations td.value{ padding:0 !important; border:none !important; }
.single-product .woocommerce-variation{ margin:2px 0 10px; }
/* line-height:1.2 is the fix for the tall option rows: WooCommerce gives these
   labels a 32px line box for 14px text, i.e. ~18px of invisible air per row */
.single-product .variations label{ font-family:var(--mono); font-size:11px; line-height:1.2 !important; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin:0 !important; display:block; }
.single-product .variations td.value{ padding:0; display:flex; align-items:center; gap:12px; }
.single-product .variations select{
  appearance:none; -webkit-appearance:none; min-width:220px; max-width:100%;
  /* longhands on purpose: a background shorthand mixing var() with
     position/size fails to parse and WooCommerce's own select skin stays */
  background-color:var(--bg-1) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8d92' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:14px !important;
  border:1px solid var(--line-soft) !important; color:var(--text) !important; border-radius:var(--r-sm);
  font-family:var(--body); font-size:14px; padding:11px 38px 11px 14px; cursor:pointer;
}
.single-product .variations select:focus{ border-color:var(--teal) !important; box-shadow:0 0 0 3px var(--teal-glow); }
.single-product .reset_variations{ font-family:var(--mono); font-size:12px; color:var(--text-faint); text-decoration:underline; text-underline-offset:3px; }
.single-product .reset_variations:hover{ color:var(--teal-text); }
.single-product .single_variation_wrap{ width:100%; }
.single-product .woocommerce-variation{ margin-bottom:12px; }
.single-product .woocommerce-variation-price .price{ font-size:22px; }
.single-product .woocommerce-variation-availability .stock{ margin:4px 0 0; }
.single-product .woocommerce-variation-add-to-cart{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
/* `body.woocommerce`, not `.woocommerce`, for the specificity margin. WooCommerce
   core ships `.woocommerce a.button` at (0,2,1) — identical to what this rule
   used to be — so whichever stylesheet loaded last won, and the render-test
   harness models exactly that worst case (core injected AFTER the theme) by
   turning these buttons purple. The compound body selector takes it to (0,3,1)
   and the outcome stops depending on load order. */
.single-product .single_add_to_cart_button,
body.woocommerce a.button, body.woocommerce button.button, body.woocommerce input.button,
body.woocommerce-page a.button, body.woocommerce-page button.button, body.woocommerce-page input.button,
.woocommerce #respond input#submit{
  background:var(--btn-fill); color:var(--btn-ink); font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:.02em;
  border:none; border-radius:var(--r-sm); padding:14px 26px; transition:.16s ease; cursor:pointer;
}
/* --btn-fill-hover, not --teal-bright: light mode hovers DARKER, and the bright
   teal would drop white ink on this button to 2.94:1. */
.single-product .single_add_to_cart_button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--btn-fill-hover); box-shadow:0 0 0 4px var(--teal-glow); }
/* WooCommerce's default .alt button is purple (#7f54b3) — force our teal.
   These were written `body .woocommerce a.button.alt`, which matched NOTHING:
   WooCommerce puts .woocommerce ON the body, so the descendant combinator was
   looking for a .woocommerce element inside body. The whole block was dead, and
   every .alt button — Proceed to checkout, Place order, Update cart, View cart —
   shipped in WooCommerce purple against a teal site. `body.woocommerce` is the
   compound form that actually matches. */
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.single-product .single_add_to_cart_button.alt,
.single-product .single_add_to_cart_button{ background:var(--btn-fill) !important; color:var(--btn-ink) !important; border:none; }
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page button.button.alt:hover,
.single-product .single_add_to_cart_button:hover{ background:var(--btn-fill-hover) !important; color:var(--btn-ink) !important; }

/* sale flash */
.woocommerce span.onsale{ position:absolute; z-index:6; background:var(--amber); color:#2a1a00; font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.06em; min-height:0; min-width:0; line-height:1; padding:6px 10px; border-radius:100px; top:12px; left:12px; margin:0; }
/* on a single product the flash is a sibling of the gallery, so it hung off the
   top edge of the whole block — push it down past the block's padding so it
   sits inside the photo's corner */
.single-product div.product > span.onsale{ top:54px; left:14px; }
@media(max-width:900px){ .single-product div.product > span.onsale{ top:28px; left:12px; } }

.single-product .product_meta{ font-family:var(--mono); font-size:12.5px; color:var(--text-faint); border-top:1px solid var(--line-soft); padding-top:18px; margin-top:6px; }
.single-product .product_meta a{ color:var(--text-dim); }
.single-product .product_meta a:hover{ color:var(--teal-text); }

/* tabs — WooCommerce's default skin (white boxes, pink-lavender borders, round
   tops) has higher specificity than plain selectors, so everything here is
   explicit + !important to force the flat underline style in BOTH themes. */
.woocommerce-tabs{ grid-column:1/-1; margin-top:20px; }
body .woocommerce-tabs ul.tabs{ list-style:none; display:flex; gap:4px; padding:0 !important; margin:0 0 24px !important; border-bottom:1px solid var(--line-soft); overflow:visible; }
body .woocommerce-tabs ul.tabs::before,
body .woocommerce-tabs ul.tabs::after{ content:none !important; display:none !important; border:none !important; }
body .woocommerce-tabs ul.tabs li{
  list-style:none; background:transparent !important; border:none !important; border-radius:0 !important;
  margin:0 !important; padding:0 !important; box-shadow:none !important;
}
body .woocommerce-tabs ul.tabs li::before,
body .woocommerce-tabs ul.tabs li::after{ content:none !important; display:none !important; box-shadow:none !important; border:none !important; }
body .woocommerce-tabs ul.tabs li a{
  font-family:var(--mono); font-size:13px; font-weight:500 !important; color:var(--text-dim) !important;
  padding:12px 16px !important; display:block; border-bottom:2px solid transparent; text-shadow:none !important;
}
body .woocommerce-tabs ul.tabs li a:hover{ color:var(--teal-text) !important; }
body .woocommerce-tabs ul.tabs li.active{ background:transparent !important; }
body .woocommerce-tabs ul.tabs li.active a{ color:var(--teal-text) !important; border-bottom-color:var(--teal); }
/* tab + reviews body copy — high specificity + broad element coverage so the
   "weird colour" (dim/invisible) text is forced to a readable tone in both themes. */
/* tab + reviews body copy — high specificity + broad coverage + hard fallback so the
   description/reviews always read in the site's near-white body tone (no blue tint). */
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel li,
body.single-product .woocommerce-Tabs-panel td,
body.single-product .woocommerce-Tabs-panel dd,
body.single-product .woocommerce-Tabs-panel dt,
body.single-product .woocommerce-Tabs-panel span,
body.single-product .entry-content p,
body.single-product .entry-content li,
body.single-product #reviews,
body.single-product #reviews p,
body.single-product #reviews li,
body.single-product #reviews .comment-text,
body.single-product #reviews .description,
body.single-product .woocommerce-product-attributes td{ color:var(--text-read,#dde7e8) !important; font-size:15px; line-height:1.7; }
body.single-product .woocommerce-tabs .panel h1,
body.single-product .woocommerce-tabs .panel h2,
body.single-product .woocommerce-tabs .panel h3,
body.single-product .woocommerce-tabs .panel strong,
body.single-product #reviews .woocommerce-Reviews-title,
body.single-product #reviews .woocommerce-review__author{ color:var(--text) !important; font-family:var(--display); background:none !important; -webkit-text-fill-color:currentColor; }
/* links inside copy stay teal */
body.single-product .woocommerce-Tabs-panel a,
body.single-product #reviews a{ color:var(--teal-text) !important; }
/* additional-information + review meta */
body.single-product .woocommerce-product-attributes th,
body.single-product #reviews .woocommerce-review__published-date,
body.single-product #reviews .meta{ color:var(--text-faint) !important; font-family:var(--mono); }
body.single-product .woocommerce-product-attributes,
body.single-product .woocommerce-product-attributes td,
body.single-product .woocommerce-product-attributes th{ border-color:var(--line-soft) !important; }
/* review form on dark */
body.single-product #reviews .comment-form input[type="text"],
body.single-product #reviews .comment-form input[type="email"],
body.single-product #reviews .comment-form textarea{ background:var(--bg-2) !important; color:var(--text) !important; border:1px solid var(--line-soft) !important; border-radius:var(--r-sm); padding:12px; font-family:var(--body); }
body.single-product #reviews label{ color:var(--text-dim) !important; }
body.single-product #reviews .star-rating span,
body.single-product #reviews .stars a{ color:var(--amber-text) !important; }

/* tabs / upsells / related must span the full width under the gallery+summary grid,
   otherwise they get squeezed into the 2-column grid cells (the "messed up" related) */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells,
.single-product div.product > .up-sells,
.single-product div.product > .related{ grid-column:1 / -1; }
.related.products, .up-sells.products, .upsells.products{ clear:both; }
/* related / upsells: one clean row of 4 cards (count enforced in functions.php) */
.single-product .related ul.products,
.single-product .up-sells ul.products,
.single-product .upsells ul.products{ grid-template-columns:repeat(4,1fr); }
.related.products > h2, .up-sells > h2, .upsells > h2, .cross-sells > h2{ font-family:var(--display); font-size:24px; font-weight:600; margin:22px 0 20px; }

/* messages / notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--bg-1); border:1px solid var(--line-strong); border-left:3px solid var(--teal);
  color:var(--text); border-radius:var(--r-sm); font-size:14px; padding:14px 18px; list-style:none;
}
.woocommerce-error{ border-left-color:var(--danger-text); }
/* WooCommerce prints its own icon as ::before, absolutely positioned at
   left:1.5em — with our padding that lands ON TOP of the first word ("…60F
   Mini Sumo Sensor has been added"). Draw our own tick in the mono face and
   make room for it instead. */
body .woocommerce-message, body .woocommerce-info, body .woocommerce-error,
body.woocommerce-page .woocommerce-message{ position:relative; padding-left:48px; }
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before{
  content:''; line-height:1;
  /* the glyph is drawn INTO the badge rather than masked over it — a mask would
     clip the teal circle away with it. The ink is baked into the SVG because it
     sits on teal (or red) in both themes: the Fixed Ink rule, in a data URI. */
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304181a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.2 17.3 4 12.1'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  margin:0; padding:0; text-indent:0; box-shadow:none;
}
body .woocommerce-info::before{
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304181a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.6v6'/%3E%3Cpath d='M12 6.8h.01'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}
body .woocommerce-error::before{
  background:var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a0906' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6v6.6'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}
/* The two teal badges above bake near-black into the SVG, which was right while
   both themes inked teal fills the same way. Light mode now uses white ink, so
   the glyph has to flip with it — same paths, %23ffffff stroke. The red error
   badge is unchanged: --danger keeps dark ink in both themes. */
html[data-theme="light"] body .woocommerce-message::before{
  background:var(--btn-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.2 17.3 4 12.1'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}
html[data-theme="light"] body .woocommerce-info::before{
  background:var(--btn-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.6v6'/%3E%3Cpath d='M12 6.8h.01'/%3E%3C/svg%3E") center/15px 15px no-repeat;
}
/* the notice is a flex row on wider screens so the button never wraps oddly */
@media (min-width:600px){
  body .woocommerce-message{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  body .woocommerce-message .button{ margin-left:auto; }
}

/* cart + checkout tables */
.woocommerce table.shop_table{ border:1px solid var(--line-soft); border-radius:var(--r); border-collapse:separate; border-spacing:0; background:var(--bg-1); }
.woocommerce table.shop_table th{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); padding:16px; }
.woocommerce table.shop_table td{ padding:16px; border-top:1px solid var(--line-soft); color:var(--text-dim); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form.checkout_coupon, .woocommerce-cart .actions{ background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); }
.woocommerce .cart-collaterals h2, .woocommerce-checkout h3{ font-family:var(--display); color:var(--text); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container .select2-selection{
  background:var(--bg-2); border:1px solid var(--line-soft); color:var(--text); border-radius:var(--r-sm); padding:12px; font-family:var(--body);
}
.woocommerce-checkout #payment{ background:var(--bg-1); border-radius:var(--r); }

/* checkout / account / forms — force themed fields everywhere (classic checkout,
   login, coupon, etc.). These were rendering white-on-white in dark mode. */
body.woocommerce form .form-row input.input-text,
body.woocommerce form .form-row textarea,
body.woocommerce form .form-row select,
body .woocommerce-checkout input.input-text,
body .woocommerce-checkout select,
body .woocommerce-checkout textarea,
body.woocommerce-page form input[type="text"],
body.woocommerce-page form input[type="email"],
body.woocommerce-page form input[type="tel"],
body.woocommerce-page form input[type="password"]{
  background-color:var(--bg-2) !important; color:var(--text) !important;
  border:1px solid var(--line-soft) !important; border-radius:var(--r-sm) !important;
  padding:12px !important; font-family:var(--body) !important;
}
body.woocommerce form .form-row input.input-text:focus,
body .woocommerce-checkout input.input-text:focus{ border-color:var(--teal) !important; }
body.woocommerce form .form-row label{ color:var(--text-dim) !important; }

/* ---- sign-up page (page-register.php) ---- */
.auth-page{ max-width:520px; margin:0 auto; padding:34px 0 64px; }
.auth-intro{ color:var(--text-dim); font-size:15px; line-height:1.6; margin-bottom:22px; }
.auth-card{
  background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:28px 26px;
}
.auth-card .form-row{ margin:0 0 16px; padding:0; }
.auth-card label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:7px; }
.auth-card .required{ color:var(--teal-text); border:none; text-decoration:none; }
.auth-card input.input-text{
  width:100%; background:var(--bg-2); border:1px solid var(--line-soft); color:var(--text);
  border-radius:var(--r-sm); padding:12px 14px; font-family:var(--body); font-size:14px;
}
.auth-card input.input-text:focus{ border-color:var(--teal); }
.auth-hint, .auth-admin-note{ font-size:13px; color:var(--text-faint); line-height:1.55; margin:0 0 16px; }
.auth-submit{ margin:22px 0 0; }
.auth-submit .button{ width:100%; justify-content:center; cursor:pointer; }
.auth-alt{ margin:18px 0 0; font-size:13.5px; color:var(--text-dim); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.auth-alt a{ color:var(--teal-text); }
.auth-alt--login{ margin-top:14px; }
/* WooCommerce wraps password fields in .password-input and hangs a "show
   password" eye off the right edge. Unstyled it was an invisible 1px button on
   top of the field — it needs the wrapper to be a positioned box and the eye to
   be drawn. */
.auth-card .password-input,
.woocommerce-account .password-input,
.woocommerce form .form-row .password-input{ position:relative; display:block; width:100%; }
.auth-card .password-input input.input-text,
.woocommerce form .form-row .password-input input.input-text{ padding-right:48px; }
.woocommerce .show-password-input{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; cursor:pointer; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  opacity:.75; transition:.16s ease;
}
.woocommerce .show-password-input:hover{ opacity:1; }
/* the eye itself: WooCommerce ships no icon of its own here */
.woocommerce .show-password-input::after{
  content:''; width:20px; height:12px; border:1.7px solid var(--text-dim);
  border-radius:20px 20px 20px 20px / 12px 12px 12px 12px;
}
.woocommerce .show-password-input::before{
  content:''; position:absolute; width:6px; height:6px; border-radius:50%;
  border:1.7px solid var(--text-dim);
}
.woocommerce .show-password-input.display-password::after{ border-color:var(--teal); }
.woocommerce .show-password-input.display-password::before{
  border-color:var(--teal);
  box-shadow:0 0 0 1px var(--bg-1);
}
/* the strength meter WooCommerce prints under the field */
.woocommerce-password-strength{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:8px 12px; border-radius:var(--r-sm); margin:-8px 0 14px;
  background:var(--bg-2); border:1px solid var(--line-soft); color:var(--text-dim);
}
.woocommerce-password-strength.short, .woocommerce-password-strength.bad{ color:var(--danger-text); border-color:var(--danger-text); }
.woocommerce-password-strength.good{ color:var(--amber-text); border-color:var(--amber-text); }
.woocommerce-password-strength.strong{ color:var(--teal-text); border-color:var(--teal); }
.woocommerce-password-hint{ display:block; font-size:12.5px; color:var(--text-faint); margin:-8px 0 14px; line-height:1.5; }

/* captcha widgets (reCAPTCHA / Turnstile / hCaptcha) drop an iframe in here —
   keep it from spilling out of the card on phones */
.auth-card iframe, .auth-card .g-recaptcha, .auth-card .cf-turnstile, .auth-card .h-captcha{ max-width:100%; margin-bottom:16px; }
.auth-card .g-recaptcha > div{ max-width:100%; }
.select2-container .select2-selection{ background:var(--bg-2) !important; color:var(--text) !important; border:1px solid var(--line-soft) !important; height:auto !important; padding:8px 12px !important; }
.select2-container .select2-selection__rendered{ color:var(--text) !important; line-height:1.5 !important; }
.select2-dropdown{ background:var(--bg-2) !important; color:var(--text) !important; border:1px solid var(--line-strong) !important; }
.select2-container .select2-results__option{ color:var(--text-dim) !important; }
.select2-container .select2-results__option--highlighted{ background:var(--teal-ink) !important; color:var(--teal-text) !important; }
.select2-search__field{ background:var(--bg-1) !important; color:var(--text) !important; border:1px solid var(--line-soft) !important; }

/* WooCommerce BLOCK checkout/cart components (if the pages use blocks) */
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"],
.wc-block-components-form select,
.wc-block-components-form textarea{
  background-color:var(--bg-2) !important; color:var(--text) !important;
  border:1px solid var(--line-soft) !important; border-radius:var(--r-sm) !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title{ color:var(--text) !important; }
.wc-block-components-checkout-step__description{ color:var(--text-dim) !important; }

/* <mark> — WooCommerce wraps the order number / date / status in <mark> on the
   "order received" and view-order screens; the browser default paints those
   YELLOW. Restyle as plain teal emphasis. */
.woocommerce mark, .woocommerce-page mark, mark.order-number, mark.order-date, mark.order-status{
  background:transparent !important; color:var(--teal-text) !important; font-weight:600;
}

/* My account — order tables & navigation */
.woocommerce-MyAccount-content a:not(.button){ color:var(--teal-text); }
.woocommerce-MyAccount-content table.shop_table td, .woocommerce-MyAccount-content table.shop_table th{ color:var(--text-dim); }
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li a{ display:block; padding:10px 14px; border-radius:var(--r-sm); color:var(--text-dim); font-size:14px; }
.woocommerce-MyAccount-navigation li a:hover{ background:var(--bg-1); color:var(--text); }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--teal-ink); color:var(--teal-text); }

@media(max-width:1100px){
  ul.products, .grid-products ul.products, .home ul.products,
  .shop-main ul.products{ grid-template-columns:repeat(min(var(--cols-pc,4),3),minmax(0,1fr)); }
}
@media(max-width:900px){
  .shop{ grid-template-columns:1fr; padding-top:18px; gap:18px; }
  .side{ position:static; flex-direction:column; gap:14px; }
  /* categories collapse into a dropdown so they don't eat the whole screen */
  .catfilter{ width:100%; }
  .catfilter-label{ display:none; }
  .catfilter-toggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
    background:var(--bg-1); border:1px solid var(--line-soft); color:var(--text);
    font-family:var(--mono); font-size:13px; letter-spacing:.02em; padding:13px 16px; border-radius:var(--r-sm); }
  .catfilter-panel{ display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
    background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:8px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.85); max-height:62vh; overflow:auto; }
  .catfilter.open .catfilter-panel{ display:flex; }
  /* single product → full-width gallery on top, summary below (standard WP/Woo
     mobile pattern). The base grid uses !important, so the override must too —
     including gap and padding, which stayed at desktop size (46px/40px) and made
     the phone layout feel far too airy. */
  .single-product div.product{ display:flex !important; flex-direction:column; gap:22px !important; grid-template-columns:1fr !important; padding:14px 0 0 !important; }
  .single-product .shop--single, .shop--single{ padding-top:8px; }
  .single-product div.product > .woocommerce-product-gallery,
  .single-product div.product > .summary{ width:100% !important; max-width:100% !important; }
  .single-product .woocommerce-product-gallery{ order:1; position:relative !important; top:auto !important; margin-top:0 !important; }
  .single-product .product_title{ margin-bottom:8px; }
  .single-product .summary{ order:2; }
  .single-product .product_title{ font-size:clamp(23px,6vw,30px); }
  /* thumbnails on phones: same 4-up strip, slightly tighter gap to the photo */
  .single-product .flex-control-thumbs{ grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 0 !important; }
  .single-product .woocommerce-tabs{ margin-top:0; }
  .single-product form.cart{ margin:18px 0; }
  .related.products > h2, .up-sells > h2, .upsells > h2{ margin:10px 0 16px; }
  /* shop: tighten the toolbar (result count + sorting) so products start sooner */
  .shop-toolbar{ gap:10px; margin-bottom:16px; padding-bottom:14px; }
  .woocommerce-result-count{ font-size:12px; }
  .woocommerce-ordering select, .orderby{ padding:8px 10px; font-size:12px; }
  .single-product .woocommerce-tabs{ order:3; }
  .single-product .related, .single-product .upsells, .single-product .up-sells{ order:4; }
  /* tabs scroll sideways on phones instead of overflowing the screen */
  body .woocommerce-tabs ul.tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  body .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; }
  body .woocommerce-tabs ul.tabs li a{ padding:11px 12px !important; font-size:12px; white-space:nowrap; }
  .hero .wrap{ grid-template-columns:1fr; gap:28px; padding:30px 18px 34px; }
  .feat{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
  ul.products, .grid-products ul.products, .home ul.products,
  .shop-main ul.products{ grid-template-columns:repeat(var(--cols-mob,2),minmax(0,1fr)); }
  .single-product .related ul.products,
  .single-product .up-sells ul.products,
  .single-product .upsells ul.products{ grid-template-columns:repeat(2,1fr); }
  /* homepage category chips are redundant on phones (the nav + shop sidebar cover
     categories) and ate a lot of vertical space \u2014 hide them here */
  .home-chips{ display:none !important; }
  /* tighter cards so "Add to cart" always fits the narrow 2-up button */
  li.product .card-body{ padding:12px 12px 14px; gap:8px; }
  .card-foot{ gap:9px; padding-top:10px; }
  .woocommerce ul.products li.product .button,
  .card-foot .button, .card-foot a.card-add, .card-foot a.add_to_cart_button{
    font-size:12px !important; padding:11px 8px !important; letter-spacing:0 !important; min-height:40px; gap:5px;
  }
}
@media(max-width:560px){ .feat{ grid-template-columns:1fr; } }

/* ============================================================
   HOMEPAGE + LEARN — "From the bench" (builds / lessons / docs)
   Grid on desktop; swipeable carousel with ‹ › buttons on phones.
   ============================================================ */
.home-bench{ padding:2px 0 48px; }
.home-bench + .home-bench{ padding-top:0; }
.home-bench .bgrid, .home-bench .vgrid{ padding-bottom:0; }
/* ============================================================
   CAROUSEL (Learn page: builds / lessons / docs on every device)
   One horizontal scroller; ‹ › buttons page it one card at a time.
   Cards past the first screen lazy-load their images, so a long
   library costs nothing until it's scrolled into view.
   ============================================================ */
.sb-carousel{
  display:flex !important; grid-template-columns:none !important;
  overflow-x:auto; gap:18px; padding:2px 0 8px; margin:0;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sb-carousel::-webkit-scrollbar{ display:none; }
.sb-carousel > *{ flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start; }
.sb-carousel > .empty{ flex:1 1 100%; }
@media(max-width:980px){ .sb-carousel > *{ flex-basis:calc((100% - 18px) / 2); } }
@media(max-width:720px){ .sb-carousel{ gap:12px; } .sb-carousel > *{ flex-basis:82%; } }
.car-nav--always{ display:flex !important; }

/* ‹ › carousel buttons — appear only on phones next to the section button */
.car-nav{ display:none; gap:6px; }
.car-nav button{
  width:36px; height:36px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--bg-1); color:var(--text);
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:.15s ease; padding:0 0 2px;
}
.car-nav button:hover{ border-color:var(--teal); color:var(--teal-text); }
.car-nav button[disabled]{ opacity:.35; }
@media(max-width:720px){
  .car-nav{ display:flex; }
  .home-bench .sec-head{ flex-wrap:wrap; gap:12px; }
  .home-bench .bgrid, .home-bench .vgrid, .home-bench .docs-grid{
    display:flex; grid-template-columns:none; overflow-x:auto; gap:12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0; padding:2px 0 8px;
  }
  .home-bench .bgrid::-webkit-scrollbar, .home-bench .vgrid::-webkit-scrollbar,
  .home-bench .docs-grid::-webkit-scrollbar{ display:none; }
  /* 82% basis leaves the next card peeking in = "you can swipe this" */
  .home-bench .bcard, .home-bench .vcard, .home-bench .doc-card{ flex:0 0 82%; scroll-snap-align:start; }
}

/* ============================================================
   DOCS & DOWNLOADS (/docs/ + Learn page cards)
   ============================================================ */
.docs-wrap{ padding-top:30px; padding-bottom:20px; }
.docs-sec{ margin-bottom:46px; }
.docs-toolbar{ display:flex; flex-direction:column; gap:16px; padding:26px 0 22px; }
.docs-grid .doc-card.hidden{ display:none !important; }
.docs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.doc-card{ display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:.18s ease; }
.doc-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
.doc-media{ aspect-ratio:16/9; background:var(--bg-2); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.doc-media img{ width:100%; height:100%; object-fit:cover; }
.doc-icon{ width:54px; height:54px; color:var(--teal-text); opacity:.85; }
.doc-icon svg{ width:100%; height:100%; }
.doc-body{ padding:15px 16px 17px; display:flex; flex-direction:column; gap:8px; flex:1; }
.doc-type{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-text); }
/* one line only — long file names used to push cards to different heights */
.doc-body h3{ font-family:var(--display); font-weight:500; font-size:16.5px; line-height:1.3; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-body p{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.doc-btn{ margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:12.5px; color:var(--text-dim); }
.doc-card:hover .doc-btn{ color:var(--teal-text); }
.grabcad-banner{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin:0 0 4px; padding:20px 22px; border-radius:var(--r);
  background:var(--teal-ink); border:1px solid var(--teal-deep); transition:.16s ease;
}
.grabcad-banner:hover{ border-color:var(--teal); }
.grabcad-banner b{ display:block; font-family:var(--display); font-size:17px; color:var(--text); margin-bottom:4px; }
.grabcad-banner span:not(.btn){ color:var(--text-dim); font-size:13.5px; }
@media(max-width:980px){ .docs-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .docs-grid{ grid-template-columns:1fr; } }

/* ---- class / country chips on a single event page ---- */
.ev-chips{
  display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px;
  max-height:74px; overflow:hidden;   /* max two rows */
}
.ev-chip{
  display:inline-flex; align-items:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  padding:6px 12px; border-radius:100px; line-height:1.25;
  background:var(--bg-2); border:1px solid var(--line-strong); color:var(--text-dim); white-space:nowrap;
}
.ev-chip--geo{ background:var(--teal-ink); border-color:var(--teal-deep); color:var(--teal-text); font-weight:600; }
/* a drawn dot, matching the .post-tag marker — ◉ was whatever the fallback
   font felt like drawing, and it sat off the text baseline */
.ev-chip--geo::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:7px; flex:0 0 auto; }
/* with a flag emoji the dot is redundant */
.ev-chip.has-flag::before{ content:none; }
.ev-flag{ font-size:14px; line-height:1; margin-right:7px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }

/* ============================================================
   COMPETITIONS MAP (Leaflet + OpenStreetMap)
   ============================================================ */
/* padding-top/bottom only: the shorthand used to wipe the 28px side padding
   these inherit from .wrap, so the content sat flush against the screen edge
   while the header stayed inset. */
.map-wrap{ padding-top:26px; padding-bottom:46px; }
.map-layout{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:20px; align-items:start; }
.map-list{ display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; max-height:620px; }
.map-list-head{ display:flex; flex-direction:column; gap:5px; padding:16px 18px 14px; border-bottom:1px solid var(--line-soft); }
.map-list-head b{ font-family:var(--display); font-size:17px; }
.map-list-scroll{ overflow-y:auto; flex:1; }
.map-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 16px; background:transparent; border:none; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:.14s ease; }
.map-row:hover{ background:var(--bg-2); }
.map-row.on{ background:var(--teal-ink); box-shadow:inset 3px 0 0 var(--teal); }
.map-row--nogeo{ opacity:.6; cursor:default; }
.map-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:46px; padding:6px 8px; border-radius:var(--r-sm); background:var(--bg-3); border:1px solid var(--line-strong); line-height:1; flex:0 0 auto; }
.map-date b{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--text); }
.map-date i{ font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-text); margin-top:3px; }
.map-row-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.map-row-title{ font-family:var(--display); font-size:15px; font-weight:500; color:var(--text); line-height:1.25; }
.map-row-meta{ font-family:var(--mono); font-size:11.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.map-all{ margin:14px 16px 16px; justify-content:center; }
.map-canvas-wrap{ position:relative; }
.map-canvas{ height:620px; border-radius:var(--r); border:1px solid var(--line-soft); overflow:hidden; z-index:1; background:var(--bg-2); }
.map-note{ margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--text-faint); }
/* dark mode: tint the light OSM tiles instead of shipping a paid dark basemap */
html[data-theme="dark"] .map-canvas .leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.7); }
/* teardrop pin: a round head with the day number, on a short stem. The number
   is upright and centred (the old version rotated a two-line label, which is
   why the day sat on top of the month). */
.map-pin{ background:none !important; border:none !important; }
/* marker = a small pill reading "7 AUG" with a pointer underneath.
   transform-origin is the pointer tip, so any scaling keeps the marker
   pinned to its real coordinates instead of drifting. */
/* the icon itself is a zero-size point at the exact coordinate; the pill is
   drawn above it and centred, so it can be any width without shifting */
.map-pin{ width:0 !important; height:0 !important; }
.map-pin-inner{
  position:absolute; left:0; bottom:9px; transform:translateX(-50%);
  display:inline-flex; align-items:baseline; gap:4px;
  padding:5px 10px 5px 9px; border-radius:100px; white-space:nowrap;
  background:var(--teal); color:var(--btn-ink); border:2px solid var(--bg);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.75);
  transform-origin:bottom center; transition:transform .15s ease;
}
.map-pin:hover{ z-index:1000; }
.map-pin-inner::after{
  content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--teal);
}
.map-pin-inner b{ font-family:var(--display); font-weight:700; font-size:13px; line-height:1; }
.map-pin-inner i{ font-family:var(--mono); font-style:normal; font-weight:600; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; line-height:1; opacity:.85; }
.map-pin:hover .map-pin-inner{ transform:translateX(-50%) scale(1.1); z-index:5; }
/* zoomed far out: scale down from the tip (position stays exact) */
.map--far .map-pin-inner{ transform:translateX(-50%) scale(.72); }
.map--far .map-pin:hover .map-pin-inner{ transform:translateX(-50%) scale(.85); }
/* cluster bubble (optional — Customizer → "Group nearby pins") */
.map-cluster{ background:none !important; border:none !important; }
.map-cluster-inner{
  transform-origin:center; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:var(--teal-deep); color:#fff; border:2px solid var(--bg);
  font-family:var(--display); font-weight:700; font-size:14px;
  box-shadow:0 0 0 6px rgba(25,198,201,.18), 0 6px 16px -6px rgba(0,0,0,.7);
}
.leaflet-tooltip{ background:var(--bg-2) !important; color:var(--text) !important; border:1px solid var(--line-strong) !important; font-family:var(--mono) !important; font-size:11px !important; box-shadow:none !important; }
.leaflet-tooltip-top::before{ border-top-color:var(--line-strong) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:var(--bg-2) !important; color:var(--text) !important; border:1px solid var(--line-strong); box-shadow:0 18px 40px -18px rgba(0,0,0,.8) !important; }
.leaflet-popup-content{ margin:12px 14px !important; }
.map-pop{ display:flex; flex-direction:column; gap:7px; min-width:190px; }
.map-pop img{ width:100%; height:96px; object-fit:cover; border-radius:var(--r-sm); margin:0 0 2px; }
.leaflet-popup-content, .leaflet-popup-content *{ color:var(--text) !important; }
.map-pop b{ font-family:var(--display); font-size:15px; color:var(--text) !important; }
.map-pop span{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim) !important; }
.map-pop .btn.btn-primary{ color:var(--btn-ink) !important; }
.map-pop .btn{ margin-top:4px; justify-content:center; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--text-faint) !important; }
.leaflet-control-attribution{ background:var(--glass) !important; color:var(--text-faint) !important; font-size:10px !important; }
.leaflet-control-attribution a{ color:var(--text-dim) !important; }
.leaflet-bar a{ background:var(--bg-1) !important; color:var(--text) !important; border-color:var(--line-soft) !important; }
.leaflet-bar a:hover{ background:var(--bg-3) !important; color:var(--teal-text) !important; }
@media(max-width:900px){
  .map-layout{ grid-template-columns:1fr; }
  .map-list{ order:2; max-height:none; }
  .map-canvas-wrap{ order:1; }
  .map-canvas{ height:380px; }
  .map-list-scroll{ max-height:340px; }
}

/* ============================================================
   COMPETITION RULES
   ============================================================ */
.rules-wrap{ padding-top:26px; padding-bottom:50px; }
.rules-layout{ display:grid; grid-template-columns:264px minmax(0,1fr); gap:34px; align-items:start; }
.rules-nav{ position:sticky; top:140px; display:flex; flex-direction:column; gap:14px; }
.rules-tools{ display:flex; flex-direction:column; gap:10px; }
.rules-tools .lsearch{ margin-left:0; }
.rules-tools .lsearch input{ width:100%; }
.rules-print{ justify-content:center; }
.rules-toc{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line-soft); padding-top:12px; }
.rules-main{ min-width:0; display:flex; flex-direction:column; gap:20px; }
.rule-card{ background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:24px 26px 26px; scroll-margin-top:150px; }
.rule-card.hidden{ display:none; }
.rule-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.rule-head h2{ font-family:var(--display); font-size:21px; font-weight:600; }
.rule-toggle{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; background:none; border:none; padding:0; text-align:left; color:inherit; }
.rule-toggle:hover h2{ color:var(--teal-text); }
.rule-caret{ display:flex; width:26px; height:26px; flex:0 0 auto; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--text-dim); transition:.18s ease; }
.rule-caret svg{ width:14px; height:14px; }
.rule-card.open .rule-caret{ transform:rotate(180deg); color:var(--teal-text); border-color:var(--teal); }
.rule-actions{ display:flex; gap:8px; flex:0 0 auto; }
/* closed by default — click a category to open it */
.rule-panel{ display:none; border-top:1px solid var(--line-soft); padding-top:16px; margin-top:16px; }
.rule-card.open .rule-panel{ display:block; }
.rules-single{ max-width:900px; margin:0 auto; }
@media(max-width:720px){
  /* stack the header so a long category name can't run under the buttons */
  .rule-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .rule-toggle{ width:100%; }
  .rule-head h2{ font-size:18px; line-height:1.25; }
  .rule-actions{ justify-content:flex-start; }
  /* printing from a phone isn't a thing — keep only "Open page" */
  .rule-actions [data-print-one], .rules-print{ display:none !important; }
}
.rules-single-tools{ display:flex; justify-content:space-between; gap:12px; margin-bottom:16px; }
.rule-lede{ color:var(--text-dim); font-size:15px; margin:0 0 14px; }
.rule-body h3{ font-family:var(--display); font-size:17px; margin:20px 0 8px; }
.rule-body h3:first-child{ margin-top:0; }
.rule-body p, .rule-body li{ color:var(--text-read,#dbe6e7); font-size:15px; line-height:1.6; }
.rule-body ul, .rule-body ol{ margin:0 0 14px; }
.rule-body table{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:14.5px; }
.rule-body th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); padding:0 10px 10px 0; border-bottom:1px solid var(--line-strong); }
.rule-body td{ padding:10px 10px 10px 0; border-bottom:1px solid var(--line-soft); color:var(--text-read,#dbe6e7); }
.rules-print-head{ display:none; }
@media(max-width:900px){
  .rules-layout{ grid-template-columns:1fr; gap:18px; }
  .rules-nav{ position:static; }
  .rules-toc{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .rules-toc .fopt{ width:auto; border:1px solid var(--line-strong); border-radius:100px; padding:7px 13px; }
}

/* ---- printing: rules only, on white, ink-friendly ---- */
@media print{
  .topbar, .hdr, .foot, .page-hero, .no-print, .rules-nav, .skip-link, .toast{ display:none !important; }
  body{ background:#fff !important; color:#111 !important; }
  .rules-layout{ display:block; }
  .rules-print-head{ display:block; margin-bottom:18px; border-bottom:2px solid #111; padding-bottom:10px; }
  .rules-print-head h1{ font-size:20pt; margin:0 0 4px; }
  .rules-print-head p{ font-size:9pt; color:#555; margin:0; }
  .rule-card{ background:#fff !important; border:none !important; border-top:1px solid #bbb; border-radius:0; padding:14px 0 0; margin:0 0 14px; break-inside:avoid; page-break-inside:avoid; }
  .rule-card:first-of-type{ border-top:none; }
  .rule-head{ border-bottom:1px solid #ddd; }
  .rule-head h2{ font-size:14pt; color:#111 !important; }
  .rule-body p, .rule-body li, .rule-body td, .rule-lede{ color:#222 !important; font-size:10.5pt; line-height:1.45; }
  .rule-body h3{ font-size:11.5pt; color:#111 !important; }
  .rule-body th{ color:#444 !important; border-color:#999 !important; }
  .rule-body td{ border-color:#ddd !important; }
  .rule-panel{ display:block !important; }        /* collapsed cards still print */
  .rule-caret, .rule-actions{ display:none !important; }
  .rule-toggle{ padding:0; }
  body.print-one .rule-card.print-hide{ display:none !important; }
  a[href]::after{ content:''; } /* don't print URLs after links */
}

/* ============================================================
   LESSONS
   ============================================================ */
.lessons-toolbar{ display:flex; flex-direction:column; gap:16px; padding:30px 0 26px; }
.filt-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filt-row .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-right:4px; min-width:64px; }
.lsearch{ position:relative; margin-left:auto; }
.lsearch input{ height:40px; width:240px; padding:0 14px 0 38px; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r-sm); color:var(--text); font-family:var(--body); font-size:14px; }
.lsearch input:focus{ border-color:var(--teal); }
.lsearch svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); }

.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:30px; }
.vcard{ display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:.18s; cursor:pointer; }
.vcard:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
.vthumb{ position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden; }
.vthumb img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.vcard:hover .vthumb img{ transform:scale(1.05); }
.vthumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,8,9,.55)); }
.play{ position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background:rgba(9,13,15,.7); border:1px solid var(--teal); display:flex; align-items:center; justify-content:center; z-index:2; transition:.16s; }
.vcard:hover .play{ background:var(--teal); transform:scale(1.08); }
.play svg{ width:20px; height:20px; color:var(--teal); margin-left:2px; }
.vcard:hover .play svg{ color:var(--btn-ink); }
/* duration chip sits on a dark tile in BOTH themes — literal light text, or it
   turned near-black on the dark chip in light mode and disappeared */
.dur{ position:absolute; bottom:10px; right:10px; z-index:3; font-family:var(--mono); font-size:11px; background:rgba(9,13,15,.88); border:1px solid rgba(120,210,214,.32); color:#e9f3f4; padding:3px 7px; border-radius:4px; }
.lvl{ position:absolute; top:10px; left:10px; z-index:3; }
.lvl-b{ background:var(--teal-ink); color:var(--teal-text); border:1px solid var(--teal-deep); }
.lvl-i{ background:rgba(240,169,61,.14); color:var(--amber-text); border:1px solid rgba(240,169,61,.4); }
.lvl-a{ background:rgba(255,107,94,.12); color:var(--danger-text); border:1px solid rgba(255,107,94,.4); }
.vbody{ padding:15px 16px 17px; display:flex; flex-direction:column; gap:8px; flex:1; }
.vtopic{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-text); }
.vtitle{ font-family:var(--display); font-weight:500; font-size:16.5px; line-height:1.2; color:var(--text); }
.vmeta{ margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--text-faint); display:flex; align-items:center; gap:10px; }
/* the play mark is drawn, like every other icon in the theme */
.vmeta-play{ display:inline-flex; align-items:center; gap:6px; }
.vmeta-play svg{ width:11px; height:11px; flex:0 0 auto; }

/* ============================================================
   BUILDS / BLOG
   ============================================================ */
.b-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:28px 0 24px; }
.b-toolbar .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-right:6px; }
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:20px; }
.bcard{ display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:.18s; cursor:pointer; }
.bcard:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
.bcard-media{ aspect-ratio:16/10; background:var(--bg-2); position:relative; overflow:hidden; }
.bcard-media img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.bcard:hover .bcard-media img{ transform:scale(1.05); }
.bcard-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:11px; flex:1; }
.bcard-body h3{ font-family:var(--display); font-weight:600; font-size:18.5px; line-height:1.18; color:var(--text); }
.bcard-body p{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:0; flex:1; }
.post-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.post-tag.log{ color:var(--teal-text); }
.post-tag.guide{ color:var(--amber-text); }
.post-tag::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.post-meta{ font-family:var(--mono); font-size:12px; color:var(--text-faint); display:flex; gap:10px; }

/* ============================================================
   ARTICLE (single post / lesson)
   ============================================================ */
.post-head{ border-bottom:1px solid var(--line-soft); }
.post-head .wrap{ max-width:860px; padding:44px 28px 30px; }
.post-head h1{ font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,50px); letter-spacing:-0.03em; line-height:1.04; margin:16px 0 18px; }
.byline{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:13px; color:var(--text-faint); }
.byline b{ color:var(--text); font-family:var(--body); font-weight:600; }
/* featured image: 16/9 (21/9 was a letterbox that cropped most photos oddly)
   and never taller than half a screen */
.cover{ max-width:var(--article-w, 860px); margin:22px auto 0; padding:0 28px; }
/* max-height clamps the height, and with a fixed aspect-ratio that shrinks the
   WIDTH too — the box then sat hard against the left edge of .cover with all
   the slack on the right. Auto margins centre whatever width it ends up at. */
.cover-media{ aspect-ratio:16/9; max-height:52vh; margin-left:auto; margin-right:auto; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); position:relative; border:1px solid var(--line-soft); }
.cover-media img{ width:100%; height:100%; object-fit:cover; }

/* width is a variable so the Customizer (SoBotz — Shop & archive pages →
   "Build post text width") can widen/narrow it without code.
   Text colour uses --text-read, which flips with the light theme — the old
   hardcoded dark-theme grey was almost invisible on white. */
.article{ max-width:var(--article-w, 860px); margin:0 auto; padding:18px 28px 0; }
.article > p{ font-size:16px; line-height:1.72; color:var(--text-read, #dbe6e7); margin:0 0 14px; }
.article p a{ color:var(--teal-text); text-decoration:underline; text-underline-offset:3px; }
.article h2{ font-family:var(--display); font-weight:600; font-size:25px; letter-spacing:-0.01em; margin:42px 0 15px; }
.article h3{ font-family:var(--display); font-weight:600; font-size:20px; margin:32px 0 12px; }
.article ul, .article ol{ margin:0 0 22px; padding-left:22px; }
.article li{ margin-bottom:9px; font-size:15.5px; color:var(--text-read, #dbe6e7); line-height:1.6; }
/* content images: capped width (Customizer → "Build post image size") and
   centred, so full-res photos don't dominate the page on PC */
.article img{ border-radius:var(--r); margin:20px auto; max-width:min(100%, var(--article-img-w, 640px)); height:auto; display:block; }
.article figure, .article .wp-block-image{ max-width:min(100%, var(--article-img-w, 640px)); margin-left:auto; margin-right:auto; }
.article figure img, .article .wp-block-image img{ margin:0 auto; max-width:100%; }
.article blockquote{ margin:34px 0; border-left:3px solid var(--teal); padding:4px 0 4px 24px; }
.article blockquote p{ font-family:var(--display); font-weight:500; font-size:22px; line-height:1.4; color:var(--text); margin:0; }
/* Build-post tables only. Scoped to tables the EDITOR produces (Gutenberg
   leaves the <table> unclassed, inside .wp-block-table) because cart, checkout
   and order pages are ordinary Pages too — they render inside .article, and
   styling every table in here stripped WooCommerce's own cell padding and row
   borders, which is what flattened the cart. Every WooCommerce table carries a
   class, so :not([class]) keeps us out of all of them. */
.article table:not([class]), .article .wp-block-table table, .article table.bom{
  width:100%; border-collapse:collapse; margin:14px 0 24px; font-size:15px;
}
.article table:not([class]) th, .article .wp-block-table th, .article table.bom th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); text-align:left; padding:0 12px 12px; border-bottom:1px solid var(--line-strong);
}
.article table:not([class]) td, .article .wp-block-table td, .article table.bom td{
  padding:12px; border-bottom:1px solid var(--line-soft); color:var(--text-read, #dbe6e7);
}

.parts-used{ max-width:1060px; margin:50px auto 0; padding:36px 28px 0; border-top:1px solid var(--line-soft); }

/* ---- parts list: the products this build actually used ---- */
.build-parts .bp-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.build-parts .bp-item{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto auto auto;
  align-items:center; gap:16px; padding:12px 16px; margin:0;
  background:var(--bg-1); border-bottom:1px solid var(--line-soft);
}
.build-parts .bp-item:last-child{ border-bottom:none; }
.build-parts .bp-item:hover{ background:var(--bg-2); }
.build-parts .bp-thumb{ display:block; width:56px; height:56px; border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2); }
.build-parts .bp-thumb img{ width:56px; height:56px; object-fit:cover; display:block; }
.build-parts .bp-noimg{ display:block; width:56px; height:56px; }
.build-parts .bp-main{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.build-parts .bp-name{ font-weight:600; font-size:15px; color:var(--text); line-height:1.3; }
.build-parts .bp-name:hover{ color:var(--teal-text); }
.build-parts .bp-note{ font-size:13px; color:var(--text-faint); }
.build-parts .bp-qty{ font-family:var(--mono); font-size:13px; color:var(--text-dim); white-space:nowrap; }
.build-parts .bp-price{ font-family:var(--mono); font-size:14px; color:var(--text); white-space:nowrap; }
.build-parts .bp-price del{ color:var(--text-faint); font-size:12px; margin-right:5px; }
.build-parts .bp-buy .btn{ white-space:nowrap; }
/* the total on the "Add all" button inherits the button colour, so the price
   markup WooCommerce returns must not paint itself dark again */
.build-parts .bp-addall .amount, .build-parts .bp-addall bdi{ color:inherit; }

@media (max-width:760px){
  .build-parts .bp-item{ grid-template-columns:48px minmax(0,1fr) auto; gap:12px; padding:12px; }
  .build-parts .bp-thumb, .build-parts .bp-thumb img, .build-parts .bp-noimg{ width:48px; height:48px; }
  .build-parts .bp-qty{ grid-column:3; }
  .build-parts .bp-price{ grid-column:2; }
  .build-parts .bp-buy{ grid-column:3; grid-row:2; justify-self:end; }
  .build-parts .sec-head{ flex-wrap:wrap; gap:14px; }
}

/* ---- product page: a quiet link back to the builds using this part ---- */
.used-in-builds{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.used-in-builds .uib-label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:10px;
}
.used-in-builds ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.used-in-builds li a{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:13.5px; line-height:1.35; }
.used-in-builds li a:hover{ color:var(--teal-text); }
.used-in-builds li img{ width:34px; height:34px; object-fit:cover; border-radius:var(--r-sm); flex:none; opacity:.85; }
.used-in-builds li a:hover img{ opacity:1; }
.used-in-builds .uib-more{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.used-in-builds .uib-more:hover{ color:var(--teal-text); }
/* the overflow list: a plain disclosure (no JS) whose contents scroll, so a
   part used by twenty builds still cannot stretch the summary column */
.used-in-builds .uib-rest{ margin-top:10px; }
.used-in-builds .uib-rest > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; color:var(--text-faint);
}
.used-in-builds .uib-rest > summary::-webkit-details-marker{ display:none; }
.used-in-builds .uib-rest > summary::after{
  content:''; width:11px; height:11px; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--i-caret) center/contain no-repeat;
          mask:var(--i-caret) center/contain no-repeat;
  transition:transform .18s ease;
}
.used-in-builds .uib-rest[open] > summary::after{ transform:rotate(180deg); }
.used-in-builds .uib-rest > summary:hover{ color:var(--teal-text); }
.used-in-builds .uib-rest > ul{ margin-top:10px; max-height:230px; overflow-y:auto; padding-right:6px; }
.used-in-builds .uib-rest > ul::-webkit-scrollbar{ width:6px; }
.used-in-builds .uib-rest > ul::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px; }
.post-foot{ max-width:var(--article-w, 860px); margin:0 auto; padding:40px 28px; }

/* ---- comments on build posts ---- */
.post-comments{ max-width:var(--article-w, 860px); margin:0 auto; padding:10px 28px 20px; }
.post-comments .comments-title, .post-comments .comment-reply-title{ font-family:var(--display); font-size:22px; font-weight:600; margin:26px 0 18px; }
.post-comments ol.comment-list{ list-style:none; margin:0 0 10px; padding:0; }
.post-comments .comment-list .children{ list-style:none; margin:14px 0 0 26px; padding:0; }
.post-comments .comment-body{ background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 18px; margin-bottom:14px; }
.post-comments .comment-meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.post-comments .comment-author{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--text); font-size:14px; }
.post-comments .comment-author img{ border-radius:50%; }
.post-comments .comment-author .says{ display:none; }
.post-comments .comment-metadata{ font-family:var(--mono); font-size:11.5px; color:var(--text-faint); }
.post-comments .comment-metadata a{ color:var(--text-faint); }
.post-comments .comment-content p{ color:var(--text-read, #dbe6e7); font-size:15px; line-height:1.65; margin:0 0 10px; }
.post-comments .reply a{ font-family:var(--mono); font-size:12px; color:var(--teal-text); }
.post-comments .comment-form label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.post-comments .comment-form input[type="text"],
.post-comments .comment-form input[type="email"],
.post-comments .comment-form input[type="url"],
.post-comments .comment-form textarea{
  width:100%; background:var(--bg-1); border:1px solid var(--line-soft); color:var(--text);
  border-radius:var(--r-sm); padding:12px 14px; font-family:var(--body); font-size:14px; margin-bottom:14px;
}
.post-comments .comment-form input:focus, .post-comments .comment-form textarea:focus{ border-color:var(--teal); }
.post-comments .form-submit input[type="submit"]{
  background:var(--teal); color:var(--btn-ink); border:none; border-radius:var(--r-sm);
  font-family:var(--mono); font-weight:600; font-size:13px; padding:13px 24px; cursor:pointer; transition:.16s ease;
}
.post-comments .form-submit input[type="submit"]:hover{ background:var(--teal-bright); }
.post-comments .comment-notes, .post-comments .logged-in-as{ font-size:13px; color:var(--text-faint); }
.post-comments .comment-awaiting-moderation{ font-family:var(--mono); font-size:12px; color:var(--amber-text); }
/* avatar in its own left column, name + date + text stacked beside it */
.post-comments .comment-body{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:start; }
.post-comments .comment-meta{ display:contents; }
.post-comments .comment-author{ display:contents; }
.post-comments .comment-author img,
.post-comments .comment-body > img.avatar{ grid-row:1 / span 2; grid-column:1; width:40px; height:40px; border-radius:50%; margin:0; }
.post-comments .comment-author .fn{ grid-row:1; grid-column:2; align-self:end; font-weight:600; font-style:normal; color:var(--text); font-size:14.5px; }
.post-comments .comment-author .says{ display:none; }
.post-comments .comment-metadata{ grid-row:2; grid-column:2; align-self:start; }
.post-comments .comment-content{ grid-row:3; grid-column:2; margin-top:8px; }
.post-comments .reply{ grid-row:4; grid-column:2; }
.post-comments .comment-list > li, .post-comments .comment-list .children > li{ margin:0; padding:0; }
.post-comments .comment-list .comment-respond{ margin:10px 0 20px; }
.post-comments .comment-reply-title small{ display:inline-block; margin-left:12px; }
/* "Cancel reply" — was a bare invisible link; now a small ghost button */
.post-comments #cancel-comment-reply-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; font-weight:500; color:var(--text-dim);
  border:1px solid var(--line-strong); border-radius:100px; padding:5px 12px;
  text-decoration:none; transition:.15s ease; vertical-align:middle;
}
.post-comments #cancel-comment-reply-link::before{
  content:''; display:inline-block; width:9px; height:9px; margin-right:6px; vertical-align:-1px;
  background:currentColor;
  -webkit-mask:var(--i-close) center/contain no-repeat;
          mask:var(--i-close) center/contain no-repeat;
}
.post-comments #cancel-comment-reply-link:hover{ color:var(--danger-text); border-color:var(--danger-text); }
.post-comments .comment-form-cookies-consent{ display:flex; align-items:flex-start; gap:8px; }
.post-comments .comment-form-cookies-consent label{ text-transform:none; letter-spacing:0; font-family:var(--body); font-size:13px; color:var(--text-faint); margin:0; }
.bio{ display:flex; gap:16px; align-items:center; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); padding:20px 22px; }
.bio b{ font-family:var(--display); font-size:16px; }
.bio p{ margin:4px 0 0; color:var(--text-dim); font-size:13.5px; }

.empty{ text-align:center; padding:70px 20px; color:var(--text-faint); font-family:var(--mono); font-size:14px; grid-column:1/-1; }

@media(max-width:980px){ .vgrid, .bgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .vgrid, .bgrid{ grid-template-columns:1fr; } .lsearch{ margin-left:0; width:100%; } .lsearch input{ width:100%; } }

/* ============================================================
   ARTICLE — rich build-post formatting (matches the design mockup)
   Works on normal WordPress content; the .callout / .bom helpers below
   are for Custom-HTML blocks when you want the spec boxes from the mockup.
   ============================================================ */
.article > p:first-of-type, .article p.lede{ font-size:19px; line-height:1.6; color:var(--text); margin:0 0 24px; }
.article h2{ display:flex; align-items:center; gap:12px; }
.article h2::before{ content:''; width:10px; height:10px; background:var(--teal); border-radius:2px; flex:0 0 auto; }
.article ul{ list-style:none; padding-left:0; }
.article ul > li{ position:relative; padding-left:24px; }
.article ul > li::before{ content:'+'; position:absolute; left:0; top:0; color:var(--teal-text); font-family:var(--mono); }
/* …but NOT inside WooCommerce blocks. The order-received page is an ordinary
   Page holding the Order Confirmation block, so it renders through page.php
   inside .article — which put a teal "+" under "Order number", "Total" and the
   rest, overlapping the text on phones where those items stack. */
.article [class*="wp-block-woocommerce"] ul > li::before,
.article [class*="wc-block"] ul > li::before,
.article ul.woocommerce-order-overview > li::before,
.article ul.order_details > li::before,
.article .woocommerce ul > li::before{ content:none; }
.article [class*="wp-block-woocommerce"] ul > li,
.article [class*="wc-block"] ul > li,
.article ul.woocommerce-order-overview > li,
.article ul.order_details > li,
.article .woocommerce ul > li{ padding-left:0; }
/* Same root cause, wider blast radius: cart / checkout / order-confirmation are
   ordinary Pages, so every WooCommerce block inherits build-post typography.
   The 20px image margin was pushing each order-summary thumbnail below its own
   product name. WooCommerce styles these components itself — get out of the way. */
.article [class*="wc-block"] img,
.article [class*="wp-block-woocommerce"] img{ margin:0; max-width:100%; }
.article [class*="wc-block"] blockquote,
.article [class*="wp-block-woocommerce"] blockquote{ border:none; padding:0; margin:0; }

/* ---- block checkout: the order-summary quantity ----
   WooCommerce drops a small circle holding a bare number, in a colour that
   matched its own background here. It becomes a "×N" tag sitting INSIDE the
   photo's top-left corner: on the photo so it clearly belongs to that product,
   small enough not to swamp a 64px thumbnail, and on the same line as the
   product name because the photo is pinned to the top of its column. */
.wc-block-components-order-summary-item{ align-items:flex-start; }
.wc-block-components-order-summary-item__image{
  align-self:flex-start; align-items:flex-start; height:auto;
  width:64px; min-width:64px; position:relative;
}
.wc-block-components-order-summary-item__image img{
  width:64px; height:64px; object-fit:cover; border-radius:var(--r-sm); display:block;
}
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__quantity{
  position:absolute; top:4px; left:4px; right:auto; bottom:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; min-width:0; height:auto; padding:1px 6px;
  border-radius:100px; background:var(--teal) !important; color:var(--btn-ink) !important;
  border:none; box-shadow:0 1px 4px rgba(0,0,0,.35);
  font-family:var(--mono); font-size:10.5px; font-weight:600; line-height:1.6; letter-spacing:.02em;
}
.wc-block-components-order-summary-item__quantity > span[aria-hidden="true"]{ color:var(--btn-ink) !important; }
.wc-block-components-order-summary-item__quantity > span[aria-hidden="true"]::before{ content:'×'; margin-right:1px; opacity:.7; }
/* the badge also carries a screen-reader copy ("2 items"). If anything stops
   defining .screen-reader-text, that text lands inside the pill and doubles its
   width — pin it out of sight here rather than trusting another stylesheet. */
.wc-block-components-order-summary-item__quantity .screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* the description under each line is marketing copy — two lines is plenty in a
   summary column, and it keeps the order total above the fold */
.wc-block-components-order-summary-item__description p{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin:0;
}
@media (max-width:600px){
  .wc-block-components-order-summary-item__image,
  .wc-block-components-order-summary-item__image img{ width:56px; min-width:56px; height:56px; }
}
.article figure{ margin:26px auto; }
.article figure img{ width:100%; margin:0 auto; }
.article figcaption, .article .wp-element-caption{ font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-top:10px; text-align:center; }
.article .wp-block-quote, .article blockquote{ border-left:3px solid var(--teal); padding:4px 0 4px 24px; margin:34px 0; }
.article .wp-block-table table{ width:100%; }
.article table.bom td:last-child, .article table.bom th:last-child{ text-align:right; font-family:var(--mono); }

/* spec callout box — Custom HTML block:
   <div class="callout"><div class="ctitle">Drive spec</div>
     <div class="crow"><span>Motors</span><span>2× N20 · 600 RPM</span></div> … </div> */
.callout{ border:1px solid var(--teal-deep); background:var(--teal-ink); border-radius:var(--r); padding:6px 22px; margin:30px 0; }
.callout .ctitle{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-text); padding:16px 0 4px; }
.callout .crow{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px dashed rgba(120,210,214,.25); font-family:var(--mono); font-size:14px; }
.callout .crow:last-child{ border-bottom:none; }
.callout .crow span:first-child{ color:var(--text-dim); }
.callout .crow span:last-child{ color:var(--text); font-weight:500; }

/* ============================================================
   LANGUAGE SWITCHER (shows when Polylang or WPML is active)
   ============================================================ */
.langsw{ position:relative; display:inline-flex; }
.langsw-btn{ display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; color:var(--text-dim); font-family:var(--mono); font-size:12px; letter-spacing:.03em; padding:0; cursor:pointer; line-height:1; }
.langsw-btn:hover{ color:var(--teal-text); }
.langsw-btn svg{ width:14px; height:14px; }
.langsw-btn .caret{ width:9px; height:9px; opacity:.7; }
.langsw-menu{ position:absolute; right:0; top:calc(100% + 9px); min-width:168px; background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:6px; display:none; flex-direction:column; gap:2px; z-index:300; box-shadow:0 18px 40px -18px rgba(0,0,0,.85); }
.langsw:hover .langsw-menu, .langsw:focus-within .langsw-menu{ display:flex; }
.langsw-menu a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; font-family:var(--body); font-size:13.5px; color:var(--text-dim); }
.langsw-menu a:hover{ background:var(--bg-3); color:var(--text); }
.langsw-menu a.on{ color:var(--teal-text); }
.langsw-menu a .code{ font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-left:auto; }
.langsw-menu a.on .code{ color:var(--teal-text); }
.langsw-menu img.flag, .langsw-menu .flag img{ width:18px; height:auto; border-radius:2px; }

@media(max-width:560px){ .langsw-btn span.lbl{ display:none; } }

/* ---- TranslatePress switcher, restyled into the header pill ---- */
.langsw-trp{ display:inline-flex; align-items:center; line-height:1; }
.langsw-trp .trp-language-switcher-container,
.langsw-trp .trp-language-switcher{ position:relative; background:transparent !important; }
.langsw-trp .trp-language-switcher > div,
.langsw-trp .trp-ls-shortcode-current-language{
  background:var(--bg-1) !important; border:1px solid var(--line-strong) !important; border-radius:100px !important;
  color:var(--text-dim) !important; font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.05em;
  padding:5px 12px !important; cursor:pointer; height:auto !important;
}
.langsw-trp .trp-ls-shortcode-language{
  background:var(--bg-2) !important; border:1px solid var(--line-strong) !important; border-radius:10px !important;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85); z-index:300; margin-top:6px !important; padding:4px !important;
  min-width:130px;
}
.langsw-trp .trp-ls-shortcode-language a,
.langsw-trp a{
  color:var(--text-dim) !important; font-family:var(--mono) !important; font-size:12px !important;
  padding:7px 10px !important; border-radius:6px; display:flex !important; align-items:center; gap:8px;
  background:transparent !important; text-decoration:none !important;
}
.langsw-trp .trp-ls-shortcode-language a:hover{ background:var(--bg-3) !important; color:var(--teal-text) !important; }
.langsw-trp a.trp-ls-shortcode-disabled-language{ opacity:.55; }
.langsw-trp img.trp-flag-image{ width:16px; height:auto; border-radius:2px; display:inline-block; margin:0 !important; }

/* ============================================================
   UPCOMING EVENTS (homepage) + The Events Calendar theming
   ============================================================ */
.events-sec{ padding:2px 0 48px; }
.events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ecard{ display:flex; flex-direction:column; background:var(--bg-1); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; transition:.18s ease; }
.ecard:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
.ecard-media{ position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden; }
.ecard-media img{ width:100%; height:100%; object-fit:cover; }
/* date chip is always a dark tile, so the text colours are literal light values
   — var(--text) went dark in light mode and vanished against the chip */
.edate{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; align-items:center; min-width:48px; padding:7px 9px; background:rgba(9,13,15,.88); border:1px solid var(--teal-deep); border-radius:var(--r-sm); line-height:1; }
.edate b{ font-family:var(--display); font-weight:600; font-size:20px; color:#e9f3f4; }
.edate i{ font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#38ecef; margin-top:4px; }
.ecard-body{ padding:15px 16px 17px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ecard-body h3{ font-family:var(--display); font-weight:600; font-size:17px; line-height:1.2; color:var(--text); }
.emeta{ font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-top:auto; }
@media(max-width:980px){ .events-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .events-grid{ grid-template-columns:1fr; } }

/* The Events Calendar — the plugin ships light-mode styles. We re-skin it through
   its own CSS variables AND map those to the SoBotz design tokens, so the calendar
   automatically follows BOTH the dark and the light theme (no hardcoded colours). */
.tribe-common, .tribe-events, .tribe-theme-sobotz{
  --tec-color-text-primary:var(--text) !important;
  --tec-color-text-primary-light:var(--text-dim) !important;
  --tec-color-text-secondary:var(--text-dim) !important;
  --tec-color-text-secondary-light:var(--text-dim) !important;
  --tec-color-text-disabled:var(--text-faint) !important;
  --tec-color-text-events-title:var(--text) !important;
  --tec-color-text-event-date:var(--text-dim) !important;
  --tec-color-background:transparent !important;
  --tec-color-background-primary:transparent !important;
  --tec-color-background-secondary:var(--bg-2) !important;
  --tec-color-border-primary:var(--line-strong) !important;
  --tec-color-border-secondary:var(--line-soft) !important;
  --tec-color-border-default:var(--line-soft) !important;
  --tec-color-accent-primary:var(--teal) !important;
  --tec-color-accent-primary-hover:var(--teal-bright) !important;
  --tec-color-accent-primary-active:var(--teal-deep) !important;
  --tec-color-accent-primary-background:var(--teal-ink) !important;
  --tec-color-button-primary:var(--teal) !important;
  --tec-color-button-primary-hover:var(--teal-bright) !important;
}
/* headings + primary text */
.tribe-common .tribe-common-h1, .tribe-common .tribe-common-h2, .tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4, .tribe-common .tribe-common-h5, .tribe-common .tribe-common-h6,
.tribe-common .tribe-common-b1, .tribe-common .tribe-common-b2, .tribe-common .tribe-common-anchor,
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events h1, .tribe-events h2, .tribe-events h3,
.single-tribe_events .tribe-events-single-event-title{ color:var(--text) !important; font-family:var(--display) !important; }
/* secondary text */
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-list__event-venue,
.tribe-events .tribe-events-calendar-list__event-description,
.tribe-events .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events time, .tribe-events address,
.tribe-events .tribe-events-header__title,
.single-tribe_events .tribe-events-event-meta,
.single-tribe_events .tribe-events-content,
.single-tribe_events .tribe-events-content p{ color:var(--text-dim) !important; font-family:var(--body) !important; }
.tribe-common a:hover, .tribe-events a:hover,
.tribe-events .tribe-events-calendar-list__event-title-link:hover{ color:var(--teal-text) !important; }

/* single event page: cap the featured image height on big screens */
.single-tribe_events .tribe-events-event-image{ max-width:860px; margin:0 auto 20px; }
.single-tribe_events .tribe-events-event-image img{ max-height:440px; width:100%; object-fit:cover; }

/* ---- the whole events / filter bar: dark fields, teal submit ---- */
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar__search,
.tribe-events #tribe-events-events-bar,
.tribe-events .tribe-events-c-top-bar,
.tribe-events .tribe-events-header,
.tribe-events .tribe-events-c-events-bar__search-button{ background:transparent !important; }
.tribe-events .tribe-events-c-search__input,
.tribe-events .tribe-common-form-control-text__input,
.tribe-events #tribe-events-events-bar input[type="text"],
.tribe-events #tribe-events-events-bar input[type="search"],
.tribe-events .tribe-events-c-search__input-control input,
.tribe-events input.tribe-events-c-search__input{
  background:var(--bg-1) !important; color:var(--text) !important;
  border:1px solid var(--line-soft) !important; border-radius:var(--r-sm) !important;
}
.tribe-events .tribe-events-c-search__input::placeholder,
.tribe-events .tribe-common-form-control-text__input::placeholder{ color:var(--text-faint) !important; }
.tribe-events .tribe-events-c-search__input-control-icon-svg,
.tribe-events .tribe-common-svgicon{ color:var(--text-faint) !important; }
/* search / find button. This used to be --teal-deep with hardcoded white, on the
   claim that it "reads clearly on BOTH themes" — dark was never measured, and
   white on #0c9499 is 3.68:1. It was also the only filled control on the site
   wearing a third teal. It reads the button tokens now like every other primary
   button: 8.66:1 dark, 5.78:1 light, and one teal across the whole site. */
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-events-bar__search-button{
  background:var(--btn-fill) !important; color:var(--btn-ink) !important; border:none !important;
  border-radius:var(--r-sm) !important; font-family:var(--mono) !important; font-weight:600 !important;
}
.tribe-events .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-events-bar__search-button:hover{ background:var(--btn-fill-hover) !important; color:var(--btn-ink) !important; }
.tribe-events .tribe-events-c-events-bar__filter-button{ background:transparent !important; color:var(--text) !important; border:1px solid var(--line-soft) !important; }
.tribe-events .tribe-events-c-events-bar__filter-button:hover{ border-color:var(--teal) !important; color:var(--teal-text) !important; }

/* ---- view selector (List / Month / Day) — was sitting on a white block ---- */
.tribe-events .tribe-events-c-view-selector,
.tribe-events .tribe-events-c-view-selector__content,
.tribe-events .tribe-events-c-view-selector__list,
.tribe-events .tribe-events-c-events-bar__views,
.tribe-events .tribe-events-c-events-bar__views-list,
.tribe-events .tribe-events-c-view-selector--tabs,
.tribe-events .tribe-events-c-view-selector__button{ background:transparent !important; border:none !important; box-shadow:none !important; }
.tribe-events .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__button-text{ background:transparent !important; color:var(--text-dim) !important; font-family:var(--mono) !important; }
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__list-item-link:hover{ color:var(--teal-text) !important; }
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after{ background:var(--teal) !important; }

/* ---- events bar: search + Find Events + view selector as ONE control ---- */
.tribe-events .tribe-events-c-events-bar{
  display:flex !important; flex-wrap:wrap; align-items:stretch; gap:0;
  background:var(--bg-1) !important; border:1px solid var(--line-soft) !important;
  border-radius:var(--r) !important; overflow:hidden; margin-bottom:18px;
}
.tribe-events .tribe-events-c-events-bar__search-container,
.tribe-events .tribe-events-c-search{ flex:1 1 320px; min-width:0; display:flex; align-items:center; }
.tribe-events .tribe-events-c-search__input-control{ flex:1; min-width:0; }
.tribe-events .tribe-events-c-search__input,
.tribe-events input.tribe-events-c-search__input{
  border:none !important; background:transparent !important; height:52px; border-radius:0 !important;
}
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-events-bar__search-button{ border-radius:0 !important; padding:0 24px !important; height:auto; }
/* the List / Month / Day group gets its own compartment */
.tribe-events .tribe-events-c-events-bar__views,
.tribe-events .tribe-events-c-view-selector{
  border-left:1px solid var(--line-soft) !important; display:flex; align-items:center;
}
.tribe-events .tribe-events-c-view-selector__list{ display:flex; align-items:center; gap:4px; padding:0 8px !important; margin:0; }
.tribe-events .tribe-events-c-view-selector__list-item{ list-style:none; }
.tribe-events .tribe-events-c-view-selector__list-item-link{
  display:block; padding:14px 12px !important; font-family:var(--mono) !important; font-size:13px !important;
  color:var(--text-dim) !important; background:transparent !important;
}
.tribe-events .tribe-events-c-view-selector__list-item-link:hover{ color:var(--teal-text) !important; }
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link{ color:var(--teal-text) !important; font-weight:600 !important; }
.tribe-events .tribe-events-c-view-selector__list-item-text{ color:inherit !important; }
@media(max-width:720px){
  .tribe-events .tribe-events-c-events-bar__views,
  .tribe-events .tribe-events-c-view-selector{ border-left:none !important; border-top:1px solid var(--line-soft) !important; flex:1 1 100%; }
}

/* ---- top bar: prev / next / Today / "Upcoming" — one coherent control row ---- */
.tribe-events .tribe-events-c-top-bar{ display:flex; align-items:center; gap:8px; }
.tribe-events .tribe-events-c-top-bar__nav-link{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; color:var(--text-dim) !important;
  border:1px solid var(--line-strong) !important; border-radius:var(--r-sm) !important;
}
.tribe-events .tribe-events-c-top-bar__nav-link svg,
.tribe-events .tribe-events-c-top-bar__nav-link-icon-svg{ width:14px; height:14px; }
.tribe-events .tribe-events-c-top-bar__nav-link-icon-svg path{ fill:currentColor !important; stroke:currentColor; }
.tribe-events .tribe-events-c-top-bar__today-button{
  background:transparent !important; color:var(--text-dim) !important;
  border:1px solid var(--line-strong) !important; border-radius:100px !important;
  font-family:var(--mono) !important; font-size:12px !important; font-weight:500 !important;
  padding:8px 14px !important; height:36px;
}
.tribe-events .tribe-events-c-top-bar__nav-link:hover,
.tribe-events .tribe-events-c-top-bar__today-button:hover{ border-color:var(--teal) !important; color:var(--teal-text) !important; background:var(--teal-ink) !important; }
/* the "Upcoming ▾" datepicker toggle reads as a heading, not a boxed button */
.tribe-events .tribe-events-c-top-bar__datepicker-button{
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:var(--text) !important; font-family:var(--display) !important; font-size:21px !important; font-weight:600 !important;
  padding:0 4px !important; margin-left:6px;
}
.tribe-events .tribe-events-c-top-bar__datepicker-button:hover{ color:var(--teal-text) !important; }
.tribe-events .tribe-events-c-top-bar__datepicker-time{ color:var(--text) !important; }
/* month separator ("August 2026") + list separators */
.tribe-events .tribe-events-calendar-list__month-separator-text{ font-family:var(--mono) !important; font-size:12px !important; letter-spacing:.1em; text-transform:uppercase; }
.tribe-events .tribe-events-c-nav__list-item a,
.tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next{
  background:transparent !important; color:var(--text-dim) !important; font-family:var(--mono) !important;
}
.tribe-events .tribe-events-c-nav__prev:hover, .tribe-events .tribe-events-c-nav__next:hover{ color:var(--teal-text) !important; }
.tribe-events .tribe-events-c-nav{ border-top:1px solid var(--line-soft) !important; background:transparent !important; }
/* events bar container: rounded, bordered, on theme surface */
.tribe-events .tribe-events-c-events-bar{ border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; background:var(--bg-1) !important; }

/* ---- list rows / month grid / messages ---- */
.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-list__event{ background:transparent !important; border-color:var(--line-soft) !important; }
.tribe-events .tribe-events-calendar-list__month-separator-text{ color:var(--text-faint) !important; background:var(--bg) !important; }
.tribe-events .tribe-events-calendar-month__day{ border-color:var(--line-soft) !important; background:transparent !important; }
.tribe-events .tribe-events-calendar-month__header-column-title{ color:var(--text-dim) !important; }
/* today / selected day: mark it with a ring + teal-ink fill, and keep the date
   NUMBER in the body colour — it used to be teal on teal, i.e. unreadable */
.tribe-events .tribe-events-calendar-month__day--current{ background:var(--teal-ink) !important; box-shadow:inset 0 0 0 1px var(--teal-deep); }
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day--selected .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day-date-link{
  color:var(--text) !important; background:transparent !important; font-family:var(--display) !important; font-weight:600 !important;
}
.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date{ color:var(--text-faint) !important; }
.tribe-events .tribe-events-calendar-month__day-date-link:hover{ color:var(--teal-text) !important; }
/* event chips inside day cells — the plugin ships BLUE bars with near-black
   text, invisible on the dark theme */
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-title,
.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-title{
  color:var(--text) !important; font-family:var(--display) !important;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events .tribe-events-calendar-month__multiday-event-bar:hover .tribe-events-calendar-month__multiday-event-bar-title{ color:var(--teal-text) !important; }
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner--hover,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner--focus{
  background:var(--teal-ink) !important; border-left:3px solid var(--teal) !important;
}
.tribe-events .tribe-events-calendar-month__calendar-event-datetime{ color:var(--text-faint) !important; }
.tribe-events .tribe-events-calendar-month__calendar-event-tooltip,
.tribe-events .tribe-events-calendar-month__day-cell--mobile{ background:var(--bg-2) !important; border-color:var(--line-strong) !important; }
.tribe-events .tribe-events-calendar-month__mobile-events-icon--event{ background:var(--teal) !important; }
.tribe-events .tribe-events-c-messages__message,
.tribe-events .datepicker, .tribe-events .tribe-events-c-top-bar__datepicker-container{ background:var(--bg-1) !important; color:var(--text) !important; border-color:var(--line-soft) !important; }
/* Previous / Next Events strip: a plain rule, not a card. It used to be filled
   with --bg-1, which is pure white in light mode = the white rectangle.
   NOTE: exactly ONE of these gets the border — putting border-top on all three
   nested elements is what drew the doubled line. */
.tribe-events .tribe-events-c-nav,
.tribe-events .tribe-events-c-nav__list,
.tribe-events .tribe-events-calendar-list-nav,
.tribe-events .tribe-events-calendar-month-nav{
  background:transparent !important; box-shadow:none !important; border:none !important; color:var(--text-dim) !important;
}
.tribe-events .tribe-events-c-nav{ border-top:1px solid var(--line-soft) !important; }
/* single event page surfaces */
.single-tribe_events .tribe-events-meta-group,
.single-tribe_events .tribe-events-cal-links,
.single-tribe_events #tribe-events-content{ background:transparent !important; color:var(--text-dim) !important; }

/* featured image on the single event page: WordPress prints stale width/height
   attributes, and the fixed height stretched the photo — height:auto restores
   the true aspect ratio. Same guard on list/month cards. */
.single-tribe_events .tribe-events-event-image img,
.tribe-events-event-image img,
.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events img.wp-post-image{ width:100%; height:auto !important; aspect-ratio:auto !important; object-fit:cover; border-radius:var(--r-lg); }
.tribe-events-event-image{ margin:0 0 20px; }

/* list-view featured images are made clickable by theme.js — show it */
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper a{ display:block; cursor:pointer; }

/* ---- The Events Calendar buttons (subscribe / export / ical) — theme them ---- */
.tribe-common .tribe-common-c-btn-border,
.tribe-common a.tribe-common-c-btn-border,
.tribe-events .tribe-events-c-subscribe-dropdown__button{
  background:var(--bg-2) !important; color:var(--text) !important;
  border:1px solid var(--line-strong) !important; border-radius:var(--r-sm) !important;
  font-family:var(--mono) !important; font-weight:600 !important;
}
.tribe-common .tribe-common-c-btn-border:hover,
.tribe-events .tribe-events-c-subscribe-dropdown__button:hover{
  background:var(--teal-ink) !important; color:var(--teal-text) !important; border-color:var(--teal) !important;
}
.tribe-events .tribe-events-c-subscribe-dropdown__button-text{ color:inherit !important; font-family:var(--mono) !important; }
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn{
  background:var(--teal) !important; color:var(--btn-ink) !important; border:none !important;
  border-radius:var(--r-sm) !important; font-family:var(--mono) !important; font-weight:600 !important;
}
.tribe-common .tribe-common-c-btn:hover{ background:var(--teal-bright) !important; }
.tribe-events .tribe-events-c-subscribe-dropdown__content{
  background:var(--bg-2) !important; border:1px solid var(--line-strong) !important; border-radius:var(--r-sm) !important;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8) !important;
}
.tribe-events .tribe-events-c-subscribe-dropdown__list-item a{ color:var(--text-dim) !important; font-family:var(--body) !important; }
.tribe-events .tribe-events-c-subscribe-dropdown__list-item a:hover{ color:var(--teal-text) !important; background:var(--bg-3) !important; }