/* ============================================================================
   H12 — Boutique / archives WooCommerce
   ========================================================================== */

.h12-wc { padding-top: 40px; }

/* Grille de produits Woo → notre grille 3 colonnes */
.h12-wc ul.products,
.h12-wc .products {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.h12-wc ul.products li.product { margin: 0; width: auto; float: none; }

/* En-tête d'archive */
.woocommerce-products-header { margin-bottom: 24px; }
.woocommerce-products-header__title.page-title {
	font-family: var(--h12-font-display); font-weight: 400; text-transform: uppercase;
	font-size: var(--h12-h-section); line-height: .92; letter-spacing: .01em; margin: 0 0 8px;
}
.woocommerce-products-header .term-description { color: var(--h12-text-2); max-width: 640px; }

/* Barre résultats + tri */
.woocommerce-result-count { font-family: var(--h12-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--h12-text-2); }
.woocommerce-ordering select {
	font-family: var(--h12-font-body); font-size: 13px; font-weight: 600; padding: 10px 14px;
	border: var(--h12-bd-2); border-radius: var(--h12-radius-sm); background: #fff; cursor: pointer;
}

/* Pagination */
.woocommerce-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 32px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
	border: var(--h12-bd); border-radius: var(--h12-radius-sm); font-family: var(--h12-font-mono); font-size: 13px;
}
.woocommerce-pagination .current { background: var(--h12-ink); color: #fff; border-color: var(--h12-ink); }

/* ============================================================================
   « Magasine par catégorie » — tuiles
   ========================================================================== */
.h12-cat-browse { margin: 0 0 34px; }
.h12-cat-browse__title {
	font-family: var(--h12-font-display); font-weight: 400; text-transform: uppercase;
	font-size: clamp(26px, 3.4vw, 40px); line-height: .94; letter-spacing: .01em; margin: 0 0 18px;
}

.h12-cat-tiles {
	display: grid; gap: 16px;
	grid-template-columns: repeat(4, 1fr);
}

.h12-cat-tile {
	position: relative; display: block; overflow: hidden; color: #fff;
	border-radius: var(--h12-radius-lg); aspect-ratio: 4 / 5; background: var(--h12-ink);
	border: var(--h12-bd);
	transition: box-shadow var(--h12-t-card), transform var(--h12-t-card);
}
.h12-cat-tile:hover { box-shadow: var(--h12-shadow-card); transform: translateY(-4px); }

.h12-cat-tile__media { position: absolute; inset: 0; display: block; background: var(--h12-ink); }
.h12-cat-tile__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .45s var(--h12-ease);
}
.h12-cat-tile:hover .h12-cat-tile__media img { transform: scale(1.05); }
.h12-cat-tile__ph { position: absolute; inset: 0; background: var(--h12-placeholder-tex); }

/* Casquettes : aucune règle spéciale. La tuile utilise le même « cover » que les
   autres catégories. L'ancienne règle (contain + fond radial sombre) visait un PNG
   détouré paysage ; avec les photos carrées sur fond blanc du catalogue, elle
   affichait la photo entière au centre d'un cadre noir. Vérifié : en cover 4/5 on
   rogne 10 % de chaque côté et la casquette garde 12,5 % de marge, rien n'est coupé. */

/* Dégradé + halftone rouge signature pour la lisibilité du texte */
.h12-cat-tile::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .28) 42%, rgba(10, 10, 10, 0) 70%);
}

.h12-cat-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 18px 16px; }
.h12-cat-tile__name {
	display: block; font-family: var(--h12-font-display); font-weight: 400; text-transform: uppercase;
	font-size: clamp(20px, 2vw, 27px); line-height: .96; letter-spacing: .01em;
}
.h12-cat-tile__count {
	display: flex; align-items: center; gap: 8px; margin-top: 8px;
	font-family: var(--h12-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}
.h12-cat-tile__arrow { color: var(--h12-red); font-size: 14px; transition: transform var(--h12-t-fast); }
.h12-cat-tile:hover .h12-cat-tile__arrow { transform: translateX(4px); }

/* Liseré rouge d'accent au survol */
.h12-cat-tile::before {
	content: ""; position: absolute; left: 0; bottom: 0; z-index: 3; height: 3px; width: 0;
	background: var(--h12-red); transition: width .3s var(--h12-ease);
}
.h12-cat-tile:hover::before { width: 100%; }

@media (max-width: 1100px) { .h12-cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .h12-cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .h12-cat-tiles { grid-template-columns: 1fr; } .h12-cat-tile { aspect-ratio: 16 / 10; } }

/* Chips de catégories (barre sticky) */
.h12-cat-chips { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 0 22px; }
.h12-cat-chips a {
	font-family: var(--h12-font-body); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em;
	padding: 9px 16px; border: var(--h12-bd-2); border-radius: 99px; transition: all var(--h12-t-fast);
}
.h12-cat-chips a:hover, .h12-cat-chips a.is-active { background: var(--h12-ink); color: #fff; border-color: var(--h12-ink); }

@media (max-width: 900px) { .h12-wc ul.products, .h12-wc .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .h12-wc ul.products, .h12-wc .products { grid-template-columns: 1fr; } }