/*
 * Responsive product grid: 4 columns desktop (>1024px), 3 columns tablet
 * (768-1024px), 1 column mobile (<768px). Overrides WooCommerce/Storefront's
 * fixed float-based columns-N layout with CSS Grid so it actually responds
 * to viewport width.
 */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2rem 1.5rem !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* True 1:1 product images, full width of their own grid cell. Measured
   live: the current source images already happen to be pre-cropped
   324x324 squares, so this was already rendering as a coincidental square
   via plain height:auto scaling — with the browser's default
   object-fit:fill, meaning any future product photo that ISN'T already a
   perfect square would stretch/squish to fit rather than crop cleanly.
   aspect-ratio:1/1 makes the box itself always square regardless of the
   source image's real proportions; object-fit:cover crops instead of
   distorting whatever doesn't already match. */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Product card titles: Storefront/WooCommerce default is font-weight:400
   (regular) — measured live before this fix at exactly that, inconsistent
   with the bold product-name treatment already used elsewhere (PDP
   cross-sell cards, .davimo-cart-drawer__crosssell-name — note that rule
   is actually font-weight:800 there, not 700; using --davimo-text-h2-weight
   (700) here per this task's explicit target, not literally matching that
   800 value). */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-weight: var(--davimo-text-h2-weight);
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr !important;
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

/* Full-width breakout for the shop page's main content column. Storefront
   wraps everything in #content > .col-full, a centered max-width:~1064px
   block (measured live: 1148px rendered width incl. padding, against a
   2133px viewport — nowhere near full-bleed) — the exact same constraint
   the PDP's buy box already breaks out of (see .davimo-pdp__buybox in
   product-page.css). Same technique here: 100vw + negative margins pull
   it to the true viewport edges, clamp() padding keeps content off the
   physical edge. Scoped to the shop page specifically (body.woocommerce-
   shop), not #content globally — cart/checkout/my-account reuse the same
   .col-full wrapper and aren't part of this request. */
body.woocommerce-shop #content > .col-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: clamp(1rem, 4vw, 3rem);
	box-sizing: border-box;
}

/* Headline top spacing + headline-to-intro gap.
   Measured live before this fix: breadcrumb-to-H1 gap 59.3px (entirely
   the breadcrumb wrapper's own margin-bottom — moot now that the
   breadcrumb is removed below), H1-to-intro gap 103.94px (95.95px from
   WooCommerce's own .woocommerce-products-header{padding-bottom}, the
   rest from this rule's old margin-top). Both replaced with a single,
   deliberate value from the spacing scale (cart-drawer.css :root) rather
   than the two overlapping/uncoordinated sources that produced 104px.
   Scoped to body.woocommerce-shop — .woocommerce-products-header is also
   used on category/tag archives, which keep Storefront's defaults. */
body.woocommerce-shop .woocommerce-products-header {
	margin-top: var(--davimo-space-xl);
	padding-bottom: 0;
}

/* H1 weight: Storefront's own default is font-weight:300 (a light
   display style), never overridden — measured live before this fix at
   exactly that. font-size is ALSO pinned to --davimo-text-h1-size here,
   even though it already happened to equal 2.618rem (that's where the
   token's own value came from) — declaring it explicitly means the
   headline stays governed by the token even if Storefront's own default
   ever changes, instead of silently drifting. */
body.woocommerce-shop .woocommerce-products-header__title {
	font-size: var(--davimo-text-h1-size);
	font-weight: var(--davimo-text-h1-weight);
	line-height: var(--davimo-text-h1-line-height);
}

/* Shop page intro line, directly beneath the "Stop Guessing, Start
   Healing" H1 (see Davimo_Shop_Grid::render_shop_intro()). Centered to
   match the H1's own centered alignment — was left-aligned at a fixed
   640px box sitting under a full-width centered H1, reading as
   misaligned. font-size on the --davimo-text-body token (1rem) rather
   than its old private 1.05rem.
   max-width widened from 640px to 700px (still the requested 600-700px
   readable range) specifically to fix a real wrapping bug: measured live,
   the sentence's natural unwrapped width is 680px — at 640px it wrapped
   to a 639px first line + an orphaned ~38px second line ("each."). 700px
   comfortably fits the whole sentence on one clean line instead. */
.davimo-shop__intro {
	color: var(--davimo-text-secondary);
	font-size: var(--davimo-text-body-size);
	font-weight: var(--davimo-text-body-weight);
	line-height: var(--davimo-text-body-line-height);
	max-width: 700px;
	text-align: center;
	margin: var(--davimo-space-sm) auto var(--davimo-space-md);
}

/* Trust signal strip near the top of the shop page — reuses the same
   badge/reassurance-line components as the PDP info column
   (.davimo-pdp__trust-badges / .davimo-pdp__trust from product-page.css,
   also enqueued on the shop page), laid out side by side in a bordered
   band so it reads as one distinct strip rather than two stray lines. */

.davimo-shop__trust-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	background: var(--davimo-offwhite);
	border-radius: var(--davimo-radius-button);
	padding: 0.85rem 1.5rem;
	margin: 0 0 2rem;
}

.davimo-shop__trust-strip .davimo-pdp__trust-badges,
.davimo-shop__trust-strip .davimo-pdp__trust {
	margin: 0;
}

/* "Want a Personalized Routine?" section replicated on the shop page
   (Davimo_Shop_Grid::render_shop_personalized_routine() calls the same
   Davimo_Product_Page::render_personalized_routine() the PDP uses, so
   the .davimo-pdp__personalized* rules in product-page.css style it
   identically in both places) — just spaced off from the product grid
   above/pagination below. */

/* Top margin was already a literal 3rem (48px) — matches
   --davimo-space-xl exactly, the same value every other section-to-
   section gap on the PDP was just standardized to, so this already
   agreed with the target; tokenized here for the same reason (governed
   by the scale, not a coincidentally-matching literal number). Bottom
   margin stays --davimo-space-lg (32px, was already this via the
   literal 2rem) — that's trailing space before the page ends, not a
   section-to-section gap, so it's out of this audit's scope. */
.davimo-shop__personalized {
	margin: var(--davimo-space-xl) 0 var(--davimo-space-lg);
}