/* ==========================================================
   LAUXANE — HEADER MOBILE
   Menu | Recherche | Logo | Compte | Panier

   Fichier conseillé :
   /astra-child/css/header-mobile.css
   ========================================================== */

.lh-mobile-header{
	display:none;
}

@media (max-width:921px){

	/* ======================================================
	   1. BASCULE DESKTOP / MOBILE
	   ====================================================== */

	body #masthead,
	body header#masthead,
	body .site-header{
		display:none !important;
	}

	body .lh-mobile-header{
		display:block !important;
		position:sticky;
		top:0;
		z-index:1000;
		width:100%;
		margin:0;
		padding:0;
		background:rgba(255,253,249,.96);
		border-bottom:none;
		box-shadow:none;
		transform:translateY(0);
		transition:
			transform .24s cubic-bezier(.22,.61,.36,1),
			background-color .20s ease,
			box-shadow .20s ease,
			border-color .20s ease;
		will-change:transform;
	}

	/* WordPress admin bar : le header se colle juste dessous. */
	body.admin-bar .lh-mobile-header{
		top:46px;
	}


	/* ======================================================
	   2. BARRE PRINCIPALE
	   ====================================================== */

	.lh-mobile-header__bar{
		display:grid !important;
		grid-template-columns:38px 38px minmax(0,1fr) 38px 38px;
		align-items:center;
		column-gap:5px;

		width:100%;
		min-height:74px;
		margin:0;
		padding:0 12px;

		box-sizing:border-box;
	}


	/* ======================================================
	   3. ICÔNES
	   ====================================================== */

	.lh-mobile-header__icon{
		position:relative;

		display:flex !important;
		align-items:center;
		justify-content:center;

		width:36px !important;
		height:36px !important;
		min-width:36px !important;
		min-height:36px !important;

		margin:0 !important;
		padding:0 !important;

		border:0 !important;
		border-radius:50% !important;
		background:transparent !important;
		box-shadow:none !important;

		color:#805424 !important;
		-webkit-text-fill-color:#805424 !important;

		line-height:1 !important;
		text-decoration:none !important;
		cursor:pointer;

		transition:
			background-color .18s ease,
			color .18s ease,
			transform .12s ease;
	}

	.lh-mobile-header__icon:hover,
	.lh-mobile-header__icon:focus-visible{
		background:rgba(243,235,224,.74) !important;
		color:#795324 !important;
		outline:none;
	}

	.lh-mobile-header__icon:active{
		transform:scale(.95);
	}

	.lh-mobile-header__icon svg{
		display:block !important;

		width:21px !important;
		height:21px !important;
		max-width:21px !important;
		max-height:21px !important;

		margin:0 !important;
		padding:0 !important;

		fill:none !important;
		stroke:currentColor !important;
		stroke-width:1.65 !important;
		stroke-linecap:round;
		stroke-linejoin:round;
	}

	.lh-mobile-header__menu{
		grid-column:1;
		justify-self:start;
	}

	.lh-mobile-header__search-toggle{
		grid-column:2;
		justify-self:start;
	}

	.lh-mobile-header__account{
		grid-column:4;
		justify-self:end;
	}

	.lh-mobile-header__cart{
		grid-column:5;
		justify-self:end;
	}


	/* ======================================================
	   4. LOGO
	   ====================================================== */

	.lh-mobile-header__logo{
		grid-column:3;

		display:flex !important;
		align-items:center;
		justify-content:center;

		width:100%;
		min-width:0;

		margin:0 !important;
		padding:3px 4px !important;

		box-sizing:border-box;
	}

	.lh-mobile-header__logo .custom-logo-link{
		display:flex !important;
		align-items:center;
		justify-content:center;

		width:auto !important;
		height:auto !important;

		margin:0 !important;
		padding:0 !important;

		line-height:1 !important;
	}

	.lh-mobile-header__logo img,
	.lh-mobile-header__logo img.custom-logo{
		display:block !important;

		width:auto !important;
		height:auto !important;

		max-width:132px !important;
		max-height:55px !important;

		margin:0 auto !important;
		padding:0 !important;

		object-fit:contain !important;
	}

	.lh-mobile-header__logo-text{
		color:#24272c !important;

		font-family:var(--heading-font,"Cormorant Garamond",serif);
		font-size:23px;
		line-height:1;

		text-decoration:none !important;
		white-space:nowrap;
	}


	/* ======================================================
	   5. COMPTEUR PANIER
	   ====================================================== */

	.lh-mobile-header__cart-count{
		position:absolute !important;
		top:-1px !important;
		right:-2px !important;

		display:flex !important;
		align-items:center;
		justify-content:center;

		width:auto !important;
		min-width:16px !important;
		height:16px !important;

		margin:0 !important;
		padding:0 4px !important;

		border:2px solid #fffdf9 !important;
		border-radius:999px !important;

		background:#8a5a20 !important;
		color:#fffdf9 !important;
		-webkit-text-fill-color:#fffdf9 !important;

		font:600 9px/1 Inter,system-ui,sans-serif !important;

		box-sizing:border-box;
	}

	.lh-mobile-header__cart-count.is-empty{
		display:none !important;
	}


	/* ======================================================
	   6. RECHERCHE DÉPLIABLE
	   ====================================================== */

	.lh-mobile-search{
		width:100%;

		background:#fbf7f2;
		border-top:1px solid rgba(234,223,210,.82);
	}

	.lh-mobile-search[hidden]{
		display:none !important;
	}

	.lh-mobile-search__inner{
		width:min(calc(100% - 28px),520px);

		margin:0 auto;
		padding:12px 0 14px;
	}

	.lh-mobile-search form,
	.lh-mobile-search .woocommerce-product-search{
		display:flex !important;
		align-items:center;
		gap:8px;

		width:100%;

		margin:0 !important;
		padding:0 !important;
	}

	.lh-mobile-search input[type="search"],
	.lh-mobile-search input[name="s"]{
		flex:1 1 auto;

		width:100% !important;
		min-width:0;
		height:42px !important;

		margin:0 !important;
		padding:0 14px !important;

		border:1px solid rgba(156,107,47,.30) !important;
		border-radius:999px !important;

		background:#fffdf9 !important;
		color:#24272c !important;

		font:400 14px/1.2 var(--body-font,Inter,sans-serif) !important;

		box-shadow:none !important;
		outline:none !important;
	}

	.lh-mobile-search input[type="search"]:focus,
	.lh-mobile-search input[name="s"]:focus{
		border-color:rgba(128,84,36,.60) !important;
		box-shadow:0 0 0 3px rgba(156,107,47,.10) !important;
	}

	.lh-mobile-search button[type="submit"]{
		flex:0 0 auto;

		width:auto !important;
		min-width:auto !important;
		height:40px !important;

		margin:0 !important;
		padding:0 15px !important;

		border:1px solid #8a5a20 !important;
		border-radius:999px !important;

		background:#8a5a20 !important;
		color:#fffdf9 !important;
		-webkit-text-fill-color:#fffdf9 !important;

		font:600 12px/1 Inter,system-ui,sans-serif !important;
		letter-spacing:0 !important;
		text-transform:none !important;

		box-shadow:none !important;
	}


	/* ======================================================
	   7. EMPÊCHE LES STYLES GÉNÉRIQUES DU THÈME DE GROSSIR
	      LES SVG / LIENS DU HEADER
	   ====================================================== */

	body .lh-mobile-header a,
	body .lh-mobile-header button{
		box-sizing:border-box;
	}

	body .lh-mobile-header svg{
		overflow:visible;
	}


	/* État après quelques pixels de scroll */
	.lh-mobile-header.is-scrolled{
		background:rgba(255,253,249,.985);
		box-shadow:0 5px 18px rgba(31,35,40,.07);
	}

	/* Masquage lors du scroll vers le bas */
	.lh-mobile-header.is-hidden{
		transform:translateY(-100%);
	}

	/* La recherche ouverte doit toujours rester visible */
	.lh-mobile-header.is-search-open{
		transform:translateY(0) !important;
	}

}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media (max-width:380px){

	.lh-mobile-header__bar{
		grid-template-columns:34px 34px minmax(0,1fr) 34px 34px;
		column-gap:2px;

		min-height:70px;
		padding:0 8px;
	}

	.lh-mobile-header__icon{
		width:33px !important;
		height:33px !important;
		min-width:33px !important;
		min-height:33px !important;
	}

	.lh-mobile-header__icon svg{
		width:19px !important;
		height:19px !important;
		max-width:19px !important;
		max-height:19px !important;
	}

	.lh-mobile-header__logo img,
	.lh-mobile-header__logo img.custom-logo{
		max-width:112px !important;
		max-height:50px !important;
	}
}