/* ============ Round 8: focus on form fields (29 Oct 2026, the owner: "when I click on input fields I want a nicer animation that I am in the field") ============
   One focus treatment for every text field, instead of five: before, the contact and checkout fields showed a heavy dark outline PLUS a thin ring (two rings
   that snapped on), the coupon and calculator a ring that snapped on, the newsletter pill a border change. Now, in every field:
     - the ring is one 2 px green line with a soft 4 px halo that GROWS out of the field (box-shadow, 0.35 s, a very small overshoot so it settles like a
       native control) and fades back the same way when you leave,
     - the caret turns green, the placeholder steps back (it fades to a lighter grey while you type), the label above (contact form) or inside (checkout, the
       floating label already moves) turns green,
     - the keyboard focus ring IS this ring (the 3 px outline of refresh.css 2a is replaced for text fields only, as the coupon and calculator already did),
       so keyboard focus stays clearly visible: 2 px green-deep line, 4.9:1 on white, plus the halo.
   Nothing here changes size or position (no layout shift) and reduced motion turns the animation off. Plain rules; the ones that must beat an older
   `!important` sit in `@layer fi-pre` (the earlier layer wins for important declarations, among equals the later file). */

:root {
  --fx-ring: var(--green-deep, #2a7050);
  --fx-halo: rgba(47, 122, 85, .16);
  --fx-ease: cubic-bezier(.3, 1.35, .5, 1);   /* a gentle spring: the halo overshoots by about a pixel, then settles */
}

/* Caret and placeholder for every text field. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), textarea { caret-color: var(--fx-ring); }
::placeholder { transition: color .25s ease; }
input:focus::placeholder, textarea:focus::placeholder { color: rgba(75, 92, 82, .5); }

/* ---- Fields that carry their own border: the contact form, the newsletter field of the footer, the review form ---- */
:is(.c-field, .wr-card) :is(input, textarea, select), .nls-form input {
  transition: border-color .2s ease, box-shadow .35s var(--fx-ease), background-color .2s ease;
}
@layer fi-pre {
  :is(.c-field, .wr-card) :is(input, textarea, select):focus, .nls-form input:focus {
    border-color: var(--fx-ring) !important;
    box-shadow: inset 0 0 0 .5px var(--fx-ring), 0 0 0 4px var(--fx-halo) !important;
    background-color: #fff;
  }
  /* `:focus-visible:focus` is only there for the specificity: the shared rule of refresh.css 2a is (0,3,0) because of its [tabindex]:not() list */
  :is(.c-field, .wr-card) :is(input, textarea, select):focus-visible:focus, .nls-form input:focus-visible:focus { outline: 0 !important; }
}
.c-field label { transition: color .2s ease; }
.c-field:focus-within > label { color: var(--fx-ring); }

/* ---- The floating-label fields: checkout, withdrawal form, the country of the cart (their line is an inset shadow, not a border) ---- */
.fld :is(input, textarea, select) { transition: box-shadow .35s var(--fx-ease), background-color .2s ease; }
@layer fi-pre {
  .fld :is(input, textarea, select):focus {
    box-shadow: inset 0 0 0 2px var(--fx-ring), 0 0 0 4px var(--fx-halo) !important;
    background-color: #fff;
  }
  .fld :is(input, textarea, select):focus-visible:focus { outline: 0 !important; }
}
.fld label { transition: transform .25s var(--ease-soft, ease), color .2s ease; }
.fld :is(input, textarea):focus + label { color: var(--fx-ring); }

/* ---- Fields inside a pill or box that carries the ring (the wrapper already draws it; only the way it appears changes) ---- */
.cx-promo-input, .pdp-calc-input, .pdp-cm-input, .join-form { transition: box-shadow .35s var(--fx-ease), background-color .2s ease, border-color .2s ease; }
.pdp-qty, .cart-qty { transition: box-shadow .35s var(--fx-ease), border-color .2s ease; }
@layer fi-pre {
  .pdp-qty:focus-within, .cart-qty:focus-within { box-shadow: 0 0 0 2px var(--fx-ring), 0 0 0 5px var(--fx-halo) !important; }
  .pdp-qty input:focus-visible:focus, .cart-qty input:focus-visible:focus, .pdp-calc-input input:focus-visible:focus, .join-form input:focus-visible:focus { outline: 0 !important; }
}

/* ============ The quantity stepper, product page and cart (29 Oct 2026: "make it nicer and better animated when clicking") ============
   Frame: one 1.5 px line (it was 2 px, brownish) with softer corners. Pressing − or + blooms a soft green disc behind the sign (it springs out where you
   press and lingers a moment as it fades) and the sign dips; with a mouse the disc is a light hint on hover. When the quantity changes, the number rolls in
   from below (more) or from above (fewer), and on the product page the price on the add button rolls with it (data-roll, set by product.js; on the cart
   page the class roll-up / roll-down, set by cart-page.js). The frame clips the roll. Nothing changes the size of anything. */
.pdp-qty { border-width: 1.5px; border-radius: 16px; background: #fff; }
.pdp-qty button, .cart-qty button { position: relative; isolation: isolate; background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pdp-qty button::before, .cart-qty button::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: var(--m-mint, #cfe0bd); opacity: 0; transform: scale(.45);
  transition: transform .45s var(--fx-ease), opacity .45s ease;
}
.pdp-qty button:active:not(:disabled)::before, .cart-qty button:active:not(:disabled)::before { opacity: 1; transform: scale(1); transition-duration: .14s, .08s; }
@media (hover: hover) and (pointer: fine) {
  .pdp-qty button:hover, .cart-qty button:hover { background: none; color: var(--green-ink); }
  .pdp-qty button:hover:not(:disabled)::before, .cart-qty button:hover:not(:disabled)::before { opacity: .55; transform: scale(1); transition-duration: .25s, .2s; }
}
.pdp-qty button svg, .cart-qty button svg { transition: transform .3s var(--fx-ease); }
.pdp-qty button:active:not(:disabled) svg, .cart-qty button:active:not(:disabled) svg { transform: scale(.8); transition-duration: .1s; }
.pdp-qty input, .cart-qty input { font-variant-numeric: tabular-nums; }
.pdp-add-cart .price-now { display: inline-block; }

@keyframes qty-roll-up { from { transform: translateY(65%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qty-roll-down { from { transform: translateY(-65%); opacity: 0; } to { transform: none; opacity: 1; } }
.pdp-cta-row[data-roll="up"] :is(.pdp-qty input, .price-now), .cart-qty input.roll-up { animation: qty-roll-up .34s var(--fx-ease) both; }
.pdp-cta-row[data-roll="down"] :is(.pdp-qty input, .price-now), .cart-qty input.roll-down { animation: qty-roll-down .34s var(--fx-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .pdp-qty button::before, .cart-qty button::before, .pdp-qty button svg, .cart-qty button svg { transition: none !important; }
  .pdp-cta-row[data-roll] :is(.pdp-qty input, .price-now), .cart-qty input.roll-up, .cart-qty input.roll-down { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.c-field, .wr-card) :is(input, textarea, select), .nls-form input, .fld :is(input, textarea, select), .fld label, .c-field label,
  .cx-promo-input, .pdp-calc-input, .pdp-cm-input, .join-form, .pdp-qty, .cart-qty, ::placeholder { transition: none !important; }
}