/*
Theme Name: ERPcommerce Storefront
Theme URI: https://erpcommerce.app
Author: Wiz Media
Author URI: https://wiz.media
Description: Companion block theme for the ERPcommerce plugin. Provides storefront chrome (header, footer, megamenu, search) and templates that consume erp-commerce blocks and shortcodes. Optional — clients install this for the full Wiz Media storefront design; the plugin works with any theme on its own.
Version: 1.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erpcommerce-storefront
Domain Path: /languages
Tags: block-theme, full-site-editing, e-commerce, b2b
Update URI: https://updates.erpcommerce.app/erpcommerce-storefront
*/

/* =============================================================================
   Design tokens — plugin-owned since 0.29.0 / erp-commerce 4.246.0.

   The full color token system (--gray-*, --blue-*, --red-*, --btn-primary-*,
   --link-*, --blue-*, …) loads on EVERY front-end page from the
   plugin's always-on `storefront-tokens.css` (Frontend::enqueue_tokens()).
   The verbatim duplicate :root that lived here (skeleton style-guide port,
   0.x–0.28.9) was deleted — same values, one owner, no drift. Theme rules
   consume the tokens with literal fallbacks (`var(--blue-500, #0a48a8)`)
   so the chrome degrades to the correct colors if the plugin is ever
   deactivated. The skeleton-era `--button-*` / `--input-*` aliases
   (chrome-internal, not plugin tokens) remain in the second :root below.

   theme.json preset slugs are NOT used verbatim in the CSS variable name —
   WP runs every slug through `_wp_to_kebab_case()`, which inserts a hyphen
   at each digit→letter boundary. So the `2xs` / `2xl` spacing slugs and the
   `2xs` font-size slug emit as `--wp--preset--spacing--2-xs`,
   `--wp--preset--spacing--2-xl` and `--wp--preset--font-size--2-xs`.
   Writing the slug as-is yields an undefined variable, and a var() with no
   fallback makes the whole declaration invalid at computed-value time — the
   property silently resets to its initial value (padding/gap → 0) instead of
   falling back to the previous rule. Non-digit slugs (xs, sm, md, lg, xl)
   are unaffected. Fixed in 1.1.0 — 16 declarations had been dead since the
   0.85.0 token sweep. When adding a preset reference, copy the emitted
   variable name (Site Editor → Styles, or the `global-styles-inline-css`
   block in the page source), never the raw theme.json slug.
   ============================================================================= */

/* =============================================================================
   WP block-theme wrapper overrides.

   WP wraps each top-level entity (template parts, post-content) in a
   `<div class="wp-block-template-part">` and applies a default block-gap
   (24px) between siblings via `:where(.wp-site-blocks) > * { margin-block-
   start: 24px }`. The skeleton expects chrome flush against viewport edges
   with zero gap between header, main, footer.

   `display: contents` on the template-part wrapper is load-bearing for the
   sticky / auto-hide header (style.css 0.19.3+). `wp:template-part` always
   emits a wrapper element regardless of `tagName` (see wp-includes/blocks/
   template-part.php:166-177 — falls back to `<div>` if tagName is omitted),
   and since the wrapper only contains the header part, that wrapper becomes
   the sticky element's containing block. `position: sticky` can only stick
   WITHIN its containing block — once you scroll past a ~150 px wrapper, the
   header scrolls off normally instead of staying pinned. With `display:
   contents`, the wrapper is removed from the box tree (its children
   participate in the grandparent's layout directly) and sticky stays
   bounded by the body / `.wp-site-blocks` instead, so the chrome stays
   pinned for the full page height. Plugin-rendered pages (product,
   category, cart, etc.) load chrome via the `get_header()` →
   `block_template_part()` path which never adds the wrapper, so they
   already worked — this fix specifically restores parity on block-template-
   rendered pages (page.html, home.html, search.html, single.html, ...).

   Header and footer parts both open with their own semantic element
   (`<header id="top-nav">`, `<footer class="footer">`) inside the wrapper,
   so removing the surrounding `<div>` from layout doesn't strip any
   semantic role from the a11y tree. Modern browsers (Chrome 89+, Firefox
   84+, Safari 15.4+) preserve element semantics under `display: contents`. */
.wp-site-blocks > .wp-block-template-part {
	display:      contents;
	margin-block: 0;
}
.wp-site-blocks > main {
	margin-block: 0;
}

/* Sticky footer — short-content pages (the "all caught up" Messages page,
   an empty Order History, a login card) otherwise float the footer up
   mid-screen with empty `background-color` below it. Make `.wp-site-blocks`
   a min-viewport-tall flex column and let <main> absorb the slack so the
   footer pins to the bottom until content is genuinely tall enough to scroll.

   Scope: ONLY the block-template render path. Plugin PHP templates
   (cart/checkout/login/product via get_header()/get_footer()) emit
   header→main→footer as direct <body> children with NO `.wp-site-blocks`
   wrapper, so this rule never touches them — no regression risk there.

   `min-height` (not height) keeps tall pages scrolling normally; `100dvh`
   tracks mobile Safari's collapsing toolbar (matches the search-overlay
   rule below). The header/footer template-part wrappers are `display:
   contents` (above), so the real <header>/<footer> are the flex items here
   alongside <main>; they keep default flex-shrink — with a `min-height`
   (no fixed cap) there's nothing to shrink against, so chrome never squishes. */
.wp-site-blocks {
	display:        flex;
	flex-direction: column;
	min-height:     100dvh;
}
.wp-site-blocks > main {
	flex: 1 0 auto; /* grow to push the footer to the viewport bottom */
}
/* Flexbox auto-margin guard. The page wrappers below center via
   `max-width: …; margin: 0 auto`. Per the flexbox spec, auto margins on a
   flex item's cross axis SUPPRESS `align-items: stretch` and collapse the
   item to its content width — which would shrink these mains to a narrow
   centered column. Pinning an explicit `width: 100%` gives the cross size a
   definite value (clamped by `max-width`, centered by the auto margins), so
   they stay full-bleed-to-max. With global `box-sizing: border-box` this is
   a no-op in non-flex contexts (block-level mains are already 100% wide). */
.wp-site-blocks > .erpc-page,
.wp-site-blocks > .erpc-single,
.wp-site-blocks > .erpc-404,
.wp-site-blocks > .erpc-archive {
	width: 100%;
}

/* WP body-class collision overrides live AFTER the skeleton port (the
   "WP body-class collisions" banner near the file's midpoint, before the
   articles-archive section) so they win on CSS source order without
   needing !important or higher specificity. See that block for the why
   behind each rule. */

/* 4-digit cart count fallback. Skeleton ships .nav-cart-100 (font-size
   0.8rem, width 25px) for 3-digit counts but stops there. Real B2B
   carts hit 4+ digits during bulk reorder, so add a tighter step. The
   class is toggled by assets/js/storefront-chrome.js based on
   textContent length — swap to a proper plugin block when the
   live cart-count integration ships. */
.nav-cart-1000 {
	font-size: 0.65rem;
	width:     26px;
}

/* =============================================================================
   Skeleton chrome + section CSS — verbatim port from skeleton/css/styles.css.

   Includes @font-face declarations (paths rewritten ../fonts/ -> fonts/), reset,
   header, megamenu, search modal, hero/intro, product layout, resource card,
   locations, signup, footer, mobile actions bar, media queries.

   Source of truth lives in .tmp/skeleton/css/styles.css. When the skeleton
   updates, re-run the port: sed 's,\.\./fonts/,fonts/,g' on the source
   then append below this banner.
   ============================================================================= */

/* Define CSS variables */
/* Token sweep (0.28.8): the skeleton-era `--button-*` / `--input-*` names
   below now ALIAS the canonical token block at the top of this file
   (`--btn-primary-*`, `--red-500`, …) instead of re-declaring the same hex
   under a second name — one source of truth, palette edits propagate.
   The names stay because the ported skeleton rules consume them; deleting
   the duplicate token system entirely (in favor of the plugin's
   storefront.css :root) is the cross-repo consolidation tracked in TODO. */
:root {
  --button-primary-bg: var(--btn-primary-bg, #0a48a8); /* Primary background color */
  --button-primary-color: var(--btn-primary-text, #ffffff); /* Primary text color */

  --button-secondary-bg: var(--red-500, #970100); /* Primary background color */
  --button-secondary-color: var(--btn-secondary-text, #ffffff); /* Primary text color */

  --button-padding: 10px 20px;
  --button-border: none;
  --button-border-radius: 3px;
  --button-cursor: pointer;
  --button-font-weight: bold;
  --button-font-size: 14px;
  --button-min-width: 10rem;

  --input-padding: 10px;
  --input-border: none;
  --input-border-radius: 3px;
  --input-min-width: 250px;
  --input-font-size: 14px;

  --border-color: var(--border-color, #ccc);

  /* Self-reference cleanup (new_skel): --outline-color now resolves
     through --blue-500 instead of duplicating its hex literal. Same
     resolved value (#0a48a8); future palette edits propagate. */
  --outline-color: var(--blue-500, #0a48a8);
  --outline-offset: 2px;
}

/* figtree-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/figtree-v6-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/figtree-v6-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/figtree-v6-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: italic;
  font-weight: 500;
  src: url("fonts/figtree-v6-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/figtree-v6-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: italic;
  font-weight: 600;
  src: url("fonts/figtree-v6-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/figtree-v6-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: italic;
  font-weight: 700;
  src: url("fonts/figtree-v6-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 800;
  src: url("fonts/figtree-v6-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: italic;
  font-weight: 800;
  src: url("fonts/figtree-v6-latin-800italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/figtree-v6-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Figtree";
  font-style: italic;
  font-weight: 900;
  src: url("fonts/figtree-v6-latin-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Reset and base styling */
* {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  /* System-font fallback chain ported from new_skel/skeleton/styles.css —
     covers macOS / iOS / Windows / Android / Linux so a Figtree load
     failure (network, Brotli, ad-block) still renders in a sane,
     OS-native sans-serif rather than Times New Roman. */
  font-family: "Figtree", Arial, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--gray-800, #404040);
  background-color: var(--surface-sunken, #f2f2f2);
}

#search-trigger:hover,
#search-trigger:focus,
a:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
  border-radius: var(--input-border-radius);
}

#close-button:hover,
#close-button:focus {
  --outline-color: var(--border-inverse, #ffffff);
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
  border-radius: var(--input-border-radius);
}

#search-trigger {
  padding: var(--button-padding);
  border: var(--button-border, none);
  border-radius: var(--button-border-radius);
  cursor: var(--button-cursor);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  min-width: var(--button-min-width);
}

main button,
main .button {
  --button-min-width: auto;
  padding: var(--button-padding);
  border: var(--button-border, none);
  border-radius: var(--button-border-radius);
  cursor: var(--button-cursor);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  min-width: var(--button-min-width);
}

main button:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  padding: var(--input-padding);
  border: var(--input-border, none);
  border-radius: var(--input-border-radius);
  min-width: var(--input-min-width);
  font-size: var(--input-font-size);
}

label {
  font-size: var(--wp--preset--font-size--sm);
  margin-bottom: 0.5em;
  width: 100%;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Decorative top stripe — purely visual separator above the logo row. The
   block-template part renders <div class="top-stripe" aria-hidden="true"></div>;
   `min-height` (not `height`) so safe-area-inset-top can extend the band
   on notched devices without squashing its visual height — the stripe
   absorbs the notch padding so the rest of the header sits below it. */
.top-stripe {
  min-height:  10px;
  padding-top: env(safe-area-inset-top);
  background-color: var(--blue-700, #172e73);
  background: linear-gradient(to right, var(--blue-600, #2b4693) /* was #2a5298 */, var(--blue-700, #172e73));
}

/* Contact Information Navigation — legacy rules retained for any non-chrome
   use of the storefront-phones block's header variant. Header chrome itself
   uses .top-stripe above. */
#contact-nav {
  display: none; /* Hidden by default for mobile */
}

#contact-list {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
  background-color: var(--blue-700, #172e73);
  background: linear-gradient(
    to right,
    var(--blue-600, #2b4693) /* was #2a5298 */,
    var(--blue-700, #172e73)
  ); /* Gradient background */
  color: var(--text-inverse, #ffffff);
}

#contact-list li {
  display: inline;
  margin-left: var(--wp--preset--spacing--lg);
  font-size: var(--wp--preset--font-size--base);
}

#contact-list li span,
#contact-list a.contact-link {
  font-weight: bold;
}

#contact-list a {
  color: var(--text-inverse, #ffffff);
  text-decoration: none;
}

#contact-list a:hover {
  text-decoration: underline;
}

/* Show Contact Info on tablet and desktop */
@media (min-width: 768px) {
  #contact-nav {
    display: block;
  }
}

/* Floating Mobile Actions Bar */
#mobile-actions {
  margin: 0;
  padding: 0;
  background-color: var(--surface-base, #ffffff);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  display: grid;
  position: fixed;
  /* `max(0.5rem, env(safe-area-inset-bottom))` keeps the bar visually
     floating with the existing 0.5rem gap on devices without a home
     indicator (Android, older iPhones) and shifts it up by the iOS
     home-indicator height (typically 34px on notched models) so the
     buttons don't sit under the indicator's gesture zone. */
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  left: 0.5rem;
  right: 0.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 0.25rem;
  z-index: 1000;
}

#mobile-actions li {
  border-right: 1px solid var(--border-color, #ccc);
}

#mobile-actions li:last-child {
  border-right: none;
}

.btn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--base);
  color: var(--gray-800, #404040);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--wp--preset--spacing--xs);
  width: 100%;
  height: 100%;
}

.icon-magnifying-glass,
.icon-menu3,
.icon-cart {
  margin-right: 5px;
}

/* Mobile cart — cart glyph + the "Cart" label + the live count as an INLINE
   pill sitting next to the label on the normal baseline (not a floating
   superscript corner badge — that read as broken). The count is hydrated by
   the plugin's cart-count-hydrate.js via the shared `[data-erpc-cart-count]`
   hook, so it tracks the desktop badge. 0.72.0. */
.mobile-cart__icon {
  margin-right: 7px;
}

.mobile-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--surface-brand, var(--blue-500, #0a48a8));
  border-radius: 999px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

/* Hidden until a real, non-zero count lands — the `loading` state before the
   first hydrate (and viewers the hydrator skips: logged-out / no mapped
   customer), and `is-empty` (count 0) flagged by storefront-chrome.js. An
   empty pill should never show. */
.mobile-cart__count[data-state="loading"],
.mobile-cart__count.is-empty {
  display: none;
}

.resource-card {
  padding: var(--wp--preset--spacing--lg);
  background: var(--surface-base, #ffffff);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column-reverse;
}

/* Full-space focus outline with custom radius for each position */
#mobile-actions li:first-child .action-button:focus {
  outline: 3px solid var(--blue-500, #0a48a8);
  outline-offset: -3px;
  border-radius: 0.25rem 0 0 0.25rem;
}

#mobile-actions li:nth-child(2) .action-button:focus {
  outline: 3px solid var(--blue-500, #0a48a8);
  outline-offset: -3px;
  border-radius: 0;
}

#mobile-actions li:last-child .action-button:focus {
  outline: 3px solid var(--blue-500, #0a48a8);
  outline-offset: -3px;
  border-radius: 0 0.25rem 0.25rem 0;
}

/* Hide mobile-actions on larger screens */
@media (min-width: 1000px) {
  #mobile-actions {
    display: none;
  }

  .resource-card {
    flex-direction: row;
  }
}

/* Top Navigation Bar */
.nav-user-container {
  z-index: 5;
  display: flex;
  position: relative;
  background: var(--surface-subtle, #fafafa);
  border-top: 1px solid var(--border-strong, #d9d9d9);
  border-bottom: 1px solid var(--border-strong, #d9d9d9);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--base);
  font-size: 0.8rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto; /* Allows horizontal scrolling */
  white-space: nowrap; /* Prevent wrapping of the navigation items */
  gap: var(--wp--preset--spacing--base);
  scrollbar-width: none; /* For Firefox: Hide scrollbar */
  -ms-overflow-style: none; /* For Internet Explorer and Edge: Hide scrollbar */
}

/* Below the desktop chrome breakpoint the user-container becomes a
   horizontal scrollbar — delivery-location + express-order + account-
   quick-nav can't all fit in 375px, and `overflow-x: auto` + `nowrap`
   produces a sideways-scroll row that feels broken on touch. The
   mobile drawer (Phase 2) is the canonical surface for these items
   on phones; once the drawer is verified shipping we can swap this
   to `display: none`. Until then, wrap onto multiple rows so the
   items stay reachable without a janky horizontal scrollbar. */
@media (max-width: 999px) {
  .nav-user-container {
    flex-wrap:    wrap;
    overflow-x:   visible;
    white-space:  normal;
    row-gap: var(--wp--preset--spacing--xs);
  }

  /* Once wrapped, give the ship-to / Express Order group its own full-width
     row and push the two apart — ship-to left, Express Order right — instead
     of letting them bunch on the left. The quick-nav links scroll below. 0.42.2. */
  .account-order-navigation {
    width:           100%;
    justify-content: space-between;
  }

  /* Quick-nav links get their own full-width row that scrolls sideways
     instead of wrapping (0.42.3, Matt). Hidden scrollbar + a right-edge
     fade hints there's more to the right; each link is nowrap so labels
     ("Order History") never break mid-word. */
  .account-quick-navigation {
    width:     100%;
    min-width: 0;            /* let the flex child shrink so overflow engages */
  }
  .account-quick-navigation ul {
    flex-wrap:           nowrap;
    overflow-x:          auto;
    scrollbar-width:     none;                       /* Firefox */
    -ms-overflow-style:  none;                       /* IE/Edge */
    -webkit-overflow-scrolling: touch;               /* momentum scroll on iOS */
    /* Spread to fill the row like the ship-to row above once the links fit
       (0.43.0, Matt). space-between only distributes POSITIVE free space, so
       when the links overflow on a narrow screen it no-ops back to flex-start
       and they scroll; as the row gets wider and they fit, they spread edge
       to edge instead of bunching left. */
    justify-content:     space-between;
  }
  .account-quick-navigation ul::-webkit-scrollbar {  /* Chrome/Safari/Edge */
    display: none;
  }
  .account-quick-navigation a {
    white-space: nowrap;
  }

  /* Edge fades, toggled by storefront-chrome.js ONLY when the row overflows
     and there's more in that direction (0.42.4) — a row that fits shows no
     fade. End-only (more right), start-only (scrolled to the end), or both
     (mid-scroll). The both-classes rule is last so it wins. */
  .account-quick-navigation ul.has-fade-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }
  .account-quick-navigation ul.has-fade-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem);
            mask-image: linear-gradient(to right, transparent, #000 1.5rem);
  }
  .account-quick-navigation ul.has-fade-start.has-fade-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  }
}

.account-quick-navigation ul {
  list-style: none;
  display: flex;
  gap: var(--wp--preset--spacing--base);
  align-items: center;
}

.account-quick-navigation a {
  color: var(--gray-800, #404040);
  text-decoration: none;
  padding: var(--wp--preset--spacing--2-xs);
}

.account-quick-navigation a:hover {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
  border-radius: var(--input-border-radius);
}

.account-order-navigation {
  display: flex;
  align-items: center;
}

.logged-in .top-nav {
  padding: var(--wp--preset--spacing--base);
  box-shadow: none;
}

.top-nav {
  position: sticky;
  top: 0;
  background-color: var(--surface-base, #ffffff);
  color: var(--gray-800, #404040);

  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--base);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
}

/* Logo — the chrome renders the logo via wp:site-logo; the skeleton-era
   `<a class="logo">` rules that lived here were dead (no markup emits the
   class) and are superseded 1:1 by the `.logo-group .wp-block-site-logo`
   rules in the body-class-collision block below. Removed 0.28.9. */

/* Primary Navigation */
.primary-nav {
  display: none; /* Hidden by default for mobile */
}

.primary-nav ul {
  display: flex;
  gap: var(--wp--preset--spacing--md);
  list-style: none;
}

.primary-nav button {
  background: none;
  border: none;
  color: var(--gray-800, #404040);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 5px;
  border: var(--button-border, none);
  border-radius: var(--button-border-radius);
  cursor: var(--button-cursor);
  outline-offset: 2px;
  display: flex;
}

.primary-nav button:hover {
  outline: 2px solid var(--blue-500, #0a48a8);
}

.primary-nav button:focus {
  outline: 2px solid var(--blue-500, #0a48a8);
}

.nav-item .caret {
  display: flex;
  align-items: flex-end;
  margin-left: var(--wp--preset--spacing--xs);
  margin-top: 2px;
  transition: transform 0.2s ease-in-out;
}

.nav-item[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* Nav dropdown panel — Company / Resources buttons in the primary nav
   open an absolutely-positioned panel below the trigger holding the
   matching menu items. Mirrors the megamenu's visual treatment
   (bg, radius, shadow, padding, item hover, open/close animation) as
   a compact submenu rather than a full-width panel. */
.nav-dropdown-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--wp--preset--spacing--xs);
  width: max-content;
  background-color: var(--surface-subtle, #fafafa);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: var(--wp--preset--spacing--xs);
  border-radius: 6px;
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity    180ms ease,
    transform  180ms ease,
    visibility 0s linear 180ms;
}

.nav-dropdown[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity    180ms ease,
    transform  180ms ease,
    visibility 0s linear 0s;
}

/* `.primary-nav` ancestor wins specificity over `.primary-nav ul { display:flex }`
   so the inner submenu stacks vertically instead of inheriting the row's
   flex layout (descendant selector match, not child). */
.primary-nav .nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: var(--wp--preset--spacing--2-xs);
  display: block;
  gap: 0;
  min-width: 250px;
}

.primary-nav .nav-dropdown-list li {
  margin: 0;
}

.primary-nav .nav-dropdown-list a {
  display: block;
  padding: var(--wp--preset--spacing--xs);
  color: var(--gray-800, #404040);
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
}

.primary-nav .nav-dropdown-list a:hover,
.primary-nav .nav-dropdown-list a:focus {
  background-color: var(--blue-500, #0a48a8);
  color: var(--text-inverse, #ffffff);
}

.primary-nav .nav-dropdown-list a:focus {
  outline: none;
}

#nav-global-location-popover-link,
.popover-link {
  display: flex;
  color: var(--text-primary, #111);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--2-xs);
  margin-right: var(--wp--preset--spacing--base);
  padding: 0 var(--wp--preset--spacing--2-xs);
  padding-right: var(--wp--preset--spacing--xs);
  background: transparent;
  border-color: transparent;
  cursor: pointer;
}

#nav-global-location-popover-link:hover,
#nav-global-location-popover-link:focus,
.popover-link:hover,
.popover-link:focus {
  outline: 2px solid var(--blue-500, #0a48a8);
  border-radius: var(--button-border-radius);
  outline-offset: 2px;
}

#delivery-block {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  /* Center the text block vertically against the 26px pin icon. With two
     lines (loaded "Deliver to" state) the block already fills the icon's
     height, so this is a no-op there. With one line (anonymous "Set
     location" fallback) the lone line was sitting at the top of the
     stretched column — `justify-content: center` pulls it to the icon's
     mid-line so the button reads balanced in both states. */
  justify-content: center;
}

/* Line 1 is "Ship to {street}" (plugin 4.196.0 put the street here); ellipsize
   it when a long street would otherwise stretch the nav. Line 2 (city/state/zip)
   is left to size naturally. Tune max-width if the button needs more room. */
#delivery-block .nav-line-1 {
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.express-order {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.margin-right-0 {
  margin-right: 0;
}

.icon-svg {
  display: flex;
  align-items: center;
  margin-right: var(--wp--preset--spacing--xs);
}

/* Search Container (allow it to grow, but not push too far on smaller screens) */
.search-container {
  display: none; /* Hidden on mobile screens */
  align-items: center;
  padding: var(--wp--preset--spacing--2-xs);
  border: 1px solid transparent;
  border-radius: 4px;
  width: 100%;
  max-width: 360px;
  flex-grow: 0;
}

/* Cart and Login Group */

/* Base flex layout. Previously this row only became flex at min-width
   1000px (see the desktop media query below), which left logged-in
   mobile / tablet users with the notifications bell + account-menu
   stacking VERTICALLY inside the chrome — pushing the header height
   up and breaking the row visual. Set flex by default so the row
   reads correctly at every viewport. The desktop media query still
   re-asserts `display: flex` (no-op now) plus its alignment rules. */
.cart-login-group {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

.cart-button {
  display: none;
}

.cart-login-group a {
  margin-left: var(--wp--preset--spacing--base);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--base);
  border: var(--button-border, none);
  border-radius: var(--button-border-radius);
}

.cart-login-group a:hover,
.cart-login-group a:focus {
  outline: 2px solid var(--blue-500, #0a48a8);
  outline-offset: 2px;
}

/* Megamenu Styling */
#megamenu-container {
  position: relative; /* Makes sure megamenu is positioned relative to its parent container */
  z-index: 500;
}

.megamenu {
  position: absolute;
  left: 50%;
  /* Panel sized to its content (2 or 3 single columns), capped at the
     viewport on narrow screens. */
  width: fit-content;
  max-width: 92%;
  background-color: var(--surface-subtle, #fafafa);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--md);
  z-index: 1000;
  margin: auto;
  border-radius: 6px;
  margin-top: var(--wp--preset--spacing--base);

  /* Open/close animation: opacity + transform instead of `display: none`
     so the transition runs. `visibility` delays on close so the panel
     stays focusable until the fade ends, then drops out of the tab order.
     The `translateX(-50%)` half of the transform keeps the panel
     horizontally centered (same role the pre-animation version played);
     the additional translate + scale are the actual motion. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity    180ms ease,
    transform  180ms ease,
    visibility 0s linear 180ms;
}

#megamenu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity    180ms ease,
    transform  180ms ease,
    visibility 0s linear 0s;
}

.megamenu-content {
  display: flex;
  gap: var(--wp--preset--spacing--xl);
}

.megamenu-column {
  width: 220px;
  position: relative; /* anchor for the vertical-divider pseudo-element */

  /* Theme the <erpc-brand-list> shadow DOM via CSS custom properties so the
     brand column items inherit the same blue-pill hover treatment the
     server-rendered category column uses. Custom props pierce shadow DOM. */
  --erpc-brand-list-item-color: var(--gray-800, #404040); /* was #333 */
  --erpc-brand-list-item-padding: 0.5rem;
  --erpc-brand-list-item-radius: 3px;
  --erpc-brand-list-item-hover-bg: var(--blue-500, #0a48a8);
  --erpc-brand-list-item-hover-color: var(--text-inverse, #ffffff); /* was #fff */
}

/* Vertical divider between columns. Sits at the visual midpoint of the
   3rem gap between columns (right: -1.5rem) so it reads as a centered
   rule rather than hugging either neighbour. Suppressed on the last
   column so the panel doesn't end with a trailing line. */
.megamenu-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1.5rem;
  width: 1px;
  background: var(--surface-sunken, #f2f2f2);
  pointer-events: none;
}

/* Category column heading row — mirrors the brand-list shadow shell so
   both columns expose a heading + "View all" on the same baseline. */
.megamenu-column__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--base);
}
.megamenu-column__header h3 {
  margin-bottom: var(--wp--preset--spacing--xs); /* header carries the rest of the bottom rhythm */
}

.megamenu-column__view-all {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--gray-800, #404040);
  text-decoration: none;
  opacity: 0.75;
  white-space: nowrap;
}
.megamenu-column__view-all:hover,
.megamenu-column__view-all:focus {
  opacity: 1;
  text-decoration: underline;
}

.megamenu-column h3 {
  font-size: var(--wp--preset--font-size--md);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  padding-bottom: var(--wp--preset--spacing--xs);
  position: relative;
}

/* Short accent bar under each column heading. Bar width and color
   mirrored in the <erpc-brand-list> shadow-DOM heading (brand column)
   so both columns share the visual. */
.megamenu-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  background: var(--blue-500, #0a48a8);
  border-radius: 1.5px;
}

.megamenu-list {
  list-style: none;
  padding: var(--wp--preset--spacing--2-xs);
  margin: 0;
}

/* Brands column (always 2nd) — long alphabetical list, scrolls. */
.megamenu-column:nth-child(2) .megamenu-list {
  max-height: 400px;
  overflow-y: auto;
}

.megamenu-list li {
  margin-bottom: 0rem;
}

.megamenu-list li a {
  color: var(--gray-800, #404040);
  text-decoration: none;
  display: block;
  padding: var(--wp--preset--spacing--xs);
  border-radius: 3px;
}

.megamenu-list li a:hover,
.megamenu-list li a:focus {
  background-color: var(--blue-500, #0a48a8);
  color: var(--text-inverse, #ffffff);
}

/* Visible focus on megamenu links comes from the bg/color above
   (mirrors the nav-dropdown disclosure pattern); outline is suppressed
   so the focus indicator is the row highlight, not a halo. WCAG 2.4.7. */
.megamenu-list li a:focus {
  outline: none;
}

/* Panel-level footer with the "Browse full catalog" CTA. Sits inside
   `.megamenu` but outside `.megamenu-content` so the column flex row
   stays a row — the footer is a sibling rendered by the plugin block. */
.megamenu-footer {
  margin-top: var(--wp--preset--spacing--base);
  padding-top: var(--wp--preset--spacing--sm);
  border-top: 1px solid var(--border-default, #e5e7eb);
  display: flex;
  justify-content: center;
}

.megamenu-cta {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--blue-500, #0a48a8);
  text-decoration: none;
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  border-radius: 3px;
}

.megamenu-cta:hover,
.megamenu-cta:focus {
  text-decoration: underline;
  outline: none;
}

.megamenu-cta__arrow {
  display: inline-block;
  margin-left: 0.375rem;
  transition: transform 0.15s ease;
}

.megamenu-cta:hover .megamenu-cta__arrow,
.megamenu-cta:focus .megamenu-cta__arrow {
  transform: translateX(2px);
}

/* Megamenu — mobile stack. Desktop lays out 3 fixed-220px columns side
   by side; that needs ~660px of usable width and at <768px the panel
   either clips or scrolls horizontally. Below 768px we stack the
   columns vertically, fill the panel width, swap the vertical column
   divider for a horizontal between-row border, and cap the panel
   height with internal scroll so a long category list doesn't push
   the chrome off-screen. */
@media (max-width: 767px) {
  .megamenu {
    width:      94vw;
    max-width:  94vw;
    max-height: 70dvh;
    overflow-y: auto;
    padding: var(--wp--preset--spacing--base);
  }

  .megamenu-content {
    flex-direction: column;
    gap: var(--wp--preset--spacing--md);
  }

  .megamenu-column {
    width: 100%;
  }

  .megamenu-column:not(:last-child)::after {
    content:    none;
  }

  .megamenu-column:not(:last-child) {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-default, #e5e7eb);
  }
}

/* Overlay for Megamenu */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* `100dvh` (dynamic viewport height) over `100vh` so the overlay tracks
     iOS Safari's collapsing address bar — `100vh` is the LARGEST viewport
     height (address bar hidden) and leaves a gap under the overlay when
     the bar is visible. */
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 10; /* Lower than megamenu's z-index */
  display: none; /* Hidden by default */
  pointer-events: none;
}

.overlay[aria-hidden="false"] {
  display: block; /* Show when aria-hidden is false */
  pointer-events: auto;
}

.no-scroll {
  overflow: hidden;
}

#nav-cart-count-container {
  position: relative;
  padding-bottom: 1px;
}

.nav-sprite {
  display: flex;
}

#nav-cart-count {
  position: absolute;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;

  left: 18px;
  right: auto;
  top: -4px;
  font-size: 0.9rem;
  width: 24px;
}

.nav-cart-100 {
  font-size: 0.8rem;
  width: 25px;
}

/* Loading state — emitted by the cart-count block as
   `data-state="loading"` for hydratable viewers (logged-in buyer +
   customer mapping). The block ships empty text; the hydrator clears
   the attribute and fills the count once `GET /v1/cart/{cust}`
   resolves, replacing the prior `0 → N` flash with a small spinner.

   Pattern adapted from cssloaders.github.io. Outer is a full black
   ring that rotates as a whole; ::after paints a smaller half-arc
   inside (brand-primary border on top/bottom — `--blue-500` =
   `#0a48a8`, transparent on left/right) so the rotation reads as a
   chasing arc against the static outer ring.

   Box overrides the base 24px-wide / top:-4 positioning to land a
   16×16 spinner over the cart icon at the same optical center the
   rendered digit will occupy (text baseline center, not the
   line-box geometric center). */
#nav-cart-count[data-state="loading"] {
  width:  16px;
  height: 16px;
  left:   21px;
  top:    0;
  border: 2px solid var(--text-primary, #111) /* was #000000 */;
  border-radius: 50%;
  box-sizing: border-box;
  background: none;
  color: transparent;
  animation: erpc-cart-count-rotate 1s linear infinite;
}

#nav-cart-count[data-state="loading"]::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top:  50%;
  transform: translate(-50%, -50%);
  width:  10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid;
  border-color: var(--blue-500, #0a48a8) transparent;
}

@keyframes erpc-cart-count-rotate {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #nav-cart-count[data-state="loading"] {
    animation: none;
  }
}

#nav-cart-text-container {
  font-size: 0.9rem;
  font-weight: bold;
}

.cart-button {
  color: var(--gray-800, #404040);
}

@media (min-width: 1000px) {
  .primary-nav,
  .search-container,
  .cart-login-group,
  .cart-button {
    display: flex;
  }

  /* Row-1 children (search, bell, cart-button, MW▾ avatar) sit
     vertically centered in the row. The cart-button below keeps
     `align-items: flex-end` so its INNER icon + "Cart" text stay
     bottom-aligned inside the button block — only the block itself
     centers within row 1. */
  .cart-login-group {
    align-items: center;
  }

  .primary-nav,
  .search-container,
  .cart-button {
    align-items: flex-end;
  }

  .nav-container {
    justify-content: space-between;
  }

  .primary-nav ul {
    gap: 2em;
  }

  #mobile-actions {
    display: none;
  }
}

@media (min-width: 1200px) {
  .primary-nav ul {
    gap: 6rem;
  }
}

/* Focus Style for Megamenu Links */
.megamenu a:focus {
  outline: 2px solid var(--blue-500, #0a48a8); /* Highlight with a blue outline */
  outline-offset: 2px;
}
/* Container for the entire section */
.signup-section {
  width: 100%;
  background-color: var(--blue-700, #172e73);
  background: linear-gradient(
    to right,
    var(--blue-600, #2b4693) /* was #2a5298 */,
    var(--blue-700, #172e73)
  ); /* Gradient background */
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
  display: flex;
  justify-content: center;
}

/* Heading for the section */
.signup-section h2 {
  color: var(--text-inverse, #ffffff);
  text-align: center;
  font-size: 1.5em;
  /* margin-top:0 overrides theme.json's :where(h2) 2em rule that would
     otherwise stack on top of the section's 3rem padding-top. */
  margin: 0 0 var(--wp--preset--spacing--lg);
  padding: 0 var(--wp--preset--spacing--base);
  text-wrap: balance;
}

footer {
  background-color: var(--surface-base, #ffffff);
}

/* General footer styling */
.footer {
  position: relative;
  background-color: var(--surface-base, #ffffff);
  color: var(--text-primary, #111);
  text-align: left;
  overflow: hidden;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  padding: var(--wp--preset--spacing--lg);
}

.footer-logo-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  margin-bottom: 10px;
}

.social-icons {
  display: flex;
  gap: 1.25rem;
  justify-content: end;
  min-width: 225px;
  margin-top: -0.5rem;
  margin-bottom: var(--wp--preset--spacing--base);
}

.social-icons a {
  display: flex;
  font-size: var(--wp--preset--font-size--xl);
  color: var(--text-primary, #111);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.3s ease;
}

.social-icons a:hover,
.social-icons a:focus {
  transform: scale(1.2);
  color: var(--text-brand, #0a48a8) /* was #084a94 */; /* Changes color on hover */
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
  border-radius: var(--input-border-radius);
}

.footer-columns {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--lg);
  text-align: center;
}

.footer-column h3 {
  font-weight: bold;
  font-size: var(--wp--preset--font-size--lg);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.footer-column a {
  color: var(--text-brand, #0a48a8) /* was #2a5298 */;
  text-decoration: none;
  display: block;
  padding: 10px 0;
  border-radius: 1rem;
  border: 1px transparent;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column a:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
  border-radius: var(--input-border-radius);
}

.footer-background-image {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: -5rem;
  height: 100%;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none; /* Ensures it doesn't interfere with clicks */
  /* Neutral by default (0.80.0, audit [104]) — the generic theme ships NO
     footer artwork. A client provides its own via the plugin's Branding
     picker (`erpc_footer_brand_art_id` theme mod) or a child-theme
     override setting `background` + `aspect-ratio` on this element (the
     Rubber child does the latter — its tire art moved there from here).
     Without either, the element renders nothing and reserves no space. */
}

p.copyright {
  margin: 0;
  padding: var(--wp--preset--spacing--sm);
  background-color: var(--blue-700, #172e73);
  color: var(--text-inverse, #ffffff);
  text-align: center;
  padding-bottom: 3.5rem;
}

.skip-link {
  font-weight: bold;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
  text-decoration: none;
  z-index: 100000;
  /* translateY(-150%) hides the link by shifting it up by 1.5x its own
     rendered height — robust against font-size / line-height variance
     that made the earlier `top: -40px` (fixed pixel offset) leak the
     link's bottom edge back into view on browsers where the rendered
     height exceeded 40px. */
  transform: translateY(-150%);
  transition: transform 0.3s;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

.skip-link:focus {
  transform: translateY(0);
}

/* WP admin bar offsets — bar is `position: fixed; top: 0` at z-index 99999,
   so a focused skip-link at top:0 would render under it. Push the focused
   link down by the bar's documented heights (32px desktop / 46px ≤782px)
   so it stays visible for keyboard-first users. */
body.admin-bar .skip-link:focus {
  transform: translateY(32px);
}
/* Intentionally keeps the 46px admin-bar offset on mobile (unlike the other
   sticky chrome, which dropped it in 0.42.1): the skip-link only appears on
   keyboard focus, which in practice happens at page-top — where the absolute
   admin bar genuinely occupies the top 46px. Anchoring at 0 here would let the
   focused skip-link overlap the admin bar at page-top. */
@media screen and (max-width: 782px) {
  body.admin-bar .skip-link:focus {
    transform: translateY(46px);
  }
}

/* Desktop view */
@media (min-width: 1000px) {
  .nav-user-container {
    flex-direction: row;
  }

  p.copyright {
    padding-bottom: var(--wp--preset--spacing--sm);
  }

  .footer-background-image {
    opacity: 0.15;
    z-index: 4;
  }

  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-logo-social {
    flex: 1;
    align-items: flex-start;
    text-align: left;
    margin-right: var(--wp--preset--spacing--2-xl);
  }

  .footer-columns {
    display: flex;
    flex-direction: row;
    flex: 3;
    gap: var(--wp--preset--spacing--2-xl);
    text-align: left;
  }

  .footer-column a {
    padding: 5px 0;
    width: auto;
  }
}

/* Mobile view */
@media (max-width: 767px) {
  .contact-info {
    text-align: center;
  }

  .footer-columns {
    flex-direction: column;
  }

  .footer-column a {
    width: 100%;
    padding: 15px;
    text-align: center;
    border: 1px solid transparent;
  }

  .footer-column a:hover {
    text-decoration: none;
  }

  .footer-column a:focus {
    box-shadow: none;
  }
  .footer-background-image {
    width: 100%;
    opacity: 0.1;
  }
}

.contact-info p {
  padding: 5px 0;
}

.contact-info a {
  color: var(--text-brand, #0a48a8) /* was #2a5298 */; /* Matches the color scheme */
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline; /* Adds visual feedback on hover */
}

@media (min-width: 1450px) {
  .footer-background-image {
    visibility: visible;
  }
}

/* Merged from two duplicate declarations (0.28.9) — the later flex block
   plus the earlier max-width/centering, exactly as the cascade resolved. */
.locations-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: var(--wp--preset--spacing--xl);
  padding: 0 20px;
}

.location {
  width: 100%;
  max-width: 250px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.location-directions {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--blue-500, #0a48a8);
  color: var(--gray-100, #f2f2f2);
  font-size: 0.8rem;
  text-align: center;
  padding: var(--wp--preset--spacing--2-xs);
}

.location img {
  width: 100%;
  max-width: 200px;
  height: auto;
  cursor: pointer;
}

.location h3 {
  margin: 10px 0 5px;
  font-size: 1.2em;
  text-align: left;
}

.location p {
  margin: 0;
  text-align: left;
  cursor: pointer;
}

#search-trigger {
  display: none;
  background-color: transparent;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;

  color: var(--gray-600, #737373);
  font-size: 0.9rem;
  font-weight: normal;
  text-align: left;
  padding-left: var(--wp--preset--spacing--xs);
  padding-right: var(--wp--preset--spacing--2-xl);
  position: relative;
  min-width: 250px;
}

.shortcut {
  position: absolute;
  right: 0;
  font-size: 0.8rem;
  text-align: center;
  padding: var(--wp--preset--spacing--2-xs);
  background-color: var(--surface-sunken, #f2f2f2);
  border-radius: 4px;

  color: var(--text-muted, #737373);
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  margin-right: var(--wp--preset--spacing--xs);
}

/* Responsive Design */
@media (min-width: 600px) {
  .locations-container {
    justify-content: space-around;
  }

  .location {
    max-width: 45%;
  }
}

@media (min-width: 900px) {
  .locations-container {
    gap: var(--wp--preset--spacing--lg);
  }
}

@media (min-width: 1000px) {
  .location {
    max-width: 22%;
  }

  #search-trigger {
    display: flex;
    /* `align-items: center` (new_skel) keeps the search-icon SVG vertically
       centered against the larger label text + `/` shortcut chip. */
    align-items: center;
  }
}

.button {
  display: inline-block;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  transition: all 0.3s;
  padding: 10px 20px;
}

.button-shipto {
  --button-primary-bg: var(--blue-500, #0a48a8);
  background-color: var(--button-primary-bg, #0a48a8);
  color: var(--button-primary-color, #ffffff);
  transition: all 0.3s ease-in-out;
}

.button-logout {
  --button-primary-bg: var(--blue-700, #172e73);
  background-color: var(--button-primary-bg, #0a48a8);
  color: var(--button-primary-color, #ffffff);
  transition: all 0.3s ease-in-out;
}

.button-shipto:hover {
  filter: brightness(1.5);
}

/* `.login-button` rules removed 0.28.9 — the hardcoded
   `<a class="button login-button">` was replaced by the plugin's
   [erpc_auth_links] shortcode long ago; `.cart-login-group
   .erpc-auth-links__link` (collision block below) carries the look. */

/* Primary button */
.btn-primary {
  background-color: var(--button-primary-bg, #0a48a8);
  color: var(--button-primary-color, #ffffff);
  padding: 10px 20px;
  margin: var(--wp--preset--spacing--base) 0;
  display: inline-block;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  transition: all 0.3s;
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover, #0d5dda); /* Darker shade on hover */
}

/* Outline button */
.btn-outline {
  background-color: transparent;
  color: var(--button-primary-bg, #0a48a8);
  padding: 10px 20px;
  border: 2px solid var(--button-primary-bg, #0a48a8);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  transition: background-color 0.3s, color 0.3s;
}

/* Fill on hover and on KEYBOARD focus only. Plain `:focus` also matches a mouse
   click, which left the button filled after the click and let any later, more
   specific `color` rule (e.g. the hero's in home.css) win over the white label
   here — dark text on the filled background. `a:focus` still rings it. */
.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--button-primary-bg, #0a48a8);
  color: var(--button-primary-color, #ffffff);
}

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center;
  align-items: flex-start;
  /* Full-screen search overlay must clear everything else: the floating
     mobile-actions bar (z-index 1000) was covering the results at the
     bottom, and the WP admin bar (z-index 99999) was covering the close
     button at the top on mobile. Sit above both. 0.42.1. */
  z-index: 100000;
}

.modal[aria-hidden="false"] {
  display: flex; /* Show modal when aria-hidden is false */
}

.modal-content {
  padding: var(--wp--preset--spacing--base);
  width: 800px;
  border-radius: 4px;
  margin-top: 12rem;
  max-width: 70%;
  position: relative;
}

.modal-content input {
  width: 100%;
  padding: 1.25rem var(--wp--preset--spacing--base);
  font-size: var(--wp--preset--font-size--lg);
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
}

.modal-content input:focus {
  outline-color: var(--border-inverse, #ffffff);
}

/* Voice (speech-to-text) search mic (erp-commerce 4.360.0). storefront-chrome.js
   wraps #modal-search-input in `.erpc-search-field` and drops the mic button in
   when the operator toggle is on AND the browser supports the Web Speech API.
   The wrapper is the positioning context so the mic pins to the field, not the
   taller modal; the input gains trailing padding only when the mic is present. */
.erpc-search-field {
  position: relative;
  display: block;
}

.erpc-search-field:has(.erpc-voice-search-btn) input {
  padding-inline-end: 3.6rem;
}

.erpc-search-field .erpc-voice-search-btn {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary, #595959);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.erpc-search-field .erpc-voice-search-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary, #111);
}

.erpc-search-field .erpc-voice-search-btn:focus-visible {
  outline: 2px solid var(--blue-500, #0a48a8) /* was #2563eb */;
  outline-offset: 2px;
}

.erpc-search-field .erpc-voice-search-btn.is-listening {
  color: var(--error-color, #dc2626); /* was #d92d20 */
  background: rgba(217, 45, 32, 0.1); /* tint of the listening red above */
}

.erpc-search-field .erpc-voice-search-btn.is-listening::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: erpc-voice-pulse 1.4s ease-out infinite;
}

@keyframes erpc-voice-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erpc-search-field .erpc-voice-search-btn.is-listening::after {
    animation: none;
  }
}

#close-button {
  position: absolute;
  top: -1.75rem;
  right: -10px;
  background: transparent;
  color: var(--gray-100, #f2f2f2);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  border: 0;
  cursor: pointer;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
}

#close-button:after {
  display: inline-block;
  content: "\00d7"; /* This will render the 'X' */
}

.row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--lg);
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .row {
    flex-direction: row;
  }
}

.intro {
  padding: var(--wp--preset--spacing--lg);
  transition: padding 0.3s ease-in-out;
}

@media screen and (min-width: 1000px) {
  .intro {
    padding: var(--wp--preset--spacing--2-xl);
  }
}

.intro .button,
.intro button {
  text-transform: uppercase;
  border-radius: var(--button-border-radius);
}

.header-welcome,
.header-customer-info {
  margin: 0;
}

.header-welcome {
  font-weight: 800;
  font-size: 1.75rem;
  /* `line-height: 1` (new_skel) tightens the welcome line so the
     subsequent customer-info row sits visually attached. Default 1.5
     pushed it down by ~14px and broke the intro-card rhythm. */
  line-height: 1;
}

.header-customer-info {
  font-weight: 500;
  font-size: var(--wp--preset--font-size--lg);
}

.last-login {
  color: var(--gray-800, #404040);
}

/* Logged-in hero brand panel (plugin 4.333.0 — a crisp "for now" placeholder
   while the real campaign hero is designed). A multi-angle blue gradient +
   the operator's dark-background logo, filling the right half of the hero.
   CSS/vector only, so it never blurs the way the uploaded-media attempts did. */
.erpc-hero-brandpanel {
  position: relative;
  flex: 1 1 46%;
  align-self: stretch;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blue-900, #0b1a38); /* was #0d1b33 */
  background-image: radial-gradient(120% 130% at 82% 12%, rgba(43, 70, 147, 0.95), rgba(13, 27, 51, 0) 58%),
    linear-gradient(135deg, var(--blue-500, #0a48a8) 0%, rgba(13, 27, 51, 0) 52%),
    linear-gradient(305deg, var(--blue-600, #2b4693) 0%, rgba(13, 27, 51, 0) 46%),
    linear-gradient(180deg, var(--blue-800, #122650) /* was #122a52 */ 0%, var(--blue-900, #0b1a38) /* was #0b1a31 */ 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -22px rgba(10, 30, 70, 0.65);
}
/* Faint diagonal sheen for depth. */
.erpc-hero-brandpanel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(60deg, transparent 42%, rgba(255, 255, 255, 0.06) 50%, transparent 58%);
  pointer-events: none;
}
.erpc-hero-brandpanel__logo {
  position: relative;
  width: min(58%, 300px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}
@media screen and (max-width: 599.98px) {
  .erpc-hero-brandpanel {
    min-height: 200px;
    flex-basis: auto;
  }
}

/* Logged-in hero right slot — default brand image. The plugin emits
   `.call-to-action--default` (with `.is-brand-logo` or `.is-placeholder`)
   when no campaign carousel and no banner are configured, so the column
   isn't dead space. Purely decorative: centered, size-capped so a logo
   doesn't blow up to full width, and hidden on the stacked mobile layout
   (it only earns its keep beside the welcome copy on the wide row). */
.intro .call-to-action--default {
  flex: 0 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro .call-to-action--default img {
  max-width: 100%;
  height: auto;
}
.intro .call-to-action--default.is-brand-logo img {
  max-width: 260px;
  opacity: 0.9;
}
.intro .call-to-action--default.is-placeholder img {
  max-width: 420px;
}
@media screen and (max-width: 599.98px) {
  .intro .call-to-action--default {
    display: none;
  }
}


.login-text {
  font-weight: bold;
}

.account-cta {
  display: flex;
  gap: var(--wp--preset--spacing--xs);
  align-items: center;
}

.container {
  max-width: 1200px;
  margin: auto;
}

.p-2 {
  padding: var(--wp--preset--spacing--lg);
}

.user-products {
  display: flex;
  justify-content: space-between; /* Space between product lists */
}

.user-products product-list {
  flex: 0 0 auto; /* Prevent growth or shrinking */
  width: 48%; /* Adjust as needed to set size of each product list */
}

@media (max-width: 768px) {
  .user-products {
    flex-direction: column; /* Stack product lists vertically on mobile */
  }

  .user-products product-list {
    width: 100%; /* Full width on mobile */
  }
}

.action-button svg {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  margin-right: var(--wp--preset--spacing--xs);
}

/* =============================================================================
   WP body-class collisions with skeleton selectors — overrides land here
   AFTER the skeleton port so source-order wins; no !important needed.

   The skeleton was designed for a non-WP app where `.logged-in` meant THEIR
   buyer-logged-in state (controlling chrome density). WP independently uses
   `body.logged-in` for its admin-bar state. The class collision causes the
   skeleton's `.logged-in .top-nav { padding: 1rem }` to fire on every WP
   admin user, which pads the entire top-nav inward and breaks the edge-
   to-edge chrome — that's the "side margin" bug.

   Sticky chrome (0.19.3): the skeleton's `.top-nav { position: sticky;
   top: 0 }` is re-enabled here. The earlier collision with WP's fixed
   admin bar (both at `top: 0`) is resolved by `.admin-bar .top-nav { top: 32px }`
   (46px under 782px) below — the chrome now sits beneath the admin bar
   rather than fighting it for the top stripe. All three header rows
   (top-stripe, nav-container, nav-user-container) live inside the
   `#top-nav` `<header>`, so a single sticky on the wrapper pins all
   three together when the user scrolls.

   Box-shadow on top-nav is dropped because the contact-nav above it already
   provides visual separation from the page; the shadow-on-top-nav style was
   intended for the standalone skeleton with no contact-nav above.

   When the skeleton CSS is re-ported, the lower half above gets rewritten
   but this block stays. Refresh-safe.
   ============================================================================= */
.logged-in .top-nav {
	padding: 0;
}
.top-nav {
	/* `position: sticky; top: 0` pins all three header rows to the
	   viewport top as the user scrolls. `z-index: 1000` from the
	   skeleton stacks above the megamenu overlay (z-index: 10) and
	   page content. Background must be opaque so scrolling content
	   doesn't show through — skeleton sets `background-color: #fff`
	   higher up, no override needed.

	   `transform` transition handles the slide for the Amazon-style
	   auto-hide (see `.top-nav.is-hidden` below). No `will-change:
	   transform` here: per CSS spec it creates a containing block for
	   fixed-position descendants, which breaks the plugin's chrome
	   panels (account menu, notifications, Express Order) — they're
	   `position: fixed` and anchored via viewport-relative coords from
	   `getBoundingClientRect()`. With `will-change` present, the panel
	   `top` is interpreted relative to `.top-nav` instead of the
	   viewport, leaving a visible gap below each trigger (especially
	   pronounced under the WP admin bar, where `.top-nav` is offset
	   32px). The transition still animates smoothly without the hint. */
	position:   sticky;
	/* `--erpc-sticky-notice-h` (plugin 4.292.0): height of the plugin's
	   sticky-top notices (ERP outage banner et al.) — they pin to the
	   same viewport offset as this header and sit at z-index 9999, so
	   without this the banner covered the header's top slice on scroll.
	   0px when no banner is up. */
	top:        var(--erpc-sticky-notice-h, 0px);
	box-shadow: none;
	transition: transform 0.25s ease-in-out;
}
/* Admin-bar offset — when the WP admin bar is showing for logged-in
   admins, slide the sticky header down so it sits beneath the admin bar
   rather than overlapping it. Mirrors the same 32px / 46px breakpoint
   WP uses for the admin bar itself. */
.admin-bar .top-nav {
	top: calc( 32px + var(--erpc-sticky-notice-h, 0px) );
}
/* Below 783px the WP admin bar is `position: absolute` (it scrolls away
   with the page), NOT fixed — so reserving its 46px here just leaves an
   empty gap at the top of the viewport once it scrolls off. Drop the
   admin-bar offset on mobile; the header pins flush (minus any sticky
   notice). 0.42.1. */
@media screen and (max-width: 782px) {
	.admin-bar .top-nav {
		top: var(--erpc-sticky-notice-h, 0px);
	}
}

/* Auto-hide on scroll-down (Amazon pattern) — `is-hidden` class is
   added by storefront-chrome.js when the user scrolls down past the
   threshold; removed when they scroll back up or reach the top.
   Translates the entire sticky header off-viewport so it can slide
   back in without re-rendering. */
.top-nav.is-hidden {
	transform: translateY( calc( -100% - var(--erpc-sticky-notice-h, 0px) ) );
}
/* When the WP admin bar is showing, the sticky header sits at top: 32px;
   translating -100% only moves it 100% of its OWN height, which leaves a
   stub visible above the admin bar offset. Add the admin bar's height to
   the translation so the chrome hides fully. */
.admin-bar .top-nav.is-hidden {
	transform: translateY( calc( -100% - 32px - var(--erpc-sticky-notice-h, 0px) ) );
}
/* Mobile: admin bar is absolute (see note above), so the header pins at
   `top: var(--erpc-sticky-notice-h)` with no admin-bar offset — hiding it
   needs only its own height + notice, no +46px. 0.42.1. */
@media screen and (max-width: 782px) {
	.admin-bar .top-nav.is-hidden {
		transform: translateY( calc( -100% - var(--erpc-sticky-notice-h, 0px) ) );
	}
}

/* Always-pinned mode — opt-in via `body.erpc-nav-pinned`. Disables
   auto-hide (JS short-circuits when this class is present) AND defangs
   any stale `.is-hidden` class via a transform reset. Reach this mode
   from PHP or a future Settings toggle when a site prefers the chrome
   to stay visible at all times. */
.erpc-nav-pinned .top-nav.is-hidden,
.erpc-nav-pinned .top-nav {
	transform: none;
}

/* `:root :where(.is-layout-flow) > * { margin-block-start: 24px }` is the
   WP-emitted block-gap rule that fires on every non-first-child of a
   flow-layout group. wp:group renders our `.user-products` flex row as
   `<div class="… is-layout-flow">` — so the SECOND product-list (Most
   Viewed) inherits a 24px top-margin and visually drops below the
   first (Continue Shopping). Skeleton expects both side-by-side, top-
   aligned. Zero out block margins on .user-products children; specificity
   (0,1,1) beats the `:where()`-wrapped WP rule (0,0,1) without !important.
   `.resource-card` two-column layout has the same risk (plugin 4.247.0 renamed the block; the section keeps a legacy `rubber-ink` class but theme CSS keys on the canonical one) — same fix scope. */
.user-products > *,
.resource-card > * {
	margin-block-start: 0;
	margin-block-end:   0;
}

/* Search modal — push the modal-content down so the close button (which
   sits at `top: -1.75rem` ABOVE the modal-content per skeleton) clears
   the chrome. Skeleton's 12rem worked in a no-WP context where the only
   thing above was browser chrome; with WP admin bar (32px) + the
   sticky-disabled top-nav stacking, 12rem isn't enough breathing room.
   Bumping to 16rem keeps the close X visible AND below the chrome. */
.modal-content {
	margin-top: 16rem;
}

/* Search modal — full-bleed at narrow widths. Default `.modal-content`
   is 800px capped at 70% which leaves a ~262px usable card on a 375px
   viewport (huge side margins, dropdown inherits the same frame). At
   <768px we make the modal cover the whole viewport and re-layout as
   a sticky-top toolbar (close X + input) with the results list filling
   the remaining viewport — the modern PWA search-overlay pattern.
   Uses 100dvh to ride out iOS Safari's collapsing address bar.

   CSS Grid carries the layout because the existing markup is a flat
   sibling list (h2, label, input, button, results) with no wrapper —
   grid-template-areas lets us re-arrange without touching the markup. */
@media (max-width: 767px) {
	.modal {
		align-items: stretch;
	}

	.modal-content {
		display:               grid;
		grid-template-columns: 48px 1fr;
		grid-template-rows:    auto 1fr;
		grid-template-areas:
			"close input"
			"results results";
		gap:                   0;
		width:                 100vw;
		max-width:             none;
		height:                100dvh;
		min-height:            0;
		margin:                0;
		padding:               0;
		border-radius:         0;
		background: var(--surface-base, #ffffff);
	}

	/* Visually-hidden h2 and label live inside .modal-content but
	   shouldn't participate in the grid (would create empty rows).
	   Take them out of flow with absolute positioning so grid lays
	   out only the visible children. */
	.modal-content .visually-hidden {
		position: absolute;
	}

	#close-button {
		grid-area:    close;
		position:     relative;
		top:          auto;
		right:        auto;
		align-self:   center;
		justify-self: center;
		min-width:    44px;
		min-height:   44px;
		color: var(--gray-900, #262626);
		text-shadow:  none;
		font-size:    2rem;
		line-height:  1;
	}

	.modal-content input {
		grid-area:     input;
		border:        0;
		border-bottom: 1px solid var(--border-default, #e5e7eb);
		border-radius: 0;
		padding:       0.875rem 1rem;
		margin:        0;
		font-size:     1.125rem;
	}

	#search-results {
		grid-area:     results;
		margin:        0;
		max-height:    none;
		border:        0;
		border-radius: 0;
		overflow-y:    auto;
	}
}

/* Autocomplete dropdown inside the search modal. Skeleton didn't ship a
   results container — the plugin's REST endpoint (/erpcommerce/v1/
   search/products) feeds this list at runtime via the script in
   parts/header.html. Visual style matches the modal-content's white
   card so the dropdown reads as a continuation of the input. */
#search-results {
	background: var(--surface-base, #ffffff);
	border: 1px solid var(--border-color, #ccc);
	border-radius: 4px;
	margin-top:    0.5rem;
	max-height:    50vh;
	overflow-y:    auto;
	display:       none;
}
#search-results[data-state="open"] {
	display: block;
}
#search-results .erpc-search-result {
	display:         flex;
	align-items:     center;
	gap:             0.75rem;
	padding:         0.75rem 1rem;
	color:           inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--gray-100, #f2f2f2);
}

/* Touch devices land below the WCAG 2.5.5 minimum (44x44) at the
   default padding — bump to 48px effective height so the rows are
   comfortably tappable on a phone. `hover: none` keeps the desktop
   density unchanged (mouse precision doesn't need the extra height). */
@media (hover: none) {
	#search-results .erpc-search-result {
		min-height: 48px;
		padding:    0.875rem 1rem;
	}
}
#search-results .erpc-search-result:last-child { border-bottom: 0; }
#search-results .erpc-search-result:hover,
#search-results .erpc-search-result:focus {
	background-color: var(--blue-500, #0a48a8);
	color: var(--text-inverse, #ffffff);
}
#search-results .erpc-search-result:focus-visible {
	outline: 2px solid var(--border-inverse, #ffffff);
	outline-offset: -2px;
}
#search-results .erpc-search-result__title { font-weight: 600; flex: 1; }
#search-results .erpc-search-result__sku   { font-size: 0.85rem; opacity: 0.7; }
#search-results mark {
	background-color: var(--gold-200, #ffe599);
	color:            inherit;
	padding:          0 0.1em;
	border-radius:    2px;
	font-weight:      700;
}
#search-results .erpc-search-result:hover mark,
#search-results .erpc-search-result:focus mark {
	background-color: rgba(255, 255, 255, 0.25);
	color:            inherit;
}
#search-results .erpc-search-empty,
#search-results .erpc-search-loading,
#search-results .erpc-search-error {
	padding:    0.75rem 1rem;
	color: var(--gray-600, #737373);
	font-style: italic;
}

/* Grouped federated auto-suggest (theme 0.28.0 → plugin storefront/search
   ?mode=suggest). A labelled section per source; every selectable row keeps
   the `.erpc-search-result` styling above. */
#search-results .erpc-search-group + .erpc-search-group {
	border-top: 1px solid var(--border-default, #e5e7eb);
}
#search-results .erpc-search-group__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             0.5rem;
	padding:         0.5rem 1rem 0.25rem;
	font-size:       0.7rem;
	font-weight:     700;
	letter-spacing:  0.06em;
	text-transform:  uppercase;
	color: var(--gray-600, #737373);
}
#search-results .erpc-search-group__count {
	font-weight: 600;
}
#search-results .erpc-search-result__thumb {
	flex:            0 0 auto;
	width:           36px;
	height:          36px;
	border-radius:   4px;
	overflow:        hidden;
	background: var(--surface-sunken, #f2f2f2);
	display:         flex;
	align-items:     center;
	justify-content: center;
}
#search-results .erpc-search-result__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}
#search-results .erpc-search-result__meta {
	font-size: 0.8rem;
	opacity:   0.7;
}
#search-results .erpc-search-result:hover .erpc-search-result__meta,
#search-results .erpc-search-result:focus .erpc-search-result__meta {
	opacity: 0.9;
	color:   inherit;
}
#search-results .erpc-search-seeall {
	justify-content: center;
	font-weight:     600;
}

/* Skeleton loading rows (HARD RULE: no plain "Searching…" text state). */
#search-results .erpc-search-skeleton {
	padding: 0.25rem 0;
}
#search-results .erpc-search-skel-row {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	padding:     0.65rem 1rem;
}
#search-results .erpc-search-skel {
	display:          block;
	border-radius:    4px;
	background: linear-gradient( 90deg, var(--surface-sunken, #f2f2f2) 25%, var(--surface-sunken, #f2f2f2) 37%, var(--surface-sunken, #f2f2f2) 63% );
	background-size:  400% 100%;
	animation:        erpc-search-shimmer 1.2s ease-in-out infinite;
}
#search-results .erpc-search-skel--thumb {
	flex:   0 0 auto;
	width:  36px;
	height: 36px;
}
#search-results .erpc-search-skel--line {
	flex:   1;
	height: 0.8rem;
}
@keyframes erpc-search-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
	#search-results .erpc-search-skel { animation: none; }
}

/* [erpc_auth_links] shortcode inside the cart-login-group. As of plugin
   4.55.2 this renders Sign in / Sign up ONLY when logged out — logged-in
   buyers see nothing here, and the Sign-out lives in the
   account-quick-navigation row below (see `.erpc-auth-signout`). The
   redundant "Account" label between Search and Cart was crowding the
   chrome at mid-size viewports. */
.cart-login-group .erpc-auth-links--inline {
	display:     inline-flex;
	align-items: center;
	gap:         0.75rem; /* half the old ~1.5rem (1rem inherited margin + 0.5rem) */
	/* Restore the leading separation from the search box that the now-zeroed
	   `.cart-login-group a { margin-left: 1rem }` used to give the first link.
	   Lives on the container so it doesn't reopen the inter-button gap. */
	margin-left: 1rem;
}
.cart-login-group .erpc-auth-links__link {
	display:          inline-block;
	/* Neutralize the inherited `.cart-login-group a { margin-left: 1rem }`
	   (line ~902) so the flex `gap` above is the only spacing between the
	   two buttons — otherwise gap changes are swamped by the margin. */
	margin:           0;
	border:           none;
	border-radius:    4px;
	padding:          10px 20px;
	font-size:        1em;
	text-decoration:  none;
	cursor:           pointer;
	transition:       all 0.3s;
	background-color: var(--button-primary-bg, #0a48a8);
	color:            var(--button-primary-color, #ffffff);
}
/* Match the logged-in hero pair: Join reads as the primary "Change Shipto"
   blue, Login as the darker "Logout" navy. */
.cart-login-group .erpc-auth-links__link--signup {
	background-color: var(--blue-500, #0a48a8);
}
.cart-login-group .erpc-auth-links__link--login {
	background-color: var(--blue-700, #172e73);
}
.cart-login-group .erpc-auth-links__link:hover,
.cart-login-group .erpc-auth-links__link:focus-visible {
	color:  var(--button-primary-color, #ffffff);
	filter: brightness(1.5);
}

/* [erpc_auth_signout] shortcode dropped into the bottom account-nav row.
   Owns its own <li>; matches the `.account-quick-navigation a` look so
   it reads as the 6th nav item rather than a button. */
.account-quick-navigation .erpc-auth-signout__form {
	display: inline;
	margin:  0;
	padding: 0;
}
.account-quick-navigation .erpc-auth-signout__button {
	background:      transparent;
	border:          none;
	padding:         0.25rem;
	margin:          0;
	font:            inherit;
	color: var(--gray-800, #404040);
	cursor:          pointer;
	text-decoration: none;
}
.account-quick-navigation .erpc-auth-signout__button:hover,
.account-quick-navigation .erpc-auth-signout__button:focus-visible {
	outline:        2px solid var(--outline-color, #0a48a8);
	outline-offset: 2px;
	border-radius:  var(--input-border-radius);
}

/* wp:erpcommerce/storefront-notifications-bell — chrome bell icon +
   preview panel, slotted into `.cart-login-group` immediately left of
   the cart-button. Plugin 4.62.0+. The block emits its own positioned
   wrapper (`.erpc-notifications-bell`) so it doesn't need extra layout
   help from the flex parent — just a right-margin to separate it from
   the cart icon. Anonymous viewers see nothing (empty render). */
.cart-login-group .erpc-notifications-bell {
	position:    relative;
	display:     inline-flex;
	align-items: center;
	/* Match the spacing convention from line 754
	   (`.cart-login-group a { margin-left: 1rem }`). My bell is a `<div>`,
	   not an `<a>`, so it doesn't inherit the rule — apply it explicitly
	   here. The cart-button anchor that follows keeps its own 1rem
	   margin-left, giving even 1rem gaps on both sides of the bell. */
	margin:      0 0 0 1rem;
}
.cart-login-group .erpc-notifications-bell__trigger {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       44px;
	min-height:      44px;
	padding:         0.4rem;
	background:      transparent;
	border:          1px solid transparent;
	border-radius:   6px;
	color: var(--text-secondary, #595959);
	cursor:          pointer;
	transition:      background-color 120ms ease, color 120ms ease;
}
.cart-login-group .erpc-notifications-bell__trigger:hover,
.cart-login-group .erpc-notifications-bell__trigger[aria-expanded="true"] {
	background: var(--surface-sunken, #f2f2f2);
	color: var(--text-primary, #111);
}
.cart-login-group .erpc-notifications-bell__trigger:focus-visible {
	outline:        2px solid var(--outline-color, #0a48a8);
	outline-offset: 2px;
	background: var(--surface-sunken, #f2f2f2);
	color: var(--text-primary, #111);
}
.cart-login-group .erpc-notifications-bell__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
}
.cart-login-group .erpc-notifications-bell__badge {
	position:      absolute;
	top:           2px;
	right:         2px;
	min-width:     18px;
	height:        18px;
	padding:       0 4px;
	background: var(--error-color, #dc2626); /* fallback so the count bubble is never bare/white if the token doesn't resolve */
	color: var(--text-inverse, #ffffff);
	border: 2px solid var(--border-inverse, #ffffff);
	border-radius: 999px;
	font-size:     10px;
	font-weight:   700;
	line-height:   14px;
	text-align:    center;
}

/* Bell preview panel — opens below the trigger. Uses `position: fixed`
   so it escapes the `.nav-user-container { overflow-x: auto }` clipping
   context (at line 567); `overflow-x: auto` per CSS spec implicitly
   sets overflow-y to auto, which would clip an absolute-positioned
   panel to Row 2's box. The bundled `chrome-account-menu.js` writes
   `top` + `left` inline on open from the trigger's
   `getBoundingClientRect()` and closes the panel on document scroll.
   z-index above the megamenu overlay (z:30) but below the search
   modal (z:50ish). */
.cart-login-group .erpc-notifications-bell__panel {
	position:      fixed;
	z-index:       45;
	width:         360px;
	max-width:     calc(100vw - 1rem);
	background: var(--surface-base, #ffffff);
	border: 1px solid var(--border-strong, #d9d9d9);
	border-radius: 8px;
	box-shadow:    0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
	overflow:      hidden;
}
.cart-login-group .erpc-notifications-bell__panel[hidden] {
	display: none;
}
.cart-login-group .erpc-notifications-bell__panel-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             0.75rem;
	padding:         0.75rem 1rem;
	border-bottom: 1px solid var(--border-default, #e5e7eb);
	background: var(--surface-subtle, #fafafa);
}
.cart-login-group .erpc-notifications-bell__panel-title {
	margin:         0;
	font-size:      0.875rem;
	font-weight:    600;
	color: var(--text-primary, #111);
	letter-spacing: 0.01em;
}
/* "Mark all as read" header action (plugin 4.294.0) — quiet link-style
   button; the plugin renders it `hidden` at 0 unread and the bell JS
   hides it after a successful mark-all. */
.cart-login-group .erpc-notifications-bell__mark-all {
	margin:          0;
	padding:         0;
	background:      none;
	border:          none;
	font-size:       0.75rem;
	font-weight:     600;
	color: var(--link-color, #0073e6);
	cursor:          pointer;
	white-space:     nowrap;
	text-decoration: none;
}
.cart-login-group .erpc-notifications-bell__mark-all:hover {
	color: var(--link-hover-color, #005bb5);
	text-decoration: underline;
}
.cart-login-group .erpc-notifications-bell__mark-all:focus-visible {
	outline:        2px solid var(--outline-color, #0a48a8);
	outline-offset: 2px;
	border-radius:  3px;
}
.cart-login-group .erpc-notifications-bell__mark-all:disabled {
	color: var(--text-subtle, #8c8c8c) /* was #9ca3af */;
	cursor: default;
}
.cart-login-group .erpc-notifications-bell__mark-all[hidden] {
	display: none;
}
/* Rows own their padding (full-bleed hover/unread tints), so the body
   wrapper drops the 0.75rem/1rem it carried before plugin 4.294.0. */
.cart-login-group .erpc-notifications-bell__panel-body {
	padding:    0;
	min-height: 80px;
	max-height: min(28rem, 60vh);
	overflow-y: auto;
}
.cart-login-group .erpc-notifications-bell__empty {
	margin:     0;
	padding:    1.75rem 1rem;
	color: var(--text-muted, #737373);
	font-size:  0.875rem;
	text-align: center;
}

/* Notification preview rows (markup from plugin 4.294.0) — icon in a
   kind-tinted circle + title/body/time stack + unread dot, the whole
   row one block-level link. */
.cart-login-group .erpc-notifications-bell__list {
	margin:     0;
	padding:    0;
	list-style: none;
}
.cart-login-group .erpc-notifications-bell__item + .erpc-notifications-bell__item {
	border-top: 1px solid var(--gray-100, #f2f2f2);
}
.cart-login-group .erpc-notifications-bell__item.is-unread {
	background: var(--surface-subtle, #fafafa);
}
/* Reset margin + border-radius + chip border — `.cart-login-group a`
   (line ~808) styles every link in the row-1 group; same documented
   reset as `.erpc-account-menu__item` above. Also pins the row's text
   color so rows don't paint as blue link text. */
.cart-login-group .erpc-notifications-bell__item-link {
	display:         flex;
	align-items:     flex-start;
	gap:             0.75rem;
	margin:          0;
	padding:         0.75rem 1rem;
	border:          none;
	border-radius:   0;
	color: var(--text-primary, #111);
	font-size:       0.875rem;
	text-align:      left;
	text-decoration: none;
}
.cart-login-group a.erpc-notifications-bell__item-link:hover {
	background: var(--surface-subtle, #fafafa);
	outline:    none;
}
.cart-login-group .erpc-notifications-bell__item.is-unread a.erpc-notifications-bell__item-link:hover {
	background: var(--surface-sunken, #f2f2f2);
}
/* The bell JS focuses the first focusable on open — with the generic
   `.cart-login-group a:focus` outline that painted blue boxes around
   every line fragment of the (then-inline) row link. Block layout fixes
   the fragments; :focus-visible keeps the ring for keyboard users while
   programmatic/mouse focus stays quiet. Inset offset so the ring isn't
   clipped by the panel's overflow:hidden rounded corners. */
.cart-login-group a.erpc-notifications-bell__item-link:focus {
	outline: none;
}
.cart-login-group a.erpc-notifications-bell__item-link:focus-visible {
	outline:        2px solid var(--outline-color, #0a48a8);
	outline-offset: -2px;
}
.cart-login-group .erpc-notifications-bell__item-icon {
	flex:            0 0 auto;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border-radius:   999px;
	background: var(--surface-sunken, #f2f2f2);
	color: var(--text-secondary, #595959);
}
.cart-login-group .erpc-notifications-bell__item-icon--approved {
	background: var(--notif-approved-bg, #e7f4ec); /* original; themeable */
	color:      var(--notif-approved-fg, #15803d);
}
.cart-login-group .erpc-notifications-bell__item-icon--rejected {
	background: var(--notif-rejected-bg, #fbeaea);
	color:      var(--notif-rejected-fg, #d63638);
}
.cart-login-group .erpc-notifications-bell__item-icon--pending {
	background: var(--notif-pending-bg, #fdf3e1);
	color:      var(--notif-pending-fg, #996a13);
}
.cart-login-group .erpc-notifications-bell__item-content {
	display:   flex;
	flex:      1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap:       0.125rem;
}
.cart-login-group .erpc-notifications-bell__item-title {
	font-weight: 600;
	color: var(--text-primary, #111);
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.cart-login-group .erpc-notifications-bell__item-body {
	color: var(--text-secondary, #595959);
	font-size:   0.8125rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}
.cart-login-group .erpc-notifications-bell__item-time {
	color: var(--text-muted, #737373);
	font-size: 0.75rem;
}
.cart-login-group .erpc-notifications-bell__item-dot {
	flex:          0 0 auto;
	width:         8px;
	height:        8px;
	margin-top:    0.45rem;
	border-radius: 999px;
	background: var(--link-color, #0073e6);
}
/* sr-only "Unread:" prefix inside the row link — the theme doesn't ship
   WP core's .screen-reader-text (block themes must define it), so scope
   the standard recipe to the bell. */
.cart-login-group .erpc-notifications-bell .screen-reader-text,
.cart-login-group .erpc-notifications-bell__panel .screen-reader-text {
	position: absolute !important;
	width:    1px;
	height:   1px;
	margin:   -1px;
	padding:  0;
	border:   0;
	overflow: hidden;
	clip:       rect(1px, 1px, 1px, 1px);
	clip-path:  inset(50%);
	word-wrap:  normal !important;
}
.cart-login-group .erpc-notifications-bell__panel-footer {
	padding:    0.625rem 1rem;
	border-top: 1px solid var(--border-default, #e5e7eb);
	background: var(--surface-subtle, #fafafa);
}
.cart-login-group .erpc-notifications-bell__view-all {
	display:         inline-block;
	font-size:       0.8125rem;
	font-weight:     600;
	color: var(--link-color, #0073e6);
	text-decoration: none;
}
.cart-login-group .erpc-notifications-bell__view-all:hover,
.cart-login-group .erpc-notifications-bell__view-all:focus-visible {
	color: var(--link-hover-color, #005bb5);
	text-decoration: underline;
}
.cart-login-group .erpc-notifications-bell__view-all:focus-visible {
	outline:        2px solid var(--outline-color, #0a48a8);
	outline-offset: 2px;
	border-radius:  3px;
}

/* wp:erpcommerce/storefront-account-menu — MW▾ avatar dropdown sitting
   in row 1, immediately right of the cart-button inside
   `.cart-login-group` (logged-in only). Plugin 4.62.0+; relocated from
   row 2's `.account-quick-navigation` per Matt's header pass. The block
   emits a `<div class="erpc-account-menu">` wrapper that collapses to
   nothing for anonymous viewers so the cart-login-group flex row stays
   tight. Holds Profile, Preferences, and Logout — Edit Profile link
   was removed from this row in the same release (Profile lives in the
   dropdown). */
.cart-login-group .erpc-account-menu {
	position: relative;
	/* Match the 1rem left margin that the bell (`.erpc-notifications-bell`)
	   and cart-button (`.cart-login-group a`) get, so the search → bell →
	   cart → avatar sequence has equal gaps across row 1. */
	margin:   0 0 0 1rem;
	padding:  0;
}
.cart-login-group .erpc-account-menu__trigger {
	display:       inline-flex;
	align-items:   center;
	gap:           0.375rem;
	min-height:    44px;
	padding:       0.25rem 0.5rem 0.25rem 0.25rem;
	background:    transparent;
	border:        1px solid transparent;
	border-radius: 999px;
	cursor:        pointer;
	color: var(--gray-800, #404040);
	transition:    background-color 120ms ease, color 120ms ease;
}
.cart-login-group .erpc-account-menu__trigger:hover,
.cart-login-group .erpc-account-menu__trigger[aria-expanded="true"] {
	background: var(--surface-sunken, #f2f2f2);
	color: var(--text-primary, #111);
}
.cart-login-group .erpc-account-menu__trigger:focus-visible {
	outline:        2px solid var(--outline-color, #0a48a8);
	outline-offset: 2px;
	background: var(--surface-sunken, #f2f2f2);
	color: var(--text-primary, #111);
}
.cart-login-group .erpc-account-menu__avatar {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	background: var(--blue-500, #0a48a8);
	color: var(--text-inverse, #ffffff);
	border-radius:   999px;
	font-size:       0.8125rem;
	font-weight:     700;
	letter-spacing:  0.01em;
	line-height:     1;
	user-select:     none;
}
.cart-login-group .erpc-account-menu__caret {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color: var(--text-muted, #737373);
	transition:      transform 0.2s ease-in-out;
}
.cart-login-group .erpc-account-menu__trigger[aria-expanded="true"] .erpc-account-menu__caret {
	transform: rotate(180deg);
}

/* Dropdown panel — anchored to the trigger via JS-computed coords.
   `position: fixed` (NOT absolute) so it escapes the
   `.nav-user-container { overflow-x: auto }` clipping context (line
   567); overflow-x: auto per CSS spec implicitly clips overflow-y too,
   which would chop the panel at Row 2's bottom edge and only render
   the first menuitem. The bundled `chrome-account-menu.js` writes
   `top` + `left` inline on open from `getBoundingClientRect()` and
   closes the panel on document scroll. z-index above the megamenu
   overlay; below the search modal. */
.cart-login-group .erpc-account-menu__panel {
	position:      fixed;
	z-index:       45;
	width:         240px;
	max-width:     calc(100vw - 1rem);
	background: var(--surface-base, #ffffff);
	border: 1px solid var(--border-strong, #d9d9d9);
	border-radius: 8px;
	box-shadow:    0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
	padding:       0.375rem 0;
	overflow:      hidden;
	white-space:   normal;
}
.cart-login-group .erpc-account-menu__panel[hidden] {
	display: none;
}
.cart-login-group .erpc-account-menu__identity {
	border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.cart-login-group .erpc-account-menu__identity-user {
	padding: 0.625rem 1rem 0.5rem;
}
.cart-login-group .erpc-account-menu__identity-name {
	font-size:   0.875rem;
	font-weight: 600;
	color: var(--text-primary, #111);
	line-height: 1.3;
}
.cart-login-group .erpc-account-menu__identity-email {
	font-size:   0.75rem;
	color: var(--text-muted, #737373);
	line-height: 1.3;
	margin-top:  2px;
	word-break:  break-all;
}
/* Active customer at-a-glance — YouTube parallels the "View your channel"
   slot here, but for B2B the active customer IS the operating context, not
   an action target, so we render it as static identity data. Subtle inset
   border separates it from the user info above without making the panel
   feel like two stacked cards. */
.cart-login-group .erpc-account-menu__identity-customer {
	padding:    0.5rem 1rem 0.625rem;
	border-top: 1px solid var(--gray-100, #f2f2f2);
}
.cart-login-group .erpc-account-menu__identity-customer-label {
	font-size:      0.6875rem;
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted, #737373);
	line-height:    1.2;
	margin-bottom:  2px;
}
.cart-login-group .erpc-account-menu__identity-customer-name {
	font-size:     0.8125rem;
	font-weight:   600;
	color: var(--text-primary, #111);
	line-height:   1.3;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}
.cart-login-group .erpc-account-menu__identity-customer-number {
	font-size:   0.75rem;
	color: var(--text-muted, #737373);
	line-height: 1.2;
	margin-top:  1px;
}
/* Inner dropdown `<ul>` — explicit vertical-stack assertion. No parent
   `ul`-flex rule cascades into row 1 (cart-login-group is a `<div>`),
   but keep the resets so the panel layout stays correct if the block
   ever moves back into a `<ul>` ancestor. */
.cart-login-group .erpc-account-menu__items {
	display:     block;
	gap:         0;
	align-items: normal;
	list-style:  none;
	margin:      0;
	padding:     0;
}
.cart-login-group .erpc-account-menu__items > li {
	display: list-item;
	margin:  0;
	padding: 0;
	width:   100%;
}
.cart-login-group .erpc-account-menu__item {
	display:         block;
	width:           100%;
	/* Reset margin + border-radius — `.cart-login-group a` (line ~754)
	   applies `margin-left: 1rem` and `border-radius: var(--button-border-radius)`
	   to every link in the row-1 group (where the search/cart/avatar buttons
	   live). Those rules used to be invisible to the dropdown when the
	   block was scoped to row 2's `.account-quick-navigation`, but now that
	   the dropdown items are `<a>`s under `.cart-login-group` they inherit
	   the chip-style margin + radius — the highlight pulls in 16px on the
	   left and rounds its corners. */
	margin:          0;
	padding:         0.5rem 1rem;
	background:      transparent;
	border:          none;
	border-radius:   0;
	font-size:       0.875rem;
	color: var(--text-primary, #111);
	text-align:      left;
	text-decoration: none;
	cursor:          pointer;
	line-height:     1.4;
}
/* Item visual state — unified for mouse hover AND keyboard
   `.is-active` (set by chrome-account-menu.js when arrow keys move the
   active item). DOM focus never moves into the panel — focus stays on
   the avatar trigger — so we deliberately do NOT show a `:focus-visible`
   blue outline on items here; the active state is a subtle gray bg
   instead. Also overrides the theme's `.account-quick-navigation a:hover`
   blue-outline rule at line 587 so the dropdown items get the dropdown
   treatment, not the row-link treatment. */
.cart-login-group .erpc-account-menu__item:hover,
.cart-login-group .erpc-account-menu__item.is-active {
	background: var(--surface-sunken, #f2f2f2);
	color: var(--text-primary, #111);
	text-decoration: none;
	outline:         none;
	border-radius:   0;
}
.cart-login-group .erpc-account-menu__divider {
	list-style: none;
	height:     1px;
	margin:     0.375rem 0;
	background: var(--surface-sunken, #f2f2f2);
}

/* Switch-customer submenu (YouTube-style channel switcher). The panel
   is partitioned into screens — `[data-erpc-account-menu-screen="main"]`
   and `[data-erpc-account-menu-screen="switcher"]` — and chrome-account-menu.js
   toggles `hidden` between them. Hidden ones don't render via the native
   `hidden` attribute, so no display rule is needed here. */

/* "Switch customer" trigger row on main screen — flex row with leading
   icon, label, and trailing right-chevron pinned to the right edge. */
.cart-login-group .erpc-account-menu__switcher-trigger {
	display:     flex;
	align-items: center;
	gap:         0.625rem;
}
.cart-login-group .erpc-account-menu__leading-icon {
	flex:        0 0 20px;
	width:       20px;
	height:      20px;
	display:     inline-flex;
	align-items: center;
	color: var(--text-secondary, #595959);
}
.cart-login-group .erpc-account-menu__switcher-trigger-label {
	flex: 1 1 auto;
}
.cart-login-group .erpc-account-menu__switcher-trigger-chevron {
	flex:        0 0 16px;
	width:       16px;
	height:      16px;
	display:     inline-flex;
	align-items: center;
	color: var(--text-subtle, #8c8c8c) /* was #9ca3af */;
}
.cart-login-group .erpc-account-menu__switcher-trigger-chevron svg {
	fill: currentColor;
}

/* Back row on submenu screen — visually a header, functionally a
   menuitem (so arrow keys can land on it and Enter returns to main).
   Border-bottom mirrors the identity block's separator on the main
   screen so both screens have consistent top-section visual weight. */
.cart-login-group .erpc-account-menu__back {
	display:         flex;
	align-items:     center;
	gap:             0.625rem;
	width:           100%;
	padding:         0.625rem 1rem 0.75rem;
	background:      transparent;
	border:          none;
	border-bottom: 1px solid var(--border-default, #e5e7eb);
	border-radius:   0;
	font-size:       0.9375rem;
	font-weight:     600;
	color: var(--text-primary, #111);
	text-align:      left;
	cursor:          pointer;
}
.cart-login-group .erpc-account-menu__back:hover,
.cart-login-group .erpc-account-menu__back.is-active {
	background: var(--surface-sunken, #f2f2f2);
	outline:    none;
}
.cart-login-group .erpc-account-menu__back-icon {
	flex:        0 0 20px;
	width:       20px;
	height:      20px;
	display:     inline-flex;
	align-items: center;
	color: var(--text-secondary, #595959);
}
.cart-login-group .erpc-account-menu__back-icon svg {
	fill: currentColor;
}

/* Customer row on submenu screen — flex row with stacked name/number
   on the left and a right-aligned check that only renders for the
   current customer (PHP omits the SVG on the other rows; the slot
   stays present so every row's text aligns on the same x). */
.cart-login-group .erpc-account-menu__customer {
	display:     flex;
	align-items: center;
	gap:         0.625rem;
	padding:     0.625rem 1rem;
}
.cart-login-group .erpc-account-menu__customer.is-current {
	cursor: default;
}
.cart-login-group .erpc-account-menu__customer-text {
	display:        flex;
	flex-direction: column;
	flex:           1 1 auto;
	min-width:      0;
}
.cart-login-group .erpc-account-menu__customer-name {
	font-size:     0.875rem;
	font-weight:   500;
	color: var(--text-primary, #111);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}
.cart-login-group .erpc-account-menu__customer-number {
	font-size:   0.75rem;
	color: var(--text-muted, #737373);
	line-height: 1.2;
}
.cart-login-group .erpc-account-menu__customer-check {
	flex:        0 0 18px;
	width:       18px;
	height:      18px;
	display:     inline-flex;
	align-items: center;
	color: var(--text-primary, #111);
}
.cart-login-group .erpc-account-menu__customer-check svg {
	fill: currentColor;
}

.cart-login-group .erpc-account-menu__signout-form {
	margin:  0;
	padding: 0;
}
.cart-login-group .erpc-account-menu__item--signout {
	color: var(--error-color, #dc2626); /* was #b91c1c */
	font-weight: 600;
}
.cart-login-group .erpc-account-menu__item--signout:hover,
.cart-login-group .erpc-account-menu__item--signout.is-active {
	color: var(--text-error-strong, #991b1b);
	background: var(--surface-sunken, #f2f2f2);
	outline:    none;
}

/* wp:site-logo block inside the chrome's `.logo-group` (header) and
   `.footer-logo-social` (footer). WP's block emits a
   `<div class="wp-block-site-logo"><a class="custom-logo-link">
   <img class="custom-logo"/></a></div>` wrapper — that outer div picks up
   block-gap margins from theme.json + WP layout cascade that would push
   the logo off-baseline inside the flex parents. Strip the wrapper
   margins; constrain the `.custom-logo` `<img>` to skeleton sizes
   (header 40px height, footer at native ratio); restore the hover
   outline that `.logo:hover` used to give the header anchor. */
.logo-group .wp-block-site-logo,
.footer-logo-social .wp-block-site-logo {
	margin: 0;
}
.logo-group .wp-block-site-logo .custom-logo-link {
	display:        block;
	border:         var(--button-border, none);
	border-radius:  var(--button-border-radius);
	outline-offset: 2px;
	outline:        2px solid transparent;
	cursor:         var(--button-cursor);
	transition:     outline-color 0.2s;
}
.logo-group .wp-block-site-logo .custom-logo-link:hover,
.logo-group .wp-block-site-logo .custom-logo-link:focus {
	outline-color: var(--blue-500, #0a48a8);
}
.logo-group .wp-block-site-logo .custom-logo {
	height: 40px;
	width:  auto;
	display: block;
}
/* Text fallback when no Site Identity logo is set (0.81.0) — the site
   title as the home link, sized to occupy the same 40px logo baseline so
   the chrome doesn't collapse. Renders only until an operator picks a
   logo; emitted by erpcommerce_storefront_site_logo_text_fallback(). */
.logo-group .erpc-site-logo-fallback .custom-logo-link,
.footer-logo-social .erpc-site-logo-fallback .custom-logo-link {
	display:         flex;
	align-items:     center;
	min-height:      40px;
	font-weight:     700;
	font-size:       22px;
	line-height:     1;
	color:           inherit;
	text-decoration: none;
	white-space:     nowrap;
}
.footer-logo-social .wp-block-site-logo.footer-logo {
	margin-bottom: 10px;
}
.footer-logo-social .wp-block-site-logo .custom-logo {
	/* Cap at 180px so it stays consistent with the skeleton's footer
	   sizing on desktop, but soft-scale to 50vw on narrow viewports
	   so a small phone (<360px) doesn't render the logo edge-to-edge. */
	width:      min( 180px, 50vw );
	max-width:  180px;
	height:     auto;
	display:    block;
}

/* Block templates for non-home routes (templates/page.html, templates/single.html,
   templates/404.html). The chrome's `.top-nav` is sticky (re-enabled in
   0.19.3); page bodies need explicit top spacing so the first paint
   doesn't visually hug the bottom of the chrome. The .erpc-* classes
   here are wrapper hooks the templates apply on the `<main>` element so
   static Pages, single posts, and 404s land with breathing room. */
.erpc-page,
.erpc-single,
.erpc-404 {
	padding: 2rem 1.25rem 4rem;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin:    0 auto;
}
/* Flush variant — used by the page-locations-map template (0.24.1).
   Full-bleed content (interactive map pane, etc.) needs the wrapper
   to contribute zero spacing so the inner block can own its own
   chrome-to-footer height calculation. Caller is responsible for any
   spacing it wants on either edge. */
.erpc-page--flush {
	padding:    0;
	max-width:  none;
}
/* Bleed variant — used by page-express-order and page-orders
   (page-order-history before the 0.34.0 slug rename).
   Surfaces whose forms/tables need the full viewport (multi-column
   filter bars, wide data grids) opt in via the `erpc-page--bleed`
   className on the template's <main> group. Keeps vertical/edge
   padding so the content doesn't paint flush against the chrome,
   but drops the 1340px wide-size clamp so the inner block can use
   the full screen.

   Until 0.25.3 this className existed on the express-order template
   without any matching CSS — `.erpc-page`'s max-width won silently,
   leaving that surface clamped (`feedback_storefront_pages_use_real_estate`).
   Order History (4.143.0) hit the same constraint and motivated the rule. */
.erpc-page--bleed {
	max-width: none;
}
.erpc-page__title,
.erpc-single__title,
.erpc-404__title {
	font-size:   2rem;
	margin:      0 0 1rem;
	line-height: 1.2;
}
.erpc-single__date {
	color: var(--gray-700, #595959);
	font-size:    0.9rem;
	margin-bottom: 1.5rem;
}
.erpc-404__body {
	color: var(--gray-700, #595959);
	max-width: 60ch;
}
.erpc-404__actions {
	margin: 1.5rem 0 2rem;
}
.erpc-404__actions a {
	color: var(--blue-500, #0a48a8);
	text-decoration: none;
	font-weight:     600;
}
.erpc-404__actions a:hover,
.erpc-404__actions a:focus-visible {
	text-decoration: underline;
}

/* =============================================================================
   Articles archive (templates/home.html) — modern editorial grid.

   Renders at `/articles/` (the page assigned as Reading → Posts page).
   Big H1 hero with a brand-blue accent rule, then a 3-col card grid with
   image / date / title. Featured-image-less posts still render a clean
   gradient tile so the grid stays rectangular.
   ============================================================================= */
.erpc-archive {
	padding:   3rem 1.25rem 5rem;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin:    0 auto;
}
.erpc-archive__hero {
	padding-bottom: 2.5rem;
	margin-bottom:  3rem;
	border-bottom: 1px solid var(--gray-200, #d9d9d9);
	position:       relative;
}
.erpc-archive__hero::after {
	content:    "";
	position:   absolute;
	left:       0;
	bottom:     -1px;
	width:      96px;
	height:     3px;
	background: var(--blue-500, #0a48a8);
}
.erpc-archive__title {
	font-size:      clamp(2.5rem, 5vw, 4.25rem);
	font-weight:    800;
	line-height:    1.04;
	letter-spacing: -0.02em;
	margin:         0;
	color: var(--gray-900, #262626);
}

.erpc-archive__grid {
	gap: 2.5rem !important;
}
.erpc-archive__card {
	display:        flex !important;
	flex-direction: column;
	gap:            1rem;
	transition:     transform 200ms ease;
}
.erpc-archive__card:hover {
	transform: translateY(-2px);
}

.erpc-archive__image-frame {
	aspect-ratio:  16 / 9;
	overflow:      hidden;
	border-radius: 0.75rem;
	position:      relative;
	background: linear-gradient(135deg, var(--blue-100, #d0e3ff) 0%, var(--gray-100, #f2f2f2) 100%);
}
.erpc-archive__image-frame .wp-block-post-featured-image {
	position: absolute;
	inset:    0;
	margin:   0;
}
.erpc-archive__image-frame .wp-block-post-featured-image,
.erpc-archive__image-frame .wp-block-post-featured-image a {
	display: block;
	width:   100%;
	height:  100%;
}
.erpc-archive__image-frame img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 400ms ease;
}
.erpc-archive__card:hover .erpc-archive__image-frame img {
	transform: scale(1.05);
}

.erpc-archive__body {
	display:        flex !important;
	flex-direction: column;
	gap:            0.5rem;
	padding:        0 0.25rem;
}
.erpc-archive__date {
	font-size:      0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray-600, #737373);
	font-weight:    600;
	margin:         0;
}
.erpc-archive__post-title {
	font-size:      1.375rem;
	line-height:    1.3;
	font-weight:    700;
	letter-spacing: -0.01em;
	margin:         0;
}
.erpc-archive__post-title a {
	color: var(--gray-900, #262626);
	text-decoration: none;
	transition:      color 150ms ease;
}
.erpc-archive__post-title a:hover,
.erpc-archive__post-title a:focus-visible {
	color: var(--blue-500, #0a48a8);
}

.erpc-archive__pagination {
	margin-top:  4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--gray-200, #d9d9d9);
	gap:         0.5rem !important;
}
.erpc-archive__pagination .wp-block-query-pagination-previous,
.erpc-archive__pagination .wp-block-query-pagination-next {
	display:         inline-flex;
	align-items:     center;
	padding:         0.625rem 1.25rem;
	background: var(--blue-500, #0a48a8);
	color: var(--text-inverse, #ffffff);
	border-radius:   999px;
	text-decoration: none;
	font-weight:     600;
	font-size:       0.875rem;
	transition:      background 150ms ease, transform 150ms ease;
}
.erpc-archive__pagination .wp-block-query-pagination-previous:hover,
.erpc-archive__pagination .wp-block-query-pagination-next:hover,
.erpc-archive__pagination .wp-block-query-pagination-previous:focus-visible,
.erpc-archive__pagination .wp-block-query-pagination-next:focus-visible {
	background: var(--blue-700, #172e73);
	transform:  translateY(-1px);
}
.erpc-archive__pagination .wp-block-query-pagination-numbers {
	display:     inline-flex;
	align-items: center;
	gap:         0.25rem;
}
.erpc-archive__pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       2.25rem;
	height:          2.25rem;
	padding:         0 0.5rem;
	border-radius:   999px;
	color: var(--gray-700, #595959);
	text-decoration: none;
	font-weight:     600;
	font-size:       0.875rem;
	transition:      background 150ms ease, color 150ms ease;
}
.erpc-archive__pagination .page-numbers:hover,
.erpc-archive__pagination .page-numbers:focus-visible {
	background: var(--gray-100, #f2f2f2);
}
.erpc-archive__pagination .page-numbers.current {
	background: var(--gray-900, #262626);
	color: var(--text-inverse, #ffffff);
}
.erpc-archive__pagination .page-numbers.current:hover {
	background: var(--blue-500, #0a48a8);
}
.erpc-archive__empty {
	text-align: center;
	color: var(--gray-600, #737373);
	padding:    4rem 0;
	font-size:  1.125rem;
}

/* -- Sections (Option A: stacked editorial layout) -------------------------- */
.erpc-archive__section {
	margin-top: 4rem;
}
.erpc-archive__section-header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	gap:             1rem;
	margin-bottom:   2rem;
	padding-bottom:  1rem;
	border-bottom: 1px solid var(--gray-200, #d9d9d9);
}
/* The "Latest" section uses a bare h2 (no see-all). Match the underline shape. */
.erpc-archive__section > .erpc-archive__section-title:first-child {
	margin:          0 0 2rem;
	padding-bottom:  1rem;
	border-bottom: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-archive__section-title {
	font-size:      1.625rem;
	font-weight:    800;
	line-height:    1.1;
	letter-spacing: -0.01em;
	margin:         0;
	color: var(--gray-900, #262626);
}
.erpc-archive__see-all {
	margin: 0;
}
.erpc-archive__see-all a {
	font-size:       0.875rem;
	font-weight:     600;
	letter-spacing:  0.01em;
	color: var(--blue-500, #0a48a8);
	text-decoration: none;
	transition:      color 150ms ease;
}
.erpc-archive__see-all a:hover,
.erpc-archive__see-all a:focus-visible {
	color: var(--blue-700, #172e73);
}

/* -- Section: Featured (hero card, full-width) ------------------------------ */
.erpc-archive__section--featured {
	margin-top: 3rem;
}
.erpc-feature {
	display:     grid !important;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap:         3rem;
	align-items: center;
	transition:  transform 200ms ease;
}
.erpc-feature:hover {
	transform: translateY(-2px);
}
.erpc-feature__image-frame {
	aspect-ratio:  16 / 9;
	overflow:      hidden;
	border-radius: 0.75rem;
	position:      relative;
	background: linear-gradient(135deg, var(--blue-100, #d0e3ff) 0%, var(--gray-100, #f2f2f2) 100%);
}
.erpc-feature__image-frame .wp-block-post-featured-image {
	position: absolute;
	inset:    0;
	margin:   0;
}
.erpc-feature__image-frame .wp-block-post-featured-image,
.erpc-feature__image-frame .wp-block-post-featured-image a {
	display: block;
	width:   100%;
	height:  100%;
}
.erpc-feature__image-frame img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 500ms ease;
}
.erpc-feature:hover .erpc-feature__image-frame img {
	transform: scale(1.04);
}
.erpc-feature__body {
	display:        flex !important;
	flex-direction: column;
	gap:            1rem;
	padding:        0 0.25rem;
}
.erpc-feature__date {
	font-size:      0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray-600, #737373);
	font-weight:    600;
	margin:         0;
}
.erpc-feature__title {
	font-size:      clamp(1.75rem, 3vw, 2.5rem);
	line-height:    1.15;
	font-weight:    800;
	letter-spacing: -0.015em;
	margin:         0;
}
.erpc-feature__title a {
	color: var(--gray-900, #262626);
	text-decoration: none;
	transition:      color 150ms ease;
}
.erpc-feature__title a:hover,
.erpc-feature__title a:focus-visible {
	color: var(--blue-500, #0a48a8);
}
.erpc-feature__excerpt {
	font-size:   1.0625rem;
	line-height: 1.55;
	color: var(--gray-700, #595959);
	margin:      0;
}
.erpc-feature__excerpt p {
	margin: 0;
}

/* -- 4-column grid variant (for the Latest strip) --------------------------- */
.erpc-archive__grid--4 {
	gap: 2rem !important;
}

/* -- Section: horizontal-scroll strip (Series row) -------------------------- */
/* `grid-auto-columns: 280px` (fixed, NOT minmax(260px, 1fr)) — in a horizontally-
   overflowing grid container `1fr` falls back to per-item content-width since
   there's no "remaining space" to distribute, so cards with longer titles get
   wider columns. Different column widths × aspect-ratio:16/9 image-frames =
   different image heights, breaking the visual alignment of the row. Fixed
   width makes all cards identical regardless of title length. 0.23.5. */
.erpc-archive__section--strip .erpc-archive__strip {
	display:                grid !important;
	grid-auto-flow:         column;
	grid-auto-columns:      280px;
	gap:                    1.5rem;
	overflow-x:             auto;
	scroll-snap-type:       x mandatory;
	padding-bottom:         1rem;
	margin-right:           calc(50% - 50vw); /* let the strip bleed past the container right edge for a "more on scroll" hint */
	margin-left:            0;
	scrollbar-width:        thin;
	scrollbar-color: var(--gray-300, #bfbfbf) transparent;
}
.erpc-archive__section--strip .erpc-archive__strip::-webkit-scrollbar {
	height: 6px;
}
.erpc-archive__section--strip .erpc-archive__strip::-webkit-scrollbar-thumb {
	background: var(--gray-300, #bfbfbf);
	border-radius: 3px;
}
/* Zero out WP's `:root :where(.is-layout-flow) > * { margin-block-start: 1.25em }`
   block-gap rule on strip `<li>`s. The `<ul>` is auto-classed `is-layout-flow` by
   Gutenberg's post-template block; we override its display to grid, but the class
   stays — so WP's flow-gap fires on non-first `<li>`s (pushing them down ~20px)
   while the `.is-layout-grid > * { margin: 0 }` neutralizer does NOT apply.
   Result: card 1 sits at top:0, cards 2-N shift down. Same trap mitigated at
   `.user-products` / `.resource-card` (see comment above line 2205). 0.25.4. */
.erpc-archive__section--strip .erpc-archive__strip > * {
	margin-block-start: 0;
	margin-block-end:   0;
}
.erpc-archive__card--strip {
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.erpc-archive {
		padding: 2rem 1rem 3rem;
	}
	.erpc-archive__hero {
		padding-bottom: 1.75rem;
		margin-bottom:  2.25rem;
	}
	.erpc-archive__grid {
		gap: 2rem !important;
	}
	.erpc-archive__section {
		margin-top: 3rem;
	}
	.erpc-feature {
		grid-template-columns: 1fr;
		gap:                   1.5rem;
	}
	.erpc-archive__grid--4 {
		grid-template-columns: 1fr 1fr !important;
	}
	.erpc-archive__section--strip .erpc-archive__strip {
		grid-auto-columns: 220px;
	}
}

@media (max-width: 600px) {
	.erpc-archive__grid--4,
	.erpc-archive__grid--3 {
		grid-template-columns: 1fr !important;
	}
	.erpc-archive__section-header {
		flex-wrap: wrap;
	}
}

/* =============================================================================
   Article engagement zone — Slice A of
   /home/wiz/.claude/plans/article-engagement-drawer-2026-05-19.md

   Two stacked sections below the article body:
     1. "Products mentioned in this article" — grid of product cards
        rendered by plugin block `wp:erpcommerce/article-related-products`
     2. "More from {Category}" — sibling articles in same category,
        rendered by plugin block `wp:erpcommerce/article-more-from-category`

   Both blocks server-render nothing when there's no data, so the wrapper
   collapses cleanly for thin articles.
   ============================================================================= */
.erpc-article__engagement {
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin:    0 auto;
	padding:   3rem 1.25rem 1rem;
}
.erpc-article__engagement .erpc-products-section {
	margin-top:    3rem;
	padding-top:   2rem;
	border-top: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-article__engagement .erpc-products-section:first-child {
	margin-top:  0;
	padding-top: 0;
	border-top:  0;
}
.erpc-products-section__title {
	font-size:      1.625rem;
	font-weight:    800;
	line-height:    1.1;
	letter-spacing: -0.01em;
	margin:         0 0 1.5rem;
	color: var(--gray-900, #262626);
}

/* -- Products grid + card --------------------------------------------------- */
.erpc-products-grid {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   1.5rem;
}
@media (max-width: 900px) {
	.erpc-products-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.erpc-products-grid {
		grid-template-columns: 1fr;
	}
}

.erpc-products-card {
	display:         flex;
	flex-direction:  column;
	gap:             0.75rem;
	text-decoration: none;
	color:           inherit;
	transition:      transform 200ms ease;
}
.erpc-products-card:hover {
	transform: translateY(-2px);
}
.erpc-products-card__image-frame {
	aspect-ratio:  1 / 1;
	overflow:      hidden;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, var(--blue-100, #d0e3ff) 0%, var(--gray-100, #f2f2f2) 100%);
	position:      relative;
}
.erpc-products-card__image-frame.is-fallback {
	background: var(--blue-500, #0a48a8);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         1.5rem;
}
.erpc-products-card__image-frame.is-fallback .erpc-products-card__fallback-icon {
	max-width:  55%;
	max-height: 55%;
	object-fit: contain;
}
.erpc-products-card__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 400ms ease;
}
.erpc-products-card:hover .erpc-products-card__image {
	transform: scale(1.04);
}
.erpc-products-card__body {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
	padding:        0 0.125rem;
}
.erpc-products-card__brand {
	font-size:      0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray-600, #737373);
	font-weight:    600;
}
.erpc-products-card__title {
	font-size:      1.0625rem;
	line-height:    1.3;
	font-weight:    700;
	margin:         0;
	color: var(--gray-900, #262626);
}
.erpc-products-card:hover .erpc-products-card__title,
.erpc-products-card:focus-visible .erpc-products-card__title {
	color: var(--blue-500, #0a48a8);
}
.erpc-products-card__sku {
	font-family:    ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:      0.75rem;
	color: var(--gray-500, #8c8c8c);
}

/* -- More-from grid (reuses .erpc-archive__card from the homepage) ---------- */
.erpc-more-from-grid {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   2rem;
}
@media (max-width: 900px) {
	.erpc-more-from-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.erpc-more-from-grid {
		grid-template-columns: 1fr;
	}
}
.erpc-more-from-grid .erpc-archive__card {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	text-decoration: none;
	color:          inherit;
}
/* Fallback tile when an article has no featured image. Same shape as the
   home-page fallback (dark favicon on brand-blue) for visual consistency.
   Centering lives on the <a> (not the frame) because the anchor's the
   only direct descendant; flex on the frame would center the anchor's
   inline text-box rather than the image inside it. */
.erpc-more-from-grid .erpc-archive__image-frame.is-fallback {
	background: var(--blue-500, #0a48a8);
}
.erpc-more-from-grid .erpc-archive__image-frame.is-fallback a {
	display:         flex !important;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	box-sizing:      border-box;
	padding:         1.5rem;
	text-decoration: none;
}
.erpc-more-from-grid .erpc-archive__image-frame.is-fallback .erpc-archive__fallback-icon {
	max-width:  38%;
	max-height: 60%;
	object-fit: contain;
}

/* -- Featured-image fallback: logo on brand-blue ---------------------------- */
/* Rendered by erpcommerce_storefront_post_featured_image_fallback() in
   functions.php when a post has no `_thumbnail_id`. Modifier class
   `--fallback` overrides the default `<figure>` styling: solid brand-
   blue background instead of letting the gradient image-frame show
   through, logo centered + scaled to ~55% of the tile width, white-
   inverted via filter so it works regardless of the source logo's
   color profile. */
.erpc-archive__image--fallback,
.erpc-feature__image--fallback {
	background: var(--blue-500, #0a48a8);
}
.erpc-archive__image--fallback a,
.erpc-feature__image--fallback a {
	display:         flex !important;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	box-sizing:      border-box;
	padding:         1.5rem;
	text-decoration: none;
}
.erpc-archive__image--fallback img,
.erpc-feature__image--fallback img {
	width:      auto !important;
	height:     auto !important;
	max-width:  38%;
	max-height: 60%;
	object-fit: contain !important;
	display:    block;
	opacity:    0.92;
	transition: opacity 200ms ease, transform 400ms ease;
}
.erpc-archive__card:hover .erpc-archive__image--fallback img,
.erpc-feature:hover .erpc-feature__image--fallback img {
	opacity:   1;
	transform: scale(1.04);
}

/* =============================================================================
   Product-preview drawer (Slice B of the article-engagement-drawer arc).

   Slides in from the right on click of any product link inside
   `.erpc-article__body` or `.erpc-article__engagement`. Mobile bottom-sheet
   variant ships in Slice C; v1 keeps the right-side desktop layout for all
   viewports, which works down to ~600px before getting cramped.

   DOM:
     .erpc-pd-drawer            (root, position:fixed inset:0)
       .erpc-pd-drawer__overlay (dark scrim, dismiss surface)
       .erpc-pd-drawer__panel   (the white panel that slides in)
         .erpc-pd-drawer__header  (close button)
         .erpc-pd-drawer__body    (product content, fetch target)
   ============================================================================= */
.erpc-pd-drawer {
	position:       fixed;
	inset:          0;
	z-index:        1100;  /* above chrome (1000) + sticky rails */
	pointer-events: none;
}
.erpc-pd-drawer.is-open {
	pointer-events: auto;
}
.erpc-pd-drawer[hidden] {
	display: none;
}

.erpc-pd-drawer__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(10, 20, 40, 0.55);
	opacity:    0;
	transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.erpc-pd-drawer.is-open .erpc-pd-drawer__overlay {
	opacity: 1;
}

.erpc-pd-drawer__panel {
	position:        absolute;
	top:             0;
	right:           0;
	bottom:          0;
	width:           min(480px, 92vw);
	background: var(--surface-base, #ffffff);
	box-shadow:      -8px 0 32px rgba(0, 0, 0, 0.18);
	transform:       translateX(100%);
	transition:      transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
	display:         flex;
	flex-direction:  column;
	overflow:        hidden;
}
.erpc-pd-drawer.is-open .erpc-pd-drawer__panel {
	transform: translateX(0);
}
.admin-bar .erpc-pd-drawer__panel {
	top: 32px;  /* clear the WP admin bar */
}
/* Mobile (768–782px): admin bar is absolute (scrolls away) — anchor at 0,
   not 46px. Below 768px the panel is already a bottom-sheet (`top: auto`). 0.42.1. */
@media (max-width: 782px) {
	.admin-bar .erpc-pd-drawer__panel {
		top: 0;
	}
}

.erpc-pd-drawer__header {
	display:         flex;
	justify-content: flex-end;
	padding:         0.75rem;
	border-bottom: 1px solid var(--gray-100, #f2f2f2);
}
.erpc-pd-drawer__close {
	background:      transparent;
	border:          0;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	color: var(--gray-700, #595959);
	transition:      background 150ms ease, color 150ms ease;
}
.erpc-pd-drawer__close:hover,
.erpc-pd-drawer__close:focus-visible {
	background: var(--gray-100, #f2f2f2);
	color: var(--gray-900, #262626);
}
/* Focus-visible rings on every interactive element use the storefront's
   canonical `--outline-color` token (brand-blue), matching every other
   button across the chrome, cart, lists, and PDP. 0.23.3. */
.erpc-pd-drawer__close:focus-visible,
.erpc-pd-drawer__add:focus-visible,
.erpc-pd-drawer__login-cta:focus-visible,
.erpc-pd-drawer__view-pdp:focus-visible,
.erpc-pd-drawer__brand a:focus-visible {
	outline: 2px solid var(--outline-color, var(--blue-500, #0a48a8));
	outline-offset: 2px;
}
.erpc-pd-drawer__qty input:focus-visible {
	outline: 2px solid var(--outline-color, var(--blue-500, #0a48a8));
	outline-offset: 2px;
	border-color: var(--outline-color, var(--blue-500, #0a48a8));
}

.erpc-pd-drawer__body {
	flex:       1;
	overflow-y: auto;
	padding:    1.25rem 1.5rem 2rem;
	-webkit-overflow-scrolling: touch;
}

/* --- Skeleton + error -------------------------------------------------- */
.erpc-pd-drawer__skeleton {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}
.erpc-pd-drawer__skeleton-image {
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--blue-100, #d0e3ff) 0%, var(--gray-100, #f2f2f2) 100%);
	border-radius: 0.5rem;
}
.erpc-pd-drawer__skeleton-line {
	height:        14px;
	background: var(--gray-100, #f2f2f2);
	border-radius: 4px;
}
.erpc-pd-drawer__skeleton-line--short { width: 40%; }
.erpc-pd-drawer__error {
	color: var(--red-500, #970100);
	padding:    1rem 0;
	font-size:  0.9375rem;
}

/* --- Product content --------------------------------------------------- */
.erpc-pd-drawer__image {
	aspect-ratio:  1 / 1;
	border-radius: 0.5rem;
	overflow:      hidden;
	margin-bottom: 1.25rem;
	background: var(--gray-100, #f2f2f2);
}
.erpc-pd-drawer__image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}
.erpc-pd-drawer__image-fallback {
	width:      100%;
	height:     100%;
	background: linear-gradient(135deg, var(--blue-100, #d0e3ff) 0%, var(--gray-100, #f2f2f2) 100%);
}

.erpc-pd-drawer__brand {
	font-size:      0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray-600, #737373);
	font-weight:    600;
	margin-bottom:  0.5rem;
}
.erpc-pd-drawer__brand a {
	color:           inherit;
	text-decoration: none;
}
.erpc-pd-drawer__brand a:hover {
	color: var(--blue-500, #0a48a8);
}
.erpc-pd-drawer__sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:   0.6875rem;
	color: var(--gray-500, #8c8c8c);
}
.erpc-pd-drawer__title {
	font-size:      1.375rem;
	font-weight:    700;
	line-height:    1.25;
	margin:         0 0 1rem;
	color: var(--gray-900, #262626);
	letter-spacing: -0.01em;
}

/* --- CTA / price / buy form -------------------------------------------- */
.erpc-pd-drawer__cta {
	display:        flex;
	flex-direction: column;
	gap:            0.875rem;
	padding:        1rem 0;
	margin-bottom:  1rem;
	border-top: 1px solid var(--gray-100, #f2f2f2);
	border-bottom: 1px solid var(--gray-100, #f2f2f2);
}
.erpc-pd-drawer__cta--restricted p {
	margin: 0;
	color: var(--gray-700, #595959);
	font-size: 0.9375rem;
}
.erpc-pd-drawer__price {
	display:     flex;
	align-items: baseline;
	gap:         0.5rem;
	min-height:  2rem;
}
.erpc-pd-drawer__price-unit {
	font-size:   1.5rem;
	font-weight: 700;
	color: var(--gray-900, #262626);
}
.erpc-pd-drawer__price-list {
	font-size:        0.9375rem;
	color: var(--gray-500, #8c8c8c);
	text-decoration:  line-through;
}
.erpc-pd-drawer__price-unavail {
	font-size: 0.9375rem;
	color: var(--gray-500, #8c8c8c);
}
.erpc-pd-drawer__price-skeleton {
	display:       inline-block;
	width:         100px;
	height:        20px;
	background: var(--gray-100, #f2f2f2);
	border-radius: 4px;
}
.erpc-pd-drawer__buy {
	display:     flex !important;
	gap:         0.5rem;
	align-items: center;  /* both children are now 44px tall — perfect alignment */
	width:       100%;
}
.erpc-pd-drawer__qty {
	flex:           0 0 80px;  /* fixed width, doesn't shrink */
}
/* Visually-hidden but screen-reader accessible. Removed the stacked label
   so the qty input + Add-to-cart button both occupy single-row 44px height
   and align cleanly — previously the label pushed qty's top 20px above the
   button's, creating an asymmetric "T" shape. 0.23.4. */
.erpc-pd-drawer__qty-label {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}
.erpc-pd-drawer__qty input {
	width:         100%;
	height:        44px;
	padding:       0 0.5rem;
	border: 1px solid var(--gray-200, #d9d9d9);
	border-radius: 6px;
	font-size:     1rem;
	text-align:    center;
	box-sizing:    border-box;
}
.erpc-pd-drawer__add {
	flex:           1 1 0;
	min-width:      0;             /* lets flex:1 actually claim space inside narrow parents */
	height:         44px;
	padding:        0 0.75rem;
	background: var(--btn-primary-bg, var(--blue-500, #0a48a8));
	color: var(--text-inverse, #ffffff);
	border:         0;
	border-radius:  6px;
	font-size:      0.9375rem;
	font-weight:    600;
	cursor:         pointer;
	white-space:    nowrap;        /* never wrap "Add to cart" mid-button */
	transition:     background 150ms ease, transform 100ms ease;
}
.erpc-pd-drawer__add:hover:not([disabled]),
.erpc-pd-drawer__add:focus-visible:not([disabled]) {
	background: var(--blue-700, #172e73);
}
.erpc-pd-drawer__add:active:not([disabled]) {
	transform: translateY(1px);
}
.erpc-pd-drawer__add[disabled] {
	opacity: 0.6;
	cursor:  default;
}
.erpc-pd-drawer__login-cta {
	display:         inline-block;
	padding:         0.625rem 1rem;
	background: var(--btn-primary-bg, var(--blue-500, #0a48a8));
	color: var(--text-inverse, #ffffff);
	border-radius:   6px;
	font-weight:     600;
	font-size:       0.9375rem;
	text-decoration: none;
	text-align:      center;
}
.erpc-pd-drawer__login-cta:hover,
.erpc-pd-drawer__login-cta:focus-visible {
	background: var(--blue-700, #172e73);
}

/* --- Description + view-PDP -------------------------------------------- */
.erpc-pd-drawer__desc {
	font-size:   0.9375rem;
	line-height: 1.6;
	color: var(--gray-700, #595959);
	margin-bottom: 1.25rem;
}
.erpc-pd-drawer__view-pdp {
	display:         inline-block;
	font-size:       0.875rem;
	font-weight:     600;
	color: var(--blue-500, #0a48a8);
	text-decoration: none;
}
.erpc-pd-drawer__view-pdp:hover,
.erpc-pd-drawer__view-pdp:focus-visible {
	text-decoration: underline;
}

/* Lock body scroll while drawer is open so the article doesn't scroll
   behind the panel on overscroll-bounce. */
body.erpc-pd-drawer-open {
	overflow: hidden;
}

/* Visually-hidden announce region. Live-text injected here is read by
   screen readers; the visible drawer body has its own aria-live for
   skeleton → content transitions. 0.24.0. */
.erpc-pd-drawer__announce {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

/* Drag handle only paints on the mobile bottom-sheet (gated below). */
.erpc-pd-drawer__drag-handle {
	display: none;
}

/* -- Mobile bottom-sheet variant (Slice C) ---------------------------------
   Under 768px the drawer slides up from the bottom instead of in from the
   right. Full-width, ~85vh tall, drag-handle visible at the top, swipe-down
   to dismiss (JS handlers in storefront-product-drawer.js).
   0.24.0. */
@media (max-width: 768px) {
	.erpc-pd-drawer__panel {
		top:           auto !important;
		bottom:        0;
		right:         0;
		left:          0;
		width:         100%;
		max-width:     none;
		height:        85vh;
		max-height:    85vh;
		transform:     translateY( 100% );
		border-radius: 16px 16px 0 0;
		box-shadow:    0 -8px 32px rgba( 0, 0, 0, 0.18 );
	}
	.erpc-pd-drawer.is-open .erpc-pd-drawer__panel {
		transform: translateY( 0 );
	}
	/* Admin bar offset doesn't apply on a bottom-sheet — the sheet starts at
	   the bottom edge regardless. Reset the desktop admin-bar `top` rule. */
	.admin-bar .erpc-pd-drawer__panel {
		top: auto !important;
	}
	.erpc-pd-drawer__drag-handle {
		display:       block;
		width:         40px;
		height:        4px;
		margin:        0.5rem auto;
		border-radius: 2px;
		background: var(--gray-300, #bfbfbf);
		flex:          0 0 auto;
	}
	.erpc-pd-drawer__header {
		padding: 0.25rem 0.75rem 0.5rem;
	}
	.erpc-pd-drawer__body {
		padding: 1rem 1.25rem 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erpc-pd-drawer__overlay,
	.erpc-pd-drawer__panel {
		transition: none;
	}
}

/* -- Pre-footer newsletter banner ------------------------------------------- */
/* The plugin's newsletter-banner block emits `<section class="signup-section
   alignfull">`. As a sibling of <main>, this should:
     1. Span the full viewport (already does via alignfull on body-level
        children of `.wp-site-blocks`, but force it for safety).
     2. Sit flush above the footer with no gap.
     3. Have no top margin so the gap above it is owned by <main>'s padding-
        bottom, not stacked. */
.wp-site-blocks > .signup-section,
body > .signup-section,
.signup-section {
	margin-top:    0 !important;
	margin-bottom: 0 !important;
}
/* Block themes wrap immediate children of `.wp-site-blocks` in a gap. The
   theme already zeroes `wp-block-template-part` siblings; the signup-section
   needs the same treatment so it kisses the footer template-part below. */
.wp-site-blocks > .signup-section + .wp-block-template-part,
.wp-site-blocks > .wp-block-template-part + .signup-section {
	margin-top: 0 !important;
}
/* Override `is-layout-flow` block-gap propagation if it wraps the banner. */
.wp-site-blocks > .signup-section {
	width:      100vw;
	max-width:  100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* =============================================================================
   Article templates — layered foundation for full-bleed editorial layouts.

   Layered model (see CHANGELOG 0.9.0 for the full rationale):

     Layer 1 — Foundation .erpc-article + .erpc-article__body + .erpc-article__rail
                Grid container, sticky behavior, responsive collapse, print rules.
                Templates configure shape via CSS variables; they don't rewrite CSS.

     Layer 2 — Rail variants .erpc-article__rail--{toc,related,cta-form,…}
                Each variant is its own visual treatment (rail typography,
                bordered card for CTA, etc). Mix-and-match per template.

     Layer 3 — Template modifiers .erpc-article--{longform,cta,…}
                Just override the three CSS variables (cols / gap / max) to
                set the page shape. No other styles per variant.

   `--erpcs-header-h` is measured at runtime by storefront-article.js from
   .top-nav clientHeight and set on :root. Fallback 80px covers first paint
   before the script runs.

   @since 0.9.0 (rewrite of 0.8.0/0.8.1 article-pattern attempt)
============================================================================= */

/* -- Layer 1: Foundation --------------------------------------------------- */
.erpc-article {
	--erpc-article-cols: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr);
	--erpc-article-gap:  48px;
	--erpc-article-max:  1440px;

	display: grid;
	grid-template-columns: var(--erpc-article-cols);
	column-gap: var(--erpc-article-gap);
	max-width:  var(--erpc-article-max);
	margin-inline: auto;
	padding-inline: 24px;
	padding-block:  2rem;
	align-items:    start;
}

/* WP's flow-layout default applies `margin-block-start: var(--wp--style--block-gap)`
   to every child of a `.is-layout-flow` group and then zeros it on `:first-child` —
   which leaves the TOC rail (last child) and body (middle child) sitting one block-gap
   below the Related rail (first child). Zero block margins on all grid items so column
   gap is the only vertical control and all three columns start at the same Y. */
.erpc-article > * {
	margin-block: 0;
}

.erpc-article__body {
	min-width: 0;
}

/* Post title + date — port of the .erpc-single__title / __date rules from the
   default Single Posts template so the title doesn't fall through to WP's
   default H1 sizing (which is much larger). Lives at the body-element layer
   so each article shape inherits identical title typography. */
.erpc-article__title {
	font-size:   2rem !important;
	line-height: 1.2;
	margin:      0 0 1rem !important;
}

.erpc-article__date {
	color: var(--gray-700, #595959);
	font-size:     0.9rem;
	margin-bottom: 1.5rem !important;
}

/* Featured hero image at the top of each article body. Constrained to the
   body's content measure (720px by default) so it lines up with the prose
   below it. 16:9 aspect ratio matches the homepage + engagement cards.
   The brand-blue fallback (rendered by erpcommerce_storefront_post_
   featured_image_fallback in functions.php when a post has no thumbnail)
   inherits the rounded corners + aspect via the same selector chain. */
.erpc-article__featured-image {
	margin:        0 0 2rem !important;
	border-radius: 0.75rem;
	overflow:      hidden;
	width:         100%;
	max-width:     720px;
}
.erpc-article__featured-image img {
	width:        100%;
	height:       100%;
	object-fit:   cover;
	display:      block;
}
/* Fallback variant — emitted by the render_block filter as
   `.erpc-article__featured-image--fallback`. Brand-blue background with
   the dark-mode favicon centered. Two markup shapes depending on the
   block's isLink attr: img inside <a> (cards, isLink:true) OR img direct
   (article body featured image, isLink:false). Both branches center via
   the figure as a flex container so the SAME wrapper rule handles both. */
.erpc-article__featured-image--fallback {
	background: var(--blue-500, #0a48a8);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         2rem;
	box-sizing:      border-box;
}
.erpc-article__featured-image--fallback a {
	display:         flex !important;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	text-decoration: none;
}
.erpc-article__featured-image--fallback img {
	width:      auto !important;
	height:     auto !important;
	max-width:  35%;
	max-height: 65%;
	object-fit: contain !important;
}

.erpc-article__body > * {
	scroll-margin-top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 24px);
}

/* Sticky rails track the same cascade as the reading-progress bar:
   chrome-height + 24px when chrome is visible; just 24px when chrome
   has auto-hidden. Add WP admin bar offset (32px / 46px) on top of
   whichever position is active. Without this dual-state, the rails sit
   permanently at chrome-height — which leaves a 104px gap above them
   when chrome is hidden and causes a brief overlap when chrome scrolls
   back in. 0.21.1.

   `--erpc-sticky-notice-h` (0.41.0): the plugin's sticky notices (ERP
   outage banner et al.) push the header down by their height, but
   `--erpcs-header-h` measures only `.top-nav` — without this term the
   rails pinned a banner-height too high and slid under the header.
   0px when no banner is up. Present in EVERY state including
   chrome-hidden: the banner does not auto-hide with the chrome.
   LOCKSTEP with the plugin's `.erpc-account-hub__rail` copy of this
   recipe (storefront.css, 4.290.0/4.296.0). */
.erpc-article__rail {
	position: sticky;
	top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 24px);
	align-self: start;
	max-height: calc(100vh - var(--erpcs-header-h, 80px) - var(--erpc-sticky-notice-h, 0px) - 48px);
	overflow-y: auto;
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: top 0.25s ease-in-out,
	            max-height 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.admin-bar .erpc-article__rail {
	top:        calc(32px + var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 24px);
	max-height: calc(100vh - 32px - var(--erpcs-header-h, 80px) - var(--erpc-sticky-notice-h, 0px) - 48px);
}
/* Mobile: admin bar is absolute (scrolls away), so don't reserve its 46px —
   match the no-admin-bar baseline. 0.42.1. */
@media (max-width: 782px) {
	.admin-bar .erpc-article__rail {
		top:        calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 24px);
		max-height: calc(100vh - var(--erpcs-header-h, 80px) - var(--erpc-sticky-notice-h, 0px) - 48px);
	}
}
body.erpc-chrome-hidden .erpc-article__rail {
	top:        calc(var(--erpc-sticky-notice-h, 0px) + 24px);
	max-height: calc(100vh - var(--erpc-sticky-notice-h, 0px) - 48px);
}
.admin-bar.erpc-chrome-hidden .erpc-article__rail {
	top:        calc(32px + var(--erpc-sticky-notice-h, 0px) + 24px);
	max-height: calc(100vh - 32px - var(--erpc-sticky-notice-h, 0px) - 48px);
}
/* Mobile + chrome-hidden: same — no admin-bar offset (absolute, scrolls away). 0.42.1. */
@media (max-width: 782px) {
	.admin-bar.erpc-chrome-hidden .erpc-article__rail {
		top:        calc(var(--erpc-sticky-notice-h, 0px) + 24px);
		max-height: calc(100vh - var(--erpc-sticky-notice-h, 0px) - 48px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.erpc-article__rail {
		transition: none;
	}
}

.erpc-article__rail-heading {
	font-size: 0.75rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted, #737373);
	margin: 0 0 0.75rem 0 !important;
}

/* Generic list reset for rail content (Related links, TOC). Rail patterns
   render either a UL (Related) or a JS-built OL (TOC); both go flat. */
.erpc-article__rail ul,
.erpc-article__rail ol,
.erpc-article__toc-nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.erpc-article__rail li,
.erpc-article__toc-nav li {
	margin: 0;
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-article__rail li:last-child,
.erpc-article__toc-nav li:last-child {
	border-bottom: 0;
}

.erpc-article__rail a,
.erpc-article__toc-nav a {
	color: inherit;
	text-decoration: none;
	display: block;
}

.erpc-article__rail a:hover,
.erpc-article__toc-nav a:hover {
	color: var(--wp--preset--color--brand-primary, #0a48a8);
}

.erpc-article__toc-nav a[aria-current="true"] {
	color: var(--wp--preset--color--brand-primary, #0a48a8);
	font-weight: 600;
}

/* -- Layer 2: Rail variant — CTA form card --------------------------------- */
.erpc-article__rail--cta-form {
	background: var(--surface-base, #ffffff);
	border: 1px solid var(--wp--preset--color--gray-300, #bfbfbf);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	overflow-y: visible; /* card chrome owns its own scroll surface if any */
}

.erpc-article__rail--cta-form .erpc-article__rail-heading {
	font-size: 1rem !important;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	font-weight: 700;
	margin-bottom: 1rem !important;
}

/* -- Layer 3: Template modifiers (page-shape only) ------------------------- */
.erpc-article--longform {
	/* Default vars on .erpc-article already match the long-form shape. The
	   modifier exists so the JS / DOM can pick the variant explicitly and
	   future-proofs adding shape overrides without rewriting selectors. */
}

.erpc-article--cta {
	--erpc-article-cols: minmax(0, 720px) minmax(0, 380px);
	--erpc-article-gap:  64px;
	--erpc-article-max:  1200px;
}

/* Help article (0.58.0) — 2-column: body + sticky TOC rail (no Related rail).
   Body leads at the left so the prose aligns with the page heading; the TOC
   sits right. Collapses to one column under the shared 1100px breakpoint. */
.erpc-article--help {
	--erpc-article-cols: minmax(0, 720px) minmax(0, 320px);
	--erpc-article-gap:  64px;
	--erpc-article-max:  1180px;
}

/* -- Reading progress bar -------------------------------------------------- */
/* Thin brand-blue bar pinned to the top of the viewport. Width is driven by
   storefront-article.js based on the reader's scroll position through
   .erpc-article__body. Always visible (independent of the auto-hide chrome).
   Position cascades:
     - Chrome visible (default): sits flush below the chrome (and the WP admin
       bar if present), so it never sits BEHIND the chrome.
     - Chrome hidden (`body.erpc-chrome-hidden`, toggled by storefront-chrome.js
       when the auto-hide nav slides up): sits at the viewport top (or below
       admin bar). 0.21.1. */
/* Position: fixed at the viewport top (under the admin bar). The bar SITS
   below the chrome via `transform: translateY(header-h)`. When chrome auto-
   hides, body picks up `erpc-chrome-hidden` and we drop the translate to 0.
   By animating `transform` (same property the chrome uses) AND matching its
   `0.25s ease-in-out` exactly, both elements move in perfect lockstep — no
   gap flicker during the transition. 0.23.2. */
.erpc-reading-progress {
	position:       fixed;
	top:            0;
	left:           0;
	right:          0;
	height:         3px;
	z-index:        1000;
	pointer-events: none;
	background:     transparent;
	/* Notice height rides BOTH states (visible + chrome-hidden below): the
	   sticky banner pushes the header down and stays up when the chrome
	   auto-hides, so the bar always clears it. 0px when no banner. 0.41.0. */
	transform:      translateY( calc( var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) ) );
	transition:     transform 0.25s ease-in-out;
}

/* WP admin bar offsets the fixed `top:0` anchor by the admin bar's height. */
.admin-bar .erpc-reading-progress {
	top: 32px;
}
/* Mobile: admin bar is absolute (scrolls away) — anchor at 0, not 46px. 0.42.1. */
@media (max-width: 782px) {
	.admin-bar .erpc-reading-progress {
		top: 0;
	}
}

/* Chrome hidden: translate drops to 0, so the bar sits flush at top:0 (or
   admin-bar-bottom). Chrome's own transform animates by -100% over the
   same duration with the same easing — both elements travel exactly
   `header-h` pixels in 250ms, no gap flicker. */
body.erpc-chrome-hidden .erpc-reading-progress {
	transform: translateY( var(--erpc-sticky-notice-h, 0px) );
}

@media (prefers-reduced-motion: reduce) {
	.erpc-reading-progress {
		transition: none;
	}
}

.erpc-reading-progress__bar {
	height: 100%;
	width: 0;
	background: var(--blue-500, #0a48a8);
}

@media (prefers-reduced-motion: no-preference) {
	.erpc-reading-progress__bar {
		transition: width 0.1s linear;
	}
}

/* -- Responsive collapse ---------------------------------------------------- */
@media (max-width: 1100px) {
	.erpc-article {
		grid-template-columns: 1fr;
		max-width: 720px;
		column-gap: 0;
		row-gap: 2rem;
	}
	.erpc-article__rail {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
	/* TOC moves above the body; Related (and CTA form) move below. Order is
	   set per rail variant so multiple rails collapse predictably. */
	.erpc-article__rail--toc      { order: -1; }
	.erpc-article__rail--related  { order:  1; }
	.erpc-article__rail--cta-form { order:  1; }
}

/* -- Print ----------------------------------------------------------------- */
@media print {
	.erpc-article__rail,
	.erpc-reading-progress {
		display: none;
	}
	.erpc-article {
		display: block;
		max-width: none;
	}
}

/* =============================================================================
   Mobile drawer (parts/mobile-drawer.html)

   Slide-in left-edge panel triggered by the mobile-actions bar's "Open
   menu" button (data-erpc-action="open-menu"; JS in storefront-chrome.js).
   85vw width capped at 400px gives users a visible page edge to tap-to-
   close; full-screen takeover would feel heavy at this list density.

   `aria-hidden="false"` toggles the slide-in transform; delayed visibility
   transition keeps focus reachable while open then drops out of the tab
   order on close — same pattern as the megamenu (line 909 above).

   Anonymous / logged-in branching is body-class driven (WP exposes
   `body.logged-in` for any logged-in user) so the template part can
   stay CSS-only without PHP conditionals.

   Hidden entirely at the desktop chrome breakpoint (1000px+) — desktop
   surfaces these items via the primary nav and cart-login-group rows.
   ============================================================================= */

.erpc-mobile-drawer {
	position:         fixed;
	top:              0;
	left:             0;
	width:            85vw;
	max-width:        400px;
	height:           100dvh;
	background: var(--surface-base, #ffffff);
	box-shadow:       4px 0 20px rgba( 0, 0, 0, 0.25 );
	z-index:          2000;
	display:          flex;
	flex-direction:   column;
	overflow:         hidden;
	transform:        translateX( -100% );
	visibility:       hidden;
	transition:
		transform  240ms ease,
		visibility 0s linear 240ms;
}

.erpc-mobile-drawer[aria-hidden="false"] {
	transform:  translateX( 0 );
	visibility: visible;
	transition:
		transform  240ms ease,
		visibility 0s linear 0s;
}

/* Admin-bar offset — for logged-in users the WP admin bar (z-index 99999)
   overlaps the top of the drawer (its close button + first items). Slide
   the drawer beneath it and trim its height to match. The bar is 32px tall
   above 782px and 46px at/below 782px (WP's own breakpoint). We offset at
   ALL widths the bar shows — including ≤600px where WP makes it
   `position: absolute`: offsetting there keeps the close button visible at
   page-top (the cost is a thin dimmed band above the drawer once the page
   is scrolled and the absolute bar has scrolled off — acceptable, and only
   logged-in admins ever see the bar at all). 0.68.0. */
.admin-bar .erpc-mobile-drawer {
	top:    32px;
	height: calc( 100dvh - 32px );
}
@media screen and (max-width: 782px) {
	.admin-bar .erpc-mobile-drawer {
		top:    46px;
		height: calc( 100dvh - 46px );
	}
}

.erpc-mobile-drawer__overlay {
	position:         fixed;
	inset:            0;
	background-color: rgba( 0, 0, 0, 0.5 );
	z-index:          1999;
	opacity:          0;
	pointer-events:   none;
	transition:       opacity 240ms ease;
}

.erpc-mobile-drawer__overlay[aria-hidden="false"] {
	opacity:        1;
	pointer-events: auto;
}

.erpc-mobile-drawer__header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	padding:          1rem 1rem 0.75rem;
	border-bottom: 1px solid var(--border-default, #e5e7eb);
	background: var(--surface-subtle, #fafafa);
}

.erpc-mobile-drawer__title {
	font-size:    1.125rem;
	font-weight:  600;
	margin:       0;
	color: var(--text-primary, #111);
}

.erpc-mobile-drawer__close {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	min-width:        44px;
	min-height:       44px;
	padding:          0;
	background:       transparent;
	border:           0;
	color: var(--gray-800, #404040);
	cursor:           pointer;
	border-radius:    4px;
}

.erpc-mobile-drawer__close:hover,
.erpc-mobile-drawer__close:focus-visible {
	background: var(--surface-sunken, #f2f2f2);
	outline:    none;
}

.erpc-mobile-drawer__body {
	flex:        1;
	overflow-y:  auto;
	padding:     0.5rem 0;
	/* iOS momentum scrolling */
	-webkit-overflow-scrolling: touch;
}

.erpc-mobile-drawer__section {
	padding:        0.75rem 0;
	border-bottom: 1px solid var(--border-default, #e5e7eb);
}

.erpc-mobile-drawer__section:last-child {
	border-bottom: 0;
}

.erpc-mobile-drawer__section-title {
	font-size:        0.75rem;
	font-weight:      700;
	text-transform:   uppercase;
	letter-spacing:   0.05em;
	color: var(--text-muted, #737373);
	margin:           0 0 0.25rem;
	padding:          0 1rem;
}

.erpc-mobile-drawer__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.erpc-mobile-drawer__link,
.erpc-mobile-drawer__list a {
	display:          flex;
	align-items:      center;
	min-height:       48px;
	padding:          0.5rem 1rem;
	color: var(--text-primary, #111);
	font-size:        1rem;
	text-decoration:  none;
	width:            100%;
	background:       transparent;
	border:           0;
	cursor:           pointer;
	text-align:       left;
}

.erpc-mobile-drawer__link:hover,
.erpc-mobile-drawer__link:focus-visible,
.erpc-mobile-drawer__list a:hover,
.erpc-mobile-drawer__list a:focus-visible {
	background: var(--surface-sunken, #f2f2f2);
	outline:    none;
}

/* CTA stack for the anonymous-only sign-in/up surfaces. Stacked
   full-width buttons; primary uses the storefront's blue, secondary
   is the bordered fallback. */
.erpc-mobile-drawer__cta-stack {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	padding:        0.5rem 1rem;
}

.erpc-mobile-drawer__cta {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	min-height:       48px;
	padding:          0.75rem 1rem;
	font-size:        1rem;
	font-weight:      600;
	text-decoration:  none;
	border-radius:    4px;
}

.erpc-mobile-drawer__cta--primary {
	background: var( --btn-primary-bg, #0a48a8 );
	color: var(--text-inverse, #ffffff);
}

.erpc-mobile-drawer__cta--secondary {
	background: transparent;
	color: var( --btn-primary-bg, #0a48a8 );
	border: 1px solid var( --btn-primary-bg, #0a48a8 );
}

/* Sign-out shortcode emits <li class="erpc-auth-signout"><form>...
   <button class="erpc-auth-signout__button">. Re-skin to match the
   drawer's link rhythm so it doesn't read as a tacked-on form. */
.erpc-mobile-drawer__list--signout .erpc-auth-signout {
	list-style: none;
}

.erpc-mobile-drawer__list--signout .erpc-auth-signout__form {
	margin: 0;
}

.erpc-mobile-drawer__list--signout .erpc-auth-signout__button {
	display:          flex;
	align-items:      center;
	min-height:       48px;
	width:            100%;
	padding:          0.5rem 1rem;
	font-size:        1rem;
	color: var(--red-500, #970100);
	background:       transparent;
	border:           0;
	cursor:           pointer;
	text-align:       left;
}

.erpc-mobile-drawer__list--signout .erpc-auth-signout__button:hover,
.erpc-mobile-drawer__list--signout .erpc-auth-signout__button:focus-visible {
	background: var(--surface-sunken, #f2f2f2);
	outline:    none;
}

/* [erpc_menu mode="column"] emits a flat <a> stack (same as footer
   columns). Constrain the per-link rhythm to drawer density. */
.erpc-mobile-drawer__menu a {
	display:          flex;
	align-items:      center;
	min-height:       48px;
	padding:          0.5rem 1rem;
	color: var(--text-primary, #111);
	font-size:        1rem;
	text-decoration:  none;
}

.erpc-mobile-drawer__menu a:hover,
.erpc-mobile-drawer__menu a:focus-visible {
	background: var(--surface-sunken, #f2f2f2);
	outline:    none;
}

/* Auth-state visibility — WP body.logged-in is set for any logged-in
   user, so default-hide the appropriate sections and reveal per state. */
.erpc-mobile-drawer__logged-in-only          { display: none; }
.erpc-mobile-drawer__anonymous-only          { display: block; }
body.logged-in .erpc-mobile-drawer__logged-in-only  { display: block; }
body.logged-in .erpc-mobile-drawer__anonymous-only  { display: none; }

/* Account Sign-Up mode = no — hide the hardcoded Sign Up CTA in the
   mobile drawer. Plugin emits `body.erpc-signup-disabled` via a
   `body_class` filter (erp-commerce 4.158.11) so this CSS-only hide
   path works for static template parts that can't run PHP conditionals.
   Sign In stays — existing buyers still need to log in regardless. */
body.erpc-signup-disabled .erpc-mobile-drawer__cta--secondary { display: none; }

/* Hide the drawer entirely on desktop — the chrome's primary nav +
   cart-login-group rows expose the same items inline. */
@media (min-width: 1000px) {
	.erpc-mobile-drawer,
	.erpc-mobile-drawer__overlay {
		display: none;
	}
}

/* Body scroll-lock when the drawer is open. Class is toggled by
   storefront-chrome.js so the page underneath doesn't scroll while the
   user interacts with the drawer. */
body.erpc-drawer-open {
	overflow: hidden;
}

/* Prefers-reduced-motion — skip the slide animation, just toggle the
   transform instantly. Drawer still uses transform for off-screen
   positioning (vs display:none) so focus management works. */
@media (prefers-reduced-motion: reduce) {
	.erpc-mobile-drawer,
	.erpc-mobile-drawer__overlay {
		transition: none;
	}
}

/* ──────────────────────────────────────────────────────────
   Marketing patterns — 0.26.0 (CSS + breakout, 0.26.1)
   Composable full-width page sections for About / Promotions
   / Landing pages. Pattern markup lives in patterns/marketing-*.php
   and only carries .erpc-pattern-* hooks; all layout / spacing
   / type-scale decisions live here so the patterns stay declarative
   and the look stays consistent across page types.
   ────────────────────────────────────────────────────────── */

/* Full-bleed breakout — page.html wraps post-content in
   <main class="erpc-page"> with max-width: 1340px + auto-margins,
   which traps `alignfull` children visually at 1340px wide. Standard
   negative-margin trick teleports any alignfull descendant to viewport
   width regardless of the constrained parent.

   Descendant (not child) combinator because wp:post-content emits its
   own wrapper (<div class="entry-content wp-block-post-content">)
   between .erpc-page and the actual block — direct-child `>` misses
   that. Affects ALL alignfull inside .erpc-page, not just marketing
   patterns — anywhere edge-to-edge was the intent now actually paints
   edge-to-edge. Added 0.26.1 after 0.26.0 patterns shipped clamped;
   refined to descendant combinator 0.26.2 after 0.26.1 still trapped
   them (selector matched .entry-content, not the pattern inside). */
.erpc-page .alignfull {
	position:     relative;
	width:        100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width:    none;
}

/* Hero band — full-bleed top section. Vertical padding scales with
   viewport so the band breathes on widescreen and doesn't dominate on
   mobile. Constrained inner contentSize (900px) is set in the pattern. */
.erpc-pattern-hero {
	padding-block: clamp(3rem, 8vw, 6rem);
	padding-inline: var(--wp--preset--spacing--base);
}
.erpc-pattern-hero > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* Two-col image+text — moderate vertical padding (sections compose
   stacked, so padding-block doubles between siblings). Image gets a
   rounded corner to feel like a card rather than a raw photo. */
.erpc-pattern-twocol {
	padding-block: clamp(2rem, 6vw, 4rem);
	padding-inline: var(--wp--preset--spacing--base);
}
.erpc-pattern-twocol .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.erpc-pattern-twocol__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-block-end: var(--wp--preset--spacing--2-xs);
}

/* Feature trio — section heading + 3-up grid. Center-aligned content
   throughout; icon paragraph gets oversized type so emoji / svg renders
   feel like icons, not body text. */
.erpc-pattern-feature-trio {
	padding-block: clamp(2rem, 6vw, 4rem);
	padding-inline: var(--wp--preset--spacing--base);
	text-align: center;
}
.erpc-pattern-feature-trio > .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--lg);
}
.erpc-pattern-feature-trio__icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-block-end: var(--wp--preset--spacing--xs) !important;
}

/* Stat strip — full-bleed brand band. Numbers are the loudest thing
   on the page; labels sit underneath at body size with slight opacity
   so the eye reads number-first. */
.erpc-pattern-stat-strip {
	padding-block: clamp(2rem, 5vw, 3rem);
	padding-inline: var(--wp--preset--spacing--base);
}
.erpc-pattern-stat-strip__number {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	margin-block-end: var(--wp--preset--spacing--2-xs) !important;
}
.erpc-pattern-stat-strip__label {
	font-size: 0.9375rem;
	opacity: 0.92;
	margin-block-start: 0 !important;
}

/* CTA band — full-bleed end-cap mirroring the hero's vertical rhythm
   but inverted to brand-blue. Constrained inner contentSize set in the
   pattern markup keeps the headline width comfortable on widescreen. */
.erpc-pattern-cta-band {
	padding-block: clamp(3rem, 8vw, 6rem);
	padding-inline: var(--wp--preset--spacing--base);
	text-align: center;
}
.erpc-pattern-cta-band > .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--md);
}

/* Buttons inside the dark brand bands (stat-strip + cta-band) need to
   invert: theme.json sets the global button style to brand-primary-on-white,
   which on a brand-primary bg paints button-into-background = invisible.
   On dark bands: primary becomes white-fill with brand-primary text;
   outline becomes white-border with white text. */
.erpc-pattern-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.erpc-pattern-stat-strip .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--surface-base, #ffffff);
	color: var(--wp--preset--color--brand-primary);
}
.erpc-pattern-cta-band .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.erpc-pattern-stat-strip .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gray-100);
}
.erpc-pattern-cta-band .wp-block-button.is-style-outline .wp-block-button__link,
.erpc-pattern-stat-strip .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--text-light);
	border-color: var(--wp--preset--color--text-light);
}

/* Testimonials — heading + 3 quote cards (0.83.0). Cards keep the
   bg-card surface used by the resource/feature cards; the oversized
   leading quote mark is CSS-generated so operators only type prose.
   Attribution reads quieter, mirroring the stat-strip label recipe. */
.erpc-pattern-testimonials {
	padding-block: clamp(2rem, 6vw, 4rem);
	padding-inline: var(--wp--preset--spacing--base);
}
.erpc-pattern-testimonials > .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--lg);
}
.erpc-pattern-testimonials__card {
	height: 100%;
	padding: var(--wp--preset--spacing--md);
	border-radius: 12px;
}
.erpc-pattern-testimonials__quote {
	font-size: 1.0625rem;
	line-height: 1.55;
}
.erpc-pattern-testimonials__quote::before {
	content: '\201C';
	display: block;
	font-size: 2.5rem;
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--brand-primary);
}
.erpc-pattern-testimonials__attribution {
	font-size: 0.9375rem;
	font-weight: 600;
	opacity: 0.75;
	margin-block-start: var(--wp--preset--spacing--xs) !important;
}

/* Logo wall — thin band wrapper (0.83.0); the plugin's brand-list block
   owns the grid, heading, and View All link, so the pattern only sets
   the section rhythm to match its marketing siblings. */
.erpc-pattern-logo-wall {
	padding-block: clamp(2rem, 6vw, 4rem);
	padding-inline: var(--wp--preset--spacing--base);
}

/* Columns stacking — WP's default `wp-block-columns` stacks at 781px.
   Bump the stat-strip stack point lower (it has 4 columns of just a
   number + label, so it stays readable at narrower widths). */
@media (max-width: 600px) {
	.erpc-pattern-stat-strip .wp-block-columns {
		flex-wrap: wrap;
	}
	.erpc-pattern-stat-strip .wp-block-column {
		flex-basis: 50% !important;
	}
}

/* =============================================================================
   Front-end WP admin bar (#wpadminbar) — storefront chrome tweaks. @since 0.74.0

   The plugin already (a) restricts the front-end toolbar to admin staff
   (administrator / Store Manager / Salesperson) via its `show_admin_bar`
   filter and (b) styles its own `erpc-menu` node (erp-commerce
   output_toolbar_logo_css). These are theme-side presentation tweaks for the
   *native* secondary group: flip its order so the search box sits inboard of
   the account ("Howdy") dropdown, and tint the search field a pinch so it
   reads against the dark bar. style.css loads on the front end only, so these
   never touch wp-admin.
   ========================================================================== */
#wpadminbar .ab-top-secondary {
	float: right;
	display: flex;
	flex-direction: row-reverse;
}
/* Tint the toolbar search box a pinch at rest. Core (wp-includes admin-bar.css)
   paints it transparent — `rgba(255,255,255,0)` — via a 4-ID selector
   (specificity 411), and on `:focus` expands it to a white 200px box with black
   text (specificity 421). We want ONLY the rest tint and must leave that focus
   state intact, so rather than `!important` (which would poison focus too) we
   land BETWEEN the two: core's exact selector + a single `li` type → 412.
   412 > 411 clears core's rest paint; 412 < 421 lets core's :focus still win. */
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > li#wp-admin-bar-search #adminbarsearch input.adminbar-input {
	background-color: rgba(255, 255, 255, 0.1);
}
