/* .pl-announcement-bar now only ever holds the text — the currency
   select is moved out of it into the header (pl-currency.js,
   moveCurrencySelectIntoHeader) on every page load. Kept centered
   here as a harmless single-child fallback for the rare case that
   move fails (JS disabled, or the header slot is ever removed). */
.pl-announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pl-announcement-text {
  flex: 1 1 auto;
  text-align: center;
}

/* Currency select, in its real home: the header's empty builder slot
   between the center nav and the search/cart icons
   (.site-header-primary-section-right-center — confirmed empty in
   Astra's own live markup on this site). Styled for that white header
   background using the sitewide --pl-* tokens (style.css), not the
   maroon-bar colors it used to need. */
.site-header-primary-section-right-center {
  display: flex;
  align-items: center;
}
/* Hidden until pl-currency.js finishes relocating it into the header
   slot (.pl-ready added right after the move) — was rendering
   visibly in the announcement bar first, then jumping into the
   header a moment later once JS ran, a real Cumulative Layout Shift.
   An element with no prior rendered position doesn't count against
   CLS when it first appears, so this reveal-only-after-move pattern
   is the standard fix: no visible flash, no shift to measure. No-JS
   visitors simply don't see the switcher, which is fine — currency
   conversion itself is a JS feature either way. */
.pl-currency-select {
  display: none;
  background: var(--pl-gold, #C9973A);
  color: var(--pl-maroon-dark, #4A0E1A);
  border: 1.5px solid var(--pl-maroon, #7A1E2E);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 400;
  font-family: var(--pl-font-body, sans-serif);
  padding: 6px 10px;
  margin: 0 6px;
  cursor: pointer;
}
.pl-currency-select.pl-ready {
  display: inline-block;
}
.pl-currency-select:hover {
  background: var(--pl-gold-light, #E8C06A);
}
.pl-currency-select:focus {
  outline: 2px solid var(--pl-maroon, #7A1E2E);
}
.pl-currency-select option {
  color: #1C0A00;
  background: #FFFDF9;
  font-weight: 400;
}
@media (max-width: 921px) {
  .pl-currency-select {
    font-size: 11px;
    padding: 4px 6px;
    margin: 0 4px;
  }
}

/* Header cart icon hidden on mobile — the mobile bottom tab bar
   (mobile-bottom-nav.css, .pl-mobile-bottom-nav) already has its own
   Cart item, making the header one redundant clutter on small
   screens. Desktop (no bottom bar) keeps it as the only cart access
   point there.
   2026-08-03: a single-class !important rule here lost to a
   pre-existing, more specific rule in the site's Customizer
   "Additional CSS" (post 4925, header full-width/horizontal-layout
   fixes): `.site-header-primary-section-right .ast-header-woo-cart {
   display: inline-flex !important; }` — 2 classes beats my 1 class
   even with both !important, since specificity is the tie-breaker,
   not source order. Matching + exceeding that selector (adding `body`
   as an extra ancestor) guarantees this wins regardless of where
   either stylesheet loads. */
@media (max-width: 921px) {
  body .site-header-primary-section-right .ast-header-woo-cart {
    display: none !important;
  }
}

/* International shipping note — product pages, all products */
.pl-intl-shipping-note {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--plm-warm-gray, #F0EBE3);
  border: 1px solid var(--plm-border, rgba(196,154,60,0.2));
  border-radius: var(--plm-r-lg, 12px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--plm-text-muted, #6B5E55);
}
.pl-intl-shipping-note a {
  color: var(--plm-maroon, #6B1E1E);
  text-decoration: underline;
}

/* "Get It Stitched" modal's international-guide link */
.pl-stitch-price-intl-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--plm-text-muted, #6B5E55);
  text-align: center;
}
.pl-stitch-price-intl-note a {
  color: var(--plm-maroon, #6B1E1E);
  text-decoration: underline;
}