/*
 * BUTTONS-01 (#783, LEAD DISPATCH 6396153265, Owner 25.10): one button and shape system for the whole site.
 * Hand-written (not built), loaded on every front-end page by inc/buttons.php, after the parent theme's sheets.
 *
 * What it is: the tokens (radius, control height, colour roles, shadow, ring, motion) defined ONCE as :root custom properties, one base class
 * `.ra-btn` with the variants --primary, --secondary, --quiet and --chip and the sizes --sm and --lg, and a mapping of the buttons that already
 * exist (Woo's .button, the add-to-cart and place-order buttons, the Home v3 and card buttons, the hero, the consent banner, the checkout and
 * shop chips, the mini-cart) onto it. No template is edited.
 *
 * Specificity is kept simple on purpose: every list of selectors sits inside :where() (no weight of its own), so each rule weighs exactly
 * the id of :not(#ra-btn-x) plus its own state (:hover, :active, [aria-pressed]) and nothing a longer member of the list could add.
 *
 * Why every declaration is !important and every selector ends in :not(#ra-btn-x): the parent theme fights every <button> twice. A long :not()
 * chain (0,6,1) paints it uppercase, outlined and with its own hover colours; and its script puts `.sc_button_hover_slide_left` on every button,
 * which sets an !important transparent 50/50 gradient and, on hover, an !important text colour (that is what made the selected "Moldova" chip
 * invisible, #1116). Only !important beats !important, and the id weight of :not(#ra-btn-x) (the id is never on a page) wins on specificity
 * without an arms race. The sheet is the last one printed, so an equal specificity also goes to it.
 *
 * Shapes follow the Master of Home v3 (STYLE-ROUND-01): 8px a control inside a field, 14px a card, a full pill a button. The close buttons (x)
 * of STYLE-ROUND-02 are not mapped: their radius (999px) is the pill token below, read from them. A button that is not mapped here (the
 * hero's progress lines, the carousel dots, the quantity stepper, the chat summary) keeps its own look on purpose.
 */

:root {
  /* Radius scale. sm: a control inside a field; md: a card, an input, a select, the coupon box, a notice; lg: a modal; pill: a button. */
  --ra-radius-sm: 8px;
  --ra-radius-md: 14px;
  --ra-radius-lg: 20px;
  --ra-radius-pill: 999px;

  /* Control heights. md is the default and the touch target; lg is the one primary action of a page (Place order, the hero); sm is for dense places. */
  --ra-control-h-sm: 36px;
  --ra-control-h-md: 44px;
  --ra-control-h-lg: 52px;

  /* Colour roles: the brand violet of the site (the same values the cookie banner and the contact page use). Fills carry white text (5.0:1); text
     and outlines on the page use the darker --ra-brand-text (5.3:1 on the cream). */
  --ra-brand: #875fa3;
  --ra-brand-hover: #7a5395;
  --ra-brand-ink: #ffffff;
  --ra-brand-text: #7a5395;
  --ra-brand-tint: rgba(135, 95, 163, 0.1);

  /* Shadow, press shade, focus ring. */
  --ra-btn-shadow: 0 1px 2px rgba(32, 26, 23, 0.14), 0 6px 14px rgba(122, 83, 149, 0.22);
  --ra-btn-press: inset 0 2px 5px rgba(32, 26, 23, 0.22);
  --ra-ring: var(--ra-brand-text);

  /* Motion. */
  --ra-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ra-dur: 160ms;
}

html[data-theme="dark"],
.scheme_dark {
  --ra-brand-text: #b196cb;
  --ra-brand-tint: rgba(177, 150, 203, 0.16);
  --ra-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45);
  --ra-btn-press: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  --ra-ring: #b196cb;
}

/* ---- The shape, size and motion of every mapped button ------------------------------------------------------------------------------ */

:where(
  .ra-btn,
  .ra-hero__btn,
  .ra-h3-btn,
  .ra-card__btn,
  .ra-consent__btn,
  .ra-consent__more,
  .ra-co__chip,
  .ra-shop-view__btn,
  .ra-hero__arrow,
  .ra-h3-car__btn,
  .ra-h3-car__pause,
  .single_add_to_cart_button,
  #place_order,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce-mini-cart__buttons .button,
  .ra-h3-news .mc4wp-form input[type="submit"]
):not(#ra-btn-x) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em !important;
  box-sizing: border-box !important;
  min-height: var(--ra-control-h-md) !important;
  height: auto !important;
  padding: 0 1.6em !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: var(--ra-radius-pill) !important;
  background-image: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition:
    transform var(--ra-dur) var(--ra-ease),
    box-shadow var(--ra-dur) var(--ra-ease),
    background-color var(--ra-dur) var(--ra-ease),
    color var(--ra-dur) var(--ra-ease),
    border-color var(--ra-dur) var(--ra-ease) !important;
}

/* The sizes. lg: the one primary action of a page. sm: only in a dense place. */
:where(.ra-btn--lg, .ra-hero__btn, #place_order):not(#ra-btn-x) {
  min-height: var(--ra-control-h-lg) !important;
  font-size: 14px !important;
}

:where(.ra-btn--sm):not(#ra-btn-x) {
  min-height: var(--ra-control-h-sm) !important;
  padding: 0 1.1em !important;
  font-size: 12px !important;
}

/* An icon button (an arrow, a toggle): a circle as wide as it is high, the glyph in the middle. */
:where(.ra-btn--icon, .ra-hero__arrow, .ra-h3-car__btn, .ra-shop-view__btn):not(#ra-btn-x) {
  width: var(--ra-control-h-md) !important;
  min-width: var(--ra-control-h-md) !important;
  padding: 0 !important;
  font-size: 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* The cookie banner puts three buttons in one row: on a phone they get less padding and tracking so no label wraps. */
@media (max-width: 480px) {
  :where(.ra-consent__btn, .ra-consent__more):not(#ra-btn-x) {
    padding: 0 0.9em !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
}

/* A chip: the sentence-case label of a choice. */
:where(.ra-btn--chip, .ra-co__chip):not(#ra-btn-x) {
  padding: 0 1.1em !important;
  text-transform: none !important;
  letter-spacing: 0.06em !important;
}

/* Order matters: at an equal weight the later rule wins, so a button that is in two lists (Place order is also a `.woocommerce button.button`) takes the
   role written LAST. The generic Woo roles come first, then the primary, so the more specific role is the one that shows. */
/* ---- Colour roles ---------------------------------------------------------------------------------------------------------------------- */

/* Secondary: the brand outline. */
:where(
  .ra-btn--secondary,
  .ra-h3-btn:not(.ra-h3-btn--fill),
  .ra-card__btn,
  .woocommerce a.button:not(.checkout-button):not(.checkout),
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce-mini-cart__buttons .button:not(.checkout)
):not(#ra-btn-x) {
  border-color: var(--ra-brand-text) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ra-brand-text) !important;
}

/* Primary: the brand fill. */
:where(
  .ra-btn--primary,
  .ra-hero__btn,
  .ra-h3-btn--fill:not(.ra-h3-btn--soon),
  .ra-consent__btn,
  #place_order,
  .single_add_to_cart_button,
  .woocommerce-mini-cart__buttons .button.checkout,
  .woocommerce a.checkout-button
):not(#ra-btn-x) {
  border-color: var(--ra-brand) !important;
  background: var(--ra-brand) !important;
  background-image: none !important;
  color: var(--ra-brand-ink) !important;
}

/* Quiet: text with a tint on hover. */
:where(.ra-btn--quiet, .ra-consent__more):not(#ra-btn-x) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ra-brand-text) !important;
}

/* Chip: an outline that turns into the solid fill when it is selected. */
:where(.ra-btn--chip, .ra-co__chip, .ra-shop-view__btn):not(#ra-btn-x) {
  border-color: var(--ra-brand-text) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ra-brand-text) !important;
}

/* Selected: a solid brand fill, in every role, hovered or not. */
:where(.ra-btn, .ra-co__chip, .ra-shop-view__btn)[aria-pressed="true"]:not(#ra-btn-x),
:where(.ra-btn, .ra-co__chip, .ra-shop-view__btn).is-on:not(#ra-btn-x),
:where(.ra-btn, .ra-co__chip, .ra-shop-view__btn).is-active:not(#ra-btn-x) {
  border-color: var(--ra-brand) !important;
  background: var(--ra-brand) !important;
  background-image: none !important;
  color: var(--ra-brand-ink) !important;
}

/* ---- Hover, press, focus ------------------------------------------------------------------------------------------------------------ */

/* Hover: a slight lift and a shadow; the role's own colour change. */
:where(
  .ra-btn,
  .ra-hero__btn,
  .ra-h3-btn:not(.ra-h3-btn--soon),
  .ra-card__btn,
  .ra-consent__btn,
  .ra-consent__more,
  .ra-co__chip,
  .ra-shop-view__btn,
  .ra-hero__arrow,
  .ra-h3-car__btn,
  .ra-h3-car__pause,
  .single_add_to_cart_button,
  #place_order,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce-mini-cart__buttons .button,
  .ra-h3-news .mc4wp-form input[type="submit"]
):hover:not(:disabled):not([aria-disabled="true"]):not(#ra-btn-x) {
  transform: translateY(-1px) !important;
  box-shadow: var(--ra-btn-shadow) !important;
}

/* Hover colour of a secondary and of a chip: the brand fill, as the Home v3 buttons always did. */
:where(
  .ra-btn--secondary,
  .ra-h3-btn:not(.ra-h3-btn--fill):not(.ra-h3-btn--soon),
  .ra-card__btn,
  .woocommerce a.button:not(.checkout-button):not(.checkout),
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce-mini-cart__buttons .button:not(.checkout),
  .ra-btn--chip,
  .ra-co__chip,
  .ra-shop-view__btn
):hover:not(:disabled):not([aria-disabled="true"]):not(#ra-btn-x),
:where(.ra-btn--secondary, .ra-h3-btn, .ra-card__btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .ra-btn--chip, .ra-co__chip, .ra-shop-view__btn):focus-visible:not(:disabled):not([aria-disabled="true"]):not(#ra-btn-x) {
  border-color: var(--ra-brand) !important;
  background: var(--ra-brand) !important;
  background-image: none !important;
  color: var(--ra-brand-ink) !important;
}

/* Hover colour of a primary: the darker brand. It carries the same :not() chain as the secondary hover above, so both weigh (1,3,0) and the later one (this) wins
   for a button in both lists (Place order and the product page's Add to cart are also `.woocommerce button.button`): Reviewer, #1117 finding 1. */
:where(
  .ra-btn--primary,
  .ra-hero__btn,
  .ra-h3-btn--fill:not(.ra-h3-btn--soon),
  .ra-consent__btn,
  #place_order,
  .single_add_to_cart_button,
  .woocommerce-mini-cart__buttons .button.checkout,
  .woocommerce a.checkout-button
):hover:not(:disabled):not([aria-disabled="true"]):not(#ra-btn-x) {
  border-color: var(--ra-brand-hover) !important;
  background: var(--ra-brand-hover) !important;
  background-image: none !important;
  color: var(--ra-brand-ink) !important;
}

/* Hover colour of a quiet button: the tint. */
:where(.ra-btn--quiet, .ra-consent__more):hover:not(:disabled):not([aria-disabled="true"]):not(#ra-btn-x) {
  background: var(--ra-brand-tint) !important;
  background-image: none !important;
  color: var(--ra-brand-text) !important;
}

/* Press: it gives under the finger, with an inner shade. */
:where(
  .ra-btn,
  .ra-hero__btn,
  .ra-h3-btn:not(.ra-h3-btn--soon),
  .ra-card__btn,
  .ra-consent__btn,
  .ra-consent__more,
  .ra-co__chip,
  .ra-shop-view__btn,
  .ra-hero__arrow,
  .ra-h3-car__btn,
  .ra-h3-car__pause,
  .single_add_to_cart_button,
  #place_order,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce-mini-cart__buttons .button,
  .ra-h3-news .mc4wp-form input[type="submit"]
):active:not(:disabled):not([aria-disabled="true"]):not(#ra-btn-x) {
  transform: scale(0.97) !important;
  box-shadow: var(--ra-btn-press) !important;
}

/* Focus: one visible ring, along the control's own curve (the same ring the Home v3 baseline draws, now on every mapped button). */
:where(
  .ra-btn,
  .ra-hero__btn,
  .ra-h3-btn,
  .ra-card__btn,
  .ra-consent__btn,
  .ra-consent__more,
  .ra-co__chip,
  .ra-shop-view__btn,
  .ra-hero__arrow,
  .ra-h3-car__btn,
  .ra-h3-car__pause,
  .single_add_to_cart_button,
  #place_order,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce-mini-cart__buttons .button,
  .ra-h3-news .mc4wp-form input[type="submit"]
):focus-visible:not(#ra-btn-x) {
  outline: 2px solid var(--ra-ring) !important;
  outline-offset: 2px !important;
}

/* A disabled button does not move and says so. */
:where(.ra-btn, .single_add_to_cart_button, #place_order, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button):where(:disabled, [aria-disabled="true"]):not(#ra-btn-x) {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- Surfaces: the same radius family ------------------------------------------------------------------------------------------------- */

/* Measured on the public pages (BUTTONS-01 inventory): the product detail cards and the "cart is empty" notice were 6px, between the 8px of a field and the
   14px of a card. A card, a notice and the account's forms are the card radius; a field is the control radius (it already was, 8px). The quantity input
   (a part of the stepper) and the cookie banner (its own card) keep theirs. */
:where(.ra-pdp-card, .ra-help-delivery__card, .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon):not(#ra-btn-x) {
  border-radius: var(--ra-radius-md) !important;
}

:where(.woocommerce input.input-text:not(.qty), .woocommerce select, .woocommerce textarea):not(#ra-btn-x) {
  border-radius: var(--ra-radius-sm) !important;
}

/* ---- Smooth "squircle" corners where the browser can draw them; the plain border-radius above is the baseline everywhere else ---------- */

@supports (corner-shape: squircle) {
  :where(
    .ra-btn,
    .ra-hero__btn,
    .ra-h3-btn,
    .ra-card__btn,
    .ra-consent__btn,
    .ra-consent__more,
    .ra-co__chip,
    .ra-shop-view__btn,
    .ra-hero__arrow,
    .ra-h3-car__btn,
    .ra-h3-car__pause,
    .single_add_to_cart_button,
    #place_order,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce-mini-cart__buttons .button,
    .ra-h3-news .mc4wp-form input[type="submit"]
  ):not(#ra-btn-x) {
    corner-shape: squircle !important;
  }
}

/* ---- Reduced motion: no lift, no press, no animation ------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :where(
    .ra-btn,
    .ra-hero__btn,
    .ra-h3-btn,
    .ra-card__btn,
    .ra-consent__btn,
    .ra-consent__more,
    .ra-co__chip,
    .ra-shop-view__btn,
    .ra-hero__arrow,
    .ra-h3-car__btn,
    .ra-h3-car__pause,
    .single_add_to_cart_button,
    #place_order,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce-mini-cart__buttons .button,
    .ra-h3-news .mc4wp-form input[type="submit"]
  ):not(#ra-btn-x),
  :where(
    .ra-btn,
    .ra-hero__btn,
    .ra-h3-btn,
    .ra-card__btn,
    .ra-consent__btn,
    .ra-consent__more,
    .ra-co__chip,
    .ra-shop-view__btn,
    .ra-hero__arrow,
    .ra-h3-car__btn,
    .ra-h3-car__pause,
    .single_add_to_cart_button,
    #place_order,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce-mini-cart__buttons .button,
    .ra-h3-news .mc4wp-form input[type="submit"]
  ):where(:hover, :active):not(#ra-btn-x) {
    transition: none !important;
    transform: none !important;
  }
}