/* ════════════════════════════════════════════════════════════════════
   sb-buttons-grid.css — Product grid buttons (SuprBad Buttons 1.2.0)

   Loaded ONLY when SB Buttons → Settings → "Product grid buttons" is ON
   (option sb_buttons_grid_responsive = '1'); enqueued after sb-buttons.css
   (dependency 'sb-buttons'). When the setting is OFF this file is not
   requested at all, so the page is exactly what 1.1.3 served.

   Scope: the WooCommerce Product Button block inside a product-grid card —
     li.wc-block-product       Product Collection / Products (Beta) blocks
     .wc-block-grid__product   the older "All Products"-style grid blocks
   Both the variable-product "Select options" <a> and the simple-product
   "Add to cart" <button> match; nothing outside a grid card does (single
   product ATC, Cart, Checkout, Place Order, My Account, editorial buttons).

   What it does:
     1. Gives the simple-product <button> the same Tier 2 pill the <a> already
        gets from Group 2 (it was never matched there, so it rendered as
        GreenShift's orange 40px button).
     2. Fits the pill to its card: letter-spacing 0.1em → 0.05em, and side
        padding that shrinks with the card (percentage padding resolves
        against the card's width) from 40px down to a floor of 8px.
     3. Keeps the text at the block's own size (the "small" preset — 14px
        on this site, the same size F-BTN-6 uses). No font-size is set here.
     4. Wraps a label onto a second line only as a fallback, when even the
        tight pill cannot fit it; one-line labels stay exactly 62px tall,
        which is the height the morph ring is drawn from (_idleH).

   Specificity: every selector is (0,4,1) or more (.wp-block-button__link is
   in each one for that reason) — equal to Group 2's grid
   selector and later in the cascade, so it wins without !important. No
   !important is added (runbook §5.5). Media queries: none. Safari 12 floor:
   min()/max()/calc() are supported; no :where(), no flex gap.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Shell — both variants inside a grid card ───────────────────── */

body
  .wc-block-product
  .wc-block-components-product-button
  .wp-block-button__link.wc-block-components-product-button__button,
body
  .wc-block-grid__product
  .wc-block-components-product-button
  .wp-block-button__link.wc-block-components-product-button__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  min-height: 62px;
  max-width: 100%;

  /* 132px ≈ "SELECT OPTIONS" at 14px / 900 / 0.05em plus the 2.5px borders.
     100% is the card's width, so a 159px card gives ~13.5px each side and a
     212px+ card the full 40px. */
  padding: 0 min(40px, max(8px, calc((100% - 132px) / 2)));
  border-radius: var(--sb-radius-pill, 100px);
  border: 2.5px solid var(--sb-color-button-border, #000);
  background: var(--sb-color-button-bg, #fff);
  font-family: inherit;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sb-color-button-fg, #000);
  text-decoration: none;

  /* Fallback only: a label longer than the card wraps instead of clipping. */
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow 0.12s ease,
    background 0.1s ease-out,
    color 0.1s ease-out,
    border-color 0.1s ease-out;
}

/* ─── Hover: rubber squash (same animation as Group 2) ───────────── */

body
  .wc-block-product
  .wc-block-components-product-button
  .wp-block-button__link.wc-block-components-product-button__button:not(.disabled, :disabled):hover,
body
  .wc-block-grid__product
  .wc-block-components-product-button
  .wp-block-button__link.wc-block-components-product-button__button:not(
    .disabled,
    :disabled
  ):hover {
  animation: sb-rb-squash 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ─── Active: press depress (same values as Group 2) ─────────────── */

body
  .wc-block-product
  .wc-block-components-product-button
  .wp-block-button__link.wc-block-components-product-button__button:active,
body
  .wc-block-grid__product
  .wc-block-components-product-button
  .wp-block-button__link.wc-block-components-product-button__button:active {
  transform: scale(0.965);
  background: var(--sb-color-button-bg-active, #000);
  color: var(--sb-color-button-fg-active, #fff);
  border-color: var(--sb-color-button-border-active, #fff);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 55%);
}