/* ============================================================
   Heart First — Shop (product + cart/checkout)
   Uses tokens.css + styles.css (nav/footer/buttons shared).
   ============================================================ */

/* ---------- Product listing ---------- */
.shop { padding-block: clamp(48px, 6vw, 96px); }
.shop-head { max-width: 640px; margin: 0 auto var(--u-12); text-align: center; }
.shop-head .eyebrow { margin-bottom: var(--u-4); }
.shop-head .lead { margin: var(--u-4) auto 0; }

.product-grid { display: grid; grid-template-columns: 1fr; gap: var(--u-6); max-width: 1000px; margin-inline: auto; }
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-media { aspect-ratio: 16 / 11; background: var(--surface-2); overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: var(--u-5) var(--u-6) var(--u-6); display: flex; flex-direction: column; gap: var(--u-4); flex: 1; }
.product-title { font-size: var(--fs-h3); }
.product-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.product-buy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--u-4); margin-top: auto; }
.product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1; }
.product-price span { font-size: 1rem; font-weight: var(--fw-semibold); }
.product-price small { flex-basis: 100%; font-size: 0.72rem; font-weight: var(--fw-regular); color: var(--text-faint); margin-top: 4px; }

/* ---------- Checkout ---------- */
.checkout { padding-block: clamp(40px, 5vw, 80px); }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: var(--u-8); align-items: start; }

.checkout-form { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-sm); }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-2) var(--u-3); margin-bottom: var(--u-6); padding: 0; font-size: var(--fs-sm); }
.step-crumb { color: var(--text-muted); font-weight: var(--fw-medium); }
.step-crumb.is-active { color: var(--accent); }
.step-crumb.is-done { color: var(--text); }
.step-crumb:not(:last-child)::after { content: "›"; margin-left: var(--u-3); color: var(--text-faint); }

.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step[hidden] { display: none; }
.step > h2 { font-size: 1.4rem; margin-bottom: var(--u-5); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field > span { font-size: var(--fs-sm); color: var(--text-muted); }
.field input {
  width: 100%; padding: 13px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--accent); background: var(--bg-elevated); }
.field input.is-valid { border-color: var(--success); }
.field input.is-error { border-color: #e5484d; color: #e5484d; }
.input-icon { position: relative; display: block; }
.input-icon input { padding-left: 50px; }
.input-icon .card-brand { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }

.step-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-3); margin-top: var(--u-8); }
.step-actions .btn { justify-content: center; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn[data-purchase][disabled] { background: var(--text-faint); }

/* ---------- Order summary ---------- */
.order-summary { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px, 2.5vw, 28px); box-shadow: var(--shadow-sm); }
.order-items { display: grid; gap: var(--u-3); }
.order-item { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: var(--u-3); }
.order-item.is-removed { display: none; }
.oi-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.oi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.oi-text { display: flex; flex-direction: column; min-width: 0; }
.oi-text strong { font-size: 0.95rem; font-weight: var(--fw-semibold); color: var(--text-strong); }
.oi-text small { font-size: 0.76rem; color: var(--text-muted); }
.oi-price { font-weight: var(--fw-semibold); white-space: nowrap; }
.oi-remove { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.oi-remove:hover { color: #e5484d; background: var(--surface-2); }

.order-summary .discount { margin-top: var(--u-5); }
.order-totals { margin-top: var(--u-5); padding-top: var(--u-5); border-top: 1px solid var(--border); display: grid; gap: var(--u-3); }
.order-totals div { display: flex; justify-content: space-between; }
.order-totals dt { color: var(--text-muted); }
.order-totals dd { font-weight: var(--fw-medium); }
.order-total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--u-4); padding-top: var(--u-4); border-top: 1px solid var(--border); }
.order-total span { color: var(--text-muted); }
.order-total strong { font-size: 1.3rem; font-weight: var(--fw-bold); color: var(--text-strong); }

/* ---------- Checkout success ---------- */
.checkout-success { text-align: center; padding: var(--u-8) var(--u-4); }
.checkout-success .success-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--u-5); background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.checkout-success h2 { font-size: 1.6rem; margin-bottom: var(--u-3); }
.checkout-success .lead { margin: 0 auto var(--u-6); }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .checkout-grid { grid-template-columns: 1.4fr 0.9fr; gap: var(--u-8); }
  .order-summary { position: sticky; top: 100px; }
}
@media (max-width: 520px) {
  .field-grid { grid-template-columns: 1fr; }
  .step-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   WordPress generic pages + WooCommerce theming (Heart First)
   ============================================================ */
.container-prose { max-width: 820px; padding-block: clamp(40px, 6vw, 90px); }
.prose-article h1 { font-size: var(--fs-h2); margin-bottom: var(--u-6); }
.prose { color: var(--text-muted); line-height: var(--lh-relaxed); }
.prose :is(h2,h3,h4) { color: var(--text-strong); margin: var(--u-8) 0 var(--u-3); }
.prose a { color: var(--accent); }
.prose img { border-radius: var(--radius-md); }

/* ---- WooCommerce: inherit theme font + spacing ---- */
.woocommerce, .woocommerce-page { font-family: var(--font-sans); color: var(--text); }
.woocommerce .shop > .container, .woocommerce-page .shop > .container { padding-block: clamp(40px, 5vw, 80px); }
.woocommerce-products-header__title, .woocommerce h1, .woocommerce h2 { color: var(--text-strong); }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .wc-block-components-button, .wp-element-button {
	background: var(--accent); color: var(--accent-contrast); border: 0;
	border-radius: var(--radius); padding: 12px 20px; font-weight: var(--fw-semibold);
	font-family: var(--font-sans); transition: background-color var(--dur) var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover,
.wp-element-button:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.woocommerce .button.wc-backward, .woocommerce a.added_to_cart { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

/* Product grid (shop) */
.woocommerce ul.products { display: grid; grid-template-columns: 1fr; gap: var(--u-6); margin: 0; }
.woocommerce ul.products li.product {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
	padding: var(--u-5); width: auto !important; margin: 0 !important; float: none; text-align: left;
}
.woocommerce ul.products li.product a img { border-radius: var(--radius-md); margin-bottom: var(--u-4); background: var(--surface-2); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-h3); color: var(--text-strong); padding: 0 0 4px; }
.woocommerce ul.products li.product .price { color: var(--text-strong); font-weight: var(--fw-bold); font-size: 1.25rem; }
.woocommerce ul.products li.product .price del { color: var(--text-faint); font-weight: 400; }

/* Single product */
.woocommerce div.product .product_title { color: var(--text-strong); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--text-strong); font-weight: var(--fw-bold); }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-lg); background: var(--surface-2); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--surface); border-top: 3px solid var(--accent); color: var(--text); border-radius: var(--radius);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }

/* Forms / inputs */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single, .woocommerce table.cart input,
.woocommerce #order_review input, .select2-selection {
	background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong);
	border-radius: var(--radius); padding: 10px 12px; font-family: var(--font-sans);
}
.woocommerce form .form-row label, .woocommerce-checkout label { color: var(--text-muted); }

/* Cart + checkout tables / panels */
.woocommerce table.shop_table { border-color: var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--border); color: var(--text); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--u-5);
}
.woocommerce-checkout #payment { background: var(--surface); border-radius: var(--radius-lg); }
.woocommerce .quantity input.qty { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }

@media (min-width: 768px) {
	.woocommerce ul.products { grid-template-columns: 1fr 1fr; gap: var(--u-8); }
}

/* ---- Shop grid fixes (override) ---- */
.woocommerce ul.products { list-style: none; padding: 0; }
/* WooCommerce clearfix ::before/::after become phantom grid items → remove */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product { float: none !important; clear: none !important; width: auto !important; margin: 0 !important; }
.woocommerce ul.products li.product::before { content: none !important; }
.woocommerce ul.products li.product a img { width: 100%; }
/* Disabled "Update cart" still readable */
.woocommerce button.button[disabled], .woocommerce button.button:disabled { opacity: 0.5; color: var(--accent-contrast); }

/* ============================================================
   Cart + Checkout — 2-column wide layout (match design, fuller)
   ============================================================ */
.woocommerce-cart .shop > .container,
.woocommerce-checkout .shop > .container { max-width: var(--container); }

/* ---- CART: form (left) + totals (right) on one row ---- */
@media (min-width: 980px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1.55fr 0.85fr;
    grid-template-areas: "notice notice" "form totals";
    gap: var(--u-6) var(--u-10);
    align-items: start;
  }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-area: notice; }
  .woocommerce-cart .woocommerce-cart-form { grid-area: form; margin: 0; }
  .woocommerce-cart .cart-collaterals { grid-area: totals; width: auto !important; float: none !important; margin: 0; }
}
.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
.woocommerce-cart table.cart td.product-thumbnail img { width: 56px; border-radius: var(--radius-sm); background: var(--surface-2); }
.woocommerce-cart table.cart .product-name a { color: var(--text); font-weight: var(--fw-medium); }
.woocommerce table.shop_table { width: 100%; }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: var(--fs-h3); margin-bottom: var(--u-4); }

/* ---- CHECKOUT: customer details (left) + order review (right) ---- */
@media (min-width: 980px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr;
    gap: var(--u-6) var(--u-10);
    align-items: start;
  }
  .woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
  .woocommerce-checkout form.checkout > .woocommerce-info { grid-column: 1 / -1; }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 2 / span 2; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 96px; }
  /* stack billing + additional inside the left column, full width */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; margin-bottom: var(--u-8); }
}

/* Bigger, fuller form fields */
.woocommerce form .form-row { margin-bottom: var(--u-4); }
.woocommerce form .form-row label { font-size: var(--fs-sm); margin-bottom: 6px; display: inline-block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout #order_comments,
.select2-container .select2-selection--single,
.woocommerce form .form-row select {
  width: 100%; padding: 14px 16px; font-size: 1rem; min-height: 52px; line-height: 1.3;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
}
.woocommerce form .form-row textarea, .woocommerce-checkout #order_comments { min-height: 110px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 24px; color: var(--text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 14px; }
.woocommerce .checkout #payment, .woocommerce-checkout #order_review { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--u-6); }
.woocommerce-checkout #payment { padding: var(--u-5); margin-top: var(--u-5); }

/* ---- Checkout: switch right column to float so heading+order stick together (no gap) ---- */
@media (min-width: 980px) {
  .woocommerce-checkout form.checkout { display: flow-root !important; grid-template-columns: none !important; gap: 0 !important; }
  .woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
  .woocommerce-checkout form.checkout > .woocommerce-info { float: none; width: 100%; margin-bottom: var(--u-6); }
  .woocommerce-checkout #customer_details { grid-column: auto !important; grid-row: auto !important; float: left; width: 60%; }
  .woocommerce-checkout #order_review_heading { grid-column: auto !important; grid-row: auto !important; float: right; width: 36%; clear: right; margin-top: 0; }
  .woocommerce-checkout #order_review { grid-column: auto !important; grid-row: auto !important; float: right; width: 36%; clear: right; position: sticky; top: 96px; }
}