/* Checkout payment step (UX research 2026-10-12). PP tokens; radio cards stay Woo's own markup. */
.pp-save{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#e5f3eb;color:#0d6b41;font-weight:600;font-size:13px;white-space:nowrap}
.pp-save.is-min{background:none;color:rgb(20 20 20 / .62);font-weight:500;padding:0}
.pp-lane-sub{margin:0 0 8px;font-size:14px;line-height:1.5;color:rgb(20 20 20 / .7)}
.pp-lane-note{margin:8px 0 0;font-size:14px;line-height:1.5}
.pp-lane-desc .pp-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));grid-auto-rows:1fr;gap:8px;margin:4px 0}
.pp-lane-desc .pp-chip{min-height:48px;padding:8px;border:1px solid #e4e2dd;border-radius:12px;background:#fff;color:#141414;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer}
.pp-lane-desc .pp-chip.is-on{border-color:#1e4fd8;background:#e8eefc;color:#1a43b8;font-weight:600}
.pp-lane-label--payram_crypto{font-size:14px;font-weight:500;color:rgb(20 20 20 / .75)}
.pp-place-note{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:rgb(20 20 20 / .62);text-align:center}
/* only the button row sticks (the whole actions block also holds the summary toggle and covered the payment options on phones, browser test 10-12) */
@media (max-width:749px){.wc-block-checkout__actions_row{position:sticky;bottom:0;z-index:5;background:#fff;padding:10px 0 calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgb(20 20 20 / .06)}}
/* consent area (10-12): disclosure as one small muted line under the SMS label; order note as a small text link */
.wc-block-checkout__order-fields .pp-sms-lab{display:block;font-weight:600;color:#141414}
.wc-block-checkout__order-fields .pp-sms-sub{display:block;margin-top:1px;font-size:14px;line-height:1.45;color:rgb(20 20 20 / .75)}
.wc-block-checkout__order-fields .pp-sms-disc{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:rgb(20 20 20 / .58)}
/* 10-13 Oliver: the whole SMS row is one big tap target (the label wraps box + all three lines): a soft card on phone */
.wc-block-checkout__order-fields .wc-block-components-checkbox:has(#order-pp-sms-marketing) label{display:flex;align-items:flex-start;width:100%;box-sizing:border-box;min-height:48px;cursor:pointer}
@media (max-width:749px){
  .wc-block-checkout__order-fields .wc-block-components-checkbox:has(#order-pp-sms-marketing) label{padding:12px 12px 12px 14px;border:1px solid #e4e2dd;border-radius:12px;background:#fbfaf8}
  .wc-block-checkout__order-fields .wc-block-components-checkbox:has(#order-pp-sms-marketing) label:has(input:checked){border-color:#1e4fd8;background:#f3f6fe}
}
/* 10-13: the phone's helper line (pp-checkout-fields.js) */
.pp-phone-help{margin:4px 0 0;font-size:13px;line-height:1.45;color:rgb(20 20 20 / .62)}
.pp-attest-terms,.pp-attest-privacy{color:#1e4fd8;text-decoration:underline;text-underline-offset:2px}
.wc-block-checkout__add-note.pp-note-link .wc-block-components-checkbox__input,
.wc-block-checkout__add-note.pp-note-link .wc-block-components-checkbox__mark{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;opacity:0!important;margin:0!important;padding:0!important;border:0!important;pointer-events:none}
.wc-block-checkout__add-note.pp-note-link .wc-block-components-checkbox__label{margin:0;padding:0;font-size:14px;color:#1e4fd8;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wc-block-checkout__add-note.pp-note-link label{min-height:0;padding-left:0}
/* 10-12 (no React error on the 21+ box): the block's own label text stays in the DOM untouched but hidden; our sibling
   element (.pp-cvis, appended to the same label, so a click still ticks the box) shows the words with the links */
.wc-block-components-checkbox label:has(> .pp-cvis) > .wc-block-components-checkbox__label{display:none}
.wc-block-components-checkbox .pp-cvis{display:block;line-height:1.5}
.wc-block-checkout__add-note:has(.pp-note-vis) .wc-block-components-checkbox__input,
.wc-block-checkout__add-note:has(.pp-note-vis) .wc-block-components-checkbox__mark{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;opacity:0!important;margin:0!important;padding:0!important;border:0!important;pointer-events:none}
.wc-block-checkout__add-note:has(.pp-note-vis) label{min-height:0;padding-left:0}
.wc-block-checkout__add-note .pp-note-vis{margin:0;padding:0;font-size:14px;color:#1e4fd8;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* email typo hint (Mailcheck pattern): never applied without a tap */
.pp-email-hint{margin:6px 0 0;font-size:14px;line-height:1.5;color:rgb(20 20 20 / .75)}
.pp-email-hint button{padding:0;border:0;background:none;color:#1e4fd8;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* the button's label is our element (React's own text hidden, never rewritten): "Pay $X" on the card lane */
.wc-block-components-checkout-place-order-button:has(.pp-btn-label) .wc-block-components-button__text{display:none}
.wc-block-components-checkout-place-order-button .pp-btn-label{display:inline-block}
/* 10-12 brand marks (brand.css has the component): the compact row wraps under the title on narrow screens; the card icon leads its row */
.pp-lane-label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pp-lane-label .pp-save{margin-left:0}
.pp-has-brand{display:inline-flex;align-items:center;gap:10px}
.pp-has-brand>.pp-brand{order:-1}
/* qty stepper in the order summary (10-12): - qty + and Remove, 44 px targets */
.pp-qty{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
.pp-qty__grp{display:inline-flex;align-items:center;border:1px solid #d9d6cf;border-radius:999px;background:#fff}
.pp-qty__dec,.pp-qty__inc{width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:999px;background:none;color:#141414;font:inherit;font-size:20px;line-height:1;cursor:pointer}
.pp-qty__dec:hover,.pp-qty__inc:hover{background:#f2f0eb}
.pp-qty__dec:focus-visible,.pp-qty__inc:focus-visible,.pp-qty__rm:focus-visible{outline:2px solid #1e4fd8;outline-offset:2px}
.pp-qty__dec:disabled,.pp-qty__inc:disabled{color:rgb(20 20 20 / .3);cursor:default;background:none}
.pp-qty__n{min-width:28px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.pp-qty__rm{min-height:44px;padding:0 4px;border:0;background:none;color:rgb(20 20 20 / .7);font:inherit;font-size:13.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pp-qty__rm:disabled{opacity:.5;cursor:default}
.pp-qty.is-fixed .pp-qty__grp{display:none}

/* 10-13 r3 (Oliver): the 21+ error - only the box border and Woo's one message are red; the words keep their colour and place */
.wc-block-checkout .wc-block-components-address-form__pp-age-terms.has-error,.wc-block-checkout .wc-block-components-address-form__pp-age-terms.has-error label,.wc-block-checkout .wc-block-components-address-form__pp-age-terms.has-error .pp-cvis{color:inherit}
.wc-block-checkout .wc-block-components-address-form__pp-age-terms.has-error .pp-attest-terms,.wc-block-checkout .wc-block-components-address-form__pp-age-terms.has-error .pp-attest-privacy{color:#1e4fd8}   /* = line 25, kept when the box errors */

/* 10-13 round 5 (QA bug 8): phone order summary cards - the title inset like every other card (16 px), no empty strip
   with a divider above it, no second border inside the card (the theme draws the card's own border) */
.wc-block-checkout.is-mobile .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title{margin:0;padding:14px 16px;border-top:0}
.wc-block-checkout.is-mobile .wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-checkout-step__heading{margin:0;padding:16px 16px 0}
.wc-block-checkout.is-mobile .wp-block-woocommerce-checkout-order-summary-block > .checkout-order-summary-block-fill{border:0}