/**
 * DSS — Quantity Stepper (single product page)
 * ---------------------------------------------------------------------------
 * Styles ONLY `.dss-product-page .dss-qty` — the class that
 * assets/scripts/dss-qty-stepper.js adds to WooCommerce's `.quantity` wrapper
 * once it has injected the − / + buttons.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * VISUAL SOURCE OF TRUTH
 * ═══════════════════════════════════════════════════════════════════════════
 * Every measurement here is copied from the cart stepper in
 * `assets/cart/dss-cart.css` (section 4, "Quantity stepper"), so the two
 * controls are pixel-identical:
 *
 *     48px tall · 14px radius · 1px #e3e0d8 border · white fill · overflow
 *     hidden · 44px transparent minus · 42px yellow plus with 3px margin and
 *     12px radius · 44px input at 17px/700 · minus hover #f5f3ec · plus hover
 *     #ffdf4d · mobile 52px tall / 16px radius
 *
 * If the cart stepper is ever restyled, mirror the change here (or better,
 * lift both into a shared partial).
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * ISOLATION CONTRACT
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * NOTHING LEAKS OUT
 *   Every rule is prefixed with the wrapper chain below and cannot match
 *   anything outside `.dss-product-page .dss-qty`. The cart, mini-cart,
 *   archive and checkout quantity fields are unreachable from this file, and
 *   so is the mobile bottom-bar stepper (`.dss-m-bottombar-qty-*`) that
 *   single-product.js injects.
 *
 * NOTHING LEAKS IN — three layers, in order of importance.
 *
 *   1. `:is(#dss-qty-anchor, .dss-qty)` — THE SPECIFICITY ANCHOR.
 *      `:is()` takes the specificity of its most specific argument, so this
 *      scores as an ID while still matching `.dss-qty`. `#dss-qty-anchor` is
 *      a deliberately non-existent id that matches nothing on its own.
 *      Repeated three times these rules score (3,1,2) / (5,1,2).
 *
 *      Class count is irrelevant once an ID is involved, and this theme does
 *      render `<section id="content">` in base.twig — so a rule as ordinary
 *      as `#content .quantity input.qty { … !important }` would otherwise
 *      outrank us. Only ID-level specificity beats ID-level specificity.
 *
 *      For reference, the existing rules this file must override —
 *      `html body .dss-product-page .quantity` and `… .quantity .qty` in
 *      single-product.css — score (0,2,2) and (0,3,2). Comfortably beaten.
 *
 *   2. `!important` ON EVERY STRUCTURAL DECLARATION. Required, and not merely
 *      for strength: `all: unset` is itself `!important`, and within one rule
 *      an earlier `!important` declaration beats a later normal one. A single
 *      un-flagged property here would be wiped by our own reset.
 *
 *   3. `all: unset !important` AS THE FIRST DECLARATION. Neutralises every
 *      property these elements would otherwise inherit or receive from a
 *      lower-priority rule — including ones this file never named. In
 *      particular it clears the grey-pill treatment single-product.css gives
 *      `.quantity .qty` (56×42, pill radius, border, soft background).
 *
 * THE ONE INTENDED OVERRIDE POINT
 *   The `--dss-qty-*` tokens sit in a separate low-specificity rule (0,2,2),
 *   scoped to the wrapper rather than `:root` — matching the convention
 *   dss-cart.css states explicitly ("declared on the wrapper, never on
 *   :root"). Custom properties are exempt from `all`, so they survive the
 *   reset. Every var() also carries an inline fallback, so the control still
 *   renders correctly if those declarations are removed outright.
 *   Structure is locked; appearance is deliberately not.
 *
 * WHY NOT SHADOW DOM (which would be absolute)
 *   The quantity input must stay a light-DOM descendant of `form.cart`. An
 *   input inside a shadow root is not serialised on submission, so
 *   add-to-cart would post no quantity. Absolute isolation is available only
 *   at the cost of breaking WooCommerce, so it is refused.
 *
 * BROWSER SUPPORT
 *   `:is()` requires Chrome 88+ / Safari 14+ / Firefox 78+ (2020–21). On
 *   anything older every rule here is dropped and the stepper renders with
 *   native WooCommerce styling — functional, unstyled. To trade that away,
 *   replace each `:is(#dss-qty-anchor, .dss-qty)` with `.dss-qty.dss-qty`,
 *   which is universally supported but loses to ID-carrying selectors.
 *
 * FAILURE MODE
 *   If the JS never runs, `.dss-qty` is never added and not one structural
 *   rule matches. The field keeps exactly the grey-pill styling
 *   single-product.css gives it today — there is no half-styled state.
 *
 * @package dss-theme
 */

/* ── Design tokens ───────────────────────────────────────────────────────
   Low specificity (0,2,2), no !important, scoped to the wrapper. This is the
   intended retheming point — override these rather than fighting the rules
   below. Values mirror dss-cart.css.
   ─────────────────────────────────────────────────────────────────────── */

html body .dss-product-page .dss-qty {
  --dss-qty-height: 48px;
  --dss-qty-radius: 14px;
  --dss-qty-minus-w: 44px;
  --dss-qty-plus-w: 42px;
  --dss-qty-plus-inset: 3px;
  --dss-qty-plus-radius: 12px;
  --dss-qty-input-w: 44px;
  --dss-qty-yellow: #ffd623;
  --dss-qty-yellow-hover: #ffdf4d;
  --dss-qty-minus-hover: #f5f3ec;
  --dss-qty-border: #e3e0d8;
  --dss-qty-black: #121212;
  --dss-qty-surface: #ffffff;
  --dss-qty-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) {
  /* Neutralise everything inherited or cascaded, then rebuild. */
  all: unset !important;

  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: stretch !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: var(--dss-qty-height, 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--dss-qty-surface, #ffffff) !important;
  border: 1px solid var(--dss-qty-border, #e3e0d8) !important;
  border-radius: var(--dss-qty-radius, 14px) !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  font-family: var(--dss-qty-font, inherit) !important;
  direction: ltr !important; /* `all` does not reset direction; pin it. */
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn) {
  all: unset !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dss-qty-black, #121212) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.15s ease, opacity 0.15s ease !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn) svg {
  display: block !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn).dss-qty__btn--minus {
  width: var(--dss-qty-minus-w, 44px) !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn).dss-qty__btn--plus {
  width: var(--dss-qty-plus-w, 42px) !important;
  margin: var(--dss-qty-plus-inset, 3px) !important;
  background: var(--dss-qty-yellow, #ffd623) !important;
  border-radius: var(--dss-qty-plus-radius, 12px) !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn).dss-qty__btn--minus:hover:not(:disabled) {
  background: var(--dss-qty-minus-hover, #f5f3ec) !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn).dss-qty__btn--plus:hover:not(:disabled) {
  background: var(--dss-qty-yellow-hover, #ffdf4d) !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn):focus-visible {
  outline: 2px solid var(--dss-qty-yellow, #ffd623) !important;
  outline-offset: -2px !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn):disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ── The input ───────────────────────────────────────────────────────── */

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input[type="number"],
html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input.qty,
html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input.input-text {
  all: unset !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: var(--dss-qty-input-w, 44px) !important;
  min-width: var(--dss-qty-input-w, 44px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dss-qty-black, #121212) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--dss-qty-font, inherit) !important;
  font-size: 17px !important; /* ≥16px also prevents the iOS focus zoom. */
  font-weight: 700 !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input[type="number"]:focus,
html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input.qty:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input[type="number"]:focus-visible,
html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input.qty:focus-visible {
  outline: 2px solid var(--dss-qty-yellow, #ffd623) !important;
  outline-offset: -2px !important;
}

/* Remove the native spinners — the − / + buttons replace them. */
html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input[type="number"]::-webkit-outer-spin-button,
html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) input[type="number"]::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

/* ── Mobile — mirrors the cart stepper's own mobile treatment ────────── */

@media (max-width: 768px) {
  html body .dss-product-page .dss-qty {
    --dss-qty-height: 52px;
    --dss-qty-radius: 16px;
  }
}

/* ── Accessibility / print ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn) {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) {
    border: 1px solid ButtonBorder !important;
  }

  html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn) {
    color: ButtonText !important;
    border: 1px solid ButtonBorder !important;
  }
}

@media print {
  html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) :is(#dss-qty-anchor, .dss-qty__btn):is(#dss-qty-anchor, .dss-qty__btn) {
    display: none !important;
  }
}

/* ── Screen-reader label ─────────────────────────────────────────────────
   WooCommerce's template prints `<label class="screen-reader-text">` inside
   the wrapper. It is now a flex item, so pin it out of flow explicitly rather
   than trusting whatever the theme's global .screen-reader-text rule does — a
   label that took layout space would push the stepper apart.
   ─────────────────────────────────────────────────────────────────────── */

html body .dss-product-page :is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty):is(#dss-qty-anchor, .dss-qty) .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}