/* =========================================================================
   KAYJO — Cart / Checkout brand skin
   Mirrors the Next.js portfolio's LIGHT palette (frontend/app/globals.css):
     --fg 31 38 32 (deep forest) · --bg 242 237 227 (pale sand)
     --bg-2 230 224 211 · --accent 95 122 92 (dark sage) · --accent-2 201 138 107 (clay)
   Fonts: Inter (body) + Instrument Serif (display).
   Enqueued only on cart/checkout (kj-checkout-theme.php), so bare `body`
   selectors here are already page-scoped.
   ========================================================================= */

:root {
  --kj-bg: #f2ede3;
  --kj-bg-2: #e6e0d3;
  --kj-surface: #faf7f0;       /* cards/inputs sit slightly lighter than the page */
  --kj-fg: #1f2620;
  --kj-fg-soft: #4b5247;       /* muted body text */
  --kj-fg-faint: #6c7264;      /* placeholders, hints */
  --kj-accent: #5f7a5c;        /* sage — primary actions */
  --kj-accent-hover: #4c6349;
  --kj-accent-2: #c98a6b;      /* clay — errors / highlights */
  --kj-border: rgba(31, 38, 32, 0.14);
  --kj-border-strong: rgba(31, 38, 32, 0.28);
  --kj-radius: 10px;
  --kj-shadow: 0 1px 2px rgba(31, 38, 32, 0.04), 0 8px 28px rgba(31, 38, 32, 0.06);
}

/* ---- Page canvas ------------------------------------------------------- */
body {
  background: var(--kj-bg) !important;
  color: var(--kj-fg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle warm grid wash, echoing the portfolio's background texture. */
body.woocommerce-checkout,
body.woocommerce-cart,
body:has(.wp-block-woocommerce-checkout),
body:has(.wp-block-woocommerce-cart) {
  background-image:
    radial-gradient(1100px 520px at 78% -12%, rgba(143, 169, 137, 0.16), transparent 60%),
    radial-gradient(820px 480px at 6% 112%, rgba(201, 138, 107, 0.12), transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Hide the store-wide "demo store" banner on the checkout flow — it reads as
   unfinished to a paying shopper. (Disable globally via WooCommerce → Settings
   if you don't want it anywhere.) */
.woocommerce-store-notice,
.woocommerce-demo-store .woocommerce-store-notice {
  display: none !important;
}

/* ---- Headings ---------------------------------------------------------- */
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2,
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.entry-title,
.page-title {
  font-family: "Instrument Serif", "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--kj-fg) !important;
}

.wc-block-components-checkout-step__title {
  font-size: 1.4rem !important;
}

.wc-block-components-checkout-step__description,
.wc-block-components-address-card,
.wc-block-components-text-input label,
label {
  color: var(--kj-fg-soft) !important;
}

/* ---- Step containers / cards ------------------------------------------ */
.wc-block-components-checkout-step {
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-radius);
  background: var(--kj-surface);
  box-shadow: var(--kj-shadow);
  padding: clamp(1rem, 2.5vw, 1.6rem) !important;
  margin-bottom: 1.25rem;
}

.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-radius);
  background: var(--kj-surface);
  box-shadow: var(--kj-shadow);
}

/* ---- Form fields ------------------------------------------------------- */
.wc-block-components-text-input input,
.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-select select,
.wc-block-components-combobox-control input,
.wc-block-components-textarea,
input.input-text,
select,
textarea {
  background: #fff !important;
  color: var(--kj-fg) !important;
  border: 1px solid var(--kj-border-strong) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.wc-block-components-text-input input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--kj-fg-faint) !important;
}

/* Focus + floating label use the brand sage. */
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-combobox-control input:focus,
input.input-text:focus,
select:focus,
textarea:focus {
  border-color: var(--kj-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(95, 122, 92, 0.22) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-checkbox__input:checked {
  color: var(--kj-accent) !important;
}

.wc-block-components-checkbox__input:checked {
  background: var(--kj-accent) !important;
  border-color: var(--kj-accent) !important;
}

/* ---- Buttons ----------------------------------------------------------- */
/* Primary (Place order / Proceed to checkout) — sage on sand, like the app. */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-button.contained {
  background: var(--kj-accent) !important;
  color: var(--kj-bg) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--kj-accent-hover) !important;
}

/* Tertiary / text buttons (e.g. "Edit", "Return to cart") in forest. */
.wc-block-components-button.text,
.wc-block-components-button:not(.contained) {
  color: var(--kj-fg) !important;
}

a,
.wc-block-components-button.text:hover {
  color: var(--kj-accent);
}
a:hover {
  color: var(--kj-accent-hover);
}

/* ---- Order summary / totals ------------------------------------------- */
.wc-block-components-totals-item__label {
  color: var(--kj-fg-soft) !important;
}
.wc-block-components-totals-item__value {
  color: var(--kj-fg) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item {
  color: var(--kj-fg) !important;
  font-weight: 700 !important;
}
.wc-block-components-totals-item,
.wc-block-components-order-summary-item {
  border-color: var(--kj-border) !important;
}

.wc-block-components-product-name {
  color: var(--kj-fg) !important;
  font-weight: 500 !important;
}
.wc-block-components-order-summary-item__quantity {
  background: var(--kj-bg-2) !important;
  color: var(--kj-fg) !important;
  border-color: var(--kj-border) !important;
}

/* Product thumbnails in the summary. */
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
  border-radius: 8px;
  border: 1px solid var(--kj-border);
}

/* ---- Notices ----------------------------------------------------------- */
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
  border-color: rgba(201, 138, 107, 0.5) !important;
  background: rgba(201, 138, 107, 0.1) !important;
  color: #8a4f33 !important;
}
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
  border-color: var(--kj-border) !important;
  background: var(--kj-surface) !important;
  color: var(--kj-fg) !important;
}

/* ---- Spinner / loading skeleton --------------------------------------- */
.wc-block-components-spinner::after {
  border-color: var(--kj-accent) !important;
  border-right-color: transparent !important;
}