/*
 * Boutique et recherche produit — CSS chargé UNIQUEMENT sur /shop/ et sur les
 * résultats de recherche produit (Assets\Enqueue, même condition que shop.js).
 *
 * Ne contient que ce qui est exclusif à ces deux gabarits. Les règles partagées
 * avec les pages catégorie (.shop-body, .shop-filters, .shop-facet, le slider de
 * prix, la toolbar, les cartes d'aide) restent dans main.css, comme les styles de
 * carte produit qui servent toutes les grilles du site.
 */
/* ── Facettes boutique/recherche : arbre, listes longues, chips, drawer ──
   Le SSR rend toutes les options ; le JS replie au-delà de 8 (.is-extra) et
   ajoute le chrome du drawer mobile. Aucun style ne dépend du JS pour être
   utilisable. */
.shop-filters__facet li.is-child .shop-facet { padding-left: 1.4rem; font-size: .86rem; }
.shop-filters__facet li.is-d2 .shop-facet { padding-left: 2.3rem; font-size: .84rem; }
.shop-filters__facet li.is-d3 .shop-facet { padding-left: 3.2rem; font-size: .82rem; }
.shop-filters__group:not(.is-expanded) .shop-filters__facet li.is-extra { display: none; }
.shop-filters__more { margin: .4rem 0 0 .5rem; padding: 0; border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--forest); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.shop-filters__more:hover { color: var(--forest-2); }
button.shop-filters__reset { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; }

/* Chips de filtres actifs, au-dessus de la grille. */
.shop-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--sp-4); }
.shop-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border: 1px solid color-mix(in srgb, var(--forest) 35%, var(--line)); border-radius: var(--radius-pill); background: var(--forest-tint); color: var(--forest-deep); font: inherit; font-size: .84rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .14s var(--ease), border-color .14s var(--ease); }
.shop-chip:hover { background: color-mix(in srgb, var(--forest) 18%, #fff); color: var(--forest-deep); }
.shop-chip span[aria-hidden] { font-size: 1.05rem; line-height: 1; opacity: .6; }
.shop-chips__clear { border: 0; background: none; padding: .35rem .2rem; font: inherit; font-size: .82rem; color: var(--terracotta); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Bouton « voir plus » sous la grille (pagination reste le fallback no-JS). */
.shop-loadmore { display: flex; width: fit-content; margin: var(--sp-8) auto 0; }
/* Ces blocs sont masqués par le JS via [hidden] : la règle display ci-dessus,
   comme celles de .shop-chips et .shop-pagination, gagnerait sinon contre lui. */
.shop-loadmore[hidden], .shop-chips[hidden], .shop-pagination[hidden] { display: none !important; }

/* État vide : on propose une sortie, jamais une page morte. */
.shop-empty { padding: var(--sp-6) 0; }
.shop-empty__title { font-family: var(--font-h); font-size: 1.1rem; margin: var(--sp-6) 0 var(--sp-4); }
.shop-empty__actions { margin-top: var(--sp-6); }

/* Barre mobile + drawer de filtres (desktop : sidebar classique). */
.shop-mobilebar { display: none; }
.shop-filters__drawerhead, .shop-filters__close, .shop-filters__cta, .shop-filters__backdrop { display: none; }
@media (max-width: 900px) {
	.shop-mobilebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--sp-4); }
	.shop-mobilebar__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; }
	.shop-mobilebar__btn svg { width: 18px; height: 18px; }
	.shop-mobilebar__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: var(--radius-pill); background: var(--forest); color: #fff; font-size: .74rem; font-weight: 700; }
	.shop-mobilebar__count { color: var(--muted); font-size: .88rem; }

	/* Drawer : colonne flex (en-tête figé, liste scrollable, CTA en pied). Le CTA
	   ne peut PAS être en position:fixed — un ancêtre transformé devient son bloc
	   conteneur, il suivrait le scroll de la liste au lieu du viewport. */
	.shop--live .shop-filters {
		position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; right: auto;
		width: min(92vw, 380px); max-width: 100%; margin: 0; padding: 0;
		border-radius: 0; border-width: 0 1px 0 0; overflow: hidden;
		display: flex; flex-direction: column;
		transform: translateX(-100%); transition: transform .22s var(--ease);
	}
	/* Le panneau passe AU-DESSUS du header du site (z 50). L'offset admin-bar du
	   sticky desktop, lui, ne doit pas s'appliquer ici : sélecteur plus spécifique. */
	body.admin-bar .shop--live .shop-filters { top: 46px; }
	body.hpl-drawer-open { overflow: hidden; }
	body.hpl-drawer-open .shop--live .shop-filters { transform: translateX(0); }
	body.hpl-drawer-open .shop-filters__backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(20, 30, 20, .45); }

	.shop--live .shop-filters__drawerhead { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line); font-family: var(--font-h); font-size: 1.05rem; }
	.shop--live .shop-filters__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--forest-tint); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
	.shop--live .shop-filters__form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-6) var(--sp-6); }
	.shop--live .shop-filters__cta { display: flex; flex: none; position: static; width: 100%; justify-content: center; border-radius: 0; }
	/* Le drawer porte son propre titre : on masque celui du formulaire (le lien
	   « Tout effacer » du même bloc, lui, reste). */
	.shop--live .shop-filters__head h2 { display: none; }
	.shop--live .shop-filters__head { justify-content: flex-end; }
}
@media (min-width: 783px) and (max-width: 900px) {
	body.admin-bar .shop--live .shop-filters { top: 32px; }
}

/* Suggestions de recherche (index catalogue, aucun appel réseau). */
.hpl-suggest { position: absolute; z-index: 40; top: calc(100% + .4rem); left: 0; right: 0; max-height: 60vh; overflow-y: auto; padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.hpl-suggest[hidden] { display: none; }
.hpl-suggest__item, .hpl-suggest__cat { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .9rem; }
.hpl-suggest__item:hover, .hpl-suggest__cat:hover { background: var(--forest-tint); color: var(--ink); }
.hpl-suggest__item img, .hpl-suggest__noimg { width: 38px; height: 38px; flex: none; object-fit: contain; background: var(--card-soft); border-radius: var(--radius-sm); }
.hpl-suggest__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpl-suggest__price { flex: none; color: var(--muted); font-size: .85rem; }
.hpl-suggest__price del { display: none; }
.hpl-suggest__tag { flex: none; padding: .12em .5em; border-radius: var(--radius-pill); background: var(--forest-tint); color: var(--forest-deep); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }


/* ── Boutique / recherche (maquette-boutiques-search) ── */
.search-hero { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: var(--sp-8); margin: var(--sp-6) 0 var(--sp-10); padding: clamp(1.6rem, 4vw, 2.8rem); background: var(--forest-tint); border-radius: var(--radius-lg); overflow: hidden; }
.search-hero__title { font-family: var(--font-h); font-size: var(--fs-800); line-height: 1.05; margin: 0 0 var(--sp-2); }
.search-hero__sub { color: var(--muted); margin: 0 0 var(--sp-5); }
.search-hero__form { position: relative; max-width: 480px; }
.search-hero__form input[type="search"] { width: 100%; min-height: 54px; padding: .6rem 2.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; -webkit-appearance: none; appearance: none; }
.search-hero__ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--faint); }
.search-hero__ic svg { width: 20px; height: 20px; }
.search-hero__clear { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 1.5rem; line-height: 1; text-decoration: none; }
.search-hero__clear:hover { color: var(--ink); }
/* Recherches fréquentes : points d'entrée pour qui ne connaît pas le vocabulaire. */
.search-hero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: var(--sp-4) 0 0; font-size: .85rem; }
.search-hero__quick > span { color: var(--muted); margin-right: .2rem; }
.search-hero__quick > a { padding: .28rem .7rem; border: 1px solid color-mix(in srgb, var(--forest) 25%, transparent); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .7); color: var(--forest-deep); text-decoration: none; font-weight: 500; }
.search-hero__quick > a:hover { background: #fff; color: var(--forest-deep); border-color: var(--forest); }
.search-hero__media { align-self: center; }
.search-hero__media img { width: 100%; height: auto; max-height: 230px; object-fit: contain; }
@media (max-width: 820px) { .search-hero { grid-template-columns: 1fr; } .search-hero__media { display: none; } }

.search-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: var(--sp-6); }
.search-head__count { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.search-head__count h2 { font-family: var(--font-h); font-size: var(--fs-600); margin: 0; }
.search-head__count h2 span { color: var(--forest); }
.search-head__n { color: var(--muted); font-size: .9rem; }
.search-head__reset { color: var(--forest); font-weight: 600; font-size: .9rem; text-decoration: none; }
.search-head__reset:hover { text-decoration: underline; }

.search-ordering { margin: 0; display: inline-flex; align-items: center; }

.shop-pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: var(--sp-8); }
.shop-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .15s var(--ease), color .15s var(--ease); }
.shop-pagination .page-numbers.current { background: var(--forest); color: #fff; border-color: var(--forest); }
.shop-pagination .page-numbers:hover:not(.current) { border-color: var(--forest); color: var(--forest); }
.shop-pagination .page-numbers.dots { border-color: transparent; }