/* 06-collection.css: collection pages and product cards (design system, Collection).
 * [h1] (section name, breadcrumb Home › door › collection) → [intro] (two sentences) → grid → [bottom-copy] (70ch).
 * Columns 3 desktop, 2 phone. Cards: Jeremy's full title clamped to 2 lines (design system, Product card). No sidebar.
 * MCS lessons: the card button static and visible, cards stretched, image tiles `contain` on a surface tile. */
body.woopify.woocommerce-shop .content-area, body.woopify.tax-product_cat .content-area { width: 100%; float: none; }
body.woopify .woocommerce-breadcrumb { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--color-ink-muted); }
body.woopify .woocommerce-breadcrumb a { color: var(--color-ink-muted); }
body.woopify .woocommerce-products-header__title, body.woopify h1.page-title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--color-ink); margin: var(--space-md) 0; }
body.woopify .woocommerce-products-header { background: transparent; padding: 0; }
body.woopify .woocommerce-products-header .woopify-section--intro { padding: 0 0 var(--space-lg); }
body.woopify .woocommerce-products-header .woopify-section--intro .woopify-container { padding: 0; }
body.woopify .woopify-section--intro .woopify-body { max-width: 62ch; color: var(--color-ink-muted); }
body.woopify .woopify-section--bottom-copy { padding: var(--space-xl) 0; }
body.woopify .woopify-section--bottom-copy .woopify-container { padding: 0; }
body.woopify .woopify-section--bottom-copy ul { padding-left: 1.1em; }
body.woopify .woopify-section--bottom-copy li { margin-bottom: var(--space-sm); }

/* Toolbar: result count left, sort menu right. */
body.woopify .woocommerce-result-count { color: var(--color-ink-muted); font-size: var(--fs-body-sm); }
body.woopify .woocommerce-ordering select { background: var(--color-surface); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); color: var(--color-ink); font-family: var(--font-body); }

/* Grid */
body.woopify ul.products { width: auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-gutter); margin: 0 0 var(--space-lg); padding: 0; }
body.woopify ul.products::before, body.woopify ul.products::after { display: none !important; }
body.woopify ul.products li.product { display: flex; flex-direction: column; width: auto !important; float: none !important; margin: 0 !important; padding: 0; background: transparent; }
body.woopify ul.products li.product .woocommerce-image__wrapper,
body.woopify ul.products li.product img { background: var(--color-surface); border-radius: var(--radius-md); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
body.woopify ul.products li.product .woocommerce-loop-product__title,
body.woopify ul.products li.product .woocommerce-LoopProduct-link h2 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-md); line-height: 1.35; color: var(--color-ink);
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(2 * 1.35em); padding: 0 !important; margin: var(--space-sm) 0 var(--space-xs);
}
body.woopify ul.products li.product .woocommerce-LoopProduct-link { color: var(--color-ink); text-decoration: none; }
body.woopify ul.products li.product .price { font-family: var(--font-body); font-size: var(--fs-body-md); color: var(--color-ink-muted); }
body.woopify ul.products li.product .price ins { text-decoration: none; color: var(--color-sale); }
/* Design system, Product card: the card links to the product, no quick-add. Shoptimizer's loop button and wishlist icon are hidden. */
body.woopify ul.products li.product :is(.button, .add_to_cart_button, .add_to_wishlist, .yith-wcwl-add-to-wishlist) { display: none !important; }
body.woopify ul.products li.product .onsale { background: var(--color-sale); color: var(--color-accent-ink); border-radius: var(--radius-sm); }
/* Product without a photo yet: WooCommerce's placeholder sits on the surface tile. */
body.woopify ul.products li.product img.woocommerce-placeholder { object-fit: contain; padding: 15%; }
body.woopify .woocommerce-pagination ul.page-numbers li .page-numbers { color: var(--color-ink); border-color: var(--color-border); }
body.woopify .woocommerce-pagination ul.page-numbers li span.current { background: var(--color-accent); color: var(--color-accent-ink); }
@media (max-width: 767px) {
  body.woopify ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  body.woopify ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-body-sm); }
}