/* =============================================================================
   Scoophescoope — WooCommerce Cart and Checkout blocks
   -----------------------------------------------------------------------------
   WooCommerce's current Cart and Checkout pages are blocks, rendered by React.
   Their own stylesheet has to stay loaded or they break, so this file layers the
   design system on top rather than replacing it: fonts, colours, radii, control
   sizes and spacing, all from the same tokens as the rest of the site.

   Loaded only on cart, checkout and account.

   If you prefer the classic shortcode versions — some Indian payment gateways
   still document those, and they are easier to customise field by field —
   replace the page content with [woocommerce_cart] / [woocommerce_checkout].
   woocommerce.css already styles those completely, and this file becomes
   unnecessary. Both paths are supported; neither is forced on you.
   ========================================================================== */

/* Blocks read from these CSS variables, so setting them is most of the work. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-form,
.woocommerce-account {
  --wc-blue: var(--teal);
  --wc-green: var(--success);
  --wc-red: var(--danger);
  --wc-primary: var(--teal);
  --wc-primary-text: var(--cream);
  --wc-secondary: var(--cream-deep);
  --wc-secondary-text: var(--ink);
  --wc-highlight: var(--marigold);
  --wc-content-bg: var(--surface);
  --wc-surface: var(--surface);
  --wc-form-border-color: var(--line-strong);
  --wc-form-color-dark: var(--ink);
  --wc-border-radius: var(--r-md);

  font-family: var(--font-body);
  color: var(--text);
}

/* ------------------------------------------------------------- headings -- */

.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.wc-block-components-checkout-step__heading,
.wc-block-cart__submit-container + * { margin-top: 0; }
.wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-display);
}
.wc-block-components-checkout-step__description { color: var(--ink-soft); }

/* -------------------------------------------------------------- buttons -- */

.wc-block-components-button:not(.is-link) {
  min-height: 48px;
  padding-inline: var(--sp-6);
  background-color: var(--teal);
  color: var(--cream);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.wc-block-components-button:not(.is-link):hover {
  background-color: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--cream);
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  min-height: 54px;
  background-color: var(--marigold);
  border-color: var(--marigold);
  color: var(--ink);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--marigold-deep);
  border-color: var(--marigold-deep);
  color: var(--cream);
}
.wc-block-components-button.is-link { color: var(--teal); text-underline-offset: 3px; }

/* Block buttons are anchors, and Woo underlines their inner text. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
  text-decoration: none;
  border-bottom: 0;
}

/* Give the cart and checkout room. The blocks default to the editor's content
   width, which on a theme without theme.json is far too narrow for a two-column
   checkout. */
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-checkout .wc-block-checkout { max-width: none; }
.wc-block-cart, .wc-block-checkout { width: 100%; }

/* --------------------------------------------------------------- inputs -- */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
}
.wc-block-components-text-input.is-active input:focus,
.wc-blocks-components-select__select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.wc-block-components-text-input label { color: var(--ink-muted); font-family: var(--font-body); }
.wc-block-components-validation-error { color: var(--danger); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- cards -- */

.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.wc-block-components-totals-item { font-size: var(--fs-base); }
.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }
.wc-block-components-totals-footer-item {
  border-top: var(--border);
  font-weight: var(--fw-semibold);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
}

/* -------------------------------------------------------------- line items */

.wc-block-cart-items__row { border-bottom: var(--border); }
.wc-block-cart-item__image img {
  border-radius: var(--r-sm);
  aspect-ratio: var(--ratio-product);
  object-fit: cover;
}
.wc-block-components-product-name { font-weight: var(--fw-medium); color: var(--ink); }
.wc-block-components-product-name:hover { color: var(--teal); }
.wc-block-components-product-price__value { font-variant-numeric: tabular-nums; }
.wc-block-components-quantity-selector {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
.wc-block-components-quantity-selector__button { color: var(--ink); }

/* -------------------------------------------------------------- notices -- */

.wc-block-components-notice-banner {
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.wc-block-components-notice-banner.is-success { background: var(--success-soft); border-color: var(--success); }
.wc-block-components-notice-banner.is-error { background: var(--danger-soft); border-color: var(--danger); }
.wc-block-components-notice-banner.is-info { background: var(--teal-soft); border-color: var(--teal); }

/* ------------------------------------------------------------- payment  -- */

.wc-block-components-radio-control__option {
  border-radius: var(--r-md);
}
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.wc-block-components-checkbox__input[type="checkbox"] { accent-color: var(--teal); }

/* --------------------------------------------------------------- layout -- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: var(--container);
  margin-inline: auto;
}
.wc-block-components-sidebar-layout { gap: var(--sp-10); }

@media (max-width: 768px) {
  .wc-block-components-sidebar-layout { gap: var(--sp-6); }
}