/* mutoumise — commerce UX layer.
   Qty stepper buttons, hidden cart update button, variant buttons,
   sticky mobile add bar. Companions: inc/commerce-ux.php, assets/js/commerce.js. */

/* ==========================================================================
   quantity stepper — base.css draws the bordered .quantity frame;
   these are the −/+ buttons printed by inc/commerce-ux.php
   ========================================================================== */

.quantity .qty__minus,
.quantity .qty__plus {
  flex: none;
  width: 40px;
  height: 44px;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--sumi-soft);
  transition: color var(--dur) var(--ease-out);
}
.quantity .qty__minus:hover,
.quantity .qty__plus:hover { color: var(--sumi); }

/* ==========================================================================
   cart — totals refresh automatically; the update button stays in the DOM
   (commerce.js clicks it, screen readers can still reach it) but is hidden
   ========================================================================== */

.woocommerce-cart-form button[name="update_cart"] {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   variant picker — the native select stays functional for screen readers
   but is visually clipped once commerce.js builds the .variant buttons
   ========================================================================== */

.variations select[data-variant-enhanced] {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reveal when keyboard-focused so sighted keyboard users are not lost. */
.variations select[data-variant-enhanced]:focus-visible {
  position: static;
  width: auto; height: auto;
  margin: 0;
  clip-path: none;
  white-space: normal;
}

.field__error[data-variant-error] {
  display: block;
  margin-top: var(--sp-2);
}

/* ==========================================================================
   sticky mobile add bar — per design/mobile/product.html: washi bar fixed
   to the viewport bottom, hairline top, lifted shadow
   ========================================================================== */

.addbar[data-addbar] {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45; /* under consent bar (50) and overlays (60+) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--washi);
  border-top: var(--hairline);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -16px 40px color-mix(in oklab, var(--sumi) 15%, transparent);
  transform: translateY(102%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility 0s var(--dur);
}
.addbar[data-addbar].is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.addbar__info { display: grid; line-height: 1.4; }

@media (min-width: 761px) {
  .addbar[data-addbar] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .addbar[data-addbar] { transition: none; }
}