/* ============================================================================
   APF • Unified Buttons (theme-token driven)
   Depends on: .apf-common-box token bridge ( --apf-btn-bg, --apf-btn-fg, etc. )
   Scope: [data-apf="common"] (ATC also targets Woo's .single_add_to_cart_button)
   ========================================================================== */

/* -- helpers computed from bridge tokens (no hardcoded hues) ---------------- */
.apf-common-box{
  /* if the bridge didn’t provide these, synthesize from accents/surfaces */
  --apf-btn-fg: var(--apf-btn-fg, #fff);
  --apf-btn-bg: var(--apf-btn-bg,
      linear-gradient(135deg,
        color-mix(in oklch, var(--apf-accent-1, oklch(.78 .21 330)) 92%, black),
        color-mix(in oklch, var(--apf-accent-2, oklch(.84 .18 210)) 92%, black)
      )
  );
  --apf-btn-border: color-mix(in oklch, var(--apf-accent-2, oklch(.84 .18 210)) 48%, #ffffff22);
  --apf-btn-shadow: var(--apf-btn-shadow, inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.35));
  --apf-btn-r: var(--apf-btn-r, 12px);
  --apf-focus: var(--apf-focus, color-mix(in oklch, var(--apf-accent-2) 65%, transparent));
  --apf-focus-strong: var(--apf-focus-strong, color-mix(in oklch, var(--apf-accent-2) 85%, transparent));
  --apf-ease: var(--apf-ease, cubic-bezier(.2,.9,.2,1));
  --apf-t: var(--apf-transition, .16s var(--apf-ease));
  --apf-surface-0: var(--apf-surface-0, #0b0b0d);
  --apf-surface-1: var(--apf-surface-1, #121217);
  --apf-surface-2: var(--apf-surface-2, #1a1a22);
}

/* ===== CORE THEME (colors/border/shadow) — shared by ALL buttons ========== */
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button),
[data-apf="common"] .apf-add-to-cart,
.woocommerce div.product form.cart .single_add_to_cart_button{
  color: var(--apf-btn-fg) !important;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  border-radius: clamp(10px, 1.2vw, var(--apf-btn-r));
  background: var(--apf-btn-bg) !important;
  border: 1px solid var(--apf-btn-border) !important;
  box-shadow: var(--apf-btn-shadow) !important;

  position: relative;
  isolation: isolate;
  transition: transform var(--apf-t), box-shadow var(--apf-t), filter var(--apf-t), border-color var(--apf-t);
}

/* sheen */
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button)::before,
[data-apf="common"] .apf-add-to-cart::before,
.woocommerce div.product form.cart .single_add_to_cart_button::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg,#ffffff14,#0000);
  mix-blend-mode: screen; opacity:.55;
}

/* ===== STATES (H / A / F / D) — identical across all buttons ============== */
@media (hover:hover){
  [data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button):not(:disabled):hover,
  [data-apf="common"] .apf-add-to-cart:not(:disabled):hover,
  .woocommerce div.product form.cart .single_add_to_cart_button:not(:disabled):hover{
    transform: translateY(-1px);
    filter: brightness(1.05) saturate(1.06);
    border-color: color-mix(in oklch, var(--apf-accent-2) 68%, #ffffff22) !important;
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--apf-accent-1) 42%, transparent),
      inset 0 1px 0 rgba(255,255,255,.1),
      0 16px 28px rgba(0,0,0,.4) !important;
  }
}
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button):active,
[data-apf="common"] .apf-add-to-cart:active,
.woocommerce div.product form.cart .single_add_to_cart_button:active{
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--apf-accent-1) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 16px rgba(0,0,0,.28) !important;
}
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button):focus-visible,
[data-apf="common"] .apf-add-to-cart:focus-visible,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--apf-focus) 80%, transparent),
    0 0 0 1px var(--apf-focus-strong) inset,
    0 10px 22px rgba(0,0,0,.32) !important;
}
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button):disabled,
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button)[aria-disabled="true"],
[data-apf="common"] .apf-add-to-cart:disabled,
[data-apf="common"] .apf-add-to-cart[aria-disabled="true"],
.woocommerce div.product form.cart .single_add_to_cart_button:disabled{
  background: color-mix(in oklch, var(--apf-surface-2) 60%, transparent) !important;
  color: var(--apf-text-mid) !important;
  opacity:.65; cursor:not-allowed; box-shadow:none !important; transform:none;
}

/* ===== SIZE SYSTEM — M base; S/L modifiers; ATC = XL ====================== */
/* Base (M) for regular buttons */
[data-apf="common"] :is(.apf-button,.button,button[type],a.button,label.button){
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:2.6rem; padding:.6rem 1rem;
  font: 1000 clamp(.95rem,.9rem + .15vw,1.05rem)/1.1 var(--apf-font-body, Inter, system-ui);
  letter-spacing:.015em;
}

/* Small / Large / Block / Icon */
[data-apf="common"] .apf-btn--sm{ min-height:2.1rem; padding:.45rem .8rem; font-weight:1000; font-size:clamp(.9rem,.85rem + .1vw,1rem); }
[data-apf="common"] .apf-btn--lg{ min-height:3rem; padding:.85rem 1.15rem; font-size:clamp(1rem,.95rem + .2vw,1.12rem); border-radius:calc(var(--apf-btn-r) + 2px); }
[data-apf="common"] .apf-btn--block{ width:100%; }
[data-apf="common"] .apf-btn--icon{ min-width:2.2rem; aspect-ratio:1/1; padding:.5rem; }

/* ATC (XL) — same theme, just bigger scale */
[data-apf="common"] .apf-add-to-cart,
.woocommerce div.product form.cart .single_add_to_cart_button{
  display:inline-flex !important; width:100% !important; justify-content:center; align-items:center; gap:.65rem;
  min-height: clamp(3.25rem, 6.5vw, 4.75rem);
  padding: clamp(.9rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.6rem);
  font: 1000 clamp(1.05rem, .8rem + .6vw, 1.35rem)/1.1 var(--apf-font-body, Inter, system-ui);
}

/* ===== Variants — same hue, different surface only ======================== */
[data-apf="common"] [data-variant="soft"]{
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--apf-accent-1) 22%, var(--apf-surface-1) 78%),
    color-mix(in oklch, var(--apf-accent-2) 18%, var(--apf-surface-0) 82%)
  ) !important;
  border-color: color-mix(in oklch, var(--apf-accent-2) 32%, #ffffff22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.26) !important;
}
[data-apf="common"] [data-variant="outline"]{
  background: transparent !important;
  border-color: color-mix(in oklch, var(--apf-accent-2) 58%, #ffffff22) !important;
  box-shadow: none !important;
}
[data-apf="common"] [data-variant="ghost"]{
  background: linear-gradient(180deg,#ffffff08,#00000012) !important;
  border-color: color-mix(in oklch, var(--apf-accent-2) 24%, var(--apf-border)) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.2) !important;
}
[data-apf="common"] [data-variant="link"]{
  color: var(--apf-focus) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-height: unset; padding-inline:.25rem; font-weight:1000;
  text-decoration: underline dotted; text-underline-offset:.18em;
}

/* ===== Iconized buttons (same spacing everywhere, incl. ATC) ============== */
[data-apf="common"] :is(.apf-button,.button,button,a.button,label.button)[data-icon],
[data-apf="common"] .apf-add-to-cart[data-icon]{ padding-left: 2.4rem; }
[data-apf="common"] :is(.apf-button,.button,button,a.button,label.button)[data-icon]::before,
[data-apf="common"] .apf-add-to-cart[data-icon]::before{
  content:""; position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; opacity:.95; background-repeat:no-repeat; background-size:contain; background-position:center;
}
/* ===== XL sizing: enforce on ATC + optional utility ===================== */

/* Treat Add-to-Cart as XL regardless of any size class it carries */
[data-apf="common"] .apf-add-to-cart,
.woocommerce div.product form.cart .single_add_to_cart_button{
  /* XL scale (wins over .apf-btn--lg via !important) */
  min-height: clamp(3.25rem, 6.5vw, 4.75rem) !important;
  padding: clamp(.9rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.6rem) !important;
  font: 1000 clamp(1.05rem, .8rem + .6vw, 1.35rem)/1.1 var(--apf-font-body, Inter, system-ui) !important;
  border-radius: clamp(12px, 1.2vw, var(--apf-btn-r)) !important; /* keep the beefier radius */
}

/* Optional: generic XL utility usable anywhere */
[data-apf="common"] .apf-size--xl{
  min-height: clamp(3.25rem, 6.5vw, 4.75rem);
  padding: clamp(.9rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.6rem);
  font: 1000 clamp(1.05rem, .8rem + .6vw, 1.35rem)/1.1 var(--apf-font-body, Inter, system-ui);
  border-radius: clamp(12px, 1.2vw, var(--apf-btn-r));
}
/* ===== Size utilities (SM / MD / LG / XL) — match unified button chrome === */
/* MD = default scale (explicit utility to normalize labels/buttons together) */
[data-apf="common"] .apf-size--md{
  min-height: 2.6rem;
  padding: .6rem 1rem;
  font: 1000 clamp(.95rem, .9rem + .15vw, 1.05rem)/1.1 var(--apf-font-body, Inter, system-ui);
  letter-spacing: .015em;
  border-radius: clamp(10px, 1.2vw, var(--apf-btn-r));
}

/* SM */
[data-apf="common"] .apf-size--sm{
  min-height: 2.1rem;
  padding: .45rem .8rem;
  font-weight: 1000;
  font-size: clamp(.9rem, .85rem + .1vw, 1rem);
  border-radius: clamp(10px, 1.2vw, var(--apf-btn-r));
}

/* LG */
[data-apf="common"] .apf-size--lg{
  min-height: 3rem;
  padding: .85rem 1.15rem;
  font-size: clamp(1rem, .95rem + .2vw, 1.12rem);
  border-radius: calc(var(--apf-btn-r) + 2px);
}

/* XL (reusable; ATC already handled but this lets you upsize any button) */
[data-apf="common"] .apf-size--xl{
  min-height: clamp(3.25rem, 6.5vw, 4.75rem);
  padding: clamp(.9rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.6rem);
  font: 1000 clamp(1.05rem, .8rem + .6vw, 1.35rem)/1.1 var(--apf-font-body, Inter, system-ui);
  border-radius: clamp(12px, 1.2vw, var(--apf-btn-r));
}

/* Ensure label “buttons” behave like buttons */
[data-apf="common"] label.button.apf-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  cursor: pointer;
}