/* ============================================================
   ASPB — WooCommerce Cart & Checkout BLOCKS restyle
   -----------------------------------------------------------
   The theme's classic-checkout rules (in aspb.css) don't touch the
   block Cart/Checkout, which use `wc-block-components-*` markup. This
   sheet brings the blocks in line with the register design: square
   borders, IBM Plex Mono labels, the --mark red accent, Newsreader
   headings. Enqueued after `wc-blocks-style`, on cart/checkout only.
   ============================================================ */

/* ---- section & step headings → Newsreader ---- */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading .wc-block-components-title{
  font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);text-transform:none}
.wc-block-components-checkout-step__title{font-size:1.3rem;line-height:1.15}
.wc-block-components-checkout-step__description{color:var(--grey);font-family:'Newsreader',serif}

/* collapsible mobile "order summary" bar */
.wc-block-components-panel__button{font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}

/* ---- inputs / selects / textareas ---- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select .wc-block-components-select__select,
.wc-blocks-components-select select,
.wc-block-components-address-form input,
.wc-block-components-address-form select{
  border:1px solid var(--hair);border-radius:0;background:var(--paper);color:var(--ink);
  font-family:'Newsreader',Georgia,serif;font-size:1rem;box-shadow:none}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select .wc-block-components-select__select:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus{
  outline:none;border-color:var(--mark);box-shadow:0 0 0 1px var(--mark)}
/* floating field labels */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-select label{
  font-family:'IBM Plex Mono',monospace;color:var(--grey);letter-spacing:.02em}
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control.is-active label{color:var(--mark)}

/* ---- buttons ---- */
.wc-block-components-button{
  border-radius:0;font-family:'IBM Plex Mono',monospace;font-size:.76rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:500}
/* filled / primary → red mark (Place order, Proceed to checkout) */
.wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button{
  background:var(--mark);border:1px solid var(--mark);color:#fff;padding:14px 24px}
.wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover{
  background:#8f2c14;border-color:#8f2c14;color:#fff}
/* text / outline buttons (edit address, apply coupon) → ink/mark */
.wc-block-components-button.outlined{color:var(--mark);border-color:var(--mark);background:none}
.wc-block-components-button.outlined:hover{background:var(--mark);color:#fff}
.wc-block-components-address-card__edit,
.wc-block-components-button.text{color:var(--mark);text-transform:none;letter-spacing:0;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem}

/* ---- Ship / Retrait (pickup) toggle ---- */
/* the block gives each tab a 2px transparent border and the selected one a
   2px solid border in currentColor (a black box). Keep the transparent border
   for layout, but render the selected tab as a filled stone chip instead. */
.wc-block-checkout__shipping-method-container{
  gap:0;background:var(--paper);border:1px solid var(--hair);border-radius:0;padding:0}
.wc-block-checkout__shipping-method-option{border-radius:0;color:var(--grey)}
.wc-block-checkout__shipping-method-option-title{
  font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.04em;font-size:.74rem}
/* higher specificity than the block's `.option.option--selected` (0,2,0) */
.wc-block-checkout .wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected{
  background:var(--stone);border-color:var(--stone);color:#fff}

/* ---- radio options (payment method + shipping rate) ---- */
/* Payment methods are ACCORDIONS: one wrapper holds the label AND the gateway
   description. Highlight that whole wrapper as one block (light wash + a thin
   red left-bar) instead of just the label row, so label + instructions read as
   a single selected card. Covers the plain shipping-rate option too. */
.wc-block-components-radio-control__option{border-radius:0}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted{
  box-shadow:inset 3px 0 0 var(--mark);background:var(--wash);border-radius:0}
/* gateway instructions: align under the label and give them breathing room */
.wc-block-components-radio-control-accordion-content{
  padding:2px 18px 18px 48px;margin:0;color:var(--grey);font-size:.95rem;line-height:1.55}
.wc-block-components-radio-control-accordion-content p{margin:0}
/* the radio dot itself → red (beats the block's (0,3,0) currentColor rule) */
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked{
  border-color:var(--mark)}
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before{
  background:var(--mark)}
.wc-block-components-radio-control__label{font-weight:500;color:var(--ink)}

/* ---- checkboxes ---- */
.wc-block-components-checkbox__input[type=checkbox]:checked{
  background:var(--mark);border-color:var(--mark)}
.wc-block-components-checkbox__input[type=checkbox]:focus{
  outline:none;box-shadow:0 0 0 1px var(--mark)}
.wc-block-components-checkbox__label{color:var(--ink)}

/* ---- order-summary totals ---- */
.wc-block-components-totals-item__label{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey)}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount{
  font-family:'IBM Plex Mono',monospace;color:var(--ink)}
/* grand total → Newsreader, larger */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:'Newsreader',Georgia,serif;font-size:1.2rem;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink)}

/* product line in the summary */
.wc-block-components-product-name{font-family:'Newsreader',Georgia,serif}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description{color:var(--grey)}

/* the sticky order-summary panel → a subtle register "card" */
.wc-block-components-sidebar .wc-block-components-totals-wrapper{border-color:var(--hair)}

/* generic links inside cart/checkout */
.wc-block-checkout a,.wc-block-cart a,
.wc-block-components-totals-coupon-link{color:var(--mark)}
.wc-block-checkout a:hover,.wc-block-cart a:hover{color:#8f2c14}

/* notices keep the register accent bar */
.wc-block-components-notice-banner{border-radius:0}
.wc-block-components-notice-banner.is-error{border-color:var(--mark)}
.wc-block-components-notice-banner.is-success{border-color:var(--quarry)}