/**
 * Styles WooCommerce's own default markup for the shop, category,
 * single-product and My Account pages — classic (non-block) templates
 * rendered as-is by Storefront/WooCommerce, no template overrides.
 * These class names are WooCommerce's own public/documented output,
 * unlike the Cart/Checkout block internals (see woocommerce-blocks.css).
 */

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-accent-soft);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
}

.woocommerce-error {
	border-color: var(--color-ink);
}

/* Shop / category toolbar */
.woocommerce-result-count,
.woocommerce-ordering {
	color: var(--color-neutral);
}

/* Product grid — same treatment as the homepage new-arrivals grid.
   0.2.0-dev.14: breakpoints re-tuned to this round's own explicit spec —
   mobile 2 (360-767px, kept at 2 rather than dropping to 1: card width at
   360px is still ~155px, enough for a product photo/name/price to stay
   readable — re-verify once real product names/prices exist), tablette
   768-1023px (2 up to 899px, 3 from 900px — "2 ou 3 selon l'espace réel"),
   intermédiaire 1024-1279px = 3, grand écran >=1280px = 4. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(2, 1fr);
}

/* 0.2.0-dev.26 — real, previously-undiscovered Storefront collision, found
   live via the Browser tool this round: Storefront's own compiled CSS ships
   `ul.products::before, ul.products::after { content:""; display:table }`
   — a legacy clearfix, completely inert for a normal `display:block` list
   (which is what `ul.products` still is on any page that ISN'T running this
   theme's own grid). Once THIS theme turns `ul.products` into
   `display:grid`, that `::before` pseudo-element still generates a real box
   (content:"" is a real, non-empty string) — and a generated box inside a
   grid container becomes an ACTUAL GRID ITEM, occupying the grid's first
   auto-placement cell. Confirmed live: `getComputedStyle(grid, '::before')
   .content` returned a real empty string (not 'none'), and every real
   product `<li>` was shifted one cell later than it should be — on a 3-item
   row this left column 1 empty and pushed the 3rd item onto its own row
   alone, exactly matching this round's own "carte isolée avec une largeur
   différente" report. `content: none` removes the generated box entirely
   (the correct way to cancel inherited/matched `content`, not
   `display:none`, which would still generate an empty box on some engines). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

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

@media (min-width: 1280px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 430px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: var(--space-4);
	}
}

/* 0.2.0-dev.23: the 0.2.0-dev.22 fix (width:100% on .woocommerce ul.products
   li.product, in shop.css) only ever beat Storefront's MAIN compiled
   style.css (`ul.products li.product{width:45.45%;float:left;margin-right:
   9.09%}`, specificity 0,0,2) — it never checked Storefront's SEPARATE
   `assets/css/woocommerce/woocommerce.css` file, confirmed live this round
   to also ship its own column-width rules gated by real body classes this
   site actually carries (`storefront-full-width-content`, applied whenever
   the sidebar layout is active): `.storefront-full-width-content .site-main
   ul.products.columns-3 li.product{width:30.43%;float:left;margin-right:
   4.35%}` — specificity (0,5,2), genuinely HIGHER than the dev.22 fix's
   (0,3,2), so it silently kept winning regardless of source order. This is
   also a FAMILY of near-identical rules (one per real `columns-1`..`columns-6`
   value WooCommerce can apply), not a single selector to out-specificity
   cleanly — matching every other "grep for every rule matching this pattern"
   Storefront collision already documented in this project's history.
   `!important` used here deliberately (this project's established, narrow
   exception pattern) rather than chasing every columns-N variant. Moved
   from shop.css (shop-archive-only) to THIS sitewide file so single-product
   related/upsell product grids — which never enqueue shop.css at all — get
   the same fix. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	clear: none !important;
	float: none !important;
	margin: 0 !important;
	max-width: none !important;
	text-align: left;
	width: auto !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 1rem;
}

.woocommerce ul.products li.product .price {
	color: var(--color-ink);
	font-family: var(--font-body);
}

.woocommerce ul.products li.product .star-rating {
	color: var(--color-gold);
}

/* Pagination */
.woocommerce-pagination .page-numbers li .page-numbers {
	border-radius: var(--radius-sm);
	color: var(--color-ink);
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
	background-color: var(--color-gold);
	color: var(--color-ink);
}

/* Single product */
.single-product div.product .price {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--color-ink);
}

.single-product div.product p.stock {
	color: var(--color-neutral);
}

.single-product div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active,
.single-product div.product .woocommerce-tabs ul.tabs li:hover {
	border-bottom-color: var(--color-gold);
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
	color: var(--color-ink);
}

.related.products,
.upsells.products {
	border-top: 1px solid var(--color-accent-soft);
	margin-top: var(--space-16);
	padding-top: var(--space-16);
}

.related.products > h2,
.upsells.products > h2 {
	font-family: var(--font-heading);
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--color-accent-soft);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--color-accent-soft);
}

.woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
	background-color: var(--color-bg);
	color: var(--color-ink);
	display: block;
	padding: var(--space-3) var(--space-4);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	background-color: var(--color-bg-alt);
	font-weight: 600;
}

.woocommerce-form-login,
.woocommerce-form-register {
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

table.shop_table {
	border-collapse: collapse;
	width: 100%;
}

table.shop_table th {
	background-color: var(--color-bg-alt);
	color: var(--color-ink);
	font-family: var(--font-heading);
	text-align: left;
}

table.shop_table th,
table.shop_table td {
	border: 1px solid var(--color-accent-soft);
	padding: var(--space-3);
}

mark.order-status {
	background: none;
	color: var(--color-ink);
	font-weight: 600;
}

/* 0.2.0-dev.50 — discreet CGV/confidentialité reminder inserted by
   assets/js/checkout-trust-note.js just above the block checkout's own
   submit button. Deliberately small/muted (client's own "ne pas alourdir
   le checkout" ask) — same visual weight as the footer's legal links
   rather than a boxed banner, so it reads as a quiet reassurance, not a
   consent gate. */
.cristaline-checkout-trust-note {
	color: color-mix(in srgb, var(--color-neutral) 40%, var(--color-ink) 60%);
	font-family: var(--font-body);
	font-size: .8rem;
	line-height: 1.5;
	margin: 0 0 var(--space-4);
}

.cristaline-checkout-trust-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.cristaline-checkout-trust-note a:hover,
.cristaline-checkout-trust-note a:focus-visible {
	color: var(--color-gold-hover);
}