/* ============================================================================
   MAXIVO — Commerce: product cards, shop/category archive, single product, cart
   Maps WooCommerce markup onto the Maxivo canvas.
   ============================================================================ */

/* ---- product card (shared: home, archive, related) ---- */
.mx-card { display: flex; flex-direction: column; gap: 13px; }
a.mx-card:hover { text-decoration: none; }
.mx-card-media { position: relative; aspect-ratio: 3/4; background: var(--mx-plc); display: grid; place-items: center; overflow: hidden; }
.mx-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mx-card-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mx-card-meta .mx-stack { display: flex; flex-direction: column; gap: 3px; }
.mx-card-name { font-size: 14px; font-weight: 500; color: var(--mx-ink); }
.mx-card-sub { font-size: 12px; color: var(--mx-mut-2); }
.mx-card-price { font: 400 12px var(--mx-mono); color: var(--mx-mut-2); white-space: nowrap; }

/* ---- WooCommerce loop → Maxivo grid ---- */
.woocommerce ul.products,
ul.products {
  display: grid !important; grid-template-columns: repeat(3,1fr); gap: 26px 22px;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
}
.woocommerce ul.products li.product::before { display: none; }
/* 4-up variant (home already inline; archive can opt in) */
.mx-prod-grid--4 .woocommerce ul.products,
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4,1fr); }

/* ---- shop / category archive ---- */
.mx-archive-head {
  padding: 36px var(--mx-pad-x) 28px; border-bottom: 1px solid var(--mx-line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.mx-archive-crumb { font: 400 10px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase; color: #8B8985; }
.mx-archive-title { margin: 12px 0 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(34px,4.6vw,64px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.mx-archive-desc { margin: 12px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--mx-mut); }
.mx-archive-meta { display: flex; align-items: center; gap: 22px; font: 400 12px var(--mx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mx-mut); white-space: nowrap; }

.mx-archive-body { display: grid; grid-template-columns: 230px 1fr; }
.mx-archive-aside { border-right: 1px solid var(--mx-line); padding: 32px 26px 60px; display: flex; flex-direction: column; gap: 34px; }
.mx-archive-aside .widget, .mx-filter-group { display: flex; flex-direction: column; gap: 13px; }
.mx-archive-aside .widgettitle, .mx-filter-group > .mx-mono-label { font: 400 10px var(--mx-mono); letter-spacing: .18em; text-transform: uppercase; color: #8B8985; margin: 0; }
.mx-archive-aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.mx-archive-aside a { color: var(--mx-ink); }
.mx-size-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-size-chip { border: 1px solid var(--mx-line-3); padding: 7px 11px; font: 400 11px var(--mx-mono); }
.mx-size-chip.is-active { border-color: var(--mx-ink); background: var(--mx-ink); color: var(--mx-cream); }
.mx-archive-main { padding: 32px var(--mx-pad-x) 72px; }

/* Woo pagination → Maxivo */
.woocommerce nav.woocommerce-pagination { padding-top: 56px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 20px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: transparent !important; color: var(--mx-mut-2); padding: 0 0 3px;
  font: 400 12px var(--mx-mono); letter-spacing: .1em; text-transform: uppercase; min-width: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current { color: var(--mx-ink); border-bottom: 1px solid var(--mx-ink); }

/* ---- single product ---- */
.mx-pdp { display: grid; grid-template-columns: 1.25fr .75fr; }
.mx-pdp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mx-line); border-right: 1px solid var(--mx-line); }
.mx-pdp-gallery .mx-plc { min-height: 200px; }
.mx-pdp-gallery .span2 { grid-column: span 2; }
.mx-pdp-summary { padding: 44px 44px 64px; display: flex; flex-direction: column; gap: 30px; position: sticky; top: 0; align-self: start; }
.mx-pdp-summary .mx-pdp-crumb { font: 400 10px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase; color: #8B8985; }
.mx-pdp-summary h1, .mx-pdp-summary .product_title { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: clamp(28px,3.2vw,42px); line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.mx-pdp-price, .mx-pdp-summary .price { font: 400 18px var(--mx-mono) !important; color: var(--mx-ink) !important; }
.mx-pdp-summary .woocommerce-product-details__short-description { font-size: 15px; line-height: 1.65; color: var(--mx-mut); }
.mx-pdp-summary form.cart { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.mx-pdp-summary .single_add_to_cart_button,
.mx-pdp-summary button[type="submit"].button {
  background: var(--mx-ink) !important; color: var(--mx-cream) !important; border: 0 !important; border-radius: 0 !important;
  padding: 18px !important; cursor: pointer; font: 500 12px var(--mx-body) !important; letter-spacing: .14em; text-transform: uppercase; width: 100%;
}
.mx-pdp-summary .variations { border: 0; }
.mx-pdp-summary table.variations td, .mx-pdp-summary table.variations th { padding: 6px 0; border: 0; }
.mx-pdp-summary .quantity input { border: 1px solid var(--mx-line-2); background: transparent; padding: 12px; width: 84px; font-family: var(--mx-mono); }
.mx-pdp-summary .product_meta { font: 400 11px var(--mx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mx-mut-2); border-top: 1px solid var(--mx-line); padding-top: 16px; }
.mx-pdp-related { padding: 72px var(--mx-pad-x) 84px; border-top: 1px solid var(--mx-line); }
.mx-pdp-related > h2, .related > h2, .up-sells > h2 { margin: 0 0 30px; font-family: var(--mx-display); font-weight: 700; font-size: 30px; letter-spacing: -.025em; text-transform: uppercase; }

/* ---- cart & checkout ---- */
.woocommerce-cart .maxivo-main, .woocommerce-checkout .maxivo-main { }
.mx-commerce-head { padding: 44px var(--mx-pad-x) 8px; }
.mx-commerce-head h1 { margin: 0; font-family: var(--mx-display); font-weight: 800; font-size: 36px; letter-spacing: -.03em; text-transform: uppercase; }

.woocommerce table.shop_table { border: 0; border-top: 1px solid var(--mx-line); border-radius: 0; }
.woocommerce table.shop_table th { font: 400 10px var(--mx-mono); letter-spacing: .16em; text-transform: uppercase; color: #8B8985; border: 0; padding: 16px 12px; }
.woocommerce table.shop_table td { border: 0; border-bottom: 1px solid var(--mx-line); padding: 22px 12px; }
.woocommerce .cart_item .product-name { font-size: 15px; font-weight: 500; }
.woocommerce a.remove { color: #8B8985 !important; }
.woocommerce .quantity .qty { border: 1px solid var(--mx-line-2); background: transparent; padding: 8px; font-family: var(--mx-mono); }
.woocommerce-cart-form td.product-subtotal,
.woocommerce table.shop_table td.product-total { font-family: var(--mx-mono); }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--mx-panel); padding: 32px 30px; border: 0;
}
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading {
  font: 400 10px var(--mx-mono); letter-spacing: .18em; text-transform: uppercase; color: #8B8985; margin: 0 0 18px;
}
.woocommerce .cart_totals table, .woocommerce-checkout #order_review table { border: 0; }
.woocommerce .cart_totals .order-total .amount, .woocommerce-checkout .order-total .amount { font: 400 20px var(--mx-mono); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout .select2-selection,
.woocommerce-checkout select {
  border: 1px solid var(--mx-line-2) !important; border-radius: 0 !important; background: transparent !important;
  padding: 15px !important; font-size: 14px; outline: none; box-shadow: none !important;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout h3 { font: 400 10px var(--mx-mono); letter-spacing: .18em; text-transform: uppercase; color: #8B8985; }

.woocommerce #payment #place_order,
.woocommerce a.checkout-button,
.woocommerce button.button.alt,
.woocommerce .button {
  background: var(--mx-ink) !important; color: var(--mx-cream) !important; border-radius: 0 !important;
  padding: 16px 26px !important; font: 500 12px var(--mx-body) !important; letter-spacing: .12em; text-transform: uppercase;
}
.woocommerce .button:hover, .woocommerce button.button.alt:hover { opacity: .92; }

/* keep WooCommerce content full-bleed-ish within our shell */
.woocommerce-page .maxivo-main > .woocommerce { padding: 0; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .mx-archive-body { grid-template-columns: 1fr; }
  .mx-archive-aside { border-right: 0; border-bottom: 1px solid var(--mx-line); flex-direction: row; flex-wrap: wrap; gap: 24px 40px; }
  .mx-pdp { grid-template-columns: 1fr; }
  .mx-pdp-gallery { border-right: 0; border-bottom: 1px solid var(--mx-line); }
  .mx-pdp-summary { position: static; }
}
@media (max-width: 720px) {
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2,1fr); }
}