/**
 * ERPcommerce Storefront — content styles for plugin-bundled templates.
 *
 * Loaded only on `erp_product` single / archive / taxonomy pages by
 * Storefront\Frontend::enqueue_assets — never on theme-owned routes
 * (homepage, blog, contact, etc.). Selectors are scoped under
 * `body.erpc-storefront` so even if the file ever loads elsewhere the
 * styles can't bleed into the active theme's chrome.
 *
 * Three sections:
 *   1. Tokens — color / type / spacing custom properties.
 *   2. Buttons + base utilities — needed inside content templates.
 *   3. Single product / archive / taxonomy / grid layouts.
 *
 * Chrome (header, megamenu, footer, mobile-actions, search-modal,
 * intro/welcome banner, rubber-ink resource section, locations grid,
 * newsletter signup) was removed in 4.40.0 with the chrome takeover
 * rip — the active WP theme owns those surfaces now.
 *
 * @package ERPcommerce
 * @since   4.37.0
 * @version 4.40.0 Chrome rules ripped; file shrunk from 2226 → ~700 lines.
 */

/* ---------------------------------------------------------------- */
/* Tokens                                                            */
/* ---------------------------------------------------------------- */

/*
 * Moved to assets/css/storefront-tokens.css in 4.246.0 and enqueued
 * always-on (every front-end page, not just commerce surfaces) so the
 * companion theme's chrome can consume the tokens everywhere instead of
 * shipping a duplicate `:root` block. storefront-tokens.css is the single
 * source of truth — add/edit custom properties there, not here. It loads
 * on every page this file does, so the var()s below resolve normally.
 */

/* ---------------------------------------------------------------- */
/* Base utilities — scoped under .erpc-storefront so theme-owned     */
/* routes stay untouched.                                            */
/* ---------------------------------------------------------------- */

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

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

.erpc-storefront .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;
}

/* ---------------------------------------------------------------- */
/* Buttons used by content templates                                 */
/* ---------------------------------------------------------------- */

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

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

.erpc-storefront .btn-primary:hover {
  background-color: var(--btn-primary-bg-hover, #0d5dda);
}

/* 4.513.0 — Shared disabled / in-flight treatment for storefront controls.
   Audit finding (2026-08-25): a whole family of storefront buttons set
   `disabled` — as a double-click guard, as a logged-out gate, or as a
   "nothing selected yet" gate — while NO rule anywhere styled the disabled
   state. Because these buttons paint an explicit background AND color, the
   browser's native disabled rendering never showed through, so they stayed
   fully live-looking and silently did nothing when clicked.

   Almost every control here is disabled only transiently (a request guard),
   so this changes nothing at rest. The one resting-state change, verified on
   the sandbox: "Add selected to cart" on a list detail page ships `disabled`
   in the markup and stays that way until rows are checked — it now reads as
   unavailable instead of looking clickable. That is the intended fix.

   Covered here (each verified present in markup + JS before styling):
     · `[data-erpc-list-detail-addselected]` — "Add selected to cart",
       disabled until rows are checked AND for the whole batch POST
       (storefront-lists.js). Buy path.
     · `[data-erpc-list-detail-resume]` — "Resume in cart" (storefront-lists.js).
       Destructive: it replaces the active cart.
     · `.erpc-cart-save__trigger` — Save cart (storefront-cart.js). Its own
       siblings `.erpc-cart-save__submit:disabled` / `__input:disabled`
       already had rules; the trigger was simply missed.
     · `.storefront-list-fav` / `.storefront-list-more` — favourite + "Add to
       a list…", disabled for the duration of the list PATCH
       (storefront-list-control.js:201). NOTE: `mount()` at :127-130 also
       disables them when logged out, but that branch is dead — every render
       path gates the control on login first (`$ctx['logged_in']` in
       single-erp-product.php / product-grid.php, `loggedIn &&` in
       storefront-category.js), so the markup does not exist for a logged-out
       shopper. Verified logged-out on the sandbox PDP: not present.
     · Notification "mark all read" triggers + the account-menu customer
       switch + address delete + device remove — all in-flight guards.

   The PDP Add-to-cart is deliberately excluded: it is `disabled` at rest
   until pricing resolves and again through the 1.8s "Added ✓" flash, and
   muting those would grey out the confirmation. Its in-flight state is
   handled by the `[aria-busy]` rule further down (~line 672). */
.erpc-storefront .btn-primary:disabled:not( .storefront-product-add-to-cart ),
.erpc-cart-save__trigger:disabled,
.storefront-list-fav:disabled,
.storefront-list-more:disabled,
.erpc-account-menu__customer:disabled,
.erpc-notif-inbox__mark-all:disabled,
.erpc-account-hub__notif-readall:disabled,
.erpc-notifications-bell__mark-all:disabled,
.erpc-shipto-picker__row-action--danger:disabled,
.erpc-notif-prefs__device-remove:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Where the JS pairs `disabled` with `aria-busy` the control is not merely
   unavailable — a request is in flight. Same mute, work-in-progress cursor.
   Ordered after the block above so the cursor wins. */
.erpc-storefront .btn-primary[aria-busy="true"]:not( .storefront-product-add-to-cart ),
.erpc-cart-save__trigger[aria-busy="true"],
.erpc-shipto-picker__row-action--danger[aria-busy="true"] {
  cursor: progress;
}

.erpc-storefront .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;
}

.erpc-storefront .btn-outline:hover,
.erpc-storefront .btn-outline:focus {
  background-color: var(--button-primary-bg, #0a48a8);
  color: var(--button-primary-color, #ffffff);
}

/* ---------------------------------------------------------------- */
/* Single product page                                               */
/* ---------------------------------------------------------------- */

.storefront-product {
  max-width: var(--erpc-content-max, 1400px);
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.storefront-breadcrumb {
  font-size: 0.85rem;
  color: var(--gray-700, #595959);
  margin-bottom: 1.25rem;
}

.storefront-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.storefront-breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.storefront-breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--gray-400, #a6a6a6);
}

.storefront-breadcrumb a {
  color: var(--text-brand, #0a48a8);
  text-decoration: none;
}

.storefront-breadcrumb a:hover {
  text-decoration: underline;
}

.storefront-breadcrumb [aria-current="page"] {
  color: var(--gray-800, #404040);
}

.storefront-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 800px) {
  .storefront-product-grid {
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
    gap: 3rem;
  }
}

.storefront-product-gallery {
  position: relative;
}

.storefront-product-gallery-main {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 1rem;
}

.storefront-product-image-main {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.storefront-product-gallery-placeholder {
  background: var(--gray-100, #f2f2f2);
  border: 1px dashed var(--gray-300, #bfbfbf);
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400, #a6a6a6);
}

.storefront-product-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.storefront-product-gallery-thumbs li {
  display: block;
}

.storefront-product-gallery-thumbs button {
  position: relative; /* anchors the .storefront-product-gallery-thumb-play overlay */
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.storefront-product-gallery-thumbs button:hover,
.storefront-product-gallery-thumbs button:focus-visible {
  border-color: var(--border-brand, #0a48a8);
  outline: none;
}

.storefront-product-gallery-thumbs button.is-active {
  border-color: var(--border-brand, #0a48a8);
  border-width: 2px;
  padding: 3px; /* keep tile dimensions stable when the border thickens */
}

.storefront-product-image-thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.storefront-product-image-thumb.is-video-fallback {
  background: #000;
}

.storefront-product-gallery-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text-inverse, #ffffff);
  border-radius: 50%;
  pointer-events: none;
}

.storefront-product-video-main {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.storefront-product-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.storefront-product-brand {
  color: var(--text-brand, #0a48a8);
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.storefront-product-brand:hover {
  text-decoration: underline;
}

.storefront-product-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.storefront-product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--gray-700, #595959);
}

/* All meta items render as same-height inline-flex chips/text so
   the SKU sits cleanly on the same axis as the Out-of-stock + status
   badges. */
.storefront-product-meta > * {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}

.storefront-product-sku {
  gap: 0.35rem;
}

.storefront-product-meta-label {
  font-weight: 600;
  color: var(--gray-800, #404040);
}

.storefront-product-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.storefront-product-stock.is-in-stock {
  background: var(--green-100, #d4e7d1);
  color: var(--green-700, #1c4f13);
}

.storefront-product-stock.is-out-of-stock {
  background: var(--red-100, #ffcccc);
  color: var(--red-700, #660000);
}

.storefront-product-status-flag {
  background: var(--gold-200, #ffe599);
  /* gold-950, not gold-800 (4.251.0): 2.67:1 → 5.97:1 on gold-200. */
  color: var(--gold-950, #6b5200);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.storefront-product-tagline {
  font-size: 1.05rem;
  color: var(--gray-800, #404040);
  margin: 0;
}

.storefront-product-description-short {
  color: var(--gray-800, #404040);
  font-size: 0.95rem;
}

.storefront-product-description-short p {
  margin: 0 0 0.5rem;
}

.storefront-product-pricing {
  background: var(--bg-100, #f6f8fb);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
  display: flex;
  align-items: center;
  min-height: 64px;
}

.storefront-product-pricing-loading {
  color: var(--gray-600, #737373);
  font-weight: 500;
  font-size: 1rem;
}

.storefront-product-pricing-error {
  color: var(--red-600, #90090b);
  font-weight: 500;
  font-size: 0.95rem;
}

.storefront-product-pricing-locked {
  flex: 1;
  text-align: center;
}

.storefront-product-price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gray-900, #262626);
}

.storefront-product-price-list {
  font-size: 0.95rem;
  text-decoration: line-through;
  color: var(--gray-600, #737373);
  margin-left: 0.75rem;
  font-weight: 500;
}

.storefront-product-price-uom {
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
  margin-left: 0.5rem;
  font-weight: 500;
}

/* Original price on its own line: "Was $X" with the amount struck through, shown
   above the savings pill when there's a real discount (Settings > Products >
   Calculate discounts + Show savings both on). Muted gray + smaller so the live
   discounted price stays the focal point — and on its own line, so it never sits
   next to the current price as a confusingly-similar number. */
.storefront-product-price-was {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-600, #737373);
}

.storefront-product-price-was-amount {
  text-decoration: line-through;
}

/* "You save $X" — green pill below the "Was" line. The filled green background
   makes it stand out (plain green text didn't); green reads as buyer-favorable,
   distinct from the red accent used for primary/secondary CTAs. `display:block`
   + `width:fit-content` keeps it on its own line and hugging its text. */
.storefront-product-price-savings {
  display: block;
  width: fit-content;
  margin-top: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--green-100, #d4e7d1);
  color: var(--green-700, #1c4f13);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
}

.storefront-product-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Common control height — qty input, add-to-cart, favorite all
   match so the row reads as one continuous action strip. Themes
   can override --erpc-cta-height to taste. */
.storefront-product-actions {
  --erpc-cta-height: 52px;
}

/* 4.157.4 — Zero the global `.erpc-storefront .btn-primary { margin: 1rem 0 }`
   for buttons living inside the PDP actions flex row. The 16px top+bottom
   margins inflate the row's flex-item box, which combined with
   `align-items: center` pushes the input visually down inside the row and
   exaggerates the perceived gap between the "Quantity" label (on its own
   wrapped row above) and the input. Other surfaces that use
   `.btn-primary` (pricing-locked CTA, archive card buttons, etc.) keep
   the global margins. */
.storefront-product-actions .btn-primary {
  margin: 0;
}

/* Bare qty (no Frequency picker rendered) — pre-4.155.0 inline layout.
   Label forces its own row above the qty + Add-to-cart pair via flex
   100% basis on the actions flex row; qty input sits compact next to
   the button. Restored in 4.157.1 after the 4.155.0 Frequency-picker
   wrapper change unintentionally promoted qty to a full-width
   stacked-label field for buyers who never see Frequency. */
.storefront-product-qty-label {
  flex: 0 0 100%;
  margin: 0;
  font-weight: 600;
  font-size: 0.85rem;
}

.storefront-product-qty-input {
  width: 90px;
  min-width: 90px;
  height: var(--erpc-cta-height);
  padding: 0 0.75rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* 4.155.0 — Options row (qty + frequency) sits as a full-width band
   above the Add to Cart button. ONLY rendered when the Frequency picker
   is present (4.157.1: bare-qty path skips the wrapper entirely and
   uses the inline pre-4.155.0 layout above). Each field stacks its
   label on top of the control; the qty column stays compact (~120px)
   and frequency grows to fill so the dropdown's longest label ("Every
   3 months") has room. Stacks vertically on narrow viewports.

   Scoped under `.storefront-product-options` so the bare-qty rules
   above are restored for buyers without the Frequency picker. */
.storefront-product-options {
  flex: 0 0 100%;
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.storefront-product-options__field {
  display: flex;
  flex-direction: column;
}

.storefront-product-options__field--qty {
  flex: 0 0 120px;
}

.storefront-product-options__field--frequency {
  flex: 1 1 200px;
  min-width: 0;
}

/* When the qty + label sit inside the options row, drop the flex-
   100% basis (which was the bare-qty trick to push label to its own
   row inside `.storefront-product-actions`) and let the field's
   column-flex render label-on-top of input. */
.storefront-product-options .storefront-product-qty-label,
.storefront-product-options .storefront-product-frequency-label {
  flex: initial;
  margin: 0 0 0.25rem 0;
}

.storefront-product-options .storefront-product-qty-input {
  width: 100%;
}

.storefront-product-frequency-select {
  width: 100%;
  height: var(--erpc-cta-height);
  padding: 0 0.75rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 1rem;
  background-color: var(--surface-base, #ffffff);
  box-sizing: border-box;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-600, #737373) 50%),
                    linear-gradient(135deg, var(--gray-600, #737373) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.storefront-product-frequency-select:focus {
  outline: none;
  border-color: var(--btn-primary-bg, #0a48a8);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.18);
}

.storefront-product-add-to-cart {
  flex: 1;
  min-width: 180px;
  height: var(--erpc-cta-height);
  padding: 0 1.25rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 4.155.0 — Subscribe-mode emphasis. When the Frequency picker is set
   to a non-`one_time` value, the PDP JS flips `data-erpc-mode` to
   `subscribe` and rewrites the button label. Add a subtle visual cue —
   a darker accent stripe at the leading edge — without changing the
   primary blue or the size so layout doesn't shift on every dropdown
   change. */
.storefront-product-add-to-cart[data-erpc-mode="subscribe"] {
  box-shadow: inset 4px 0 0 var(--btn-primary-bg-active, #083a87);
}

/* 4.265.0 — Notify-Me ghost. When the product is unbuyable (no stock,
   backorders off) `reconcileCtaMode` flips `data-erpc-mode` to
   notify / notify_subscribed. Mirror the cart's Save-cart secondary
   button (.erpc-cart-secondary-actions__btn): transparent bg, 1px blue
   border, blue text, fills on hover/focus-visible — so "can't buy now"
   reads at a glance against the solid-blue primary. Tokens are the
   single switch for a treatment pivot. No size shift: the base rule
   above is border-box with a fixed height, so the added border doesn't
   move layout; radius (4px) and the 0.3s transition already come from
   .btn-primary. Hover selectors must stay pseudo-classed — the rest
   rule ties .btn-primary:hover at (0,3,0)-equivalent and only wins by
   source order. */
.storefront-product-add-to-cart[data-erpc-mode="notify"],
.storefront-product-add-to-cart[data-erpc-mode="notify_subscribed"] {
  background-color: var(--btn-notify-bg, transparent);
  color: var(--btn-notify-text, #2b4693);
  border: 1px solid var(--btn-notify-border, #0a48a8);
  font-weight: 500;
}

.storefront-product-add-to-cart[data-erpc-mode="notify"]:hover,
.storefront-product-add-to-cart[data-erpc-mode="notify_subscribed"]:hover,
.storefront-product-add-to-cart[data-erpc-mode="notify"]:focus-visible,
.storefront-product-add-to-cart[data-erpc-mode="notify_subscribed"]:focus-visible {
  background-color: var(--btn-notify-bg-hover, #0a48a8);
  color: var(--btn-notify-text-hover, #ffffff);
}

/* 4.513.0 — In-flight + disabled state for the PDP CTA.
   `submitAddToCart()` (storefront-product.js) has set `disabled` +
   `aria-busy="true"` since 4.39.1, and `.erpc-storefront .btn-primary`
   paints an explicit background AND color — so the browser's own
   disabled styling never showed and NOTHING in this stylesheet ever
   targeted either state. Result: clicking Add to cart produced no
   visible change at all until the request came back (Matt, 2026-08-25:
   "nothing tells a user that the button was clicked"). The `<erpc-add-to-cart>`
   web component on grid cards has always had its own shadow-DOM spinner
   (.cta[aria-busy] .loader); this brings the product page level with it.

   Recipe copied from `.erpc-cart-checkout-button[data-erpc-loading]`
   (4.46.3, ~line 4632) — the house in-flight pattern for a storefront
   CTA: opacity mute + cursor + an absolutely-centred spinner overlaid on
   the label so the button width never moves. The label is muted with
   `color: transparent` rather than removed, so the accessible name stays
   in the AT tree next to `aria-busy="true"` (same reasoning as the
   checkout button). `::after` is deliberate — the JS assigns
   `cta.textContent`, which would wipe any child element spinner. */
.storefront-product-add-to-cart {
  position: relative;
}

/* Scoped to aria-busy ONLY, not `:disabled`. The button also renders
   `disabled` at rest until pricing resolves, and for the 1.8s "Added ✓"
   flash — muting either of those would change the page-load look and
   grey out the confirmation. In-flight is the state that was missing. */
.storefront-product-add-to-cart[aria-busy="true"] {
  opacity: 0.6;
  color: transparent;
  cursor: progress;
  pointer-events: none;
}

.storefront-product-add-to-cart[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  /* Solid ring with one transparent quadrant = the rotating arc. Colour
     can't ride currentColor here (the label mute sets it transparent), so
     it names the same token the button's own text uses. */
  border: 2px solid var(--btn-primary-text, #ffffff);
  border-right-color: transparent;
  transform: translate(-50%, -50%);
  animation: erpc-atc-spinner-rotate 0.7s linear infinite;
  pointer-events: none;
}

/* Notify-Me ghost is a light button with blue text — a white arc would be
   invisible on it (the 4.276.0 lesson the component learned with
   currentColor). */
.storefront-product-add-to-cart[data-erpc-mode="notify"][aria-busy="true"]::after,
.storefront-product-add-to-cart[data-erpc-mode="notify_subscribed"][aria-busy="true"]::after {
  border-color: var(--btn-notify-text, #2b4693);
  border-right-color: transparent;
}

@keyframes erpc-atc-spinner-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-product-add-to-cart[aria-busy="true"]::after {
    animation: none;
  }
}

.storefront-product-favorite {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  width: var(--erpc-cta-height);
  height: var(--erpc-cta-height);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600, #737373);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.storefront-product-favorite:hover,
.storefront-product-favorite:focus {
  color: var(--red-500, #970100);
  border-color: var(--red-300, #ff6666);
  outline: none;
}

.storefront-product-favorite[aria-pressed="true"] {
  color: var(--red-500, #970100);
  border-color: var(--red-500, #970100);
  background: var(--red-100, #ffcccc);
}

.storefront-product-favorite[aria-pressed="true"] svg {
  fill: currentColor;
}

.storefront-product-attributes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0.75rem 0 0;
  border-top: 1px solid var(--gray-200, #d9d9d9);
}

.storefront-product-attribute-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
  font-size: 0.9rem;
}

.storefront-product-attribute-row dt {
  font-weight: 600;
  color: var(--gray-700, #595959);
  margin: 0;
}

.storefront-product-attribute-row dd {
  margin: 0;
  color: var(--gray-800, #404040);
}

.storefront-product-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.storefront-product-categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.storefront-product-categories a {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--bg-300, #eef2f7);
  border-radius: 4px;
  color: var(--gray-800, #404040);
  text-decoration: none;
  font-size: 0.8rem;
}

.storefront-product-categories a:hover {
  background: var(--blue-100, #d0e3ff);
  color: var(--blue-700, #172e73);
}

.storefront-product-description-long {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200, #d9d9d9);
}

.storefront-product-description-long h2,
.storefront-product-documents h2,
.storefront-product-videos h2,
.storefront-product-related h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.storefront-product-documents,
.storefront-product-videos,
.storefront-product-related {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200, #d9d9d9);
}

.storefront-product-documents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.storefront-product-documents a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-100, #f6f8fb);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 4px;
  color: var(--text-brand, #0a48a8);
  text-decoration: none;
  font-size: 0.95rem;
}

.storefront-product-documents a:hover {
  background: var(--blue-100, #d0e3ff);
  border-color: var(--blue-300, #7aaeff);
}

.storefront-product-video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.storefront-product-video-list video {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #000;
}

.storefront-product-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.storefront-product-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.storefront-product-related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.storefront-product-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--gray-900, #262626);
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 0.75rem;
  transition: border-color 0.15s, transform 0.15s;
}

.storefront-product-related-card:hover {
  border-color: var(--blue-300, #7aaeff);
  transform: translateY(-2px);
}

.storefront-product-related-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.storefront-product-related-title {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- */
/* Archive + taxonomy + grid                                         */
/* ---------------------------------------------------------------- */

/* Sizing for `.storefront-archive` lives on `.storefront-listing` since
   4.108.0 — both classes co-occur on the archive / brand / attribute
   roots, and `.storefront-listing` ships the canonical 1400px + 1.5rem
   padding consistent with the category page. The legacy
   `.storefront-archive { max-width: 1200px }` rule was redundant + a
   source-order trap (would silently win if anyone re-ordered the
   stylesheet) so it's been removed; header / title / brand-logo rules
   below remain since they're still used by the archive + taxonomy chrome. */

.storefront-archive-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
}

.storefront-archive-header-tax {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.storefront-archive-brand-logo {
  max-width: 120px;
  max-height: 80px;
  object-fit: contain;
}

.storefront-archive-header-text {
  flex: 1;
  min-width: 0;
}

.storefront-archive-tax-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600, #737373);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.storefront-archive-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.storefront-archive-description {
  margin-top: 0.5rem;
  color: var(--gray-700, #595959);
  font-size: 0.95rem;
}

/* `.storefront-archive-body` rule removed in 4.109.6 — the archive +
   taxonomy templates now use `.storefront-category-body` (grid layout
   with the facet sidebar) instead of the legacy `display: block` body
   wrapper, so the rule no longer matched any element. */

.storefront-grid-count {
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
  margin: 0 0 1rem;
}

.storefront-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.storefront-grid-card {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  /* Was overflow:hidden — the Draft chip lives outside the wrapping <a>
     and is positioned on the <li>, so the card must allow it to render
     within the rounded corners (which it still does — chip is inset). */
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}

.storefront-grid-card:hover {
  border-color: var(--blue-300, #7aaeff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 4.266.0/4.266.1 — Card focus = the hover treatment + the storefront's
   canonical 2px dark-blue focus ring, around the WHOLE card. The
   wrapping <a> only spans image+body (the ATC row and list controls
   live outside it as their own tab stops), so a ring on the anchor cuts
   across the card just above the ATC row — looked broken.
   GOTCHA the first cut missed (4.266.1): that anchor ring is NOT the UA
   default — it's painted by `.erpc-storefront a:focus` at the top of
   this file (0,2,1) AND the companion theme's global `a:focus`, both on
   plain `:focus`. A (0,2,0) `outline:none` on `:focus-visible` loses
   that cascade, so the suppression below carries scoped + unscoped
   variants (the unscoped one also covers cards on theme-owned routes,
   where `.erpc-storefront` is absent but the theme's `a:focus` still
   paints) and covers plain `:focus` too. It stays inside the @supports
   guard: without :has() the card-level replacement can't exist, so old
   browsers keep the anchor ring rather than losing focus indication
   entirely (WCAG 2.4.7). */
.storefront-grid-card:has( .storefront-grid-card-link:focus-visible ) {
  border-color: var(--blue-300, #7aaeff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
}

@supports selector( li:has( a:focus-visible ) ) {
  .storefront-grid-card-link:focus,
  .storefront-grid-card-link:focus-visible,
  .erpc-storefront .storefront-grid-card-link:focus,
  .erpc-storefront .storefront-grid-card-link:focus-visible {
    outline: none;
  }
}

.storefront-grid-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.storefront-grid-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-200, #f9f9f7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.storefront-grid-card-thumb {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.storefront-grid-card-placeholder {
  color: var(--gray-400, #a6a6a6);
}

.storefront-grid-card-stock-flag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--red-100, #ffcccc);
  color: var(--red-700, #660000);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Status chip is rendered OUTSIDE the wrapping <a> so it can be its own
   clickable link to the admin SPA product detail. Positioned on the <li>
   (which is `position: relative`) so it appears in the same corner as
   when it lived inside the image div. z-index keeps it above the card
   link for click targeting. Color comes from the per-status .is-* class. */
.storefront-grid-card-status-flag {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.storefront-grid-card-status-flag.is-draft,
.storefront-product-status-flag-link.is-draft {
  background: var(--yellow-100, #fef3c7);
  color: var(--text-warning, #6b5200); /* was var(--yellow-800) #92400e */
}
.storefront-grid-card-status-flag.is-draft:hover,
.storefront-grid-card-status-flag.is-draft:focus-visible,
.storefront-product-status-flag-link.is-draft:hover,
.storefront-product-status-flag-link.is-draft:focus-visible {
  background: var(--yellow-200, #fde68a);
  color: var(--text-warning, #6b5200); /* was #78350f */
  text-decoration: none;
}

.storefront-grid-card-status-flag.is-pending,
.storefront-product-status-flag-link.is-pending {
  background: var(--amber-200, #fde68a);
  color: var(--text-warning, #6b5200); /* was #78350f */
}
.storefront-grid-card-status-flag.is-pending:hover,
.storefront-grid-card-status-flag.is-pending:focus-visible,
.storefront-product-status-flag-link.is-pending:hover,
.storefront-product-status-flag-link.is-pending:focus-visible {
  background: var(--amber-300, #fcd34d);
  color: var(--text-warning, #6b5200); /* was #78350f */
  text-decoration: none;
}

.storefront-grid-card-status-flag.is-private,
.storefront-product-status-flag-link.is-private {
  background: var(--purple-100, #ede9fe);
  color: var(--purple-800, #5b21b6);
}
.storefront-grid-card-status-flag.is-private:hover,
.storefront-grid-card-status-flag.is-private:focus-visible,
.storefront-product-status-flag-link.is-private:hover,
.storefront-product-status-flag-link.is-private:focus-visible {
  background: var(--purple-200, #ddd6fe);
  color: var(--purple-900, #4c1d95);
  text-decoration: none;
}

.storefront-grid-card.is-draft,
.storefront-grid-card.is-pending,
.storefront-grid-card.is-private {
  opacity: 0.55;
  transition: opacity 0.15s ease-out;
}

.storefront-grid-card.is-draft:hover,
.storefront-grid-card.is-draft:focus-within,
.storefront-grid-card.is-pending:hover,
.storefront-grid-card.is-pending:focus-within,
.storefront-grid-card.is-private:hover,
.storefront-grid-card.is-private:focus-within {
  opacity: 1;
}

.storefront-product-status-flag-link {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.storefront-product.is-draft,
.storefront-product.is-pending,
.storefront-product.is-private {
  opacity: 0.85;
}

.storefront-pricing-skeleton {
  display: inline-block;
  width: 4rem;
  height: 0.9em;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--gray-100, #f2f2f2) 25%,
    var(--gray-200, #d9d9d9) 50%,
    var(--gray-100, #f2f2f2) 75%
  );
  background-size: 200% 100%;
  animation: erpc-skeleton-shimmer 1.2s linear infinite;
  vertical-align: middle;
}

.storefront-pricing-skeleton--lg {
  width: 7rem;
  height: 1.6em;
  border-radius: 6px;
}

/* Block-level skeleton bar — shimmer same as .storefront-pricing-skeleton
   but display:block so it stacks vertically and inline width="..." styles
   determine length. Used by cart + checkout loading-state mockups. */
.erpc-skeleton-bar {
  display: block;
  height: 1em;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--gray-100, #f2f2f2) 25%,
    var(--gray-200, #d9d9d9) 50%,
    var(--gray-100, #f2f2f2) 75%
  );
  background-size: 200% 100%;
  animation: erpc-skeleton-shimmer 1.2s linear infinite;
}
.erpc-skeleton-bar--sm    { height: 0.7em; }
.erpc-skeleton-bar--lg    { height: 1.6em; border-radius: 6px; }
.erpc-skeleton-bar--xl    { height: 2.2em; border-radius: 6px; }
.erpc-skeleton-bar--label { height: 0.85em; width: 40%; margin-bottom: 1rem; }

/* Cart + checkout loading-state skeletons. Replaces the previous
   "Loading your cart…" text loader. Markup mirrors the loaded layout
   (identity row → 3 address cells → lines table rows → bottom grid
   with details + summary) so the page never reflows on hydrate. */
.erpc-storefront-skeleton__identity {
  margin-bottom: 1.5rem;
}
.erpc-storefront-skeleton__addresses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .erpc-storefront-skeleton__addresses { grid-template-columns: 1fr; }
}
.erpc-storefront-skeleton__cell {
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1rem;
}
.erpc-storefront-skeleton__lines {
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-storefront-skeleton__line {
  height: 3rem;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
  background: linear-gradient(90deg,
    var(--gray-50, #fafafa) 25%,
    var(--gray-100, #f2f2f2) 50%,
    var(--gray-50, #fafafa) 75%
  );
  background-size: 200% 100%;
  animation: erpc-skeleton-shimmer 1.2s linear infinite;
}
.erpc-storefront-skeleton__bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .erpc-storefront-skeleton__bottom { grid-template-columns: 1fr; }
}
.erpc-storefront-skeleton__details,
.erpc-storefront-skeleton__summary {
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1rem;
}

/* Promo pill — appears when CSD pricing returns promofl:true.
   Top-left on grid cards (same corner as Out-of-stock — they don't co-occur
   meaningfully; an out-of-stock promo isn't useful UX), inline in the meta
   row on the single page. */
.storefront-grid-card-promo-slot {
  /* Lines up with the out-of-stock pill (`.storefront-grid-card-stock-flag`
     at top: 0.5rem / left: 0.5rem). They don't co-occur meaningfully — an
     out-of-stock promo isn't useful UX — so sharing the same corner gives
     consistent vertical alignment across the card grid. */
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
}

/* Cross-document View Transitions — opt the storefront in so navigation
   from an archive card to the single product page morphs the matching
   `view-transition-name` images instead of cross-fading the page. Each
   thumbnail + hero pair declares the same `view-transition-name` (set
   inline per SKU in the template). Browsers without support (Firefox,
   Safari < 18 at time of writing) fall back to a normal navigation. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.storefront-pill-promo {
  /* Amber, not green — the green clashed with the in-stock pill so a
     buyer scanning grid cards couldn't tell promo from inventory.
     Amber maps to "deal / discount" in retail UI convention and stands
     out from both the green inventory chip and the blue primary CTA. */
  display: inline-block;
  background: var(--amber-100, #fef3c7);
  color: var(--text-warning, #6b5200); /* was #78350f */
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 4.141.0 — Match-source pill on storefront search-results cards.
   Cross-ref: the buyer typed a competitor / interchange / superseded /
   barcode value and we routed to the canonical SKU. Pinned: an admin
   curated this SKU for this exact query. Both signals are normally
   invisible to the buyer; the pill makes them legible.
   Top-right corner so it doesn't collide with the top-left promo /
   out-of-stock pills. */
.storefront-grid-card-match-slot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  max-width: calc(100% - 1rem);
}
.storefront-pill-match {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  /* Truncate long cross-ref values so a 30-char competitor part number
     doesn't push the pill past the card edge. The full value lives in
     the `title` attribute for hover inspection. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storefront-pill-match--xref {
  /* Sky blue — distinct from the brand-blue title link, the amber promo,
     and the green inventory chip. Reads as "informational signal" not
     "deal" or "status". */
  background: var(--sky-100, #e0f2fe);
  color: var(--sky-900, #0c4a6e);
}
.storefront-pill-match--pin {
  /* Indigo — signals editorial curation distinct from algorithmic xref. */
  background: var(--indigo-100, #e0e7ff);
  color: var(--indigo-900, #312e81);
  text-transform: uppercase;
}

/* 4.141.0 — Search-page banners (sub-3-char floor + truncation cap). */
.storefront-search-notice {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.storefront-search-notice--too-short {
  background: var(--amber-50, #fffbeb);
  color: var(--text-warning, #6b5200); /* was #78350f */
  border: 1px solid var(--amber-200, #fde68a);
}
.storefront-search-notice--truncated {
  background: var(--sky-50, #f0f9ff);
  color: var(--sky-900, #0c4a6e);
  border: 1px solid var(--sky-200, #bae6fd);
}

@keyframes erpc-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kill the looping shimmer/fade animations storefront-wide. Selectors can
     live here regardless of where each rule is defined — keep all the
     reduced-motion overrides in one block so none get missed (WCAG 2.3.3). */
  .storefront-pricing-skeleton,
  .erpc-skeleton-bar,
  .erpc-cart-summary[data-erpc-pending="true"]::after,
  body.erpc-facet-drawer-open::before { animation: none; }
}

.storefront-grid-card-body {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

/* Listing add-to-cart (4.254.0) — Settings → Products → "Add to cart on
   listings". Sits below the card body, sibling of the card link.
   The component is shadow-DOM; --button-min-width pierces it so the
   control spans the card width. margin-top:auto pins the row to the
   card bottom so buttons align across cards of differing title height. */
.storefront-grid-card-atc {
  padding: 0 1rem 1rem;
  margin-top: auto;
}

.storefront-grid-card-atc erpc-add-to-cart {
  display: block;
  --button-min-width: 100%;
}

/* Out-of-stock cards keep the control — the component itself flips to
   Notify-Me mode on the `out-of-stock` attribute (4.254.4, PDP CTA
   parity), so no wrapper collapse here. */

.storefront-grid-card-brand {
  font-size: 0.75rem;
  color: var(--text-brand, #0a48a8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.storefront-grid-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--gray-900, #262626);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.storefront-grid-card-sku {
  font-size: 0.75rem;
  color: var(--gray-600, #737373);
  margin-top: auto;
}

.storefront-grid-card-pricing {
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
  min-height: 1.4em;
}

/* gray-600, not gray-400 (4.251.0): the error string is information the
   buyer must read — 2.43:1 was far below AA. Loading text matches so the
   slot doesn't flash darker on failure. */
.storefront-grid-card-pricing-loading,
.storefront-grid-card-pricing .storefront-product-pricing-error {
  color: var(--gray-600, #737373);
  font-weight: 500;
  font-size: 0.9rem;
}

.storefront-grid-empty {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--gray-600, #737373);
  background: var(--bg-100, #f6f8fb);
  border: 1px dashed var(--gray-300, #bfbfbf);
  border-radius: 8px;
}

.storefront-grid-pagination {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

.storefront-grid-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.storefront-grid-pagination a,
.storefront-grid-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 4px;
  text-decoration: none;
  color: var(--gray-700, #595959);
  font-size: 0.9rem;
  background: var(--surface-base, #ffffff);
}

.storefront-grid-pagination a:hover {
  border-color: var(--border-brand, #0a48a8);
  color: var(--text-brand, #0a48a8);
}

.storefront-grid-pagination .current {
  background: var(--surface-brand, #0a48a8);
  border-color: var(--border-brand, #0a48a8);
  color: var(--text-inverse, #ffffff);
}

.storefront-grid-pagination .dots {
  border: none;
  background: none;
}

/* ---------------------------------------------------------------- */
/* Locations block (4.40.4)                                          */
/* ---------------------------------------------------------------- */

.erpc-locations-block {
  --erpc-loc-cols: 4;
  margin: 2rem auto;
}

.erpc-locations-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.erpc-locations-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.erpc-locations-grid {
  /* Flex (not grid) so a partial trailing row (e.g. 5 cards in a 3-col
     layout → top row of 3, bottom row of 2) CENTERS its remaining
     cards instead of left-aligning them in cols 1+2 with an empty
     col 3 on the right. CSS Grid auto-flow can't do this without
     manual nth-child offsets that break when the count changes. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.erpc-locations-grid > .erpc-location-card {
  /* Mobile fallback — full-width minus container padding. */
  flex: 1 1 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  .erpc-locations-grid > .erpc-location-card {
    /* Fixed-width cards (320px ~ old 4-col size on a 1340 container).
       Computed from `--erpc-loc-cols` for parity with the old grid
       contract — operators set columns=N and tracks become 320px each.
       `flex-basis: 320px` plus `flex-grow: 0` keeps cards from
       inflating when the row is short. */
    flex: 0 0 320px;
    max-width: 320px;
  }
}

.erpc-location-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.erpc-location-card:hover {
  border-color: var(--blue-300, #7aaeff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.erpc-location-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-200, #f9f9f7);
}

.erpc-location-card-no-map {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-300, #eef2f7);
  border-radius: 6px;
}

.erpc-location-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.erpc-location-card p {
  margin: 0;
  color: var(--gray-700, #595959);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- */
/* Locations list variant (4.55.2) — admin-style row layout.        */
/* Two columns per row: left = name/code/address/maps link,         */
/* right = static-map preview. Mirrors admin Locations view (see    */
/* assets/js/views/locations.js:215-232) minus admin-only controls. */
/* ---------------------------------------------------------------- */
.erpc-locations-block--list .erpc-locations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.erpc-locations-block--list .erpc-loc-row {
  display: grid;
  /* Info: takes the remaining space. Map: pinned at 420px. Below the
     mobile collapse breakpoint the whole row stacks (rule below). */
  grid-template-columns: 1fr 420px;
  gap: 1.5rem;
  align-items: start;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.erpc-locations-block--list .erpc-loc-col-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erpc-locations-block--list .erpc-loc-col-preview {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.erpc-locations-block--list .erpc-loc-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
  line-height: 1.2;
}
.erpc-locations-block--list .erpc-loc-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray-600, #737373);
}
.erpc-locations-block--list .erpc-loc-code {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--gray-100, #f2f2f2);
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.erpc-locations-block--list .erpc-loc-address {
  font-style: normal;
  color: var(--gray-800, #404040);
  font-size: 0.95rem;
  line-height: 1.45;
}
.erpc-locations-block--list .erpc-loc-addr-line {
  display: block;
}
.erpc-locations-block--list .erpc-loc-addr-empty {
  color: var(--gray-600, #737373);
  font-style: italic;
}
.erpc-locations-block--list .erpc-loc-maps-link a {
  color: var(--link-color, #0073e6);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  /* Keep the "Open in Google Maps ↗" label + icon on one line so the
     arrow can't wrap below the text. */
  white-space: nowrap;
}
.erpc-locations-block--list .erpc-loc-maps-link a:hover {
  text-decoration: underline;
  color: var(--link-hover-color, #005bb5);
}
/* Map preview — 10:7 ratio matches the 500x350 static-map render
   (admin uses the same shape). Width fills the column up to the 500px
   cap; height auto-derives from the ratio. */
.erpc-locations-block--list .erpc-loc-static-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.erpc-locations-block--list .erpc-loc-preview-empty {
  width: 100%;
  aspect-ratio: 10 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-300, #eef2f7);
  color: var(--gray-600, #737373);
  font-size: 0.85rem;
  border-radius: 6px;
}
@media (max-width: 640px) {
  .erpc-locations-block--list .erpc-loc-row {
    grid-template-columns: 1fr;
  }
  .erpc-locations-block--list .erpc-loc-col-preview {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------- */
/* Locations Map block (4.122.0) — Google-Maps-style alt layout     */
/* ---------------------------------------------------------------- */
/* Two-pane layout: scrollable sidebar list on the left, interactive
   Google Map on the right. Map fills the viewport below the theme
   chrome (--erpc-chrome-h, defaults to 88px which matches the current
   storefront top-nav + utility-bar stack). Theme can override the var
   to match its own chrome height. */
.erpc-locations-map-block {
  display: flex;
  /* Force edge-to-edge regardless of parent content-width clamp.
     4.122.4 used `calc(50% - 50vw)` negative margins, which assumes the
     parent's effective width matches the viewport — false when the
     parent has asymmetric padding or is inside a flex container that
     reshapes child widths. 4.122.5 switches to `left: 50%` + `transform:
     translateX(-50%)` which is parent-width-agnostic: position the box's
     left edge at the parent's center, then shift it left by half its
     OWN width (100vw → -50vw). Net result: element spans viewport-edge
     to viewport-edge regardless of the parent's layout context. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  height: calc(100vh - var(--erpc-chrome-h, 88px));
  min-height: 480px;
  background: var(--bg-100, #f6f8fb);
}
.erpc-locations-map-block__list {
  flex: 0 0 360px;
  max-width: 360px;
  overflow-y: auto;
  background: var(--surface-base, #ffffff);
  border-right: 1px solid var(--border-color, #ccc);
}
.erpc-locations-map-block__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.erpc-locations-map-block__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  /* Divider between locations. Initial 4.122.0 shipped with
     `var(--border-100)` which doesn't exist in this codebase; the
     border fell back to `currentColor` (text) and rendered invisible
     against the white list background. 4.122.7 settles on
     `var(--gray-200)` (#d9d9d9) — visible enough to group rows but
     softer than the #ccc structural --border-color. */
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
  /* Selected accent — 5px so the active row reads at a glance. The
     transparent default keeps the layout stable when (de)selecting
     (no jump from 0 → 5 of padding shift). */
  border-left: 5px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-left-color 120ms ease;
}
.erpc-locations-map-block__item:hover {
  background: var(--bg-200, #f9f9f7);
}
.erpc-locations-map-block__item[aria-current="true"] {
  background: var(--bg-200, #f9f9f7);
  border-left-color: var(--btn-primary-bg, #0a48a8);
}
/* Rows without resolved coords aren't pannable on the map — soften the
   visual affordance so users don't expect the click to do anything but
   open the external Maps link. */
.erpc-locations-map-block__item--no-pin {
  cursor: default;
}
.erpc-locations-map-block__item--no-pin:hover {
  background: transparent;
}
.erpc-locations-map-block__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900, #262626);
}
.erpc-locations-map-block__addr-line {
  display: block;
  font-size: 0.9rem;
  color: var(--gray-700, #595959);
  line-height: 1.4;
}
.erpc-locations-map-block__no-pin {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--bg-300, #eef2f7);
  color: var(--gray-600, #737373);
  font-size: 0.78rem;
  border-radius: 3px;
  align-self: flex-start;
}
.erpc-locations-map-block__maps-link {
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--link-color, #0073e6);
  text-decoration: none;
  /* Keep the trailing arrow glyph on the same line as the label. */
  white-space: nowrap;
}
.erpc-locations-map-block__maps-link:hover {
  text-decoration: underline;
  color: var(--link-hover-color, #005bb5);
}
.erpc-locations-map-block__map {
  flex: 1 1 auto;
  min-width: 0; /* allow shrink below content width inside flex */
  height: 100%;
}
/* Fallback state — coords haven't resolved yet (4.122.3). Renders in
   place of the interactive map until the admin's Settings → Locations
   view triggers PlaceResolver. Visual: centered message card with a
   muted background so it reads as "wait, not error." */
.erpc-locations-map-block__map--unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-200, #f9f9f7);
}
.erpc-locations-map-block__map-message {
  max-width: 360px;
  padding: 24px;
  text-align: center;
  color: var(--gray-700, #595959);
}
.erpc-locations-map-block__map-message strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--gray-900, #262626);
}
.erpc-locations-map-block__map-message span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Mobile: stack vertically — map on top (320px tall fixed), list
   underneath taking the remainder. "More like Google Maps" reads as
   map-led; the list becomes the navigator beneath. */
@media (max-width: 768px) {
  .erpc-locations-map-block {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .erpc-locations-map-block__map {
    flex: 0 0 320px;
    height: 320px;
    order: 1;
  }
  .erpc-locations-map-block__list {
    flex: 1 1 auto;
    max-width: 100%;
    max-height: calc(100vh - 320px - var(--erpc-chrome-h, 88px));
    order: 2;
    border-right: none;
    border-top: 1px solid var(--border-color, #ccc);
  }
}

/* ---------------------------------------------------------------- */
/* Taxonomy grid (4.55.2) — A–Z list for /brands/ + /categories/    */
/* ---------------------------------------------------------------- */
/* The block <section> takes whatever width the page align gives it (often
   full-bleed — the theme's `.erpc-page .alignfull` rule pushes it to 100vw).
   This inner column re-constrains the content to the theme wide-size, centered
   with side padding, so the letter headings + cards line up with the page
   title instead of hugging the viewport edges. 4.386.0. */
.erpc-tax-grid__inner {
  max-width: var(--wp--style--global--wide-size, 1400px);
  margin-inline: auto;
  padding-inline: 1.25rem;
  box-sizing: border-box;
}
.erpc-tax-grid__header {
  margin-bottom: 1.5rem;
}
.erpc-tax-grid__header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
}
/* Sticky offsets = the `.erpc-account-hub__rail` recipe (4.290.0
   lineage + 4.296.0 notice term) — keep in lockstep. The bar pins
   FLUSH under the chrome stack (no breathing-room term — it has its
   own background + border-bottom; the original was a flush `top: 0`).
   A horizontal bar needs no max-height/overflow. ≤782px admin-bar
   (46px) variant included — this bar is sticky at every width. */
.erpc-tax-grid__jump {
  position: sticky;
  top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px));
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
  margin: 0 0 1.5rem;
  padding: 0.5rem 0;
  transition: top 0.25s ease-in-out;
}
.admin-bar .erpc-tax-grid__jump {
  top: calc(32px + var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px));
}
/* Mobile: admin bar is absolute (scrolls away) — no 46px offset. 4.318.2. */
@media (max-width: 782px) {
  .admin-bar .erpc-tax-grid__jump {
    top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px));
  }
}
body.erpc-chrome-hidden .erpc-tax-grid__jump {
  top: var(--erpc-sticky-notice-h, 0px);
}
.admin-bar.erpc-chrome-hidden .erpc-tax-grid__jump {
  top: calc(32px + var(--erpc-sticky-notice-h, 0px));
}
/* Mobile + chrome-hidden: same — no admin-bar offset. 4.318.2. */
@media (max-width: 782px) {
  .admin-bar.erpc-chrome-hidden .erpc-tax-grid__jump {
    top: calc(var(--erpc-sticky-notice-h, 0px));
  }
}
.erpc-tax-grid__jump ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.erpc-tax-grid__jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 0.4rem;
  border-radius: 4px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-800, #404040);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.erpc-tax-grid__jump a:hover {
  background: var(--surface-brand, #0a48a8);
  color: var(--text-inverse, #ffffff);
}
.erpc-tax-grid__body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.erpc-tax-grid__group {
  /* Anchor jumps from the letter bar clear the sticky chrome stack +
     the bar itself (the 90px base = bar height + breathing room, as
     before). Same pattern as `.storefront-search-section`. */
  scroll-margin-top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 90px);
}
.erpc-tax-grid__letter {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--gray-200, #d9d9d9);
  color: var(--gray-900, #262626);
}
.erpc-tax-grid__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.65rem;
}
/* Each term is a card — house style (white, bordered, rounded), whole row
   clickable. Replaced the old dashed-underline text rows (4.381.0). */
.erpc-tax-grid__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-decoration: none;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  color: var(--link-color, #0073e6);
  font-weight: 600;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.erpc-tax-grid__item:hover {
  border-color: var(--border-brand, #0a48a8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.erpc-tax-grid__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.erpc-tax-grid__count {
  flex: 0 0 auto;
  color: var(--gray-600, #737373);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--gray-100, #f2f2f2);
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
}
.erpc-tax-grid__empty {
  color: var(--gray-600, #737373);
  font-style: italic;
}

/* ---- Nested layout (category cards by parent department, 4.381.0) ---- */
.erpc-tax-grid__nested {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.erpc-tax-grid__pcard {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 10px;
  overflow: hidden;
}
.erpc-tax-grid__pcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
  background: var(--gray-100, #f2f2f2);
}
.erpc-tax-grid__pcard-head a {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
  text-decoration: none;
}
.erpc-tax-grid__pcard-head a:hover {
  color: var(--text-brand, #0a48a8);
}
.erpc-tax-grid__pcard-total {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600, #737373);
  white-space: nowrap;
}
.erpc-tax-grid__pcard-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.35rem 0.5rem;
}
.erpc-tax-grid__pcard-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-decoration: none;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--link-color, #0073e6);
  font-weight: 500;
  font-size: 0.95rem;
}
.erpc-tax-grid__pcard-list a:hover {
  background: var(--gray-100, #f2f2f2);
  color: var(--link-hover-color, #005bb5);
}
.erpc-tax-grid__sublist {
  margin: 0.1rem 0 0.1rem 0.65rem;
  padding-left: 0.55rem;
  border-left: 2px solid var(--gray-200, #d9d9d9);
}
.erpc-tax-grid__sublabel {
  padding: 0.4rem 0.65rem 0.15rem;
}
.erpc-tax-grid__sublabel a {
  display: inline;
  padding: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--gray-600, #737373);
}
.erpc-tax-grid__sublabel a:hover {
  background: none;
  color: var(--text-brand, #0a48a8);
}

/* ---- Image-grid layout (brand logos / category images, 4.385.0) ---- */
.erpc-tax-grid__items--grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
}
.erpc-tax-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  padding: 0.85rem;
  text-decoration: none;
  color: var(--gray-900, #262626);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.erpc-tax-grid__card:hover {
  border-color: var(--border-brand, #0a48a8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.erpc-tax-grid__card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--gray-100, #f2f2f2);
  border-radius: 6px;
  overflow: hidden;
}
.erpc-tax-grid__card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Placeholder when a term has no image yet — a subtle tile, not a void. */
.erpc-tax-grid__card-img.is-empty {
  background: repeating-linear-gradient(
    45deg, var(--gray-100, #f2f2f2), var(--gray-100, #f2f2f2) 10px, var(--surface-base, #ffffff) 10px, var(--surface-base, #ffffff) 20px
  );
}
.erpc-tax-grid__card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-900, #262626);
  line-height: 1.25;
}
.erpc-tax-grid__card .erpc-tax-grid__count {
  margin-top: auto;
}

/* ---------------------------------------------------------------- */
/* Auth pages (login / forgot-password / reset-password) — 4.42.0   */
/* ---------------------------------------------------------------- */

.erpc-auth-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 1rem;
  min-height: 60vh;
}

.erpc-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.erpc-auth-card__header {
  margin-bottom: 1.5rem;
}

.erpc-auth-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900, #262626);
}

.erpc-auth-card__sub {
  font-size: 0.9rem;
  color: var(--gray-700, #595959);
  margin: 0;
  line-height: 1.4;
}

.erpc-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.erpc-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.erpc-auth-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800, #404040);
}

.erpc-auth-optional {
  font-weight: 400;
  color: var(--gray-600, #737373);
  margin-left: 0.25rem;
  font-size: 0.8rem;
}

/* 4.355.0 — Two-column join form. The grid wraps only the field cells;
   the error, submit, guest CTA + footer stay full-width below it (they
   live outside the grid in the markup). Collapses to one column on
   narrow viewports. */
.erpc-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

/* Bottom-align the inputs in each row so they line up even when one cell's
   label wraps to more lines than its neighbour (e.g. the multi-line
   "Customer account number (optional…)" label next to "Company name"). */
.erpc-auth-grid .erpc-auth-field {
  justify-content: flex-start;
}
.erpc-auth-grid .erpc-auth-field .erpc-auth-input {
  margin-top: auto;
}

@media (max-width: 560px) {
  .erpc-auth-grid {
    grid-template-columns: 1fr;
  }
}

/* Wider card for the two-column join form (login/reset stay narrow). */
.erpc-auth-page-signup .erpc-auth-card {
  max-width: 760px;
}

/* On the wide join form a full-bleed submit looks oversized — size it to
   its content and left-align it under the grid. Login/reset keep the
   default full-width button in their narrow cards. */
.erpc-auth-page-signup .erpc-auth-submit {
  width: auto;
  min-width: 220px;
  align-self: flex-start;
}

/* Short lead line above the join grid. */
.erpc-auth-intro {
  margin: 0 0 0.25rem;
  color: var(--gray-600, #737373);
  font-size: 0.9rem;
}

/* Required-field marker. aria-hidden in markup; aria-required carries it
   to assistive tech, this is the visual cue only. */
.erpc-auth-req {
  color: var(--erpc-danger, #c0392b);
  font-weight: 700;
}

/* The theme styles `input[type="text"|"email"|"tel"]` globally with
   `border: var(--input-border)` where `--input-border: none`, plus
   `min-width: 250px` (style.css:316). At 0,1,1 that out-ranks a bare
   `.erpc-auth-input` (0,1,0), silently erasing the border on every
   non-password auth field (login email, all of signup). Compound to
   0,2,1 so our box paints; `min-width: 0` so the theme's 250px floor
   can't overflow the signup state/zip columns. Same trap + fix as
   express-order.css. */
.erpc-auth-field input.erpc-auth-input,
.erpc-auth-field select.erpc-auth-input {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 0.95rem;
  background: var(--surface-base, #ffffff);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Selects (profile timezone / date / time format — 4.280.0, Matt: the
   UA's raw gray control sat next to our bordered inputs). Same box
   recipe; appearance:none kills the platform chrome, the inline SVG
   chevron replaces it. */
.erpc-auth-field select.erpc-auth-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23595959' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

.erpc-auth-field select.erpc-auth-input:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 1px;
  border-color: var(--outline-color, #0a48a8);
}

.erpc-auth-field input.erpc-auth-input:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 1px;
  border-color: var(--outline-color, #0a48a8);
}

.erpc-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  /* 4.527.0 — the "?" explanation panel is the last child of the row and
     is `flex-basis: 100%`, so it wraps onto its own line under the
     checkbox instead of competing for width with the Forgot-password
     link. While every panel is hidden this changes nothing. */
  flex-wrap: wrap;
}

/* 4.527.0 — keeps the checkbox and its "?" button together as ONE
   space-between item, so the row still reads [checkbox] … [Forgot
   password?] rather than pushing the "?" into the middle of the gap. */
.erpc-auth-check-wrap {
  display: inline-flex;
  align-items: center;
  /* 0.5rem, not 0.25rem: the "?" focus ring is a 2px outline at a 2px
     offset, so a 4px gap let the ring sit on the last letter of the label
     for keyboard users (seen in the 4.527.0 click-test). */
  gap: 0.5rem;
}

.erpc-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* The theme's global `label { width: 100% }` makes this flex item
     claim the whole row, squeezing the "Forgot password?" link into a
     two-line wrap. We don't set width via class, so the element rule
     wins — pin it back to content width. */
  width: auto;
  color: var(--gray-700, #595959);
  cursor: pointer;
}

/* 4.527.0 — the "?" disclosure next to each checkbox. This template
   renders inside the ACTIVE THEME, whose global `button` rule normally
   supplies a filled background, padding and a border radius, so every
   one of those is reset explicitly rather than inherited. Sized in rem
   so it tracks the buyer's text-size preference. */
.erpc-auth-help {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--gray-400, #999);
  border-radius: 50%;
  background: transparent;
  color: var(--gray-700, #595959);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.erpc-auth-help:hover {
  border-color: var(--link-color, #0073e6);
  color: var(--link-color, #0073e6);
}

.erpc-auth-help:focus-visible {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 2px;
}

/* The explanation panel. `flex-basis: 100%` drops it onto its own line
   beneath the checkbox row (the row sets `flex-wrap: wrap`). `[hidden]`
   is re-asserted because the flex `display` above would otherwise win
   over the UA's `[hidden] { display: none }`. */
.erpc-auth-help__tip {
  flex: 0 0 100%;
  margin: 0.25rem 0 0;
  color: var(--gray-700, #595959);
  font-size: 0.8rem;
  line-height: 1.4;
}

.erpc-auth-help__tip[hidden] {
  display: none;
}

.erpc-auth-link {
  color: var(--link-color, #0073e6);
  text-decoration: none;
}

.erpc-auth-link:hover {
  color: var(--link-hover-color, #005bb5);
  text-decoration: underline;
}

.erpc-auth-error {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--red-100, #ffcccc);
  color: var(--red-700, #660000);
  border: 1px solid var(--red-200, #ff9999);
  border-radius: 4px;
  font-size: 0.85rem;
}

.erpc-auth-submit {
  appearance: none;
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--btn-primary-text, #ffffff);
  border: none;
  border-radius: 4px;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms;
}

.erpc-auth-submit:hover {
  background: var(--btn-primary-bg-hover, #0d5dda);
}

.erpc-auth-submit:disabled,
.erpc-auth-submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* 4.165.1 — "Continue as guest" secondary CTA on /signup/. Sits below
   the primary submit, separated by an "or" divider. Styled as a quieter
   secondary action (white bg, brand-blue border + text) so it reads as
   the alternative path rather than competing with the primary. */
.erpc-auth-submit--secondary {
  background: var(--surface-base, #ffffff);
  color: var(--btn-primary-bg, #0a48a8);
  border: 1px solid var(--btn-primary-bg, #0a48a8);
  margin-top: 0;
}
.erpc-auth-submit--secondary:hover {
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--btn-primary-text, #ffffff);
}
.erpc-auth-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--gray-700, #595959);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.erpc-auth-separator::before,
.erpc-auth-separator::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: var(--gray-300, #bfbfbf);
}
.erpc-auth-fineprint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--gray-700, #595959);
  text-align: center;
}

/* 4.323.0 — Social sign-in (Google / Office 365) buttons, rendered above the
   form on /login/ + /join/ by the social_login module. Full-width neutral
   buttons with a per-provider accent bar; the shared "or" separator below them
   divides social from the email/password path. */
.erpc-auth-sso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 4px;
}
.erpc-auth-sso .erpc-auth-separator {
  margin: 14px 0 0;
}
.erpc-auth-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  background: var(--surface-base, #ffffff);
  color: var(--gray-900, #262626);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.erpc-auth-sso-btn__logo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: block;
}
.erpc-auth-sso-btn:hover,
.erpc-auth-sso-btn:focus-visible {
  background: var(--gray-100, #f2f2f2);
  border-color: var(--gray-700, #595959);
}
.erpc-auth-sso-btn--google {
  border-left: 4px solid #4285f4; /* Google blue */
}
.erpc-auth-sso-btn--microsoft {
  border-left: 4px solid #0067b8; /* Microsoft blue */
}

.erpc-auth-foot {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-700, #595959);
  text-align: center;
}

.erpc-auth-success {
  padding: 1rem;
  background: var(--green-100, #d4e7d1);
  border: 1px solid var(--green-200, #a9cfa2);
  border-radius: 4px;
  color: var(--green-700, #1c4f13);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* The `display: flex` above out-ranks the UA `[hidden] { display: none }`,
   so the success panel would paint on first load instead of only after a
   successful submit. Restore the hidden behaviour at higher specificity.
   Same trap + fix pattern as the cart/ship-to panels in this file. */
.erpc-auth-success[hidden] {
  display: none;
}

/* [erpc_auth_links] shortcode — 4.42.4 */
.erpc-auth-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.9rem;
}

.erpc-auth-links--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.erpc-auth-links__link {
  color: var(--link-color, #0073e6);
  text-decoration: none;
}

.erpc-auth-links__link:hover {
  color: var(--link-hover-color, #005bb5);
  text-decoration: underline;
}

.erpc-auth-links__user {
  color: var(--gray-700, #595959);
}

.erpc-auth-links__logout {
  display: inline;
  margin: 0;
}

.erpc-auth-links__link--logout {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--link-color, #0073e6);
  cursor: pointer;
}

.erpc-auth-links__link--logout:hover {
  color: var(--link-hover-color, #005bb5);
  text-decoration: underline;
}

/* Storefront toast — bottom-right floater for add-to-cart confirms and
   other transient cart messages. Roll-our-own because SUI's openNotice
   is admin-side only and we don't load it on the storefront. */

/* ── Unified Notice component (4.59.0) ────────────────────────────────────
   Two display modes share the same content shell; they differ only in
   host position and width. The pre-4.59 .erpc-storefront-toast classes
   below stay around for back-compat (storefront-product's add-to-cart
   path still emits them transitively via the shim). */
.erpc-storefront-notice-host {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.erpc-storefront-notice-host--toast {
  right: 1rem;
  bottom: 1rem;
  align-items: flex-end;
}
.erpc-storefront-notice-host--banner {
  /* Top-center under the chrome bar. The storefront chrome's height
     varies between themes, so we expose a CSS var (--erpc-chrome-height)
     that themes can override; default 6rem clears the typical 80px nav.
     WP's admin bar height is added on top via .admin-bar rules below. */
  top: calc( var( --erpc-chrome-height, 6rem ) + 0.75rem );
  left: 0;
  right: 0;
  align-items: center;
}
/* WP admin bar offset — 32px on desktop, 46px on mobile per WP core. The
   admin-bar class lands on <body> only when wp_admin_bar is rendered,
   so logged-out visitors don't pay the offset. */
body.admin-bar .erpc-storefront-notice-host--banner {
  top: calc( var( --erpc-chrome-height, 6rem ) + 32px + 0.75rem );
}
@media screen and (max-width: 782px) {
  body.admin-bar .erpc-storefront-notice-host--banner {
    top: calc( var( --erpc-chrome-height, 6rem ) + 46px + 0.75rem );
  }
}

.erpc-storefront-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.erpc-storefront-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Toast variant — narrow dark pill, compact. Same look as the legacy
   .erpc-storefront-toast for consistency. */
.erpc-storefront-notice--toast {
  background: var(--gray-900, #262626);
  color: var(--text-inverse, #ffffff);
  max-width: 380px;
}
.erpc-storefront-notice--toast.erpc-storefront-notice--success { background: var(--success-fill, #047857); /* was #047857 */ }
.erpc-storefront-notice--toast.erpc-storefront-notice--error   { background: var(--error-color, #dc2626); /* 4.400.0 unified error red — was #B91C1C */ }
.erpc-storefront-notice--toast .erpc-storefront-notice__link   { color: var(--text-inverse, #ffffff); }
.erpc-storefront-notice--toast .erpc-storefront-notice__dismiss { color: var(--text-inverse, #ffffff); }

/* Banner variant — wider, colored by kind. The bottom-out animation
   reverses (translates up) since the host is anchored to the top. */
.erpc-storefront-notice--banner {
  min-width: 360px;
  max-width: min(720px, calc(100vw - 2rem));
  border: 1px solid transparent;
  background: var(--surface-info, #eff6ff);
  color: var(--text-info, #172e73); /* was #1E3A8A */
  border-color: var(--border-info, #a6c8ff); /* was #BFDBFE */
}
.erpc-storefront-notice--banner.erpc-storefront-notice--success {
  background: var(--surface-success, #ecfdf5);
  color: var(--text-success, #065f46); /* was #065F46 */
  border-color: var(--border-success, #a7f3d0);
}
.erpc-storefront-notice--banner.erpc-storefront-notice--error {
  background: var(--surface-error, #fef2f2);
  /* 4.400.0 — NOT unified to --error-color (#dc2626): as TEXT on this pale bg it's
     4.41:1, fails WCAG AA. Kept darker #991B1B (7.6:1). Error red unifies on the
     fills (toast bg, danger buttons), where it passes. */
  color: var(--text-error-strong, #991b1b);
  border-color: var(--border-error, #f5b7b1); /* was #FCA5A5 */
}

.erpc-storefront-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}
.erpc-storefront-notice__msg {
  /* Allow wraps on long messages; banner mode benefits from this most. */
  overflow-wrap: anywhere;
}
.erpc-storefront-notice__link {
  color: inherit;
  text-decoration: underline;
  margin-left: 0.5rem;
  white-space: nowrap;
  font-weight: 600;
}
.erpc-storefront-notice__link:hover { text-decoration: none; }

.erpc-storefront-notice__dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  padding: 0 0 0 0.5rem;
}
.erpc-storefront-notice__dismiss:hover { opacity: 1; }

/* Legacy toast styles below — pre-4.59. Kept for back-compat with any
   page that still emits them directly. New surfaces should use the
   unified component above via window.erpcStorefrontNotice(). */
.erpc-storefront-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.erpc-storefront-toast {
  background: var(--gray-900, #262626);
  color: var(--text-inverse, #ffffff);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  max-width: 380px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: auto;
}

.erpc-storefront-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.erpc-storefront-toast--error {
  background: var(--red-600, #90090b);
}

.erpc-storefront-toast-link {
  color: var(--text-inverse, #ffffff);
  text-decoration: underline;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.erpc-storefront-toast-link:hover {
  color: var(--text-inverse, #ffffff);
  text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* /cart/ page — 4.44.1                                              */
/* ---------------------------------------------------------------- */

.erpc-cart-page {
  max-width: var(--erpc-content-max, 1400px);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.erpc-cart-page__header {
  margin-bottom: 1.5rem;
}

.erpc-cart-page__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900, #262626);
}

/* ── Cart toast — uuid-mode banner ──────────────────────────────────
   Pinned at the top of the cart page when the buyer is viewing a
   non-active cart (own saved cart OR a shared cart). Two visual
   variants:
     .erpc-cart-toast--saved  — own saved cart (informational)
     .erpc-cart-toast--shared — someone else's cart (more prominent)
   Buttons inside follow the same primary/ghost split as the cart
   checkout button so the visual language stays consistent. */
.erpc-cart-toast {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--gray-200, #d9d9d9);
  background: var(--gray-50, #f8fafc);
}
.erpc-cart-toast--shared {
  /* Shared from another buyer — slightly stronger affordance. */
  border-color: var(--blue-300, #7aaeff);
  background: var(--blue-50, #eff6ff);
}
.erpc-cart-toast__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.erpc-cart-toast__heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900, #262626);
  line-height: 1.3;
}
.erpc-cart-toast__detail {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-700, #595959);
  line-height: 1.4;
}
.erpc-cart-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .erpc-cart-toast {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .erpc-cart-toast__actions {
    flex-shrink: 0;
  }
}

/* Buttons inside the toast. Same shape language as
   .erpc-cart-checkout-button (rounded, padded, semibold). Two
   visual variants — secondary (filled, the primary call) and ghost
   (outlined, the back-out). */
.erpc-cart-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  /* 300ms to match .btn-primary (4.251.4) — at the old 120ms the
     background fade was perceptually instant ("they just change state"),
     glaring next to the PDP button's visible 0.3s fade. */
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.erpc-cart-button:hover { text-decoration: none; }
.erpc-cart-button:focus-visible {
  outline: 2px solid var(--link-color, #0073e6);
  outline-offset: 2px;
}
.erpc-cart-button[disabled],
.erpc-cart-button[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.erpc-cart-button--secondary {
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--btn-primary-text, #ffffff);
  border-color: var(--btn-primary-bg, #0a48a8);
}
.erpc-cart-button--secondary:hover {
  background: var(--btn-primary-bg-hover, #0d5dda);
  border-color: var(--btn-primary-bg-hover, #0d5dda);
  color: var(--btn-primary-text, #ffffff);
}

.erpc-cart-button--ghost {
  background: transparent;
  color: var(--gray-900, #262626);
  border-color: var(--gray-300, #bfbfbf);
}
.erpc-cart-button--ghost:hover {
  background: var(--gray-100, #f2f2f2);
  border-color: var(--gray-400, #a6a6a6);
  color: var(--gray-900, #262626);
}

/* Destructive action — red outline that fills on hover. Used by the bulk
   "Delete" button. Mirrors the ship-to picker's danger affordance
   (--error-color) rather than the brand brick-red (--red-500), which reads
   as a brand accent, not "this removes things". @since 4.192.0 */
.erpc-cart-button--danger {
  background: transparent;
  color: var(--error-color, #dc2626);
  border-color: rgba( 220, 38, 38, 0.4 );
}
.erpc-cart-button--danger:hover {
  background: rgba( 220, 38, 38, 0.08 );
  border-color: var(--error-color, #dc2626);
  color: var(--error-color, #dc2626);
}

/* ── Bulk editing (Settings → Cart → Allow bulk editing) ────────────
   Opt-in. storefront-cart.js injects a select-all <th> + a toolbar above
   the lines table and a checkbox cell per row; the page-header Empty cart
   button is always present but JS-revealed only when lines exist. */

/* Cart action bar — sits above the items table. Holds the Empty Cart button
   (pinned right) and, when bulk editing is on, the injected selection box to
   its left. flex-wrap so the two stack on narrow viewports. */
.erpc-cart-actionbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* Empty Cart — red ghost button (the `--danger` variant: red outline + text,
   transparent fill), pinned to the right (margin-left:auto) so it holds the
   top-right slot whether or not the bulk selection box is present to its
   left. The armed state (two-click confirm, "Click again to confirm") fills
   solid red to escalate the warning. */
.erpc-cart-empty-btn {
  margin-left: auto;
}
.erpc-cart-empty-btn.is-armed,
.erpc-cart-empty-btn.is-armed:hover {
  background: var(--error-color, #dc2626);
  border-color: var(--error-color, #dc2626);
  color: var(--text-inverse, #ffffff);
}

/* Leading checkbox column — narrow + centered, like the remove column. */
.erpc-cart-lines__table .erpc-cart-lines__select-col {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}
.erpc-cart-lines__select,
.erpc-cart-lines__select-all {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--btn-primary-bg, #0a48a8);
}

/* Bulk-action toolbar — appears above the table only while ≥1 row is
   selected. The [hidden] guard beats the `display: flex` below. */
.erpc-cart-lines__bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1 1 auto;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  background: var(--gray-100, #f2f2f2);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
}
.erpc-cart-lines__bulkbar-count {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-900, #262626);
}
/* Resting state — nothing selected. Keep the bar's layout box (so the table
   never reflows) but hide it: visibility leaves the height in place while the
   gray background / border / buttons only paint once visible — so at rest
   it's just reserved whitespace, and the toolbar reveals in place on select. */
.erpc-cart-lines__bulkbar.is-empty {
  visibility: hidden;
}
.erpc-cart-lines__bulkbar-actions {
  display: flex;
  gap: 0.5rem;
}

/* Hide buyer-only cart actions that don't apply when viewing a
   non-active cart (own saved cart or a shared cart). Save-cart in
   particular would save the VIEWER'S ACTIVE cart, not the cart on
   screen — confusing — so it's hidden until you're back on /cart/.
   SFL "Move to / from cart" is similarly per-buyer-active-cart. */
.erpc-cart-page--uuid-mode [data-erpc-cart-save],
.erpc-cart-page--uuid-mode [data-erpc-cart-sfl],
.erpc-cart-page--uuid-mode [data-erpc-cart-line-sfl],
.erpc-cart-page--uuid-mode .erpc-cart-actionbar {
  display: none !important;
}

.erpc-cart-state[data-erpc-cart-state="loading"],
.erpc-cart-state[data-erpc-cart-state="empty"],
.erpc-cart-state[data-erpc-cart-state="error"] {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--gray-700, #595959);
}

.erpc-cart-error {
  color: var(--red-700, #660000);
  font-weight: 600;
}

.erpc-cart-link,
.erpc-cart-button-link {
  color: var(--link-color, #0073e6);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.erpc-cart-link:hover,
.erpc-cart-button-link:hover { color: var(--link-hover-color, #005bb5); text-decoration: underline; }

/* Invoice-style identity header — company name + customer #. Sits above
   the three-column address row. Right-aligned meta keeps room on the left
   for future PO / dated-stamp fields without reflowing the layout. */
.erpc-cart-identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 0 1rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--gray-300, #bfbfbf);
}
.erpc-cart-identity__primary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.erpc-cart-identity__company {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900, #262626);
  letter-spacing: -0.01em;
}
.erpc-cart-identity__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-700, #595959);
}
.erpc-cart-identity__meta-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gray-600, #737373);
  margin-right: 0.4rem;
}

/* Three-column address row — Warehouse | Bill to | Ship to. Each cell
   stacks an uppercase label over a multi-line address. Subtle vertical
   dividers between cells via inset border on cells after the first. */
.erpc-cart-addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1.25rem;
}
@media (min-width: 720px) {
  .erpc-cart-addresses {
    grid-template-columns: repeat( 3, 1fr );
    gap: 0;
  }
  .erpc-cart-addresses > .erpc-cart-address-cell + .erpc-cart-address-cell {
    border-left: 1px solid var(--gray-200, #d9d9d9);
    padding-left: 1.25rem;
  }
}

.erpc-cart-address-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: 1.25rem;
  position: relative;
}
@media (max-width: 719px) {
  .erpc-cart-address-cell + .erpc-cart-address-cell {
    border-top: 1px solid var(--gray-200, #d9d9d9);
    padding-top: 0.75rem;
  }
}

/* Pencil edit affordance on editable address cells (currently ship-to
   only). Visible on hover/focus on pointer devices; always-visible at
   touch breakpoints so it's discoverable without a hover state. JS
   toggles the `hidden` attribute when the customer's configuration
   wouldn't offer the buyer any choice (single shipto, no one-time
   allowed). */
.erpc-cart-address-cell__edit {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--gray-600, #737373);
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.erpc-cart-address-cell__edit svg {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
}
.erpc-cart-address-cell:hover .erpc-cart-address-cell__edit,
.erpc-cart-address-cell__edit:focus-visible {
  opacity: 1;
}
.erpc-cart-address-cell__edit:hover,
.erpc-cart-address-cell__edit:focus-visible {
  background: var(--gray-100, #f2f2f2);
  border-color: var(--gray-300, #bfbfbf);
  color: var(--gray-900, #262626);
  outline: none;
}
@media (hover: none) {
  /* Touch devices have no hover state — surface the affordance as
     "always visible" rather than relying on a tap to expose it. */
  .erpc-cart-address-cell__edit {
    opacity: 0.7;
  }
}

.erpc-cart-address-cell__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-600, #737373);
  font-weight: 600;
  margin: 0;
}

.erpc-cart-address-cell__body {
  font-style: normal;
  color: var(--gray-900, #262626);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}
.erpc-cart-address-cell__line {
  display: block;
}
.erpc-cart-address-cell__line:first-child {
  font-weight: 600;
}

/* Description column on the items table — flex-1 so it absorbs spare
   width without pushing the right-aligned numeric columns around. */
.erpc-cart-lines__desc-col {
  color: var(--gray-700, #595959);
  font-size: 0.9rem;
  max-width: 360px;
  line-height: 1.35;
}

/* Backorder pill — appears in the description cell when CSD's totals
   call dropped a line (netavail=0 at the cart warehouse) and the cart
   re-priced it via /storefront/pricing. Two flavors:
     - default (amber): "Backordered" — the buyer can place this order,
       CSD creates the backorder, item ships when stock returns.
     - .is-blocked (red): "Not available" — the buyer's effective
       allow_backorder is false (admin set Backorders=No globally, OR
       Backorders=CSD Default + customer bofl=N). They must remove the
       line to check out. Interim until Saved-for-Later auto-move ships;
       at that point this pill flavor is unreachable. */
.erpc-cart-lines__backorder-pill {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--surface-warning, #fef3c7) /* was #fff4e5 */;
  color: var(--text-warning, #6b5200); /* was #8A4B00 */
  border: 1px solid var(--border-warning, #ffe599); /* was #FCD9A3 */
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.erpc-cart-lines__backorder-pill.is-blocked {
  background: var(--surface-error, #fef2f2) /* was #fdecea */;
  color: var(--text-error-strong, #991b1b); /* was #8A1F18 */
  border-color: var(--border-error, #f5b7b1);
}

/* Summary footnote that explains why tax + freight don't include
   backordered lines. Shown only when any cart line is backordered;
   storefront-cart.js toggles the [hidden] attribute in renderTotals.
   .is-blocked flips the palette + copy when checkout is blocked because
   the buyer isn't allowed to backorder. */
.erpc-cart-summary__backorder-note {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--surface-warning, #fef3c7) /* was #fff4e5 */;
  color: var(--text-warning, #6b5200); /* was #6F3F00 */
  border-left: 3px solid var(--border-warning, #ffe599); /* was #FCD9A3 */
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.45;
}
.erpc-cart-summary__backorder-note.is-blocked {
  background: var(--surface-error, #fef2f2) /* was #fdecea */;
  color: var(--text-error-strong, #991b1b); /* was #6E1F18 */
  border-left-color: var(--border-error, #f5b7b1);
}

/* ── Saved for Later section ─────────────────────────────────────────────
   Rendered below the cart-lines table when the buyer has SFL entries.
   Visually quieter than the cart table — narrower padding, lighter type,
   no Unit Price / Line Total columns since these items can't be ordered
   right now. Mirrors `.erpc-cart-lines__table` structure so the two read
   as a coherent pair. */
.erpc-cart-sfl {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--surface-subtle, #fafafa);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: 8px;
}
.erpc-cart-sfl__count {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gray-600, #737373);
}
.erpc-cart-sfl__table {
  width: 100%;
  border-collapse: collapse;
  /* 4.61.2 — fixed layout so the colgroup widths actually pin each
     column. Without this, empty cells collapse and qty drifts right. */
  table-layout: fixed;
}
.erpc-cart-sfl__cg-image  { width: 180px; }
.erpc-cart-sfl__cg-item   { width: 11rem; }
.erpc-cart-sfl__cg-desc   { width: auto; }
.erpc-cart-sfl__cg-qty    { width: 6rem; }
.erpc-cart-sfl__cg-filler { width: 12rem; }
.erpc-cart-sfl__cg-remove { width: 2.5rem; }
.erpc-cart-sfl__table th,
.erpc-cart-sfl__table td {
  padding: 0.55rem 0.5rem;
  font-size: 0.9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.erpc-cart-sfl__table th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600, #737373);
  text-align: left;
}
.erpc-cart-sfl__qty-col,
.erpc-cart-sfl__notify-col,
.erpc-cart-sfl__actions-col {
  text-align: right;
  white-space: nowrap;
}
.erpc-cart-sfl__actions-col { width: 1%; }
.erpc-cart-sfl__sku-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  font-weight: 600;
}
.erpc-cart-sfl__uom {
  color: var(--gray-600, #737373);
  font-size: 0.85rem;
}
.erpc-cart-sfl__desc-col {
  color: var(--gray-700, #595959);
  max-width: 360px;
  line-height: 1.35;
}
/* 4.61.2 — SFL row action link. Lives in the description cell under the
   description text — same position as the cart-line "Save for later"
   link above so the two surfaces visually match. Per-row conditional:
   in-stock entries render "Move to cart"; OOS entries render "Notify Me".
   While /storefront/pricing is in flight, the slot renders a skeleton
   bar instead so the correct link doesn't visibly swap in later. */
.erpc-cart-sfl__line-actions {
  margin-top: 0.375rem;
}
.erpc-cart-sfl__action-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--action-blue, #1d4ed8);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.erpc-cart-sfl__action-link:hover,
.erpc-cart-sfl__action-link:focus-visible {
  color: var(--action-blue-hover, #1e40af); /* was #1E40AF */
  text-decoration-thickness: 2px;
}
.erpc-cart-sfl__action-link:focus-visible {
  outline: 2px solid var(--blue-300, #7aaeff); /* was #93C5FD */
  outline-offset: 2px;
  border-radius: 2px;
}
.erpc-cart-sfl__action-skel {
  display: inline-block;
  width: 90px;
  height: 0.95em;
  vertical-align: middle;
}
.erpc-cart-sfl__action-skel .storefront-pricing-skeleton {
  display: block;
  width: 100%;
  height: 100%;
}
.erpc-cart-sfl__remove-btn {
  padding: 0.2rem 0.55rem;
  background: transparent;
  color: var(--gray-600, #737373);
  border: none;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.erpc-cart-sfl__remove-btn:hover {
  color: var(--text-error-strong, #991b1b); /* was #B91C1C */
  background: var(--surface-error, #fef2f2);
}

/* Pending-state styling — scoped to ONLY the cells that the server
   still has to recompute (tax, freight, total). Subtotal and the line
   price / total cells are exact local math (unitBySku × qty), so they
   stay at full opacity to read as "instantly updated". The shimmer bar
   on the summary still signals "official numbers refreshing". For the
   no-price-yet case (first cart load before /totals lands), the cells
   render a skel() placeholder which carries its own pending visual. */
.erpc-cart-summary[data-erpc-pending="true"] [data-erpc-cart-tax],
.erpc-cart-summary[data-erpc-pending="true"] [data-erpc-cart-freight],
.erpc-cart-summary[data-erpc-pending="true"] [data-erpc-cart-total] {
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.erpc-cart-summary[data-erpc-pending="true"]::after {
  content: '';
  position: absolute;
  inset: auto 1.25rem 1rem;
  height: 2px;
  background: linear-gradient( 90deg, transparent, var(--gray-400, #a6a6a6), transparent );
  animation: erpc-cart-pending-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
.erpc-cart-summary { position: relative; }
@keyframes erpc-cart-pending-shimmer {
  0%, 100% { transform: translateX(-100%); opacity: 0.0; }
  50%      { transform: translateX(0);     opacity: 0.6; }
}

/* ---------------------------------------------------------------- */
/* Ship-to picker modal (4.47.10)                                    */
/* ---------------------------------------------------------------- */

.erpc-cart-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.erpc-cart-modal[hidden] {
  display: none !important;
}
.erpc-cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
}
.erpc-cart-modal__panel {
  position: relative;
  background: var(--surface-base, #ffffff);
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.erpc-cart-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
  gap: 0.5rem;
}
.erpc-cart-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
}
.erpc-cart-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--gray-600, #737373);
}
.erpc-cart-modal__close:hover,
.erpc-cart-modal__close:focus-visible {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
  outline: none;
}
.erpc-cart-modal__close svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.erpc-cart-modal__body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.erpc-cart-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--gray-200, #d9d9d9);
  background: var(--bg-200, #f9f9f7);
}
.erpc-cart-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  /* House CTA fade — matches the PDP .btn-primary (4.251.6 sweep: these
     hover-interactive primaries had no transition and snapped). */
  transition: all 0.3s;
}
.erpc-cart-modal__btn--ghost {
  background: transparent;
  border-color: var(--gray-300, #bfbfbf);
  color: var(--gray-800, #404040);
}
.erpc-cart-modal__btn--ghost:hover {
  background: var(--gray-100, #f2f2f2);
}
.erpc-cart-modal__btn--primary {
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--btn-primary-text, #ffffff);
}
.erpc-cart-modal__btn--primary:hover {
  background: var(--btn-primary-bg-hover, #0d5dda);
}
.erpc-cart-modal__btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Radio-list inside the modal body. Each row is a full-width label
   wrapping a hidden radio input + the formatted address. Selected
   state uses an outline + tinted background so it reads as picked
   without depending on the native radio glyph. */
.erpc-cart-shipto-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erpc-cart-shipto-modal__item {
  margin: 0;
}
.erpc-cart-shipto-modal__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.erpc-cart-shipto-modal__row:hover {
  border-color: var(--gray-500, #8c8c8c);
}
.erpc-cart-shipto-modal__row input[type="radio"] {
  margin: 0.25rem 0 0;
  flex-shrink: 0;
}
.erpc-cart-shipto-modal__row input[type="radio"]:checked + .erpc-cart-shipto-modal__row-content {
  font-weight: 500;
}
.erpc-cart-shipto-modal__item--selected .erpc-cart-shipto-modal__row {
  border-color: var(--btn-primary-bg, #0a48a8);
  background: var(--bg-200, #f9f9f7);
}
.erpc-cart-shipto-modal__row-content address {
  font-style: normal;
  color: var(--gray-800, #404040);
  font-size: 0.9rem;
  line-height: 1.45;
}
.erpc-cart-shipto-modal__row-content .erpc-cart-shipto-modal__code {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: var(--gray-900, #262626);
}

/* One-time entry — same row shell, distinct content. When picked, the
   form below the list reveals. */
.erpc-cart-shipto-modal__form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200, #d9d9d9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.75rem;
}
.erpc-cart-shipto-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.erpc-cart-shipto-modal__field--full {
  grid-column: 1 / -1;
}
.erpc-cart-shipto-modal__field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700, #595959);
}
.erpc-cart-shipto-modal__field input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-base, #ffffff);
}
.erpc-cart-shipto-modal__field input[aria-invalid="true"] {
  border-color: var(--error-color, #dc2626);
}
.erpc-cart-shipto-modal__field-error {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--error-color, #dc2626);
  min-height: 0.95rem;
}
@media (max-width: 540px) {
  .erpc-cart-shipto-modal__form { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Shared ship-to picker — 4.55.0                                    */
/* Footer-injected modal shared by cart pencil, chrome "Deliver to"  */
/* button, welcome banner "Change Shipto", and checkout. One panel,  */
/* two view modes (list + entry), max-height + scroll, live search.  */
/* ---------------------------------------------------------------- */

.erpc-shipto-picker {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.erpc-shipto-picker[hidden] { display: none; }
.erpc-shipto-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.erpc-shipto-picker__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-base, #ffffff);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}
.erpc-shipto-picker__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-shipto-picker__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-900, #262626);
}
.erpc-shipto-picker__back,
.erpc-shipto-picker__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--gray-700, #595959);
  cursor: pointer;
}
.erpc-shipto-picker__back:hover,
.erpc-shipto-picker__close:hover {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
}
.erpc-shipto-picker__back[hidden] { display: none; }
.erpc-shipto-picker__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 4.171.1 — search/list/empty/cta sit directly in `__body` now that
     the dual `__view` wrapper is gone (entry moved to its own modal).
     `gap` here preserves the breathing room the old `__view` gave us
     between the search input and the first list row. */
  gap: 0.85rem;
  padding: 1rem;
  overflow: hidden;
}
.erpc-shipto-picker__view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.erpc-shipto-picker__view[hidden] { display: none; }
.erpc-shipto-picker__search-wrap {
  flex: 0 0 auto;
}
.erpc-shipto-picker__search {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  background: var(--surface-base, #ffffff);
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}
.erpc-shipto-picker__list {
  list-style: none;
  margin: 0;
  padding: 0 0.25rem 0 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erpc-shipto-picker__item { margin: 0; }
.erpc-shipto-picker__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.erpc-shipto-picker__row:hover { border-color: var(--gray-500, #8c8c8c); }
.erpc-shipto-picker__row input[type="radio"] {
  margin: 0.25rem 0 0;
  flex-shrink: 0;
}
.erpc-shipto-picker__row input[type="radio"]:checked + .erpc-shipto-picker__row-content { font-weight: 500; }
.erpc-shipto-picker__item--selected .erpc-shipto-picker__row {
  border-color: var(--btn-primary-bg, #0a48a8);
  background: var(--bg-200, #f9f9f7);
}
/* Row content lays out address + chip side-by-side so every row's
   address starts at the same left edge regardless of chip variant. */
.erpc-shipto-picker__row-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.erpc-shipto-picker__row-content address {
  font-style: normal;
  color: var(--gray-800, #404040);
  font-size: 0.9rem;
  line-height: 1.45;
  min-width: 0;
}
/* Row chip — same slot as the ARSS shipto_code used to occupy. Three
   variants: `--code` (ARSS, neutral/strong), `--billto` (always-present
   ARSC row), `--onetime` (staged or persisted user-entered override).
   Same baseline so search filtering reads them as one column. */
.erpc-shipto-picker__chip {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}
.erpc-shipto-picker__chip--code {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.erpc-shipto-picker__chip--billto {
  background: rgba( 10, 72, 168, 0.10 );
  color: var(--btn-primary-bg, #0a48a8);
}
.erpc-shipto-picker__chip--onetime,
.erpc-shipto-picker__chip--usercreated {
  background: rgba( 202, 138, 4, 0.12 );
  color: var(--text-warning, #6b5200); /* was #92580c */
}

/* 4.536.0 — Pending Reviews. A held new address wears an amber "Awaiting
   review" chip; a waiting change shows its requested values in an amber
   block under the current address. Warning tokens, as the account notices. */
.erpc-shipto-picker__notice {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--surface-warning, #fef3c7);
  border-left: 3px solid var(--border-warning, #ffe599);
  border-radius: 4px;
  color: var(--text-warning, #6b5200);
  font-size: 0.875rem;
}
.erpc-shipto-picker__chip--pending {
  background: var(--surface-warning, #fef3c7);
  color: var(--text-warning, #6b5200);
}
.erpc-profile__review-block {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-warning, #fef3c7);
  border-left: 3px solid var(--border-warning, #ffe599);
  border-radius: 4px;
  color: var(--text-warning, #6b5200);
  font-size: 0.875rem;
  line-height: 1.45;
}
.erpc-profile__review-block address {
  font-style: normal;
  color: inherit;
}
.erpc-profile__review-tag {
  display: inline-block;
  font-weight: 600;
}
.erpc-profile__review-label {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
}
.erpc-profile__review-cancel {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.4rem;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-link, #0a48a8);
  text-decoration: underline;
  cursor: pointer;
}
.erpc-profile__review-cancel:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.erpc-profile__billing-current {
  margin: 0 0 0.75rem;
  font-style: normal;
}
.erpc-profile__review-note {
  margin: 0 0 0.75rem;
}

/* Right-side aside on each list row — holds the chip and (when present)
   the edit/delete action buttons. Vertical stack so the chip sits at
   the top-right and actions fall below it. */
.erpc-shipto-picker__row-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.erpc-shipto-picker__row-actions {
  display: flex;
  gap: 0.25rem;
}
.erpc-shipto-picker__row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--gray-700, #595959);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.erpc-shipto-picker__row-action:hover {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
  border-color: var(--gray-300, #bfbfbf);
}
.erpc-shipto-picker__row-action--danger:hover {
  background: rgba( 220, 38, 38, 0.08 );
  color: var(--error-color, #dc2626);
  border-color: rgba( 220, 38, 38, 0.3 );
}
.erpc-shipto-picker__row-action svg {
  width: 14px;
  height: 14px;
}
.erpc-shipto-picker__empty {
  margin: 0;
  padding: 0.85rem;
  color: var(--gray-600, #737373);
  font-size: 0.9rem;
  text-align: center;
}
.erpc-shipto-picker__add-cta {
  flex: 0 0 auto;
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--gray-400, #a6a6a6);
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  color: var(--gray-800, #404040);
  cursor: pointer;
  font-size: 0.92rem;
}
.erpc-shipto-picker__add-cta:hover {
  border-color: var(--btn-primary-bg, #0a48a8);
  color: var(--gray-900, #262626);
}

/* Entry modal — layered above the picker. The compound class
   `.erpc-shipto-picker .erpc-shipto-entry` inherits the base
   fixed-inset/flex/backdrop styling; only z-index needs to lift above
   the list modal's 1100. */
.erpc-shipto-entry {
  z-index: 1110;
}

/* Visibility radio fieldset at the top of the Add Address form. Two
   stacked radio rows ("Save just for me" / "Save for everyone at X").
   Hidden on edit mode (visibility isn't editable post-create). */
.erpc-shipto-picker__visibility {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  background: var(--gray-50, #fafafa);
}
.erpc-shipto-picker__visibility legend {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700, #595959);
  padding: 0 0.25rem;
}
.erpc-shipto-picker__visibility-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.92rem;
  color: var(--gray-900, #262626);
  cursor: pointer;
}
.erpc-shipto-picker__visibility-option input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}

/* Entry view — same 8 fields as the legacy cart one-time form, but
   laid out in a 2-column grid that collapses below 540px. */
.erpc-shipto-picker__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.erpc-shipto-picker__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.erpc-shipto-picker__field--full { grid-column: 1 / -1; }
/* Same specificity bump as the input rule below — block themes
   typically set label styles at (0,1,0) and would win the cascade. */
.erpc-shipto-picker .erpc-shipto-picker__field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700, #595959);
  margin-bottom: 0;
  display: block;
}
/* Specificity bumped to `.erpc-shipto-picker .erpc-shipto-picker__field input`
   (4.169.6): block themes (erp-theme + WP block defaults) emit
   `input { border: 0 }` and similar resets at the same (0,1,1) specificity
   as the bare `.erpc-shipto-picker__field input` rule; source order then
   decided who won, and on the storefront the theme won. Scoping under the
   `.erpc-shipto-picker` root takes us to (0,2,1) which beats every default
   theme reset without needing `!important`. */
.erpc-shipto-picker .erpc-shipto-picker__field input,
.erpc-shipto-picker .erpc-shipto-picker__field input[type="text"],
.erpc-shipto-picker .erpc-shipto-picker__field input[type="tel"] {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-base, #ffffff);
  color: var(--gray-900, #262626);
  line-height: 1.4;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.erpc-shipto-picker .erpc-shipto-picker__field input:focus {
  border-color: var(--btn-primary-bg, #0a48a8);
  box-shadow: 0 0 0 2px rgba( 10, 72, 168, 0.15 );
}
.erpc-shipto-picker .erpc-shipto-picker__field input[aria-invalid="true"] {
  border-color: var(--error-color, #dc2626);
}
.erpc-shipto-picker__field-error {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--error-color, #dc2626);
  min-height: 0.95rem;
}
.erpc-shipto-picker__req { color: var(--error-color, #dc2626); }

.erpc-shipto-picker__error {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  color: var(--error-color, #dc2626);
  background: var(--surface-error, #fef2f2);
  border-top: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-shipto-picker__error[hidden] { display: none; }

.erpc-shipto-picker__footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--gray-200, #d9d9d9);
  background: var(--gray-50, #fafafa);
}
.erpc-shipto-picker__btn {
  padding: 0.55rem 1rem;
  border-radius: 4px;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  /* House CTA fade — matches the PDP .btn-primary (4.251.6 sweep: these
     hover-interactive primaries had no transition and snapped). */
  transition: all 0.3s;
}
.erpc-shipto-picker__btn--ghost {
  background: var(--surface-base, #ffffff);
  color: var(--gray-800, #404040);
  border-color: var(--gray-300, #bfbfbf);
}
.erpc-shipto-picker__btn--ghost:hover { background: var(--gray-100, #f2f2f2); }
.erpc-shipto-picker__btn--primary {
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--text-inverse, #ffffff);
}
.erpc-shipto-picker__btn--primary:hover { filter: brightness(0.95); }
.erpc-shipto-picker__btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 540px) {
  .erpc-shipto-picker__form { grid-template-columns: 1fr; }
  .erpc-shipto-picker__panel { max-height: 92vh; }
}

/* Chrome "Deliver to" button (4.55.0) — the plugin block emits the
   skeleton's existing class shell (`#nav-global-location-popover-link`,
   `.icon-svg`, `#delivery-block`, `.nav-line-1/2`) so theme CSS in
   erp-theme/style.css owns the visual layout. No plugin-side override
   here on purpose — the plugin block is a thin shim, not a re-skin. */

/* ---------------------------------------------------------------- */
/* /orders/{id}/ confirmation page — 4.46.6                          */
/* Mirrors the cart layout per Matt's "should match 99.9% of cart"   */
/* ask. Class hierarchy is parallel (.erpc-order-* vs .erpc-cart-*)  */
/* so the two pages can diverge later without touching each other.   */
/* ---------------------------------------------------------------- */

.erpc-order-page {
  max-width: var(--erpc-content-max, 1400px);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.erpc-order-page__header {
  margin-bottom: 1.5rem;
}
.erpc-order-page__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900, #262626);
}

.erpc-order-link {
  color: var(--link-color, #0073e6);
  text-decoration: none;
}
.erpc-order-link:hover { color: var(--link-hover-color, #005bb5); text-decoration: underline; }

.erpc-order-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--gray-900, #262626);
}

/* Identity strip — large company name + customer # below, bottom-border. */
.erpc-order-identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 0 1rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--gray-300, #bfbfbf);
}
.erpc-order-identity__primary { display: flex; flex-direction: column; gap: 0.25rem; }
.erpc-order-identity__company {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900, #262626);
  letter-spacing: -0.01em;
}
.erpc-order-identity__meta { margin: 0; font-size: 0.9rem; color: var(--gray-700, #595959); }
.erpc-order-identity__meta-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gray-600, #737373);
  margin-right: 0.4rem;
}

/* Three-column address row — Warehouse | Bill to | Ship to. */
.erpc-order-addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1.25rem;
}
@media (min-width: 720px) {
  .erpc-order-addresses {
    grid-template-columns: repeat( 3, 1fr );
    gap: 0;
  }
  .erpc-order-addresses > .erpc-order-address-cell + .erpc-order-address-cell {
    border-left: 1px solid var(--gray-200, #d9d9d9);
    padding-left: 1.25rem;
  }
}
.erpc-order-address-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: 1.25rem;
}
@media (max-width: 719px) {
  .erpc-order-address-cell + .erpc-order-address-cell {
    border-top: 1px solid var(--gray-200, #d9d9d9);
    padding-top: 0.75rem;
  }
}
.erpc-order-address-cell__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-600, #737373);
  font-weight: 600;
  margin: 0;
}
/* "One-time" badge appended to the Ship to label on the order
   confirmation page when the order shipped to a one-time address
   rather than a real ARSS shipto record. Visual signal so the buyer
   (and any later-loading-staff) can see at a glance that this
   shipment used an off-record address. */
.erpc-order-address-cell__badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--yellow-100, #fef9c3);
  color: var(--yellow-900, #713f12);
  border-radius: 3px;
  vertical-align: middle;
}
.erpc-order-address-cell__body {
  font-style: normal;
  color: var(--gray-900, #262626);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}
.erpc-order-address-cell__line { display: block; }
.erpc-order-address-cell__line:first-child { font-weight: 600; }

/* Status banner sits between identity and items. Color varies by status. */
.erpc-order-banner {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border: 1px solid var(--gray-200, #d9d9d9);
  background: var(--bg-200, #f9f9f7);
}
.erpc-order-banner__title {
  margin: 0 0 0.25rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
}
.erpc-order-banner__lead { margin: 0; color: var(--gray-700, #595959); }
.erpc-order-banner--success  { background: var(--surface-success, #ecfdf5) /* was #e7f5ee */; border-color: var(--border-success, #a7f3d0); /* was #b7e0c8 */ }
.erpc-order-banner--success  .erpc-order-banner__title { color: var(--text-success, #065f46); /* was #166534 */ }
.erpc-order-banner--pending  { background: var(--surface-warning, #fef3c7) /* was #fef6e0 */; border-color: var(--border-warning, #ffe599); /* was #f5d97f */ }
.erpc-order-banner--pending  .erpc-order-banner__title { color: var(--text-warning, #6b5200); /* was #92400e */ }
.erpc-order-banner--processing { background: var(--bg-300, #eef2f7); border-color: var(--gray-300, #bfbfbf); }
.erpc-order-banner--failed   { background: var(--surface-error, #fef2f2) /* was #fdecec */; border-color: var(--border-error, #f5b7b1); }
.erpc-order-banner--failed   .erpc-order-banner__title { color: var(--red-700, #660000); }
.erpc-order-banner--rejected { background: var(--surface-error, #fef2f2) /* was #fdecec */; border-color: var(--border-error, #f5b7b1); }
.erpc-order-banner--rejected .erpc-order-banner__title { color: var(--red-700, #660000); }
.erpc-order-banner--cancelled { background: var(--gray-100, #f2f2f2); border-color: var(--gray-300, #bfbfbf); }

/* Items table — same layout as cart's items table. */
.erpc-order-lines { margin-bottom: 2rem; overflow-x: auto; }
.erpc-order-lines__table { width: 100%; border-collapse: collapse; }
.erpc-order-lines__table th,
.erpc-order-lines__table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-order-lines__table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-700, #595959);
  font-weight: 600;
}
.erpc-order-lines__qty-col,
.erpc-order-lines__price-col,
.erpc-order-lines__total-col { text-align: right; white-space: nowrap; }
.erpc-order-lines__sku-code { font-weight: 600; color: var(--gray-900, #262626); }
.erpc-order-lines__uom { color: var(--gray-700, #595959); font-size: 0.85rem; }
.erpc-order-lines__desc-col { color: var(--gray-700, #595959); font-size: 0.9rem; max-width: 360px; line-height: 1.35; }

/* Order details (Customer PO / Requested ship date) — small grid card. */
.erpc-order-details {
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.erpc-order-details__grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
  gap: 0.75rem 1.5rem;
  margin: 0;
}
.erpc-order-details__grid > div { margin: 0; }
.erpc-order-details__grid dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600, #737373);
  margin: 0 0 0.15rem 0;
}
.erpc-order-details__grid dd { margin: 0; color: var(--gray-900, #262626); font-weight: 500; }

/* Summary — same pattern as cart's summary box. */
.erpc-order-summary {
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1.25rem;
  max-width: 360px;
  margin-left: auto;
}
.erpc-order-summary__grid { margin: 0 0 1rem 0; }
.erpc-order-summary__grid > div {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.erpc-order-summary__grid dt { color: var(--gray-700, #595959); font-weight: 400; }
.erpc-order-summary__grid dd { margin: 0; font-weight: 600; }
.erpc-order-summary__total-row {
  border-top: 1px solid var(--gray-300, #bfbfbf);
  margin-top: 0.5rem;
  padding-top: 0.75rem !important;
  font-size: 1.05rem;
}
.erpc-order-summary__total-row dt,
.erpc-order-summary__total-row dd { font-weight: 700; color: var(--gray-900, #262626); }
.erpc-order-summary__back { margin: 0; font-size: 0.9rem; }

/* "Not found" card (shown when the URL points at a submission that
   isn't owned by the current user). */
.erpc-order-card--missing {
  max-width: 540px;
  margin: 3rem auto;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 2rem;
  text-align: center;
}
.erpc-order-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--gray-900, #262626);
}

.erpc-cart-customer {
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.erpc-cart-customer__grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: 1rem 2rem;
  margin: 0;
}

.erpc-cart-customer__grid > div { margin: 0; }
.erpc-cart-customer__grid dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-700, #595959);
  margin-bottom: 0.25rem;
}
.erpc-cart-customer__grid dd {
  margin: 0;
  font-weight: 600;
  color: var(--gray-900, #262626);
}

.erpc-cart-lines {
  margin-bottom: 2rem;
  overflow-x: auto;
}

.erpc-cart-lines__table {
  width: 100%;
  border-collapse: collapse;
}

.erpc-cart-lines__table th,
.erpc-cart-lines__table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
}

.erpc-cart-lines__table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-700, #595959);
  font-weight: 600;
}

/* Right-align Unit price + Line total (header + value). The table-prefix
   bumps specificity above the `.erpc-cart-lines__table th, td { text-align:
   left }` rule above so the alignment actually applies. Qty column stays
   left-aligned at the header — the input itself centers its value via
   `.erpc-cart-qty-input` below. Applies in both `table` and `media`
   layouts (4.111.0). */
.erpc-cart-lines__table .erpc-cart-lines__price-col,
.erpc-cart-lines__table .erpc-cart-lines__total-col { text-align: right; white-space: nowrap; }
.erpc-cart-lines__table .erpc-cart-lines__qty-col   { white-space: nowrap; }
.erpc-cart-lines__table .erpc-cart-lines__remove-col { width: 1%; text-align: center; }

.erpc-cart-sfl__remove-col { text-align: center; }

.erpc-cart-lines__sku-code {
  font-weight: 600;
  color: var(--gray-900, #262626);
}
/* Link variant — same baseline color as the span; underline on hover/focus
   only, so the cell still reads as the row's identity column rather than
   "blue link soup". @since 4.154.1 */
a.erpc-cart-lines__sku-link {
  color: inherit;
  text-decoration: none;
}
a.erpc-cart-lines__sku-link:hover,
a.erpc-cart-lines__sku-link:focus-visible {
  text-decoration: underline;
}
.erpc-cart-lines__uom {
  color: var(--gray-700, #595959);
  font-size: 0.85rem;
}

/* Cart / SFL qty input. Default (compact / `table` layout) sizing is
   the smaller dense-row footprint. Under the `media` layout the input
   bumps up to match the product-page input (`.storefront-product-qty-
   input` above) — same control across PDP → cart → SFL. Centered value
   in both. Height hardcoded (not `var(--erpc-cta-height)`) because the
   PDP variable is scoped to `.storefront-product-actions` (see line
   538) and resolves to empty in the cart context — see
   [[erpc-cta-height-scope]] memory. */
.erpc-cart-qty-input {
  width: 70px;
  min-width: 70px;
  height: 38px;
  padding: 0 0.5rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
  box-sizing: border-box;
}
.erpc-cart-lines--media .erpc-cart-qty-input,
.erpc-cart-sfl--media   .erpc-cart-qty-input {
  width: 90px;
  min-width: 90px;
  height: 52px;
  padding: 0 0.75rem;
  font-size: 1rem;
}

.erpc-cart-remove {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gray-600, #737373);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.erpc-cart-remove:hover { color: var(--red-600, #90090b); }

/* Note modal (4.162.0) — buyer-facing dialog for typing a per-line note.
   Fixed-position overlay + centered dialog. ESC, click-outside, and the
   close × all route through the same closeNoteModal() in JS. */
.erpc-cart-note-modal[hidden] { display: none !important; }
.erpc-cart-note-modal {
  position: fixed;
  inset:    0;
  z-index:  1000;
  display:  flex;
  align-items:     center;
  justify-content: center;
  padding:  1rem;
}
.erpc-cart-note-modal__backdrop {
  position: absolute;
  inset:    0;
  background: rgba(17, 24, 39, 0.55);
}
.erpc-cart-note-modal__dialog {
  position: relative;
  width:    100%;
  max-width: 520px;
  background: var(--surface-base, #ffffff);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding:  1.25rem 1.5rem 1.5rem;
  display:  flex;
  flex-direction: column;
  gap:      0.75rem;
}
.erpc-cart-note-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.erpc-cart-note-modal__title {
  margin: 0;
  font-size:   1.15rem;
  font-weight: 700;
  color: var(--gray-900, #262626);
}
.erpc-cart-note-modal__close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gray-600, #737373);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.erpc-cart-note-modal__close:hover,
.erpc-cart-note-modal__close:focus-visible {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
  outline: none;
}
.erpc-cart-note-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-600, #737373);
  word-break: break-word;
}
.erpc-cart-note-modal__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700, #595959);
  margin-bottom: -0.25rem;
}
.erpc-cart-note-modal__textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 0.625rem 0.75rem;
  font:    inherit;
  border:  1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  box-sizing: border-box;
}
.erpc-cart-note-modal__textarea:focus {
  outline: none;
  border-color: var(--btn-primary-bg, #0a48a8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg, #0a48a8) 18%, transparent);
}
.erpc-cart-note-modal__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gray-600, #737373);
}
.erpc-cart-note-modal__error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-error-strong, #991b1b);
  background: var(--surface-error, #fef2f2);
  border: 1px solid var(--border-error, #f5b7b1); /* was #fecaca */
  border-radius: 6px;
}
.erpc-cart-note-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.erpc-cart-note-modal__btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.erpc-cart-note-modal__btn--secondary {
  background: var(--surface-base, #ffffff);
  color: var(--gray-700, #595959);
  border-color: var(--gray-300, #bfbfbf);
}
.erpc-cart-note-modal__btn--secondary:hover { background: var(--gray-100, #f2f2f2); }
.erpc-cart-note-modal__btn--primary {
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--text-inverse, #ffffff);
}
.erpc-cart-note-modal__btn--primary:hover { background: var(--blue-700, #172e73); }
.erpc-cart-note-modal__btn[disabled] {
  opacity: 0.65;
  cursor: default;
}

.erpc-cart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  .erpc-cart-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.erpc-cart-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--gray-900, #262626);
}

.erpc-cart-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.erpc-cart-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800, #404040);
}

.erpc-cart-input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 0.95rem;
  background: var(--surface-base, #ffffff);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.erpc-cart-input:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 1px;
  border-color: var(--outline-color, #0a48a8);
}

/* Clearable input — wraps the input so the X button can sit absolute-right
   inside the visual frame. `padding-right` on the input reserves space so
   the typed value never tucks under the X. The X surfaces via JS toggling
   the `hidden` attribute on input — present when there's a value, gone
   when empty. Keyboard accessible: explicit button with aria-label. */
.erpc-cart-input-wrap {
  position: relative;
}
.erpc-cart-input--clearable {
  padding-right: 2.25rem;
}
.erpc-cart-input-clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  margin: 0;
  cursor: pointer;
  color: var(--gray-600, #737373);
  border-radius: 4px;
  line-height: 1;
}
/* Without this, the `display: flex` above beats the UA's
   `[hidden] { display: none }` on equal-specificity tiebreak (later
   in the cascade wins), so JS toggling the `hidden` attribute via
   refreshPoUi has no visible effect — the X stays painted even when
   the input is empty. Same pattern already applied to .erpc-cart-modal
   above (line 1684) for the same reason. */
.erpc-cart-input-clear[hidden] {
  display: none !important;
}
.erpc-cart-input-clear:hover,
.erpc-cart-input-clear:focus-visible {
  color: var(--gray-900, #262626);
  background: var(--gray-100, #f2f2f2);
  outline: none;
}
.erpc-cart-input-clear svg {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
}

.erpc-cart-label__req {
  color: var(--error-color, #dc2626);
  font-weight: 700;
}
.erpc-cart-field-error {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--error-color, #dc2626);
}

.erpc-cart-summary {
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1.25rem;
}

.erpc-cart-summary__grid { margin: 0 0 1rem 0; }
.erpc-cart-summary__grid > div {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.erpc-cart-summary__grid dt { color: var(--gray-700, #595959); font-weight: 400; }
.erpc-cart-summary__grid dd { margin: 0; font-weight: 600; }
.erpc-cart-summary__total-row {
  border-top: 1px solid var(--gray-300, #bfbfbf);
  margin-top: 0.5rem;
  padding-top: 0.75rem !important;
  font-size: 1.05rem;
}
.erpc-cart-summary__total-row dt,
.erpc-cart-summary__total-row dd { font-weight: 700; color: var(--gray-900, #262626); }

.erpc-cart-summary__note {
  font-size: 0.8rem;
  color: var(--gray-700, #595959);
  margin: 0 0 1rem 0;
}

.erpc-cart-checkout-button {
  position: relative;
  display: block;
  text-align: center;
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--btn-primary-text, #ffffff);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  /* Same fade as the PDP Add-to-cart (.btn-primary) — this rule had NO
     transition at all, so its hover snapped (4.251.5). `all` also eases
     the pending-state opacity mute. */
  transition: all 0.3s;
}
.erpc-cart-checkout-button:hover {
  background: var(--btn-primary-bg-hover, #0d5dda);
  color: var(--btn-primary-text, #ffffff);
  text-decoration: none;
}
/* Pending state — applies while totals are loading/refreshing AND while
   the start-checkout request is in flight. aria-disabled does the a11y
   work; the visual mute + cursor + spinner are the sighted-user signals.
   Matches `.erpc-checkout-place-order[aria-disabled]` on /checkout/. */
.erpc-cart-checkout-button[aria-disabled="true"],
.erpc-cart-checkout-button[data-erpc-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}
/* Spinner is absolutely-positioned and overlaid on the centered label so
   the button width stays stable when loading. The label fades out under
   it (opacity:0 — not visibility:hidden, because we need to keep the
   accessible name in the AT tree alongside aria-busy="true"). */
.erpc-cart-checkout-button__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  animation: erpc-cart-checkout-spinner-rotate 0.7s linear infinite;
}
.erpc-cart-checkout-button__spinner svg {
  width: 100%;
  height: 100%;
  display: block;
}
.erpc-cart-checkout-button[data-erpc-loading="true"] .erpc-cart-checkout-button__spinner {
  opacity: 1;
}
.erpc-cart-checkout-button[data-erpc-loading="true"] .erpc-cart-checkout-button__label {
  opacity: 0;
}
@keyframes erpc-cart-checkout-spinner-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .erpc-cart-checkout-button__spinner { animation: none; }
}

/* ---------------------------------------------------------------- */
/* /checkout/ — 4.46.3                                                */
/* Mirrors the cart page layout (boxed customer card, items table,    */
/* 2-col grid for details + summary). Distinct class hierarchy so the */
/* two pages can diverge later without touching each other.           */
/* ---------------------------------------------------------------- */

.erpc-checkout-page {
  max-width: var(--erpc-content-max, 1400px);
  margin: 0 auto;
  padding: 2rem 1rem;
}

.erpc-checkout-page__header {
  margin-bottom: 1.5rem;
}

.erpc-checkout-page__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--gray-900, #262626);
}

.erpc-checkout-page__crumb {
  margin: 0;
  font-size: 0.9rem;
}

.erpc-checkout-state[data-erpc-checkout-state="loading"],
.erpc-checkout-state[data-erpc-checkout-state="empty"],
.erpc-checkout-state[data-erpc-checkout-state="error"] {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--gray-700, #595959);
}

.erpc-checkout-error {
  color: var(--red-700, #660000);
  font-weight: 600;
}

.erpc-checkout-link,
.erpc-checkout-button-link {
  color: var(--link-color, #0073e6);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.erpc-checkout-link:hover,
.erpc-checkout-button-link:hover { color: var(--link-hover-color, #005bb5); text-decoration: underline; }

.erpc-checkout-customer {
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.erpc-checkout-customer__grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
  gap: 1rem 2rem;
  margin: 0;
}

.erpc-checkout-customer__grid > div { margin: 0; }
.erpc-checkout-customer__grid dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-700, #595959);
  margin-bottom: 0.25rem;
}
.erpc-checkout-customer__grid dd {
  margin: 0;
  font-weight: 600;
  color: var(--gray-900, #262626);
}

.erpc-checkout-lines {
  margin-bottom: 2rem;
  overflow-x: auto;
}

.erpc-checkout-lines__table {
  width: 100%;
  border-collapse: collapse;
}

.erpc-checkout-lines__table th,
.erpc-checkout-lines__table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-200, #d9d9d9);
}

.erpc-checkout-lines__table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-700, #595959);
  font-weight: 600;
}

/* Same specificity fix as the cart-lines block above (4.111.0). Qty
   stays left-aligned at the header to match the cart side; checkout
   has no qty input (read-only) so the value just inherits left. */
.erpc-checkout-lines__table .erpc-checkout-lines__price-col,
.erpc-checkout-lines__table .erpc-checkout-lines__total-col { text-align: right; white-space: nowrap; }
.erpc-checkout-lines__table .erpc-checkout-lines__qty-col   { white-space: nowrap; }

.erpc-checkout-lines__sku-code {
  font-weight: 600;
  color: var(--gray-900, #262626);
}
.erpc-checkout-lines__uom {
  color: var(--gray-700, #595959);
  font-size: 0.85rem;
}

.erpc-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  .erpc-checkout-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.erpc-checkout-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--gray-900, #262626);
}

.erpc-checkout-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.erpc-checkout-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800, #404040);
}

.erpc-checkout-input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font-size: 0.95rem;
  background: var(--surface-base, #ffffff);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.erpc-checkout-input:focus {
  outline: 2px solid var(--outline-color, #0a48a8);
  outline-offset: 1px;
  border-color: var(--outline-color, #0a48a8);
}

/* Payment fieldset — strip native chrome and lay the radios out as
   stacked cards so they actually look like clickable choices, not
   inline browser-default form controls. */
.erpc-checkout-payment {
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 0.75rem 1rem 1rem 1rem;
  margin: 0.5rem 0 1rem 0;
  background: var(--surface-base, #ffffff);
}
.erpc-checkout-payment > .erpc-checkout-label {
  padding: 0 0.25rem;
  margin-bottom: 0.5rem;
}

.erpc-checkout-radio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--gray-900, #262626);
  cursor: pointer;
  background: var(--surface-base, #ffffff);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.erpc-checkout-radio:last-child { margin-bottom: 0; }
.erpc-checkout-radio:hover { border-color: var(--gray-400, #a6a6a6); background: var(--bg-100, #f6f8fb); }
.erpc-checkout-radio:has( input:checked ) {
  border-color: var(--btn-primary-bg, #0a48a8);
  background: var(--bg-200, #f9f9f7);
}
.erpc-checkout-radio input[type="radio"] {
  accent-color: var(--btn-primary-bg, #0a48a8);
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.erpc-checkout-cenpos-slot {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-200, #f9f9f7);
  border: 1px dashed var(--gray-300, #bfbfbf);
  border-radius: 4px;
}

.erpc-checkout-help {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-700, #595959);
}

/* Sticky offsets = the `.erpc-account-hub__rail` recipe (4.290.0
   lineage + 4.296.0 notice term) — see the category-sidebar block for
   the full rationale; keep the recipes in lockstep. The original flat
   `top: 1rem` predates the sticky chrome and slid under the nav/banner
   stack. 16px/32px keeps that 1rem breathing room, top + bottom.
   `align-self: start` is load-bearing beyond looks: the default grid
   stretch makes the card row-height and leaves sticky no room to
   travel. ≤782px admin-bar (46px) variant included — the checkout
   grid goes two-column at 720px, inside the 46px window. */
.erpc-checkout-summary {
  background: var(--bg-200, #f9f9f7);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 1.25rem;
  position: sticky;
  top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--erpcs-header-h, 80px) - var(--erpc-sticky-notice-h, 0px) - 32px);
  overflow-y: auto;
  transition: top 0.25s ease-in-out,
              max-height 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.admin-bar .erpc-checkout-summary {
  top:        calc(32px + var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 16px);
  max-height: calc(100vh - 32px - var(--erpcs-header-h, 80px) - var(--erpc-sticky-notice-h, 0px) - 32px);
}
/* Mobile: admin bar is absolute (scrolls away) — no 46px offset. 4.318.2. */
@media (max-width: 782px) {
  .admin-bar .erpc-checkout-summary {
    top:        calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 16px);
    max-height: calc(100vh - var(--erpcs-header-h, 80px) - var(--erpc-sticky-notice-h, 0px) - 32px);
  }
}
body.erpc-chrome-hidden .erpc-checkout-summary {
  top:        calc(var(--erpc-sticky-notice-h, 0px) + 16px);
  max-height: calc(100vh - var(--erpc-sticky-notice-h, 0px) - 32px);
}
.admin-bar.erpc-chrome-hidden .erpc-checkout-summary {
  top:        calc(32px + var(--erpc-sticky-notice-h, 0px) + 16px);
  max-height: calc(100vh - 32px - var(--erpc-sticky-notice-h, 0px) - 32px);
}
/* Mobile + chrome-hidden: same — no admin-bar offset. 4.318.2. */
@media (max-width: 782px) {
  .admin-bar.erpc-chrome-hidden .erpc-checkout-summary {
    top:        calc(var(--erpc-sticky-notice-h, 0px) + 16px);
    max-height: calc(100vh - var(--erpc-sticky-notice-h, 0px) - 32px);
  }
}

.erpc-checkout-summary__grid { margin: 0 0 1rem 0; }
.erpc-checkout-summary__grid > div {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.erpc-checkout-summary__grid dt { color: var(--gray-700, #595959); font-weight: 400; }
.erpc-checkout-summary__grid dd { margin: 0; font-weight: 600; }
.erpc-checkout-summary__total-row {
  border-top: 1px solid var(--gray-300, #bfbfbf);
  margin-top: 0.5rem;
  padding-top: 0.75rem !important;
  font-size: 1.05rem;
}
.erpc-checkout-summary__total-row dt,
.erpc-checkout-summary__total-row dd { font-weight: 700; color: var(--gray-900, #262626); }

.erpc-checkout-summary__note {
  font-size: 0.8rem;
  color: var(--gray-700, #595959);
  margin: 0 0 1rem 0;
  min-height: 1.2em;
}

.erpc-checkout-place-order {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--btn-primary-bg, #0a48a8);
  color: var(--btn-primary-text, #ffffff);
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  /* House CTA fade — matches the PDP .btn-primary (4.251.6 sweep: these
     hover-interactive primaries had no transition and snapped). */
  transition: all 0.3s;
}
.erpc-checkout-place-order:hover {
  background: var(--btn-primary-bg-hover, #0d5dda);
}
.erpc-checkout-place-order[aria-disabled="true"],
.erpc-checkout-place-order[data-erpc-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.erpc-checkout-link {
  color: var(--link-color, #0073e6);
  text-decoration: none;
}

.erpc-checkout-link:hover {
  color: var(--link-hover-color, #005bb5);
  text-decoration: underline;
}

/* ============================================================
 * Category page (taxonomy-erp_product_category.php)
 * ============================================================ */

/* Locally-scoped sr-only — WP's `screen-reader-text` ships from themes
   but isn't guaranteed under any-theme. Class name matches WP core's so
   theme overrides cascade naturally if present. Mirrored to
   `.storefront-listing` so the same fallback applies on brand /
   attribute / all-products archives. */
.storefront-category .screen-reader-text,
.storefront-listing .screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; word-wrap: normal !important;
}

/* Listing-page outer wrapper sizing — `.storefront-listing` is the
   alias root applied to every facet+toolbar consumer (category, brand,
   attribute, all-products archive). Wider than the bare
   `.storefront-archive` (1200px) since the sidebar steals ~280px and
   the grid still needs room for 4-up cards.

   `position: relative` establishes a containing block for the
   `.is-loading::before` progress bar that pins to the top of the
   section (see ~line 4330 below). */
.storefront-category,
.storefront-listing {
  position: relative;
  max-width: var(--erpc-content-max, 1400px);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.storefront-category-header {
  margin-bottom: 1.5rem;
}

.storefront-category-title {
  font-size: 2rem;
  margin: 0.5rem 0 0.25rem;
  color: var(--gray-900, #262626);
}

.storefront-category-description {
  color: var(--gray-700, #595959);
  max-width: 70ch;
}

/* -- Subcategory drilldown row --------------------------------- */

.storefront-category-children {
  margin: 0 0 2rem;
}

.storefront-category-children-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--gray-800, #404040);
}

.storefront-category-children-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.storefront-category-children-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.storefront-category-children-card a:hover,
.storefront-category-children-card a:focus-visible {
  border-color: var(--border-brand, #0a48a8);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.storefront-category-children-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--gray-100, #f2f2f2);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.storefront-category-children-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storefront-category-children-image-placeholder {
  color: var(--gray-400, #a6a6a6);
}

.storefront-category-children-name {
  font-weight: 600;
  text-align: center;
  color: var(--gray-900, #262626);
}

.storefront-category-children-count {
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
}

/* -- Sidebar + main two-column layout -------------------------- */

.storefront-category-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .storefront-category-body {
    grid-template-columns: 260px 1fr;
  }
}

.storefront-category-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  margin-bottom: 0.75rem;
}

.storefront-category-filter-toggle:hover,
.storefront-category-filter-toggle:focus-visible {
  border-color: var(--border-brand, #0a48a8);
  outline: none;
}

/* Desktop: filter toggle button hidden, sidebar always visible. */
@media (min-width: 1024px) {
  .storefront-category-filter-toggle { display: none; }
}

/* -- Sidebar (desktop) + drawer (mobile) ----------------------- */

.storefront-category-sidebar {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

@media (min-width: 1024px) {
  /* Sticky offsets = the `.erpc-account-hub__rail` recipe (4.290.0
     article-rail lineage, 4.296.0 notice term) — keep in lockstep.
     Stack model: admin bar → sticky notice banner → header → sidebar.
     `--erpcs-header-h` (theme chrome JS, every page) measures the nav
     ONLY; `--erpc-sticky-notice-h` (outage-notice inline script) adds
     the sticky banners. Both default to a sane value when absent.
     The chrome-hidden states keep the notice term — the banner does
     not auto-hide with the chrome. No ≤782px admin-bar (46px) variant
     here: this whole block is ≥1024px, where the bar is always 32px
     (below 1024px the sidebar is the fixed drawer, not sticky).
     24px/48px = the original 1.5rem/3rem breathing room, top+bottom. */
  .storefront-category-sidebar {
    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;
    transition: top 0.25s ease-in-out,
                max-height 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .admin-bar .storefront-category-sidebar {
    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);
  }
  body.erpc-chrome-hidden .storefront-category-sidebar {
    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 .storefront-category-sidebar {
    top:        calc(32px + var(--erpc-sticky-notice-h, 0px) + 24px);
    max-height: calc(100vh - 32px - var(--erpc-sticky-notice-h, 0px) - 48px);
  }
}

/* Mobile: sidebar is a drawer. Hidden by default; opens when the
   toggle button activates `.is-open` on it + body. Click outside or
   Esc closes. Focus trap inside the drawer is owned by JS. */
@media (max-width: 1023.9px) {
  .storefront-category-sidebar {
    position: fixed;
    inset: 0 30% 0 0;
    z-index: 1000;
    max-width: 360px;
    border-radius: 0 8px 8px 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0,0,0,0.15);
  }
  .storefront-category-sidebar.is-open {
    transform: translateX(0);
  }
  body.erpc-facet-drawer-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.4);
    animation: erpc-fade-in 0.15s ease-out;
  }
  body.erpc-facet-drawer-open {
    overflow: hidden;
  }
}

@keyframes erpc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.storefront-category-facets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.storefront-category-facets-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.storefront-category-facets-close {
  background: transparent;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--gray-600, #737373);
  border-radius: 4px;
}

.storefront-category-facets-close:hover,
.storefront-category-facets-close:focus-visible {
  color: var(--gray-900, #262626);
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

/* Close button only relevant in drawer mode. */
@media (min-width: 1024px) {
  .storefront-category-facets-close { display: none; }
}

/* -- Facet groups (fieldset / legend / options) ---------------- */

.storefront-facet-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

/* The boolean toggle rows (In stock + the staff-only Drafts) read as ONE
   group — when Drafts renders directly below In stock, the inter-fieldset
   gap collapses to the same 0.15rem the brand/attribute option lists use
   between rows (4.300.1, Matt: "match the brand/category heights").
   Buyers never see the Drafts row, so the plain 1.25rem before Brand is
   untouched. */
.storefront-facet-group--instock:has(+ .storefront-facet-group--drafts) {
  margin-bottom: 0.15rem;
}

.storefront-facet-legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-800, #404040);
  margin-bottom: 0.5rem;
  padding: 0;
}

.storefront-facet-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.storefront-facet-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  color: var(--gray-800, #404040);
  text-decoration: none;
  font-size: 0.92rem;
}

.storefront-facet-option:hover {
  background: var(--gray-100, #f2f2f2);
}

/* Keyboard focus indicator — INSET so it doesn't spill over the
   adjacent option in the tight 0.15rem-gap stack. */
.storefront-facet-option:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: 2px solid var(--border-brand, #0a48a8);
  outline-offset: -2px;
}

/* Mouse-click focus — suppress (modern UX: the click is its own
   feedback). Without this the default click-focus ring also leaks
   into neighbors. */
.storefront-facet-option:focus:not(:focus-visible) {
  outline: none;
}

.storefront-facet-option.is-active {
  background: var(--blue-100, #d0e3ff);
  color: var(--gray-900, #262626);
  font-weight: 500;
}

.storefront-facet-option input[type="checkbox"] {
  /* Checkbox is purely visual — the surrounding <a> is what
     navigates. Keep it visible so the state telegraphs at a glance. */
  pointer-events: none;
  margin: 0;
  flex-shrink: 0;
}

.storefront-facet-option-name {
  /* Brand / attribute labels wrap onto a second line when they exceed
     the column width. Ellipsis-truncation was rejected because brand
     names are the lookup target — a buyer scanning for "American Forge
     & Foundry" can miss it as "American Forge…". `overflow-wrap: anywhere`
     breaks even single long unhyphenated tokens (long SKU-style
     attribute values), so the sidebar never side-scrolls. The parent
     `.storefront-facet-option` keeps `align-items: center` — checkbox +
     count vertically center against the wrapped label block. */
  flex: 1;
  overflow-wrap: anywhere;
}

.storefront-facet-option-count {
  color: var(--gray-600, #737373);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* In-stock toggle is a checkbox styled inline with its label. */
.storefront-facet-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* Same row box as .storefront-facet-option (0.35rem) so the toggle
     rows match the brand/attribute option heights exactly. 4.300.1 */
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
}

.storefront-facet-toggle:hover {
  background: var(--gray-100, #f2f2f2);
}

.storefront-facet-toggle-label {
  flex: 1;
  font-weight: 500;
}

.storefront-facet-toggle-count {
  color: var(--gray-600, #737373);
  font-size: 0.85rem;
}

/* -- Toolbar ---------------------------------------------------- */

.storefront-category-toolbar {
  margin-bottom: 1rem;
}

.storefront-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.storefront-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--blue-100, #d0e3ff);
  color: var(--gray-900, #262626);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.storefront-category-chip:hover,
.storefront-category-chip:focus-visible {
  background: var(--surface-base, #ffffff);
  border-color: var(--border-brand, #0a48a8);
  outline: none;
}

.storefront-category-chip-x {
  display: inline-flex;
  align-items: center;
  color: var(--gray-600, #737373);
}

.storefront-category-chip-clear {
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
  text-decoration: underline;
  margin-left: 0.4rem;
}

.storefront-category-chip-clear:hover {
  color: var(--gray-900, #262626);
}

.storefront-category-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.storefront-category-onpage-search {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}

.storefront-category-onpage-search-icon {
  position: absolute;
  left: 0.65rem;
  color: var(--gray-600, #737373);
  pointer-events: none;
}

.storefront-category-onpage-search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 6px;
  font-size: 0.95rem;
}

.storefront-category-onpage-search input:focus-visible {
  outline: none;
  border-color: var(--border-brand, #0a48a8);
  box-shadow: 0 0 0 3px rgba(0,114,255,0.15);
}

.storefront-category-perpage {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--gray-700, #595959);
}

.storefront-category-perpage ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.15rem;
}

.storefront-category-perpage-option {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  color: var(--gray-700, #595959);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.storefront-category-perpage-option:hover,
.storefront-category-perpage-option:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

.storefront-category-perpage-option.is-active {
  background: var(--gray-800, #404040);
  color: var(--text-inverse, #ffffff);
}

/* Sort control — mirrors the per-page control's pill-list treatment. */
.storefront-category-sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--gray-700, #595959);
}

.storefront-category-sort ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.15rem;
}

.storefront-category-sort-option {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  color: var(--gray-700, #595959);
  text-decoration: none;
}

.storefront-category-sort-option:hover,
.storefront-category-sort-option:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

.storefront-category-sort-option.is-active {
  background: var(--gray-800, #404040);
  color: var(--text-inverse, #ffffff);
}

.storefront-category-onpage-status {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
  min-height: 1.2em; /* reserve space so layout doesn't jump */
}

/* Search-result grid mirrors the regular .storefront-grid layout —
   class is added on the <ul> by the JS injector so any future
   styling can branch on it without touching the regular cards. */
.storefront-grid--search-results {
  /* Inherits .storefront-grid sizing; class is here for hook reasons. */
}

/* Set by storefront-category.js when the In-stock toggle is on and
   live netavail says a card is out of stock. Display:none rather than
   visibility:hidden so the grid reflows tightly. */
.is-filter-hidden {
  display: none !important;
}

/* AJAX swap in progress — dims sidebar + grid so the click registers.
   Pointer-events off so a double-click can't fire twice during the
   ~300-700ms server roundtrip. Mirrored to `.storefront-listing` for
   the brand / attribute / all-products consumers. */
.storefront-category.is-loading .storefront-category-sidebar,
.storefront-category.is-loading .storefront-category-main,
.storefront-listing.is-loading .storefront-category-sidebar,
.storefront-listing.is-loading .storefront-category-main {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

/* Indeterminate progress bar — pinned to the viewport top (under the
   WP admin bar when one is present). Solid 30%-vw blue block slides
   left → right; earlier feathered-gradient iterations were too subtle
   at 4 px tall. Driven by the same `.is-loading` class that dims the
   grid (no markup change). */
.storefront-listing.is-loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 30vw;
  height: 4px;
  background: var(--surface-brand, #0a48a8);
  border-radius: 0 2px 2px 0;
  z-index: 99999;
  pointer-events: none;
  transform: translateX(-100%);
  animation: erpc-listing-progress 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Admin-bar offset — without this, the bar at `top: 0` sits BEHIND
   the WP admin bar (`position: fixed; top: 0`, 32px tall on >=782px
   viewports; 46px under that). Match the bar's `top` to the admin
   bar's height so it lands just beneath. */
.admin-bar .storefront-listing.is-loading::before {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .storefront-listing.is-loading::before {
    top: 46px;
  }
}
@keyframes erpc-listing-progress {
  /* 0% → fully off-viewport-left (own width to the left of the edge).
     100% → fully off-viewport-right.
     Distance traveled = viewport width + own width (30vw) →
     100vw / 30vw + 100% = ~333% + 100% = 433% of own width. */
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(433%); }
}
/* Reduced-motion fallback — static blue bar across the top, no
   translation. Still visible as a loading marker. */
@media (prefers-reduced-motion: reduce) {
  .storefront-listing.is-loading::before {
    animation: none;
    transform: none;
    width: 100vw;
    opacity: 0.5;
  }
}

/* ----------------------------------------------------------------
 * 4.60.0 — Stock Display + Show Demand surfaces.
 *
 * Four visual surfaces gated by the `local_qty_everywhere` preset
 * (cart + cards) and the `show_demand.enabled` toggle (PDP badge):
 *
 *   1. Archive card qty pill   — green "47 available" replaces the
 *                                 today-blank in-stock state.
 *   2. Cart-line stock pill    — same data, smaller treatment, in the
 *                                 description cell under the SKU/qty.
 *   3. Cart-line SFL link      — text-button below each line, "Save
 *                                 for later" → moves the line to SFL.
 *   4. PDP demand badge        — "X people have this in their cart"
 *                                 (5+ threshold enforced server-side).
 * ---------------------------------------------------------------- */

.storefront-grid-card-stock-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--surface-success, #ecfdf5);
  color: var(--text-success, #065f46); /* was #065F46 */
  border: 1px solid var(--border-success, #a7f3d0);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.erpc-cart-lines__pill-row {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.erpc-cart-lines__stock-pill {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  background: var(--surface-success, #ecfdf5);
  color: var(--text-success, #065f46); /* was #065F46 */
  border: 1px solid var(--border-success, #a7f3d0);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.erpc-cart-lines__stock-pill.is-out {
  background: var(--surface-error, #fef2f2) /* was #fdecea */;
  color: var(--text-error-strong, #991b1b); /* was #8A1F18 */
  border-color: var(--border-error, #f5b7b1);
}

.erpc-cart-lines__line-actions {
  margin-top: 0.375rem;
}
.erpc-cart-lines__sfl-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--action-blue, #1d4ed8);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.erpc-cart-lines__sfl-link:hover,
.erpc-cart-lines__sfl-link:focus-visible {
  color: var(--action-blue-hover, #1e40af); /* was #1E40AF */
  text-decoration-thickness: 2px;
}
.erpc-cart-lines__sfl-link:focus-visible {
  outline: 2px solid var(--blue-300, #7aaeff); /* was #93C5FD */
  outline-offset: 2px;
  border-radius: 2px;
}

/* PDP demand badge. Inline-flex so the SVG (none today, future) lines
   up with text. Slot starts hidden via the `hidden` attribute; JS
   removes it once we have a count above the server-side threshold. */
.storefront-product-demand-slot {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.25rem 0.625rem;
  background: var(--surface-warning, #fef3c7);
  color: var(--text-warning, #6b5200); /* was #92400E */
  border: 1px solid var(--border-warning, #ffe599); /* was #FDE68A */
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.storefront-product-demand-slot[hidden] {
  display: none;
}

/* -----------------------------------------------------------------
   Payment Options Notice — persistent, non-dismissible banner.
   Renders when the logged-in buyer has zero usable payment methods.
   See class-payment-options-notice.php for the gating logic.
   ----------------------------------------------------------------- */
.erpc-payment-options-notice {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #b32d2e;           /* WP admin red — high-contrast against any theme */
  color: var(--text-inverse, #ffffff);
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.erpc-payment-options-notice__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}
.erpc-payment-options-notice__title {
  font-weight: 700;
}
.erpc-payment-options-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}
.erpc-payment-options-notice__cta {
  color: var(--text-inverse, #ffffff);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.erpc-payment-options-notice__cta:hover,
.erpc-payment-options-notice__cta:focus {
  text-decoration: none;
}

/* -----------------------------------------------------------------
   ERP Outage Notice — persistent, non-dismissible banner shown during
   a live-CSD outage. Two severities: --error (red, BLOCKED: orders
   can't be placed) and --warning (yellow, DEGRADED: DB base pricing may
   be inaccurate). Shares the sticky-top treatment of the payment notice
   so banners stack consistently. See class-erp-outage-notice.php.
   ----------------------------------------------------------------- */
.erpc-outage-notice {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.erpc-outage-notice--error {
  background: #b32d2e;   /* WP admin red — high contrast against any theme */
  color: var(--text-inverse, #ffffff);
}
.erpc-outage-notice--warning {
  background: #f5c842;   /* amber — degraded but usable */
  color: var(--gray-900, #262626);        /* dark text for contrast on yellow */
}
.erpc-outage-notice__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}
.erpc-outage-notice__body {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  white-space: pre-line;  /* honor operator line breaks from the textarea */
}
/* "Top of Content" placement — sits in the content flow below the nav, so drop
   the sticky-top treatment. (Default placement stays sticky at the very top.) */
.erpc-outage-notice--inline {
  position: static;
}
/* Soft (chip-tint) color style — same palette as our out-of-stock / status
   pills (soft background + dark same-hue text), vs the default bold alert bar. */
.erpc-outage-notice--soft.erpc-outage-notice--error {
  background: var(--red-100, #ffcccc);
  color: var(--red-700, #660000);
}
.erpc-outage-notice--soft.erpc-outage-notice--warning {
  background: var(--gold-200, #ffe599);
  color: var(--gold-950, #6b5200);
}
/* Contained width — a centered content-width card instead of a full-bleed bar. */
.erpc-outage-notice--contained {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
}
.erpc-outage-notice--contained.erpc-outage-notice--inline {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: calc(100% - 2rem); /* side gutters on narrow viewports */
}
/* Clickable customer-service phone — inherits the banner color, stays legible. */
.erpc-outage-notice__tel {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.erpc-outage-notice__tel:hover,
.erpc-outage-notice__tel:focus {
  text-decoration: none;
}

/* -----------------------------------------------------------------
   Ship-To Required Notice — persistent, non-dismissible banner.
   Sibling of the payment-options notice; renders when the buyer's
   customer requires a ship-to but has none available. Shares the
   sticky-top red treatment so both banners stack consistently.
   See class-shipto-required-notice.php for the gating logic.
   ----------------------------------------------------------------- */
.erpc-shipto-required-notice {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #b32d2e;           /* WP admin red — high-contrast against any theme */
  color: var(--text-inverse, #ffffff);
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.erpc-shipto-required-notice__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}
.erpc-shipto-required-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}
.erpc-shipto-required-notice__cta {
  color: var(--text-inverse, #ffffff);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.erpc-shipto-required-notice__cta:hover,
.erpc-shipto-required-notice__cta:focus {
  text-decoration: none;
}

/* When the WP admin bar is showing (logged-in users) it sits fixed at top:0
   with z-index 99999 — above these banners' 9999 — so a sticky banner pinned
   to top:0 tucks underneath it. Slip all three sticky-top notices beneath the
   admin bar (32px desktop, 46px mobile). Mirrors impersonation-bar.css. The
   outage notice's --inline variant is position:static, so top is a no-op there. */
body.admin-bar .erpc-payment-options-notice,
body.admin-bar .erpc-outage-notice,
body.admin-bar .erpc-shipto-required-notice { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .erpc-payment-options-notice,
  body.admin-bar .erpc-outage-notice,
  body.admin-bar .erpc-shipto-required-notice { top: 46px; }
}

/* Checkout-page payment static label — used both for single-method
   case (CC-only customer) and the zero-method --unavailable variant. */
.erpc-checkout-payment-static {
  margin: 0;
  font-size: 0.95rem;
}
.erpc-checkout-payment-static__label {
  font-weight: 600;
}
.erpc-checkout-payment-static--unavailable {
  color: #b32d2e;
  font-weight: 600;
}

/* ── 4.96.0 — "Add to list" split-button + popover ─────────────────── */

.storefront-list-control {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* PDP variant — left half (heart) reuses the .storefront-product-favorite
   styles. Right half (caret) attaches flush to the heart's right edge.
   The heart's right border stays 1px wide in every state but is colored
   transparent at rest so the two halves read as one button. Hover /
   focus / pressed inherit `border-color` for all four sides from the
   parent .storefront-product-favorite rules — no width change, no
   layout shift on hover. */
.storefront-list-control .storefront-list-fav {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: transparent;
}
/* Specificity match — the parent .storefront-product-favorite hover /
   focus / pressed rules also have 0,2,0 specificity, and our override
   above wins on source order. Re-state the right-border color per
   interactive state so the selection box closes on all four sides
   on the PDP variant. The card-variant scoping (`:not(.…-card)`)
   keeps the small in-thumb overlay unobtrusive — heart-color change
   on hover is plenty there; the red separator was reading as an
   accidental hover border around the icon. */
.storefront-list-control:not(.storefront-list-control-card) .storefront-list-fav:hover,
.storefront-list-control:not(.storefront-list-control-card) .storefront-list-fav:focus-visible {
  border-right-color: var(--red-300, #ff6666);
}
.storefront-list-control .storefront-list-fav[aria-pressed="true"] {
  border-right-color: var(--red-500, #970100);
}

.storefront-list-more {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-300, #bfbfbf);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600, #737373);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.storefront-list-more:hover {
  color: var(--gray-900, #262626);
  background: var(--gray-100, #f2f2f2);
}
.storefront-list-more:focus-visible {
  color: var(--gray-900, #262626);
  background: var(--gray-100, #f2f2f2);
  border-color: var(--gray-700, #595959);
  outline: none;
}
.storefront-list-more[aria-expanded="true"] {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
}
/* Flip the caret 180° when the popover is open — visual affordance
   that the dropdown is currently shown. Transitions for smoothness. */
.storefront-list-more svg {
  transition: transform 0.15s ease-out;
}
.storefront-list-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Card variant — small absolute overlay in the top-right of the thumb.
   Hidden until card hover. Touch devices see it permanently (further
   down via @media hover: none). */
.storefront-list-control-card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  opacity: 0.65;
  transition: opacity 0.15s;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.storefront-grid-card:hover .storefront-list-control-card,
.storefront-grid-card:focus-within .storefront-list-control-card,
.storefront-list-control-card:hover,
.storefront-list-control-card:focus-within {
  opacity: 1;
}

.storefront-list-card-fav {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700, #595959);
  border-right: 1px solid var(--gray-200, #d9d9d9);
  transition: color 0.15s;
}
.storefront-list-card-fav:hover,
.storefront-list-card-fav:focus-visible {
  color: var(--red-500, #970100);
  outline: none;
}
.storefront-list-card-fav[aria-pressed="true"] {
  color: var(--red-500, #970100);
}
.storefront-list-card-fav[aria-pressed="true"] svg {
  fill: currentColor;
}

.storefront-list-card-more {
  background: transparent;
  border: none;
  width: 22px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-700, #595959);
  border-radius: 0 4px 4px 0;
}
.storefront-list-card-more:hover,
.storefront-list-card-more:focus-visible {
  color: var(--gray-900, #262626);
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

@media (hover: none) {
  /* Touch — no hover state; show the overlay at reduced opacity so it
     stays discoverable without covering the link tap target. */
  .storefront-list-control-card {
    opacity: 0.85;
  }
}

/* Dropdown panel — plain <div hidden role="menu"> positioned by JS
   (position: fixed + getBoundingClientRect against the trigger). Same
   pattern as the chrome account menu — no native Popover API. The
   `hidden` attribute provides display:none when closed; we just style
   the open state. */
.storefront-list-popover {
  position: fixed;
  z-index: 9999;
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 0.5rem 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: var(--surface-base, #ffffff);
  min-width: 240px;
  max-width: min(360px, 92vw);
  margin: 0;
}

.storefront-list-popover-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-600, #737373);
  padding: 0.25rem 0.9rem 0.4rem;
}

.storefront-list-popover-lists {
  list-style: none;
  margin: 0;
  padding: 0;
}

.storefront-list-popover-item {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.9rem;
  font: inherit;
  color: var(--text-primary, #111);
  cursor: pointer;
  display: block;
}
.storefront-list-popover-item:hover,
.storefront-list-popover-item:focus-visible,
.storefront-list-popover-item.is-active {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}
.storefront-list-popover-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.storefront-list-popover-divider {
  height: 1px;
  background: var(--gray-200, #d9d9d9);
  margin: 0.35rem 0;
}

.storefront-list-popover-new {
  border-top: 1px solid var(--gray-200, #d9d9d9);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

/* The "+ New list" inline-form rule: fields are ALWAYS in the DOM (no
   display:none) — disabled by default; enabled in place when the "+ New
   list" button is clicked. Per the locked memory-rule
   `feedback_no_hidden_form_fields`, we keep them visible with a
   disabled+aria-disabled state and only open them up on user intent. */
.storefront-list-popover-new-form {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem 0.5rem;
}
.storefront-list-popover-new-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 3px;
  font: inherit;
  font-size: 0.9rem;
}
.storefront-list-popover-new-input:disabled {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-600, #737373);
}
.storefront-list-popover-new-save {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 3px;
  background: var(--surface-base, #ffffff);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.storefront-list-popover-new-save:hover:not(:disabled),
.storefront-list-popover-new-save:focus-visible:not(:disabled) {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}
.storefront-list-popover-new-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── 4.96.0 — /lists/ index + detail pages ───────────────────────── */

.erpc-lists-page {
  max-width: var(--erpc-content-max, 1400px);
  margin: 2rem auto;
  padding: 0 1rem;
}
.erpc-lists-page__header {
  margin-bottom: 1.25rem;
}
.erpc-lists-page__title {
  margin: 0;
  font-size: 1.75rem;
}

.erpc-lists-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
/* Per-chip explainer line (4.249.1) — disambiguates lists vs saved
   carts. Swapped by storefront-lists.js on chip change. gray-600, not
   gray-500: this is informative copy and must clear WCAG AA. */
.erpc-lists-page__chip-desc {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--gray-600, #737373);
}
.erpc-lists-chip {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--gray-700, #595959);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.erpc-lists-chip:hover {
  border-color: var(--gray-500, #8c8c8c);
  color: var(--gray-900, #262626);
}
.erpc-lists-chip:focus-visible {
  outline: 2px solid var(--border-brand, #0a48a8);
  outline-offset: 2px;
}
.erpc-lists-chip.is-active {
  background: var(--surface-brand, #0a48a8);
  border-color: var(--border-brand, #0a48a8);
  color: var(--text-inverse, #ffffff);
}

.erpc-lists-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
/* List-rows view (4.250.0) — toggled from the toolbar, persisted per
   browser. Same cards, one per row, meta pushed to the right edge. */
.erpc-lists-grid--rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erpc-lists-grid--rows .erpc-lists-card__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
}
.erpc-lists-grid--rows .erpc-lists-card__name {
  margin-bottom: 0;
  flex: 0 1 auto;
}
.erpc-lists-grid--rows .erpc-lists-card__meta {
  margin-left: auto;
  margin-top: 0;
  white-space: nowrap;
}
.erpc-lists-page__toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.erpc-lists-page__view-toggle {
  display: flex;
  gap: 0.35rem;
}
/* Same pill chrome as .erpc-lists-chip so the toolbar reads as one row. */
.erpc-lists-view-btn {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.erpc-lists-view-btn.is-active {
  background: var(--blue-500, #0a48a8);
  border-color: var(--blue-500, #0a48a8);
  color: var(--text-inverse, #ffffff);
}
.erpc-lists-card {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.erpc-lists-card:hover {
  border-color: var(--blue-300, #7aaeff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.erpc-lists-card__link {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}
.erpc-lists-card__name {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: var(--gray-900, #262626);
}
.erpc-lists-card__pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
}
.erpc-lists-card__pill--favorites {
  background: var(--red-100, #ffcccc);
  color: var(--red-700, #660000);
}
.erpc-lists-card__pill--saved_cart {
  background: var(--blue-100, #d0e3ff);
  color: var(--blue-700, #172e73);
}
.erpc-lists-card__pill--saved_for_later {
  background: var(--surface-warning, #fef3c7) /* was #fff4d6 */;
  color: var(--text-warning, #6b5200); /* was #8a5a00 */
}
.erpc-lists-card__pill--notifications {
  background: var(--purple-100, #e5d9f7);
  color: var(--purple-700, #3d1a70);
}
/* "Back in stock" badge on a Notifications card — same green pairing as
   the PDP in-stock pill so the signal reads identically everywhere. */
.erpc-lists-card__stock[hidden] {
  /* the display below beats the UA [hidden] rule — restore it */
  display: none;
}
.erpc-lists-card__stock {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--green-100, #d4e7d1);
  color: var(--green-700, #1c4f13);
}
.erpc-lists-card__meta {
  display: block;
  color: var(--gray-600, #737373);
  font-size: 0.85rem;
}
.erpc-lists-card--skeleton {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.erpc-lists-empty,
.erpc-lists-error,
.erpc-list-detail-empty {
  color: var(--gray-600, #737373);
  text-align: center;
  padding: 2rem 1rem;
}

/* Detail page */
.erpc-list-detail-page {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
}
/* Owner views carry the account rail (4.278.0) — lift the narrow
   share-view clamp to the account container width and re-cap the
   CONTENT column instead, so the detail stays readable while the grid
   spans the same box as every other account page. */
.erpc-list-detail-page--rail {
  max-width: var(--erpc-content-max, 1400px);
}
.erpc-list-detail-page--rail .erpc-account-hub__main {
  max-width: 860px;
}
.erpc-list-detail-page__back {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.erpc-list-detail-page__back a {
  color: var(--gray-700, #595959);
  text-decoration: none;
}
.erpc-list-detail-page__back a:hover {
  color: var(--gray-900, #262626);
}
.erpc-list-detail-page__header {
  margin-bottom: 1.25rem;
}
.erpc-list-detail-page__title {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
}
.erpc-list-detail-page__meta {
  margin: 0;
  color: var(--gray-600, #737373);
  font-size: 0.9rem;
}

.erpc-list-detail-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  background: var(--surface-base, #ffffff);
}
.erpc-list-detail-item + .erpc-list-detail-item {
  border-top: 1px solid var(--gray-200, #d9d9d9);
}
.erpc-list-detail-item__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
}
.erpc-list-detail-item__row:hover {
  background: var(--gray-100, #f2f2f2);
}
.erpc-list-detail-item__name {
  font-weight: 500;
}
.erpc-list-detail-item__sku {
  color: var(--gray-600, #737373);
  font-size: 0.85rem;
}
.erpc-list-detail-item__qty {
  color: var(--gray-700, #595959);
  font-weight: 600;
  font-size: 0.9rem;
}
.erpc-list-detail-item--skeleton {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.erpc-list-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}
.erpc-list-detail-selectall {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ── 4.96.3 — Save cart inline action on /cart/ ─────────────────── */

.erpc-cart-save {
  margin-top: 0.75rem;
  text-align: center;
}
.erpc-cart-save__trigger {
  appearance: none;
  background: none;
  border: none;
  color: var(--gray-700, #595959);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  text-decoration: underline;
}
.erpc-cart-save__trigger:hover,
.erpc-cart-save__trigger:focus-visible {
  color: var(--gray-900, #262626);
  outline: none;
}
/* Form fields stay in the DOM but disabled at rest. Only show them
   when the form is expanded — `is-expanded` is added by JS when the
   trigger is clicked. Per the no-display:none-form rule, the fields
   are still in the DOM (assistive tech can announce them when expanded);
   we just visually collapse them so the empty form isn't cluttering
   the summary. */
.erpc-cart-save__form {
  display: none;
  margin-top: 0.5rem;
  gap: 0.4rem;
  justify-content: center;
}
.erpc-cart-save.is-expanded .erpc-cart-save__form {
  display: flex;
}
/* Optional-name form in the saved-cart banner (4.250.0) — where the
   buyer lands after one-click "Save cart". Reuses the save input/submit
   chrome. */
.erpc-cart-toast__rename {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  max-width: 420px;
}
.erpc-cart-save__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font: inherit;
  font-size: 0.9rem;
}
.erpc-cart-save__input:disabled {
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-600, #737373);
}
.erpc-cart-save__submit {
  flex: 0 0 auto;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-brand, #0a48a8);
  border-radius: 4px;
  background: var(--surface-brand, #0a48a8);
  color: var(--text-inverse, #ffffff);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.erpc-cart-save__submit:hover:not(:disabled),
.erpc-cart-save__submit:focus-visible:not(:disabled) {
  background: var(--blue-600, #2b4693);
  border-color: var(--blue-600, #2b4693);
  outline: none;
}
.erpc-cart-save__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── 4.155.0 — Secondary cart actions (Save as subscription + Save cart) ──
   Pair the two affordances side-by-side below the primary Continue-to-
   checkout button so they read as peer alternates rather than the bare
   text-link soup the prior layout produced. Ghost-button style: transparent
   bg, blue border, blue text; fills on hover/focus. Stack vertically on
   narrow viewports so neither truncates.

   `.erpc-cart-secondary-actions__btn-wrap` lets the Save-cart inline form
   (`.erpc-cart-save__form`) expand to a full-width row when the trigger
   flips to `.is-expanded` — without the wrapper, the flex row's
   auto-sizing would clip the input. */
.erpc-cart-secondary-actions {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.erpc-cart-secondary-actions__btn-wrap {
  /* Grows to full width when the inline save-cart form is expanded so the
     name input + Save submit sit on their own row below the button. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erpc-cart-secondary-actions > .erpc-cart-secondary-actions__btn {
  /* The standalone Save-as-subscription anchor (no wrapper) needs the
     same flex sizing as the wrapped Save-cart trigger. */
  flex: 1 1 auto;
}
.erpc-cart-secondary-actions__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  background: transparent;
  color: var(--blue-600, #2b4693);
  border: 1px solid var(--border-brand, #0a48a8);
  border-radius: 4px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  /* 0.3s to match .btn-primary (4.251.4) — the transparent→solid hover
     flip at 0.12s read as an instant state change. */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.erpc-cart-secondary-actions__btn:hover,
.erpc-cart-secondary-actions__btn:focus-visible {
  background: var(--surface-brand, #0a48a8);
  color: var(--text-inverse, #ffffff);
  outline: none;
}
/* The Save-cart trigger already carries `.erpc-cart-save__trigger`, which
   declared the text-link look. Inside the secondary actions row, the
   ghost-button styling wins via dual-class selector. */
.erpc-cart-secondary-actions__btn.erpc-cart-save__trigger {
  text-decoration: none;
  color: var(--blue-600, #2b4693);
  padding: 0.55rem 0.9rem;
}
.erpc-cart-secondary-actions__btn.erpc-cart-save__trigger:hover,
.erpc-cart-secondary-actions__btn.erpc-cart-save__trigger:focus-visible {
  color: var(--text-inverse, #ffffff);
}
/* The save-cart `.erpc-cart-save` margin-top + text-align defaults
   conflict with the new flex-row layout when nested inside the wrapper.
   Neutralize. */
.erpc-cart-secondary-actions .erpc-cart-save {
  margin-top: 0;
  text-align: left;
}
@media (max-width: 480px) {
  .erpc-cart-secondary-actions {
    flex-direction: column;
  }
}

/* ── 4.96.4 — Saved cart view + Share toggle on /lists/{uuid8} ──── */

.erpc-list-detail-cart-header {
  background: var(--bg-100, #f6f8fb);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.erpc-list-detail-cart-header > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-700, #595959);
}
.erpc-list-detail-cart-header__grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0.75rem 0 0;
}
.erpc-list-detail-cart-header__label {
  font-weight: 600;
  color: var(--gray-700, #595959);
  margin: 0;
}
.erpc-list-detail-cart-header__value {
  margin: 0;
  color: var(--gray-900, #262626);
}

.erpc-list-detail-share {
  position: relative;
  margin-left: auto;
}
.erpc-list-detail-share__trigger {
  appearance: none;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gray-700, #595959);
  cursor: pointer;
}
.erpc-list-detail-share__trigger:hover,
.erpc-list-detail-share__trigger:focus-visible {
  border-color: var(--gray-700, #595959);
  color: var(--gray-900, #262626);
  outline: none;
}
.erpc-list-detail-share__popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 9999;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.75rem;
  min-width: 280px;
  max-width: 360px;
}
.erpc-list-detail-share__toggle {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.erpc-list-detail-share__url {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.5rem;
}
.erpc-list-detail-share__url input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-900, #262626);
}
.erpc-list-detail-share__copy {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  background: var(--surface-base, #ffffff);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.erpc-list-detail-share__copy:hover,
.erpc-list-detail-share__copy:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

/* ============================================================
   Account dashboard — [erpc_account] shortcode (4.106.0 / 4.264.0)

   Contained rail + main grid. Rail: account nav (Overview active,
   Invoices Open/Paid sub-links, gated Subscriptions/Approvals) +
   sign-out, sticky below the header. Main: welcome strip →
   conditional KPI cards → role-aware "Needs attention" → compact
   Recent-orders rows (stage pills via orders-list.css, enqueued
   alongside) → Recently Purchased strip (slim/float product
   cards) → Shopping Lists snapshot. No max-width on the wrapper —
   the theme's `.erpc-page` shell provides the 1340px clamp +
   side padding. Companion themes can override any selector;
   defaults here keep Default-tier installs presentable.
   ============================================================ */

.erpc-account-hub {
  padding: 0.5rem 0 3rem;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.erpc-account-hub__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Subpage variant (4.273.0) — every role-stamped account Page gets the
   rail by default (AuthChrome::wrap_account_subpage_content). Same
   grid + rail CSS as the dashboard; no [data-erpc-account-hub] attr,
   so the dashboard JS never mounts here. Blocks dropped on these Pages
   sometimes carry align"full" (approvals queue, invoices list) — inside
   a 230px/1fr grid column any viewport-width align math would overflow
   the main column, so it's neutralized: the column IS the full width
   these blocks want. */
.erpc-account-hub--subpage .erpc-account-hub__main > .alignfull,
.erpc-account-hub--subpage .erpc-account-hub__main > .alignwide {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: none;
}

/* ── Nav rail ───────────────────────────────────────────────── */

/* Sticky offsets COPIED VERBATIM from the theme's `.erpc-article__rail`
   recipe (4.290.0, Matt: "copy the left column of the blog post style")
   — that's the proven matrix: chrome-visible vs auto-hidden
   (body.erpc-chrome-hidden, mirrored by storefront-chrome.js) × WP
   admin bar (32px, 46px ≤782px — the case the first cut missed; the
   rail top sat under the admin bar and clipped). max-height + overflow
   keep a long rail scrollable instead of clipped. Keep the two recipes
   in lockstep.

   `--erpc-sticky-notice-h` (4.296.0): the sticky notices (ERP outage
   banner et al.) push the header down by their height but
   `--erpcs-header-h` measures only the nav itself — without this term
   the rail 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. */
.erpc-account-hub__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;
  transition: top 0.25s ease-in-out,
              max-height 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.admin-bar .erpc-account-hub__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);
}
/* Below 783px the WP admin bar is position:absolute (scrolls away with the
   page), not fixed — reserving its 46px just leaves a gap once it scrolls
   off. Drop the offset; match the no-admin-bar baseline. 4.318.2. */
@media (max-width: 782px) {
  .admin-bar .erpc-account-hub__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-account-hub__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-account-hub__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). 4.318.2. */
@media (max-width: 782px) {
  .admin-bar.erpc-chrome-hidden .erpc-account-hub__rail {
    top:        calc(var(--erpc-sticky-notice-h, 0px) + 24px);
    max-height: calc(100vh - var(--erpc-sticky-notice-h, 0px) - 48px);
  }
}

.erpc-account-hub__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.erpc-account-hub__nav-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--text-primary, #111);
  font-size: 0.9375rem;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.erpc-account-hub__nav-list a:hover,
.erpc-account-hub__nav-list a:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

.erpc-account-hub__nav-list a[aria-current="page"] {
  background: var(--gray-100, #f2f2f2);
  border-left-color: currentColor;
  font-weight: 600;
}

/* Invoices Open / Paid deep-links — indented secondary rows. */
.erpc-account-hub__nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.erpc-account-hub__nav-sub a {
  min-height: 36px;
  padding-left: 1.75rem;
  font-size: 0.875rem;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__nav-signout {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

/* Registry::render() whitelists product-block align to wide|full and
   stamps the class on the <product-list> host — the right default on
   ordinary pages, where it has to escape the theme's constrained
   column. Inside the dashboard's grid column that page-level sizing
   overflows the column; neutralize HERE only so no other surface is
   affected. */
.erpc-account-hub product-list.alignwide,
.erpc-account-hub product-list.alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Mobile account-nav dropdown (button + role=menu panel) — matches the
   storefront account-menu / add-to-list dropdown pattern. Hidden on desktop
   (the vertical sidebar shows instead); revealed ≤900px by the media query. */
.erpc-account-hub__nav-dropdown {
  display: none;
  position: relative;
}

.erpc-account-hub__nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #111);
  background: var(--surface-base, #fff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  cursor: pointer;
}

.erpc-account-hub__nav-trigger:focus-visible {
  outline: 2px solid var(--blue-500, #0a48a8);
  outline-offset: 1px;
}

.erpc-account-hub__nav-caret {
  flex: none;
  transition: transform 0.15s ease;
}

.erpc-account-hub__nav-trigger[aria-expanded="true"] .erpc-account-hub__nav-caret {
  transform: rotate(180deg);
}

.erpc-account-hub__nav-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--surface-base, #fff);
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}

.erpc-account-hub__nav-menu[hidden] {
  display: none;
}

.erpc-account-hub__nav-menuitem {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary, #111);
  font-size: 0.9375rem;
}

.erpc-account-hub__nav-menuitem:hover,
.erpc-account-hub__nav-menuitem:focus-visible,
.erpc-account-hub__nav-menuitem.is-active {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

.erpc-account-hub__nav-menuitem[aria-current="page"] {
  font-weight: 600;
}

.erpc-account-hub__nav-menuitem--sub {
  padding-left: 1.75rem;
  font-size: 0.875rem;
  color: var(--gray-700, #595959);
}

@media (max-width: 900px) {
  .erpc-account-hub {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Rail has stacked above the content — center the capped Devices box in
     the now full-width column (tablet). Stays 100% under its own padding
     on phones. Matt 2026-06-14. */
  .erpc-devices {
    margin-left: auto;
    margin-right: auto;
  }

  /* Rail collapses to a single dropdown selector above the content. Reset
     the sticky recipe's scroll box (4.290.0) so it never gets a scrollbar. */
  .erpc-account-hub__rail {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* Swap the desktop vertical sidebar list for the dropdown. */
  .erpc-account-hub__nav-list {
    display: none;
  }

  .erpc-account-hub__nav-dropdown {
    display: block;
  }
}

/* ── Welcome strip ──────────────────────────────────────────── */

.erpc-account-hub__welcome {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.erpc-account-hub__welcome-title {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.2;
}

.erpc-account-hub__welcome-context {
  margin: 0;
  color: var(--gray-700, #595959);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ── KPI strip ──────────────────────────────────────────────── */

.erpc-account-hub__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.erpc-account-hub__kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 1rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
  text-align: center;
}

.erpc-account-hub__kpi--credit {
  /* Donut tile is a bit taller; let the others bottom-align by
     stretching to its height via the grid. */
}

.erpc-account-hub__kpi-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__kpi-value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, #111);
}

.erpc-account-hub__kpi-detail {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__kpi-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.125rem;
}

.erpc-account-hub__kpi-body .erpc-skeleton-bar {
  width: 96px;
}

/* "$0.00 due" is real data — state it in words, not a dash. */
.erpc-account-hub__kpi-zero {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__kpi-link {
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--link-color, #0073e6);
}

.erpc-account-hub__kpi-link:hover,
.erpc-account-hub__kpi-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* ── Balance-by-age breakdown (synced ARSC periodbal_1..5) ──── */

.erpc-account-hub__aging {
  margin-top: 1rem;
  padding: 1.25rem 1.25rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
}

.erpc-account-hub__aging-title {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__aging-asof {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-500, #8c8c8c);
}

.erpc-account-hub__aging-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.erpc-account-hub__aging-row {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.erpc-account-hub__aging-label {
  font-size: 0.75rem;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__aging-amt {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary, #111);
}

/* ── Donut chart (inline SVG, no JS) ───────────────────────── */

.erpc-account-hub__donut {
  width: 88px;
  height: 88px;
  display: block;
}

.erpc-account-hub__donut-track {
  stroke: var(--gray-100, #f2f2f2);
  stroke-width: 3.6;
}

.erpc-account-hub__donut-fill {
  stroke: var(--blue-500, #0a48a8);
  stroke-width: 3.6;
  stroke-linecap: round;
  /* dashoffset=25 rotates the start from 3 o'clock to 12 o'clock so
     the arc fills clockwise from the top. */
  transition: stroke-dasharray 240ms ease-out;
}

.erpc-account-hub__donut-text {
  font-size: 8px;
  font-weight: 700;
  fill: var(--text-primary, #111);
}

/* ── "Needs attention" (role-aware) ─────────────────────────── */

.erpc-account-hub__attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.erpc-account-hub__attention-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0;
}

.erpc-account-hub__attention-row + .erpc-account-hub__attention-row {
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-account-hub__attention-count {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary, #111);
}

.erpc-account-hub__attention-text {
  font-size: 0.9375rem;
  color: var(--text-primary, #111);
}

.erpc-account-hub__attention-cta {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--link-color, #0073e6);
  white-space: nowrap;
}

.erpc-account-hub__attention-cta:hover,
.erpc-account-hub__attention-cta:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Local submission lifecycle pill — deliberately NOT an
   `erpc-order-pill--*` stage pill: these rows are orders that don't
   exist in the ERP yet, and must not read as ERP order stages. */
.erpc-account-hub__inflight-pill {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--surface-warning, #fef3c7) /* was #fdf3e1 */;
  color: var(--text-warning, #6b5200); /* was #8a5b00 */
  white-space: nowrap;
}

.erpc-account-hub__notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.erpc-account-hub__notif-list a {
  font-size: 0.875rem;
  color: var(--link-color, #0073e6);
  text-decoration: none;
}

.erpc-account-hub__notif-list a:hover,
.erpc-account-hub__notif-list a:focus-visible {
  outline: none;
}

.erpc-account-hub__notif-list a:hover .erpc-account-hub__notif-title,
.erpc-account-hub__notif-list a:focus-visible .erpc-account-hub__notif-title {
  text-decoration: underline;
}

/* Each notification row stacks title + detail + timestamp so the list reads
   as distinct events, not a column of identical titles. */
.erpc-account-hub__notif-list a {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.erpc-account-hub__notif-title {
  font-weight: 600;
}

.erpc-account-hub__notif-body {
  font-size: 0.8125rem;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__notif-time {
  font-size: 0.75rem;
  color: var(--gray-600, #757575);
}

.erpc-account-hub__notif-readall {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700, #595959);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Recent orders (compact live rows) ──────────────────────── */

.erpc-account-hub__orders {
  list-style: none;
  margin: 0;
  padding: 0;
}

.erpc-account-hub__order {
  display: grid;
  /* FIXED column widths (4.280.0) — each <li> is its own grid, so any
     `auto` track sizes per-row and the columns drift (a wide
     "Quoted On Hold" pill pushed its order # right; variable-width
     dates ragged the money column — Matt: "nice and aligned"). 200px
     covers the widest pill+hold combo; date and total right-align in
     fixed tracks so every row lines up. */
  grid-template-columns: 200px minmax(0, 1fr) 6.5rem 7.5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 0;
}

.erpc-account-hub__order + .erpc-account-hub__order {
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-account-hub__order--skeleton .erpc-skeleton-bar {
  width: 100%;
}

.erpc-account-hub__order-num {
  font-weight: 600;
  text-decoration: none;
  color: var(--link-color, #0073e6);
}

.erpc-account-hub__order-num:hover,
.erpc-account-hub__order-num:focus-visible {
  text-decoration: underline;
  outline: none;
}

.erpc-account-hub__order-date {
  font-size: 0.875rem;
  color: var(--gray-700, #595959);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.erpc-account-hub__order-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.erpc-account-hub__orders-status {
  margin: 0;
  color: var(--gray-700, #595959);
  font-size: 0.9375rem;
}

.erpc-account-hub__quotes-chip {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
  vertical-align: middle;
}

@media (max-width: 768px) {
  .erpc-account-hub__order {
    /* Same fixed-track rule as desktop (per-row grids drift on auto). */
    grid-template-columns: 150px 1fr 6.5rem;
  }

  .erpc-account-hub__order-total {
    display: none;
  }
}

/* ── Generic section (Recently purchased / Shopping lists) ── */

/* 4.523.0 — Pending-account notice. Sits between the welcome header and the
   KPI cards, so a buyer who cannot order yet is told why on the page they land
   on rather than only in the account-menu dropdown. Warning tokens, matching
   the same notice in the account menu. */
.erpc-account-hub__status-notice,
.erpc-ordering-paused-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--surface-warning, #fef3c7);
  border-left: 3px solid var(--border-warning, #ffe599);
  border-radius: 4px;
  color: var(--text-warning, #6b5200);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* 4.532.0 — On cart and checkout the paused-ordering notice sits above the
   page body and needs space beneath it; on the hub the grid gap provides it. */
.erpc-cart-page > .erpc-ordering-paused-notice,
.erpc-checkout-page > .erpc-ordering-paused-notice {
  margin-bottom: 1rem;
}

.erpc-account-hub__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.erpc-account-hub__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-account-hub__section-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.erpc-account-hub__section-cta {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--link-color, #0073e6);
}

.erpc-account-hub__section-cta:hover,
.erpc-account-hub__section-cta:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Shared body card — attention/orders/lists sections sit in one
   uniform white card. The product strip skips it (its `float`
   appearance cards carry their own chrome). */
.erpc-account-hub__section-body {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
}

/* ── Shopping lists snapshot ────────────────────────────────── */

.erpc-account-hub__lists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.erpc-account-hub__lists-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary, #111);
}

.erpc-account-hub__lists-link:hover,
.erpc-account-hub__lists-link:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

.erpc-account-hub__lists-name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.erpc-account-hub__lists-count {
  font-size: 0.8125rem;
  color: var(--gray-700, #595959);
}

.erpc-account-hub__lists-empty {
  margin: 0;
  color: var(--gray-700, #595959);
  font-size: 0.9375rem;
}

/* ── Sign-out button (rendered inside the rail) ─────────────── */

.erpc-account-hub__signout {
  appearance: none;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  background: var(--surface-base, #ffffff);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-primary, #111);
}

.erpc-account-hub__signout:hover,
.erpc-account-hub__signout:focus-visible {
  background: var(--gray-100, #f2f2f2);
  outline: none;
}

/* ── Profile page ([erpc_profile], 4.268.0) ──────────────────────────
   Single-column run of the SAME section/card system as the account
   dashboard (head + bordered white body) so /account/profile/ reads as
   a sibling of /account/. Form fields reuse the erpc-auth-* recipes
   from the login/signup pages — one input look storefront-wide. */

.erpc-profile {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 860px;
  margin: 0.5rem 0 2.5rem;
}

.erpc-profile__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.erpc-profile__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-profile__section-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

/* "+ Add address" — a button, but visually the dashboard's section-CTA
   link so the head rows match across account pages. */
.erpc-profile__section-cta {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link-color, #0073e6);
  cursor: pointer;
  white-space: nowrap;
}
.erpc-profile__section-cta:hover,
.erpc-profile__section-cta:focus-visible {
  color: var(--link-hover-color, #005bb5);
  text-decoration: underline;
}

.erpc-profile__section-body {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
  padding: 1.25rem;
}

.erpc-profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.erpc-profile__field--wide {
  grid-column: 1 / -1;
}

.erpc-profile__field-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gray-600, #737373);
}

.erpc-profile__save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Save buttons inherit .erpc-auth-submit (full-width on auth pages) —
   shrink to content inside the profile cards. */
.erpc-profile__save {
  width: auto;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

.erpc-profile__status {
  font-size: 0.85rem;
  color: var(--text-success, #065f46); /* was var(--green-700) #1c4f13 */
}
.erpc-profile__status.is-error {
  color: var(--red-700, #660000);
}

/* Password block — separated from the identity form by a rule; copy
   left, status + button right (wraps on narrow screens). */
.erpc-profile__password {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-profile__password-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Disclosure form under the password row (4.280.0). */
.erpc-profile__password-form {
  margin-top: 1rem;
}

/* ── Ship-to addresses ── */

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

.erpc-profile__address {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
}
.erpc-profile__address + .erpc-profile__address {
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-profile__address--skeleton {
  flex-direction: column;
  gap: 0.5rem;
}

.erpc-profile__address-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.erpc-profile__address-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.erpc-profile__address-line {
  font-size: 0.9rem;
  color: var(--gray-800, #404040);
}

.erpc-profile__address-meta {
  font-size: 0.8rem;
  color: var(--gray-600, #737373);
}

.erpc-profile__address-actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

/* Text-button pair (Edit / Delete) — the cart's delete-link recipe. */
.erpc-profile__link-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--link-color, #0073e6);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.erpc-profile__link-btn:hover,
.erpc-profile__link-btn:focus-visible {
  text-decoration-thickness: 2px;
}
.erpc-profile__link-btn--danger {
  color: var(--red-700, #660000);
}

/* Ship-to addresses list (4.312.0) — reuses the picker's `.erpc-shipto-picker__*`
   card chrome inline. The picker's list scrolls because the modal panel caps its
   height; inline in the section there's no such cap, so bound it here and let the
   list scroll inside rather than the page running forever. Rows aren't selectable
   here (no radio), so drop the modal row's pointer cursor + hover border shift. */
.erpc-profile__shipto-list {
  max-height: 24rem;
}
.erpc-profile__shipto-search-wrap {
  margin-bottom: 0.85rem;
}
.erpc-profile__shipto-search-wrap[hidden] {
  display: none;
}
.erpc-profile__shipto-row {
  cursor: default;
}
.erpc-profile__shipto-row:hover {
  border-color: var(--gray-300, #bfbfbf);
}

.erpc-profile__address-form {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-profile__address-form-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.erpc-profile__visibility {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.erpc-profile__visibility legend {
  padding: 0;
  margin-bottom: 0.35rem;
}
.erpc-profile__visibility-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ── Linked customers ── */

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

.erpc-profile__customer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
}
.erpc-profile__customer + .erpc-profile__customer {
  border-top: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-profile__customer-id {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.erpc-profile__customer-name {
  font-weight: 600;
}

.erpc-profile__customer-number {
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
}

.erpc-profile__chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.erpc-profile__chip--active {
  background: var(--green-100, #d4e7d1);
  color: var(--text-success, #065f46); /* was var(--green-700) #1c4f13 */
}

.erpc-profile__customer-switch {
  appearance: none;
  border: 1px solid var(--gray-300, #bfbfbf);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  background: var(--surface-base, #ffffff);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-primary, #111);
}
.erpc-profile__customer-switch:hover,
.erpc-profile__customer-switch:focus-visible {
  background: var(--gray-100, #f2f2f2);
}
.erpc-profile__customer-switch:disabled {
  opacity: 0.6;
  cursor: progress;
}

.erpc-profile__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-600, #737373);
}

@media (max-width: 640px) {
  .erpc-profile__grid {
    grid-template-columns: 1fr;
  }

  .erpc-profile__address,
  .erpc-profile__customer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ── My team page ([erpc_team], 4.271.0) ──────────────────────────────
   Section chrome rides the erpc-profile__section* classes above (the
   canonical standalone-page card chrome) — only the roster rows are
   team-specific. Chips reuse the erpc-profile__chip metrics. */

/* Root mirrors .erpc-profile, but with a LARGER inter-section gap than
   the 1.5rem head→card distance inside a section (1rem flex gap +
   0.5rem head padding) — without that ratio each heading reads as
   belonging to the card ABOVE it (Matt's click-test note). */
.erpc-team {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 860px;
  margin: 0.5rem 0 2.5rem;
}

.erpc-team__customer-number {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-600, #737373);
}

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

.erpc-team__user {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 1rem;
  padding: 0.875rem 0;
}
.erpc-team__user + .erpc-team__user {
  border-top: 1px solid var(--gray-100, #f2f2f2);
}
.erpc-team__user--skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.erpc-team__user-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.erpc-team__user-name {
  font-weight: 600;
}

.erpc-team__user-email,
.erpc-team__user-meta {
  grid-column: 1;
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
  overflow-wrap: anywhere;
}

.erpc-team__manage {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-size: 0.85rem;
  white-space: nowrap;
}

.erpc-team__chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Pending = the dashboard in-flight pill's amber pair. */
.erpc-team__chip--pending {
  background: var(--surface-warning, #fef3c7) /* was #fdf3e1 */;
  color: var(--text-warning, #6b5200); /* was #8a5b00 */
}
.erpc-team__chip--you {
  background: var(--blue-100, #d0e3ff);
  color: var(--link-color, #0073e6);
}

.erpc-team__user--pending {
  background: var(--surface-warning, #fef3c7) /* was #fefaf0 */;
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 6px;
}
.erpc-team__user--pending + .erpc-team__user {
  border-top: 0;
}

.erpc-team__status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-600, #737373);
}
.erpc-team__status.is-error {
  color: var(--red-700, #660000);
}

.erpc-team__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-600, #737373);
}

/* ── Approval activity (4.291.0 reshape) ─────────────────────────── */

.erpc-team__lead {
  margin: 0 0 1.25rem;
  color: var(--gray-600, #737373);
}

.erpc-team__stats,
.erpc-team__history {
  /* The user row is a 2-col grid (manage link pinned to col 2, row 1);
     keep the activity children in the text column. */
  grid-column: 1;
}

.erpc-team__stats {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--gray-600, #737373);
}

.erpc-team__stats--none {
  font-style: italic;
}

.erpc-team__stat--approved {
  color: var(--text-success, #065f46); /* was var(--green-600) #236317 */
  font-weight: 600;
}

.erpc-team__stat--rejected {
  color: var(--red-500, #970100);
  font-weight: 600;
}

.erpc-team__history {
  font-size: 0.85rem;
}

.erpc-team__history summary {
  cursor: pointer;
  color: var(--btn-primary-bg, #0a48a8);
  font-weight: 600;
}

.erpc-team__history summary:hover {
  text-decoration: underline;
}

.erpc-team__events {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--bg-100, #f6f8fb);
  border-radius: 6px;
}

.erpc-team__event {
  padding: 0.3rem 0;
  color: var(--gray-700, #595959);
}

.erpc-team__event + .erpc-team__event {
  border-top: 1px solid var(--gray-200, #d9d9d9);
}

.erpc-team__event--rejected {
  color: var(--red-700, #660000);
}

.erpc-team__event-reason {
  display: block;
  margin-top: 0.15rem;
  font-style: italic;
  color: var(--gray-600, #737373);
}

@media (max-width: 640px) {
  .erpc-team__user {
    grid-template-columns: 1fr;
  }
  .erpc-team__manage {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* -- Media line layout (Cart + Checkout + SFL) — Settings → Checkout
   & Orders → Storefront Layout → Cart Line Layout = "media" (4.111.0).

   Keeps the existing table layout (columns, headers, cell styling)
   verbatim and only changes the column SET:
     - PREPENDS a wide image column (~180px square) carrying the product
       thumbnail per line.
     - REMOVES the trailing `×` removal column. "Delete" is surfaced as
       a text button next to "Save for later" inside the description
       cell (or next to "Move to cart" / "Notify Me" in SFL rows).

   Every other column (SKU, description, qty, unit price, line total)
   keeps its existing class hooks, content, and visual styling. */

/* "Delete" text link — mirrors the SFL link visually so the two read
   as siblings in the description-cell actions row. */
.erpc-cart-lines__delete-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--action-blue, #1d4ed8);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.erpc-cart-lines__delete-link:hover,
.erpc-cart-lines__delete-link:focus-visible {
  color: var(--action-blue-hover, #1e40af); /* was #1E40AF */
  text-decoration-thickness: 2px;
}
.erpc-cart-lines__delete-link:focus-visible {
  outline: 2px solid var(--blue-300, #7aaeff); /* was #93C5FD */
  outline-offset: 2px;
  border-radius: 2px;
}
.erpc-cart-lines__actions-sep {
  color: var(--gray-400, #a6a6a6); /* was #9CA3AF */
  margin: 0 0.5rem;
  font-size: 0.8rem;
}
/* Per-line note text link — used by the media cart variant which has no
   separate remove cell to host the SVG icon button. Matches the existing
   Delete / SFL link styling so the actions row stays uniform. Filled
   variant gets a small leading bullet so the buyer can see at a glance
   which lines carry a note without having to read the label. */
.erpc-cart-lines__note-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--action-blue, #1d4ed8);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.erpc-cart-lines__note-link:hover,
.erpc-cart-lines__note-link:focus-visible {
  color: var(--action-blue-hover, #1e40af); /* was #1E40AF */
  text-decoration-thickness: 2px;
}
.erpc-cart-lines__note-link:focus-visible {
  outline: 2px solid var(--blue-300, #7aaeff); /* was #93C5FD */
  outline-offset: 2px;
  border-radius: 2px;
}
.erpc-cart-lines__note-link--filled {
  font-weight: 600;
}
.erpc-cart-lines__line-actions,
.erpc-cart-sfl__line-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

/* Image column (cart, checkout, SFL — same dimensions). Cell carries
   the fixed 180px footprint; the inner <img> scales within it while
   preserving aspect ratio. Empty cell (no thumbnail_url) leaves a
   neutral placeholder block so the column doesn't collapse. */
.erpc-cart-lines__table .erpc-cart-lines__image-col,
.erpc-checkout-lines__table .erpc-checkout-lines__image-col,
.erpc-cart-sfl__table .erpc-cart-sfl__image-col {
  width: 180px;
  text-align: center;
  vertical-align: middle;
}
.erpc-cart-lines__image-col img,
.erpc-checkout-lines__image-col img,
.erpc-cart-sfl__image-col img {
  display: block;
  max-width: 180px;
  max-height: 180px;
  margin: 0 auto;
  object-fit: contain;
}


/* ──────────────────────────────────────────────────────────────────────────
   Federated search results page (4.243.0)
   Rendered by the [erpc_search_results] shortcode (storefront/class-search-results.php).
   Grouped sections: products reuse .storefront-grid cards; articles/pages/docs
   render as link rows; brands/categories as jump-to chips. Colors lean on the
   theme (currentColor / neutral grays) so they sit inside any brand chrome.
   ────────────────────────────────────────────────────────────────────────── */
.storefront-search {
  /* Match the canonical content width (--erpc-content-max) so the
     results page uses the full desktop real estate instead of the theme's
     720px contentSize clamp. The product grid is auto-fill, so this alone
     yields 5–6 columns on desktop. */
  max-width: var(--erpc-content-max, 1400px);
  margin:    0 auto;
  padding:   1.5rem 1rem 4rem;
}
.storefront-search-header {
  margin-bottom: 1.5rem;
}
.storefront-search-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}
.storefront-search-summary {
  margin: 0;
  color: var(--gray-600, #737373); /* was #6b7280 */
  font-size: 0.95rem;
}
.storefront-search-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--gray-200, #d9d9d9);
  border-radius: 8px;
  text-align: center;
  color: var(--gray-600, #737373); /* was #6b7280 */
}
.storefront-search-empty p {
  margin: 0;
}

/* Jump-to rail + main column (results-page polish). The rail sticks under the
   theme's sticky header (var --erpcs-header-h, set in erp-theme) and the
   sections carry a matching scroll-margin so anchor jumps clear it. Rail hides
   on mobile — the sections stack full-width. */
.storefront-search-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.storefront-search-rail {
  position: sticky;
  top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 1.5rem);
}
.storefront-search-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.storefront-search-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.storefront-search-rail-link:hover,
.storefront-search-rail-link:focus-visible {
  background: var(--surface-sunken, #f2f2f2);
}
.storefront-search-rail-link.is-active {
  background: var(--surface-sunken, #f2f2f2);
  border-left-color: currentColor;
  font-weight: 600;
}
.storefront-search-rail-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storefront-search-rail-count {
  flex: 0 0 auto;
  color: var(--gray-600, #737373); /* was #6b7280 */
  font-size: 0.8rem;
  font-weight: 600;
}
@media (max-width: 900px) {
  .storefront-search-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .storefront-search-rail {
    display: none;
  }
}

/* Section: header (label + count) then a source-shaped body. */
.storefront-search-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-default, #e5e7eb);
  /* Anchor jumps from the rail clear the theme's sticky header (+ any
     sticky notice banner above it). */
  scroll-margin-top: calc(var(--erpcs-header-h, 80px) + var(--erpc-sticky-notice-h, 0px) + 1.5rem);
}
.storefront-search-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.storefront-search-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.storefront-search-section-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.storefront-search-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--surface-sunken, #f2f2f2);
  color: var(--gray-800, #404040); /* was #374151 */
  font-size: 0.75rem;
  font-weight: 600;
}

/* The products section reuses the archive product-grid partial, which prints
   its own "N products" line — redundant here, the section header owns the
   count. Hide it (and the partial's pagination, which never fires on the
   capped post__in query but belt-and-suspenders). */
.storefront-search-section .storefront-grid-count,
.storefront-search-section .storefront-grid-pagination {
  display: none;
}

/* Link rows — articles / pages / documents. Multi-column on desktop so a long
   list fills the width (and avoids 1400px-wide single-line rows); collapses to
   one column under ~380px. */
.storefront-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min(380px, 100%) caps the track at the container width, so the rows
     can't force horizontal overflow on viewports under ~412px (a bare
     380px floor did — 4.255.0). Identical rendering ≥380px containers. */
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 0.25rem 1.5rem;
}
.storefront-search-list-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease;
}
.storefront-search-list-link:hover,
.storefront-search-list-link:focus-visible {
  background: var(--surface-sunken, #f2f2f2);
}
.storefront-search-list-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-sunken, #f2f2f2);
  color: var(--gray-600, #737373); /* was #6b7280 */
}
.storefront-search-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storefront-search-list-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.storefront-search-list-title {
  font-weight: 600;
  line-height: 1.3;
}
.storefront-search-list-excerpt {
  color: var(--gray-600, #737373); /* was #6b7280 */
  font-size: 0.85rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.storefront-search-list-meta {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-600, #737373); /* was #6b7280 */
}

/* Brand / category jump-to chips. */
.storefront-search-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.storefront-search-term {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 0.9rem;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.storefront-search-term:hover,
.storefront-search-term:focus-visible {
  background: var(--surface-sunken, #f2f2f2);
  border-color: var(--gray-400, #a6a6a6); /* was #9ca3af */
}
.storefront-search-term-count {
  color: var(--gray-600, #737373); /* was #6b7280 */
  font-size: 0.78rem;
  font-weight: 600;
}

/* .erpc-approvals__title removed 4.276.0 (UX-audit slice 5): the block's
   internal "Approvals" h2 duplicated the page's post-title h1 verbatim —
   the header now leads with the subtitle only. */

/* ══════════════════════════════════════════════════════════════════════════
   Mobile transactional pages (4.255.0) — UX-audit slice 3.
   Everything below is additive inside media queries; desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cart / Saved-for-Later / Checkout line tables → stacked cards ────────
   <768px each line restacks as a card. Markup stays <table> with explicit
   role= attributes (templates + JS renderers), so the a11y tree keeps the
   table semantics despite the display overrides here. The header row is
   visually hidden — NOT display:none — so screen readers keep the
   columnheaders; sighted users get the label repeated per-cell via
   td[data-label]::before. The `/ ""` alt-text form keeps that visual label
   out of the a11y tree (no double announcement next to the columnheader);
   the plain attr() line above it is the fallback for engines without
   alt-text support. Handles both line layouts: `table` (remove-× column)
   and `media` (leading image column, Delete link in the actions row). */
@media (max-width: 768px) {
  /* Header rows: visually hidden, kept in the a11y tree. */
  .erpc-cart-lines__table thead tr,
  .erpc-cart-sfl__table thead tr,
  .erpc-checkout-lines__table thead tr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* No columns left to scroll; don't clip card focus rings. */
  .erpc-cart-lines,
  .erpc-checkout-lines {
    overflow-x: visible;
  }

  .erpc-cart-lines__table,
  .erpc-cart-sfl__table,
  .erpc-checkout-lines__table,
  .erpc-cart-lines__table tbody,
  .erpc-cart-sfl__table tbody,
  .erpc-checkout-lines__table tbody {
    display: block;
    width: 100%;
  }

  /* One card per line. */
  .erpc-cart-lines__table tbody tr,
  .erpc-cart-sfl__table tbody tr,
  .erpc-checkout-lines__table tbody tr {
    display: block;
    position: relative;
    padding: 1rem;
    border: 1px solid var(--gray-200, #d9d9d9);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: var(--surface-base, #ffffff);
  }

  .erpc-cart-lines__table td,
  .erpc-cart-sfl__table td,
  .erpc-checkout-lines__table td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  /* Card top: product image (media layout) centered above the SKU. */
  .erpc-cart-lines__table .erpc-cart-lines__image-col,
  .erpc-cart-sfl__table .erpc-cart-sfl__image-col,
  .erpc-checkout-lines__table .erpc-checkout-lines__image-col {
    width: auto;
    margin-bottom: 0.75rem;
  }
  .erpc-cart-lines__image-col img,
  .erpc-cart-sfl__image-col img,
  .erpc-checkout-lines__image-col img {
    max-width: 140px;
    max-height: 140px;
  }

  /* SKU = the card's title line. Right padding clears the absolute
     remove-× (table layout only, but harmless in media layout). */
  .erpc-cart-lines__sku,
  .erpc-cart-sfl__sku {
    font-size: 1rem;
    padding-right: 2.75rem;
  }
  .erpc-checkout-lines__sku {
    font-size: 1rem;
  }

  .erpc-cart-lines__desc-col,
  .erpc-cart-sfl__desc-col,
  .erpc-checkout-lines__desc-col {
    margin: 0.35rem 0 0.25rem;
  }

  /* Labelled value rows (Qty / Unit price / Line total): visible label
     left, value right. Overrides the desktop nowrap/right-align column
     rules by specificity (table-prefixed + attribute). */
  .erpc-cart-lines__table td[data-label],
  .erpc-cart-sfl__table td[data-label],
  .erpc-checkout-lines__table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.6rem;
    white-space: normal;
    text-align: right;
  }
  .erpc-cart-lines__table td[data-label]::before,
  .erpc-cart-sfl__table td[data-label]::before,
  .erpc-checkout-lines__table td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-700, #595959);
    text-align: left;
  }

  /* SFL's desktop spacer column has no card equivalent. */
  .erpc-cart-sfl__table .erpc-cart-sfl__filler-col {
    display: none;
  }

  /* Remove × (table layout): pinned top-right of the card with a
     ≥44px touch target. */
  .erpc-cart-lines__table .erpc-cart-lines__remove-col,
  .erpc-cart-sfl__table .erpc-cart-sfl__remove-col {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: auto;
  }
  .erpc-cart-lines__table .erpc-cart-remove,
  .erpc-cart-sfl__table .erpc-cart-sfl__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  /* Bulk-edit select box: pinned top-left, card padding makes room.
     (.erpc-cart-lines--bulk lands on the section wrap when armed.) */
  .erpc-cart-lines--bulk .erpc-cart-lines__table tbody tr {
    padding-left: 3rem;
  }
  .erpc-cart-lines__table .erpc-cart-lines__select-col {
    position: absolute;
    top: 1.1rem;
    left: 0.85rem;
    width: auto;
  }
  .erpc-cart-lines__select {
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* ── Toast vs. the theme's floating mobile bar ────────────────────────────
   <1000px the companion theme's #mobile-actions bar floats at the viewport
   bottom (it hides itself ≥1000px); lift the toast stack above it so the
   bar's buttons stay tappable while a toast is up. 4.5rem clears the bar
   plus its 0.5rem gap; harmless without the theme (toast floats a little
   higher on mobile, still bottom-anchored). */
@media (max-width: 999.98px) {
  .erpc-storefront-notice-host--toast {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Touch ergonomics ─────────────────────────────────────────────────────
   (hover: none) = touch device at any width; desktop pointer rendering is
   untouched. Two concerns: (1) iOS Safari zooms the page on focus of any
   input under 16px — bump the storefront's sub-16px inputs to exactly
   16px; (2) sub-44px tap targets get bumped to the 44px comfortable
   minimum (WCAG 2.5.8 asks 24px; 44px is the Apple HIG floor). */
@media (hover: none) {
  .erpc-cart-qty-input,
  .erpc-cart-input,
  .erpc-checkout-input,
  /* compound to match the base rule's 0,2,1 — a bare .erpc-auth-input
     would lose to it and re-shrink auth inputs below 16px on touch */
  .erpc-auth-field input.erpc-auth-input,
  .storefront-category-onpage-search input {
    font-size: 16px;
  }

  /* Grid pagination (36px) + A-Z taxonomy jump links (28px). */
  .storefront-grid-pagination a,
  .storefront-grid-pagination span {
    min-width: 44px;
    height: 44px;
  }
  .erpc-tax-grid__jump a {
    min-width: 44px;
    height: 44px;
  }

  /* Active-filter chips (~28px tall at default padding). */
  .storefront-category-chip {
    padding: 0.5rem 0.85rem;
  }

  /* Cart remove ×s (also sized by the <768px card rules above — this
     covers tablet widths where the table layout still renders). */
  .erpc-cart-remove,
  .erpc-cart-sfl__remove-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* PO-number clear × — bounded by the ~40px input it sits inside, so
     36px is the most it can grow without overflowing the frame. */
  .erpc-cart-input-clear {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }
}

/* ── Account → Devices (4.332.0) ───────────────────────────────────────
   Trusted-device manager ([erpc_devices]). Reuses the account-hub tokens
   the profile page uses; rows mirror the ship-to card chrome. */
.erpc-devices {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Capped at 600px, LEFT-aligned in the main column on desktop. Centered
     once the rail stacks (≤900px, tablet) and 100% on mobile — see the
     media queries below. Matt 2026-06-14. */
  width: 100%;
  max-width: 600px;
  margin: 0.5rem 0 2.5rem;
}

.erpc-devices__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-100, #f2f2f2);
}

.erpc-devices__title {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.erpc-devices__intro {
  margin: 0;
  max-width: 56ch;
  font-size: 0.875rem;
  color: var(--gray-600, #737373);
}

.erpc-devices__status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-700, #595959);
}

.erpc-devices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.erpc-devices__device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  border: 1px solid var(--gray-200, #d9d9d9);
  border-radius: 8px;
  background: var(--surface-base, #ffffff);
}

.erpc-devices__device.is-current {
  border-color: var(--accent, #0a48a8);
  box-shadow: 0 0 0 1px var(--accent, #0a48a8) inset;
}

.erpc-devices__device-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.erpc-devices__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.erpc-devices__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.erpc-devices__badge {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
}

.erpc-devices__badge--current {
  background: var(--accent, #0a48a8);
  color: var(--text-inverse, #ffffff);
}

.erpc-devices__badge--active {
  background: var(--surface-success, #ecfdf5) /* was #e6f4ea */;
  color: var(--text-success, #065f46); /* was #1e7e34 */
}

.erpc-devices__meta {
  font-size: 0.8125rem;
  color: var(--gray-600, #737373);
}

.erpc-devices__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.erpc-devices__action {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.25rem 0.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--accent, #0a48a8);
}

.erpc-devices__action:hover,
.erpc-devices__action:focus-visible {
  text-decoration: underline;
}

.erpc-devices__action--signout {
  color: var(--text-error-strong, #991b1b); /* was #b3261e */
}

.erpc-devices__rename {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.erpc-devices__rename-input {
  min-width: 0;
  flex: 1 1 12rem;
}

.erpc-devices__empty {
  margin: 0;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--gray-600, #737373);
  border: 1px dashed var(--gray-200, #d9d9d9);
  border-radius: 8px;
}

/* Stack the "Remember this device" row beneath the keep-logged-in row. */
.erpc-auth-row--device {
  margin-top: -0.25rem;
}

@media (max-width: 560px) {
  .erpc-devices__device {
    align-items: flex-start;
  }
  .erpc-devices__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── Help page ([erpc_help], 4.362.0) ────────────────────────────────
   Public landing for documentation / help articles / support tickets.
   Intro band + a responsive card grid. Cards reuse the white / gray-100
   border / 8px-radius surface the profile + dashboard sections use, so
   /help/ reads as a sibling of the other storefront pages. Foundation
   slice: each card is a "coming soon" placeholder. */

.erpc-help {
  max-width: 960px;
  /* Top margin matches the product listing's 1.5rem gap below the nav so the
     Help pages line up with the rest of the storefront (4.391.0). Width stays
     narrower (960) by design. */
  margin: 1.5rem auto 3rem;
}

.erpc-help__intro {
  margin-bottom: 2rem;
}

.erpc-help__lede {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-600, #737373);
}

.erpc-help__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.erpc-help__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
  padding: 1.5rem;
}

.erpc-help__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.25rem;
  border-radius: 10px;
  background: var(--gray-50, #f7f7f7);
  color: var(--link-color, #0073e6);
}

.erpc-help__card-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.erpc-help__card-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-600, #737373);
}

.erpc-help__card-status {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500, #8c8c8c);
}

/* Cards are links once content is dynamic (4.366.0). */
a.erpc-help__card {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.erpc-help__card:hover,
a.erpc-help__card:focus-visible {
  border-color: var(--link-color, #0073e6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.erpc-help__heading {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Breadcrumb */
.erpc-help__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--gray-600, #737373);
}
.erpc-help__breadcrumb a {
  color: var(--link-color, #0073e6);
  text-decoration: none;
}
.erpc-help__breadcrumb a:hover {
  text-decoration: underline;
}
.erpc-help__crumb-sep {
  color: var(--gray-300, #bfbfbf);
}
.erpc-help__crumb-current {
  color: var(--gray-700, #595959);
}

/* Article list (category view) */
.erpc-help__article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.erpc-help__article-link {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.erpc-help__article-link:hover,
.erpc-help__article-link:focus-visible {
  border-color: var(--link-color, #0073e6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.erpc-help__article-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--link-color, #0073e6);
}
.erpc-help__article-excerpt {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-600, #737373);
}

/* Quick-answer FAQ accordion (4.389.0) — native <details>, zero JS. */
.erpc-help__qa-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 2rem;
}
.erpc-help__qa {
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
}
.erpc-help__qa[open] {
  border-color: var(--link-color, #0073e6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.erpc-help__qa-q {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--link-color, #0073e6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.erpc-help__qa-q::-webkit-details-marker { display: none; }
.erpc-help__qa-q::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gray-600, #737373);
  transition: transform 0.15s ease;
}
.erpc-help__qa[open] > .erpc-help__qa-q::after {
  content: "\2212"; /* minus */
}
.erpc-help__qa-q:focus-visible {
  outline: 2px solid var(--link-color, #0073e6);
  outline-offset: 2px;
}
.erpc-help__qa-a {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-700, #595959);
}
.erpc-help__qa-a > :first-child { margin-top: 0; }
.erpc-help__qa-a > :last-child { margin-bottom: 0; }
/* Deep-linked answer (/help/{slug} → #qa-{slug}) opens + highlights. */
.erpc-help__qa:target {
  border-color: var(--link-color, #0073e6);
  scroll-margin-top: 1.5rem;
}
.erpc-help__subheading {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

/* Single article body */
.erpc-help__article-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-800, #404040);
}
.erpc-help__article-body h2,
.erpc-help__article-body h3 {
  margin: 1.5rem 0 0.5rem;
}
.erpc-help__article-body p {
  margin: 0 0 1rem;
}
.erpc-help__article-body ul,
.erpc-help__article-body ol {
  margin: 0 0 1rem 1.25rem;
}

.erpc-help__empty {
  padding: 2rem 0;
  color: var(--gray-600, #737373);
}

/* ── Help → "Still need help?" CTA + Support page ([erpc_support], 4.367.0) ── */
.erpc-help__support-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--gray-50, #f7f7f7);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
}
.erpc-help__support-cta-title {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.erpc-help__support-cta-text p {
  margin: 0;
  color: var(--gray-600, #737373);
}
/* Visuals come from the house `.btn-primary` (4.374.0); keep only layout. */
.erpc-help__support-cta-button {
  white-space: nowrap;
  margin: 0;
}

.erpc-support {
  max-width: 960px;
  margin: 0.5rem auto 3rem;
}
.erpc-support__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 720px) {
  .erpc-support__cols { grid-template-columns: 1fr; }
}
.erpc-support__heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.erpc-support__form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.erpc-support__status,
.erpc-support__muted {
  color: var(--gray-600, #737373);
  font-size: 0.9375rem;
}
.erpc-support__tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.erpc-support__ticket {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "subject badge" "date badge";
  gap: 0.15rem 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.erpc-support__ticket:hover,
.erpc-support__ticket:focus-visible {
  border-color: var(--link-color, #0073e6);
}
.erpc-support__ticket-subject { grid-area: subject; font-weight: 600; }
.erpc-support__ticket-date { grid-area: date; font-size: 0.8125rem; color: var(--gray-500, #8c8c8c); }
.erpc-support__badge {
  grid-area: badge;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #595959);
  white-space: nowrap;
}
.erpc-support__badge--open { background: var(--surface-info, #eff6ff) /* was #e3edff */; color: var(--action-blue, #1d4ed8); }
.erpc-support__badge--pending { background: var(--surface-warning, #fef3c7) /* was #fff4d6 */; color: var(--text-warning, #6b5200); /* was #8a6100 */ }
.erpc-support__badge--resolved { background: var(--surface-success, #ecfdf5) /* was #e2f5e9 */; color: var(--text-success, #065f46); }
.erpc-support__thread {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-100, #f2f2f2);
}
.erpc-support__back {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 0.75rem;
  color: var(--link-color, #0073e6);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.erpc-support__msgs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}
.erpc-support__msg {
  padding: 0.9rem 1.1rem;
  background: var(--surface-base, #ffffff);
  border: 1px solid var(--gray-100, #f2f2f2);
  border-radius: 8px;
}
.erpc-support__msg--staff {
  background: var(--surface-info, #eff6ff);
  border-color: var(--border-info, #a6c8ff); /* was #cfe0fb */
}
.erpc-support__msg-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  color: var(--gray-500, #8c8c8c);
}
.erpc-support__msg-author { font-weight: 600; color: var(--gray-700, #595959); }
.erpc-support__msg-body { font-size: 0.9375rem; line-height: 1.55; }
.erpc-support__reply { margin-top: 1rem; }

/* Account → Notifications (4.394.0) — channel-preference matrix + web-push opt-in. */
.erpc-notif-prefs { max-width: 760px; }
.erpc-notif-prefs__head { margin-bottom: 1.25rem; }
.erpc-notif-prefs__title { margin: 0 0 0.35rem; font-size: 1.5rem; }
.erpc-notif-prefs__intro { margin: 0; color: var(--gray-700, #595959); font-size: 0.9375rem; line-height: 1.55; }
.erpc-notif-prefs__status { margin: 0 0 1rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: var(--gray-100, #f2f2f2); font-size: 0.875rem; }
.erpc-notif-prefs__table { width: 100%; border-collapse: collapse; }
.erpc-notif-prefs__table th,
.erpc-notif-prefs__table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--gray-200, #d9d9d9); font-size: 0.9375rem; vertical-align: middle; }
.erpc-notif-prefs__table thead th { text-align: left; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray-600, #737373); }
.erpc-notif-prefs__table input[type="checkbox"] { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.erpc-notif-prefs__table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.erpc-notif-prefs__badge { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; line-height: 1.5; background: var(--gray-100, #f2f2f2); color: var(--gray-700, #595959); }
.erpc-notif-prefs__actions { margin-top: 1.25rem; }
.erpc-notif-prefs__push { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200, #d9d9d9); }
.erpc-notif-prefs__push-title { margin: 0 0 0.35rem; font-size: 1.125rem; }
.erpc-notif-prefs__push-intro { margin: 0 0 1rem; color: var(--gray-700, #595959); font-size: 0.9375rem; }
.erpc-notif-prefs__push-note { margin: 0; color: var(--gray-600, #737373); font-size: 0.9375rem; }
.erpc-notif-prefs__push-toggle { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.erpc-notif-prefs__push-state { color: var(--gray-700, #595959); font-size: 0.9375rem; }
.erpc-notif-prefs__devices { margin-top: 1.5rem; }
.erpc-notif-prefs__devices-title { margin: 0 0 0.5rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray-600, #737373); }
.erpc-notif-prefs__device-list { list-style: none; margin: 0; padding: 0; }
.erpc-notif-prefs__device { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--gray-200, #d9d9d9); flex-wrap: wrap; }
.erpc-notif-prefs__device-name { font-weight: 600; font-size: 0.9375rem; }
.erpc-notif-prefs__device-seen { color: var(--gray-600, #737373); font-size: 0.8125rem; margin-left: auto; }
.erpc-notif-prefs__device-remove { background: none; border: none; color: var(--erpc-link, #0a48a8); font-size: 0.875rem; cursor: pointer; padding: 0; }
.erpc-notif-prefs__device-remove:hover { text-decoration: underline; }

/* ── Account → Notifications inbox ([erpc_notification_inbox], 4.439.0) ──────
   The full notification list behind the chrome bell's "View all". Mirrors the
   bell-panel row anatomy (icon chip + title/body/time stack + unread dot/tint)
   but as a standalone account page rather than a dropdown. */
.erpc-notif-inbox { max-width: 760px; }
.erpc-notif-inbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.erpc-notif-inbox__mark-all { background: none; border: none; color: var(--erpc-link, #0a48a8); font-size: 0.9375rem; cursor: pointer; padding: 0; }
.erpc-notif-inbox__mark-all:hover { text-decoration: underline; }
.erpc-notif-inbox__settings-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; color: var(--erpc-link, #0a48a8); font-size: 0.9375rem; text-decoration: none; }
.erpc-notif-inbox__settings-link:hover { text-decoration: underline; }
.erpc-notif-inbox__settings-icon { display: inline-flex; }
.erpc-notif-inbox__empty { color: var(--gray-700, #595959); font-size: 0.9375rem; }
.erpc-notif-inbox__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gray-200, #d9d9d9); border-radius: 8px; overflow: hidden; }
.erpc-notif-inbox__item + .erpc-notif-inbox__item { border-top: 1px solid var(--gray-100, #f2f2f2); }
.erpc-notif-inbox__item.is-unread { background: var(--surface-subtle, #fafafa); }
.erpc-notif-inbox__item-link { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem 1.1rem; color: var(--text-primary, #111); font-size: 0.9375rem; text-align: left; text-decoration: none; }
a.erpc-notif-inbox__item-link:hover { background: var(--surface-subtle, #fafafa); }
.erpc-notif-inbox__item.is-unread a.erpc-notif-inbox__item-link:hover { background: var(--surface-sunken, #f2f2f2); }
a.erpc-notif-inbox__item-link:focus { outline: none; }
a.erpc-notif-inbox__item-link:focus-visible { outline: 2px solid var(--outline-color, #0a48a8); outline-offset: -2px; }
.erpc-notif-inbox__item-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--surface-sunken, #f2f2f2); color: var(--text-secondary, #595959); }
.erpc-notif-inbox__item-icon--approved { background: var(--notif-approved-bg, #e7f4ec); color: var(--notif-approved-fg, #15803d); }
.erpc-notif-inbox__item-icon--rejected { background: var(--notif-rejected-bg, #fbeaea); color: var(--notif-rejected-fg, #d63638); }
.erpc-notif-inbox__item-icon--pending { background: var(--notif-pending-bg, #fdf3e1); color: var(--notif-pending-fg, #996a13); }
.erpc-notif-inbox__item-content { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 0.15rem; }
.erpc-notif-inbox__item-title { font-weight: 600; color: var(--text-primary, #111); line-height: 1.35; overflow-wrap: anywhere; }
.erpc-notif-inbox__item-body { color: var(--text-secondary, #595959); font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; }
.erpc-notif-inbox__item-time { color: var(--text-muted, #737373); font-size: 0.8125rem; }
.erpc-notif-inbox__item-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 0.5rem; border-radius: 999px; background: var(--link-color, #0073e6); }
/* The block theme doesn't ship core's .screen-reader-text — scope the recipe. */
.erpc-notif-inbox .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; }
@media (forced-colors: active) {
  .erpc-notif-inbox__list { border-color: CanvasText; }
  .erpc-notif-inbox__item-dot { background: Highlight; }
}

/* ════════════════════════════════════════════════════════════════════════
   Windows High Contrast Mode / forced-colors (4.404.0 — accessibility).
   In this OS mode the system REPLACES our palette with the user's own system
   colors, so our job here is STRUCTURE, not color:
     • our focus rings are box-shadow / background based and get dropped in
       forced-colors — restore a real `outline` so keyboard focus stays visible;
     • elements that signal state by BACKGROUND only (status flags, stock /
       match / promo pills, category chips, badges, selected rows) lose their
       fill when backgrounds flatten to Canvas — give them a real border.
   This is NOT a website toggle — it is driven by the OS and always wins (our
   own light/dark + high-contrast toggle is separate, applied via tokens).
   WCAG 2.4.7 (focus visible) / 1.4.1 (use of colour) / 1.4.11 (non-text contrast).
   ════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* Keyboard focus — !important to beat the component `outline:none` rules
     (a legitimate accessibility override, scoped to this media query only).
     Highlight = the system focus/selection colour. */
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  /* State conveyed by background only → give it a real edge so it survives the
     OS flattening backgrounds to Canvas. CanvasText = system foreground. */
  .storefront-grid-card-status-flag,
  .storefront-product-status-flag,
  .storefront-product-status-flag-link,
  .storefront-grid-card-stock-flag,
  .storefront-grid-card-stock-pill,
  .storefront-pill-match,
  .storefront-pill-promo,
  .storefront-category-chip,
  .erpc-lists-chip,
  .erpc-cart-lines__backorder-pill,
  .erpc-support__badge,
  .erpc-devices__badge,
  .erpc-account-hub__inflight-pill,
  .erpc-team__chip,
  .erpc-profile__chip,
  .erpc-outage-notice {
    border: 1px solid CanvasText;
  }

  /* Selected / active rows signalled by background — mark with the system
     Highlight so the selection is unmistakable when fills are removed. */
  .erpc-cart-shipto-modal__item--selected,
  .erpc-shipto-picker__item--selected,
  .erpc-devices__badge--active,
  .erpc-profile__chip--active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}