/*
 * Omni Prime Shop — boutique.
 *
 * Chargée seulement quand WooCommerce est actif. Elle habille à la fois les
 * gabarits surchargés par le thème et ceux, majoritaires, laissés à
 * WooCommerce — d'où les sélecteurs sur ses classes natives
 * (`.woocommerce-…`, `.cart_totals`, `.shop_table`), qui sont son contrat
 * public et ne changent pas d'une version mineure à l'autre.
 *
 * Plan :
 *   1. Barre d'outils et filtres
 *   2. Grille et carte produit
 *   3. Vue en liste
 *   4. Fiche produit
 *   5. Onglets, avis
 *   6. Panier, mini-panier, commande
 *   7. Compte client
 *   8. Comparateur, aperçu rapide
 *   9. Messages WooCommerce
 *  10. Responsive
 */

/* =====================================================================
 * 1. Barre d'outils et filtres
 *
 * Aplat, pas d'encadré, séparé du contenu par un filet — c'est la manière
 * d'Utenzo. Un panneau de filtres dans une carte ombrée appartient au
 * vocabulaire du site vitrine.
 * ================================================================== */

.op-shoptoolbar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 16px;
	padding: 0 0 18px; margin-bottom: 26px;
	border-bottom: 1px solid var(--op-line);
}
.op-shoptoolbar__left, .op-shoptoolbar__right { display: flex; align-items: center; gap: 16px; }
.op-shoptoolbar__count, .woocommerce-result-count {
	margin: 0; font-size: .9rem; color: var(--op-ink);
	display: inline-flex; align-items: center; gap: 8px;
}

.woocommerce-ordering { display: flex; align-items: center; gap: 10px; }
.woocommerce-ordering::before {
	content: attr(data-label);
	font-size: .88rem; color: var(--op-ink-soft);
	white-space: nowrap;
}
.woocommerce-ordering select {
	padding: 10px 38px 10px 14px;
	border-radius: var(--op-radius);
	border: 1px solid var(--op-line-strong);
	font-size: .88rem; font-weight: 500;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	appearance: none; -webkit-appearance: none;
}

.op-viewtoggle { display: flex; gap: 4px; }
.op-viewtoggle__btn {
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: var(--op-radius);
	color: var(--op-ink-faint);
	transition: color .2s var(--op-ease), background .2s var(--op-ease);
}
.op-viewtoggle__btn:hover { color: var(--op-ink); }
.op-viewtoggle__btn.is-active { color: var(--op-green); background: var(--op-green-soft); }

.op-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.op-chips__label { font-size: .84rem; color: var(--op-ink-faint); margin-right: 4px; }
.op-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 12px; border-radius: var(--op-radius);
	background: var(--op-green-soft); color: var(--op-green);
	font-size: .83rem; font-weight: 600;
	transition: background .2s var(--op-ease), color .2s var(--op-ease);
}
.op-chip:hover { background: var(--op-green); color: #fff; }
.op-chip--clear { background: none; color: var(--op-ink-faint); text-decoration: underline; }
.op-chip--clear:hover { background: none; color: var(--op-sale); }

.op-filters { display: grid; gap: 4px; }.op-filters { display: grid; gap: 4px; }
.op-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.op-filters__title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; margin: 0; }
/* Le bouton de fermeture n'a de sens qu'en panneau coulissant. */
.op-filters__close { display: none; }
.op-drawer .op-filters__close, .op-filters-dropdown .op-filters__close { display: grid; }

.op-filter {
	border-bottom: 1px solid var(--op-line);
	background: none;
	border-radius: 0;
}
.op-filter:last-of-type { border-bottom: 0; }
.op-filter__head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 18px 0; cursor: pointer;
	font-weight: 700; font-size: 1.05rem; color: var(--op-ink);
	list-style: none;
}
.op-filter__head::-webkit-details-marker { display: none; }
.op-filter__head svg { transition: transform .25s var(--op-ease); color: var(--op-ink-faint); }
.op-filter[open] .op-filter__head svg { transform: rotate(180deg); }
.op-filter__body { padding: 0 0 20px; }
.op-filter__list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.op-filter__list--swatch { display: flex; flex-wrap: wrap; gap: 10px; max-height: none; }

.op-pricerange { padding-top: 6px; }
.op-pricerange__track { position: relative; height: 30px; }
.op-pricerange__track::before {
	content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 4px;
	border-radius: 100px; background: var(--op-bg-soft);
}
.op-pricerange__fill {
	position: absolute; top: 13px; height: 4px; border-radius: 100px;
	background: var(--op-grad-brand);
}
/* Les deux curseurs se superposent : seul le pouce doit rester cliquable,
   sinon celui du dessus capte tous les clics et le minimum devient
   impossible à saisir. */
.op-pricerange__track input[type=range] {
	position: absolute; left: 0; top: 0; width: 100%; height: 30px;
	margin: 0; padding: 0; background: none; appearance: none; -webkit-appearance: none;
	pointer-events: none;
}
.op-pricerange__track input[type=range]:focus { outline: none; box-shadow: none; }
.op-pricerange__track input[type=range]::-webkit-slider-thumb {
	appearance: none; -webkit-appearance: none; pointer-events: auto;
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 3px solid var(--op-green);
	box-shadow: var(--op-shadow-sm); cursor: grab;
}
.op-pricerange__track input[type=range]::-moz-range-thumb {
	pointer-events: auto;
	width: 20px; height: 20px; border-radius: 50%;
	background: #fff; border: 3px solid var(--op-green);
	box-shadow: var(--op-shadow-sm); cursor: grab;
}
.op-pricerange__values {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 10px; font-size: .88rem; font-weight: 700;
}
.op-pricerange__values .amount { color: var(--op-green-600); }

.op-filters__foot { margin-top: 14px; display: grid; gap: 10px; justify-items: center; }
/* Avec JavaScript, les filtres s'appliquent à la volée : le bouton devient
   redondant. Il reste rendu pour le cas où le script ne se charge pas. */
.op-js .op-filters__apply { display: none; }

.op-filters-dropdown {
	padding: 22px; margin-bottom: 24px;
	border-radius: var(--op-radius);
	background: var(--op-glass); border: 1px solid var(--op-glass-border);
	box-shadow: var(--op-shadow-sm);
}
.op-filters-dropdown[hidden] { display: none; }
.op-filters-dropdown .op-filters { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; }
.op-filters-dropdown .op-filters__head { grid-column: 1 / -1; }
.op-filters-dropdown .op-filters__foot { grid-column: 1 / -1; }
.op-drawer--filters .op-drawer__panel { padding: 24px; overflow-y: auto; }

/* =====================================================================
 * 2. Grille et carte produit
 *
 * La carte d'Utenzo n'est pas une carte : l'image est posée sur un aplat
 * clair, le texte vit directement sur le fond de page. Ni bordure, ni ombre,
 * ni fond blanc. Les actions rapides apparaissent au survol, au-dessus de
 * l'image.
 *
 * Le clearfix de WooCommerce — `ul.products::before { content:" " }` —
 * devient un ENFANT DE GRILLE dès que la liste passe en CSS Grid, et occupe
 * la première case. Le symptôme est une grille dont le premier emplacement
 * reste vide, tous les produits décalés d'un cran. La règle qui le neutralise
 * doit garder la spécificité du sélecteur d'origine.
 * ================================================================== */

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

.op-products { position: relative; }
.op-products__track {
	display: grid;
	grid-template-columns: repeat(var(--op-cols, 4), minmax(0, 1fr));
	gap: 34px 30px;
	margin: 0; padding: 0;
}
.op-products--carousel .op-products__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	gap: 30px; padding-bottom: 6px;
	scrollbar-width: none;
}
.op-products--carousel .op-products__track::-webkit-scrollbar { display: none; }
.op-products--carousel .op-products__track > li {
	flex: 0 0 calc((100% - (var(--op-cols) - 1) * 30px) / var(--op-cols));
	scroll-snap-align: start;
}
.op-carousel__nav {
	position: absolute; top: 34%; z-index: 4;
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	background: #fff; color: var(--op-ink);
	border: 1px solid var(--op-line);
	transition: background .2s var(--op-ease), color .2s var(--op-ease), opacity .2s;
}
.op-carousel__nav:hover { background: var(--op-green); border-color: var(--op-green); color: #fff; }
.op-carousel__nav--prev { left: -16px; }
.op-carousel__nav--next { right: -16px; }
.op-carousel__nav[disabled] { opacity: .25; pointer-events: none; }

/*
 * Le filet autour de la carte. `--op-card-border` vaut `transparent` quand la
 * bordure est décochée au Customizer : la carte garde alors exactement la même
 * hauteur, et la grille ne bouge pas d'un pixel quand on active le réglage.
 */
.op-product {
	position: relative; display: flex; flex-direction: column;
	background: none; box-shadow: none; overflow: hidden;
	border: 1px solid var(--op-card-border);
	border-radius: var(--op-radius);
	transition: border-color .25s var(--op-ease);
}
.op-product:hover { transform: none; box-shadow: none; border-color: var(--op-green); }

/* L'image remplit le haut de la carte : son arrondi suit celui du cadre, sans
   le doubler. */
.op-product__media { border-radius: calc(var(--op-radius) - 1px) calc(var(--op-radius) - 1px) 0 0; }

.op-product__media {
	position: relative; overflow: hidden;
	background: var(--op-bg-soft);
	border-radius: var(--op-radius);
}
/*
 * `line-height: 0` sur le LIEN, pas sur le conteneur : la ligne de base de
 * l'image laisse sinon un liseré du fond sous elle. Posé sur le conteneur, il
 * réduisait aussi les badges et les boutons d'action à une taille illisible —
 * ils en héritaient.
 */
.op-product__link { display: block; position: relative; line-height: 0; font-size: 0; }
.op-product__img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .4s var(--op-ease), transform .6s var(--op-ease); }
.op-product__img--hover { position: absolute; inset: 0; opacity: 0; }
.op-product:hover .op-product__img--hover { opacity: 1; }
.op-product:hover .op-product__img { transform: scale(1.04); }

.op-product__badges { position: absolute; top: 12px; left: 12px; display: grid; gap: 6px; justify-items: start; z-index: 2; }
.op-badge {
	padding: 5px 11px; border-radius: 100px;
	font-size: .72rem; font-weight: 700; letter-spacing: .02em;
	color: #fff;
}
.op-badge--sale { background: var(--op-sale); }
.op-badge--new { background: var(--op-green); }
.op-badge--low { background: var(--op-orange); }
.op-badge--oos { background: var(--op-ink-soft); }

.op-product__actions {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	display: grid; gap: 8px;
	opacity: 0; transform: translateX(10px);
	transition: opacity .25s var(--op-ease), transform .25s var(--op-ease);
}
.op-product:hover .op-product__actions,
.op-product:focus-within .op-product__actions { opacity: 1; transform: none; }
.op-action {
	display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: #fff; color: var(--op-ink);
	box-shadow: var(--op-shadow-sm);
	transition: background .2s var(--op-ease), color .2s var(--op-ease);
}
.op-action:hover { background: var(--op-green); color: #fff; }
.op-action.is-active { background: var(--op-green); color: #fff; }
.op-action.is-active svg { fill: currentColor; }
.op-action.is-loading { opacity: .5; pointer-events: none; }

.op-product__cart {
	position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
	opacity: 0; transform: translateY(10px);
	transition: opacity .25s var(--op-ease), transform .25s var(--op-ease);
}
.op-product:hover .op-product__cart,
.op-product:focus-within .op-product__cart { opacity: 1; transform: none; }

/*
 * `woocommerce.css` définit `.woocommerce a.button { background-color:#ebe9eb }`
 * — deux classes ET un élément, donc plus spécifique qu'un sélecteur sur nos
 * seules classes. Sans reprendre sa forme, le bouton reste gris clair sur
 * texte sombre. Visible en premier sur mobile, où il est toujours affiché.
 */
.op-product__cart a.button,
.woocommerce .op-product__cart a.button,
.woocommerce-page .op-product__cart a.button {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; margin: 0; padding: 13px 18px;
	border-radius: var(--op-radius);
	background: var(--op-ink); background-color: var(--op-ink); color: #fff;
	font-weight: 700; font-size: .76rem; line-height: 1.3;
	letter-spacing: .08em; text-transform: uppercase;
	transition: background .25s var(--op-ease);
}
.op-product__cart a.button:hover,
.woocommerce .op-product__cart a.button:hover { background: var(--op-green); color: #fff; }
.op-product__cart .added_to_cart { display: none; }
.op-product__cart .loading { opacity: .7; }

.op-product__body { padding: 14px 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.op-product__cat { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--op-ink-faint); }
.op-product__cat:hover { color: var(--op-green); }
/* Titre en graisse normale : chez Utenzo, c'est le PRIX qui est gras. */
.op-product__title { font-size: 1rem; font-weight: 500; margin: 0; line-height: 1.45; letter-spacing: 0; }
.op-product__title a:hover { color: var(--op-green); }
.op-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }
/*
 * WooCommerce rend toujours le prix barré AVANT le prix courant. Utenzo les
 * affiche dans l'autre sens : le prix à payer d'abord, l'ancien ensuite, en
 * plus petit. `order` suffit — réécrire le HTML demanderait de surcharger
 * `wc_get_price_html()`, qui sert aussi au panier et aux e-mails.
 */
.op-product__price,
.woocommerce ul.products li.product .op-product__price {
	display: inline-flex; align-items: baseline; gap: 8px;
	font-weight: 800; font-size: 1.15rem; color: var(--op-ink);
}
.op-product__price del { order: 2; color: var(--op-ink-faint); font-weight: 400; font-size: .8em; text-decoration: line-through; }
.op-product__price ins { order: 1; text-decoration: none; color: var(--op-ink); }
.op-product__price .screen-reader-text { display: none; }
.op-product__sold { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--op-orange); font-weight: 600; }

.op-rating { display: flex; align-items: center; gap: 7px; order: 3; }
.op-rating__stars { position: relative; display: inline-flex; color: var(--op-line-strong); }
.op-rating__fill { position: absolute; top: 0; left: 0; display: inline-flex; overflow: hidden; color: var(--op-star); white-space: nowrap; }
.op-rating__fill svg { fill: currentColor; }
.op-rating__count { font-size: .8rem; color: var(--op-ink-faint); }

/* L'ordre d'Utenzo : titre, prix, étoiles. */
.op-product__body .op-product__title { order: 1; }
.op-product__body .op-product__cat { order: 0; }
.op-product__body .op-product__foot { order: 2; }

/* =====================================================================
 * 3. Vue en liste
 * ================================================================== *//* =====================================================================
 * 3. Vue en liste
 * ================================================================== */

.op-shop-view-list .op-products--shop { grid-template-columns: 1fr; gap: 18px; }
.op-shop-view-list .op-product { flex-direction: row; }
.op-shop-view-list .op-product__media { flex: 0 0 280px; border-radius: calc(var(--op-radius) - 1px) 0 0 calc(var(--op-radius) - 1px); }
.op-shop-view-list .op-product__img { aspect-ratio: 4 / 3; height: 100%; }
.op-shop-view-list .op-product__body { padding: 26px 28px; }
.op-shop-view-list .op-product__title { font-size: 1.2rem; }
/* En liste, l'ajout au panier ne doit plus attendre le survol : la carte est
   assez large pour l'afficher en permanence. */
.op-shop-view-list .op-product__cart { position: static; opacity: 1; transform: none; margin-top: 12px; max-width: 240px; }
.op-shop-view-list .op-product__cart .button { background: var(--op-grad-brand); }
.op-shop-view-list .op-product__actions { opacity: 1; transform: none; }

/* =====================================================================
 * 4. Fiche produit
 * ================================================================== */

/*
 * La fiche produit : galerie et colonne d'achat sur la PREMIÈRE ligne, tout le
 * reste sur les suivantes.
 *
 * Les lignes sont assignées EXPLICITEMENT, et ce n'est pas de la précaution
 * gratuite. En placement automatique, il suffit qu'une extension insère un
 * élément dans `div.product` — un bandeau de notices, un widget de traduction,
 * un bouton de liste de souhaits tiers — pour que tout se décale d'une case :
 * la colonne d'achat passe en ligne 2, les onglets remontent, et la colonne
 * collante se met à chevaucher la description. Avec des lignes nommées, un
 * enfant inattendu atterrit en ligne 3 et ne dérange rien.
 */
.single-product div.product {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	grid-template-rows: auto;
	gap: 52px;
	align-items: start;
	padding-block: 44px;
}
.single-product div.product > .woocommerce-product-gallery { grid-row: 1; grid-column: 1; position: relative; }
.single-product div.product > .summary { grid-row: 1; grid-column: 2; }
.op-single-gallery-wide div.product { grid-template-columns: 1fr; }
.op-single-gallery-wide div.product > .woocommerce-product-gallery,
.op-single-gallery-wide div.product > .summary { grid-column: 1; }
.op-single-gallery-wide div.product > .summary { grid-row: 2; }

/*
 * La colonne collante.
 *
 * `--op-header-h` est mesurée à l'exécution par assets/js/theme.js : l'en-tête
 * fait trois bandes et sa hauteur dépend de ce qui y est activé. Une valeur
 * écrite en dur laissait la colonne se caler SOUS l'en-tête, dont les premières
 * lignes disparaissaient.
 *
 * `max-height` + `overflow-y` sont la vraie protection : une colonne plus haute
 * que l'écran ne peut pas défiler une fois collée, son bas devient
 * inatteignable, et elle donne l'impression de recouvrir le contenu qui passe
 * dessous. Au-delà de la hauteur utile, elle défile donc pour son propre compte.
 */
.op-single-sticky div.product > .summary {
	position: sticky;
	top: calc(var(--op-header-h) + 24px);
	max-height: calc(100vh - var(--op-header-h) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* La barre de défilement interne ne doit pas sauter à l'œil. */
	scrollbar-width: thin;
}
/* Sans assez de course, le collant n'apporte rien : theme.js le retire. */
.op-single-sticky div.product > .summary.op-nosticky {
	position: static; max-height: none; overflow: visible;
}

/* Le badge de promotion, posé sur la galerie et non à côté d'elle. */
.single-product div.product > .onsale {
	position: absolute; z-index: 5; top: 0; left: 0;
	width: auto; height: auto; min-height: 0; line-height: 1.4;
	margin: 0; padding: 6px 13px; border-radius: 100px;
	font-size: .78rem; font-weight: 800;
	background: var(--op-sale); color: #fff;
	box-shadow: var(--op-shadow-sm);
}
.single-product div.product { position: relative; }

.woocommerce-product-gallery__wrapper { border-radius: var(--op-radius); overflow: hidden; background: var(--op-bg-soft); }
.woocommerce-product-gallery__image img { width: 100%; }
.woocommerce-product-gallery__trigger {
	position: absolute; top: 16px; right: 16px; z-index: 5;
	display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,.95); color: var(--op-ink);
	box-shadow: var(--op-shadow-sm); font-size: 0;
}
.woocommerce-product-gallery__trigger::before {
	content: ''; width: 18px; height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; padding: 0; }
.flex-control-thumbs li { list-style: none; }
.flex-control-thumbs img {
	border-radius: var(--op-radius-sm); cursor: pointer;
	opacity: .55; border: 2px solid transparent;
	transition: opacity .25s var(--op-ease), border-color .25s var(--op-ease);
}
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; border-color: var(--op-green); }

/* Vignettes verticales, à gauche de l'image. */
.op-single-gallery-left .woocommerce-product-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.op-single-gallery-left .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
.op-single-gallery-left .flex-control-thumbs { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin: 0; align-content: start; }

.single-product .summary { display: flex; flex-direction: column; gap: 16px; }
.single-product .product_title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; }
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 12px; margin: 0; }
/*
 * Même ordre que sur la carte : prix à payer d'abord, ancien prix ensuite.
 *
 * Le sélecteur reprend la forme de celui de WooCommerce
 * (`.woocommerce div.product p.price`, deux classes et deux éléments) : une
 * règle sur `.single-product .price` seule est moins spécifique et perd. Le
 * prix s'affichait alors dans le vert olive `#77a464` de WooCommerce, visible
 * uniquement sur les produits SANS promotion — ceux en solde recevaient la
 * couleur par `ins`, ce qui masquait le problème.
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.single-product .price {
	display: inline-flex; align-items: baseline; gap: 12px;
	font-size: 1.7rem; font-weight: 800; margin: 0; color: var(--op-ink);
}
.single-product .price del { order: 2; color: var(--op-ink-faint); font-weight: 400; font-size: .62em; text-decoration: line-through; }
.single-product .price ins { order: 1; text-decoration: none; color: var(--op-ink); }
.single-product .price .screen-reader-text { display: none; }
.single-product .woocommerce-product-details__short-description { color: var(--op-ink-soft); }
/*
 * `.woocommerce div.product .stock` vaut (0,3,1) chez WooCommerce — `.product`
 * est une CLASSE, pas un élément, et c'est ce qui manquait au compte. Une règle
 * sur `.single-product .stock.in-stock` (0,3,0) perdait d'un point, et la
 * disponibilité s'affichait en olive `#958e09`.
 */
.woocommerce div.product .stock.in-stock,
.single-product .stock.in-stock { color: var(--op-green-600); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock,
.single-product .stock.out-of-stock { color: var(--op-sale); font-weight: 600; }

.op-qty { display: inline-flex; align-items: center; border: 1px solid var(--op-line-strong); border-radius: var(--op-radius); overflow: hidden; background: #fff; }
.op-qty__btn {
	display: grid; place-items: center;
	width: 42px; height: 46px; color: var(--op-ink-soft);
	transition: background .2s var(--op-ease), color .2s var(--op-ease);
}
.op-qty__btn:hover { background: var(--op-bg-soft); color: var(--op-green-600); }
.op-qty .quantity { margin: 0; }
.op-qty__input, .op-qty input[type=number] {
	width: 52px; text-align: center; border: 0; background: none;
	padding: 0; font-weight: 700; border-radius: 0;
	appearance: textfield; -moz-appearance: textfield;
}
.op-qty input::-webkit-outer-spin-button, .op-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.op-qty__input:focus { box-shadow: none; background: none; }

.single-product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
/*
 * Pour un produit variable, WooCommerce place le bouton d'ajout au panier ET
 * le bouton « Acheter maintenant » (ajouté par le thème après le premier via
 * `woocommerce_after_add_to_cart_button`) dans `.woocommerce-variation-add-to-cart`
 * (alias `.variations_button`) — un DIV imbriqué dans `.single_variation_wrap`,
 * lui-même le SEUL enfant direct de `form.cart` à recevoir le `display:flex` et
 * le `gap` ci-dessus. Les deux boutons se retrouvaient donc collés l'un à
 * l'autre, sans le moindre espace, sur un produit à variations. Pour un
 * produit simple, où WooCommerce ne crée pas ce DIV, les deux boutons sont des
 * enfants directs de `form.cart` et profitent déjà du flex/gap parent ; cette
 * règle ne change alors rien.
 */
.single-product form.cart .variations_button {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%;
}
.single-product form.cart .single_add_to_cart_button {
	flex: 1; min-width: 200px;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 16px 30px; border-radius: var(--op-radius); border: 0;
	background: var(--op-green); color: #fff;
	font-weight: 700; font-size: .84rem; cursor: pointer;
	letter-spacing: .08em; text-transform: uppercase;
	transition: background .25s var(--op-ease);
}
.single-product form.cart .single_add_to_cart_button:hover { background: var(--op-green-600); }
/*
 * Même boîte que `.single_add_to_cart_button` (padding 16px/30px, bordure
 * nulle) : `.op-btn` lui donnait par défaut 15px de padding et une bordure de
 * 1px transparente, deux pixels d'écart qui suffisaient à rendre les deux
 * boutons visiblement de hauteurs différentes (48px contre 50px) une fois
 * côte à côte.
 */
.single-product form.cart .op-buy-now {
	flex: 1; min-width: 180px;
	padding: 16px 30px; border: 0;
}

.single-product .variations { width: 100%; margin: 0; }
.single-product .variations tr { display: grid; gap: 6px; margin-bottom: 14px; }
.single-product .variations th { text-align: left; font-size: .86rem; font-weight: 700; padding: 0; }
.single-product .variations td { padding: 0; }
.single-product .reset_variations { font-size: .82rem; color: var(--op-sale); margin-top: 6px; display: inline-block; }
.single-product .woocommerce-variation-price { margin-bottom: 14px; }

.op-single-actions { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 4px; }

.op-accordion { display: grid; gap: 8px; }
.op-accordion__item { border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); overflow: hidden; background: #fff; }
.op-accordion__head {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: .92rem;
	list-style: none;
}
.op-accordion__head::-webkit-details-marker { display: none; }
.op-accordion__head svg:first-child { color: var(--op-green-600); }
.op-accordion__caret { margin-left: auto; color: var(--op-ink-faint); transition: transform .25s var(--op-ease); }
.op-accordion__item[open] .op-accordion__caret { transform: rotate(180deg); }
.op-accordion__body { padding: 0 18px 16px; color: var(--op-ink-soft); font-size: .92rem; }

.op-trust { padding: 18px 20px; border-radius: var(--op-radius-sm); background: var(--op-bg-soft); }
.op-trust__head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .89rem; margin-bottom: 12px; }
.op-trust__head svg { color: var(--op-green-600); }
.op-trust .op-payments__item { background: #fff; color: var(--op-ink-soft); border: 1px solid var(--op-line); }

.op-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.op-share__label { font-size: .85rem; font-weight: 700; color: var(--op-ink-soft); }
.op-share a, .op-share__copy {
	display: grid; place-items: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--op-bg-soft); color: var(--op-ink-soft);
	transition: background .25s var(--op-ease), color .25s var(--op-ease), transform .25s var(--op-ease);
}
.op-share a:hover, .op-share__copy:hover { background: var(--op-grad-brand); color: #fff; transform: translateY(-2px); }

.single-product .product_meta { font-size: .86rem; color: var(--op-ink-faint); display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--op-line); }
.single-product .product_meta a:hover { color: var(--op-green-600); }

/* =====================================================================
 * 5. Onglets, avis, blocs de bas de fiche
 * ================================================================== */

/*
 * Tout ce qui suit la colonne d'achat occupe sa propre ligne, pleine largeur.
 * `z-index` et le fond opaque sont une ceinture : si un jour un élément collant
 * débordait malgré tout, la description resterait lisible au lieu de se
 * retrouver sous des encadrés blancs.
 */
.woocommerce-tabs, .related, .up-sells, .cross-sells {
	grid-column: 1 / -1;
	position: relative;
	z-index: 2;
	background: var(--op-bg);
}
.single-product div.product > .summary { z-index: 1; }
.woocommerce-tabs { grid-row: 2; margin-top: 24px; }
/* Onglets soulignés, pas en pastilles : c'est la forme d'Utenzo. */
.woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 28px; padding: 0;
	border-bottom: 1px solid var(--op-line); width: 100%;
}
.woocommerce-tabs ul.tabs li { list-style: none; }
/* Même remarque de spécificité : WooCommerce cible
   `.woocommerce div.product .woocommerce-tabs ul.tabs li a`. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
	border: 0; background: none; margin: 0; padding: 0; border-radius: 0;
	/* `color` est repris par `border-top-color` quand la bordure n'a pas de
	   couleur propre : sans ce `inherit`, le gris de WooCommerce persiste. */
	color: inherit;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 0 0 14px; border-bottom: 2px solid transparent;
	font-weight: 700; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--op-ink-faint);
	transition: color .2s var(--op-ease), border-color .2s var(--op-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:hover { color: var(--op-ink); }
/* `li.active` est un cran plus spécifique que `li` chez WooCommerce : il faut
   le reprendre tel quel, sinon seul l'onglet actif garde le gris d'origine. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active { background: none; color: inherit; border-color: transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a { color: var(--op-ink); border-bottom-color: var(--op-green); }
/* WooCommerce dessine un trait et deux ombres sous ses onglets. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs .panel { max-width: 76ch; color: var(--op-ink-soft); }
.woocommerce-tabs .panel h2 { font-size: 1.3rem; color: var(--op-ink); }
.woocommerce-tabs .shop_attributes th { width: 200px; font-weight: 700; color: var(--op-ink); }
.woocommerce-tabs .shop_attributes th, .woocommerce-tabs .shop_attributes td { padding: 11px 0; border-bottom: 1px solid var(--op-line); text-align: left; }

#reviews .commentlist { display: grid; gap: 18px; margin: 0 0 32px; padding: 0; }
#reviews .comment_container {
	display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
	padding: 20px 24px; border-radius: var(--op-radius);
	background: var(--op-glass); border: 1px solid var(--op-glass-border);
}
#reviews .comment_container img { border-radius: 50%; }
#reviews .meta { font-size: .84rem; color: var(--op-ink-faint); margin-bottom: 8px; }
#reviews .meta strong { color: var(--op-ink); font-size: .95rem; }
#reviews .star-rating { color: var(--op-star); }
#review_form .comment-form { display: grid; gap: 14px; max-width: 640px; }
#review_form .comment-form-rating { display: flex; align-items: center; gap: 12px; }
#review_form .submit {
	justify-self: start; padding: 15px 30px; border-radius: var(--op-radius); border: 0;
	background: var(--op-green); color: #fff; cursor: pointer;
	font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}

.related, .up-sells, .cross-sells { margin-top: 56px; }
.related > h2, .up-sells > h2, .cross-sells > h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-bottom: 26px; }
.related ul.products, .up-sells ul.products, .cross-sells ul.products {
	display: grid; grid-template-columns: repeat(var(--op-cols, 4), minmax(0, 1fr)); gap: 24px;
}

/* La notation en étoiles native de WooCommerce, réécrite avec nos couleurs. */
.star-rating {
	position: relative; display: inline-block; width: 5.4em; height: 1em;
	font-size: .9em; line-height: 1; overflow: hidden; font-family: star;
	color: var(--op-star);
}
.star-rating::before { content: '\73\73\73\73\73'; color: var(--op-line-strong); position: absolute; left: 0; top: 0; }
.star-rating span { position: absolute; left: 0; top: 0; overflow: hidden; padding-top: 1.5em; }
.star-rating span::before { content: '\53\53\53\53\53'; position: absolute; left: 0; top: 0; }

/* =====================================================================
 * 6. Panier, mini-panier, commande
 * ================================================================== */

.woocommerce-cart-form, .woocommerce-checkout, .woocommerce-account .woocommerce { padding-block: 40px 56px; }

.op-freeship {
	padding: 16px 20px; margin-bottom: 24px;
	border-radius: var(--op-radius-sm);
	background: var(--op-green-soft);
	border: 1px solid var(--op-green);
}
.op-freeship.is-complete { background: var(--op-grad-soft); }
.op-freeship__text { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: .9rem; color: var(--op-green-600); }
.op-freeship__text .amount { font-weight: 800; }

.shop_table {
	border-radius: var(--op-radius); overflow: hidden;
	background: var(--op-glass); border: 1px solid var(--op-glass-border);
}
.shop_table th { padding: 16px 18px; text-align: left; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--op-ink-faint); border-bottom: 1px solid var(--op-line); }
.shop_table td { padding: 18px; border-bottom: 1px solid var(--op-line); vertical-align: middle; }
.shop_table tr:last-child td { border-bottom: 0; }
.shop_table .product-thumbnail img { width: 78px; border-radius: var(--op-radius-sm); }
.shop_table .product-name a { font-weight: 700; }
.shop_table .product-name a:hover { color: var(--op-green-600); }
.shop_table .product-remove a {
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--op-bg-soft); color: var(--op-ink-faint); font-size: 1.1rem; line-height: 1; text-decoration: none;
	transition: background .25s var(--op-ease), color .25s var(--op-ease);
}
.shop_table .product-remove a:hover { background: var(--op-sale); color: #fff; }

.cart-collaterals { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
.cart_totals {
	padding: 26px 28px; border-radius: var(--op-radius);
	background: var(--op-glass); border: 1px solid var(--op-glass-border);
	box-shadow: var(--op-shadow-sm);
	max-width: 440px; margin-left: auto;
}
.cart_totals h2 { font-size: 1.2rem; margin-bottom: 18px; }
.cart_totals table { margin: 0; }
.cart_totals th, .cart_totals td { padding: 12px 0; border-bottom: 1px solid var(--op-line); text-align: left; }
.cart_totals .order-total th, .cart_totals .order-total td { font-size: 1.15rem; font-weight: 800; border-bottom: 0; }
.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout .checkout-button {
	display: flex; align-items: center; justify-content: center;
	width: 100%; padding: 17px 28px; border-radius: var(--op-radius);
	background: var(--op-green); color: #fff;
	font-weight: 700; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
	transition: background .25s var(--op-ease);
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--op-green-600); color: #fff; }

.coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.coupon .button, .actions .button {
	padding: 13px 24px; border-radius: var(--op-radius); border: 1px solid var(--op-line-strong);
	background: #fff; font-weight: 700; font-size: .89rem; cursor: pointer;
	transition: border-color .25s var(--op-ease), color .25s var(--op-ease);
}
.coupon .button:hover, .actions .button:hover { border-color: var(--op-green); color: var(--op-green-600); }

/* Mini-panier */
.op-minicart__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.widget_shopping_cart_content { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.woocommerce-mini-cart { flex: 1; overflow-y: auto; padding: 20px 24px; margin: 0; }
.woocommerce-mini-cart-item {
	display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: center;
	padding: 14px 0; border-bottom: 1px solid var(--op-line);
}
.woocommerce-mini-cart-item img { width: 68px; border-radius: var(--op-radius-sm); grid-row: span 2; }
.woocommerce-mini-cart-item a:not(.remove) { font-weight: 600; font-size: .93rem; }
.woocommerce-mini-cart-item .quantity { font-size: .86rem; color: var(--op-ink-faint); }
.woocommerce-mini-cart-item .remove {
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--op-bg-soft); color: var(--op-ink-faint); text-decoration: none; line-height: 1;
}
.woocommerce-mini-cart-item .remove:hover { background: var(--op-sale); color: #fff; }
.woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: center;
	padding: 18px 24px; margin: 0; border-top: 1px solid var(--op-line);
	font-size: 1.05rem;
}
.woocommerce-mini-cart__total strong { font-weight: 700; }
.woocommerce-mini-cart__total .amount { font-weight: 800; font-size: 1.2rem; }
.woocommerce-mini-cart__buttons { display: grid; gap: 10px; padding: 0 24px 24px; margin: 0; }
.woocommerce-mini-cart__buttons a {
	display: flex; align-items: center; justify-content: center;
	padding: 15px 24px; border-radius: var(--op-radius);
	font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
	border: 1px solid var(--op-line-strong); background: #fff;
}
.woocommerce-mini-cart__buttons a.checkout { background: var(--op-green); color: #fff; border-color: var(--op-green); }
.woocommerce-mini-cart__empty-message { padding: 48px 24px; text-align: center; color: var(--op-ink-faint); }

/* Commande */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
#customer_details h3, #order_review_heading { font-size: 1.2rem; margin-bottom: 18px; }
.woocommerce-checkout .form-row { display: grid; gap: 7px; margin-bottom: 16px; padding: 0; }
.woocommerce-checkout .form-row label { font-weight: 600; font-size: .88rem; }
.woocommerce-checkout #order_review {
	padding: 26px 28px; border-radius: var(--op-radius);
	background: var(--op-glass); border: 1px solid var(--op-glass-border);
	box-shadow: var(--op-shadow-sm);
}
#payment .wc_payment_methods { list-style: none; padding: 0; display: grid; gap: 10px; }
#payment .wc_payment_method { border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); padding: 14px 18px; }
#payment .wc_payment_method label { font-weight: 700; cursor: pointer; }
#payment .payment_box { margin-top: 10px; font-size: .88rem; color: var(--op-ink-soft); }
#place_order {
	width: 100%; padding: 18px 30px; border-radius: var(--op-radius); border: 0;
	background: var(--op-green); color: #fff; cursor: pointer;
	font-weight: 700; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
	transition: background .25s var(--op-ease);
}
#place_order:hover { background: var(--op-green-600); }

.woocommerce-order, .woocommerce-thankyou-order-received { padding-block: 40px; }
.woocommerce-thankyou-order-received {
	padding: 22px 26px; border-radius: var(--op-radius);
	background: var(--op-green-soft); color: var(--op-green-600);
	font-weight: 700; font-size: 1.05rem;
}

/* =====================================================================
 * 7. Compte client
 * ================================================================== */

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; }
/*
 * Même clearfix WooCommerce que pour `ul.products` (voir section 2) : les
 * pseudo-éléments `.woocommerce::before/::after` (`content:" "; display:table`)
 * deviennent des enfants de grille dès que `.woocommerce-account .woocommerce`
 * passe en CSS Grid. Résultat : la navigation atterrit dans la 2e colonne de
 * la 1re ligne et le contenu dans la 1re colonne de la 2e ligne — navigation
 * et contenu semblent avoir échangé leurs largeurs, et le contenu se retrouve
 * empilé sous la navigation au lieu d'être à côté. On neutralise ces
 * pseudo-éléments pour cette mise en page précise ; le clearfix reste actif
 * partout ailleurs où `.woocommerce` garde son flux normal.
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky; top: calc(var(--op-header-h) + 18px);
	padding: 12px; border: 1px solid var(--op-line); border-radius: var(--op-radius);
	background: #fff; box-shadow: var(--op-shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 6px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex; align-items: center; min-height: 44px; padding: 12px 16px; border-radius: var(--op-radius-sm);
	font-weight: 600; font-size: .93rem; color: var(--op-ink-soft);
	transition: background .25s var(--op-ease), color .25s var(--op-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--op-bg-soft); color: var(--op-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--op-green); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--op-line);
	border-radius: var(--op-radius); background: #fff; box-shadow: var(--op-shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	padding: 16px 18px; border-radius: var(--op-radius-sm);
	background: var(--op-green-soft); color: var(--op-ink); font-size: .96rem;
}
.op-account-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.op-account-card {
	display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
	min-height: 112px; padding: 18px; border: 1px solid var(--op-line);
	border-radius: var(--op-radius); color: var(--op-ink); background: var(--op-bg);
	transition: border-color .2s var(--op-ease), transform .2s var(--op-ease), background .2s var(--op-ease);
}
.op-account-card:hover { transform: translateY(-2px); border-color: var(--op-green); background: var(--op-green-soft); color: var(--op-ink); }
.op-account-card__icon {
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: var(--op-radius-sm); background: #fff; color: var(--op-green);
}
.op-account-card__body { min-width: 0; display: grid; gap: 4px; }
.op-account-card__title { font-weight: 800; line-height: 1.2; }
.op-account-card__text { color: var(--op-ink-soft); font-size: .88rem; line-height: 1.45; }
.op-account-card__arrow { color: var(--op-green); transition: transform .2s var(--op-ease); }
.op-account-card:hover .op-account-card__arrow { transform: translateX(4px); }

/* Connexion et inscription, hors du tableau de bord. */
.woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; }
.woocommerce-account:not(.logged-in) .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.woocommerce form.login, .woocommerce form.register {
	padding: 30px 32px; border-radius: var(--op-radius);
	background: var(--op-glass); border: 1px solid var(--op-glass-border);
	box-shadow: var(--op-shadow-sm);
}
.woocommerce form.login .button, .woocommerce form.register .button {
	padding: 15px 30px; border-radius: var(--op-radius); border: 0;
	background: var(--op-green); color: #fff; cursor: pointer;
	font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}

/* =====================================================================
 * 8. Comparateur, aperçu rapide
 * ================================================================== */

.op-wishlist { padding-block: 32px 48px; }

.op-compare-wrap { overflow-x: auto; padding-block: 32px 48px; }
.op-compare { min-width: 760px; border-radius: var(--op-radius); overflow: hidden; background: var(--op-glass); border: 1px solid var(--op-glass-border); }
.op-compare th, .op-compare td { padding: 16px 18px; border-bottom: 1px solid var(--op-line); text-align: left; vertical-align: top; }
.op-compare tbody th { width: 170px; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--op-ink-faint); font-weight: 700; }
.op-compare__product { display: grid; gap: 10px; font-weight: 600; }
.op-compare__product img { border-radius: var(--op-radius-sm); }
.op-compare__remove {
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--op-bg-soft); color: var(--op-ink-faint); margin-left: auto;
	transition: background .25s var(--op-ease), color .25s var(--op-ease);
}
.op-compare__remove:hover { background: var(--op-sale); color: #fff; }
.op-compare__row--description td { color: var(--op-ink-soft); font-size: .9rem; }
.op-instock { color: var(--op-green-600); font-weight: 700; }
.op-outofstock { color: var(--op-sale); font-weight: 700; }

.op-quickview { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 26px; }
.op-quickview__main img { border-radius: var(--op-radius); width: 100%; }
.op-quickview__thumbs { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.op-quickview__thumb { border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: .6; transition: opacity .25s, border-color .25s; }
.op-quickview__thumb img { width: 62px; height: 62px; object-fit: cover; }
.op-quickview__thumb.is-active, .op-quickview__thumb:hover { opacity: 1; border-color: var(--op-green); }
.op-quickview__body { display: flex; flex-direction: column; gap: 14px; padding-right: 8px; }
.op-quickview__title { font-size: 1.5rem; margin: 0; }
.op-quickview__price { font-size: 1.4rem; font-weight: 800; }
.op-quickview__excerpt { color: var(--op-ink-soft); font-size: .93rem; }
.op-quickview__meta { display: flex; gap: 18px; font-size: .85rem; color: var(--op-ink-faint); flex-wrap: wrap; }
.op-quickview__full { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--op-green-600); }
.op-quickview__cart .single_add_to_cart_button { width: 100%; }

/* =====================================================================
 * 9. Messages WooCommerce
 * ================================================================== */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	padding: 16px 20px; margin: 0 0 22px; list-style: none;
	border-radius: var(--op-radius-sm);
	background: var(--op-green-soft); border: 1px solid var(--op-green); color: var(--op-green-600);
	font-size: .93rem;
}
.woocommerce-info { background: var(--op-bg-soft); border-color: var(--op-line-strong); color: var(--op-ink-soft); }
.woocommerce-error { background: rgba(225, 29, 72, .08); border-color: var(--op-sale); color: var(--op-sale); }
.woocommerce-message .button, .woocommerce-info .button {
	margin-left: auto; padding: 10px 20px; border-radius: var(--op-radius);
	background: var(--op-green); color: #fff;
	font-weight: 700; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
}

/* =====================================================================
 * 10. Responsive
 * ================================================================== */

@media (max-width: 1024px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 36px; }
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .summary { grid-column: 1; grid-row: auto; }
	/* En une colonne, rien ne colle : il n'y a plus de voisin à longer. */
	.op-single-sticky div.product > .summary {
		position: static; max-height: none; overflow: visible;
	}
	.woocommerce-tabs { grid-row: auto; }
	.op-single-gallery-left .woocommerce-product-gallery { grid-template-columns: 1fr; }
	.op-single-gallery-left .flex-control-thumbs { grid-column: 1; grid-row: 2; grid-template-columns: repeat(5, 1fr); margin-top: 12px; }
	.op-products--shop, .related ul.products, .up-sells ul.products, .cross-sells ul.products { --op-cols: 3 !important; }
	.op-quickview { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
	.op-carousel__nav--prev { left: 4px; }
	.op-carousel__nav--next { right: 4px; }
}

@media (max-width: 768px) {
	.op-products--shop, .related ul.products, .up-sells ul.products, .cross-sells ul.products { --op-cols: 2 !important; }
	.op-products--carousel .op-products__track > li { flex-basis: 70%; }
	.op-shop-view-list .op-product { flex-direction: column; }
	.op-shop-view-list .op-product__media { flex: none; }
	.op-shoptoolbar { padding: 14px 16px; }
	.op-shoptoolbar__left, .op-shoptoolbar__right { width: 100%; justify-content: space-between; }
	/* Le tableau du panier se replie en fiches : 6 colonnes sur 360 px de large
	   deviennent illisibles, et le défilement horizontal fait rater le total. */
	.shop_table thead { display: none; }
	.shop_table tr { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 14px; padding: 16px; border-bottom: 1px solid var(--op-line); }
	.shop_table td { display: block; padding: 2px 0; border: 0; }
	.shop_table td.product-thumbnail { grid-row: span 4; }
	.shop_table td.product-remove { position: absolute; right: 16px; }
	.shop_table td::before { content: attr(data-title) ': '; font-size: .78rem; color: var(--op-ink-faint); }
	.shop_table td.product-thumbnail::before, .shop_table td.product-name::before, .shop_table td.product-remove::before { content: none; }
	.cart_totals { max-width: none; }
	.woocommerce-account:not(.logged-in) .u-columns { grid-template-columns: 1fr; }
	.op-product__cart, .op-product__actions { opacity: 1; transform: none; }
	.flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 520px) {
	.op-products--shop, .related ul.products, .up-sells ul.products, .cross-sells ul.products { --op-cols: 1 !important; }
	.op-products--carousel .op-products__track > li { flex-basis: 84%; }
	.single-product form.cart .single_add_to_cart_button, .single-product form.cart .op-buy-now { min-width: 100%; }
	.woocommerce-tabs ul.tabs { width: 100%; }
	.woocommerce-tabs ul.tabs li { flex: 1; }
	.woocommerce-tabs ul.tabs li a { text-align: center; padding: 11px 12px; }
}

/* =====================================================================
 * 11. Panier et commande EN BLOCS
 *
 * Depuis WooCommerce 8.3, une installation neuve crée les pages Panier et
 * Commande avec les blocs `woocommerce/cart` et `woocommerce/checkout`, et non
 * plus les codes courts. Les deux formes coexistent — un marchand peut revenir
 * aux codes courts d'un clic — donc le thème habille les deux.
 *
 * Les sélecteurs `wc-block-*` sont l'API publique des blocs : ils sont stables
 * d'une version mineure à l'autre. Le balisage interne, lui, est produit par
 * React à l'exécution, ce qui interdit toute surcharge de gabarit PHP : la
 * mise en forme ne peut passer que par le CSS.
 * ================================================================== */

.wc-block-cart, .wc-block-checkout { padding-block: 24px 48px; }

/* Tableau des lignes */
.wc-block-cart-items { border: 0; }
.wc-block-cart-items__header {
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--op-ink-faint); border-bottom: 1px solid var(--op-line);
}
.wc-block-cart-items__row { border-bottom: 1px solid var(--op-line); }
.wc-block-cart-item__image img { border-radius: var(--op-radius-sm); }
.wc-block-components-product-name { font-weight: 700; color: var(--op-ink); text-decoration: none; }
.wc-block-components-product-name:hover { color: var(--op-green-600); }
.wc-block-cart-item__remove-link { color: var(--op-ink-faint); }
.wc-block-cart-item__remove-link:hover { color: var(--op-sale); }

/* Sélecteur de quantité */
.wc-block-components-quantity-selector {
	border-radius: 100px; border: 1px solid var(--op-line-strong);
	background: #fff; overflow: hidden;
}
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector__button { color: var(--op-ink-soft); font-weight: 700; }
.wc-block-components-quantity-selector__button:hover { background: var(--op-bg-soft); color: var(--op-green-600); }
.wc-block-components-quantity-selector__input { font-weight: 700; }

/* Colonne de droite : totaux */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	padding: 24px 26px;
	border-radius: var(--op-radius);
	background: var(--op-glass);
	border: 1px solid var(--op-glass-border);
	box-shadow: var(--op-shadow-sm);
}
.wc-block-components-totals-item { font-size: .95rem; }
.wc-block-components-totals-item__label { color: var(--op-ink-soft); }
.wc-block-components-totals-footer-item { font-size: 1.1rem; font-weight: 800; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--op-ink); }
.wc-block-components-panel__button { font-weight: 700; color: var(--op-ink); }
.wc-block-components-totals-coupon__form .wc-block-components-text-input input { border-radius: var(--op-radius-sm); }

/* Boutons */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: flex; align-items: center; justify-content: center;
	width: 100%; padding: 17px 28px;
	border-radius: var(--op-radius); border: 0;
	background: var(--op-green); color: #fff;
	font-weight: 700; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
	transition: background .25s var(--op-ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--op-green-600); color: #fff; }

.wc-block-components-button:not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button) {
	border-radius: 100px; font-weight: 700;
}
.wc-block-components-button.outlined {
	border-color: var(--op-line-strong); color: var(--op-ink);
}
.wc-block-components-button.outlined:hover { border-color: var(--op-green); color: var(--op-green-600); }

/* Formulaire de commande */
.wc-block-checkout__form .wc-block-components-title,
.wc-block-checkout__sidebar .wc-block-components-title { font-size: 1.15rem; font-weight: 700; }
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=number],
.wc-block-components-combobox input,
.wc-block-components-textarea {
	border-radius: var(--op-radius-sm) !important;
	border: 1px solid var(--op-line-strong) !important;
	background: rgba(255, 255, 255, .75);
	font-family: var(--op-font);
}
.wc-block-components-text-input.is-active input:focus,
.wc-block-components-combobox input:focus {
	border-color: var(--op-green) !important;
	box-shadow: 0 0 0 4px var(--op-green-soft) !important;
	outline: none;
}
.wc-block-components-text-input label { color: var(--op-ink-faint); font-family: var(--op-font); }
.wc-block-components-checkbox__input:checked { background: var(--op-green); border-color: var(--op-green); }

/* Modes de livraison et de paiement */
.wc-block-components-radio-control__option {
	border-radius: var(--op-radius-sm);
	transition: background .2s var(--op-ease);
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-color: var(--op-line-strong) !important;
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked) {
	border-color: var(--op-green) !important;
	background: var(--op-green-soft);
}
.wc-block-components-radio-control__input:checked { border-color: var(--op-green); }
.wc-block-components-radio-control__input:checked::before { background: var(--op-green); }

/* Messages et vignettes */
.wc-block-components-notice-banner { border-radius: var(--op-radius-sm); font-family: var(--op-font); }
.wc-block-components-notice-banner.is-success { border-color: var(--op-green); background: var(--op-green-soft); }
.wc-block-components-notice-banner.is-error { border-color: var(--op-sale); }
.wc-block-components-order-summary-item__image img { border-radius: var(--op-radius-sm); }
.wc-block-components-order-summary__button-text { font-weight: 700; }

/* Panier vide */
.wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: 40px; }

/* La barre de livraison gratuite, injectée avant le bloc panier. */
.op-freeship--blocks { max-width: var(--op-container); margin-inline: auto; }

/* 1.3 — product discovery, gallery and purchase flow. */
.op-product__media { isolation: isolate; }
.op-product__img { object-fit: contain; }
.op-product__body { padding: 18px 14px; gap: 10px; }
.op-product__title { font-weight: 600; overflow-wrap: anywhere; }
.op-product__cat { color: var(--op-ink-soft); }
.op-product__price { flex-wrap: wrap; }
.op-product__cart { position: static; opacity: 1; transform: none; margin: 0; padding: 10px; }
.woocommerce .op-product__cart a.button, .op-product__cart a.button { background: var(--op-green-600); min-height: 44px; letter-spacing: .04em; }
.op-product__actions .op-action { width: 44px; height: 44px; }
.op-badge { border-radius: var(--op-radius-sm); }
.op-badge--low { color: var(--op-ink); }
.op-viewtoggle__btn { width: 44px; height: 44px; }
.op-shoptoolbar__left, .op-shoptoolbar__right, .woocommerce-ordering { min-width: 0; flex-wrap: wrap; }
.woocommerce-ordering select { max-width: 100%; }
.single-product div.product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.single-product div.product > * { min-width: 0; }
.single-product .product_title { text-wrap: balance; overflow-wrap: anywhere; line-height: 1.22; }
.single-product .summary > .price { padding-bottom: 18px; border-bottom: 1px solid var(--op-line); }
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary { width: 100%; float: none; }
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .woocommerce-product-gallery__image { overflow: hidden; }
/* WooCommerce's zoom plugin sizes this image in pixels; the global responsive
   img rule would shrink it back to its container and cancel the magnification. */
.single-product .woocommerce-product-gallery__image img.zoomImg { max-width: none; max-height: none; }
.op-single-gallery-left .woocommerce-product-gallery > .flex-viewport { grid-column: 2; grid-row: 1; min-width: 0; }
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.woocommerce div.product div.images .flex-control-thumbs li { float: none; width: auto; }
.woocommerce div.product div.images .flex-control-thumbs img { aspect-ratio: 1; object-fit: contain; background: var(--op-bg-soft); }
.woocommerce div.product.op-single-gallery-left div.images .flex-control-thumbs,
.op-single-gallery-left.woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: 1fr; margin-top: 0; }
.op-single-gallery-wide div.product { grid-template-columns: minmax(0, 1fr); }
.op-single-gallery-wide div.product > .woocommerce-tabs { grid-row: 3; }
.single-product form.cart { gap: 12px; }
.single-product form.cart .button { min-height: 48px; white-space: normal; }
.single-product .variations select { width: 100%; max-width: 100%; min-height: 48px; }
.single-product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.single-product .woocommerce-tabs ul.tabs li { margin: 0; }
.single-product .woocommerce-tabs .panel { overflow-wrap: anywhere; }
.single-product .woocommerce-tabs .panel img { max-width: 100%; height: auto; }
.single-product .woocommerce-tabs .panel table { table-layout: fixed; }
.op-quickview > *, .woocommerce-cart .woocommerce > *, .woocommerce-checkout .woocommerce > * { min-width: 0; }
.op-compare-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
.op-compare th, .op-compare td { overflow-wrap: anywhere; }
/* True transparency: the storefront remains visible behind the image.
   Scope to WooCommerce's lightbox; toolbar backgrounds preserve contrast. */
body.single-product .pswp, body.single-product .pswp__bg { background: transparent !important; }
body.single-product .pswp__img--placeholder--blank { background: transparent; }
body.single-product .pswp__top-bar, body.single-product .pswp__caption { background: var(--op-ink); }
body.single-product .pswp__button--arrow--left::before,
body.single-product .pswp__button--arrow--right::before { background-color: var(--op-ink); border-radius: var(--op-radius-sm); }
@media (hover: hover) and (pointer: fine) {
	.single-product .woocommerce-product-gallery__image { cursor: zoom-in; }
	.single-product .op-zoom-fallback > a > img { transform: scale(1.7); }
}
@media (hover: none), (pointer: coarse) {
	.op-product__actions { position: static; display: flex; justify-content: flex-end; padding: 8px 10px 0; opacity: 1; transform: none; gap: 6px; }
	.op-product:hover .op-product__img { transform: none; }
}
@media (max-width: 1024px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); }
	.op-single-gallery-left .woocommerce-product-gallery > .flex-viewport { grid-column: 1; }
	.op-single-gallery-left .woocommerce-product-gallery__wrapper { grid-column: 1; }
	.op-single-gallery-left.woocommerce div.product div.images .flex-control-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
	.op-single-gallery-wide div.product > .woocommerce-tabs { grid-row: auto; }
}
@media (max-width: 768px) {
	.op-products__track { gap: 24px 14px; }
	.op-product__body { padding: 12px 8px; }
	.op-product__title { font-size: .92rem; }
	.woocommerce ul.products li.product .op-product__price { font-size: 1rem; gap: 4px; }
	.op-product__cart { padding: 6px; }
	.woocommerce .op-product__cart a.button { padding-inline: 8px; font-size: .7rem; }
	.op-product__badges { top: 8px; left: 8px; }
	.op-badge { padding: 4px 7px; font-size: .65rem; }
	.op-shoptoolbar { padding-inline: 0; }
	.woocommerce-ordering { flex: 1; }
	.woocommerce-ordering::before { display: none; }
	.woocommerce-ordering select { width: 100%; min-width: 0; }
	.single-product .woocommerce-tabs ul.tabs { gap: 6px 16px; padding-inline: 0; }
	.woocommerce table.shop_table { overflow-wrap: anywhere; }
	.woocommerce table.shop_table td.actions .coupon { display: flex; flex-wrap: wrap; gap: 10px; }
	.woocommerce table.shop_table td.actions .coupon .input-text { width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; }
	.woocommerce-account .woocommerce-MyAccount-navigation { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; }
	.woocommerce-account .woocommerce-MyAccount-navigation a { border: 1px solid var(--op-line); background: #fff; }
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; }
	.op-account-hub { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
	.op-products--shop { --op-cols: 1 !important; }
}
.single-product .op-titlebar { padding-block: 20px; }
.single-product .op-titlebar .op-breadcrumb { margin: 0; }
.single-product .op-layout { padding-top: 12px; }
.op-sidebar-filter-toggle { display: none; }
#op-shop-sidebar { scroll-margin-top: calc(var(--op-header-h) + 16px); }
@media (max-width: 1024px) {
	.op-js .op-sidebar-filter-toggle { display: inline-flex; }
	.op-js #op-shop-sidebar:not(.is-open) { display: none; }
	.op-js #op-shop-sidebar { order: -1 !important; }
}
@media (hover: none), (pointer: coarse) {
	.op-product__actions { transform: none; }
}