/* ===========================================================
   N30 STORE — CONSOLIDATED STYLESHEET
   Existing layout, original font, desktop nav, mobile drawer,
   hero and product badges are intentionally preserved.
   All N30 interactive accents are defined in ONE color system.

   The product badge (#CD1515) is deliberately NOT overridden.
   Do not add global rules for all .badge/.sale/.error elements.
   =========================================================== */

:root {
  --n30-ink: #211c18;
  --n30-accent: #b88a47;
  --n30-gold: #d6af70;
  --n30-ivory: #f7f5f2;
  --n30-tint: rgba(214, 175, 112, 0.14);

  /* EasyOrders documented merchant-palette variables.
     Affect shopping controls across home, categories, product
     detail, cart and checkout pages without page-specific JS. */
  --buy-btn-bg: #211c18 !important;
  --buy-btn-text: #f7f5f2 !important;
  --buy-btn-border: #211c18 !important;
  --crt-btn-bg: #211c18 !important;
  --crt-btn-text: #f7f5f2 !important;
  --crt-btn-border: #211c18 !important;
  --product-sale-price-text: #b88a47 !important;
}

/* round corners for btns and inputs */
.edition-hero-slider__btn,
.shop-the-look__hero-cta,
.newsletter-luxe__submit,
.ab-footer.ab-footer-v2 .abf-input-wrap,
.newsletter-luxe__input {
  border-radius: 8px !important;
}

/* remove powered by text */
.ab-footer-powered {
  display: none !important;
}

/* change submit btn width and height */
.ab-footer.ab-footer-v2 .abf-submit {
  height: 100% !important;
  width: 50px !important;
  margin-inline-end: 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* round corners for add to cart btn, quantity btn container, and checkout btn */
.add_to_cart_btn,
.quantity_btn_container,
.checkout_btn {
  border-radius: 8px !important;
}

/* decrease padding for add to cart btn */
.add_to_cart_btn {
  padding-block: 8px !important;
}

/* =====================================================
   N30 — PREMIUM MOBILE NAVIGATION
   VERSION 2
   - Fixed X button
   - Removed Change Language
   - Removed unnecessary bottom space
   - Preserves original website font
===================================================== */

/* ==========================================
   1. MENU OVERLAY
========================================== */

#eo-mobile-menu.ab-mobile-menu.ab-open {
  position: fixed !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;

  z-index: 99999 !important;

  background: rgba(20, 17, 15, 0.52) !important;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;
}

/* ==========================================
   2. SIDE DRAWER
========================================== */

#eo-mobile-menu .ab-mobile-menu-shell {
  position: absolute !important;

  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;

  width: min(440px, 90vw) !important;
  max-width: 440px !important;

  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  background: #f5f2ed !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: 20px 0 80px rgba(0, 0, 0, 0.14) !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;

  transform: none !important;
}

/* ==========================================
   3. TOP AREA
========================================== */

#eo-mobile-menu .ab-mobile-menu-top {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  flex: 0 0 auto !important;

  width: 100% !important;
  min-height: 106px !important;

  padding: 28px 30px 18px !important;

  background: transparent !important;

  border: none !important;
  box-shadow: none !important;
}

/* N30 menu label */

#eo-mobile-menu .ab-mobile-menu-top::before {
  content: "N30 / MENU" !important;

  position: absolute !important;

  left: 30px !important;
  top: 49px !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2.2px !important;

  color: #8c7a67 !important;

  pointer-events: none !important;
}

/* ==========================================
   4. FIXED CLOSE BUTTON
========================================== */

#eo-mobile-menu .ab-mobile-close-wrap {
  position: relative !important;

  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  border: none !important;

  transform: none !important;
  box-shadow: none !important;
}

/* Remove EasyOrders' original icon styling */

#eo-mobile-menu #eo-mobile-close::before,
#eo-mobile-menu #eo-mobile-close::after {
  content: none !important;
  display: none !important;
}

/* Draw X using SVG background */

#eo-mobile-menu #eo-mobile-close {
  appearance: none !important;
  -webkit-appearance: none !important;

  position: relative !important;

  display: block !important;

  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid #d8d0c6 !important;
  border-radius: 50% !important;

  background-color: transparent !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' fill='none' stroke='%23211C18' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;

  box-shadow: none !important;

  transform: none !important;

  cursor: pointer !important;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease !important;
}

#eo-mobile-menu #eo-mobile-close:hover {
  background-color: #eae3da !important;
  border-color: #b99a72 !important;
}

/* ==========================================
   5. MENU CARD
========================================== */

#eo-mobile-menu .ab-mobile-menu-card {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  flex: 1 1 auto !important;

  min-height: 0 !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;

  transform: none !important;

  margin: 0 !important;
  padding: 0 30px 30px !important;

  background: transparent !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow-y: auto !important;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================
   6. MAIN PANEL
========================================== */

#eo-mobile-menu .ab-mobile-menu-main-panel {
  display: flex !important;
  flex-direction: column !important;

  flex: 1 0 auto !important;

  width: 100% !important;
  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;

  border: none !important;
  box-shadow: none !important;
}

/* ==========================================
   7. NAVIGATION
========================================== */

#eo-mobile-menu .ab-mobile-nav {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  gap: 0 !important;

  padding: 26px 0 0 !important;
  margin: 0 !important;

  border-top: 1px solid #d8d0c6 !important;

  background: transparent !important;
}

/* Discover label */

#eo-mobile-menu .ab-mobile-nav::before {
  content: "DISCOVER" !important;

  display: block !important;

  margin: 0 0 22px !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2.2px !important;

  color: #9b8f82 !important;
}

/* ==========================================
   8. NAVIGATION LINKS
========================================== */

#eo-mobile-menu .ab-mobile-nav-link {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 48px !important;

  padding: 10px 0 !important;
  margin: 0 !important;

  background: transparent !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  color: #211c18 !important;

  text-decoration: none !important;

  transform: none !important;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease !important;
}

/* Remove decorative elements */

#eo-mobile-menu .ab-mobile-nav-link::after {
  content: none !important;
  display: none !important;
}

#eo-mobile-menu .ab-mobile-nav-link:hover {
  padding-left: 5px !important;
  color: #b88a47 !important;
}

/* ==========================================
   9. PRIMARY COLLECTION LINKS
========================================== */

#eo-mobile-menu .ab-mobile-nav-link:nth-child(-n + 2) {
  min-height: 66px !important;
  padding: 12px 0 !important;
}

#eo-mobile-menu .ab-mobile-nav-link:nth-child(-n + 2) .ab-mobile-nav-label {
  font-size: clamp(25px, 4vw, 32px) !important;
  font-weight: 400 !important;

  line-height: 1.2 !important;
  letter-spacing: -1.1px !important;

  color: #211c18 !important;
}

/* ==========================================
   10. INFORMATION SECTION
========================================== */

#eo-mobile-menu .ab-mobile-nav-link:nth-child(3) {
  margin-top: 35px !important;
  padding-top: 53px !important;

  border-top: 1px solid #d8d0c6 !important;

  min-height: 95px !important;
}

/* Information heading */

#eo-mobile-menu .ab-mobile-nav-link:nth-child(3)::before {
  content: "INFORMATION" !important;

  display: block !important;

  position: absolute !important;

  top: 22px !important;
  left: 0 !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2.2px !important;

  color: #9b8f82 !important;
}

/* Secondary policy links */

#eo-mobile-menu .ab-mobile-nav-link:nth-child(n + 3) {
  min-height: 46px !important;
}

#eo-mobile-menu .ab-mobile-nav-link:nth-child(n + 3) .ab-mobile-nav-label {
  font-size: 14px !important;
  font-weight: 400 !important;

  line-height: 1.5 !important;
  letter-spacing: 0 !important;

  color: #625a52 !important;
}

/* Hover text */

#eo-mobile-menu .ab-mobile-nav-link:hover .ab-mobile-nav-label {
  color: #b88a47 !important;
}

/* ==========================================
   11. RESET LABELS
========================================== */

#eo-mobile-menu .ab-mobile-nav-label {
  display: block !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  white-space: normal !important;

  text-transform: none !important;

  font-family: inherit !important;
}

/* ==========================================
   12. REMOVE LANGUAGE SECTION COMPLETELY
========================================== */

/* Remove language switch */

#eo-mobile-menu #header-lang-mobile {
  display: none !important;
}

/* Remove tools container */

#eo-mobile-menu .ab-mobile-menu-tools {
  display: none !important;
}

/* Remove entire menu footer */

#eo-mobile-menu .ab-mobile-menu-foot {
  display: none !important;
}

/* Remove empty social area */

#eo-mobile-menu .ab-mobile-menu-social {
  display: none !important;
}

/* ==========================================
   13. MOBILE ADJUSTMENTS
========================================== */

@media (max-width: 480px) {
  #eo-mobile-menu .ab-mobile-menu-shell {
    width: min(400px, 92vw) !important;
  }

  #eo-mobile-menu .ab-mobile-menu-top {
    min-height: 94px !important;
    padding: 23px 24px 16px !important;
  }

  #eo-mobile-menu .ab-mobile-menu-top::before {
    left: 24px !important;
    top: 42px !important;
  }

  #eo-mobile-menu .ab-mobile-menu-card {
    padding: 0 24px 24px !important;
  }

  #eo-mobile-menu .ab-mobile-nav-link:nth-child(-n + 2) .ab-mobile-nav-label {
    font-size: 27px !important;
  }

  #eo-mobile-menu .ab-mobile-nav-link:nth-child(3) {
    margin-top: 27px !important;
  }
}

/* ==========================================
   14. SHORT SCREENS
========================================== */

@media (max-height: 680px) {
  #eo-mobile-menu .ab-mobile-menu-top {
    min-height: 82px !important;
  }

  #eo-mobile-menu .ab-mobile-menu-top::before {
    top: 37px !important;
  }

  #eo-mobile-menu .ab-mobile-nav {
    padding-top: 15px !important;
  }

  #eo-mobile-menu .ab-mobile-nav::before {
    margin-bottom: 10px !important;
  }

  #eo-mobile-menu .ab-mobile-nav-link:nth-child(-n + 2) {
    min-height: 52px !important;
  }

  #eo-mobile-menu .ab-mobile-nav-link:nth-child(3) {
    margin-top: 18px !important;
    padding-top: 43px !important;
  }
}

/* ==========================================
   15. ACCESSIBILITY
========================================== */

#eo-mobile-menu a:focus-visible,
#eo-mobile-menu button:focus-visible {
  outline: 2px solid #b88a47 !important;
  outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  #eo-mobile-menu *,
  #eo-mobile-menu *::before,
  #eo-mobile-menu *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   N30 DESKTOP HEADER — EXACT EASYORDERS SELECTORS
   Uses original font. Does not change mobile drawer.
   Leave EasyOrders' 3-column header layout intact.
============================================================ */
@media (min-width: 769px) {
  #eo-header .ab-header-inner {
    /* Keep native left / center / right columns and centered logo. */
    min-width: 0;
  }

  #eo-header .header-col-left {
    min-width: 0;
  }

  #eo-header nav.ab-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(9px, 0.9vw, 17px) !important;
    min-width: 0 !important;
    width: auto !important;
    /* Keep the theme's max-width:717px inline constraint. */
    overflow: visible !important;
  }

  #eo-header nav.ab-nav > a,
  #eo-header nav.ab-nav > .ab-nav-more > a.ab-nav-more-trigger {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #eo-header nav.ab-nav > .ab-nav-more {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make the dropdown panel a real readable surface. */
  #eo-header nav.ab-nav .ab-nav-more > .ab-nav-more-panel {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 240px !important;
    width: max-content !important;
    max-width: min(300px, 85vw) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #f7f5f2 !important;
    border: 1px solid #e2dbd2 !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 42px rgba(18, 15, 12, 0.18) !important;
    color: #211c18 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(7px) !important;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease !important;
    z-index: 2000 !important;
  }

  /* Crucial: EasyOrders home header uses white link colors. */
  #eo-header nav.ab-nav .ab-nav-more-panel > a,
  body.is-home #eo-header nav.ab-nav .ab-nav-more-panel > a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #211c18 !important;
    -webkit-text-fill-color: #211c18 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #eo-header nav.ab-nav .ab-nav-more-panel > a:hover,
  #eo-header nav.ab-nav .ab-nav-more-panel > a:focus-visible {
    background: #eee8df !important;
    color: var(--n30-accent) !important;
    -webkit-text-fill-color: var(--n30-accent) !important;
  }

  #eo-header nav.ab-nav .ab-nav-more:hover > .ab-nav-more-panel,
  #eo-header nav.ab-nav .ab-nav-more:focus-within > .ab-nav-more-panel,
  #eo-header nav.ab-nav .ab-nav-more.ab-open > .ab-nav-more-panel,
  #eo-header nav.ab-nav .ab-nav-more.open > .ab-nav-more-panel,
  #eo-header
    nav.ab-nav
    .ab-nav-more:has(> .ab-nav-more-trigger[aria-expanded="true"])
    > .ab-nav-more-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Keeps hover active while moving the pointer toward the menu. */
  #eo-header nav.ab-nav .ab-nav-more > .ab-nav-more-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    bottom: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1150px) {
  #eo-header nav.ab-nav {
    gap: 8px !important;
  }
  #eo-header nav.ab-nav > a,
  #eo-header nav.ab-nav > .ab-nav-more > a.ab-nav-more-trigger {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #eo-header nav.ab-nav .ab-nav-more > .ab-nav-more-panel {
    transition: none !important;
  }
}

/* ============================================================
   N30 DESKTOP MORE DROPDOWN — HOVER FIX OVER HOMEPAGE HERO
   Keep dropdown items dark on light background even when the
   homepage header sets its own light text/hover styling.
============================================================ */
@media (min-width: 769px) {
  body.is-home
    .ab-theme:not(.scrolled)
    #eo-header
    nav.ab-nav
    .ab-nav-more-panel,
  body.is-home #eo-header nav.ab-nav .ab-nav-more-panel,
  #eo-header nav.ab-nav .ab-nav-more-panel {
    isolation: isolate;
    background-color: #f7f5f2 !important;
  }

  body.is-home
    .ab-theme:not(.scrolled)
    #eo-header
    nav.ab-nav
    .ab-nav-more-panel
    > a,
  body.is-home #eo-header nav.ab-nav .ab-nav-more-panel > a,
  #eo-header nav.ab-nav .ab-nav-more-panel > a {
    position: relative !important;
    z-index: 1 !important;
    cursor: pointer !important;
    background: transparent !important;
    color: #211c18 !important;
    -webkit-text-fill-color: #211c18 !important;
    opacity: 1 !important;
    filter: none !important;
    transition:
      background-color 0.2s ease,
      color 0.2s ease !important;
  }

  /* Specifically handle transparent homepage/hero header state. */
  body.is-home
    .ab-theme:not(.scrolled)
    #eo-header
    nav.ab-nav
    .ab-nav-more-panel
    > a:hover,
  body.is-home
    .ab-theme:not(.scrolled)
    #eo-header
    nav.ab-nav
    .ab-nav-more-panel
    > a:focus-visible,
  body.is-home #eo-header nav.ab-nav .ab-nav-more-panel > a:hover,
  body.is-home #eo-header nav.ab-nav .ab-nav-more-panel > a:focus-visible,
  #eo-header nav.ab-nav .ab-nav-more-panel > a:hover,
  #eo-header nav.ab-nav .ab-nav-more-panel > a:focus-visible {
    background: #e8dfd3 !important;
    background-color: #e8dfd3 !important;
    color: var(--n30-accent) !important;
    -webkit-text-fill-color: var(--n30-accent) !important;
    opacity: 1 !important;
    filter: none !important;
    text-decoration: none !important;
  }

  body.is-home
    .ab-theme:not(.scrolled)
    #eo-header
    nav.ab-nav
    .ab-nav-more-panel
    > a:focus-visible,
  #eo-header nav.ab-nav .ab-nav-more-panel > a:focus-visible {
    outline: 2px solid #b99a72 !important;
    outline-offset: -2px !important;
  }
}

/* ===========================================================
   N30 COLOR SYSTEM — GLOBAL INTERACTIVE STATES
   No font, image, layout or product-badge changes.
   =========================================================== */

/* Consistent hover/focus on the actual EasyOrders header. */
#eo-header .ab-nav > a:is(:hover, :focus-visible),
#eo-header .ab-nav-more > .ab-nav-more-trigger:is(:hover, :focus-visible) {
  color: var(--n30-gold) !important;
  -webkit-text-fill-color: var(--n30-gold) !important;
}

#eo-header
  :is(.ab-hamburger, .ab-icon-btn):is(:hover, :focus-visible, :active) {
  color: var(--n30-gold) !important;
  background-color: var(--n30-tint) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#eo-header
  :is(.ab-hamburger, .ab-icon-btn):is(:hover, :focus-visible, :active)
  svg,
#eo-header
  :is(.ab-hamburger, .ab-icon-btn):is(:hover, :focus-visible, :active)
  svg
  path {
  color: var(--n30-gold) !important;
  stroke: currentColor !important;
}

/* Light dropdown surface, readable dark text, N30 gold hover.
   Applies over transparent home hero AND scrolled/category headers. */
#eo-header .ab-nav-more-panel > a:is(:hover, :focus-visible),
body.is-home
  .ab-theme:not(.scrolled)
  #eo-header
  .ab-nav-more-panel
  > a:is(:hover, :focus-visible) {
  color: var(--n30-accent) !important;
  -webkit-text-fill-color: var(--n30-accent) !important;
  background: #e8dfd3 !important;
}

/* Footer / informational navigation. */
.ab-footer a:is(:hover, :focus-visible),
.ab-footer-v2 a:is(:hover, :focus-visible) {
  color: var(--n30-accent) !important;
}

/* Native HTML control accents across product and checkout pages. */
:where(body) input[type="checkbox"],
:where(body) input[type="radio"],
:where(body) input[type="range"],
:where(body) progress {
  accent-color: var(--n30-accent) !important;
}

/* Inputs retain their usual surface, with a brand-colored focus ring. */
:where(body) :is(input, textarea, select):focus-visible {
  border-color: var(--n30-accent) !important;
  outline-color: var(--n30-accent) !important;
}

/* Key shopping actions: consistent primary theme, not red.
   Preserve native disabled / error states. */
:where(body)
  :is(.add_to_cart_btn, .checkout_btn, .buy_now_btn):not(:disabled):not(
    [disabled]
  ) {
  background: var(--n30-ink) !important;
  border-color: var(--n30-ink) !important;
  color: var(--n30-ivory) !important;
}
:where(body)
  :is(.add_to_cart_btn, .checkout_btn, .buy_now_btn):not(:disabled):not(
    [disabled]
  ):is(:hover, :focus-visible, :active) {
  background: var(--n30-accent) !important;
  border-color: var(--n30-accent) !important;
  color: #ffffff !important;
}

/* Secondary quantity / quick-add interactions: change hover only. */
:where(body)
  :is(
    .quantity_btn_container button,
    .ab-featured-add-btn,
    .ab-pgrid-add-btn,
    .ab-plist-add-btn
  ):is(:hover, :focus-visible) {
  color: var(--n30-accent) !important;
  border-color: var(--n30-gold) !important;
}

/* A sale PRICE is not the sale BADGE. The badge stays red. */
:where(body)
  :is(
    .ab-price-sale,
    .product-sale-price,
    .product_sale_price,
    .sale_price,
    .price-sale,
    .ab-pgrid-price--sale,
    .ab-plist-price--sale
  ) {
  color: var(--n30-accent) !important;
  -webkit-text-fill-color: var(--n30-accent) !important;
}

/* Explicitly keep validation and warnings under theme control.
   Product discount badges stay on --product-badge-bg: #CD1515. */

/* Visible focus ring for buttons and navigational controls. */
:where(body) :is(a, button):focus-visible {
  outline-color: var(--n30-accent) !important;
}