/* 06-collection.css: product cards and collection pages (Components > Product card; Layout > Collection). */
body.woopify ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-lg); margin: 0; padding: 0; }
body.woopify ul.products::before, body.woopify ul.products::after { content: none !important; }
body.woopify ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; text-align: left; background: transparent; border: 0; box-shadow: none; }
body.woopify ul.products li.product .woocommerce-image__wrapper, body.woopify ul.products li.product .woocommerce-LoopProduct-link { display: block; }
body.woopify ul.products li.product img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 0 0 var(--space-md); }
body.woopify ul.products li.product .woocommerce-loop-product__title { font: 500 18px/1.3 var(--font-heading); color: var(--color-ink); margin: 0 0 var(--space-xs); padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.woopify ul.products li.product .woocommerce-loop-product__title a { color: var(--color-ink); text-decoration: none; }
body.woopify ul.products li.product .price { font: 600 var(--fs-body-md)/1.3 var(--font-body); color: var(--color-ink); margin: 0; }
body.woopify ul.products li.product .price del { color: var(--color-ink-muted); font-weight: 400; }
body.woopify ul.products li.product .price ins { color: var(--color-sale); text-decoration: none; }
/* No add-to-cart button on the card (the whole card links to the product). */
body.woopify ul.products li.product :is(.button, .add_to_cart_button, .product_type_variable, .product_type_simple, .added_to_cart) { display: none !important; }
body.woopify ul.products li.product .onsale, body.woopify ul.products li.product .product-label { display: none; }
body.woopify ul.products li.product .star-rating { margin: 0 0 var(--space-xs); }
/* Collection page: h1, intro (two sentences max), sorting, grid, pagination. */
body.woopify .woopify-collection { padding: var(--space-xl) 0 var(--space-section); }
body.woopify .woopify-collection__header { margin-bottom: var(--space-lg); }
body.woopify .woopify-collection__header .woopify-h1 { margin: 0 0 var(--space-sm); }
body.woopify .woopify-collection__intro { color: var(--color-ink-muted); }
body.woopify .woopify-collection .woocommerce { margin: 0; }
body.woopify .woopify-collection :is(.woocommerce-result-count, .woocommerce-ordering) { margin: 0 0 var(--space-lg); font-size: var(--fs-body-sm); color: var(--color-ink-muted); }
body.woopify .woopify-collection .woocommerce-result-count { float: left; line-height: 44px; }
body.woopify .woopify-collection .woocommerce-ordering { float: right; }
body.woopify .woopify-collection ul.products { clear: both; }
body.woopify .woocommerce-ordering select { min-height: 44px; padding: 0 36px 0 var(--space-md); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-ink); font-size: var(--fs-body-sm); }
body.woopify nav.woocommerce-pagination { margin-top: var(--space-xl); text-align: center; }
body.woopify nav.woocommerce-pagination ul { border: 0; display: inline-flex; gap: var(--space-sm); }
body.woopify nav.woocommerce-pagination ul li { border: 0; }
body.woopify nav.woocommerce-pagination ul li :is(a, span) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-surface); }
body.woopify nav.woocommerce-pagination ul li span.current { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
@media (max-width: 991px) { body.woopify ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  body.woopify ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  body.woopify ul.products li.product .woocommerce-loop-product__title { font-size: 16px; }
  body.woopify .woopify-collection { padding-top: var(--space-lg); }
  body.woopify .woopify-collection .woocommerce-result-count { float: none; line-height: 1.4; margin-bottom: var(--space-sm); }
  body.woopify .woopify-collection .woocommerce-ordering { float: none; }
  body.woopify .woocommerce-ordering select { width: 100%; }
}
/* Shoptimizer prints the product's categories on each card; not part of the card design. */
body.woopify ul.products li.product .product__categories { display: none; }
body.woopify ul.products li.product .woocommerce-loop-product__title a { display: flex; align-items: flex-start; min-height: 44px; }
/* Shoptimizer widens ul.products past its column for gutters; the grid's own gap replaces that. */
body.woopify ul.products { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Sorting row: result count left, sort control right, one line at desktop. */
body.woopify .shoptimizer-sorting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 0 var(--space-lg); }
body.woopify .shoptimizer-sorting .woocommerce-result-count { order: 1; float: none; margin: 0; line-height: 1.4; }
body.woopify .shoptimizer-sorting .woocommerce-ordering { order: 2; float: none; margin: 0; }
body.woopify .shoptimizer-sorting .woocommerce-notices-wrapper:empty { display: none; }
@media (max-width: 767px) {
  body.woopify .shoptimizer-sorting { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
}
/* After the grid: pagination only, centred (the sort control and count already sit above the grid). */
body.woopify .shoptimizer-sorting.sorting-end { justify-content: center; margin: var(--space-xl) 0 0; }
body.woopify .shoptimizer-sorting.sorting-end :is(.woocommerce-ordering, .woocommerce-result-count) { display: none; }
body.woopify .shoptimizer-sorting.sorting-end nav.woocommerce-pagination { margin: 0; float: none; }
body.woopify nav.woocommerce-pagination ul li span.current { color: var(--color-bg) !important; background: var(--color-ink) !important; }
body.woopify nav.woocommerce-pagination ul li a { color: var(--color-ink) !important; text-decoration: none; }
/* Card spacing: rows breathe; the 44px title link only at phone. */
body.woopify ul.products { row-gap: 48px; }
@media (min-width: 1025px) { body.woopify ul.products li.product .woocommerce-loop-product__title a { min-height: 0; } }
body.woopify .shoptimizer-sorting .woocommerce-result-count { white-space: nowrap; }
@media (min-width: 768px) { body.woopify .shoptimizer-sorting .woocommerce-ordering select { width: auto; min-width: 220px; } }
/* WooCommerce archives (shop, search, category URLs): no sidebar, so the content column is full width and
 * cleared (Shoptimizer floated it, and the footer rose under the grid); the archive title shows as the h1. */
body.woopify:is(.woocommerce-shop, .search, .tax-product_cat, .tax-product_tag, .post-type-archive-product) .content-area { float: none !important; width: 100% !important; margin: 0 !important; }
body.woopify .site-content .col-full::after { content: ""; display: table; clear: both; }
body.woopify .woocommerce-products-header { display: block !important; height: auto !important; margin: var(--space-lg) 0 var(--space-md); }
body.woopify .woocommerce-products-header__title.page-title { display: block !important; font: var(--fw-heading) var(--fs-h1)/var(--lh-h1) var(--font-heading); color: var(--color-ink); margin: 0; }

/* 2026-10-09 visual QA (Gabriel): Shoptimizer paints a white card with a shadow behind a product on hover/focus
   (li.product::before) and shrinks the photo; the title then sits flush against that card's edge. The design system
   says cards have no shadow, so that hover card is off; hover shows on the title instead. */
body.woopify ul.products li.product::before { display: none !important; }
body.woopify ul.products li.product:hover :is(img, .woocommerce-image__wrapper) { transform: none !important; }
body.woopify ul.products li.product:hover .woocommerce-loop-product__title a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Phone: the title no longer reserves a 44px line (the photo above is the same link and the big target), so the
   price sits right under the name. */
body.woopify ul.products li.product .woocommerce-loop-product__title a { min-height: 0; }
/* Sort control: the arrow sits 16px in from the right edge, with room for it. */
body.woopify .woocommerce-ordering select { padding-right: 48px !important; background-position: right 16px center !important; background-size: 12px auto !important; background-repeat: no-repeat !important; }
/* WooCommerce's own archives (/shop/, /product-category/…, product search) outside the collection template: no grey
   category header band, and the result count in the palette. */
body.woopify .woocommerce-products-header { background: transparent !important; padding-left: 0; padding-right: 0; }
body.woopify .woocommerce-result-count { color: var(--color-ink-muted) !important; border-color: var(--color-border) !important; }
/* Category archives print the [intro] slot inside WooCommerce's header, which is already inside the page container:
   no second gutter or section padding there; Shoptimizer's category banner image is not part of the collection layout. */
body.woopify .woocommerce-products-header .woopify-section--intro { padding: 0 0 var(--space-md); }
body.woopify .woocommerce-products-header .woopify-container { padding: 0; max-width: none; }
body.woopify .woocommerce-products-header .cg-cat-image { display: none; }

/* 2026-10-09 mobile QA (independent re-check of 5e): design-system.md Components > Tap targets ("at phone every
   link, button and control is at least 44px tall, padding, not larger type"). The card title link gets a 44px hit
   area from padding that negative margins take back, so nothing on the card moves (Gabriel 2026-10-09: no 44px
   line under the title). The title box gets the same padding so its clip (2-line clamp) does not cut the hit area. */
@media (max-width: 1024px) {
  body.woopify ul.products li.product .woocommerce-loop-product__title { padding: 12px 0; margin: -12px 0 calc(var(--space-xs) - 12px); position: relative; z-index: 1; }
  body.woopify ul.products li.product .woocommerce-loop-product__title a { display: block; padding: 12px 0; margin: -12px 0; }
}
/* Result count on WooCommerce's own archives (/shop/, product search): 12px from the parent; body-sm as on the
   collection pages (smallest role at phone is label, 13px). */
body.woopify .shoptimizer-sorting .woocommerce-result-count, body.woopify p.woocommerce-result-count { font-size: var(--fs-body-sm); }
/* The collection [intro] carries the section marker (so a QA count sees the rendered slot); it keeps its own spacing. */
body.woopify .woopify-collection__intro.woopify-section { padding: 0; }