/*
 * Styling for the WooCommerce Cart & Checkout BLOCKS — the default
 * (React/Store API-driven) cart and checkout since WooCommerce 8.3, used
 * instead of the classic [woocommerce_cart]/[woocommerce_checkout]
 * shortcodes on a fresh install. This is a completely different DOM (class
 * names prefixed wc-block-*) from the classic markup styled in main.css —
 * both are kept because a merchant could still switch a page back to the
 * classic shortcode.
 */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  font-family: var(--font-base);
  color: var(--color-text);
}

/* ---- Two-column layout ---- */
.wc-block-components-sidebar-layout{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px){
  .wc-block-components-sidebar-layout{ flex-direction: row; align-items: flex-start; }
  .wc-block-components-main{ flex: 1 1 60%; min-width: 0; }
  .wc-block-components-sidebar{ flex: 1 1 34%; position: sticky; top: calc(var(--header-height) + var(--space-3)); }
}

/* ---- Checkout step cards ---- */
.wc-block-components-checkout-step{
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.wc-block-components-checkout-step:last-of-type{ border-bottom: none; }
.wc-block-components-checkout-step__title{ font-size: 16px; font-weight: 700; margin: 0; }
.wc-block-components-checkout-step__heading{ margin-bottom: var(--space-3); }
.wc-block-components-checkout-step__description{ color: var(--color-text-muted); font-size: 13px; }

/* ---- Floating-label text inputs ---- */
.wc-block-components-text-input{
  position: relative;
  margin-bottom: var(--space-3);
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox-control input{
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  background: var(--color-surface);
  font-family: var(--font-base);
  font-size: 15px;
  color: var(--color-text);
}
.wc-block-components-text-input textarea{ height: auto; min-height: 88px; padding-top: var(--space-3); }
.wc-block-components-text-input label{
  position: absolute;
  left: var(--space-3);
  top: 14px;
  font-size: 15px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: transform .12s ease, font-size .12s ease, color .12s ease;
  transform-origin: left top;
  background: var(--color-surface);
  padding: 0 4px;
}
.wc-block-components-text-input.is-active label{
  transform: translateY(-24px) scale(.82);
  color: var(--color-text-muted);
}
.wc-block-components-text-input input:focus + label,
.wc-block-components-text-input.is-active input:focus + label{ color: var(--color-primary); }
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus{ outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* WooCommerce Blocks' country/state combobox popover */
.wc-blocks-components-select select,
.wc-block-components-country-input select{
  width: 100%; height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3);
  background: var(--color-surface); font-family: var(--font-base); font-size: 15px;
}

/* ---- Payment method radio list ---- */
.wc-block-components-radio-control{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wc-block-components-radio-control-accordion-option:last-child,
.wc-block-components-radio-control__option:last-child{ border-bottom: none; }
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option[aria-checked="true"]{
  background: var(--color-accent-tint);
}
.wc-block-components-radio-control__input{ accent-color: var(--color-primary); width: 18px; height: 18px; }
.wc-block-components-radio-control__label{ font-size: 14px; font-weight: 600; }

/* ---- Buttons ---- */
.wc-block-components-button{
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font-family: var(--font-base); font-weight: 700; font-size: 15px;
  background: var(--color-primary); color: var(--color-primary-contrast);
  border: 1px solid transparent; transition: background-color .15s ease, transform .05s ease;
}
.wc-block-components-button:hover{ background: var(--color-primary-hover); color: var(--color-primary-contrast); }
.wc-block-components-button:active{ transform: scale(.98); }
.wc-block-components-button.is-outlined,
.wc-block-cart__submit-button.wc-block-components-button.is-outlined{
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{ width: 100%; }

/* ---- Quantity stepper (cart line items) — same look as the single-product one ---- */
.wc-block-components-quantity-selector{
  display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); height: 44px; overflow: hidden;
}
.wc-block-components-quantity-selector__input{
  width: 44px; text-align: center; border: 0; height: 100%; font-family: var(--font-base); font-size: 14px; -moz-appearance: textfield;
}
.wc-block-components-quantity-selector__button{
  width: 40px; height: 100%; border: 0; background: transparent; font-size: 16px; color: var(--color-text);
}
.wc-block-components-quantity-selector__button:hover{ background: var(--color-bg-muted); }
.wc-block-cart-item__remove-link{
  color: var(--color-danger); background: none; border: 0; padding: 4px; margin-top: var(--space-2);
}

/* ---- Cart table ---- */
.wc-block-cart-items{ width: 100%; border-collapse: collapse; }
.wc-block-cart-items__header th{ text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.wc-block-cart-items__row td{ padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.wc-block-cart-item__image img{ width: 64px; height: 64px; object-fit: contain; background: var(--color-bg-muted); border-radius: var(--radius-sm); }
.wc-block-components-product-name{ font-size: 14px; font-weight: 600; color: var(--color-text); }
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{ font-variant-numeric: tabular-nums; }
.wc-block-components-product-badge.wc-block-components-sale-badge{
  display: inline-flex; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; background: var(--color-badge-sale-bg); color: var(--color-badge-sale-text);
  align-items: center; margin-top: 4px;
}

/* ---- Totals / order summary ---- */
.wc-block-components-totals-wrapper{ padding: var(--space-2) 0; }
.wc-block-components-totals-item{ display: flex; justify-content: space-between; font-size: 14px; }
.wc-block-components-totals-item__label{ color: var(--color-text-muted); }
.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-size: 17px; font-weight: 800; color: var(--color-text);
}
.wc-block-cart__totals-title{ font-size: 16px; margin-bottom: var(--space-3); }
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block{
  background: var(--color-bg-muted); border-radius: var(--radius-md); padding: var(--space-4);
}

/* ---- Notices ---- */
.wc-block-components-notice-banner{
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-size: 14px;
  border: 1px solid transparent;
}
.wc-block-components-notice-banner.is-error{ background: #FDE7E7; color: var(--color-danger); border-color: #F7C8C8; }
.wc-block-components-notice-banner.is-success{ background: var(--color-badge-instock-bg); color: var(--color-badge-instock-text); }
.wc-block-components-notice-banner.is-info{ background: var(--color-accent-tint); color: var(--color-text); }

/* ---- Loading skeletons WooCommerce Blocks render while hydrating ---- */
.wc-block-components-skeleton__element{ background: var(--color-bg-muted); border-radius: var(--radius-sm); }