/* ==========================================================================
   Product detail page — module-owned skin.

   Loaded after main.css and mobile.css (see CatalogProductAsset), so a single
   class selector here wins over the same selector in either sheet.
   ========================================================================== */

/* --- Air above the purchase block -----------------------------------------
   The client ellipsed the last colour swatch row together with the price and
   the "Buy on Amazon" button and asked for a gap between them ("дать отступ",
   2026-08-13): the two runs were reading as one.

   The number is the buy column's own flow step taken twice. `.product-view__buy`
   lays its rows out with `gap: 20px` (main.css), and the site's spacing
   convention opens a new block on a DOUBLE step of whatever the local single
   step is — so the commercial run (swatches → price → CTA) starts 40px below
   the descriptive one instead of 20px. No new number is invented, and the same
   40px now does the fencing the removed `<hr class="product-view__rule">` used
   to do.

   This is an override, not a tweak: main.css still carries `margin-top: -8px`
   here from the OPPOSITE request ("отступ убрать между чуть", 2026-08-08), which
   left the gap at 20 - 8 = 12px. That is the gap he has now rejected. */
.product-view__purchase {
  margin-top: 20px;
}

/* --- "U.S. only" region notice ---------------------------------------------
   Outside the Amazon country whitelist this plate replaces the WHOLE purchase
   area — the price cluster as well as the CTA. Until 2026-08-13 only the button
   was gated and the price stayed on screen, quoting a number to a shopper with
   no way to buy at it.

   Rendered in two places from one class: the in-flow `.product-view__purchase`
   block on desktop, and the fixed `.sticky-action-bar` at <=1024 (both of those
   are centred flex rows, so the plate needs no seat of its own).

   COLOUR — the pale face is the client's own pick. She had asked for the solid
   `--check-green` on 2026-08-13 ("the standard green, the one on every filled
   plate"), saw it on the page, and overruled herself the next day: on 2026-08-14
   she sent two swatches ("let's have these colours for the plate instead") that
   decode to the same pair, #e7f6ec behind #131313, the two images differing only
   in the weight of their type.

   That pair is not new to the site — it is the green a form field already turns
   on success (`bonus-lessons.css`, `lead-magnet.css`, `feedback.css`). So this
   is a reuse of an established state colour, not a third green invented for one
   plate.
   FOREGROUND — the near-black stays, and it is now carried far more comfortably
   than it was: #131313 measured 6.09:1 against the solid #00ab39, and measures
   17.5:1 against this pale face.
   BORDER — none, deliberately. Her swatch shows a borderless rounded panel, and
   the plate keeps its edge against the white page on the fill alone.
   SIZE — 18px, one step up from the 16px it shipped at, for "only with a larger
   font" (2026-08-14). She asked for bigger without naming a number, so this is
   our step and is open to her correction.
   Pinned in px rather than left in rem: this is a body-copy run and the 80%
   phone root would otherwise sink it under the site's 16px type floor. */
.product-view__region-notice {
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--btn-radius, 8px);
  background: #e7f6ec;
  color: #131313;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}