/* templates/blocks/product-add-to-cart/style.css — v4.1.0 */

.pf-prod-atc {
  display: block;
  box-sizing: border-box;
  width: var(--atc-w, auto);
  max-width: var(--atc-max-w, 100%);
  background: var(--atc-bg, transparent);
  border-style: var(--atc-bs, none);
  border-width: var(--atc-bw, 0);
  border-color: var(--atc-bc, transparent);
  border-radius: var(--atc-rad, 0);
  box-shadow: var(--atc-shadow, none);
  margin: var(--atc-m, 0);
  padding: var(--atc-p, 0);
}
.pf-prod-atc *, .pf-prod-atc *::before, .pf-prod-atc *::after { box-sizing: border-box; }

.pf-atc-form { display:flex; width:100%; margin:0; font-family:inherit; }
.pf-atc-inner {
  display:flex;
  flex-direction:var(--atc-dir, row);
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:var(--atc-align, flex-start);
  gap:var(--atc-gap, 10px);
  width:100%; min-width:0;
}
.pf-prod-atc[data-wrap="nowrap"] .pf-atc-inner { flex-wrap:nowrap; }
.pf-atc-inner > * { min-width:0; }

/* ---------------- Quantity ---------------- */
.pf-atc-qtybox {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--qty-minh, 42px);
  background:var(--qty-bg, transparent);
  color:var(--qty-col, #0f172a);
  border-style:var(--qty-bs, solid);
  border-width:var(--qty-bw, 1px);
  border-color:var(--qty-bc, #cbd5e1);
  border-radius:var(--qty-rad, 8px);
  box-shadow:var(--qty-shadow, none);
  padding:var(--qty-p, 2px);
  margin:var(--qty-m, 0);
  font-size:var(--qty-fs, 14px);
  font-weight:var(--qty-fw, 500);
  line-height:var(--qty-lh, 1.2);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.pf-atc-qtybox:focus-within {
  border-color:var(--atc-focus-col, #2563eb);
  box-shadow:0 0 0 1px var(--atc-focus-col, #2563eb), var(--qty-shadow, none);
}
.pf-atc-qtybtn {
  width:var(--qty-btn-size, 32px);
  height:var(--qty-btn-size, 32px);
  flex:0 0 var(--qty-btn-size, 32px);
  display:inline-flex; align-items:center; justify-content:center;
  border:0;
  border-radius:var(--qty-btn-rad, 6px);
  background:var(--qty-btn-bg, transparent);
  color:var(--qty-btn-col, inherit);
  font:inherit; font-size:1.1em; line-height:1;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,color .15s ease,transform .15s ease,opacity .15s ease;
}
.pf-atc-qtybtn:hover { background:var(--qty-btn-hover-bg, #f1f5f9); color:var(--qty-btn-hover-col, var(--qty-btn-col, inherit)); }
.pf-atc-qtybtn:active { transform:scale(.96); }
.pf-atc-qtybtn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }
.pf-atc-qtybtn:focus-visible { outline:none; box-shadow:0 0 0 var(--atc-focus-w, 3px) var(--atc-focus-col, #2563eb); }
.pf-atc-qty {
  width:var(--qty-input-w, 44px); min-width:var(--qty-input-w, 44px);
  text-align:center; border:0; outline:0; padding:0 2px;
  background:transparent; color:inherit; font:inherit; line-height:inherit;
  appearance:textfield; -moz-appearance:textfield;
}
.pf-atc-qty::-webkit-outer-spin-button,.pf-atc-qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---------------- Purchase buttons ---------------- */
.pf-atc-btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:0;
  font-family:var(--btn-font, inherit);
  text-align:center; text-decoration:none; white-space:nowrap;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease,filter .15s ease;
}
.pf-atc-label,.pf-atc-icon,.pf-atc-buy-icon { display:inline-flex; align-items:center; justify-content:center; min-width:0; }
.pf-atc-icon { flex:0 0 auto; font-size:var(--icon-size, 1em); line-height:1; }

/* Add to cart keeps the v4.0 style system. */
.pf-atc-btn-add {
  width:var(--btn-w, auto);
  min-height:var(--btn-minh, 42px);
  gap:var(--btn-gap, 8px);
  margin:var(--btn-m, 0);
  padding:var(--btn-p, 9px 20px);
  border-style:var(--btn-bs, solid);
  border-width:var(--btn-bw, 1px);
  border-color:var(--btn-bc, transparent);
  border-radius:var(--btn-rad, 999px);
  box-shadow:var(--btn-shadow, 0 8px 22px rgba(15,23,42,.18));
  font-size:var(--btn-fs, 14px);
  font-weight:var(--btn-fw, 600);
  font-style:var(--btn-fsy, normal);
  line-height:var(--btn-lh, 1.2);
  letter-spacing:var(--btn-ls, normal);
  text-transform:var(--btn-tt, none);
}
.pf-atc-style-primary .pf-atc-btn-add { background:var(--btn-bg, #16a34a); color:var(--btn-col, #fff); }
.pf-atc-style-outline .pf-atc-btn-add { background:var(--btn-bg, transparent); color:var(--btn-col, #2563eb); border-color:var(--btn-bc, #2563eb); box-shadow:var(--btn-shadow, none); }
.pf-atc-style-ghost .pf-atc-btn-add { background:var(--btn-bg, transparent); color:var(--btn-col, #2563eb); border-color:var(--btn-bc, transparent); box-shadow:var(--btn-shadow, none); }
.pf-atc-style-primary .pf-atc-btn-add:hover { background:var(--btn-hover-bg, var(--btn-bg, #15803d)); color:var(--btn-hover-col, var(--btn-col, #fff)); border-color:var(--btn-hover-bc, var(--btn-bc, transparent)); }
.pf-atc-style-outline .pf-atc-btn-add:hover { background:var(--btn-hover-bg, #eff6ff); color:var(--btn-hover-col, var(--btn-col, #1d4ed8)); border-color:var(--btn-hover-bc, var(--btn-bc, #2563eb)); }
.pf-atc-style-ghost .pf-atc-btn-add:hover { background:var(--btn-hover-bg, #f1f5f9); color:var(--btn-hover-col, var(--btn-col, #1d4ed8)); border-color:var(--btn-hover-bc, var(--btn-bc, transparent)); }
.pf-atc-btn-add:hover { transform:var(--btn-hover-transform, translateY(-1px)); box-shadow:var(--btn-hover-shadow, var(--btn-shadow, 0 8px 22px rgba(15,23,42,.18))); }

/* Buy now is intentionally independent: outline + two-line text like the requested mockup. */
.pf-atc-btn-buy {
  width:var(--buy-w, auto);
  min-height:var(--buy-minh, 48px);
  margin:0;
  padding:var(--buy-p, 7px 18px);
  border-style:var(--buy-bs, solid);
  border-width:var(--buy-bw, 1px);
  border-color:var(--buy-bc, #ef1010);
  border-radius:var(--buy-rad, 10px);
  background:var(--buy-bg, #fff);
  color:var(--buy-col, #ef1010);
  box-shadow:var(--buy-shadow, none);
  font-size:var(--buy-fs, 14px);
  font-weight:var(--buy-fw, 700);
  line-height:1.1;
  white-space:normal;
}
.pf-atc-btn-buy:hover {
  background:var(--buy-hover-bg, #fff5f5);
  color:var(--buy-hover-col, #dc0b0b);
  border-color:var(--buy-hover-bc, #dc0b0b);
  transform:var(--btn-hover-transform, translateY(-1px));
  box-shadow:var(--buy-shadow, none);
}
.pf-atc-buy-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; }
.pf-atc-buy-main { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.pf-atc-buy-icon { flex:0 0 auto; line-height:1; }
.pf-atc-buy-subtitle { display:block; color:var(--buy-sub-col, #334155); font-size:var(--buy-sub-fs, 11px); font-weight:400; line-height:1.05; text-transform:none; letter-spacing:normal; }
.pf-atc-btn-buy:hover .pf-atc-buy-subtitle { color:var(--buy-sub-col, #334155); }

/* In combo mode each purchase button shares the remaining row width; quantity stays intrinsic. */
.pf-atc-dual .pf-atc-btn-add { flex:1 1 var(--btn-w, 0); }
.pf-atc-dual .pf-atc-btn-buy { flex:1 1 var(--buy-w, 0); }

.pf-atc-btn:active { transform:none; filter:brightness(.98); }
.pf-atc-btn-add:focus-visible { outline:none; box-shadow:0 0 0 var(--atc-focus-w, 3px) var(--atc-focus-col, #2563eb), var(--btn-shadow, 0 8px 22px rgba(15,23,42,.18)); }
.pf-atc-btn-buy:focus-visible { outline:none; box-shadow:0 0 0 var(--atc-focus-w, 3px) var(--atc-focus-col, #2563eb), var(--buy-shadow, none); }
.pf-atc-btn[disabled],.pf-atc-btn[aria-disabled="true"] { opacity:var(--atc-dis-op,.45); cursor:not-allowed; pointer-events:none; transform:none; filter:saturate(.6); }

/* Legacy size presets apply to Add to Cart only; Buy Now has its own sizing controls. */
.pf-atc-size-sm .pf-atc-btn-add { min-height:var(--btn-minh,36px); padding:var(--btn-p,7px 16px); font-size:var(--btn-fs,13px); }
.pf-atc-size-md .pf-atc-btn-add { min-height:var(--btn-minh,42px); padding:var(--btn-p,9px 20px); font-size:var(--btn-fs,14px); }
.pf-atc-size-lg .pf-atc-btn-add { min-height:var(--btn-minh,48px); padding:var(--btn-p,11px 24px); font-size:var(--btn-fs,15px); }
.pf-atc-size-sm .pf-atc-qtybox { min-height:var(--qty-minh,36px); }
.pf-atc-size-md .pf-atc-qtybox { min-height:var(--qty-minh,42px); }
.pf-atc-size-lg .pf-atc-qtybox { min-height:var(--qty-minh,48px); }

/* Busy / success only marks the button that initiated the request. */
.pf-atc-form[data-pf-atc-busy="1"] .pf-atc-btn { pointer-events:none; opacity:.82; }
.pf-atc-form[data-pf-atc-busy="1"] .pf-atc-btn.is-atc-active::after {
  content:""; width:14px; height:14px; flex:0 0 14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:pf-atc-spin .7s linear infinite;
}
.pf-atc-form[data-pf-atc-success="1"] .pf-atc-btn-add.is-atc-active { filter:brightness(1.02); }
@keyframes pf-atc-spin { to { transform:rotate(360deg); } }

.pf-atc-hidden-for-free-post { display:none !important; }

/* Tablet */
@media (max-width:991.98px) {
  .pf-prod-atc { margin:var(--atc-m-tab,var(--atc-m,0)); padding:var(--atc-p-tab,var(--atc-p,0)); }
  .pf-atc-inner { flex-direction:var(--atc-dir-tab,var(--atc-dir,row)); justify-content:var(--atc-align-tab,var(--atc-align,flex-start)); gap:var(--atc-gap-tab,var(--atc-gap,10px)); }
  .pf-atc-btn-add {
    width:var(--btn-w-tab,var(--btn-w,auto)); min-height:var(--btn-minh-tab,var(--btn-minh,42px));
    padding:var(--btn-p-tab,var(--btn-p,9px 20px)); margin:var(--btn-m-tab,var(--btn-m,0)); gap:var(--btn-gap-tab,var(--btn-gap,8px));
    font-size:var(--btn-fs-tab,var(--btn-fs,14px)); line-height:var(--btn-lh-tab,var(--btn-lh,1.2)); letter-spacing:var(--btn-ls-tab,var(--btn-ls,normal));
  }
  .pf-atc-btn-buy {
    width:var(--buy-w-tab,var(--buy-w,auto)); min-height:var(--buy-minh-tab,var(--buy-minh,48px));
    padding:var(--buy-p-tab,var(--buy-p,7px 18px)); font-size:var(--buy-fs-tab,var(--buy-fs,14px));
  }
  .pf-atc-buy-subtitle { font-size:var(--buy-sub-fs-tab,var(--buy-sub-fs,11px)); }
  .pf-atc-icon { font-size:var(--icon-size-tab,var(--icon-size,1em)); }
  .pf-atc-qtybox {
    min-height:var(--qty-minh-tab,var(--qty-minh,42px)); padding:var(--qty-p-tab,var(--qty-p,2px)); margin:var(--qty-m-tab,var(--qty-m,0));
    font-size:var(--qty-fs-tab,var(--qty-fs,14px));
  }
  .pf-atc-qty { width:var(--qty-input-w-tab,var(--qty-input-w,44px)); min-width:var(--qty-input-w-tab,var(--qty-input-w,44px)); }
  .pf-atc-qtybtn { width:var(--qty-btn-size-tab,var(--qty-btn-size,32px)); height:var(--qty-btn-size-tab,var(--qty-btn-size,32px)); flex-basis:var(--qty-btn-size-tab,var(--qty-btn-size,32px)); }
  .pf-atc-qty-hide-tab { display:none !important; }
}

/* Mobile */
@media (max-width:767.98px) {
  .pf-prod-atc { margin:var(--atc-m-mob,var(--atc-m-tab,var(--atc-m,0))); padding:var(--atc-p-mob,var(--atc-p-tab,var(--atc-p,0))); }
  .pf-atc-inner { flex-direction:var(--atc-dir-mob,var(--atc-dir-tab,var(--atc-dir,row))); justify-content:var(--atc-align-mob,var(--atc-align-tab,var(--atc-align,flex-start))); gap:var(--atc-gap-mob,var(--atc-gap-tab,var(--atc-gap,10px))); }
  .pf-atc-btn-add {
    width:var(--btn-w-mob,var(--btn-w-tab,var(--btn-w,auto))); min-height:var(--btn-minh-mob,var(--btn-minh-tab,var(--btn-minh,42px)));
    padding:var(--btn-p-mob,var(--btn-p-tab,var(--btn-p,9px 20px))); margin:var(--btn-m-mob,var(--btn-m-tab,var(--btn-m,0))); gap:var(--btn-gap-mob,var(--btn-gap-tab,var(--btn-gap,8px)));
    font-size:var(--btn-fs-mob,var(--btn-fs-tab,var(--btn-fs,14px))); line-height:var(--btn-lh-mob,var(--btn-lh-tab,var(--btn-lh,1.2))); letter-spacing:var(--btn-ls-mob,var(--btn-ls-tab,var(--btn-ls,normal)));
    max-width:100%;
  }
  .pf-atc-btn-buy {
    width:var(--buy-w-mob,var(--buy-w-tab,var(--buy-w,auto))); min-height:var(--buy-minh-mob,var(--buy-minh-tab,var(--buy-minh,48px)));
    padding:var(--buy-p-mob,var(--buy-p-tab,var(--buy-p,7px 18px))); font-size:var(--buy-fs-mob,var(--buy-fs-tab,var(--buy-fs,14px))); max-width:100%;
  }
  .pf-atc-buy-subtitle { font-size:var(--buy-sub-fs-mob,var(--buy-sub-fs-tab,var(--buy-sub-fs,11px))); }
  .pf-atc-icon { font-size:var(--icon-size-mob,var(--icon-size-tab,var(--icon-size,1em))); }
  .pf-atc-qtybox {
    min-height:var(--qty-minh-mob,var(--qty-minh-tab,var(--qty-minh,42px))); padding:var(--qty-p-mob,var(--qty-p-tab,var(--qty-p,2px))); margin:var(--qty-m-mob,var(--qty-m-tab,var(--qty-m,0)));
    font-size:var(--qty-fs-mob,var(--qty-fs-tab,var(--qty-fs,14px)));
  }
  .pf-atc-qty { width:var(--qty-input-w-mob,var(--qty-input-w-tab,var(--qty-input-w,44px))); min-width:var(--qty-input-w-mob,var(--qty-input-w-tab,var(--qty-input-w,44px))); }
  .pf-atc-qtybtn { width:var(--qty-btn-size-mob,var(--qty-btn-size-tab,var(--qty-btn-size,32px))); height:var(--qty-btn-size-mob,var(--qty-btn-size-tab,var(--qty-btn-size,32px))); flex-basis:var(--qty-btn-size-mob,var(--qty-btn-size-tab,var(--qty-btn-size,32px))); }
  .pf-atc-qty-hide-mob { display:none !important; }
  .pf-atc-qty-show-mob { display:inline-flex !important; }
}

@media (prefers-reduced-motion:reduce) {
  .pf-atc-btn,.pf-atc-qtybtn,.pf-atc-qtybox,.pf-atc-form[data-pf-atc-busy="1"] .pf-atc-btn::after { transition:none !important; animation:none !important; }
}