/* PeeweePaw Menu — barre de navigation du thème Primrose (#header-navigation). */
:root {
	--pwpm-rose: #fbeee8;
	--pwpm-terra: #de8b6a;
	--pwpm-accent: #b0684d;
	--pwpm-green-bg: #edf2ea;
	--pwpm-green: #3f4d38;
	--pwpm-text: #555;
	--pwpm-line: #f2e8e2;
	--pwpm-font: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--pwpm-bar: #e9a88d;
	--pwpm-bar-h: 52px;
	--pwpm-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Petite barre du haut (Mon compte, Panier, Mes favoris) : fond vert clair, comme le bloc « avantages » de l'accueil */
#topbar {
	background-color: #f2f6ef;
}

/* Barre de menu : fond terracotta clair continu, textes et icônes en blanc avec l'ombre du bandeau */
.navigation-section {
	background-color: var(--pwpm-bar);
}

.navigation-section .toggle,
.navigation-section .toggle:hover,
.navigation-section .toggle:focus {
	color: #fff;
	text-shadow: var(--pwpm-shadow);
}

/* Loupe et panier : icônes à trait fin, épaissies et un peu agrandies pour bien se voir sur la barre */
#navigation .header-search-toggle .icon,
#navigation .header-cart-toggle .icon {
	width: 20px;
	font-size: 18px;
	-webkit-text-stroke: .6px #fff;
}

/* Croix de fermeture de la recherche en blanc */
#navigation .header-search-toggle.active .close::before,
#navigation .header-search-toggle.active .close::after {
	width: 2px;
	background-color: #fff;
	box-shadow: var(--pwpm-shadow);
}

/* Petite fenêtre de recherche : carte arrondie, champ arrondi sur fond vert clair (le thème masque le bouton : on valide avec Entrée) */
#navigation .header-search .header-search-widget {
	width: 340px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	margin-top: 6px;
	padding: 12px;
	border: 1px solid var(--pwpm-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(176, 104, 77, .12);
}

#navigation .header-search .header-search-widget::before {
	display: none;
}

#navigation .header-search .search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

#navigation .header-search .search-form label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

#navigation .header-search .search-form .search-field {
	box-sizing: border-box;
	width: 100%;
	height: 42px !important; /* le site force 25 px sur tous les champs */
	margin: 0;
	padding: 0 16px;
	border: 1px solid #e1e9dc;
	border-radius: 999px;
	background: #f2f6ef;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	color: #333;
	box-shadow: none;
	outline: none;
}

#navigation .header-search .search-form .search-field:focus {
	border-color: #6f8763;
	background: #fff;
}

#navigation .header-search .search-form .search-field::placeholder {
	color: #8a9682;
}

/* Mini panier : pas de bouton « Payer avec PayPal » (extension WooCommerce PayPal Payments) ; PayPal reste proposé au paiement */
.widget_shopping_cart [id^="ppc-button-minicart"],
.woocommerce-mini-cart__buttons [id^="ppc-button-minicart"],
.widget_shopping_cart .ppc-button-wrapper,
.widget_shopping_cart .ppcp-messages {
	display: none !important;
}

/* Barre plus fine (52 px au lieu de 70) ; le thème calcule tout sur 70 px, chaque élément est recentré */
#navigation,
#navigation .navigation-section,
#navigation .header-navigation {
	height: var(--pwpm-bar-h);
}

#navigation .toggle,
#navigation .header-navigation-toggle,
#navigation .header-search-toggle,
#navigation .header-cart-toggle,
#navigation .header-cart-link {
	height: var(--pwpm-bar-h);
	padding-top: calc((var(--pwpm-bar-h) - 20px) / 2);
	padding-bottom: calc((var(--pwpm-bar-h) - 20px) / 2);
}

#navigation .header-navigation-toggle.active ~ div {
	top: var(--pwpm-bar-h);
}

#navigation .header-floating-logo {
	margin: calc((var(--pwpm-bar-h) - 40px) / 2) 0;
}

#navigation .header-cart .cart-count {
	top: calc((var(--pwpm-bar-h) - 30px) / 2);
}

/* Barre collée au diaporama : plus de liseré clair dessous */
#navigation .header-border-bottom {
	display: none;
}

/* Bandeau des offres (extension Fidélité) accroché au-dessus de la barre flottante, sauf sur téléphone (classes posées par pwpm.js) */
@media screen and (min-width: 769px) {
	body.pwpm-bandeau-fixe .peeweepaw-bandeau {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--pwpm-top, 0px);
	}

	body.pwpm-bandeau-fixe .pwpm-bandeau-place {
		height: var(--pwpm-bandeau-h, 0px);
	}
}

/* Entrées de la barre : même police que les titres du pied de page, en gras */
#header-navigation ul.menu > li > a {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .88px;
	text-transform: uppercase;
}

#header-navigation .pwpm-toggle,
#header-navigation .pwpm-account {
	display: none;
}

/* Titres : police et taille des titres du pied de page (« PeeweePaw • Informations utiles »), sans pastille ni patte */
#header-navigation .pwpm-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .88px;
	text-transform: uppercase;
	color: #b0603f;
}

/* Petite patte uniquement devant « Et aussi » */
#header-navigation .pwpm-more > .pwpm-title::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23de8b6a'%3E%3Ccircle cx='7' cy='9' r='2.2'/%3E%3Ccircle cx='11' cy='5.5' r='2.2'/%3E%3Ccircle cx='16' cy='6' r='2.2'/%3E%3Ccircle cx='19' cy='10.5' r='2.2'/%3E%3Cpath d='M8.5 17.5c0-2.8 2.3-5.5 4.8-5.5s4.7 2.7 4.7 5.5c0 1.8-1.4 2.8-3 2.3-1.1-.3-2.3-.3-3.4 0-1.6.5-3.1-.5-3.1-2.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Ordinateur ---------- */
@media screen and (min-width: 1024px) {
	/* Le panneau prend toute la largeur de la barre (et non plus la largeur de l'élément survolé). */
	#header-navigation,
	#header-navigation ul.menu > li.pwpm-mega {
		position: static;
	}

	/* Entrées sur la barre ; seule l'entrée survolée (ou ouverte au clavier) est soulignée en pointillés blancs */
	#header-navigation ul.menu > li {
		padding: 0;
	}

	/* Texte blanc avec la même ombre que le bandeau du haut, pour ressortir sur le rose */
	#header-navigation ul.menu > li > a {
		padding: calc((var(--pwpm-bar-h) - 20px) / 2) 14px;
		color: #fff;
		text-shadow: var(--pwpm-shadow);
		text-decoration: none; /* pas de soulignement transparent : l'ombre le rendrait visible */
	}

	#header-navigation ul.menu > li:hover > a,
	#header-navigation ul.menu > li.focus > a,
	#header-navigation ul.menu > li:focus-within > a {
		color: #fff;
		text-decoration: underline dotted #fff;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}

	/* Grand panneau horizontal */
	#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel {
		left: 0;
		right: 0;
		top: 100%;
		display: grid;
		grid-template-columns: repeat(var(--pwpm-cols, 4), minmax(0, 1fr)) 230px;
		/* 1re ligne à la hauteur de la colonne au-dessus de « Et aussi » : la place en trop des colonnes longues va à la 2e ligne */
		grid-template-rows: auto 1fr;
		gap: 16px 28px;
		align-items: start;
		margin: 0;
		padding: 26px 30px 28px;
		min-width: 0;
		white-space: normal;
		border: 1px solid var(--pwpm-line);
		border-top: 0;
		border-radius: 0 0 16px 16px;
		background: #fff;
		box-shadow: 0 10px 24px rgba(176, 104, 77, .08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}

	#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel::before {
		display: none;
	}

	#header-navigation ul.menu > li.pwpm-mega:hover > ul.pwpm-panel,
	#header-navigation ul.menu > li.pwpm-mega.focus > ul.pwpm-panel,
	#header-navigation ul.menu > li.pwpm-mega:focus-within > ul.pwpm-panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	@media (min-width: 1200px) {
		#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel {
			left: -40px;
			right: -40px;
		}
	}

	/* Petits portables : tout tient sur une ligne (Contact ne passe plus dessous) et colonnes plus étroites */
	@media (max-width: 1199px) {
		#header-navigation ul.menu > li > a {
			padding: calc((var(--pwpm-bar-h) - 20px) / 2) 9px;
		}

		#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel {
			grid-template-columns: repeat(var(--pwpm-cols, 4), minmax(0, 1fr)) 200px;
			gap: 16px 22px;
			padding: 22px 22px 24px;
		}
	}

	#header-navigation ul.menu > li.pwpm-mega.pwpm-shut > ul.pwpm-panel {
		opacity: 0;
		visibility: hidden;
	}

	/* Colonnes : une par famille ; « Et aussi » sous la famille qui le précède dans le menu (colonne posée par pwpm.js) ; encart à droite */
	#header-navigation .pwpm-panel > li {
		min-width: 0;
		padding: 0;
	}

	#header-navigation .pwpm-panel > li.pwpm-group {
		grid-row: span 2;
	}

	#header-navigation .pwpm-panel > li.pwpm-group.pwpm-above-more {
		grid-row: 1;
	}

	#header-navigation .pwpm-panel > li.pwpm-more {
		grid-column: 1 / -2;
	}

	#header-navigation .pwpm-panel > li.pwpm-more--under {
		grid-row: 2;
	}

	#header-navigation .pwpm-panel > li.pwpm-card {
		grid-column: -2 / -1;
		grid-row: 1 / span 2;
		padding: 18px 18px 20px;
		border-radius: 16px;
		background: var(--pwpm-rose);
	}

	#header-navigation .pwpm-panel a {
		font-family: var(--pwpm-font);
		font-size: 13.5px;
		letter-spacing: .2px;
		text-transform: none;
		line-height: 1.3;
		color: var(--pwpm-text);
	}

	#header-navigation .pwpm-panel a:hover,
	#header-navigation .pwpm-panel a:focus {
		color: var(--pwpm-accent);
	}

	/* Titres de colonne (« Accessoires pour chien »…) */
	#header-navigation .pwpm-panel > li.pwpm-group > a {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: Montserrat, sans-serif;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: .88px;
		text-transform: uppercase;
		color: #b0603f;
	}

	#header-navigation .pwpm-panel > li.pwpm-group > a:hover,
	#header-navigation .pwpm-panel > li.pwpm-group > a:focus {
		color: var(--pwpm-terra);
	}

	#header-navigation .pwpm-panel > li.pwpm-group > a::after {
		display: none;
	}

	#header-navigation .pwpm-panel > li.pwpm-group > a,
	#header-navigation .pwpm-panel > li > .pwpm-title {
		margin-bottom: 10px;
		padding: 0 0 8px;
		border-bottom: 1px solid var(--pwpm-line);
	}

	#header-navigation .pwpm-card > .pwpm-title {
		border-bottom-color: rgba(176, 96, 63, .18);
	}

	/* Listes dans les colonnes : toujours visibles, plus de sous-sous-menu sur le côté */
	#header-navigation .pwpm-panel ul.sub-menu {
		position: static;
		left: auto;
		display: block;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		white-space: normal;
	}

	#header-navigation .pwpm-panel ul.sub-menu::before {
		display: none;
	}

	#header-navigation .pwpm-panel ul.sub-menu li {
		padding: 1px 0;
		float: none;
	}

	#header-navigation .pwpm-panel li.menu-item-has-children > a::after {
		display: none;
	}

	#header-navigation .pwpm-panel > li.pwpm-more:not(.pwpm-more--under) > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
		column-gap: 28px;
	}

	/* Encart rose « À ne pas manquer » : pastilles blanches */
	#header-navigation .pwpm-card ul.sub-menu li {
		padding: 0 0 8px;
	}

	#header-navigation .pwpm-card ul.sub-menu a {
		display: block;
		padding: 8px 14px;
		border-radius: 12px;
		background: #fff;
		font-size: 13.5px;
		transition: background-color .15s, color .15s;
	}

	#header-navigation .pwpm-card ul.sub-menu a:hover,
	#header-navigation .pwpm-card ul.sub-menu a:focus {
		background: var(--pwpm-terra);
		color: #fff;
	}
}

/* ---------- Tablette et mobile (menu « burger ») ---------- */
@media screen and (max-width: 1023px) {
	#header-navigation > div {
		border-radius: 0 0 16px 16px;
		box-shadow: 0 10px 24px rgba(176, 104, 77, .10);
	}

	#header-navigation > div > ul.menu {
		max-height: none;
		overflow: visible;
		padding: 10px 12px 14px;
		white-space: normal;
	}

	.navigation-section.floating #header-navigation > div > ul.menu {
		max-height: calc(100vh - 80px - var(--pwpm-bandeau-h, 0px));
		overflow-y: auto;
	}

	#header-navigation ul.menu > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--pwpm-line);
	}

	#header-navigation ul.menu > li:last-child {
		border-bottom: 0;
	}

	#header-navigation ul.menu > li > a {
		flex: 1 1 auto;
		padding: 13px 10px;
		font-size: 12px;
	}

	#header-navigation ul.menu > li.current-menu-item > a,
	#header-navigation ul.menu > li.current-menu-ancestor > a {
		color: var(--pwpm-accent);
	}

	#header-navigation li.menu-item-has-children > a::after {
		display: none;
	}

	/* Bouton ouvrir / fermer (chevron) */
	body.pwpm-ready #header-navigation .pwpm-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--pwpm-rose);
		color: var(--pwpm-accent);
		cursor: pointer;
	}

	#header-navigation .pwpm-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s;
	}

	#header-navigation .pwpm-open > .pwpm-toggle {
		background: var(--pwpm-terra);
		color: #fff;
	}

	#header-navigation .pwpm-open > .pwpm-toggle::before {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	body.pwpm-ready #header-navigation li.menu-item-has-children > ul.sub-menu {
		display: none;
	}

	body.pwpm-ready #header-navigation li.menu-item-has-children.pwpm-open > ul.sub-menu {
		display: block;
	}

	#header-navigation ul.menu ul.sub-menu {
		flex: 1 1 100%;
		padding: 0 0 12px;
	}

	#header-navigation ul.menu ul.sub-menu li {
		padding: 0;
	}

	#header-navigation ul.menu ul.sub-menu a {
		font-family: var(--pwpm-font);
		text-transform: none;
		letter-spacing: .2px;
		font-size: 14px;
	}

	/* Panneau de la collection */
	body.pwpm-ready #header-navigation li.pwpm-mega.pwpm-open > ul.pwpm-panel {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	#header-navigation .pwpm-panel > li {
		order: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0;
	}

	#header-navigation .pwpm-panel > li.pwpm-card {
		order: 1;
	}

	#header-navigation .pwpm-panel > li.pwpm-more {
		order: 3;
	}

	#header-navigation .pwpm-panel > li.pwpm-group {
		padding: 2px 8px 2px 0;
		border-radius: 12px;
		background: #fcf7f4;
	}

	#header-navigation .pwpm-panel > li.pwpm-group > a {
		flex: 1 1 auto;
		padding: 10px 14px;
		color: var(--pwpm-text);
	}

	#header-navigation .pwpm-panel > li.pwpm-group .pwpm-toggle {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		background: #fff;
	}

	#header-navigation .pwpm-panel > li.pwpm-group.pwpm-open > .pwpm-toggle {
		background: var(--pwpm-terra);
		color: #fff;
	}

	#header-navigation .pwpm-panel > li > .pwpm-title,
	#header-navigation .pwpm-account > .pwpm-title {
		flex: 0 0 auto;
		margin: 8px 0 6px;
	}

	/* Pastilles : tout est visible d'un coup, retour à la ligne automatique */
	#header-navigation .pwpm-card > ul.sub-menu,
	#header-navigation .pwpm-more > ul.sub-menu,
	#header-navigation .pwpm-group > ul.sub-menu,
	#header-navigation .pwpm-account > ul.sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 0 0 4px;
	}

	body.pwpm-ready #header-navigation .pwpm-group.pwpm-open > ul.sub-menu {
		display: flex;
		padding: 0 6px 10px 10px;
	}

	#header-navigation .pwpm-card ul.sub-menu a,
	#header-navigation .pwpm-more ul.sub-menu a,
	#header-navigation .pwpm-group ul.sub-menu a,
	#header-navigation .pwpm-account ul.sub-menu a {
		display: inline-block;
		padding: 7px 12px;
		border-radius: 999px;
		font-size: 13px;
		line-height: 1.3;
	}

	#header-navigation .pwpm-card ul.sub-menu a {
		background: var(--pwpm-rose);
		color: var(--pwpm-accent);
	}

	#header-navigation .pwpm-more ul.sub-menu a,
	#header-navigation .pwpm-group ul.sub-menu a {
		background: #fff;
		border: 1px solid var(--pwpm-line);
		color: var(--pwpm-text);
	}

	#header-navigation .pwpm-account {
		display: flex;
		flex-wrap: wrap;
		padding-top: 6px;
	}

	#header-navigation .pwpm-account ul.sub-menu a {
		background: var(--pwpm-green-bg);
		color: var(--pwpm-green);
	}
}