/* templates/blocks/product-add-to-cart/style.css */
/* v3.0 — CSS Variables Architecture for Perfect Sync */

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

.pf-atc-form {
  display: flex;
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.pf-atc-inner {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  justify-content: var(--atc-align, flex-start);
  box-sizing: border-box;
}

/* Quantity Box */
.pf-atc-qtybox {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  background: var(--qty-bg, #020617);
  border: var(--qty-bw, 1px) solid var(--qty-bc, rgba(148,163,184,.5));
  border-radius: var(--qty-rad, 999px);
  padding: var(--qty-p, 2px 6px);
  margin: var(--qty-m, 0);
  color: var(--qty-col, #e5e7eb);
  font-size: var(--qty-fs, 13px);
  font-weight: var(--qty-fw, 400);
}
.pf-atc-qtybtn {
  border: none;
  background: transparent;
  color: inherit;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pf-atc-qtybtn:hover { background: rgba(15,23,42,.9); }

.pf-atc-qty::-webkit-outer-spin-button,
.pf-atc-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pf-atc-qty {
  width: 52px;
  text-align: center;
  border: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  padding: 0 2px;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Button */
.pf-atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
  box-shadow: 0 12px 30px rgba(15,23,42,.35);
  text-align: center;

  /* CSS Variables Injection */
  width: var(--btn-w, auto);
  flex: var(--btn-flex, 0 0 auto);
  margin: var(--btn-m, 0);
  padding: var(--btn-p, 9px 20px);
  border-radius: var(--btn-rad, 999px);
  border: var(--btn-bw, 1px) solid var(--btn-bc, transparent);
  font-size: var(--btn-fs, 14px);
  font-weight: var(--btn-fw, 600);
  font-style: var(--btn-fsy, normal);
  text-transform: var(--btn-tt, none);
}

/* Focus-visible ring */
.pf-atc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--atc-focus-w, 3px) var(--atc-focus-col, #16a34a);
}

/* Disabled */
.pf-atc-btn[disabled], .pf-atc-btn[aria-disabled="true"] {
  opacity: var(--atc-dis-op, .45); 
  cursor: not-allowed; 
  filter: saturate(.6);
}

/* Preset Styles with Variable Overrides */
.pf-atc-style-primary .pf-atc-btn { 
  background: var(--btn-bg, #16a34a); 
  color: var(--btn-col, #ffffff); 
  border-color: var(--btn-bc, transparent);
}
.pf-atc-style-outline .pf-atc-btn { 
  background: var(--btn-bg, transparent); 
  color: var(--btn-col, #e5e7eb); 
  border-color: var(--btn-bc, #e5e7eb); 
}
.pf-atc-style-ghost .pf-atc-btn { 
  background: var(--btn-bg, transparent); 
  color: var(--btn-col, #e5e7eb); 
  border-color: var(--btn-bc, transparent);
}

/* Base Sizes (Can be overridden by custom padding/fs) */
.pf-atc-size-sm .pf-atc-btn { padding: var(--btn-p, 7px 16px); font-size: var(--btn-fs, 13px); }
.pf-atc-size-md .pf-atc-btn { padding: var(--btn-p, 9px 20px); font-size: var(--btn-fs, 14px); }
.pf-atc-size-lg .pf-atc-btn { padding: var(--btn-p, 11px 24px); font-size: var(--btn-fs, 15px); }

/* Mobile */
@media (max-width:768px) {
  .pf-atc-form { width: 100%; }
}