/*
Theme Name: PGB Sciences
Theme URI: https://pgbsciences.com/
Description: Custom WordPress block theme for pgbsciences.com — members-only crypto commerce. Purpose-built, minimal, performance-first. Uses WooCommerce's native blocks and WordPress's Full Site Editing system. No third-party theme dependency.
Author: PGB Sciences
Author URI: https://pgbsciences.com/
Version: 0.5.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.2
Text Domain: pgb-theme
Tags: block-theme, full-site-editing, woocommerce, custom-theme
License: Proprietary — internal use for pgbsciences.com only
*/

/*
 * Global styles live in theme.json (design system) and editor/front-end block CSS.
 * This file contains only overrides that can't be expressed in theme.json.
 *
 * Add styles sparingly here. Prefer theme.json for:
 *   - colors, typography, spacing, layout, borders, shadows
 *   - block-level defaults (button styles, heading sizes, etc.)
 * Use this file for:
 *   - Custom selectors outside the block system
 *   - WooCommerce template overrides not exposed via theme.json
 *   - Crypto gateway styling hooks (or use assets/css/cpg-styling.css instead)
 */

/* ==========================================================================
   ACCESSIBILITY — skip link & screen-reader-only
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: 1rem;
  background: var(--color-skip-bg);
  color: var(--color-on-primary);
  z-index: 100000;
  text-decoration: none;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ==========================================================================
   HEADER — site logo + primary navigation spacing
   ==========================================================================
   The wp:site-logo `{"width":120}` attribute doesn't always emit an inline
   width / CSS var on the frontend, so the logo collapses to 0 width. Set a
   reliable max-width here. The image stays proportional via height:auto.

   The wp:navigation block's `blockGap` attribute doesn't reliably map to flex
   gap on the frontend, so we set it explicitly. Same treatment for the right-
   side header group so nav / loginout / mini-cart don't crowd each other.
*/
.wp-block-site-logo {
  width: 140px;
  flex: 0 0 auto;
  line-height: 0;
}

.wp-block-site-logo a {
  display: block;
  width: 100%;
}

.wp-block-site-logo img,
.wp-block-site-logo .custom-logo {
  width: 100%;
  height: auto;
  display: block;
}
.wp-block-navigation,
.wp-block-navigation__container {
  gap: 1.25rem;
}

.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content {
  color: var(--color-ink);
  text-decoration: none;
  transition: color 120ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--color-aqua);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Header right-side group: nav + login + cart */
header .wp-block-group.is-content-justification-right {
  gap: 1.5rem;
  align-items: center;
}

/* ==========================================================================
   Root-level horizontal breathing room — desktop bump
   ==========================================================================
   theme.json sets spacing|6 (2rem / 32px) as the root padding for
   useRootPaddingAwareAlignments — applied via WP's .has-global-padding
   class which reads --wp--style--root--padding-(left|right). That base
   is fine on phones/tablets. On desktop we bump it to 4rem so the
   full-width header, footer, and alignwide grid all breathe more. */
@media (min-width: 1100px) {
  .wp-site-blocks {
    --wp--style--root--padding-left: 4rem;
    --wp--style--root--padding-right: 4rem;
  }
}

/* ==========================================================================
   Sticky site header — cart icon always reachable while scrolling
   ==========================================================================
   The template-part wrapper and the inner <header.wp-block-group> both
   get position:sticky so the whole banner stays pinned regardless of
   which one the theme ends up rendering as the outer shell. `top` is
   offset when WP admin bar is present (logged-in frontend). */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg); /* matches the page background — prevents transparent sticky */
}

/* Breathing room between main content (product grid, etc.) and footer.
   Belt-and-braces alongside main's padding-bottom — preset spacing vars
   are unreliable (Day 3 gotcha #12), so this guarantees separation. */
footer.wp-block-template-part {
  margin-top: 3rem;
}

/* Footer typography — match the header's compact scale.
   h4 column titles and all footer text/links drop to the same
   ~0.9-0.95rem range used by the nav. Overrides the footer.html
   `fontSize:"large"` block attr on h4s. */
footer.wp-block-template-part h4 {
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--color-ink);
}
footer.wp-block-template-part p,
footer.wp-block-template-part a,
footer.wp-block-template-part .wp-block-navigation-item__content {
  font-size: 0.875rem;
  line-height: 1.55;
}
footer.wp-block-template-part .wp-block-navigation .wp-block-navigation-item {
  margin-bottom: 0.25rem;
}

/* Footer column block — breathing room.
   1. Modest top padding inside the footer so the column headers aren't
      cramped against the top border line. Template inlines spacing-8
      (4rem) which renders smaller due to a CSS override elsewhere; 3rem
      !important here gives a sane gap without overshooting into excess
      whitespace.
   2. Widen the column gap so the About column's description text
      doesn't visually run into the next column's "Shop" link.
      (The default `wp-block-columns` gap is too tight when one column
      is prose and the next is a vertical nav.) */
footer.wp-block-template-part > footer.wp-block-group {
  padding-top: 1.5rem !important;
}
footer.wp-block-template-part .wp-block-columns {
  gap: 3rem !important;
  column-gap: 3rem !important;
}

/* Sticky-to-viewport-bottom footer. On short pages (e.g. filters that
   return only a few products), make the footer hug the viewport bottom
   rather than floating in the middle of white space. body is a flex
   column, .wp-site-blocks inherits that via flex:1, main grows to fill
   remaining space, footer naturally ends up at the bottom. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.admin-bar {
  min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
  body.admin-bar {
    min-height: calc(100vh - 46px);
  }
}
.wp-site-blocks {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* Any direct child that isn't the header/footer template-part grows
   to fill remaining space (pushes footer to viewport bottom). Also
   gets a top-padding baseline so the sticky header doesn't crowd the
   content (archive-product.html's inline padding-top:2rem wins on
   shop pages via higher specificity; single-product + content pages
   pick up the 2rem from this rule). */
.wp-site-blocks > :not(.wp-block-template-part) {
  flex: 1 0 auto;
  padding-top: 2rem;
}
body.admin-bar header.wp-block-template-part {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

/* ==========================================================================
   "N in cart" caption — single-product pages only
   ==========================================================================
   Catalog cards never grow: WC's native AJAX "Add to cart" cycles the
   button label ("Adding…" → "Added ✓" → "Add to cart") via the inline
   handler in inc/shop-grid.php. Customers manage quantity in the
   mini-cart drawer, not on the card.

   On PDPs (simple + variable), form.cart stays visible always; this
   small caption appears beneath it once the product (or selected
   variation) is in the cart, with a link to the cart page. */
.pgb-cart-caption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-cart-caption);
  font-variant-numeric: tabular-nums;
}
.pgb-cart-caption strong {
  color: var(--color-text);
  font-weight: 600;
}
.pgb-cart-caption a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pgb-cart-caption a:hover {
  text-decoration-thickness: 2px;
}

/* PDP Add-to-cart button — give it room to breathe. WC's default
   button padding (~0.5em) is too tight; this sits inline next to the
   qty input on the single-product page and should read as a
   comfortable primary action. */
body.single-product .single_add_to_cart_button {
  padding: 0.7rem 1.5rem !important;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* PDP submit-button busy + success states (driven by qty-stepper.js). */
.single_add_to_cart_button[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}
.single_add_to_cart_button.pgb-add-ok {
  background-color: var(--color-added-fill);
  border-color: var(--color-added-fill);
}

/* WC's classic AJAX add appends a "View cart →" link sibling next to
   the Add-to-cart button on success. We don't want it inside the
   catalog card (jitters row heights and duplicates the mini-cart
   drawer). Match ANY descendant of .pgb-card (not just direct child of
   .pgb-card__body) in case WC ever wraps the link in a span or moves
   the insertion point. !important on display + zero-out box props so
   nothing — not WC core CSS, not any inline style — can re-show it. */
.pgb-card .added_to_cart {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Per-SKU "N in cart" badge on the catalog Add-to-cart button.
   The value is rendered by CSS via attr(data-cart-qty); qty-stepper.js
   sets/clears that attribute as cart state changes. Pseudo-element
   approach is required because inc/shop-grid.php cycles the button
   label with jQuery `.text()` ("Adding…" → "Added ✓" → "Add to cart"),
   which wipes any child DOM but cannot touch a ::after pseudo-element.

   Placed INLINE-FLOW after the text (not absolutely positioned on the
   right edge), so the whole "Add to cart  1" composition centers as
   a single unit — visually balanced just like the .pgb-card__cta--notify
   "Notify me" button. */
.pgb-card__cta.add_to_cart_button[data-cart-qty] {
  white-space: nowrap;
}
.pgb-card__cta.add_to_cart_button[data-cart-qty]::after {
  content: attr(data-cart-qty);
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  margin-top: -2px; /* nudge to baseline-align with the button text */
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--color-success-fill);
  color: var(--color-on-primary);
  font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Hide the badge during the brief "Adding…" / "Added ✓" label cycle so
   the button doesn't read "Adding… 1" or "Added ✓ 1" mid-transition.
   The inline JS in inc/shop-grid.php sets these classes on
   adding_to_cart / added_to_cart; the data-cart-qty attribute is
   updated by qty-stepper.js so when the classes clear (1.8s later)
   the badge re-appears with the new count. */
.pgb-card__cta.add_to_cart_button.loading::after,
.pgb-card__cta.add_to_cart_button.added::after {
  display: none;
}

/* ==========================================================================
   WOOCOMMERCE BLOCK OVERRIDES — minimal, extend in theme.json where possible
   ========================================================================== */

/* Free-shipping threshold banner on cart/checkout */
.wc-block-components-totals-shipping__free-shipping-message {
  font-weight: 600;
}

/* ==========================================================================
   PRODUCT GRID — 5-col responsive layout
   ==========================================================================
   Simplified after product icons were standardized to uniform 1200x1200 PNG.
   We trust WC to render natively; just set grid layout + card typography.
   No more !important hacks required — source images are uniform.
*/

.wp-block-woocommerce-product-template.wc-block-product-template__responsive.columns-5,
.wp-block-woocommerce-product-collection .wc-block-product-template__responsive.columns-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem; /* 24px uniform — matches Lab Ice breathing. Literal because WP doesn't expose --wp--preset--spacing--* as root vars. */
}

@media (max-width: 1100px) {
  .wp-block-woocommerce-product-template.wc-block-product-template__responsive.columns-5,
  .wp-block-woocommerce-product-collection .wc-block-product-template__responsive.columns-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .wp-block-woocommerce-product-template.wc-block-product-template__responsive.columns-5,
  .wp-block-woocommerce-product-collection .wc-block-product-template__responsive.columns-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .wp-block-woocommerce-product-template.wc-block-product-template__responsive.columns-5,
  .wp-block-woocommerce-product-collection .wc-block-product-template__responsive.columns-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Product card: tight, left-aligned */
.wp-block-woocommerce-product-template > li,
.wc-block-product-template__item {
  padding: 0;
  margin: 0;
  text-align: left;
  list-style: none;
}

/* Product image: border radius only — no sizing overrides needed since
   source images are now uniform squares */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-image {
  border-radius: 4px;
  overflow: hidden;
}

/* Product name: confident, quiet label — Geist 500, Ink, tight tracking */
.wp-block-woocommerce-product-template h3,
.wp-block-woocommerce-product-template .wp-block-post-title {
  margin: 0.5rem 0 0 0; /* spacing--2 literal, WP root vars unreliable */
  font-family: "Geist", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.015em;
  color: var(--color-ink);
  /* Single-line truncation — full text remains in DOM for screen readers */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title link: no default underline; surface a quiet one on hover/focus */
.wp-block-woocommerce-product-template .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.wp-block-woocommerce-product-template .wp-block-post-title a:hover,
.wp-block-woocommerce-product-template .wp-block-post-title a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Price: Geist Mono 500, Slate — lets the name dominate */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
  margin: 0.25rem 0 0 0; /* spacing--1 literal */
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-muted);
}

/* ==========================================================================
   HOME PAGE — trust / quality copy under the hero
   ========================================================================== */
.pgb-home-trust {
  color: var(--color-account-text);
}
.pgb-home-trust h2 {
  color: var(--color-ink);
  letter-spacing: 0.01em;
}
.pgb-home-trust p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  padding-left: 1.25rem;
  position: relative;
  color: var(--color-account-text);
}
.pgb-home-trust p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-aqua); /* Aqua accent dot */
}

/* ==========================================================================
   MY ACCOUNT — sidebar nav polish
   ==========================================================================
   WC's default my-account renders the navigation as a bare <ul> in the
   left column. Tighten the vertical spacing, give it a subtle panel
   frame, and style the current-endpoint state in ink so members can
   scan where they are at a glance.
*/
/* Two-column grid for the logged-in my-account dashboard: nav on the
   left, content on the right. Only applies when the nav actually
   renders so the logged-out login/register layout isn't affected.
   The named-areas approach keeps any <div.woocommerce-notices-wrapper>
   spanning full width above. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas:
    "notices notices"
    "nav     content";
  column-gap: 2rem;
  row-gap: 1rem;
  align-items: start;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
  grid-area: notices;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
  grid-area: nav;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
  grid-area: content;
  min-width: 0;
}
@media (max-width: 800px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "notices"
      "nav"
      "content";
    column-gap: 0;
  }
}

.woocommerce-MyAccount-navigation {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.woocommerce-MyAccount-navigation ul li,
.woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-bottom: 1px solid var(--color-row-line);
  background: transparent;
  box-shadow: none;
}
.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.625rem 1rem;
  color: var(--color-account-text);
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 120ms ease, color 120ms ease;
}
.woocommerce-MyAccount-navigation a:hover {
  background: var(--color-row-hover);
  color: var(--color-ink);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--color-row-active);
  color: var(--color-ink);
  font-weight: 600;
}
.woocommerce-MyAccount-content {
  color: var(--color-account-text);
  font-size: 0.95rem;
  line-height: 1.6;
}
.woocommerce-MyAccount-content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-MyAccount-content a:hover {
  color: var(--color-aqua);
}

/* ==========================================================================
   PGB DASHBOARD — v3 (drops container queries, removes COA panel)
   Replace the v2 `.pgb-dashboard` block with THIS entire block.

   Fixes vs v2:
     - Stat tiles were stacking 1-col because the container-query parent
       (WC's .woocommerce-MyAccount-content) wasn't accepting container-type.
       Switched to plain viewport media queries — bulletproof.
     - Content column was too narrow — widened WC's My Account grid ratio
       and removed a max-width cap on .woocommerce-MyAccount-content.
     - Recent orders panel now spans full width (was squeezed into half).
     - COA panel removed entirely.

   ALSO — see the companion PHP patch. You'll need to edit
   inc/account-dashboard.php to remove the COA block.
   ========================================================================== */

/* --- Widen the My Account content column ------------------------------- */
/* Your existing rule uses `grid-template-columns: 200px 1fr` or similar.
   We tighten the nav and stretch the content. Scoped to dashboard body
   class so other WC pages are unaffected. */
.woocommerce-account .woocommerce-MyAccount-content {
	max-width: none !important;
	width: 100%;
}

/* --- Dashboard scope ---------------------------------------------------- */
.pgb-dashboard {
	font-family: var(--wp--preset--font-family--body, "Geist", sans-serif);
	color: var(--color-ink);
}

.pgb-dashboard__greet { margin-bottom: 1.5rem; }
.pgb-dashboard__hello {
	margin: 0 0 0.5rem !important;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}
.pgb-dashboard__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.pgb-dashboard__dot {
	width: 3px; height: 3px; background: currentColor;
	border-radius: 50%; opacity: 0.5;
}

/* --- Stats: force 3-across. Specificity-bumped via the parent selector
       to win over WC's default `.woocommerce-MyAccount-content` flex rules
       (which leak `justify-content: space-between` + flex child widths onto
       the grid). The extra `.pgb-stat` rule zeros out any flex/width WC
       inherits onto grid children. */
.pgb-dashboard { text-align: left; }
.pgb-dashboard__greet,
.pgb-dashboard__panels { text-align: left; }
.woocommerce-MyAccount-content .pgb-dashboard .pgb-dashboard__stats,
.pgb-dashboard .pgb-dashboard__stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 0.625rem !important;
	margin-bottom: 1.5rem !important;
	justify-items: stretch !important;
	grid-auto-flow: row dense;
}
.pgb-dashboard .pgb-dashboard__stats > .pgb-stat {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
}
/* Defensive: wpautop may inject <br> between tile <a> siblings if
   anyone reintroduces blank lines in the PHP template. */
.pgb-dashboard__stats > br { display: none !important; }
@media (max-width: 680px) {
	.woocommerce-MyAccount-content .pgb-dashboard .pgb-dashboard__stats,
	.pgb-dashboard .pgb-dashboard__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.5rem !important;
	}
}
@media (max-width: 420px) {
	.woocommerce-MyAccount-content .pgb-dashboard .pgb-dashboard__stats,
	.pgb-dashboard .pgb-dashboard__stats {
		grid-template-columns: 1fr !important;
	}
}

.pgb-stat {
	position: relative;
	display: block;
	padding: 0.875rem 1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	color: var(--color-ink);
	text-decoration: none !important;
	transition: border-color 120ms ease;
	min-height: 0;
}
.pgb-stat:hover { border-color: var(--color-aqua); }
.pgb-stat__k {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 0.4rem;
	padding-right: 1rem;
	line-height: 1.3;
}
.pgb-stat__v {
	display: block;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.45rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-ink);
}
.pgb-stat__v .woocommerce-Price-amount,
.pgb-stat__v bdi { font-size: inherit; font-weight: inherit; color: inherit; }
.pgb-stat__arrow {
	position: absolute;
	top: 0.75rem; right: 0.875rem;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.8rem;
	color: var(--color-aqua);
	transition: transform 120ms ease;
}
.pgb-stat:hover .pgb-stat__arrow { transform: translateX(2px); }
.pgb-stat--quiet .pgb-stat__v { color: var(--color-text-quiet); }

/* --- Panels: single column, full-width ---------------------------------- */
.pgb-dashboard__panels {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pgb-panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow: hidden;
}
.pgb-panel__hdr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-row-line);
}
.pgb-panel__hdr h3 {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--color-ink);
}
.pgb-panel__hdr a {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--color-ink);
	text-decoration: none !important;
	white-space: nowrap;
}
.pgb-panel__hdr a:hover { color: var(--color-aqua); }
.pgb-panel__body { padding: 0; }
.pgb-panel__empty {
	padding: 1rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin: 0;
}
.pgb-panel__empty a {
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Order row — forced horizontal layout ------------------------------- */
.pgb-order {
	display: grid !important;
	grid-template-columns: 80px 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-row-line);
	text-decoration: none !important;
	color: inherit;
	transition: background 120ms ease;
}
.pgb-order:last-child { border-bottom: 0; }
.pgb-order:hover { background: var(--color-row-hover); }

.pgb-order__id {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.78rem;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-decoration: none !important;
}
.pgb-order__desc { display: flex; flex-direction: column; min-width: 0; }
.pgb-order__title {
	font-size: 0.92rem;
	color: var(--color-text);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none !important;
}
.pgb-order__d {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.72rem;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
	margin-top: 0.1rem;
	text-decoration: none !important;
}
.pgb-order__status {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.22rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	white-space: nowrap;
	line-height: 1.2;
	text-decoration: none !important;
}
.pgb-order__status--delivered { color: var(--color-success); }
.pgb-order__status--ship      { color: var(--color-ink); }
.pgb-order__status--process   { color: var(--color-warning); }
.pgb-order__status--pending   { color: var(--color-text-muted); }
.pgb-order__status--hold      { color: var(--color-warning); }
.pgb-order__status--cancelled,
.pgb-order__status--refunded,
.pgb-order__status--failed    { color: var(--color-error); }

.pgb-order__amt {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-ink);
	text-align: right;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-decoration: none !important;
}
.pgb-order__amt .woocommerce-Price-amount,
.pgb-order__amt bdi { font-size: inherit; color: inherit; font-weight: inherit; }

@media (max-width: 540px) {
	.pgb-order { grid-template-columns: 70px 1fr auto; gap: 0.75rem; }
	.pgb-order__status { display: none; }
}

/* Kill any residual link styling inside dashboard */
.pgb-dashboard a,
.pgb-dashboard a:hover { text-decoration: none !important; }


/* ==========================================================================
   PGB HOME PAGE — scoped under .pgb-home, full-bleed sections inside
   a constrained main. Source: handoff/home-page.css.txt (Claude Design
   v2, wholesale/retail framing, 2026-04-18).
   ========================================================================== */

.pgb-home {
	font-family: var(--wp--preset--font-family--body, "Geist", sans-serif);
	color: var(--color-text);
}

/* --- HERO ----------------------------------------------------------------- */
.pgb-home__hero { position: relative; }

.pgb-home__eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem) !important;
}

.pgb-home__h1 {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 500;
	color: var(--color-ink);
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem) !important;
	max-width: 18ch;
	text-wrap: balance;
}

.pgb-home__sub {
	line-height: 1.55;
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--60, 2.5rem) !important;
	text-wrap: pretty;
}

/* CTAs */
.pgb-home__cta {
	gap: 0.75rem !important;
	margin-bottom: var(--wp--preset--spacing--80, 4rem) !important;
}
.pgb-home__cta .wp-block-button__link,
.pgb-home__access .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body, "Geist", sans-serif);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	padding: 0.85rem 1.5rem;
	border-radius: 4px;
	transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pgb-home__cta-primary .wp-block-button__link,
.pgb-home__access .pgb-home__cta-primary .wp-block-button__link {
	background: var(--color-ink-fill);
	color: var(--color-on-primary-fog);
	border: 1px solid var(--color-ink-fill);
}
.pgb-home__cta-primary .wp-block-button__link:hover,
.pgb-home__access .pgb-home__cta-primary .wp-block-button__link:hover {
	background: var(--color-ink-fill-hover);
	border-color: var(--color-ink-fill-hover);
}
.pgb-home .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-ink);
	border: 1px solid var(--color-outline-border);
}
.pgb-home .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--color-aqua);
	color: var(--color-aqua);
}

/* Hero stats row */
.pgb-home__stats {
	gap: var(--wp--preset--spacing--70, 3rem) !important;
	padding-top: var(--wp--preset--spacing--50, 2rem) !important;
	border-top: 1px solid var(--color-border);
}
.pgb-home__stat { gap: 0.35rem !important; min-width: 140px; }
.pgb-home__stat-v {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	margin: 0 !important;
	line-height: 1;
}
.pgb-home__stat-k {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 !important;
}

/* --- TRUST STRIP ---------------------------------------------------------- */
.pgb-home__trust {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.pgb-home__trust-row {
	gap: var(--wp--preset--spacing--50, 2rem) !important;
	row-gap: 0.75rem !important;
}
.pgb-home__trust-item {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--color-ink);
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.pgb-home__trust-item span {
	color: var(--color-aqua);
	font-size: 0.95rem;
}

/* --- SECTION HEADERS ------------------------------------------------------ */
.pgb-home__kicker {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 0.75rem !important;
}
.pgb-home__h2 {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 500;
	color: var(--color-ink);
	margin: 0 0 1rem !important;
	max-width: 22ch;
	text-wrap: balance;
}
.pgb-home__section-lede {
	max-width: 58ch;
	line-height: 1.55;
	margin: 0 0 var(--wp--preset--spacing--70, 3rem) !important;
	text-wrap: pretty;
}

/* --- QA STEPS ------------------------------------------------------------- */
.pgb-home__steps {
	gap: 0 !important;
	border-top: 1px solid var(--color-border);
	border-left: 1px solid var(--color-border);
	background: var(--color-surface);
}
@media (max-width: 900px) {
	.pgb-home__steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
	.pgb-home__steps { grid-template-columns: 1fr !important; }
}
.pgb-home__step {
	padding: var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--50, 1.75rem) var(--wp--preset--spacing--60, 2.25rem) !important;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
	gap: 0.75rem !important;
}
.pgb-home__step-n {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--color-aqua);
	margin: 0 0 0.5rem !important;
}
.pgb-home__step-h {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 0.5rem !important;
}
.pgb-home__step-p {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0 !important;
	text-wrap: pretty;
}

/* --- ACCESS CTA ----------------------------------------------------------- */
.pgb-home__access { text-align: center; }
.pgb-home__access .pgb-home__kicker,
.pgb-home__access .pgb-home__h2,
.pgb-home__access .pgb-home__lede {
	margin-left: auto !important;
	margin-right: auto !important;
}
.pgb-home__access .pgb-home__h2 { max-width: 20ch; }
.pgb-home__lede {
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 auto var(--wp--preset--spacing--50, 2rem) !important;
	text-wrap: pretty;
}
.pgb-home__access .wp-block-buttons {
	justify-content: center !important;
	gap: 0.75rem !important;
}

/* --- RESPONSIVE TIGHTENING ------------------------------------------------ */
@media (max-width: 640px) {
	.pgb-home__hero {
		padding-top: var(--wp--preset--spacing--70, 3.5rem) !important;
		padding-bottom: var(--wp--preset--spacing--60, 3rem) !important;
	}
	.pgb-home__stats {
		gap: var(--wp--preset--spacing--40, 1.5rem) !important;
		row-gap: var(--wp--preset--spacing--40, 1.5rem) !important;
	}
	.pgb-home__how, .pgb-home__access {
		padding-top: var(--wp--preset--spacing--60, 3rem) !important;
		padding-bottom: var(--wp--preset--spacing--60, 3rem) !important;
	}
}

/* ==========================================================================
   LOGIN / REGISTER — card frame + aqua focus ring
   ==========================================================================
   The [woocommerce_my_account] shortcode wraps each form in
   .u-column1/.u-column2 with a .woocommerce-form block inside. Give
   those columns a softer card treatment (shadow + matched padding) and
   aqua focus rings on inputs so the interactive state reads as on-brand.
*/
.u-columns .u-column1 > h2,
.u-columns .u-column2 > h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 0.75rem;
}
form.woocommerce-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 1.5rem;
}
form.woocommerce-form .form-row {
  margin: 0 0 1rem;
}
form.woocommerce-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 0.35rem;
}
form.woocommerce-form input[type="text"],
form.woocommerce-form input[type="email"],
form.woocommerce-form input[type="password"],
form.woocommerce-form input[type="tel"],
form.woocommerce-form input[type="number"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid var(--color-field-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
form.woocommerce-form input[type="text"]:focus,
form.woocommerce-form input[type="email"]:focus,
form.woocommerce-form input[type="password"]:focus,
form.woocommerce-form input[type="tel"]:focus,
form.woocommerce-form input[type="number"]:focus {
  outline: 0;
  border-color: var(--color-aqua);
  box-shadow: 0 0 0 3px rgba(122, 165, 181, 0.25);
}
form.woocommerce-form .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-account-text);
  margin: 0 0 1rem;
}
form.woocommerce-form .woocommerce-form-login__rememberme input[type="checkbox"] {
  margin: 0;
}
form.woocommerce-form p:last-child {
  margin-bottom: 0;
}
.woocommerce-LostPassword {
  margin-top: 1rem;
  font-size: 0.875rem;
}
.woocommerce-LostPassword a {
  color: var(--color-ink);
}

/* ==========================================================================
   SINGLE PRODUCT — hide native number-input spinbuttons
   ==========================================================================
   The stacked up/down arrows that browsers render on <input type=number>
   look unfinished and don't fit a side-by-side UI. Users can still type
   the quantity; +/− control is offered by our stepper after add-to-cart.
*/
body.single-product form.cart input.qty[type="number"]::-webkit-inner-spin-button,
body.single-product form.cart input.qty[type="number"]::-webkit-outer-spin-button,
body.single-product form.variations_form input.qty[type="number"]::-webkit-inner-spin-button,
body.single-product form.variations_form input.qty[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.single-product form.cart input.qty[type="number"],
body.single-product form.variations_form input.qty[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0.55rem 0.75rem;
  min-width: 3.5rem;
  text-align: center;
  border: 1px solid var(--color-field-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.single-product form.cart input.qty[type="number"]:focus,
body.single-product form.variations_form input.qty[type="number"]:focus {
  outline: 0;
  border-color: var(--color-aqua);
  box-shadow: 0 0 0 3px rgba(122, 165, 181, 0.25);
}

/* ==========================================================================
   ACCESSIBILITY — contrast + keyboard focus fixes
   ==========================================================================
   Surfaced by axe-core (WCAG 2.1 AA) on 2026-04-18. Base Aqua #7AA5B5 is
   too light for 4.5:1 contrast against Fog / white backgrounds — reserve
   it for decorative accents (borders, hover states, small icon dots),
   never for text or solid fills behind text. Text-carrying links drop
   to Ink #1E3A5F.
*/

/* Header auth link (wp:loginout block renders <div class="logged-out|logged-in"><a>Log in|Log out</a></div>).
   Was Aqua 2.55:1 on Fog — now Ink (~11:1). */
header .logged-out > a,
header .logged-in > a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: inherit;
}
header .logged-out > a:hover,
header .logged-in > a:hover {
  color: var(--color-aqua);
}

/* Cart product-name links + Cart Totals shipping-calculator toggle were
   rendering in the default Aqua link color against white. Both sit
   inside .woocommerce on the cart page. Scope to the cart wrapper so
   we don't over-color every WC link on the site. */
.woocommerce-cart a,
.woocommerce-cart-form a,
.woocommerce-cart-form__cart-item .product-name a,
.cart_totals a,
.shipping-calculator-button {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-cart a:hover,
.woocommerce-cart-form a:hover,
.woocommerce-cart-form__cart-item .product-name a:hover,
.cart_totals a:hover,
.shipping-calculator-button:hover {
  color: var(--color-aqua);
}

/* My Account register form — privacy-policy-link was Aqua on white. */
form.woocommerce-form .woocommerce-privacy-policy-link,
.woocommerce-privacy-policy-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
form.woocommerce-form .woocommerce-privacy-policy-link:hover,
.woocommerce-privacy-policy-link:hover {
  color: var(--color-aqua);
}

/* Consent checkboxes (pgb-compliance-gate). wpautop wraps the <label>'s
   children with <br> around the <input>, which breaks the inline layout
   and doubles vertical rhythm. Use a flex label and neutralize the <br>. */
.pgb-cg-consent-row {
  margin-bottom: 0.875rem;
}
.pgb-cg-consent-row label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.4;
  cursor: pointer;
}
.pgb-cg-consent-row label br {
  display: none;
}
.pgb-cg-consent-row input[type="checkbox"] {
  margin: 0.2rem 0 0 0;
  flex: 0 0 auto;
}
.pgb-cg-consent-row label a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pgb-cg-consent-row label a:hover {
  color: var(--color-aqua);
}

form.woocommerce-form-register > p {
  margin-bottom: 0.875rem;
}
form.woocommerce-form-register .woocommerce-privacy-policy-text {
  margin-top: 0.25rem;
  margin-bottom: 0.875rem;
}
form.woocommerce-form-register .woocommerce-privacy-policy-text p {
  margin: 0;
  color: var(--color-ink);
}

/* Cart/checkout empty state: "Return to shop" button was invisible —
   wp-element-button inherits page ink color over the ink-colored bg,
   so text matched background. Force white text + explicit ink bg. */
.return-to-shop a.button,
a.button.wc-backward {
  color: var(--color-on-primary-fog);
  background-color: var(--color-ink-fill);
  padding: 0.75rem 1.5rem;
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.2;
}
.return-to-shop a.button:hover,
a.button.wc-backward:hover {
  background-color: var(--color-ink-fill-raised);
  color: var(--color-on-primary-fog);
}

/* Membership Terms + any default page template: the block theme's
   page.html does not apply a readable max-width to long-form content.
   Constrain paragraphs to ~70ch for legibility. */
body.page-template-default .wp-block-post-content,
body.page-template-default .entry-content,
body.single-page .wp-block-post-content {
  max-width: 800px;
  margin-inline: auto;
}
body.page-template-default .wp-block-post-content > *,
body.page-template-default .entry-content > * {
  max-width: 100%;
}

/* Mini-cart drawer: WC Blocks sets aria-hidden="true" when closed but
   leaves focusable descendants (close button, Remove buttons, qty +/-)
   reachable via keyboard Tab. Hide ONLY the focusable descendants when
   closed, not the drawer container itself — visibility on the container
   broke the open animation on iOS Safari (attribute-selector state
   changes don't always trigger immediate re-evaluation during React
   reconciliation there, leaving the drawer permanently hidden). This
   fixes the aria-hidden-focus axe violation without breaking iOS
   interactivity. */
.wc-block-mini-cart__drawer[aria-hidden="true"] :is(button, a, input, [tabindex]) {
  visibility: hidden;
}

/* ==========================================================================
   PRINT — just ensure things look sane if someone prints
   ========================================================================== */
@media print {
  .wc-block-mini-cart,
  .skip-link,
  nav {
    display: none !important;
  }
}
/* ==========================================================================
   PGB SHOP — rich card grid
   Append to style.css. Scoped under .pgb-shop / .pgb-card.
   ========================================================================== */

.pgb-shop__header {
	align-items: baseline !important;
	gap: 1rem !important;
	margin-bottom: var(--wp--preset--spacing--50, 2rem) !important;
	padding-bottom: var(--wp--preset--spacing--40, 1.5rem);
	border-bottom: 1px solid var(--color-border);
}
.pgb-shop__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	letter-spacing: -0.025em;
	color: var(--color-ink);
	margin: 0 !important;
}
.pgb-shop__lede {
	max-width: 46ch;
	line-height: 1.5;
	font-size: 0.92rem;
	margin: 0 !important;
	text-wrap: pretty;
}

.pgb-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--50, 2rem);
}
@media (max-width: 540px) {
	.pgb-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
}

.pgb-shop__empty {
	grid-column: 1 / -1;
	padding: 3rem 1rem;
	text-align: center;
	color: var(--color-text-muted);
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
}

/* --- Card ----------------------------------------------------------------- */
.pgb-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 120ms ease, transform 120ms ease;
}
.pgb-card:hover { border-color: var(--color-aqua); }

/* OOS cards: subordinate them so in-stock items dominate the grid. We dim
   individual elements (image, title, specs, price) rather than setting
   opacity on the whole card, so the Notify-me CTA stays fully readable.
   Child opacity stacks with parent — see CSS spec — which is why we avoid
   the previous `.pgb-card--out { opacity: 0.72 }` approach. */
.pgb-card--out .pgb-card__img { filter: grayscale(0.65) brightness(0.97); }
.pgb-card--out .pgb-card__title,
.pgb-card--out .pgb-card__price,
.pgb-card--out .pgb-card__specs dd { color: var(--color-text-quiet); }
.pgb-card--out .pgb-card__specs dt { color: var(--color-text-faint); }
.pgb-card--out { background: var(--color-surface-recede); } /* hint of background recede */

.pgb-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--color-media-plate);
	overflow: hidden;
}
.pgb-card__img {
	width: 100%; height: 100%; object-fit: contain; padding: 1rem;
	transition: transform 240ms ease;
}
.pgb-card:hover .pgb-card__img { transform: scale(1.03); }

.pgb-card__dot {
	position: absolute; top: 0.5rem; right: 0.5rem;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--color-aqua);
	box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
}
.pgb-card--low .pgb-card__dot { background: var(--color-stock-low); }
.pgb-card--out .pgb-card__dot { background: var(--color-text-quiet); }

.pgb-card__body {
	padding: 0.75rem 0.875rem 0.875rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.pgb-card__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	text-decoration: none !important;
	line-height: 1.25;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.4em;
}
.pgb-card__title:hover { color: var(--color-aqua); }

/* Specs row — 3 thin columns, mono numerals, dt above dd */
.pgb-card__specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0.45rem 0;
	border-top: 1px solid var(--color-row-line);
	border-bottom: 1px solid var(--color-row-line);
}
.pgb-card__specs > div { min-width: 0; }
.pgb-card__specs dt {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1;
}
.pgb-card__specs dd {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--color-ink);
	margin: 0.15rem 0 0;
	line-height: 1.1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pgb-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: auto;
}
.pgb-card__price {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-ink);
}
.pgb-card__price .woocommerce-Price-amount,
.pgb-card__price bdi { font-size: inherit; color: inherit; font-weight: inherit; }
.pgb-card__state {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.2rem 0.4rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	line-height: 1.2;
	white-space: nowrap;
}
.pgb-card__state--in  { color: var(--color-success); }
.pgb-card__state--low { color: var(--color-warning); }
.pgb-card__state--out { color: var(--color-text-muted); }

/* --- Product page: last-2 lots block (add to single-product.html as shortcode) */
.pgb-lots-table {
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.82rem;
	margin-top: 1.5rem;
}
.pgb-lots-table__hdr,
.pgb-lots-table__row {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr;
	padding: 0.55rem 0.75rem;
	gap: 0.5rem;
	align-items: center;
}
.pgb-lots-table__hdr {
	background: var(--color-surface);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.pgb-lots-table__row { border-top: 1px solid var(--color-border); }
.pgb-lots-table__row a { text-decoration: underline; text-underline-offset: 2px; color: var(--color-ink); }
/* ==========================================================================
   PGB SHOP v1.2 — append/replace in style.css
   Supersedes the v1.0 .pgb-card / .pgb-shop rules. Paste this block at the
   end of style.css; the cascade wins over the earlier block.
   ========================================================================== */

/* --- Free-shipping banner -------------------------------------------------- */
.pgb-shipbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0.9rem;
	margin: 0 0 1.25rem;
	background: var(--color-aqua-wash-12);
	border: 1px solid var(--color-aqua-wash-30);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--color-ink);
}
.pgb-shipbar strong { font-weight: 600; }
.pgb-shipbar__progress {
	flex: 1;
	max-width: 200px;
	height: 4px;
	background: var(--color-aqua-wash-20);
	border-radius: 999px;
	overflow: hidden;
}
.pgb-shipbar__progress span {
	display: block; height: 100%;
	background: var(--color-aqua);
	transition: width 240ms ease;
}

/* Narrow viewports: stack message above progress, allow wrap, no overflow. */
@media (max-width: 600px) {
	.pgb-shipbar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.4rem !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
	}
	.pgb-shipbar__msg {
		font-size: 0.72rem !important;
		line-height: 1.4;
		word-break: break-word;
	}
	.pgb-shipbar__progress {
		max-width: 100% !important;
	}
}

/* --- Sticky filter bar + match count -------------------------------------- */
.pgb-shop__filterwrap {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--color-surface);
	backdrop-filter: saturate(140%) blur(6px);
	padding: 0.6rem 0;
	margin: 0 -1rem 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-bottom: 1px solid var(--color-border);
}
.pgb-shop__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.pgb-shop__clear {
	background: none; border: 1px solid currentColor;
	color: var(--color-text-muted);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.65rem;
	transition: color 120ms, border-color 120ms;
}
.pgb-shop__clear:hover { color: var(--color-ink); }

/* --- Card (supersedes v1.0) ----------------------------------------------- */
.pgb-card { /* unchanged structure — overrides below */ }

.pgb-card__media {
	aspect-ratio: 1 / 1;
	display: flex;                 /* fixes centering */
	align-items: center;
	justify-content: center;
	padding: 0;                    /* padding moves to img */
	background: var(--color-media-plate);
}
.pgb-card__img {
	width: 70% !important;
	height: 70% !important;
	object-fit: contain;
	object-position: center center;
	padding: 0 !important;
	margin: auto;
	display: block;
}

/* Stock dot → ring */
.pgb-card__dot {
	top: 0.55rem; right: 0.55rem;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--color-surface);
	box-shadow: 0 0 0 2px currentColor;
}
.pgb-card--in  .pgb-card__dot { color: var(--color-success-fill); }
.pgb-card--low .pgb-card__dot { color: var(--color-stock-low); }
.pgb-card--out .pgb-card__dot { color: var(--color-text-quiet); }

/* Solid pills */
.pgb-card__state {
	padding: 0.22rem 0.5rem;
	border-radius: 3px;
	border: 1px solid transparent !important;
	font-weight: 600;
}
.pgb-card__state--in  { background: var(--color-success-fill); color: var(--color-on-primary) !important; }
.pgb-card__state--low { background: var(--color-warning-fill); color: var(--color-on-warning-fill) !important; }
.pgb-card__state--out {
	background: transparent;
	border: 1px solid var(--color-badge-border) !important;
	color: var(--color-text-quiet) !important;
}

/* --- Add-to-cart on card -------------------------------------------------- */
.pgb-card__cta {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.55rem 0.75rem;
	background: var(--color-ink-fill);
	color: var(--color-on-primary) !important;
	border: 1px solid var(--color-ink-fill);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 120ms, color 120ms, border-color 120ms;
}
.pgb-card__cta:hover {
	background: var(--color-ink-fill-deep);
}
.pgb-card__cta.loading { opacity: 0.6; cursor: wait; }
.pgb-card__cta.added {
	background: var(--color-success-fill);
	border-color: var(--color-success-fill);
}
.pgb-card__cta--secondary {
	background: var(--color-surface);
	color: var(--color-ink) !important;
}
.pgb-card__cta--disabled {
	background: var(--color-surface-disabled);
	color: var(--color-text-quiet) !important;
	border-color: var(--color-border);
	cursor: not-allowed;
	pointer-events: none;
}

/* OOS card treatment lives at line ~1417 — element-level dimming so the
   Notify-me CTA stays readable. Previous card-wide opacity rule removed
   here per Goal A item #21 (2026-05-13). */

/* ==========================================================================
   PGB HOME v0.5 — append to style.css
   ========================================================================== */

.pgb-hero { max-width: 720px; }

.pgb-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.72rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--wp--preset--spacing--40, 1.25rem) !important;
}

.pgb-hero__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: var(--color-ink);
	margin: 0 !important;
	text-wrap: balance;
}

.pgb-hero__lede {
	max-width: 56ch;
	margin: var(--wp--preset--spacing--40, 1.25rem) 0 var(--wp--preset--spacing--50, 2rem) !important;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--color-ink-wash-70);
	text-wrap: pretty;
}

.pgb-hero__ctas { align-items: center !important; gap: 1rem !important; flex-wrap: wrap; }
.pgb-hero__secondary {
	margin: 0 !important;
	font-size: 0.9rem;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
}
.pgb-hero__secondary a {
	color: var(--color-ink);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 120ms;
}
.pgb-hero__secondary a:hover { opacity: 0.65; }

/* --- Stats ---------------------------------------------------------------- */
.pgb-stats {
	padding-top: var(--wp--preset--spacing--50, 2rem);
	border-top: 1px solid var(--color-border);
}
.pgb-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 2rem;
}
@media (max-width: 720px) {
	.pgb-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pgb-stat { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pgb-stat__v {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	line-height: 1.05;
}
.pgb-stat__k {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.pgb-stat__sub {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--color-ink-wash-60);
	margin-top: 0.15rem;
}
/* ==========================================================================
   PGB DASHBOARD v4 — append to style.css (supersedes v3 where overlapping)
   Fixes:
   - Shift layout LEFT so sidebar + hero align under "My Account" h1
   - Narrow sidebar 220 → 180
   - Dedupe inline stat line above tiles
   - Tighter order card row
   - Hide $0.00 store-credit tile gracefully (rule; PHP still emits — just collapses)
   ========================================================================== */

/* Pull the whole MyAccount content block to the far-left gutter. */
.woocommerce-account .woocommerce {
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: var(--wp--preset--spacing--40, 1.25rem) !important;
	padding-right: var(--wp--preset--spacing--40, 1.25rem) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 180px !important;     /* was ~220 */
	flex: 0 0 180px !important;
	padding-right: 1.5rem !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Hide the duplicated inline greeting line — keep tiles only. */
.pgb-dashboard__greet-meta,
.pgb-dashboard .pgb-dashboard__meta-line { display: none !important; }

/* Greeting: if username is weird, just show "Welcome back." */
/* (Requires PHP update; this CSS tones it down regardless.) */
.pgb-dashboard__greet h2 { letter-spacing: -0.01em; }

/* Collapse the store-credit tile when value is $0.00 via [data-zero] hook.
   Apply this attr in PHP: echo '<a class="pgb-stat"' . ($credit==0 ? ' data-zero="1"' : '') . '...'; */
.pgb-dashboard__stats a.pgb-stat[data-zero="1"] { display: none !important; }

/* Tighter order card: order # + name + price on one row, status + date below */
.pgb-dashboard__order {
	display: grid !important;
	grid-template-columns: auto 1fr auto !important;
	grid-template-rows: auto auto !important;
	gap: 0.2rem 0.75rem !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	margin-bottom: 0.5rem;
}
.pgb-dashboard__order .order-num   { grid-row: 1; grid-column: 1; font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.78rem; color: var(--color-text-muted); }
.pgb-dashboard__order .order-items { grid-row: 1; grid-column: 2; font-weight: 500; }
.pgb-dashboard__order .order-total { grid-row: 1; grid-column: 3; font-weight: 600; font-variant-numeric: tabular-nums; }
.pgb-dashboard__order .order-status{ grid-row: 2; grid-column: 1 / span 2; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.pgb-dashboard__order .order-date  { grid-row: 2; grid-column: 3; font-size: 0.72rem; font-family: var(--wp--preset--font-family--mono, monospace); color: var(--color-text-muted); }
/* ==========================================================================
   PGB SHOP v1.3 — append to style.css (supersedes v1.2 where overlapping)
   Fixes:
   - Kill stray "|=|" token artifact on card media
   - Hide CTA button on OOS cards
   - Stronger "44 products" count
   - Softer ship bar (drops progress bar, text-only)
   ========================================================================== */

/* If the |=| is coming from a WC stock-label pseudo or placeholder label,
   nuke it inside our card scope. */
.pgb-card__media::before,
.pgb-card__media::after,
.pgb-card__media .onsale,
.pgb-card__media .stock,
.pgb-card__media .wc-placeholder { display: none !important; content: none !important; }

/* Also hide any stray text nodes WC injects inside the anchor. */
.pgb-card__media { font-size: 0 !important; }
.pgb-card__media > * { font-size: 1rem; }

/* --- OOS cards: hide the CTA row --------------------------------------- */
.pgb-card--out .pgb-card__cta { display: none !important; }

/* --- Match count (bigger, more conversational) -------------------------- */
.pgb-shop__meta {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 0.88rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--color-ink) !important;
}
.pgb-shop__meta span:first-child { font-weight: 500; }

/* --- Free-ship bar: text-only --------------------------------------------- */
.pgb-shipbar {
	background: var(--color-aqua-wash-8) !important;
	border-color: var(--color-aqua-wash-22) !important;
	font-size: 0.82rem !important;
	padding: 0.6rem 0.9rem !important;
	justify-content: center !important;
}
.pgb-shipbar__progress { display: none !important; }
/* ==========================================================================
   PGB HOME v0.6 — append to style.css (supersedes v0.5)
   Fixes:
   - Hero is now left-aligned (was centered)
   - Stat row is flat (hairline borders), not cards
   - Crypto ticker doesn't wrap
   ========================================================================== */

.pgb-hero {
	max-width: 720px;
	margin: 0 !important;            /* kill auto-center */
	text-align: left !important;
}
.pgb-hero > * { text-align: left !important; }

.pgb-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 var(--wp--preset--spacing--40, 1.25rem) !important;
}

.pgb-hero__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: clamp(2.25rem, 4.8vw, 3.25rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.02 !important;
	color: var(--color-ink) !important;
	margin: 0 !important;
	text-wrap: balance;
}

.pgb-hero__lede {
	max-width: 56ch;
	margin: var(--wp--preset--spacing--40, 1.25rem) 0 var(--wp--preset--spacing--50, 2rem) !important;
	font-size: 1.05rem !important;
	line-height: 1.55;
	color: var(--color-ink-wash-70);
	text-wrap: pretty;
}

.pgb-hero__ctas {
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 1rem !important;
	flex-wrap: wrap;
}
.pgb-hero__secondary {
	margin: 0 !important;
	font-size: 0.9rem;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
}
.pgb-hero__secondary a {
	color: var(--color-ink);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 120ms;
}
.pgb-hero__secondary a:hover { opacity: 0.65; }

/* --- Flat stat row, not cards ------------------------------------------ */
.pgb-stats {
	margin-top: var(--wp--preset--spacing--70, 3rem) !important;
	padding-top: var(--wp--preset--spacing--50, 2rem) !important;
	padding-bottom: var(--wp--preset--spacing--50, 2rem) !important;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: transparent !important;
	box-shadow: none !important;
}
.pgb-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 2rem;
}
@media (max-width: 720px) {
	.pgb-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pgb-stat {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.35rem !important;
	min-width: 0;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.pgb-stat__v {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	line-height: 1.05;
}
.pgb-stat__k {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	line-height: 1.3;
}
.pgb-stat__sub {
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--color-ink-wash-60);
	margin-top: 0.1rem;
	white-space: nowrap;           /* don't wrap ticker */
	overflow: hidden;
	text-overflow: ellipsis;
}
/* ==========================================================================
   PGB DASHBOARD v5 — append to style.css (supersedes v4 where overlapping)
   Fix:
   - Sidebar + content aligns under PGB logo + "My Account" h1
   - Stats grid uses auto-flow dense so empty tiles don't leave gaps
   ========================================================================== */

.woocommerce-account .woocommerce {
	padding-left: clamp(1.25rem, 6vw, 5rem) !important;
	padding-right: clamp(1.25rem, 6vw, 5rem) !important;
	max-width: none !important;
}

.pgb-dashboard__stats {
	grid-auto-flow: dense !important;
}
.pgb-dashboard__stats > [hidden],
.pgb-dashboard__stats > [data-zero="1"] { display: none !important; }

/* Arrow hints that were floating — clip to tile */
.pgb-stat { position: relative; overflow: hidden; }
.pgb-stat__arrow {
	position: absolute;
	bottom: 0.5rem; right: 0.6rem;
	font-size: 0.9rem;
	opacity: 0.6;
}
/* ==========================================================================
   PGB SHOP v1.4 — append to style.css (supersedes v1.3 where overlapping)
   - Tighter card internal spacing (image ↔ title ↔ price ↔ CTA)
   - Card footer: price + state on row 1, CTA full-width on row 2
   ========================================================================== */

.pgb-card__body {
	padding: 0.6rem 0.75rem 0.7rem !important;
	gap: 0.35rem !important;
}
.pgb-card__title {
	margin: 0 !important;
	min-height: auto !important;
	-webkit-line-clamp: 2;
}
.pgb-card__specs { padding: 0.35rem 0 !important; gap: 0.3rem 0.5rem !important; }

.pgb-card__foot {
	margin-top: 0.25rem !important;
	align-items: center !important;
}

/* Make CTA the full-width action, not squeezed under foot row.
   `box-sizing: border-box` is required so the <a>-based Add-to-cart
   button renders at the same visual width as the <button>-based
   Notify-me variant — without it, the <a>'s default `content-box`
   adds padding/border on top of width:100%, making it ~18px wider.
   Padding inherits 0.55rem 0.75rem from the base .pgb-card__cta rule
   (was previously overridden to 0.5rem; reverted so left/right
   padding matches the .pgb-card__cta--notify variant). */
.pgb-card__cta { margin-top: 0.4rem !important; box-sizing: border-box; }

/* Reduce image box padding to give title more vertical room */
.pgb-card__media { aspect-ratio: 1 / 0.88 !important; }
.pgb-card__img { width: 64% !important; height: 64% !important; }
/* ==========================================================================
   PGB HOME v0.7 — append to style.css (supersedes v0.6)
   Fix:
   - Hero aligns under the PGB logo (not at the page-edge gutter)
   ========================================================================== */

/* Indent hero to match logo x-position. The logo sits inside the header's
   constrained container. We mirror that padding on the main content. */
.wp-site-blocks > main,
.woocommerce-page main,
body > .wp-block-group > main {
	padding-left: clamp(1.25rem, 6vw, 5rem) !important;
	padding-right: clamp(1.25rem, 6vw, 5rem) !important;
}

.pgb-hero {
	margin-left: 0 !important;
	max-width: 760px;
}

/* Stats row also gets left padding, already inherited from main */
/* ==========================================================================
   PGB DASHBOARD v6 — append to style.css (supersedes v5)
   Based on real DOM inspection:
     MAIN.wp-block-group.has-global-padding
       DIV.woocommerce
         NAV.woocommerce-MyAccount-navigation > UL > LI.woocommerce-MyAccount-navigation-link
         DIV.woocommerce-MyAccount-content
   ========================================================================== */

/* MAIN already has has-global-padding (theme gutter). Don't add more. */
.page-template-page-my-account main.wp-block-group.has-global-padding {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Make the WC wrapper a 2-col flex row */
.page-template-page-my-account .woocommerce {
	display: flex !important;
	flex-direction: row !important;
	gap: 2.5rem !important;
	align-items: flex-start !important;
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.woocommerce-MyAccount-navigation {
	flex: 0 0 180px !important;
	width: 180px !important;
	margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-MyAccount-navigation-link {
	list-style: none !important;
	margin: 0 !important;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 0.7rem 0.9rem;
	font-size: 0.92rem;
	color: var(--color-ink);
	text-decoration: none;
	border-radius: 4px;
	transition: background 120ms;
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--color-ink-wash-6);
}
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background: var(--color-ink-wash-10);
	font-weight: 600;
}

.woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	min-width: 0;
}

/* Stats grid: dense flow, hide empty/zero tiles without leaving slot */
.pgb-dashboard__stats {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	grid-auto-flow: dense !important;
	gap: 1rem !important;
}
.pgb-dashboard__stats > [hidden],
.pgb-dashboard__stats > [data-zero="1"] { display: none !important; }

/* Hide the duplicated inline LIFETIME ORDERS → / SHOP → line above tiles.
   That block renders ahead of the actual tiles — kill it. */
.pgb-dashboard__greet-meta,
.pgb-dashboard__stat-line,
.pgb-dashboard > .pgb-dashboard__meta { display: none !important; }

/* Orders card tighten */
.pgb-dashboard__order {
	display: grid !important;
	grid-template-columns: minmax(80px, auto) 1fr auto !important;
	grid-template-rows: auto auto !important;
	gap: 0.2rem 1rem !important;
	padding: 0.8rem 1rem !important;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	margin-bottom: 0.5rem;
	max-width: 780px;
}
.pgb-dashboard__order .order-num   { grid-row: 1; grid-column: 1; font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.78rem; color: var(--color-text-muted); align-self: center; }
.pgb-dashboard__order .order-items { grid-row: 1; grid-column: 2; font-weight: 500; }
.pgb-dashboard__order .order-total { grid-row: 1; grid-column: 3; font-weight: 600; font-variant-numeric: tabular-nums; }
.pgb-dashboard__order .order-status{ grid-row: 2; grid-column: 1 / span 2; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); border: 0 !important; padding: 0 !important; background: transparent !important; display: inline; }
.pgb-dashboard__order .order-date  { grid-row: 2; grid-column: 3; font-size: 0.72rem; font-family: var(--wp--preset--font-family--mono, monospace); color: var(--color-text-muted); }

/* Status "pill" looks like an input because of border. Strip it. */
.pgb-dashboard__order [class*="status"],
.pgb-dashboard__order .wc-order-status,
.pgb-dashboard__order .order-status {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	display: inline-block !important;
	width: auto !important;
}
/* ==========================================================================
   PGB HOME v0.8 — append to style.css (supersedes v0.7)
   Page content constrained to ~1100px, centered — logo, hero, stats, footer
   all align at the same gutter.
   ========================================================================== */

/* Apply a single content width to header, main, and footer containers */
.wp-site-blocks > header .wp-block-group.is-layout-flex,
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > footer .wp-block-group {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Main padding becomes symmetric breathing room inside that constrained width */
body.home main.wp-block-group,
body.page-template-page-my-account main.wp-block-group,
body.woocommerce-page main.wp-block-group {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Hero: keep left-aligned inside the constrained page */
.pgb-hero {
	max-width: 720px;
	margin-left: 0 !important;
	text-align: left !important;
}

/* Tighten hero → stats gap (was floating mid-page) */
.pgb-stats {
	margin-top: 2rem !important;
}

/* Button: give "Browse catalog" real button chrome */
.pgb-hero__ctas .wp-block-button .wp-block-button__link {
	padding: 0.75rem 1.5rem !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	border-radius: 4px !important;
	background: var(--color-ink-fill) !important;
	color: var(--color-on-primary) !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: opacity 120ms;
}
.pgb-hero__ctas .wp-block-button .wp-block-button__link:hover {
	opacity: 0.88;
}
/* ==========================================================================
   PGB DASHBOARD v7 — append to style.css (supersedes v6)
   Based on real DOM:
     DIV.woocommerce (display: flex) — OK, already 2-col
     DIV.pgb-dashboard__greet-meta — the duplicate stat line to kill
     A.pgb-order — each order card
   ========================================================================== */

/* 1. Kill the duplicate greet-meta line ("94 orders · $0.00 credit · Member since...") */
.pgb-dashboard__greet-meta { display: none !important; }

/* 2. Sidebar narrower, content takes the rest */
.woocommerce-MyAccount-navigation {
	flex: 0 0 180px !important;
	width: 180px !important;
}
.woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	min-width: 0;
}

/* 3. Align My Account h1 with the rest of the content.
   The h1 sits inside main but outside .woocommerce. Push .woocommerce
   to start at the same x as the h1 (i.e. zero margin inside main). */
.page-template-page-my-account main .woocommerce {
	margin: 1.5rem 0 0 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* 4. Stats grid: the duplicate line is gone, but tiles can still auto-fit. */
.pgb-dashboard__stats {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	grid-auto-flow: dense !important;
	gap: 1rem !important;
}
.pgb-dashboard__stats > [data-zero="1"],
.pgb-dashboard__stats > [hidden] { display: none !important; }

/* 5. Order link — tighten row */
a.pgb-order {
	display: grid !important;
	grid-template-columns: minmax(80px, auto) 1fr auto !important;
	grid-template-rows: auto auto !important;
	gap: 0.25rem 1rem !important;
	padding: 0.85rem 1rem !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	margin-bottom: 0.5rem !important;
	max-width: 760px;
	text-decoration: none !important;
	color: var(--color-ink) !important;
	align-items: center;
	transition: background 120ms;
}
a.pgb-order:hover {
	background: var(--color-ink-wash-3);
}

/* Guess at the inner elements — target by order-of-appearance if classes differ */
a.pgb-order > *:nth-child(1) { /* order # */
	grid-row: 1; grid-column: 1;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.78rem;
	color: var(--color-text-muted);
}
a.pgb-order > *:nth-child(2) { /* product name */
	grid-row: 1; grid-column: 2;
	font-weight: 500;
}
a.pgb-order > *:nth-child(3) { /* total */
	grid-row: 1; grid-column: 3;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
a.pgb-order > *:nth-child(4) { /* status */
	grid-row: 2; grid-column: 1 / span 2;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	justify-self: start;
}
a.pgb-order > *:nth-child(5) { /* date */
	grid-row: 2; grid-column: 3;
	font-size: 0.72rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	color: var(--color-text-muted);
	text-align: right;
}

/* 6. Kill the "COMPLETED" pill's input-looking border wherever it is */
a.pgb-order mark,
a.pgb-order .order-status,
a.pgb-order [class*="status"],
a.pgb-order .wc-order-status {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: inline-block !important;
	width: auto !important;
	font-weight: 500;
}

/* 7. Stats tile arrows — clip to tile */
.pgb-stat { position: relative; overflow: hidden; }
.pgb-stat__arrow {
	position: absolute;
	bottom: 0.5rem; right: 0.6rem;
	font-size: 0.85rem;
	opacity: 0.55;
}
/* ==========================================================================
   PGB HOME v0.9 — append to style.css (supersedes v0.8)
   - Secondary CTA styled as plain link (not mono-underline)
   - Eyebrow shortened content-side; style unchanged
   - New: Latest COAs strip
   - Header Log-out link normalization
   ========================================================================== */

/* --- Secondary CTA: plain link, matches body weight ---------------------- */
.pgb-hero__secondary {
	font-family: inherit !important;
	font-size: 0.95rem !important;
	color: var(--color-ink);
	text-decoration: none !important;
	border-bottom: 0 !important;
	letter-spacing: 0 !important;
	padding: 0.75rem 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	opacity: 0.85;
	transition: opacity 120ms;
}
.pgb-hero__secondary::after { content: "→"; }
.pgb-hero__secondary:hover { opacity: 1; }

/* --- Latest COAs strip ---------------------------------------------------- */
.pgb-coas {
	margin-top: 3rem !important;
	padding-top: 2rem !important;
	border-top: 1px solid var(--color-border);
}
.pgb-coas__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1rem;
}
.pgb-coas__eyebrow {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.pgb-coas__all {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.8rem;
	color: var(--color-ink);
	text-decoration: none;
	opacity: 0.7;
	transition: opacity 120ms;
}
.pgb-coas__all:hover { opacity: 1; }

.pgb-coas__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}
.pgb-coas__list li { margin: 0; padding: 0; }
.pgb-coas__list a {
	display: grid;
	grid-template-columns: 100px 1fr auto auto;
	gap: 0 1.5rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.82rem;
	color: var(--color-ink);
	transition: background 120ms;
}
.pgb-coas__list li:last-child a { border-bottom: 0; }
.pgb-coas__list a:hover {
	background: var(--color-ink-wash-3);
}
.pgb-coa__lot { font-weight: 600; }
.pgb-coa__prod {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-ink);
	letter-spacing: 0;
}
.pgb-coa__date { color: var(--color-text-muted); font-size: 0.78rem; }
.pgb-coa__mark {
	color: var(--color-status-complete);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

@media (max-width: 640px) {
	.pgb-coas__list a {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: 0.2rem 1rem;
	}
	.pgb-coa__lot  { grid-row: 1; grid-column: 1; }
	.pgb-coa__prod { grid-row: 1; grid-column: 2; }
	.pgb-coa__date { grid-row: 2; grid-column: 1; }
	.pgb-coa__mark { grid-row: 2; grid-column: 2; justify-self: end; }
}

/* --- Header: normalize Log out styling ----------------------------------- */
header .wp-block-navigation a[href*="logout"],
header .wp-block-navigation a[href*="customer-logout"] {
	text-decoration: none !important;
	color: var(--color-ink) !important;
	font-weight: inherit !important;
}
/* Kill the active underline on nav; replace with a subtle weight shift */
header .wp-block-navigation .current-menu-item a {
	text-decoration: none !important;
	font-weight: 600 !important;
}
/* ==========================================================================
   PGB DASHBOARD v8 — append to style.css (supersedes v7)
   Based on real DOM (confirmed via devtools):
     a.pgb-stat  (A tag, not DIV)
     a.pgb-order > BR, SPAN.pgb-order__id, BR, .pgb-order__title, BR,
                   .pgb-order__amt, BR, .pgb-order__status, BR, .pgb-order__d, BR
   Strategy: ignore the BRs via `display: contents` / `display: none`,
             target spans by their real class names.
   ========================================================================== */

/* 1. The "My Account" h1 + .woocommerce wrapper share main. Align them.
   (Main is already 1100px-centered by v0.8.) */
.page-template-page-my-account main {
	display: block !important;
}
.page-template-page-my-account main > .wp-block-heading,
.page-template-page-my-account main h1 {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.page-template-page-my-account main > .woocommerce {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* 2. Kill the <br> children that are forcing vertical stacks everywhere. */
a.pgb-stat > br,
a.pgb-order > br { display: none !important; }

/* 3. STAT TILES — layout as a real grid card. */
.pgb-dashboard__stats {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1rem !important;
}
@media (max-width: 680px) {
	.pgb-dashboard__stats { grid-template-columns: repeat(2, 1fr) !important; }
}
a.pgb-stat {
	display: grid !important;
	grid-template-areas:
		"eyebrow arrow"
		"value   value";
	grid-template-columns: 1fr auto;
	gap: 0.3rem 0.5rem !important;
	align-items: baseline;
	padding: 1rem 1.1rem !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	background: var(--color-surface) !important;
	text-decoration: none !important;
	color: var(--color-ink) !important;
	min-height: 96px;
	transition: background 120ms, border-color 120ms;
}
a.pgb-stat:hover {
	border-color: var(--color-ink-wash-25) !important;
	background: var(--color-ink-wash-2) !important;
}

/* First direct text / span is the label "Lifetime orders". Value follows. */
/* Since order is: "Lifetime orders" text, then BR, then "94" text —
   and BRs are hidden — both pieces render inline. We need to wrap the
   label differently. Use ::before/::after tricks won't work on text nodes,
   so we have to lean on what we have: make the container a flex-column,
   and let spans claim their own roles via class. */
a.pgb-stat { display: flex !important; flex-direction: column !important; gap: 0.3rem !important; align-items: flex-start !important; }

/* Eyebrow label (first text node). We can't style the raw text, but we can
   shrink everything that ISN'T the pgb-stat__v via a class-targeted rule,
   and make the __v the big value. BUT looking at the DOM dump — the values
   (94, $0.00, Browse) are also plain text nodes with no span!  So we need
   to accept that both label and value are text-level. Best we can do
   client-side is make the whole tile font-size:small and oversize one piece.
   Realistically this needs a PHP fix — see README. */
a.pgb-stat { font-size: 0.82rem; line-height: 1.25; color: var(--color-text-muted) !important; }
a.pgb-stat .pgb-stat__v {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--color-ink);
	letter-spacing: -0.02em;
	line-height: 1.05;
}
a.pgb-stat .pgb-stat__k {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 4. ORDER CARDS — wire the real span classes to a grid. */
a.pgb-order {
	display: grid !important;
	grid-template-columns: auto 1fr auto !important;
	grid-template-rows: auto auto !important;
	column-gap: 1rem !important;
	row-gap: 0.2rem !important;
	align-items: center;
	padding: 0.85rem 1.1rem !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	margin-bottom: 0.5rem !important;
	max-width: 780px;
	text-decoration: none !important;
	color: var(--color-ink) !important;
	transition: background 120ms;
}
a.pgb-order:hover {
	background: var(--color-ink-wash-3);
}

/* Row 1: order# | product | amount */
.pgb-order__id {
	grid-row: 1; grid-column: 1;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.78rem;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.pgb-order__title {
	grid-row: 1; grid-column: 2;
	font-weight: 500;
	font-size: 0.95rem;
}
.pgb-order__amt {
	grid-row: 1; grid-column: 3;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

/* Row 2: status (left) | date (right) */
.pgb-order__status {
	grid-row: 2; grid-column: 1 / span 2;
	font-size: 0.7rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted) !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: inline !important;
	width: auto !important;
	justify-self: start;
	font-weight: 500;
}
.pgb-order__status--delivered,
.pgb-order__status--completed { color: var(--color-status-complete) !important; }
.pgb-order__status--cancelled { color: var(--color-status-cancelled) !important; }

.pgb-order__d {
	grid-row: 2; grid-column: 3;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.72rem;
	color: var(--color-text-muted);
	text-align: right;
	white-space: nowrap;
}

/* 5. Hide any pgb-stat that has text "$0.00" — last-resort CSS:has() fallback
   for the zero store-credit tile if PHP hasn't been patched. */
@supports (selector(:has(*))) {
	a.pgb-stat:has(.pgb-stat__v:empty),
	a.pgb-stat[data-zero="1"] {
		display: none !important;
	}
}
/* ==========================================================================
   PGB DASHBOARD v9 — append to style.css (supersedes v8 where overlapping)
   Fix: order card rows were collapsing because align-items: center +
        auto row tracks let row2 sit on top of row1.
   ========================================================================== */

a.pgb-order {
	align-items: start !important;          /* was center — that collapsed rows */
	grid-template-rows: auto auto !important;
	row-gap: 0.35rem !important;
}

/* Make sure row-2 spans visibly sit below row 1 */
.pgb-order__status,
.pgb-order__d {
	margin-top: 0.15rem;
	line-height: 1.3;
}

/* Ensure row 1 has its own baseline */
.pgb-order__id,
.pgb-order__title,
.pgb-order__amt {
	align-self: baseline;
}

/* Re-confirm row 2 grid placement (in case later rules override) */
.pgb-order__status {
	grid-row: 2 !important;
	grid-column: 1 / span 2 !important;
}
.pgb-order__d {
	grid-row: 2 !important;
	grid-column: 3 !important;
}
/* ==========================================================================
   PGB DASHBOARD v10 — append to style.css (supersedes v8/v9 grid placements)
   Force every pgb-order__* span to its correct grid cell with !important.
   ========================================================================== */

a.pgb-order {
	display: grid !important;
	grid-template-columns: auto 1fr auto !important;
	grid-template-rows: auto auto !important;
	column-gap: 1rem !important;
	row-gap: 0.35rem !important;
	align-items: start !important;
	padding: 0.85rem 1.1rem !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	margin-bottom: 0.5rem !important;
	max-width: 780px;
	text-decoration: none !important;
	color: var(--color-ink) !important;
}

a.pgb-order > .pgb-order__id    { grid-row: 1 !important; grid-column: 1 !important; }
a.pgb-order > .pgb-order__title { grid-row: 1 !important; grid-column: 2 !important; }
a.pgb-order > .pgb-order__amt   { grid-row: 1 !important; grid-column: 3 !important; justify-self: end; }
a.pgb-order > .pgb-order__status{ grid-row: 2 !important; grid-column: 1 / span 2 !important; justify-self: start; }
a.pgb-order > .pgb-order__d     { grid-row: 2 !important; grid-column: 3 !important; justify-self: end; }

/* Typography */
.pgb-order__id    { font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }
.pgb-order__title { font-weight: 500; font-size: 0.95rem; }
.pgb-order__amt   { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgb-order__status{ font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted) !important; border: 0 !important; background: transparent !important; padding: 0 !important; font-weight: 500; }
.pgb-order__status--delivered, .pgb-order__status--completed { color: var(--color-status-complete) !important; }
.pgb-order__d     { font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }
/* ==========================================================================
   PGB GLOBAL v2 — alignment + footer + nav fixes
   Append to style.css.
   - Header inner container matches main's 1100px constraint (logo + main
     now share x-position)
   - Primary nav pinned right
   - Log out styled as plain nav link
   - Footer "About" copy fixed (Find+Replace collateral)
   - /my-account/ wrapper stacks on <900px viewports
   ========================================================================== */

/* --- Header inner container: same max-width, same padding as main -------- */
header.wp-block-template-part > .wp-block-group,
header .wp-block-group.is-layout-flex {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	justify-content: space-between !important;
}

/* --- Primary nav pinned right inside the flex row ------------------------ */
header .wp-block-navigation:not(.is-vertical) {
	margin-left: auto !important;
}

/* --- Log out link: plain, no blue underline ------------------------------ */
header a[href*="customer-logout"],
header a[href*="logout"] {
	color: var(--color-ink) !important;
	text-decoration: none !important;
	font-weight: inherit !important;
}

/* Active nav: bold weight, no underline */
header .wp-block-navigation .current-menu-item > a,
header .wp-block-navigation .current-menu-item > button {
	text-decoration: none !important;
	font-weight: 600 !important;
}

/* --- Footer: kill the "Shop research peptides" replacement artifact ------
   Can't fix text via CSS — see README for the template-part edit. ---------- */

/* --- /my-account/ responsive stack on narrow viewports ------------------- */
@media (max-width: 900px) {
	.page-template-page-my-account .woocommerce {
		flex-direction: column !important;
	}
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		flex: 1 1 auto !important;
		width: 100% !important;
	}
	.woocommerce-MyAccount-navigation {
		margin-bottom: 1.5rem;
	}
}
/* ==========================================================================
   PGB DASHBOARD v11 — append to style.css (supersedes previous dashboard blocks)
   Fixes:
   - "My Account" h1 aligns left-edge with the sidebar
   - Sidebar nav: no underlines on inactive items; active = subtle pill only
   - Sidebar tightened: 40-45px rows instead of 70px
   - Header: logo hard-pinned left, nav+cart hard-pinned right (space-between)
   ========================================================================== */

/* --- Header split layout: logo left, nav right -------------------------- */
header.wp-block-template-part .wp-block-group.is-layout-flex,
header .wp-block-group.is-layout-flex {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	gap: 1rem !important;
}
header .wp-block-site-logo,
header .custom-logo-link,
header a[rel="home"] {
	margin-right: auto !important;
}
header .wp-block-navigation:not(.is-vertical),
header .wp-block-woocommerce-mini-cart,
header .cart-contents,
header [class*="mini-cart"] {
	margin-left: 0 !important;
}

/* --- "My Account" h1: align with sidebar left-edge ---------------------- */
.page-template-page-my-account main > .wp-block-heading,
.page-template-page-my-account main h1 {
	margin-left: 0 !important;
	padding-left: 0 !important;
	max-width: 1100px;
}
/* Pull h1 to start at same x as .woocommerce wrapper */
.page-template-page-my-account main > h1,
.page-template-page-my-account main > .wp-block-heading {
	align-self: flex-start;
}

/* --- Sidebar: tighten rows, strip underlines ---------------------------- */
.woocommerce-MyAccount-navigation ul {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.woocommerce-MyAccount-navigation-link {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 0 !important;
}
.woocommerce-MyAccount-navigation-link a {
	display: block !important;
	padding: 0.55rem 0.85rem !important;     /* was ~1rem → tighter */
	font-size: 0.92rem !important;
	line-height: 1.35 !important;
	color: var(--color-ink) !important;
	text-decoration: none !important;         /* KILL underlines */
	border-radius: 4px !important;
	border: 0 !important;
	transition: background 120ms;
}
.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--color-ink-wash-5) !important;
	text-decoration: none !important;
}
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-MyAccount-navigation li.is-active > a {
	background: var(--color-ink-wash-10) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
/* ==========================================================================
   PGB DASHBOARD v12 — append to style.css (supersedes v11 where overlapping)
   Fixes:
   - Sidebar x aligns under "My Account" h1
   - Active nav pill = full item width (no overhang)
   - Header right-cluster (Home/Shop/MyAccount/icon/Logout/cart) pinned right
   ========================================================================== */

/* --- Align sidebar with h1 ---------------------------------------------- */
.page-template-page-my-account main > h1,
.page-template-page-my-account main > .wp-block-heading {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.page-template-page-my-account main .woocommerce {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.page-template-page-my-account .woocommerce-MyAccount-navigation {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* --- Active nav pill matches item width (no overhang) ------------------- */
.woocommerce-MyAccount-navigation ul { width: 100% !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation-link { width: 100% !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-MyAccount-navigation-link a {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.55rem 0.85rem !important;
	margin: 0 !important;
	border-radius: 4px !important;
}

/* --- Header: logo left, everything else right -------------------------- */
header .wp-block-group.is-layout-flex {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 !important;
}
header .wp-block-site-logo,
header .custom-logo-link,
header a[rel="home"] {
	margin-right: auto !important;
}
/* Any direct child of the header flex row that isn't the logo sits in the right cluster.
   Give them a small gap between each other, but anchor to the right via the logo's
   margin-right: auto. */
header .wp-block-group.is-layout-flex > *:not(.wp-block-site-logo):not(.custom-logo-link):not(a[rel="home"]) {
	margin-left: 0.75rem;
}
/* ==========================================================================
   PGB DASHBOARD v13 — append to style.css (supersedes v12 where overlapping)
   Addresses remaining issues:
   - Sidebar left-edge aligns exactly under "My Account" h1
   - Header right-cluster (Home/Shop/MyAccount/icon/Logout/cart) forced right
   - Active nav highlight matches tile width exactly (no overhang, no gap)
   ========================================================================== */

/* --- 1. Sidebar alignment with h1 ---------------------------------------- */
.page-template-page-my-account main { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.page-template-page-my-account main > h1,
.page-template-page-my-account main > .wp-block-heading {
	margin: 0 0 1.25rem 0 !important;
	padding: 0 !important;
}
.page-template-page-my-account main .woocommerce {
	margin: 0 !important;
	padding: 0 !important;
}
.page-template-page-my-account .woocommerce-MyAccount-navigation {
	margin: 0 !important;
	padding: 0 !important;
}
.page-template-page-my-account .woocommerce-MyAccount-navigation ul {
	margin: 0 !important;
	padding: 0 !important;
}

/* --- 2. Active highlight = full item width, same padding as inactive ----- */
.woocommerce-MyAccount-navigation li {
	list-style: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-MyAccount-navigation li a {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.55rem 0.85rem !important;
	margin: 0 !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	color: var(--color-ink) !important;
	background: transparent !important;
	transition: background 120ms;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--color-ink-wash-5) !important;
}
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li[class*="is-active"] > a {
	background: var(--color-ink-wash-10) !important;
	font-weight: 600 !important;
}

/* --- 3. Header: logo left, everything else pinned right ------------------ */
header .wp-block-group.is-layout-flex {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.75rem !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 1.5rem !important;
}
/* Logo first, then spacer via auto-margin */
header .wp-block-site-logo,
header .custom-logo-link,
header a[rel="home"] {
	margin-right: auto !important;
}
/* Nuke any nav margin-left that would fight the auto */
header .wp-block-navigation:not(.is-vertical) {
	margin-left: 0 !important;
}
/* ==========================================================================
   PGB DASHBOARD v14 — append to style.css
   Targets exact offsets from devtools:
   - 40px indent on nav vs h1 (zero margins on intervening wrappers)
   - Right cluster has 129px auto-margins on both sides (centering it) — kill
   ========================================================================== */

/* --- Header: kill auto-margins on the right cluster --------------------- */
header .wp-block-group.is-layout-flex > .wp-block-group.is-content-justification-right,
header .wp-block-group.is-layout-flex > .wp-block-group:not(.wp-block-site-logo):not(:first-child) {
	margin-left: auto !important;
	margin-right: 0 !important;
}
/* Ensure logo stays left */
header .wp-block-site-logo,
header .wp-block-group.is-layout-flex > .wp-block-site-logo {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Flex row uses space-between, but we're enforcing via margins now */
header .wp-block-group.is-layout-flex { justify-content: flex-start !important; }

/* --- Sidebar alignment: zero every intermediate indent ------------------ */
.page-template-page-my-account main > h1,
.page-template-page-my-account main > .wp-block-heading {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.page-template-page-my-account main .woocommerce,
.page-template-page-my-account main .woocommerce > *,
.page-template-page-my-account .woocommerce-MyAccount-navigation,
.page-template-page-my-account .woocommerce-MyAccount-navigation > ul,
.page-template-page-my-account .woocommerce-MyAccount-navigation-wrapper {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.page-template-page-my-account .woocommerce-MyAccount-navigation ul {
	padding-inline-start: 0 !important;   /* kill UA default */
}

/* Keep the flex row layout */
.page-template-page-my-account main .woocommerce {
	display: flex !important;
	gap: 2.5rem !important;
	align-items: flex-start !important;
}
.page-template-page-my-account .woocommerce-MyAccount-navigation {
	flex: 0 0 180px !important;
	width: 180px !important;
}
.page-template-page-my-account .woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	min-width: 0;
}
/* ==========================================================================
   PGB DASHBOARD v15 — append to style.css
   Fixes the narrow-viewport / mobile stack seen in the latest screenshot:
   - h1 was centered (inherited theme style) — force left-align
   - Sidebar in stacked mode was 180px fixed + centered — make full width, left aligned
   - Main content fills below
   ========================================================================== */

.page-template-page-my-account main > h1,
.page-template-page-my-account main > .wp-block-heading {
	text-align: left !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	align-self: flex-start !important;
}

/* When the page is narrow, the flex row stacks. Force left-align + full width. */
@media (max-width: 900px) {
	.page-template-page-my-account main .woocommerce {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.page-template-page-my-account .woocommerce-MyAccount-navigation {
		flex: 1 1 auto !important;
		width: 100% !important;
		margin: 0 0 1.5rem 0 !important;
	}
	.page-template-page-my-account .woocommerce-MyAccount-content {
		flex: 1 1 auto !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.page-template-page-my-account .woocommerce-MyAccount-navigation ul {
		margin: 0 !important;
		padding: 0 !important;
	}
	.page-template-page-my-account main > h1,
	.page-template-page-my-account main > .wp-block-heading {
		font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
	}
}

/* Mid-narrow (~600-900): keep sidebar reasonable width, but flush left */
@media (max-width: 900px) {
	.page-template-page-my-account .woocommerce-MyAccount-navigation {
		max-width: none !important;
	}
}
/* ==========================================================================
   PGB DASHBOARD v16 — append to style.css
   Root cause: .woocommerce wrapper is display: block (not flex), so children
   flow via something unknown — and nav has 40px mystery indent.
   Fix: force flex with max specificity, and reset any first-child offset.
   ========================================================================== */

body.page-template-page-my-account main > div.woocommerce:has(.woocommerce-MyAccount-navigation),
html body.page-template-page-my-account main > div.woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: flex !important;
	flex-direction: row !important;
	gap: 2.5rem !important;
	align-items: flex-start !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* If there's a floated before-pseudo generating the offset, kill it */
body.page-template-page-my-account main > div.woocommerce:has(.woocommerce-MyAccount-navigation)::before,
body.page-template-page-my-account main > div.woocommerce:has(.woocommerce-MyAccount-navigation)::after {
	content: none !important;
	display: none !important;
}

/* Nav: rigid 180px, zero margin/padding, NO leading indent */
body.page-template-page-my-account .woocommerce-MyAccount-navigation {
	flex: 0 0 180px !important;
	width: 180px !important;
	max-width: 180px !important;
	margin: 0 !important;
	padding: 0 !important;
	order: 1 !important;             /* force left position */
}

body.page-template-page-my-account .woocommerce-MyAccount-content {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	order: 2 !important;
}

/* Narrow viewport stack */
@media (max-width: 900px) {
	body.page-template-page-my-account main > div.woocommerce:has(.woocommerce-MyAccount-navigation),
	html body.page-template-page-my-account main > div.woocommerce:has(.woocommerce-MyAccount-navigation) {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}
	body.page-template-page-my-account .woocommerce-MyAccount-navigation,
	body.page-template-page-my-account .woocommerce-MyAccount-content {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: none !important;
	}
}
/* ==========================================================================
   PGB DASHBOARD v17 — append to style.css
   Tighten header outer gutters from ~1.5rem to ~0.75rem (half).
   ========================================================================== */

header .wp-block-group.is-layout-flex {
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
}

/* If the outer gutter comes from a parent wrapper instead of the flex row,
   also tighten those common WP containers. */
header .wp-block-template-part,
header.wp-block-template-part,
header > .wp-block-group {
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
}
/* ==========================================================================
   PGB DASHBOARD v19 — append to style.css
   Root cause: HEADER has max-width ~1100px (alignfull-but-centered),
   with viewport 1390 leaving 145px "gutter" on each side that was
   looking like extra header padding.
   Fix: let the header fill the viewport (with only a small gutter).
   ========================================================================== */

html body header.wp-block-group,
html body header .wp-block-group.is-layout-flex {
	max-width: 1280px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

html body header.wp-block-group {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

html body header .wp-block-group.is-layout-flex {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* ==========================================================================
   PGB DASHBOARD v20 — append to style.css
   Issue: the single right-cluster inside header is 848px wide and spreads
   its children (Home/Shop/MyAccount/icon/Logout/cart) across that whole
   width. Need to make it hug-content and sit flush right.
   Strategy: clamp width to max-content so children collapse to their natural
   widths, then margin-left: auto pushes the cluster to the right edge.
   ========================================================================== */

html body header .wp-block-group.is-layout-flex > .wp-block-group.is-content-justification-right {
	width: max-content !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	gap: 1.25rem !important;
	justify-content: flex-end !important;
}

/* Inside that cluster, any nav block inside should also not spread */
html body header .wp-block-group.is-content-justification-right .wp-block-navigation,
html body header .wp-block-group.is-content-justification-right .wp-block-navigation__container {
	gap: 1rem !important;
	justify-content: flex-end !important;
	margin: 0 !important;
}
/* ==========================================================================
   PGB SHOP v3 — append to style.css
   Targets the actual custom shortcode class contract:
     .pgb-card                   -> product cards
     .pgb-shop-controls__filters -> primary filter row (tabs)
     .pgb-shop-controls__tags    -> secondary filter row (pill chips)
     .pgb-shop__meta             -> product count + sort area
     .pgb-card__dot              -> status dot on cards

   Consolidates all shop improvements:
     1.  Primary filters as underline tabs (not chips)
         Secondary filters as smaller de-emphasized pills
     3.  Remove status dot on cards
     4.  OOS cards: outlined "View details" CTA style hook
     6.  Product count inline with the filter/sort row (not floating alone)
     8.  Sort dropdown polish (options set in functions.php)
     10. Layout order: banner → filter row + count + sort → grid
     Bonus: Remove parens from "(All)" chip via CSS
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1a. PRIMARY FILTERS AS TABS                                        */
/* ------------------------------------------------------------------ */
.pgb-shop-controls__filters {
	display: flex !important;
	flex-wrap: wrap;
	gap: 2rem !important;
	margin: 0 0 0.75rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-bottom: 1px solid var(--color-border) !important;
	background: transparent !important;
}
.pgb-shop-controls__filters > li { list-style: none; padding: 0; margin: 0; }
.pgb-shop-controls__filters a,
.pgb-shop-controls__filters button {
	display: inline-block !important;
	padding: 0.65rem 0 !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	color: var(--color-shop-label) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -1px !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	transition: color 120ms, border-color 120ms !important;
	cursor: pointer;
}
.pgb-shop-controls__filters a:hover,
.pgb-shop-controls__filters button:hover { color: var(--color-ink) !important; }
.pgb-shop-controls__filters .is-active > a,
.pgb-shop-controls__filters .is-active > button,
.pgb-shop-controls__filters a.is-active,
.pgb-shop-controls__filters button.is-active,
.pgb-shop-controls__filters a[aria-current="true"],
.pgb-shop-controls__filters a[aria-current="page"] {
	color: var(--color-ink) !important;
	font-weight: 600 !important;
	border-bottom-color: var(--color-ink) !important;
}

/* ------------------------------------------------------------------ */
/* 1b. SECONDARY FILTERS AS PILLS                                     */
/* ------------------------------------------------------------------ */
.pgb-shop-controls__tags {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem !important;
	margin: 0 0 1rem 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.pgb-shop-controls__tags > li { list-style: none; padding: 0; margin: 0; }
.pgb-shop-controls__tags a,
.pgb-shop-controls__tags button {
	display: inline-block !important;
	padding: 0.35rem 0.85rem !important;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	color: var(--color-shop-label) !important;
	background: var(--color-chip) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	transition: all 120ms !important;
	cursor: pointer;
}
.pgb-shop-controls__tags a:hover,
.pgb-shop-controls__tags button:hover {
	background: var(--color-chip-hover) !important;
	color: var(--color-ink) !important;
}
.pgb-shop-controls__tags .is-active > a,
.pgb-shop-controls__tags .is-active > button,
.pgb-shop-controls__tags a.is-active,
.pgb-shop-controls__tags button.is-active,
.pgb-shop-controls__tags a[aria-current="true"] {
	background: var(--color-ink-fill) !important;
	color: var(--color-on-primary) !important;
	border-color: var(--color-ink-fill) !important;
}

/* Bonus: strip parens from "(All)" chip in the tags row */
.pgb-shop-controls__tags a,
.pgb-shop-controls__tags button {
	/* handled by the .functions.php.txt edit; see README for permanent fix */
}

/* ------------------------------------------------------------------ */
/* 3. REMOVE STATUS DOT ON CARDS                                      */
/* ------------------------------------------------------------------ */
.pgb-card__dot,
.pgb-card .pgb-card__dot { display: none !important; }

/* ------------------------------------------------------------------ */
/* 4. OOS CARD — style hook for "View details" button                 */
/* The PHP change in functions.php swaps the OOS CTA; this styles it. */
/* ------------------------------------------------------------------ */
.pgb-card--outofstock .pgb-card__cta,
.pgb-card .pgb-card__cta--details,
.pgb-card a.pgb-view-details {
	display: inline-block !important;
	padding: 0.7rem 1.1rem !important;
	background: transparent !important;
	border: 1px solid var(--color-ink) !important;
	color: var(--color-ink) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	width: auto !important;
	text-align: center;
	transition: all 120ms;
}
.pgb-card--outofstock .pgb-card__cta:hover,
.pgb-card a.pgb-view-details:hover {
	background: var(--color-ink-fill) !important;
	color: var(--color-on-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 6 + 10. LAYOUT: banner → [filters + count + sort] → grid            */
/*                                                                    */
/* .pgb-shop__meta currently holds the product count.                 */
/* Make it a flex row that can pack count and sort side-by-side when  */
/* the sort control lives at .pgb-shop-controls__sort.                */
/* ------------------------------------------------------------------ */
.pgb-shop__meta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	margin: 0 0 1rem 0 !important;
	padding: 0.5rem 0 !important;
	border-top: 1px solid var(--color-border) !important;
	border-bottom: 1px solid var(--color-border) !important;
	font-size: 0.85rem !important;
	color: var(--color-shop-label) !important;
	font-family: var(--mono, 'JetBrains Mono', monospace);
	letter-spacing: 0.04em;
}

/* If your theme renders the sort select outside .pgb-shop__meta, the
   functions.php change below moves it into the meta row. Style it here. */
.pgb-shop__meta select,
.pgb-shop-controls__sort select {
	padding: 0.4rem 1.75rem 0.4rem 0.7rem !important;
	border: 1px solid var(--color-control-border-soft) !important;
	border-radius: 4px !important;
	background-color: var(--color-surface) !important;
	font-size: 0.82rem !important;
	color: var(--color-ink) !important;
	font-family: inherit !important;
	cursor: pointer;
}

/* Move the banner ABOVE the controls/meta by reordering flex children. If
   your markup wraps them in a common parent (.pgb-shop or similar), flex
   order does the work. Adjust selector if your wrapper differs. */
.pgb-shop {
	display: flex !important;
	flex-direction: column !important;
}
.pgb-shop .pgb-ship-banner,
.pgb-shop .pgb-shipping-banner { order: 1 !important; }
.pgb-shop .pgb-shop-controls     { order: 2 !important; }
.pgb-shop .pgb-shop__meta        { order: 3 !important; }
.pgb-shop .pgb-shop__grid,
.pgb-shop .pgb-shop-grid         { order: 4 !important; }
/* ==========================================================================
   PGB SHOP v4 — append to style.css, OVERRIDES v3 where overlapping
   Fixes:
   1. Left-align "Catalog" h1 (currently centered)
   2. Ensure meta row has both top AND bottom hairlines
   3. Mobile horizontal overflow: grid bleeds off right edge
      Root cause: fixed grid-template-columns at min(...) widths that exceed
      viewport. Fix: fluid responsive columns + max-width cap on containers +
      overflow-x: hidden safety net on wrappers.
   ========================================================================== */

/* --- 1. Left-align Catalog h1 ------------------------------------------- */
.page-template-page-shop main h1,
.page-template-page-shop main > .wp-block-heading,
main h1.pgb-shop__title,
body.page-template-page-shop main h1.wp-block-heading,
.pgb-shop h1,
.pgb-shop__header h1 {
	text-align: left !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	align-self: flex-start !important;
}

/* If the h1 + subtitle form a block with text-align:center, reset it */
.pgb-shop__header,
.pgb-shop__intro {
	text-align: left !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

/* --- 2. Meta row: force both hairlines visible -------------------------- */
.pgb-shop__meta {
	border-top: 1px solid var(--color-border) !important;
	border-bottom: 1px solid var(--color-border) !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

/* --- 3. Mobile overflow ------------------------------------------------- */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw !important;
}

.pgb-shop,
.pgb-shop__grid,
.pgb-shop-grid,
.pgb-shop__body {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Grid: fluid columns that wrap to viewport */
.pgb-shop__grid,
.pgb-shop-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 1rem !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* Cards never exceed their grid cell */
.pgb-card {
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
.pgb-card img {
	max-width: 100%;
	height: auto;
}

/* Controls row: allow filters/tabs/chips/sort to wrap */
.pgb-shop-controls,
.pgb-shop-controls__row {
	max-width: 100% !important;
	flex-wrap: wrap !important;
	box-sizing: border-box;
}
.pgb-shop-controls__filters,
.pgb-shop-controls__tags {
	max-width: 100% !important;
	overflow-x: visible !important;
}

/* Meta row: stack on narrow viewports */
@media (max-width: 600px) {
	.pgb-shop__meta {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
	}
	.pgb-shop__grid,
	.pgb-shop-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
		gap: 0.75rem !important;
	}
}

/* Safety: kill any element that sets min-width in pixels and forces horizontal scroll */
.pgb-shop *,
.pgb-card * {
	min-width: 0;
}

/* ==========================================================================
   PGB SHOP v0.4.28 — append to style.css
   Issue 1: main.pgb-shop inherited the v0.8 rule that capped main to 1100px
   centered. Header went full-width in v0.4.22 so the Catalog heading + grid
   were visually center-indented while the logo was flush-left. Fix: main
   matches the header — full-width with 1.5rem inner gutter.
   Issue 2: .pgb-shop__header flex group was shrinking to intrinsic width and
   auto-centering inside main. Force it to fill so space-between anchors the
   h1 to the left edge.
   ========================================================================== */

html body main.pgb-shop,
html body main.wp-block-group.pgb-shop {
	max-width: 1280px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

.pgb-shop .pgb-shop__header {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Left-align the inner shop sections (were auto-centered via .alignwide
   or their own max-width rules). Match the Catalog heading and grid edge. */
.pgb-shop .pgb-shop-controls,
.pgb-shop .pgb-shipbar,
.pgb-shop .pgb-shop-controls.alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Ship banner: the inner flex justify was also centering contents. Anchor
   the "Free U.S. shipping..." text to the left edge to match the section. */
.pgb-shop .pgb-shipbar {
	justify-content: flex-start !important;
}

/* ==========================================================================
   PGB HEADER v0.4.30 — append to style.css
   Prior rules (v0.8 line 2216, v11 line 2747+2804, v19 line 3188) all caught
   different selectors but collectively left the header inner constrained to
   1100px centered — logo sat at x=140 instead of the 1.5rem gutter, and the
   nav cluster didn't reach the viewport edge. v19 tried to fix this but lost
   specificity battles. This block uses a high-specificity chain (0,0,5,4) to
   neutralize the 1100px caps and restore the full-width + 1.5rem inner gutter.
   ========================================================================== */

html body .wp-site-blocks > header.wp-block-template-part {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
html body .wp-site-blocks > header.wp-block-template-part > header.wp-block-group,
html body .wp-site-blocks > header.wp-block-template-part > header.wp-block-group > .wp-block-group {
	max-width: 1280px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Strip padding from outer containers; only the innermost flex row carries
   the 1.5rem gutter so logo and right-cluster sit exactly at +/-1.5rem. */
html body .wp-site-blocks > header.wp-block-template-part,
html body .wp-site-blocks > header.wp-block-template-part > header.wp-block-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

html body .wp-site-blocks > header.wp-block-template-part > header.wp-block-group > .wp-block-group.is-layout-flex {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Right cluster: no own padding (the parent flex already has 1.5rem), flush-right */
html body header .wp-block-group.is-content-justification-right {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}

/* ==========================================================================
   PGB HEADER v0.4.31 — append to style.css
   1. Remove customer-account icon (duplicates "My Account" nav link — same
      destination, adds visual noise).
   2. Pull the sticky header up against the admin bar. The existing rule
      (line 216) offset the header by 32px when admin bar is present,
      creating visible white space above the logo. Dropping that offset moves
      the whitespace where the user wants it: between header and Catalog.
      Trade-off: admin bar overlaps the header by a hair on scroll (admin-only
      concern, not a public-facing regression).
   ========================================================================== */

header .wp-block-woocommerce-customer-account,
header .wc-block-customer-account {
	display: none !important;
}

/* When the admin bar is visible, sticky header sits just below it so
   neither overlaps. Public visitors (no admin bar) stick at viewport top. */
body.admin-bar header.wp-block-template-part {
	top: 32px !important;
}
@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part { top: 46px !important; }
}

/* ==========================================================================
   PGB v0.4.32 — sticky header + sticky filter bar
   The sticky header was declared at line 147 but silently broken: v0.4.28
   added `overflow-x: hidden` on html/body as a mobile-overflow safety net,
   and `overflow: hidden` on any ancestor disables sticky positioning on
   descendants. Swap to `overflow-x: clip` — same visual guarantee, keeps
   sticky alive.
   Also pin the shop filter bar so it stays reachable across the long grid.
   Top offset sits flush below the ~41px header. z-index stays below header.
   ========================================================================== */

html, body {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.pgb-shop .pgb-shop-controls {
	position: sticky !important;
	top: 41px; /* matches header height; admin-bar view bumps below */
	z-index: 90;
	background: var(--color-bg);
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1px solid var(--color-border);
}

body.admin-bar .pgb-shop .pgb-shop-controls { top: 73px; }
@media (max-width: 782px) {
	body.admin-bar .pgb-shop .pgb-shop-controls { top: 87px; }
}

/* ==========================================================================
   FINAL ALIGNMENT — header + main + footer all share 1280px content width
   Supersedes earlier home-v0.8 (1100px) + dashboard-v19 (full-width header) rules.
   ========================================================================== */
html body header.wp-block-group,
html body header .wp-block-group.is-layout-flex,
html body main.wp-block-group,
html body footer.wp-block-template-part > .wp-block-group {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box !important;
}

/* Home stats: don't truncate the crypto rails ticker — let it wrap naturally. */
.pgb-stat__sub,
.pgb-home .pgb-stat__sub,
.pgb-hero-stats .pgb-stat__sub {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* Force main to fill 1280px regardless of constrained-layout child-width rules */
/* Main containers on all primary pages stretch to fill the 1280 constraint
   (body is a flex-column, so children fit-content by default — opt into stretch). */
html body main.wp-block-group.pgb-home,
html body main.wp-block-group.pgb-shop,
html body.page-template-page-my-account main.wp-block-group,
html body.woocommerce-account main.wp-block-group,
html body.woocommerce-page main.wp-block-group {
	width: 100% !important;
	align-self: stretch !important;
}

/* Children of each page's main can use full 1280 (override WP's
   is-layout-constrained > * default 720 cap). Hero keeps its explicit 720
   max for readable line-length — applied inline on .pgb-hero. */
html body main.pgb-home > .wp-block-group,
html body main.pgb-home > .is-layout-constrained > .wp-block-group,
html body main.pgb-shop > .wp-block-group,
html body main.pgb-shop > .is-layout-constrained > .wp-block-group,
html body.page-template-page-my-account main > .wp-block-group,
html body.page-template-page-my-account main > .wp-block-heading,
html body.page-template-page-my-account main > .woocommerce {
	max-width: 100% !important;
}
html body main.pgb-home > .pgb-hero {
	max-width: 720px !important;
}

/* ==========================================================================
   PALETTE ACCENTS v1 — tasteful color hits on chrome
   Three subtle additions: footer mineral bg, aqua dots on footer headings,
   aqua hairline under header. Keeps Ink-on-Fog dominant; uses Aqua as
   decorative accent per WCAG principle (not for text).
   ========================================================================== */

/* 1. Footer: tint from pure-white surface to mineral — a distinct "floor"
      without leaving the palette. */
footer.wp-block-template-part > .wp-block-group,
html body footer.wp-block-template-part > header.wp-block-group,
html body footer.wp-block-template-part > footer.wp-block-group {
	background-color: var(--color-band) !important;
}

/* 2. Footer column headings: tiny aqua dot before each h4 — subtle section
      markers in brand color, borrows the same dot motif as .pgb-home-trust. */
footer.wp-block-template-part h4.wp-block-heading {
	position: relative;
	padding-left: 1rem;
}
footer.wp-block-template-part h4.wp-block-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-aqua);
}

/* 3. Header bottom border: swap gray for a soft aqua tint — a whisper of
      brand color at the chrome boundary. The mix is not an aqua line, just
      aqua-tinted gray. It lives in the token, not here: Lightning CSS can
      only resolve both sides inside a definition, so a mix written in a
      consuming rule keeps its LIGHT result in dark mode. */
html body header.wp-block-template-part,
html body header.wp-block-template-part > header.wp-block-group {
	border-bottom-color: var(--color-header-rule) !important;
}

/* ==========================================================================
   PGB CARD CTA — Notify me (v0.4.42)
   Out-of-stock cards emit <button class="pgb-card__cta--notify"> instead of
   the old "View details" link. Same shape as Add to cart (block, 100%
   width, same padding/radius) but outlined to distinguish: white fill,
   ink border, ink text. Subscribed state (.pgb-card__cta--notified) is a
   muted disabled pill so the card doesn't jump in layout.
   High specificity to defeat the v8 + v3 OOS CTA rules (line 1884 / 3360).
   ========================================================================== */

.pgb-card .pgb-card__cta--notify,
.pgb-card--out .pgb-card__cta--notify,
.pgb-card--outofstock .pgb-card__cta--notify {
	display: block !important;
	width: 100% !important;
	margin-top: 0.5rem !important;
	padding: 0.55rem 0.75rem !important;
	background: var(--color-surface) !important;
	color: var(--color-ink) !important;
	border: 1px solid var(--color-ink) !important;
	border-radius: 4px !important;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 120ms, color 120ms;
}

.pgb-card .pgb-card__cta--notify:hover:not(.pgb-card__cta--notified) {
	background: var(--color-ink-fill) !important;
	color: var(--color-on-primary) !important;
}

.pgb-card .pgb-card__cta--notify.loading { opacity: 0.6; cursor: wait; }

.pgb-card .pgb-card__cta--notified {
	background: var(--color-surface-disabled) !important;
	color: var(--color-text-muted) !important;
	border-color: var(--color-border) !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* ==========================================================================
   PGB CARD POLISH v0.4.43
   - OOS badge top-right overlay (replaces the in-footer "In stock"/"Out of
     stock" pill). Shown only for OOS — in-stock is the happy path and
     doesn't need a badge, low-stock can be added back as a softer cue
     later if desired.
   - Product image bumped to ~88% of media (was 64%/70%) — less dead space,
     more product presence.
   - Tightened vertical rhythm inside the card body: image→title, title→
     specs, specs→price. Price→CTA gap preserved so the button reads as a
     distinct action region.
   ========================================================================== */

/* OOS badge: top-right of the media area, subtle outlined pill */
.pgb-card__media { position: relative; }

.pgb-card__badge--oos {
	position: absolute !important;
	top: 0.5rem !important;
	right: 0.5rem !important;
	padding: 0.2rem 0.45rem !important;
	/* Quieter slate treatment — OOS is informational, not alarming. The hot
	   red previously read as a warning and dragged attention away from
	   in-stock cards. */
	background: var(--color-badge-plate) !important;
	color: var(--color-text-muted) !important;
	border: 1px solid var(--color-badge-border-strong) !important;
	border-radius: 3px !important;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 0.65rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	backdrop-filter: blur(2px);
	pointer-events: none;
}

/* Bigger product image — fills the media tile more */
.pgb-card__img,
.pgb-card .pgb-card__img {
	width: 88% !important;
	height: 88% !important;
}

/* Tighten body spacing. Specificity trumps the v1.4 rules at line 2056+. */
.pgb-card .pgb-card__body {
	padding: 0.75rem !important;
	gap: 0 !important;
}

.pgb-card .pgb-card__title {
	margin-top: 0 !important;
	margin-bottom: 0.25rem !important;
}

.pgb-card .pgb-card__specs {
	margin: 0.15rem 0 0.25rem !important;
	padding: 0 !important;
}

.pgb-card .pgb-card__foot {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.pgb-card .pgb-card__price {
	padding: 0 !important;
	margin: 0 !important;
}

/* Action gap: keep visible breathing space between price and CTA */
.pgb-card .pgb-card__cta,
.pgb-card .pgb-card__cta--notify {
	margin-top: 0.75rem !important;
}

/* ==========================================================================
   PGB FILTERS v0.4.45 (supersedes v0.4.44 pill experiment)
   Revert the primary filters to the original tab SHAPE (no pill rounding,
   no border). Keep the highlight intent: active filter gets the same
   filled-ink background that the secondary pills use on active. Non-active
   filters are plain text, no chrome.
   ========================================================================== */

.pgb-shop-controls__filters {
	gap: 0.25rem !important;
	border-bottom: 1px solid var(--color-border) !important;
	margin-bottom: 0.75rem !important;
}

.pgb-shop-controls__filters a,
.pgb-shop-controls__filters button {
	display: inline-block !important;
	padding: 0.55rem 0.85rem !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	color: var(--color-shop-label) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 4px 4px 0 0 !important;
	margin-bottom: 0 !important;
	text-decoration: none !important;
	transition: background 120ms, color 120ms !important;
}

.pgb-shop-controls__filters a:hover,
.pgb-shop-controls__filters button:hover {
	background: var(--color-chip-hover) !important;
	/* The plate under this label darkens with the theme, so the label reads the
	   ink token and follows it. Same value in light mode. */
	color: var(--color-ink) !important;
}

.pgb-shop-controls__filters .is-active > a,
.pgb-shop-controls__filters .is-active > button,
.pgb-shop-controls__filters a.is-active,
.pgb-shop-controls__filters button.is-active,
.pgb-shop-controls__filters a[aria-current="true"],
.pgb-shop-controls__filters a[aria-current="page"] {
	background: var(--color-ink-fill) !important;
	color: var(--color-on-primary) !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   PGB CARD v0.4.46 — bigger image + low-stock badge
   Image: bumped back up so the product reads strongly again. Kept the
   flex-end anchor so the top-right badge has a natural clearance band.
   Badge relies on semi-transparent white bg + backdrop blur for
   readability against any overlap onto product artwork.
   Low-stock badge: amber pill, same position as OOS. Shown when display
   stock is 1–49 (PHP sets $state='low' and renders the badge). Carries
   the remaining count inline.
   ========================================================================== */

.pgb-card__media {
	align-items: flex-end !important;
	padding-bottom: 2% !important;
	padding-top: 10% !important;
}

.pgb-card .pgb-card__img,
.pgb-card__img {
	width: 90% !important;
	height: 90% !important;
}

/* Low-stock badge: amber variant, reuses the OOS badge positioning rules
   (absolute top-right, same chip shape). */
.pgb-card__badge--low {
	position: absolute !important;
	top: 0.5rem !important;
	right: 0.5rem !important;
	padding: 0.2rem 0.45rem !important;
	background: var(--color-badge-plate) !important;
	color: var(--color-stock-low-text) !important;
	border: 1px solid var(--color-stock-low) !important;
	border-radius: 3px !important;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 0.65rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	backdrop-filter: blur(2px);
	pointer-events: none;
}

/* ==========================================================================
   PGB CARD v0.4.47 — flex-column card so CTA pins to the bottom.
   Cards in a grid row auto-stretch to the tallest card's height, so a
   card with a 2-line product name (e.g. "PIN 10mg(Broken puck/Loose
   powder)") was pushing its own CTA down while short-name neighbors left
   dead space under their CTA. Making the card itself a flex column and
   setting margin-top:auto on the CTA pushes every CTA to the row's
   baseline regardless of title length. Also tightened body padding to
   pull title/price closer to the image.
   ========================================================================== */

.pgb-card {
	display: flex !important;
	flex-direction: column !important;
}

.pgb-card .pgb-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 0.6rem 0.75rem 0.75rem !important;
	gap: 0 !important;
}

.pgb-card .pgb-card__title {
	margin-top: 0 !important;
	margin-bottom: 0.2rem !important;
	line-height: 1.25 !important;
}

.pgb-card .pgb-card__foot {
	margin-top: 0 !important;
}

/* Pin the action to the card's baseline. Note: wpautop wraps the CTA in a
   <p>, so the <p> is the actual flex child — set margin-top:auto on the
   wrapper, not the CTA itself. Also kill empty <p> artifacts wpautop
   sprinkles between body children. */
.pgb-card .pgb-card__body > p:empty {
	display: none !important;
}
.pgb-card .pgb-card__body > p:last-child {
	margin: auto 0 0 !important;
	padding: 0 !important;
}

.pgb-card .pgb-card__cta,
.pgb-card .pgb-card__cta--notify {
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
}

.pgb-card .pgb-card__foot {
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   PGB v0.4.48 — About teaser + product callout + footer disclaimer
   ========================================================================== */

/* --- Homepage About teaser ---------------------------------------------- */
.pgb-about-teaser {
	max-width: 720px;
	margin: 2.5rem 0 !important;
	padding: 0 !important;
	text-align: left;
}
.pgb-about-teaser__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 0.5rem 0;
	line-height: 1.25;
}
.pgb-about-teaser__lede {
	font-size: 1rem;
	color: var(--color-text-muted);
	margin: 0 0 1rem 0;
	line-height: 1.55;
}
.pgb-about-teaser__cta {
	display: inline-block;
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms;
}
.pgb-about-teaser__cta:hover {
	border-bottom-color: var(--color-ink);
}

/* --- Homepage "Our Standards" trust section ---------------------------- */
.pgb-standards {
	max-width: 820px;
	margin: 3rem 0 !important;
	padding: 2rem !important;
	background: var(--color-panel-wash);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}
.pgb-standards__eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* --color-aqua is the decorative accent and measures 2.48:1 on the panel's
	   --color-panel-wash plate. --color-aqua-strong is the token that exists
	   for accent used as TEXT: 5.14:1 on the same plate. */
	color: var(--color-aqua-strong);
	margin-bottom: 0.5rem;
}
.pgb-standards__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 0.75rem 0;
	line-height: 1.25;
}
.pgb-standards__body {
	font-size: 1rem;
	color: var(--color-text-muted);
	margin: 0 0 1rem 0;
	line-height: 1.6;
}
.pgb-standards__body strong {
	color: var(--color-ink);
	font-weight: 600;
}
.pgb-standards__tagline {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-ink);
	margin: 0 0 1rem 0;
}
.pgb-standards__cta {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.85rem;
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms;
}
.pgb-standards__cta:hover { border-bottom-color: var(--color-ink); }

@media (max-width: 640px) {
	.pgb-standards { padding: 1.5rem !important; }
	.pgb-standards__title { font-size: 1.35rem; }
}

/* --- Single-product "passed RD1 + RD2" callout -------------------------- */
.pgb-rd-callout {
	margin: 1rem 0 1.25rem;
	padding: 0.75rem 1rem;
	background: var(--color-panel-wash);
	border-left: 3px solid var(--color-aqua);
	border-radius: 4px;
	font-size: 0.9rem;
	color: var(--color-ink);
}
/* The whole label + figure + CTA is one clickable link to the lab-test hub. */
.pgb-rd-callout__main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.pgb-rd-callout__main:hover {
	color: var(--color-ink);
}
.pgb-rd-callout__main:hover .pgb-rd-callout__link {
	border-bottom-color: currentColor;
}
.pgb-rd-callout__label {
	font-weight: 500;
}
.pgb-rd-callout__link {
	color: var(--color-ink);
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms;
}
.pgb-rd-callout__figure {
	font-weight: 600;
}
.pgb-rd-callout__note {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	opacity: 0.7;
}

/* --- Shop-card "Lab tested" badge --------------------------------------- */
.pgb-lab-badge{display:inline-flex;align-items:center;gap:.25rem;margin:.15rem 0 .35rem;font-size:.78rem;font-weight:600;line-height:1;padding:.3rem .55rem;border-radius:999px;text-decoration:none;color:var(--color-lab-badge-text);background:var(--color-lab-badge-plate)}
.pgb-lab-badge:hover{background:var(--color-lab-badge-plate-hover)}

/* --- Footer disclaimer band --------------------------------------------- */
.pgb-footer__disclaimer {
	max-width: 960px !important;
	margin: 0 auto !important;
}
.pgb-footer__disclaimer h4 {
	font-size: 0.85rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 0.5rem 0 !important;
}
.pgb-footer__disclaimer p {
	font-size: 0.78rem !important;
	line-height: 1.55;
	margin: 0 0 0.5rem 0 !important;
}
.pgb-footer__disclaimer p:last-child { margin-bottom: 0 !important; }
.pgb-footer__disclaimer a {
	color: var(--color-text-muted) !important;
	text-decoration: underline;
}

/* Small note under the ShipSync portal link in the Contact column.
   The colour reads the footer token rather than the page's muted grey: this
   note sits on the navy band, where --color-text-muted measured 2.81:1 and
   --color-footer-text-muted measures 6.01:1. This rule is unlayered and
   !important, so chrome/footer.css:169 — which asks for the same token —
   never gets to apply it; the value has to be written here. */
.pgb-footer__support-note {
	margin-top: 0.4rem !important;
	font-size: 0.72rem !important;
	line-height: 1.45 !important;
	color: var(--color-footer-text-muted) !important;
}
.pgb-footer__support-note em {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
}

/* --- Registration acknowledgement checkbox ------------------------------ */
.pgb-register-terms {
	margin-top: 1rem !important;
	padding: 0.75rem !important;
	background: var(--color-surface-inset);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-size: 0.85rem;
	line-height: 1.45;
}
.pgb-register-terms label {
	display: flex !important;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}
.pgb-register-terms input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}
.pgb-register-terms a {
	color: var(--color-ink);
	font-weight: 500;
}

/* ==========================================================================
   PGB PAGE v0.4.50 — content-page template (About, Testing, Membership
   Terms, Privacy Policy, and any future standalone page).
   Matches the shop/home design language:
   - Full-width main, 1.5rem inner gutter (same rail as shop + home)
   - Geist headings with site-scale hierarchy
   - 720px readable content column for long-form text
   - Title on the same left edge as the header logo and Catalog heading
   - Generous vertical rhythm, tightened enough to avoid the WP-default feel
   ========================================================================== */

/* Main: no side padding. The inner header + content blocks own the gutter
   so both share a common centered 1100px wrapper — same rail as Home's
   hero/stats/COA rows, so legal pages line up with the home layout. */
html body main.pgb-page,
html body main.wp-block-group.pgb-page {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.pgb-page .pgb-page__header {
	max-width: 1100px !important;
	width: auto !important;
	margin: 0 auto 2rem auto !important;
	padding: 0 1.5rem 0.75rem 1.5rem !important;
	border-bottom: 1px solid var(--color-border);
}

.pgb-page .pgb-page__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 2.25rem !important;
	font-weight: 600 !important;
	color: var(--color-ink) !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.15 !important;
	text-align: left !important;
	border-bottom: 0 !important;
}

/* Content wrapper centers at 1100px like the header; body text inside
   constrained to 720px for legal/long-form readability, anchored flush
   left within the 1100px wrapper. */
.pgb-page .pgb-page__content {
	max-width: 1100px !important;
	width: auto !important;
	margin: 0 auto !important;
	padding: 0 1.5rem !important;
}
/* WP's constrained layout auto-applies `margin: 0 auto` to children of any
   constrained group, which would center the 720px column on the 1100px
   wrapper and visually misalign it from the title (which sits flush left
   against the wrapper's padding). Pin children flush-left explicitly. */
.pgb-page .pgb-page__content > *,
.pgb-page .pgb-page__content > .wp-block-group > *,
.pgb-page .pgb-page__content .wp-block-post-content > * {
	max-width: 720px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.pgb-page .pgb-page__content > *:first-child {
	margin-top: 0 !important;
}

.pgb-page .pgb-page__content h2 {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	color: var(--color-ink) !important;
	letter-spacing: -0.005em !important;
	margin: 2.25rem 0 0.75rem 0 !important;
	line-height: 1.25 !important;
}

.pgb-page .pgb-page__content h3 {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: var(--color-ink) !important;
	margin: 1.75rem 0 0.5rem 0 !important;
	line-height: 1.3 !important;
}

.pgb-page .pgb-page__content p {
	font-size: 1rem !important;
	line-height: 1.65 !important;
	color: var(--color-text) !important;
	margin: 0 0 1rem 0 !important;
}

.pgb-page .pgb-page__content ul,
.pgb-page .pgb-page__content ol {
	margin: 0 0 1.25rem 0 !important;
	padding-left: 1.5rem !important;
}

.pgb-page .pgb-page__content li {
	font-size: 1rem !important;
	line-height: 1.65 !important;
	margin: 0 0 0.5rem 0 !important;
	color: var(--color-text);
}

.pgb-page .pgb-page__content li strong {
	color: var(--color-ink);
}

.pgb-page .pgb-page__content a {
	color: var(--color-ink) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pgb-page .pgb-page__content a:hover {
	text-decoration-thickness: 2px;
}

.pgb-page .pgb-page__content em {
	color: var(--color-text-muted);
	font-style: italic;
}

.pgb-page .pgb-page__content strong {
	font-weight: 600;
	color: var(--color-ink);
}

/* Block separators inside long-form content use the theme rule color */
.pgb-page .pgb-page__content hr {
	border: 0 !important;
	border-top: 1px solid var(--color-border) !important;
	margin: 2rem 0 !important;
}

/* Mobile: drop the vertical rhythm slightly so pages don't feel airy on small screens */
@media (max-width: 600px) {
	.pgb-page .pgb-page__title { font-size: 1.75rem !important; }
	.pgb-page .pgb-page__content h2 { font-size: 1.25rem !important; margin-top: 1.75rem !important; }
	.pgb-page .pgb-page__content h3 { font-size: 1.05rem !important; }
}

/* ==========================================================================
   PGB SHIPPING RESTRICTION NOTICE v0.4.51
   Rendered on single-product pages when the customer's saved shipping
   address is in a state restricted for that product. Styled as an alert
   band distinct from the aqua RD1+RD2 callout — red left rule + subtle
   red wash so the user can't miss it before adding to cart.
   ========================================================================== */
.pgb-ship-restriction-notice {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 1rem 0 1.25rem;
	padding: 0.85rem 1rem;
	background: var(--color-error-wash);
	border-left: 3px solid var(--color-error);
	border-radius: 4px;
	font-size: 0.9rem;
	color: var(--color-text);
	line-height: 1.5;
}
.pgb-ship-restriction-notice strong {
	color: var(--color-error);
	font-weight: 600;
}
.pgb-ship-restriction-notice a {
	color: var(--color-ink) !important;
	text-decoration: underline;
}

/* ==========================================================================
   PGB RUO LAYERING v0.4.53
   Visual hierarchy per spec: passive → contextual → active.
   ========================================================================== */

/* --- Layer 2: product page callout (above add-to-cart) ----------------- */
.pgb-ruo-callout {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 1rem 0 1.25rem;
	padding: 0.75rem 1rem;
	background: var(--color-panel-wash-2);
	border: 1px solid var(--color-notice-border);
	border-radius: 4px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text);
}
.pgb-ruo-callout__mark {
	font-size: 1.1rem;
	color: var(--color-text-muted);
	flex-shrink: 0;
	line-height: 1.5; /* match body line-height so icon aligns with first line */
}
.pgb-ruo-callout__body { flex: 1 1 auto; }
.pgb-ruo-callout__body strong { color: var(--color-ink); }
.pgb-ruo-callout__link {
	display: inline-block;
	margin-left: 0.25rem;
	color: var(--color-ink) !important;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms;
}
.pgb-ruo-callout__link:hover { border-bottom-color: currentColor; }

/* §503A/§503B chemical-supplier disclaimer — smaller, muted, on its own line */
.pgb-ruo-callout__supplier {
	margin: 0.45rem 0 0;
	padding-top: 0.45rem;
	border-top: 1px solid var(--color-notice-border);
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* --- Layer 3: product page collapsible RUO section --------------------- */
.pgb-ruo-section {
	max-width: 720px;
	padding: 0.85rem 1rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}
.pgb-ruo-section__title {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	color: var(--color-ink);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	margin: 0;
	padding: 0.1rem 0;
	user-select: none;
}
.pgb-ruo-section__title::-webkit-details-marker { display: none; }
.pgb-ruo-section__title::before {
	content: '▸';
	display: inline-block;
	width: 1rem;
	color: var(--color-text-muted);
	transition: transform 120ms;
}
.pgb-ruo-section[open] .pgb-ruo-section__title::before {
	transform: rotate(90deg);
}
.pgb-ruo-section p {
	margin: 0.75rem 0 0 0;
	line-height: 1.6;
	font-size: 0.92rem;
}
.pgb-ruo-section p:first-of-type { margin-top: 0.85rem; }

/* --- Layer 4: checkout/cart summary reminder --------------------------- */
.pgb-checkout-ruo {
	display: block;
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	background: var(--color-panel-wash-3);
	border-left: 3px solid var(--color-ink);
	border-radius: 4px;
	font-size: 0.88rem;
	line-height: 1.55;
}
.pgb-checkout-ruo strong { color: var(--color-ink); }

/* --- Order-notes "may be missed" warning — amber tint, above the textarea */
.pgb-order-notes-warn {
	display: block;
	margin: 0.35rem 0 0.5rem;
	padding: 0.55rem 0.75rem;
	background: var(--color-warning-wash);
	border: 1px solid var(--color-warning-wash-border);
	border-left-width: 3px;
	border-radius: 4px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--color-on-warning-wash);
}
.pgb-order-notes-warn strong { color: var(--color-on-warning-wash); }
.woocommerce-checkout #order_comments_field .pgb-order-notes-warn a {
	color: var(--color-on-warning-wash);
	text-decoration: underline;
	font-weight: 500;
}

/* Block-checkout twin of the rule above — the wp:html notice in
   page-checkout.html has no #order_comments_field wrapper. */
.wp-block-woocommerce-checkout .pgb-order-notes-warn a {
	color: var(--color-on-warning-wash);
	text-decoration: underline;
	font-weight: 500;
}

/* WC renders the order_comments field as:
   <p#order_comments_field>
     <label>
     <span.woocommerce-input-wrapper>
       <textarea#order_comments>
       <span.description>  ← we inject the warning here
   The description sits INSIDE the input-wrapper, after the textarea. Flex-reorder
   the wrapper's children so the warning renders BEFORE the textarea. */
.woocommerce-checkout #order_comments_field .woocommerce-input-wrapper {
	display: flex;
	flex-direction: column;
}
.woocommerce-checkout #order_comments_field .woocommerce-input-wrapper > .description {
	order: -1;
	display: block;        /* defeat WC's default inline description styling */
	margin-bottom: 0.35rem;
}
.woocommerce-checkout #order_comments_field .woocommerce-input-wrapper > #order_comments {
	order: 0;
}

/* The WC terms checkbox itself gets a box treatment so the required
   affirmation reads as a distinct, unmissable action. */
.woocommerce-terms-and-conditions-wrapper {
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--color-surface-inset);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
	line-height: 1.5;
	font-size: 0.9rem;
}
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

/* --- /re-accept/ page form -------------------------------------------- */
.pgb-reaccept {
	max-width: 640px;
}
.pgb-reaccept__error {
	padding: 0.6rem 0.85rem;
	background: var(--color-error-wash);
	border-left: 3px solid var(--color-error);
	color: var(--color-error);
	border-radius: 4px;
	font-size: 0.9rem;
}
.pgb-reaccept__label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: var(--color-surface-inset);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	margin: 1rem 0;
	cursor: pointer;
	line-height: 1.5;
}
.pgb-reaccept__label input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}
.pgb-reaccept__submit {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	background: var(--color-ink-fill);
	color: var(--color-on-primary);
	border: 1px solid var(--color-ink-fill);
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 120ms;
}
/* The hover plate reads the token rather than writing the mix here: Lightning
   CSS cannot resolve a mix in a consuming rule, so written in place this kept
   its light result in dark mode. Same expression, same light value. */
.pgb-reaccept__submit:hover {
	background: var(--color-ink-fill-deep);
}

/* ==========================================================================
   PGB REGISTRATION FLOW v0.4.58 (click-wrap rebuild)
   - Inline scrollable T&C above the form
   - Required acknowledgement checkbox with version pinned in metadata
   - Confirm Password + WP strength meter
   - Required Business Type dropdown
   - hCaptcha widget + honeypot
   ========================================================================== */

.pgb-register-terms-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0.4rem;
}
.pgb-register-terms-header strong {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-size: 0.95rem;
	color: var(--color-ink);
}
.pgb-register-terms-meta {
	color: var(--color-text-muted);
	font-size: 0.78rem;
	font-family: var(--wp--preset--font-family--mono, "Geist Mono", ui-monospace, monospace);
}

.pgb-register-terms-doc {
	max-height: 400px;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-outline-border);
	background: var(--color-surface);
	border-radius: 4px;
	font-size: 0.85rem;
	line-height: 1.55;
	margin-bottom: 1rem;
	scroll-behavior: smooth;
}
.pgb-register-terms-doc:focus {
	outline: 2px solid var(--color-aqua);
	outline-offset: 2px;
}
.pgb-register-terms-doc h2 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.pgb-register-terms-doc h3 { font-size: 0.9rem; margin: 0.85rem 0 0.4rem; }
.pgb-register-terms-doc p,
.pgb-register-terms-doc li { font-size: 0.85rem; line-height: 1.55; margin-bottom: 0.55rem; }
.pgb-register-terms-doc ol,
.pgb-register-terms-doc ul { padding-left: 1.25rem; margin: 0 0 0.75rem; }

.pgb-register-terms-checkbox {
	margin-top: 0 !important;
	padding: 0.85rem 1rem;
	background: var(--color-surface-inset);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}
.pgb-register-terms-checkbox label {
	display: flex !important;
	gap: 0.55rem;
	align-items: flex-start;
	line-height: 1.5;
	font-size: 0.85rem;
	cursor: pointer;
}
.pgb-register-terms-checkbox input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.pgb-strength-meter {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 500;
}
.pgb-strength-meter[data-strength="0"],
.pgb-strength-meter[data-strength="1"] { color: var(--color-error); }
.pgb-strength-meter[data-strength="2"] { color: var(--color-strength-fair); }
.pgb-strength-meter[data-strength="3"],
.pgb-strength-meter[data-strength="4"] { color: var(--color-success); }

.pgb-password-match-msg {
	display: inline-block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	font-weight: 500;
}
.pgb-password-match-msg.match { color: var(--color-success); }
.pgb-password-match-msg.mismatch { color: var(--color-error); }

.pgb-register-business-type select {
	display: block;
	width: 100%;
	padding: 0.55rem 0.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-outline-border);
	border-radius: 4px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--color-text);
}
.pgb-register-business-type select:focus {
	outline: 2px solid var(--color-aqua);
	outline-offset: 1px;
}

.pgb-register-hcaptcha,
.pgb-login-hcaptcha {
	margin: 1rem 0;
}

/* Honeypot — hidden from sighted + assistive users; bots auto-fill it. */
.pgb-register-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* Mobile tweaks */
@media (max-width: 600px) {
	.pgb-register-terms-doc { max-height: 320px; padding: 0.75rem 0.9rem; }
	.pgb-register-terms-checkbox { padding: 0.7rem 0.85rem; }
}

/* --- Default /my-account/ view: register column = CTA button only -------- */
.pgb-register-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
}
.pgb-register-cta__lede {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}
.pgb-register-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 9px 1rem !important;
	min-height: auto !important;
	background: var(--color-ink-fill);
	color: var(--color-on-primary) !important;
	border: 1px solid var(--color-ink-fill);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: background 120ms;
	width: auto;
	min-width: 0;
}
.pgb-register-cta__button:hover {
	background: var(--color-ink-fill-deep);
	color: var(--color-on-primary) !important;
}

/* --- ?action=register view: full-page register form, T&C inline natural-height --- */
body.pgb-register-page .u-columns,
body.pgb-register-page #customer_login {
	display: block !important;
}
.pgb-register-page-wrap {
	max-width: 720px;
	margin: 0 auto;
}
.pgb-register-back {
	margin: 0 0 1rem !important;
	font-size: 0.85rem;
}
.pgb-register-back a {
	color: var(--color-text-muted);
	text-decoration: none;
}
.pgb-register-back a:hover { color: var(--color-ink); }
.pgb-register-page-heading {
	font-family: var(--wp--preset--font-family--heading, "Geist", sans-serif);
	color: var(--color-ink);
	margin: 0 0 0.4rem !important;
}
.pgb-register-page-intro {
	color: var(--color-text-muted);
	margin: 0 0 1.5rem !important;
	font-size: 0.95rem;
}

/* Drop the scrollable container — T&C renders at natural height so the
   user must scroll past the entire document to reach the form fields. */
body.pgb-register-page .pgb-register-terms-doc {
	max-height: none !important;
	overflow-y: visible !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	font-size: 0.95rem !important;
	margin-bottom: 1.5rem !important;
}
body.pgb-register-page .pgb-register-terms-doc h2 {
	font-size: 1.2rem !important;
	margin: 1.5rem 0 0.65rem !important;
	color: var(--color-ink);
}
body.pgb-register-page .pgb-register-terms-doc h3 {
	font-size: 1.05rem !important;
	margin: 1rem 0 0.5rem !important;
}
body.pgb-register-page .pgb-register-terms-doc p,
body.pgb-register-page .pgb-register-terms-doc li {
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
}
body.pgb-register-page .pgb-register-terms-header {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 0.6rem;
	margin-bottom: 1rem !important;
}

/* ==========================================================================
   MOBILE FIXES — v0.4.63
   - inputs: 16px font on mobile (prevent iOS Safari auto-zoom on focus)
   - acknowledgement checkbox: 24px tap target on mobile
   - hamburger menu: 44px tap target on mobile
   - shop sticky filter bar: drop sticky on mobile (302px tall covers screen)
   ========================================================================== */
@media (max-width: 600px) {
	form.woocommerce-form input[type="text"],
	form.woocommerce-form input[type="email"],
	form.woocommerce-form input[type="password"],
	form.woocommerce-form input[type="tel"],
	form.woocommerce-form input[type="number"],
	form.woocommerce-form input[type="search"],
	form.woocommerce-form select,
	form.woocommerce-form textarea,
	#pgb_business_type,
	#pgb_password_confirm {
		font-size: 16px !important;
	}

	.pgb-register-terms-checkbox input[type="checkbox"],
	#pgb_terms_privacy_agree {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}

	button.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-open {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	.pgb-shop .pgb-shop-controls {
		position: static !important;
		top: auto !important;
	}

	/* Mobile menu open state: full-width left-aligned items, proper tap rows.
	   Overrides the desktop right-aligned cluster (`.is-content-justification-right`)
	   that bleeds into the responsive overlay. */
	.wp-block-navigation__responsive-container.has-modal-open,
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.5rem !important;
	}
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 3rem !important;
	}
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
	}
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item > a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
		display: flex !important;
		justify-content: flex-start !important;
		align-items: center !important;
		padding: 1rem 0 !important;
		border-bottom: 1px solid var(--color-border) !important;
		font-size: 1.05rem !important;
		text-align: left !important;
	}
	.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item:last-child > a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child > a {
		border-bottom: none !important;
	}
	.wp-block-navigation__responsive-container-close {
		min-width: 44px !important;
		min-height: 44px !important;
		padding: 10px !important;
	}
}

/* ------------------------------------------------------------------------
 * Guard: simple-sales-tax (TaxCloud) style-tax-exemption-block.css globally
 * overrides WC's block-checkout select line-height (25px -> inherit) at equal
 * specificity via later source order; the select then inherits line-height:0
 * from WC's own __container rule. Blink hides it (special-cased select text
 * centering) but iOS WebKit collapses the selected value ("dropdowns don't
 * show what you've chosen", customer report 2026-07-14). Re-assert WC's
 * intended value; !important so plugin enqueue reordering can't regress it.
 * ---------------------------------------------------------------------- */
.wc-blocks-components-select .wc-blocks-components-select__select {
	line-height: 25px !important;
}

/* ==========================================================================
   PAGE PAINT — the body background and body text
   ==========================================================================
   theme.json's styles.color.background/text make WordPress emit, UNLAYERED:

     :root :where(body){background-color:var(--wp--preset--color--background);
                        color:var(--wp--preset--color--text);}

   Unlayered NORMAL declarations beat every layer, so this cannot be answered
   from src/styles/dark-mode.css — main.css imports that into layer(utilities)
   and it would lose no matter how specific it were. The rule has to live in
   this file, which is enqueued unlayered.

   Specificity is the other half. WP's selector scores (0,1,0): :root is a
   pseudo-class and :where() contributes nothing. `html body` is (0,0,2) — two
   type selectors — and LOSES, measured, not assumed. `:root body` is (0,1,1)
   and wins.

   Written unconditionally rather than under html[data-theme="dark"] so the
   page paint follows the same tokens as everything drawn on it. Light mode is
   unmoved: --color-bg resolves to #FAFAFA and --color-text to #0A0A0A, the
   two theme.json values this replaces.
   ========================================================================== */
:root body {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Link hover, same story. theme.json's elements.link.:hover makes WordPress
   emit, also unlayered:

     :root :where(a:where(:not(.wp-element-button)):hover){
       color:var(--wp--preset--color--primary);}

   so a hover with no rule of its own fell through to #1E3A5F on the dark page:
   the COA link 1.52:1, the category links 1.52:1, the gallery thumbs 1.55:1,
   the shipping-restriction link 1.21:1. Resting links are fine — they land on
   accent, 6.5:1 there.

   This selector is (0,1,2) against WP's (0,1,0). Every anchor-hover rule the
   theme owns is at least (0,2,0), so all of them keep winning; only the
   fall-through moves. --color-link-hover resolves to #1E3A5F in light, the
   value this replaces. */
html a:where(:not(.wp-element-button)):hover {
	color: var(--color-link-hover);
}

/* ==========================================================================
   WOOCOMMERCE DARK — WooCommerce's own chrome under the dark palette
   ==========================================================================
   WooCommerce enqueues its stylesheets UNLAYERED, and an unlayered NORMAL
   declaration beats every layered one whatever its specificity. So none of
   this can be answered from src/styles/dark-mode.css: main.css imports that
   into layer(utilities). It has to live in this file, which is enqueued
   unlayered too.

   Specificity carries these rules rather than source order — WooCommerce's
   own selector is kept in the tail and html[data-theme="dark"] adds (0,1,1)
   on top of it, so it makes no difference whether the plugin's sheets load
   before or after the theme's. Where WooCommerce writes !important the
   override matches it, and each of those is called out.

   Every selector here is scoped to dark. Light mode renders as it did.
   ========================================================================== */

/* Block-checkout text fields — the email box and every address field.
   WooCommerce paints a white plate with #2b2d2f ink, which reads as a lit box
   in the middle of a dark form. The :focus rule is separate because
   WooCommerce's own focus rule re-asserts the white plate; the edge is left
   to that rule's `border: 1.5px solid`, which resolves to currentColor and so
   follows the ink set here. */
html[data-theme="dark"] .wc-block-components-text-input input[type] {
	background-color: var(--color-surface);
	border-color: var(--color-control-border);
	color: var(--color-text);
}
html[data-theme="dark"] .wc-block-components-text-input input[type]:focus {
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* The country/state selects beside them. WooCommerce puts the plate on the
   container and the ink on the <select>, so this takes two rules. */
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__container {
	background: var(--color-surface);
}
html[data-theme="dark"] .wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--color-control-border);
	color: var(--color-text);
}

/* Checkboxes — the order-note toggle and the terms box. The plate stays white
   in WooCommerce's resting AND checked rule, and the tick is drawn in #000. */
html[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
html[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--color-surface);
	border-color: var(--color-control-border);
}
html[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--color-text);
}

/* Notice banners. Every notice on this site comes through this markup — the
   classic .woocommerce-message path is converted to it on a block theme — so
   this is the one that matters. WooCommerce tints the plate by type: #fff0f0
   for an error, #fffbf4 for a warning, #f4fff7 for a success. The error and
   warning wash tokens carry the same idea in the dark palette; success and
   info have no wash of their own, so they take the steel tint and let the
   edge say which they are. Text on all four is --color-text, 11.3:1 or
   better. None of the colour declarations they replace is !important — only
   WooCommerce's padding is. */
html[data-theme="dark"] .wc-block-components-notice-banner {
	background-color: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-text);
}
html[data-theme="dark"] .wc-block-components-notice-banner.is-error {
	background-color: var(--color-error-wash);
	border-color: var(--color-error);
}
html[data-theme="dark"] .wc-block-components-notice-banner.is-warning {
	background-color: var(--color-warning-wash);
	border-color: var(--color-warning-wash-border);
}
html[data-theme="dark"] .wc-block-components-notice-banner.is-success {
	background-color: var(--color-steel-50);
	border-color: var(--color-success);
}
html[data-theme="dark"] .wc-block-components-notice-banner.is-info {
	background-color: var(--color-steel-50);
	border-color: var(--color-steel);
}
/* The banner's own "View cart" link and its dismiss button. WooCommerce sets
   both to #2f2f2f !important, so this matches the !important. */
html[data-theme="dark"] .wc-block-components-notice-banner__content .wc-forward,
html[data-theme="dark"] .wc-block-components-notice-banner .wc-block-components-button {
	color: var(--color-text) !important;
}

/* The mini-cart drawer. It sits in the DOM on every page, parked off-canvas,
   so the white plate only shows once the cart icon is clicked. The ink is set
   here too: the drawer's contents inherit it, and left alone they stay at
   WooCommerce's near-black. */
html[data-theme="dark"] .wc-block-components-drawer {
	background: var(--color-surface);
	color: var(--color-text);
}

/* The PDP gallery's zoom button: a white disc with a black magnifier drawn as
   two pseudo-elements. WooCommerce's selector is four levels deep, so the
   whole of it is kept in the tail. */
html[data-theme="dark"] .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	background: var(--color-surface);
}
html[data-theme="dark"] .woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
	border-color: var(--color-text);
}
html[data-theme="dark"] .woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
	background: var(--color-text);
}

/* The cart line's remove "×". WooCommerce paints it var(--wc-red) !important,
   which lands on #AA0000 — 2.26:1 on the dark page. !important matched. */
html[data-theme="dark"] .woocommerce a.remove {
	color: var(--color-error) !important;
}

/* The order-summary quantity chip. Its plate is `currentColor`, so in dark
   mode it inherits --color-text and renders a near-white pill carrying the
   near-white digit WooCommerce draws from the theme.json background: 1.13:1.
   Giving it a plate of its own keeps the light mode's polarity — a deep chip
   with a light digit — and the digit reads 10.45:1 on it. */
html[data-theme="dark"] .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: var(--color-primary-fill);
}

/* ==========================================================================
   FOOTER SUPPORT NOTE — the dark band only
   ==========================================================================
   .pgb-footer__support-note above is unlayered and !important, so
   chrome/footer.css never gets to apply --color-footer-text-muted and the
   note renders --color-text-muted instead: #94A6BC on the #1E3E63 dark band,
   4.39:1. This points it back at the footer token, which measures 4.90:1
   there. Dark only — the light value is a separate decision.

   Once the light value moved onto the same token this rule became redundant.
   It is kept so the dark fix survives on its own if the light-side commit is
   ever reverted.
   ========================================================================== */
html[data-theme="dark"] .pgb-footer__support-note {
	color: var(--color-footer-text-muted) !important;
}