/* =============================================================================
   Cart + Checkout — WooCommerce block styling (ki-peptides)
   -----------------------------------------------------------------------------
   The cart/checkout pages render the WooCommerce Cart/Checkout *blocks*
   (.wp-block-woocommerce-cart). Out of the box they float in a narrow column
   with the theme's prose width + signature section rhythm — see page.php, which
   now routes these pages through .ki-commerce (no .ki-prose clamp). This file
   gives the blocks a branded, full-width, two-column treatment: items table on
   the left, a sticky summary card on the right.
   ========================================================================== */

/* ---- Section rhythm: tighten the hero→content void on app pages ----------- */
.ki-commerce-hero { padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 3vw, 2.25rem); }
.ki-commerce      { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(3.5rem, 8vw, 6rem); }
@media (max-width: 749px) {
  .ki-commerce-hero { padding-block: clamp(2rem, 8vw, 3rem) clamp(1rem, 4vw, 1.5rem); }
  .ki-commerce      { padding-block: clamp(1.25rem, 5vw, 2rem) clamp(2.5rem, 9vw, 3.5rem); }
}

/* The block wraps itself in .alignwide — neutralise it; .ki-commerce__inner
   already owns the 1200px container + gutters. */
.ki-commerce__inner .wp-block-woocommerce-cart,
.ki-commerce__inner .wp-block-woocommerce-checkout { max-width: none; margin: 0; }

/* =============================================================================
   Empty cart
   ========================================================================== */
.wc-block-cart.wc-block-cart--is-loading,
.wp-block-woocommerce-empty-cart-block { text-align: center; }
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
  font-family: var(--ki-font-display);
  font-weight: 300;
  color: var(--ki-on-surface);
}

/* Replace WooCommerce's default sad-face icon (an ink block masked by a frowning
   SVG) with a clean brand cart outline, matching the header cart icon family. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
  background-image: url("../../img/ki-empty-cart.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.4rem;
  opacity: 0.95;
}
.wc-block-cart__empty-cart__title {
  font-family: var(--ki-font-display) !important;
  font-weight: 300;
  color: var(--ki-on-surface);
}

/* =============================================================================
   Two-column layout
   ========================================================================== */
.wc-block-cart.wc-block-components-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
}
.wc-block-cart .wc-block-cart__main {
  flex: 1 1 0%;            /* basis 0 → grow to fill, don't let the table's width force a wrap */
  min-width: 0;
  padding: 0 !important;   /* WC adds a right padding; the flex gap owns spacing now */
  margin: 0;
}
/* Sidebar IS .wc-block-components-sidebar (same element) → card it directly. */
.wc-block-cart .wc-block-cart__sidebar {
  flex: 0 0 clamp(300px, 30%, 360px);
  margin: 0;
  background: var(--ki-surface-low);
  border: 1px solid rgb(var(--ki-ink) / 0.07);
  border-radius: var(--ki-radius-card);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: sticky;
  top: 6rem;
}

/* =============================================================================
   Items table
   ========================================================================== */
.wc-block-cart-items { border: 0; margin: 0; }

/* Header row — small uppercase labels on a teal hairline (matches the screenshot
   reference + the rest of the catalog typography). */
.wc-block-cart-items__header {
  border-bottom: 1.5px solid var(--ki-secondary);
}
.wc-block-cart-items__header th,
.wc-block-cart-items__header .wc-block-cart-items__header-image,
.wc-block-cart-items__header .wc-block-cart-items__header-product,
.wc-block-cart-items__header .wc-block-cart-items__header-total {
  font-family: var(--ki-font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ki-on-surface-muted);
  padding-bottom: 0.85rem;
}

/* Rows — hairline separators, comfortable padding. */
.wc-block-cart-items__row {
  border-top: 0;
  border-bottom: 1px solid rgb(var(--ki-ink) / 0.1);
}
.wc-block-cart-items__row td { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Thumbnail */
.wc-block-cart-item__image { width: 92px; padding-right: 1.25rem; }
.wc-block-cart-item__image img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--ki-radius-img);
  background: var(--ki-surface-low);
}

/* Product name */
.wc-block-components-product-name {
  font-family: var(--ki-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ki-on-surface);
}
a.wc-block-components-product-name:hover { color: var(--ki-secondary); }

/* Unit price + short description under the name */
.wc-block-cart-item__prices { margin: 0.35rem 0 0; }
.wc-block-cart-item__prices .wc-block-components-product-price__value {
  font-family: var(--ki-font-label);
  font-size: 0.9375rem;
  color: var(--ki-on-surface-muted);
}
.wc-block-components-product-metadata {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ki-on-surface-muted);
}
.wc-block-components-product-metadata__description p { margin: 0; }

/* Quantity stepper → brand pill */
.wc-block-cart-item__quantity { padding-top: 1rem; }
.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: center;
  max-width: 8.25rem;
  border: 1px solid rgb(var(--ki-ink) / 0.18);
  border-radius: var(--ki-radius-pill);
  background: var(--ki-surface-lowest);
  overflow: hidden;
}
.wc-block-components-quantity-selector__input {
  font-family: var(--ki-font-label);
  font-size: 0.9375rem;
  color: var(--ki-on-surface);
  background: transparent;
  border: 0;
  width: 2.75rem;
  text-align: center;
}
.wc-block-components-quantity-selector__button {
  color: var(--ki-on-surface);
  background: transparent;
  border: 0;
  min-width: 2.25rem;
  min-height: 2.5rem;
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--ki-surface-low);
  color: var(--ki-secondary);
}
.wc-block-components-quantity-selector__button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Remove link / trash control */
.wc-block-cart-item__remove-link {
  font-family: var(--ki-font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ki-on-surface-muted);
  margin-top: 0.85rem;
  transition: color .15s ease;
}
.wc-block-cart-item__remove-link:hover { color: var(--ki-alert); }

/* Line total */
.wc-block-cart-item__total {
  text-align: right;
  vertical-align: top;
}
.wc-block-cart-item__total .wc-block-components-product-price__value {
  font-family: var(--ki-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ki-on-surface);
}

/* =============================================================================
   Summary sidebar → branded card
   ========================================================================== */
/* "Cart totals" heading */
.wc-block-cart__totals-title {
  font-family: var(--ki-font-label);
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ki-on-surface-muted);
  margin: 0 0 1.25rem;
}

/* Coupon accordion */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family: var(--ki-font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ki-on-surface);
  padding-block: 1rem;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: var(--ki-secondary); }
.wc-block-components-totals-coupon__button {
  background: var(--ki-secondary) !important;
  color: #fff !important;
  border-radius: var(--ki-radius-pill) !important;
}

/* Totals rows */
.wc-block-components-totals-item {
  font-family: var(--ki-font-display);
  font-size: 0.9375rem;
  color: var(--ki-on-surface-muted);
  padding-block: 0.5rem;
}
.wc-block-components-totals-item__label { font-weight: 400; }

/* Estimated total — the emphasis line */
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
  border-top: 1px solid rgb(var(--ki-ink) / 0.12);
  margin-top: 0.5rem;
  padding-top: 1.25rem;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--ki-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ki-on-surface);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--ki-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ki-on-surface);
}

/* Proceed-to-checkout CTA (gradient already set globally in theme.css; here we
   own sizing + spacing within the card). */
.wc-block-cart__submit { margin-top: 1.5rem; }
.wc-block-cart__submit-button {
  width: 100%;
  min-height: 54px;
  font-family: var(--ki-font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  border-radius: var(--ki-radius-pill) !important;
}

/* =============================================================================
   Notices (added-to-cart, coupon errors)
   ========================================================================== */
.wc-block-components-notice-banner {
  border-radius: var(--ki-radius-card);
  font-family: var(--ki-font-display);
}

/* =============================================================================
   Responsive — stack to a single column; summary follows the items
   ========================================================================== */
@media (max-width: 880px) {
  .wc-block-cart .wc-block-cart__main,
  .wc-block-cart .wc-block-cart__sidebar {
    flex: 1 1 100%;
    max-width: none;
  }
  .wc-block-cart .wc-block-cart__sidebar { position: static; }
}
@media (max-width: 480px) {
  .wc-block-cart-item__image { width: 68px; padding-right: 0.85rem; }
  .wc-block-cart-item__image img { width: 68px; height: 68px; }
  .wc-block-components-product-name { font-size: 1rem; }
}