/* Catalogue Boutique PJF — version 2.6.0 */

/* =====================================================
   HEADER KADENCE - VRAIE SUPERPOSITION AU HERO
   Le masthead sort du flux normal uniquement sur la boutique.
   Le hero commence donc directement sous la barre admin WP
   et l'image passe réellement derrière le menu, comme sur les
   autres pages de division du Groupe PJF.
   ===================================================== */
body.pjf-be-shop #masthead,
body.pjf-be-product #masthead,
body.pjf-be-commerce #masthead {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 !important;
	z-index: 9999;
	background: transparent !important;
	box-shadow: none !important;
}

/* Quand un administrateur est connecté, la barre WordPress occupe le haut
   de l'écran. On décale uniquement le masthead Boutique de la hauteur
   officielle de cette barre pour éviter que le logo/menu soit coupé. */
body.admin-bar.pjf-be-shop #masthead,
body.admin-bar.pjf-be-product #masthead,
body.admin-bar.pjf-be-commerce #masthead {
	top: 32px !important;
}

@media (max-width: 782px) {
	body.admin-bar.pjf-be-shop #masthead,
	body.admin-bar.pjf-be-product #masthead,
	body.admin-bar.pjf-be-commerce #masthead {
		top: 46px !important;
	}
}

body.pjf-be-shop #masthead .site-header-wrap,
body.pjf-be-shop #masthead .site-main-header-wrap,
body.pjf-be-shop #masthead .site-top-header-wrap,
body.pjf-be-shop #masthead .site-bottom-header-wrap,
body.pjf-be-shop #masthead .site-header-row-container,
body.pjf-be-shop #masthead .site-header-row-container-inner,
body.pjf-be-shop #masthead .site-main-header-inner-wrap,
body.pjf-be-shop #masthead .site-top-header-inner-wrap,
body.pjf-be-shop #masthead .site-bottom-header-inner-wrap,
body.pjf-be-product #masthead .site-header-wrap,
body.pjf-be-product #masthead .site-main-header-wrap,
body.pjf-be-product #masthead .site-top-header-wrap,
body.pjf-be-product #masthead .site-bottom-header-wrap,
body.pjf-be-product #masthead .site-header-row-container,
body.pjf-be-product #masthead .site-header-row-container-inner,
body.pjf-be-product #masthead .site-main-header-inner-wrap,
body.pjf-be-product #masthead .site-top-header-inner-wrap,
body.pjf-be-product #masthead .site-bottom-header-inner-wrap,
body.pjf-be-commerce #masthead .site-header-wrap,
body.pjf-be-commerce #masthead .site-main-header-wrap,
body.pjf-be-commerce #masthead .site-top-header-wrap,
body.pjf-be-commerce #masthead .site-bottom-header-wrap,
body.pjf-be-commerce #masthead .site-header-row-container,
body.pjf-be-commerce #masthead .site-header-row-container-inner,
body.pjf-be-commerce #masthead .site-main-header-inner-wrap,
body.pjf-be-commerce #masthead .site-top-header-inner-wrap,
body.pjf-be-commerce #masthead .site-bottom-header-inner-wrap {
	background: transparent !important;
	box-shadow: none !important;
}

/* Important : on laisse Kadence gérer sa hauteur, son alignement et la taille
   du logo exactement comme sur les autres pages. On ne force plus la rangée. */

/* Certaines configurations Kadence ajoutent une bordure/ombre au header. */
body.pjf-be-shop #masthead::before,
body.pjf-be-shop #masthead::after,
body.pjf-be-product #masthead::before,
body.pjf-be-product #masthead::after,
body.pjf-be-commerce #masthead::before,
body.pjf-be-commerce #masthead::after {
	box-shadow: none !important;
}

/* =====================================================
   HERO - DIMENSIONS STANDARD GROUPE PJF
   Référence : Carrosserie PJF-Laplante
   Desktop  : 125 / 24 / 70 / 24
   Tablette : 105 / 30 / 55 / 30
   Mobile   :  90 / 22 / 45 / 22
   ===================================================== */
/* Aucun espace Kadence/WooCommerce ne doit précéder le hero boutique. */
body.pjf-be-shop .content-area,
body.pjf-be-shop #primary,
body.pjf-be-shop main#main,
body.pjf-be-shop .site-main,
body.pjf-be-product .content-area,
body.pjf-be-product #primary,
body.pjf-be-product main#main,
body.pjf-be-product .site-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Panier / Commande / Mon compte utilisent maintenant le hero Boutique.
   On masque uniquement le bandeau de titre Kadence qui ferait doublon. */
body.pjf-be-commerce .entry-hero.page-hero-section,
body.pjf-be-commerce .entry-hero-container-inner {
	display: none !important;
}

body.pjf-be-commerce .content-area,
body.pjf-be-commerce #primary,
body.pjf-be-commerce main#main,
body.pjf-be-commerce .site-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.pjf-shop-hero {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin: 0 0 0 -50vw;
	overflow: hidden;
	background: #080d16;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	isolation: isolate;
	z-index: 1;
}

.pjf-shop-hero::before {
	position: absolute;
	inset: 0;
	content: "";
	background-image:
		linear-gradient(90deg,
			rgba(4, 8, 15, 0.25) 0%,
			rgba(4, 8, 15, 0.22) 36%,
			rgba(4, 8, 15, 0.14) 66%,
			rgba(4, 8, 15, 0.06) 100%
		),
		var(--pjf-shop-hero-bg);
	background-position: center center, center center;
	background-repeat: no-repeat;
	background-size: cover, cover;
	z-index: -2;
}

.pjf-shop-hero::after {
	position: absolute;
	inset: auto 0 0;
	height: 44%;
	content: "";
	background: linear-gradient(180deg, transparent, rgba(3, 7, 13, 0.25) 48%, rgba(3, 7, 13, 0.58));
	z-index: -1;
}

.pjf-shop-hero__inner {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: min(1140px, 100%);
	margin: 0 auto;
	padding: 125px 24px 70px;
}

.pjf-shop-hero__content {
	width: 100%;
	max-width: 820px;
}

.pjf-shop-hero__title {
	max-width: 820px;
	/* Carrosserie PJF-Laplante ne supprime que le margin-top du H1.
	   On conserve donc un espacement inférieur équivalent à .5em afin
	   que la hauteur VISUELLE du hero soit réellement la même. */
	margin: 0 0 .5em;
	color: #fff;
	font-size: 64px;
	font-weight: 700;
	line-height: 70px;
	letter-spacing: -2px;
	text-shadow: 0 5px 22px rgba(0, 0, 0, 0.48);
}

.pjf-shop-hero__title-accent {
	color: #0B5FFF;
}

.pjf-shop-hero__text {
	max-width: 700px;
	margin: 0;
	color: #f1f4f8;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 0.25px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.46);
}

/* Même langage visuel que les divisions : démarcation bleu PJF. */
.pjf-shop-hero-divider {
	position: relative;
	left: 50%;
	width: 100vw;
	height: 3px;
	margin: 0 0 0 -50vw;
	background: linear-gradient(
		90deg,
		transparent 4%,
		#0B5FFF 28%,
		#55A5FF 50%,
		rgba(170,183,198,.72) 72%,
		transparent 96%
	);
	box-shadow: 0 0 18px rgba(11,95,255,.48);
}

@media (max-width: 1024px) {
	.pjf-shop-hero__inner {
		padding: 105px 30px 55px;
	}

	.pjf-shop-hero__title {
		font-size: 52px;
		line-height: 58px;
	}
}

@media (max-width: 767px) {
	.pjf-shop-hero::before {
		background-image:
			linear-gradient(90deg, rgba(4,8,15,.36) 0%, rgba(4,8,15,.28) 44%, rgba(4,8,15,.16) 74%, rgba(4,8,15,.08) 100%),
			var(--pjf-shop-hero-bg);
		background-position: center center, 60% center;
		background-size: cover, cover;
	}

	.pjf-shop-hero__inner {
		padding: 90px 22px 45px;
	}

	.pjf-shop-hero__title {
		font-size: 40px;
		line-height: 46px;
	}

	.pjf-shop-hero__text {
		max-width: 700px;
		font-size: 18px;
		line-height: 1.55;
	}
}

.pjf-shop-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 28px;
	width: 100%;
	align-items: start;
}

.pjf-shop-sidebar {
	position: sticky;
	top: 108px;
	width: 100%;
	min-width: 0;
	align-self: start;
}

.pjf-sidebar-card {
	margin: 0 0 20px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(22, 34, 52, 0.98), rgba(17, 28, 44, 0.98));
	border: 1px solid var(--pjf-border);
	border-radius: var(--pjf-radius);
	box-shadow: var(--pjf-shadow-sm);
}

.pjf-sidebar-title {
	position: relative;
	margin: 0;
	padding: 17px 17px 15px;
	color: var(--pjf-text);
	font-size: 13px;
	font-weight: 850;
	line-height: 1.3;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--pjf-border);
}

.pjf-sidebar-title::after {
	position: absolute;
	bottom: -1px;
	left: 17px;
	width: 54px;
	height: 2px;
	content: "";
	background: var(--pjf-blue);
}

.pjf-product-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 46px;
	gap: 8px;
	padding: 14px;
}

.pjf-product-search input[type="search"] {
	width: 100%;
	min-width: 0;
	min-height: 46px;
	padding: 10px 12px;
	font-size: 12px;
}

.pjf-product-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	min-height: 46px;
	padding: 0;
	line-height: 1;
}

.pjf-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.pjf-search-icon svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pjf-category-list {
	margin: 0;
	padding: 7px 0;
	list-style: none;
}

.pjf-category-item {
	margin: 0;
}

.pjf-category-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 15px;
	color: #e6edf7;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.055);
	transition: color var(--pjf-transition), background var(--pjf-transition), padding-left var(--pjf-transition);
}

.pjf-category-item:last-child a {
	border-bottom: 0;
}

.pjf-category-item a:hover,
.pjf-category-item.is-active a {
	padding-left: 20px;
	color: #fff;
	background: var(--pjf-blue-soft);
}

.pjf-category-item.is-active a {
	box-shadow: inset 3px 0 0 var(--pjf-blue);
}

.pjf-category-name {
	flex: 1;
}

.pjf-category-count,
.pjf-brand-count {
	display: inline-flex;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
	font-weight: 850;
	background: var(--pjf-blue);
	border-radius: 999px;
}

.pjf-brand-list {
	display: grid;
	gap: 10px;
	padding: 13px;
}

.pjf-brand-item {
	position: relative;
	display: flex;
	min-height: 82px;
	padding: 13px;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(8, 116, 255, 0.045));
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	transition: transform var(--pjf-transition), border-color var(--pjf-transition), background var(--pjf-transition), box-shadow var(--pjf-transition);
}

.pjf-brand-item:hover,
.pjf-brand-item.is-active {
	color: #fff;
	background: linear-gradient(135deg, rgba(8, 116, 255, 0.18), rgba(255, 255, 255, 0.05));
	border-color: rgba(8, 116, 255, 0.75);
	box-shadow: 0 10px 24px rgba(0, 88, 220, 0.20);
	transform: translateY(-2px);
}

.pjf-brand-logo {
	display: block;
	width: auto;
	max-width: 160px;
	max-height: 50px;
	margin: 0 auto;
	object-fit: contain;
	background: transparent !important;
}

.pjf-brand-name {
	font-size: 14px;
	font-weight: 850;
}

.pjf-brand-count {
	position: absolute;
	top: 7px;
	right: 8px;
	min-width: 22px;
	height: 22px;
	font-size: 9px;
}

.pjf-shop-products {
	width: 100%;
	min-width: 0;
}

.pjf-shop-toolbar {
	display: flex;
	min-height: 48px;
	margin: 0 0 20px;
	padding: 8px 10px;
	align-items: center;
	gap: 12px;
	background: rgba(21, 31, 47, 0.72);
	border: 1px solid var(--pjf-border);
	border-radius: 10px;
}

.pjf-shop-toolbar .woocommerce-result-count {
	margin: 0 auto 0 0;
	padding: 0 6px;
	color: var(--pjf-muted);
	font-size: 12px;
}

.pjf-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.pjf-shop-toolbar .woocommerce-ordering select {
	min-height: 40px;
	padding: 7px 36px 7px 11px;
	color: #f3f7fc !important;
	font-size: 12px;
	font-weight: 650;
	background-color: #0f1a2a !important;
	border-color: rgba(112, 171, 255, 0.34) !important;
	color-scheme: dark;
}

/* V2.5.20 : le menu natif du tri restait gris sur gris dans Chrome/Windows. */
.pjf-shop-toolbar .woocommerce-ordering select option {
	color: #f1f5fa !important;
	background: #111d2e !important;
}

.pjf-shop-toolbar .woocommerce-ordering select option:checked {
	color: #ffffff !important;
	background: #0b5fff !important;
}

.pjf-shop-toolbar .woocommerce-ordering select:focus {
	border-color: #4e96ff !important;
	box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.16) !important;
}

.pjf-shop-filter-toggle {
	display: none;
	min-height: 38px !important;
	padding: 8px 13px !important;
	gap: 7px;
	align-items: center;
	font-size: 12px;
}

.pjf-shop-products ul.products,
.woocommerce .pjf-shop-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 18px !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.pjf-shop-products ul.products::before,
.pjf-shop-products ul.products::after {
	display: none !important;
	content: none !important;
}

.pjf-shop-products ul.products li.product,
.woocommerce .pjf-shop-products ul.products li.product {
	position: relative;
	display: flex;
	float: none !important;
	width: auto !important;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
	padding: 0 0 14px;
	flex-direction: column;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.018));
	border: 1px solid var(--pjf-border);
	border-radius: var(--pjf-radius);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
	transition: transform var(--pjf-transition), border-color var(--pjf-transition), box-shadow var(--pjf-transition), background var(--pjf-transition);
}

.pjf-shop-products ul.products li.product:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(8, 116, 255, 0.035));
	border-color: rgba(8, 116, 255, 0.55);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
	transform: translateY(-4px);
}

.pjf-shop-products ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.pjf-shop-products ul.products li.product img {
	display: block;
	width: 100% !important;
	height: 210px !important;
	margin: 0 !important;
	padding: 16px;
	object-fit: contain;
	object-position: center;
	background: rgba(0, 0, 0, 0.10);
	transition: transform 260ms ease;
}

.pjf-shop-products ul.products li.product:hover img {
	transform: scale(1.035);
}

.pjf-loop-brand {
	display: block;
	margin: 12px 14px 0;
	color: #79adff;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.pjf-shop-products ul.products li.product .woocommerce-loop-product__title {
	min-height: 50px;
	margin: 0;
	padding: 7px 14px 6px !important;
	overflow: hidden;
	color: #fff;
	font-size: 14px !important;
	font-weight: 750;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pjf-shop-products ul.products li.product .price {
	margin: 0;
	padding: 0 14px 12px;
	color: #4e99ff !important;
	font-size: 16px !important;
	font-weight: 850;
}

.pjf-shop-products ul.products li.product .price del {
	color: #7e8998;
	font-size: 12px;
	opacity: 0.85;
}

.pjf-shop-products ul.products li.product .price ins {
	text-decoration: none;
}

.pjf-shop-products ul.products li.product .star-rating {
	margin: 0 14px 10px;
}

.pjf-shop-products ul.products li.product .button,
.pjf-shop-products ul.products li.product .pjf-product-action {
	display: inline-flex !important;
	width: auto !important;
	max-width: calc(100% - 28px);
	min-height: 36px;
	margin: auto 14px 0 !important;
	padding: 8px 14px !important;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	font-size: 10px !important;
	font-weight: 850;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}

.pjf-shop-products ul.products li.product .added_to_cart {
	margin: 8px 14px 0;
	color: #91bcff;
	font-size: 11px;
	font-weight: 700;
}

.pjf-shop-products .onsale {
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	z-index: 2;
	min-width: auto !important;
	min-height: auto !important;
	padding: 6px 9px !important;
	color: #fff !important;
	font-size: 9px !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	text-transform: uppercase;
	background: var(--pjf-blue) !important;
	border-radius: 5px !important;
	box-shadow: 0 7px 18px rgba(0, 80, 200, 0.28);
}

.pjf-shop-products .woocommerce-pagination {
	margin-top: 34px;
}

.pjf-shop-products .woocommerce-pagination ul.page-numbers {
	border: 0;
}

.pjf-shop-products .woocommerce-pagination ul.page-numbers li {
	margin: 0 3px;
	border: 0;
}

.pjf-shop-products .woocommerce-pagination .page-numbers a,
.pjf-shop-products .woocommerce-pagination .page-numbers span {
	display: inline-flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--pjf-surface);
	border: 1px solid var(--pjf-border);
	border-radius: 7px;
}

.pjf-shop-products .woocommerce-pagination .page-numbers .current,
.pjf-shop-products .woocommerce-pagination .page-numbers a:hover {
	background: var(--pjf-blue);
	border-color: var(--pjf-blue);
}

.pjf-shop-products .woocommerce-info {
	grid-column: 1 / -1;
}

/* Informations pratiques partagees par les fiches produit et le catalogue. */
.pjf-shell .pjf-product-info {
	clear: both;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 30px 0 0;
}

.pjf-shop-shell > .pjf-product-info {
	margin-top: 40px;
}

.pjf-shell .pjf-product-info__card {
	position: relative;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 15px;
	min-width: 0;
	min-height: 150px;
	padding: 22px;
	overflow: hidden;
	color: #dce7f5;
	background: linear-gradient(180deg, rgba(22, 34, 52, 0.98), rgba(17, 28, 44, 0.98));
	border: 1px solid rgba(112, 171, 255, 0.24);
	border-radius: var(--pjf-radius-lg);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 20px rgba(11, 95, 255, 0.05);
	transition: transform var(--pjf-transition), border-color var(--pjf-transition), box-shadow var(--pjf-transition), background var(--pjf-transition);
}

.pjf-shell .pjf-product-info__card::before {
	position: absolute;
	top: 0;
	right: 22px;
	left: 22px;
	height: 2px;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(85, 165, 255, 0.82), transparent);
	opacity: 0.72;
}

@media (hover: hover) {
	.pjf-shell .pjf-product-info__card:hover {
		background: linear-gradient(180deg, rgba(25, 39, 60, 0.99), rgba(17, 28, 44, 0.99));
		border-color: rgba(112, 171, 255, 0.42);
		box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), 0 0 24px rgba(11, 95, 255, 0.09);
		transform: translateY(-2px);
	}

	.pjf-shell .pjf-product-info__card:hover .pjf-product-info__icon {
		color: #b6d5ff;
		background: rgba(11, 95, 255, 0.20);
		border-color: rgba(85, 165, 255, 0.48);
	}
}

.pjf-shell .pjf-product-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: #8fbeff;
	background: rgba(11, 95, 255, 0.13);
	border: 1px solid rgba(85, 165, 255, 0.30);
	border-radius: 12px;
	transition: color var(--pjf-transition), background var(--pjf-transition), border-color var(--pjf-transition);
}

.pjf-shell .pjf-product-info__icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pjf-shell .pjf-product-info__content {
	min-width: 0;
}

.pjf-shell .pjf-product-info__content h2 {
	margin: 1px 0 8px;
	color: #fff;
	font-size: 18px;
	line-height: 1.2;
}

.pjf-shell .pjf-product-info__content p {
	margin: 0;
	color: #cbd8e8;
	font-size: 14px;
	line-height: 1.55;
}

.pjf-shell .pjf-product-info__content strong {
	color: #eef5ff;
}

.pjf-shell .pjf-product-info__phone {
	display: inline-block;
	margin-top: 7px;
	color: #75aeff;
	font-size: 17px;
	font-weight: 850;
	text-decoration: none;
}

.pjf-shell .pjf-product-info__phone:hover,
.pjf-shell .pjf-product-info__phone:focus-visible {
	color: #fff;
	text-decoration: underline;
}