/* WooCommerce surfaces (shop, cart, checkout, account): tokens only. Checkout markup is left to the
   payment plugins; this file changes type, colour, radius and buttons, never structure. */

.woocommerce, .wc-block-components-form, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
  font-family: var(--font-body);
  color: var(--text-body);
}

/* Buttons: pill, violet, hover lightens, press deepens. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--km-violet);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--state-hover-brand); color: var(--text-on-brand); }
.woocommerce a.button:active, .woocommerce button.button:active,
.wc-block-components-button:not(.is-link):active { background: var(--state-active-brand); transform: var(--press-scale); }

/* Headings inside cart/checkout blocks use the display face, sentence case. */
.wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-cart__totals-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  text-transform: none;
}

/* Fields: 2px violet on focus (selection = border weight), soft radius. */
.wc-block-components-text-input input, .wc-block-components-combobox input, .woocommerce form .form-row input.input-text {
  border-radius: var(--radius-md);
}
.wc-block-components-text-input input:focus, .woocommerce form .form-row input.input-text:focus {
  border-color: var(--km-violet);
  box-shadow: 0 0 0 1px var(--km-violet);
}

/* Notices: violet tint, no coloured left border. */
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-success {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--km-violet-soft);
  color: var(--text-body);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--km-violet); }

.km-shop .km-section-heading__title { margin: 0; }

/* ---- Classic cart and checkout tables: brand radius and hairlines instead of Astra's square boxes ---- */
.woocommerce-cart-form,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
/* Tables sit inside those frames flat: one card, never a card inside a card. */
body.woocommerce-page table.shop_table,
body.woocommerce-page .cart_totals table.shop_table,
body.woocommerce-page #order_review table.shop_table { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--border-soft); }
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-page .cart-collaterals .cart_totals > h2 { background: var(--surface-brand-soft); font-size: var(--text-lg); text-transform: none; }
.woocommerce .quantity .qty, .woocommerce #coupon_code {
  min-height: 44px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.woocommerce-cart-form { margin-bottom: var(--space-6); }

/* ---- Page titles (cart, checkout, account): same display type and spacing as every other page title ---- */
body.woocommerce-page .entry-header .entry-title {
  margin: var(--space-7) 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--text-heading);
}
@media (max-width: 767px) {
  body.woocommerce-page .entry-header .entry-title { margin: var(--space-6) 0 var(--space-5); font-size: var(--text-2xl); }
}

/* ---- Notices: no icon-font glyph (it rendered as a stray box), plain padded text ---- */
body .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error),
body.woocommerce-page :is(.woocommerce-info, .woocommerce-message) { padding: var(--space-4) var(--space-5); }
body .woocommerce :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before,
body.woocommerce-page :is(.woocommerce-info, .woocommerce-message)::before { display: none; }
.woocommerce-info a, .woocommerce-message a { font-weight: var(--weight-bold); }

/* ---- Fields: 48px, 16px text (no iOS zoom), brand radius ---- */
body.woocommerce-page form .form-row :is(input.input-text, textarea),
body.woocommerce-page .select2-container .select2-selection--single {
  box-sizing: border-box;
  min-height: 48px;
  font-size: 1rem;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
}
body.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; }
body.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }

@media (max-width: 767px) {
  /* ---- Cart item as one card row: thumb | name + price | remove, then qty | line total ---- */
  body.woocommerce-cart #content .woocommerce-cart-form table.shop_table_responsive tr.cart_item {
    display: grid;
    grid-template-columns: 64px 1fr 44px;
    grid-template-areas: "thumb name remove" "thumb price remove" "qty qty sub";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
  }
  body.woocommerce-cart #content .woocommerce-cart-form table.shop_table_responsive tr.cart_item td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left !important; /* Astra sets right-aligned responsive cells with !important */
    background: none;
  }
  body.woocommerce-cart #content .woocommerce-cart-form table.shop_table_responsive tr.cart_item td::before { display: none; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-thumbnail { grid-area: thumb; align-self: start; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
    display: block; width: 64px; height: 64px; max-width: none; object-fit: cover; border-radius: var(--radius-md);
  }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-name { grid-area: name; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.0625rem; line-height: 1.25; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-name a { color: var(--text-heading); text-decoration: none; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-price { grid-area: price; font-size: var(--text-sm); color: var(--text-muted); }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-remove { grid-area: remove; align-self: start; justify-self: end; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-remove a.remove {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: var(--radius-pill); color: var(--text-muted);
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-remove a.remove:hover { background: var(--km-violet-soft); color: var(--km-violet); }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-remove a.remove:active { transform: var(--press-scale); }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-quantity { grid-area: qty; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-quantity .qty { width: 72px; min-height: 44px; text-align: center; font-size: 1rem; }
  body.woocommerce-cart #content .woocommerce-cart-form tr.cart_item td.product-subtotal { grid-area: sub; justify-self: end; align-self: center; font-weight: var(--weight-bold); color: var(--text-heading); }

  /* Coupon + update: stacked full-width controls */
  body.woocommerce-cart #content .woocommerce-cart-form td.actions { padding: var(--space-4); }
  body.woocommerce-cart #content .woocommerce-cart-form td.actions .coupon { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); }
  body.woocommerce-cart #content .woocommerce-cart-form td.actions .coupon :is(#coupon_code, .button),
  body.woocommerce-cart #content .woocommerce-cart-form td.actions > .button { width: 100%; margin: 0; float: none; font-size: 1rem; }
  body.woocommerce-cart #content .woocommerce-cart-form td.actions > .button[disabled] { display: none; }

  /* ---- Checkout: "Your order" is a plain heading over one order card (Astra drew two boxes) ---- */
  /* Astra's rule carries two IDs (form #order_review_heading:not(... #order_review_heading)). */
  body.woocommerce-checkout form.checkout #order_review_heading:not(#km-none) { margin: var(--space-6) 0 var(--space-3); padding: 0; border: 0; background: none; }
  body.woocommerce-checkout form.checkout #order_review { padding: var(--space-4); border: 1px solid var(--border-soft); }
}

/* Payment method details: violet tint, not WooCommerce grey. */
body.woocommerce-page.woocommerce-checkout #payment div.payment_box { background: var(--km-violet-soft); color: var(--text-body); border-radius: var(--radius-md); }
body.woocommerce-page.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--km-violet-soft); }

/* "Click here to enter your code": a real 44px target, not a 28px line of text. */
body.woocommerce-checkout .woocommerce-info a.showcoupon { display: inline-flex; align-items: center; min-height: 44px; }