/* HindBoutik Menu — CSS unifié mobile + desktop (même HTML, même JS) */

.hbm-menu {
	position: fixed;
	inset: 0;
	background: #FCFAF8;
	color: #1C0E13;
	font-family: 'Jost', sans-serif;
	display: flex;
	flex-direction: column;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease;
	top:0;
}
body.logged-in.admin-bar .hbm-menu{top:32px;}

.hbm-menu.is-open {
	visibility: visible;
	opacity: 1;
}

.hbm-menu * {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.hbm-menu a {
	color: inherit;
	text-decoration: none;
}

/* Bouton burger (affiché dans le thème via le shortcode [hindboutik_burger]) */
.hbm-burger {
	width: 32px;
	height: 22px;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.hbm-burger span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #1C0E13;
	transition: transform .2s ease, opacity .2s ease;
}
.hbm-burger span:nth-child(1) { top: 0; }
.hbm-burger span:nth-child(2) { top: 10px; }
.hbm-burger span:nth-child(3) { top: 20px; }

.hbm-head {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	padding: 16px 18px 10px;
	flex-shrink: 0;
}
.hbm-logo {
	font-family: 'Marcellus', serif;
	font-size: 1.35rem;
	color: #941B51;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}
.hbm-close {
	font-size: 1.15rem;
	opacity: 0.5;
	text-align: right;
	cursor: pointer;
}

.hbm-search {
	padding: 8px 18px 14px;
	flex-shrink: 0;
}
/* Le style précis du champ FiboSearch est piloté par les réglages du plugin
   (Réglages > FiboSearch > Personnalisation). Ce conteneur assure juste
   la cohérence de largeur/marges avec le reste du menu. */
.hbm-search .dgwt-wcas-search-wrapp {
	width: 100% !important;
}
.hbm-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp, .hbm-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
    background-color: transparent;
}

.hbm-tabs {
	display: flex;
	border-bottom: 1px solid rgba(28, 14, 19, 0.1);
	flex-shrink: 0;
	padding: 0 18px;
}
.hbm-tab {
	flex: 1;
	text-align: center;
	padding: 13px 4px;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	opacity: 0.5;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
}
.hbm-tab.on {
	opacity: 1;
	font-weight: 700;
	border-bottom-color: #1C0E13;
}

.hbm-body {
	flex: 1;
	overflow-y: auto;
	padding: 4px 18px 20px;
}

.hbm-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid rgba(28, 14, 19, 0.1);
	transition: background .15s;
}
.hbm-item:active { background: #FBEFF4; }
.hbm-item .hbm-nom {
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.hbm-item .hbm-arr { opacity: 0.4; }
.hbm-item.hbm-promo .hbm-nom,
.hbm-item.hbm-promo .hbm-arr,
.hbm-item.hbm-toutvoir .hbm-nom,
.hbm-item.hbm-toutvoir .hbm-arr {
	color: #D0126A;
	opacity: 1;
}

.hbm-vgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 12px;
	padding: 16px 0 6px;
}
.hbm-vgrid .hbm-v-img {
	aspect-ratio: 1 / 1.08;
	overflow: hidden;
	border-radius: 2px;
	background: #F2ECE6;
	margin-bottom: 7px;
}
.hbm-vgrid .hbm-v-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hbm-vgrid .hbm-v-nom {
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 600;
}
.hbm-vgrid a:active .hbm-v-img { opacity: 0.85; }

.hbm-grp {
	font-size: 0.66rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	opacity: 0.45;
	padding: 20px 0 4px;
	font-weight: 600;
}

.hbm-foot-links { padding: 8px 0 4px; }
.hbm-foot-links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	font-size: 0.9rem;
	opacity: 0.75;
}
.hbm-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	flex-shrink: 0;
}

.hbm-boutique {
	border-top: 1px solid rgba(28, 14, 19, 0.1);
	padding: 13px 18px calc(13px + env(safe-area-inset-bottom));
	font-size: 0.78rem;
	opacity: 0.75;
	text-align: center;
	flex-shrink: 0;
}
.hbm-boutique b { color: #941B51; font-weight: 600; }

/* --- Desktop : même structure, colonne centrée --- */
@media (min-width: 900px) {
	.hbm-head {
		grid-template-columns: 60px 1fr 60px;
		padding: 22px 34px;
		border-bottom: 1px solid rgba(28, 14, 19, 0.1);
	}
	.hbm-logo { font-size: 1.5rem; }
	.hbm-search,
	.hbm-tabs,
	.hbm-body,
	.hbm-boutique {
		max-width: 560px;
		margin: 0 auto;
		padding-left: 24px;
		padding-right: 24px;
		width: 100%;
	}
	.hbm-tabs { padding-top: 22px; }
}