/*
Theme Name: AIT Minerals
Theme URI: https://aitminerals.com
Description: Thème de la boutique AIT Minerals. Charte de la section 7 du brief : palette minérale, Outfit et Figtree, chiffres tabulaires, rayons généreux, ombres larges et basses. Aucune couleur hors palette.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: ait-minerals
Tags: full-site-editing, block-theme, e-commerce
*/

/*
 * Les tokens vivent dans theme.json. Cette feuille ne porte que ce que
 * theme.json ne sait pas exprimer.
 */

/* Chiffres alignés partout où il y a des colonnes de prix, de quantités
   ou de références. Exigence non négociable du brief. */
.wp-block-table td,
.wp-block-table th,
.woocommerce-Price-amount,
.quantity input,
.sku,
.order-number,
.woocommerce-orders-table td,
.woocommerce-table--order-details td {
	font-variant-numeric: tabular-nums;
}

.sku,
.woocommerce-product-attributes-item--sku td {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.01em;
}

/* Formes : rayons généreux, ombres larges et basses en opacité. */
.wp-block-image img,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
	border-radius: 24px;
}

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--surface);
	border-radius: 28px;
	padding: 13px;
	box-shadow: 0 20px 44px -32px rgba(62, 44, 27, 0.42);
}

.woocommerce ul.products li.product img {
	border-radius: 18px;
	/* height: auto, sinon l'attribut height= du HTML prime sur aspect-ratio. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Familles en 4:3, produits en 1:1. */
.woocommerce .product-category img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 19px;
}

.wp-site-blocks > footer {
	border-radius: 48px 48px 0 0;
	background: var(--wp--preset--color--alt);
}

/* Boutons WooCommerce alignés sur les boutons du thème. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 999px;
	padding: 13px 24px;
	font-weight: 600;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
	background: linear-gradient(180deg, #3E2C1B 0%, #2B1E13 100%);
	color: var(--wp--preset--color--page);
}

/* Le prix courant reste lisible : encre pleine, jamais un brun décoratif. */
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 600;
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* Aucune légende de remplacement ne doit survivre au chargement d'une photo :
   les emplacements d'image de la maquette ne sont pas repris ici. */

/* Accessibilité : la cible de focus reste visible sur tous les fonds clairs. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Aucun défilement horizontal de page : les tableaux larges défilent chez eux. */
.wp-block-table {
	overflow-x: auto;
}