/* ==========================================================================
   ProPurity — storefront additions
   Styles for markup the storefront scripts render themselves (cart.js's
   cart lines and checkout summary, checkout-steps.js screens, products.js
   pagination) plus the few components the design left to the prototype JS.
   ========================================================================== */

/* Checkout screens (checkout-steps.js toggles .is-active) */
[data-checkout-screen] { display: none; }
[data-checkout-screen].is-active { display: block; }
.pp-stepper .pp-step { border: 0; background: transparent; padding: 0; }

/* Cart lines rendered by cart.js into #cartItems */
#cartItems .cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--pp-border-soft);
}
#cartItems .cart-thumb { flex: 0 0 auto; width: 80px; height: 80px; border-radius: var(--pp-radius-xs); overflow: hidden; background: var(--pp-surface); }
#cartItems .cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
#cartItems .cart-info { flex: 1 1 0; min-width: 0; }
#cartItems .cart-name { font-size: 1rem; font-weight: 600; line-height: 1.4; }
#cartItems .cart-meta { font-size: 0.75rem; line-height: 1.4; color: var(--pp-text-secondary); }
#cartItems .cart-price { font-size: 1.125rem; font-weight: 700; }
#cartItems .cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pp-teal);
}
#cartItems .cart-remove:hover { text-decoration: underline; }
#cartItems .cart-empty { padding: 48px 0; text-align: center; }
#cartItems .cart-empty .btn-link { color: var(--pp-teal); font-weight: 600; text-decoration: none; }
#cartItems .cart-empty i { display: none; }

/* Quantity stepper (cart lines, checkout summary; the product page uses .pp-qty) */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xs);
}
.qty-stepper button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; font-size: 1rem; line-height: 1; color: var(--pp-navy); }
.qty-stepper .qty-value { min-width: 1ch; font-size: 1rem; font-weight: 600; text-align: center; }
.qty-stepper.qty-stepper-sm { height: 32px; gap: 10px; padding: 4px 10px; }
.qty-value-fixed { font-size: 0.875rem; font-weight: 600; }
.pp-qty.qty-stepper { height: auto; gap: 16px; padding: 10px 16px; border-color: var(--pp-border-strong); border-radius: var(--pp-radius-sm); }
.pp-qty.qty-stepper button { width: auto; height: auto; font-weight: 500; color: var(--pp-text-paragraph); }

/* Checkout summary lines rendered by cart.js into #summaryList */
#summaryList .summary-line { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
#summaryList .sum-thumb { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--pp-radius-xs); overflow: hidden; background: var(--pp-surface); }
#summaryList .sum-thumb img { width: 100%; height: 100%; object-fit: cover; }
#summaryList .sum-qty { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pp-teal); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 20px; text-align: center; }
#summaryList .sum-name { font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
#summaryList .sum-meta { font-size: 0.75rem; color: var(--pp-text-secondary); }
#summaryList .sum-price { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
#summaryList .sum-remove { display: inline-flex; padding: 0 4px; border: 0; background: transparent; color: var(--pp-text-secondary); font-size: 0.75rem; }
#summaryList .sum-remove::before { content: "Remove"; }
#summaryList .sum-remove i { display: none; }
#summaryList .text-muted a { color: var(--pp-teal); font-weight: 600; }

/* Delivery options (Konnektive ship rates) */
.shippingOptions .shippingOption { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); cursor: pointer; }
.shippingOptions .shippingOption.is-selected { border-color: var(--pp-teal); box-shadow: inset 0 0 0 1px var(--pp-teal); }

/* Payment option header (no longer a <button>) */
.pp-pay-option__head { cursor: default; }

/* Product listing (products.js) */
.pp-sort__select { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--pp-navy); padding-right: 4px; outline: 0; }
.pp-pagination .paginationBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 37px;
  height: 37px;
  padding: 0 8px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-xs);
  background: transparent;
  color: var(--pp-ink);
  font-size: 0.875rem;
}
.pp-pagination .paginationBtn.isActive { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; font-weight: 700; }
.pp-pagination .paginationBtn:disabled { opacity: 0.5; }
[data-product-card][hidden] { display: none !important; }

/* Reviews: initial-letter avatar when a review has no photo */
.pp-review__avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--pp-teal-10); color: var(--pp-teal); font-weight: 700; }

/* Purchase options as labels */
.pp-option { display: flex; }
.pp-option input { position: absolute; opacity: 0; }

/* Legal + rich text from the CMS */
.pp-legal h2, .pp-richtext h2 { font-size: 1.5rem; margin: 32px 0 12px; }
.pp-legal h3, .pp-richtext h3 { font-size: 1.125rem; margin: 24px 0 8px; }
.pp-legal p, .pp-richtext p { margin: 0 0 16px; }
.pp-legal ul, .pp-richtext ul { padding-left: 20px; margin: 0 0 16px; }

/* Store blocks dropped into page-builder columns span them */
.pb-column > .pb-store-block { width: 100%; }
.cms-page__body .cms-block--promo { margin-inline: 0; }

/* CMS preview badge */
.cms-preview-bar { position: sticky; top: 0; z-index: 2000; background: #d30c5c; color: #fff; text-align: center; font: 600 13px/1.4 system-ui, sans-serif; padding: 8px 12px; }