/* =====================================================================
 * Fichier : assets/css/pages/shop.css
 * Projet  : Brennholz Shop24
 * Rôle    : Styles propres à la page catalogue (shop.php).
 *           Les filtres, la barre d'outils et la pagination sont dans
 *           assets/css/components/catalog.css
 * ===================================================================== */

/* --- En-tête --- */
.shop-hero { position: relative; overflow: hidden; }
.shop-hero-embers { position: absolute; inset: 0; pointer-events: none; }
.shop-hero .container-xxl { position: relative; z-index: 1; }
.shop-hero-inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: 1.2rem; }
.shop-hero-text p strong { color: var(--hfk-amber); }
.shop-hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.shop-hero-facts li { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: rgba(255, 255, 255, .06); border-left: 3px solid var(--hfk-flame); backdrop-filter: blur(4px); transition: transform .4s var(--hfk-ease), background .3s; }
.shop-hero-facts li:hover { transform: translateX(8px); background: rgba(255, 255, 255, .1); }
.shop-hero-facts i { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: var(--hfk-grad-fire); }
.shop-hero-facts span { font-size: .86rem; color: #D5DADF; }
.shop-hero-facts strong { display: block; font-family: var(--hfk-font-head); font-size: 1rem; color: #fff; }

/* --- Raccourcis catégories --- */
.shop-cats { position: sticky; top: var(--hfk-header-h); z-index: 90; background: #fff; border-bottom: 1px solid var(--hfk-border); box-shadow: var(--hfk-shadow-xs); transition: box-shadow .3s; }
.shop-cats.is-stuck { box-shadow: var(--hfk-shadow); }
.shop-cats-track { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem 0; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; }
.shop-cats-track::-webkit-scrollbar { display: none; }
.shop-cats-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.shop-cats-track.is-dragging a { pointer-events: none; }
.shop-cat { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem .5rem .5rem; border: 1.5px solid var(--hfk-border); background: #fff; color: var(--hfk-charcoal); font-family: var(--hfk-font-head); font-weight: 600; font-size: .92rem; white-space: nowrap; transition: border-color .3s, background .3s, color .3s, transform .3s var(--hfk-ease); }
.shop-cat:hover { border-color: var(--cat-color); color: var(--hfk-charcoal); transform: translateY(-2px); }
.shop-cat.is-active { background: var(--cat-color); border-color: var(--cat-color); color: #fff; }
.shop-cat-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--cat-color); transition: transform .4s var(--hfk-ease-bounce); }
.shop-cat.is-active .shop-cat-icon { background: rgba(255, 255, 255, .18); }
.shop-cat:hover .shop-cat-icon { transform: rotate(-10deg) scale(1.1); }
.shop-cat-count { font-size: .74rem; font-weight: 700; padding: .1rem .45rem; background: var(--hfk-cream); color: var(--hfk-muted); }
.shop-cat.is-active .shop-cat-count { background: rgba(255, 255, 255, .2); color: #fff; }

.shop-catalog { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.shop-catalog .catalog-filters { top: calc(var(--hfk-header-h) + 90px); }

/* --- Aide au choix --- */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.guide-card { position: relative; padding: clamp(1.5rem, 2.6vw, 2.2rem); background: #fff; border-top: 4px solid var(--g); overflow: hidden; transition: transform .5s var(--hfk-ease), box-shadow .5s; }
.guide-card:hover { transform: translateY(-8px); box-shadow: var(--hfk-shadow-lg); }
.guide-num { position: absolute; right: 1rem; top: .2rem; font-family: var(--hfk-font-head); font-weight: 800; font-size: 4.5rem; line-height: 1; color: var(--g); opacity: .1; transition: opacity .4s, transform .6s var(--hfk-ease); }
.guide-card:hover .guide-num { opacity: .22; transform: translateY(6px) scale(1.1); }
.guide-card h3 { position: relative; font-size: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.guide-card h3 i { color: var(--g); }
.guide-card p { position: relative; color: var(--hfk-muted); font-size: .95rem; }
.guide-card .link-arrow { color: var(--g); }

.shop-seo-section { padding-top: 0; }
.shop-seo-section .catalog-seo { margin-top: 0; }

@media (max-width: 991.98px) {
    .shop-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .shop-hero-facts { grid-template-columns: repeat(3, 1fr); }
    .shop-hero-facts li { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .shop-hero-facts { grid-template-columns: minmax(0, 1fr); }
    .shop-hero-facts li { flex-direction: row; align-items: center; }
    .shop-cats .container-xxl { padding-right: 0; }
}