/**
 * Gold accent tokens and theme-bucket overrides.
 *
 * Post-Debug Canonical Validation Gate (ZCP1–ZCP10):
 * - Problem: Site accents were tied to non-gold tokens in main.css and
 *   component CSS; masthead star fill did not pick up a defined accent
 *   variable from the loaded set.
 * - Cause: --color-accent and related accents were not centralized in a
 *   theme-bucket file loaded after main.css.
 * - Solution: This hand-authored theme CSS defines :root tokens and
 *   selectors documented in the project gold accent plan, registered after
 *   css/source/main.css in frontend.libraries.yml (global, global_checkout) as
 *   css/overrides/global.css. Masthead
 *   star fill uses header sibling selectors per Drupal theme SMACSS ordering per
 *   https://api.drupal.org/api/drupal/core%21core.api.php/group/css/11.x
 *
 * Drupal 11.x API compliance: CSS library attachment and SMACSS buckets per
 * https://api.drupal.org/api/drupal/core%21core.api.php/group/css/11.x
 * (theme subarray, extension libraries.yml).
 *
 * Revision — premium button matrix (Directions A + B):
 * - button_graphite: hairline ghost (transparent fill); light commerce bar uses dark hairline.
 * - button_gold: same hairline ghost as graphite, with --color-accent border and type
 *   (matches the commerce-bar total). Light commerce bar uses --color-accent-on-light.
 * - Shared: native .button type scale; border-radius 2px.
 *
 * Revision — masthead overlay fade matches storefront canvas:
 * Native overlay_top-dark / overlay_bottom-dark still target Arts #111111.
 * Canvas is --surface-glow-lead (#181614); override the fade stops here so
 * the hero dissolves into the brown canvas instead of a black band.
 *
 * Revision — teaser description / out-of-stock primary button:
 * - Problem: Product teaser description text inherited gold from a .small-caps
 *   wrapper; disabled commerce_stock_enforcement "Out of stock" submit used
 *   .button--primary and appeared gold like in-stock add-to-cart.
 * - Cause: h6/.small-caps set color accent on the parent; .card-strip__desc-main
 *   used color inherit in component CSS; .button--primary had no :disabled
 *   carve-out and generic .button:hover could tint disabled controls.
 * - Solution: Explicit .card-strip__cat .card-strip__desc-main color
 *   #ffffff; scope .button--primary gold and .button:hover to
 *   :not(:disabled):not([disabled]):not([aria-disabled="true"]); add disabled
 *   grey fill and not-allowed cursor for primary submits.
 */

:root {
  --color-accent: #d4a55f;
  --color-accent-strong: #b8893f;
  --color-accent-soft: rgba(212, 165, 95, 0.12);
  --color-accent-primary: var(--color-accent);
  /*
   * Contrast-safe accent for gold text on light surfaces (WCAG 2.1 SC 1.4.3,
   * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
   * Brand --color-accent (#d4a55f) only reaches ~1.9:1 on the light masthead
   * tokens (--color-light-1 #eeece6 / --color-light-3 #f7f6f3); this deep gold
   * measures ~6.2:1 on --color-light-1 and ~6.9:1 on --color-light-3.
   */
  --color-accent-on-light: #6b4e16;
  /* User-specified canvas brown (sampled RGB 24 22 20), not an 8% gold wash. */
  --surface-glow-lead: #181614;
  --surface-glow-mid: color-mix(in srgb, var(--color-accent) 42%, var(--color-dark-1));
  --surface-glow-strong: color-mix(in srgb, var(--color-accent) 64%, var(--color-dark-1));
  --storefront-canvas: var(--surface-glow-lead);
  --storefront-canvas-gradient: linear-gradient(
    180deg,
    var(--surface-glow-lead) 0%,
    var(--surface-glow-lead) 64%,
    color-mix(in srgb, var(--color-accent) 16%, var(--color-dark-1)) 86%,
    var(--surface-glow-mid) 100%
  );
}

/*
 * Canonical storefront canvas: dark brown #181614 through the catering
 * customizer band (~64% of main), then gold. Hub, PDP, and customizer
 * sections stay transparent so this same paint is the page background.
 * Overlay dialogs reuse --storefront-canvas-gradient. Footer continues
 * from --surface-glow-mid.
 *
 * CSS Images Module Level 3 linear-gradient:
 * https://www.w3.org/TR/css-images-3/#linear-gradients
 * CSS Color Module Level 5 color-mix():
 * https://www.w3.org/TR/css-color-5/#color-mix
 * CSS Backgrounds Module Level 3 background-image / background-color:
 * https://www.w3.org/TR/css-backgrounds-3/#background
 * Drupal 11 theme CSS libraries:
 * https://api.drupal.org/api/drupal/core%21core.api.php/group/css/11.x
 */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--storefront-canvas);
}

#page-wrapper.bg-dark-1 {
  background-color: var(--storefront-canvas) !important;
}

#page-wrapper.bg-dark-1 > main.page-wrapper__content {
  background-image: var(--storefront-canvas-gradient);
}

/*
 * Native overlay_top-dark / overlay_bottom-dark fade to Arts --color-dark-1
 * (#111111 / rgb(17, 17, 17)). The storefront canvas is --surface-glow-lead
 * (#181614). Keep the native axes and same-hue 0-alpha stop so the hero
 * dissolves into the canvas instead of a black band (W3C CSS Images 3
 * interpolates toward transparent-black if the fade stop is `transparent`).
 *
 * CSS Images Module Level 3 linear-gradient:
 * https://www.w3.org/TR/css-images-3/#linear-gradients
 * CSS Color Module Level 4 rgb() / alpha:
 * https://www.w3.org/TR/css-color-4/#rgb-functions
 * Drupal 11 theme CSS libraries (theme bucket after main.css):
 * https://api.drupal.org/api/drupal/core%21core.api.php/group/css/11.x
 */
.overlay_bottom-dark {
  background-image: linear-gradient(
    0deg,
    var(--surface-glow-lead) 0%,
    rgba(24, 22, 20, 0) 100%
  );
}

.overlay_top-dark {
  background-image: linear-gradient(
    180deg,
    var(--surface-glow-lead) 0%,
    rgba(24, 22, 20, 0) 100%
  );
}

/* Issue #3386877: Drupal.theme.placeholder() emits em.placeholder; Bootstrap 5 .placeholder is a skeleton. */
em.placeholder {
  display: inline;
  vertical-align: baseline;
  background-color: transparent;
  opacity: 1;
  min-height: 0;
  cursor: inherit;
}

a:hover {
  color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%);
  background-position:
    right 18px center,
    right 14px center;
  background-repeat: no-repeat;
  background-size: 4px 4px;
}

.menu > li.menu-item--active-trail > a,
.menu > li.is-active > a,
.menu > li > a.is-active {
  color: var(--color-accent);
}

.breadcrumb li:last-child {
  color: var(--color-accent);
}

footer hr,
.footer hr {
  border-color: var(--color-accent-soft);
}

h6,
.h6,
.small-caps,
.section-masthead__subheading {
  color: var(--color-accent);
}

[data-arts-theme-text="light"] h6,
[data-arts-theme-text="light"] .h6,
[data-arts-theme-text="light"] .small-caps,
[data-arts-theme-text="light"] .section-masthead__subheading {
  color: var(--color-accent);
}

/*
 * Masthead category eyebrow (CARIBBEAN / AMERICAN / MEDITERRANEAN, etc.).
 *
 * The eyebrow is hardcoded to brand gold above, which only reads on dark
 * mastheads. On light product mastheads (oxtail, trinidadian-lamb-ribs,
 * honey-bbq-pork-ribs) it drops to ~1.9:1, failing WCAG 2.1 SC 1.4.3.
 * The theme marks dark surfaces with [data-arts-theme-text="light"]; its
 * absence means a light surface. So the eyebrow defaults to the
 * contrast-safe deep gold, and brand gold is restored only inside a
 * light-text (dark) context. Size is lifted from ~11px for legibility.
 */
.section-masthead__subheading {
  color: var(--color-accent-on-light);
  font-size: 0.82rem;
}

.section-masthead__subheading .split-text__line,
.section-masthead__subheading .split-text__word {
  color: inherit;
}

[data-arts-theme-text="light"] .section-masthead__subheading,
[data-arts-theme-text="light"] .section-masthead__subheading .split-text__line,
[data-arts-theme-text="light"] .section-masthead__subheading .split-text__word {
  color: var(--color-accent);
}

/*
 * Product spec-strip eyebrow labels (BBQ Style / Preparation / Serving Size /
 * Reviews count). main.css styles .figure-info__option as --color-gray-1, but
 * the shared .small-caps gold rule above overrides it to brand gold, which
 * lands on the white .section-properties strip at only ~2.25:1 (WCAG 1.4.3
 * fail). This strip is always a light surface, so use the contrast-safe deep
 * gold (~6.5:1 on #ffffff) to keep the eyebrow look while staying legible.
 */
.section-properties .figure-info__option.small-caps {
  color: var(--color-accent-on-light);
}

.button:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
a.button:not([aria-disabled="true"]):hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]),
input[type="submit"].button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]),
.layout-checkout-form .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]),
.commerce-checkout-flow .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]),
form[data-drupal-selector^="commerce-checkout-flow-"] .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark-1);
}

.button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus,
input[type="submit"].button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
input[type="submit"].button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus,
.layout-checkout-form .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.layout-checkout-form .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus,
.commerce-checkout-flow .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.commerce-checkout-flow .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus,
form[data-drupal-selector^="commerce-checkout-flow-"] .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
form[data-drupal-selector^="commerce-checkout-flow-"] .button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-dark-1);
}

.button--primary:disabled,
.button--primary[disabled],
.button--primary[aria-disabled="true"],
input[type="submit"].button--primary:disabled,
input[type="submit"].button--primary[disabled],
.button--add-to-cart:disabled,
.button--add-to-cart[disabled],
input[type="submit"].button--add-to-cart:disabled,
input[type="submit"].button--add-to-cart[disabled] {
  background: var(--color-gray-2);
  border-color: var(--color-gray-2);
  color: var(--color-gray-1);
  cursor: not-allowed;
}

input[type="submit"].button--add-to-cart.button_solid.button_graphite:disabled,
input[type="submit"].button--add-to-cart.button_solid.button_graphite[disabled],
input[type="submit"].button--add-to-cart.button_solid.button_graphite[aria-disabled="true"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  cursor: not-allowed;
}

.card-strip__cat .card-strip__desc-sides {
  color: var(--color-accent);
}

.card-strip__cat .card-strip__desc-main {
  color: #ffffff;
}

.block-system-powered-by-block {
  text-align: center;
}

.footer__drupal-region .block-system-powered-by-block a {
  color: #fff;
}

#page-wrapper.bbq-styles-page--headerless .menu-product-rating__fill path {
  fill: var(--color-accent);
}

:where(.empyr-q, .signature-q-builder) {
  --empyr-accent: var(--color-accent);
}

/*
 * Theme button matrix (Directions A + B):
 * - button_graphite: hairline ghost on dark surfaces; dark hairline on light commerce bar.
 * - button_gold: hairline ghost with --color-accent border and type (same token as
 *   dark-bar totals).
 * - Shared hover (View item contract): --color-accent-soft wash, gold type, gold hairline.
 *   Native label slide is `.button[data-hover]` in assets/css/source/main.css.
 *
 * CSS Backgrounds Module Level 3 background-color:
 * https://www.w3.org/TR/css-backgrounds-3/#background-color
 * CSS Color Module Level 5 color-mix():
 * https://www.w3.org/TR/css-color-5/#color-mix
 * CSS UI appearance:
 * https://www.w3.org/TR/css-ui-4/#appearance-switching
 * https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
 * WCAG 2.1 SC 1.4.3 Contrast (Minimum):
 * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
 */
.button_solid.button_gold,
.button_solid.button_graphite:not(input),
input[type="submit"].button_solid.button_gold,
input[type="submit"].button_solid.button_graphite,
.add-to-cart-bar--commerce .add-to-cart-bar__actions input[type="submit"].button_solid.button_graphite {
  border-radius: 2px;
}

.button_solid.button_gold,
input[type="submit"].button_solid.button_gold {
  -webkit-appearance: none;
  appearance: none;
  isolation: isolate;
  border: 1px solid var(--color-accent);
  background-color: transparent;
  background-image: none;
  color: var(--color-accent);
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.button_solid.button_gold .button__label-hover,
.button_solid.button_graphite .button__label-hover {
  position: relative;
  z-index: 1;
}

.button_solid.button_graphite:not(input),
input[type="submit"].button_solid.button_graphite,
.add-to-cart-bar--commerce .add-to-cart-bar__actions input[type="submit"].button_solid.button_graphite {
  -webkit-appearance: none;
  appearance: none;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: transparent;
  background-image: none;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

:is(#bbq-styles-menu, .bbq-styles-card-grid) .bbq-styles-gallery-card__actions input[type="submit"].button--add-to-cart.button--primary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
}

.button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
a.button_solid.button_gold:not([aria-disabled="true"]):hover,
a.button_solid.button_gold:not([aria-disabled="true"]):focus-visible,
input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
a.button_solid.button_graphite:not([aria-disabled="true"]):hover,
a.button_solid.button_graphite:not([aria-disabled="true"]):focus-visible,
input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
:is(#bbq-styles-menu, .bbq-styles-card-grid) .bbq-styles-gallery-card__actions input[type="submit"].button--add-to-cart.button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
:is(#bbq-styles-menu, .bbq-styles-card-grid) .bbq-styles-gallery-card__actions input[type="submit"].button--add-to-cart.button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  background-image: none;
  color: var(--color-accent);
  box-shadow: none;
  transform: none;
}

.button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
.button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
  border-color: var(--color-accent-strong);
  background-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
  background-image: none;
  color: var(--color-accent);
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .add-to-cart-bar .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
  .add-to-cart-bar .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
  .add-to-cart-bar .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
  .add-to-cart-bar .add-to-cart-bar__personalize.button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
  .add-to-cart-bar .add-to-cart-bar__personalize.button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
  .add-to-cart-bar .add-to-cart-bar__personalize.button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
  .add-to-cart-bar input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
  .add-to-cart-bar input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
  .add-to-cart-bar input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
  :is(#bbq-styles-menu, .bbq-styles-card-grid) .bbq-styles-gallery-card__actions .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
  :is(#bbq-styles-menu, .bbq-styles-card-grid) .bbq-styles-gallery-card__actions .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
  :is(#bbq-styles-menu, .bbq-styles-card-grid) .bbq-styles-gallery-card__actions .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
    transform: none;
  }
}

.button_solid.button_graphite.is-added,
.button_solid.button_graphite.is-added:hover,
.button_solid.button_graphite.is-added:focus-visible,
.button_solid.button_graphite.is-added:active,
input[type="submit"].button_solid.button_graphite.is-added,
input[type="submit"].button_solid.button_graphite.is-added:hover,
input[type="submit"].button_solid.button_graphite.is-added:focus-visible,
input[type="submit"].button_solid.button_graphite.is-added:active {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border-color: var(--color-accent);
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  transform: none;
  box-shadow: none;
}

/* Light commerce bar: dark hairline ghost (WCAG on #f2f1ed). */
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_graphite:not(input),
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_graphite,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_graphite:not(input),
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_graphite {
  border-color: rgba(17, 17, 17, 0.42);
  color: var(--color-dark-1);
}

.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_graphite:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible {
  border-color: var(--color-accent-on-light);
  color: var(--color-accent-on-light);
  background-color: var(--color-accent-soft);
}

.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_graphite.is-added,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_graphite.is-added,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_graphite.is-added,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_graphite.is-added {
  border-color: var(--color-accent);
  color: var(--color-dark-1);
}

/* Light commerce bar: contrast-safe gold hairline (WCAG on #f2f1ed). */
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_gold,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_gold,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_gold,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_gold {
  border-color: var(--color-accent-on-light);
  color: var(--color-accent-on-light);
  background-color: transparent;
}

.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.add-to-cart-bar--commerce:not(.add-to-cart-bar--dark) input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar .button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
.sticky-atc-stack .add-to-cart-bar--commerce:not(.add-to-cart-bar--dark).js-sticky-atc-bar input[type="submit"].button_solid.button_gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):focus-visible {
  border-color: var(--color-accent-on-light);
  color: var(--color-accent-on-light);
  background-color: var(--color-accent-soft);
}

.button_solid.button_gold:focus-visible,
.button_solid.button_graphite:focus-visible,
input[type="submit"].button_solid.button_gold:focus-visible,
input[type="submit"].button_solid.button_graphite:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .button_solid.button_gold,
  .button_solid.button_graphite,
  input[type="submit"].button_solid.button_gold,
  input[type="submit"].button_solid.button_graphite {
    transition: none !important;
  }
}