/* =============================================================================
   Bio Lotus — Header & Mega-Dropdown Styles
   Loaded sitewide (all pages) via blf-header handle.

   Covers:
     - .bl-mega-drop panel (position:fixed, visibility/opacity animation)
     - Inner grid layout (180px intro | 1fr cats | 200px featured)
     - Category columns: image hover scale, picks list, CTA arrow
     - Featured column: image, name, CTA button
     - Bottom quick-links bar
     - Responsive: panel hidden ≤ 900px (Blocksy mobile menu takes over)
   ============================================================================= */


/* ── 1. PANEL — positioning & show/hide ───────────────────────────────────── */

.bl-mega-drop {
	position:   fixed;
	top:        var(--bl-header-h, 108px);
	left:       0;
	right:      0;
	z-index:    299; /* below Blocksy header (z=300), above page */

	background:   var(--bl-surface);
	border-top:   1px solid var(--bl-line);
	border-bottom:1px solid var(--bl-line);
	box-shadow:   0 14px 40px rgba(28, 23, 16, 0.10);

	/* Hidden by default */
	visibility:  hidden;
	opacity:     0;
	transform:   translateY(-6px);
	pointer-events: none;
	transition:
		opacity   220ms var(--bl-ease),
		transform 220ms var(--bl-ease),
		visibility 0ms 220ms; /* delay so it snaps invisible after fade-out */
}

.bl-mega-drop.is-open {
	visibility:  visible;
	opacity:     1;
	transform:   none;
	pointer-events: auto;
	transition:
		opacity   220ms var(--bl-ease),
		transform 220ms var(--bl-ease),
		visibility 0ms 0ms;
}


/* ── 2. INNER GRID ─────────────────────────────────────────────────────────── */

.bl-mega-drop__inner {
	max-width: var(--bl-max-width);
	margin:    0 auto;
	padding:   40px var(--bl-padding-x);
	display:   grid;
	gap:       0;
	/* grid-template-columns is set via inline style in PHP
	   Fallback: 180px + 3 cats + 200px featured */
	grid-template-columns: 180px repeat(3, 1fr) 200px;
}


/* ── 3. COLUMNS — shared ───────────────────────────────────────────────────── */

.bl-mega-drop__col {
	padding: 0 28px;
}

/* Intro: no padding-start, right border */
.bl-mega-drop__col--intro {
	padding-inline-start: 0;
	padding-inline-end:   28px;
	border-inline-end:    1px solid var(--bl-line);
}

/* Category dividers between adjacent cat cols */
.bl-mega-drop__col--cat + .bl-mega-drop__col--cat {
	border-inline-start: 1px solid var(--bl-line);
}

/* Featured: left border, no padding-end */
.bl-mega-drop__col--feat {
	padding-inline-start: 28px;
	padding-inline-end:   0;
	border-inline-start:  1px solid var(--bl-line);
}


/* ── 4. INTRO COLUMN ───────────────────────────────────────────────────────── */

.bl-mega-drop__eyebrow {
	display:        block;
	font-family:    var(--bl-font-sans);
	font-size:      9px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color:          var(--bl-accent);
	margin-bottom:  16px;
}

.bl-mega-drop__heading {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(22px, 2vw, 28px);
	color:          var(--bl-text);
	letter-spacing: .04em;
	line-height:    1.1;
	margin-bottom:  16px;
}
.bl-mega-drop__heading em { font-style: italic; }

.bl-mega-drop__intro {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	color:          var(--bl-text-faint);
	line-height:    1.7;
	letter-spacing: .02em;
}


/* ── 5. CATEGORY COLUMNS ───────────────────────────────────────────────────── */

/* Image wrapper — fixed 150×150 thumbnail, not full-column-width */
.bl-mega-drop__cat-img-wrap {
	display:       block;
	overflow:      hidden;
	width:         150px;
	height:        150px;
	margin-bottom: 16px;
	border-radius: 2px;
	flex-shrink:   0;
}

.bl-mega-drop__cat-img,
.bl-mega-drop__cat-ph {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 360ms var(--bl-ease);
}

/* Scale image on column hover */
.bl-mega-drop__col--cat:hover .bl-mega-drop__cat-img,
.bl-mega-drop__col--cat:hover .bl-mega-drop__cat-ph {
	transform: scale(1.03);
}

/* Heading + count row */
.bl-mega-drop__cat-head {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin-bottom:   6px;
}

.bl-mega-drop__cat-name,
.bl-mega-drop__cat-name a {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      20px;
	color:          var(--bl-text);
	letter-spacing: .03em;
	text-decoration: none;
	transition:     color 180ms var(--bl-ease);
}
.bl-mega-drop__cat-name a:hover { color: var(--bl-accent); }

.bl-mega-drop__cat-count {
	font-family: var(--bl-font-sans);
	font-size:   10px;
	color:       var(--bl-text-faint);
}

/* Short category description */
.bl-mega-drop__cat-desc {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	color:          var(--bl-text-faint);
	letter-spacing: .06em;
	margin-bottom:  14px;
	line-height:    1.5;
}

/* Product picks list */
.bl-mega-drop__picks {
	list-style:    none;
	margin:        0 0 14px;
	padding:       12px 0 0;
	border-top:    1px solid var(--bl-line);
	display:       flex;
	flex-direction: column;
	gap:           7px;
}

.bl-mega-drop__picks li {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
}

.bl-mega-drop__picks a {
	font-family:     var(--bl-font-sans);
	font-size:       12px;
	color:           var(--bl-text-mid);
	text-decoration: none;
	transition:      color 180ms var(--bl-ease);
}
.bl-mega-drop__picks a:hover { color: var(--bl-accent); }

/* "Voir tout" CTA */
.bl-mega-drop__cat-cta {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-family:     var(--bl-font-sans);
	font-size:       10px;
	letter-spacing:  .16em;
	text-transform:  uppercase;
	font-weight:     500;
	color:           var(--bl-text-mid);
	text-decoration: none;
	transition:      color 200ms var(--bl-ease);
}
.bl-mega-drop__cat-cta:hover,
.bl-mega-drop__col--cat:hover .bl-mega-drop__cat-cta {
	color: var(--bl-accent);
}

/* Arrow nudge on CTA hover */
.bl-mega-drop__cat-cta .bl-icon {
	transition: transform 220ms var(--bl-ease);
}
.bl-mega-drop__cat-cta:hover .bl-icon {
	transform: translateX(4px);
}


/* ── 6. FEATURED COLUMN ────────────────────────────────────────────────────── */

.bl-mega-drop__feat-img-wrap {
	display:       block;
	overflow:      hidden;
	height:        130px;
	margin-bottom: 14px;
	border-radius: 1px;
}

.bl-mega-drop__feat-img,
.bl-mega-drop__feat-ph {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 360ms var(--bl-ease);
}
.bl-mega-drop__feat-img-wrap:hover .bl-mega-drop__feat-img,
.bl-mega-drop__feat-img-wrap:hover .bl-mega-drop__feat-ph {
	transform: scale(1.03);
}

.bl-mega-drop__feat-name,
.bl-mega-drop__feat-name a {
	display:         block;
	font-family:     var(--bl-font-serif);
	font-weight:     300;
	font-size:       16px;
	color:           var(--bl-text);
	letter-spacing:  .03em;
	text-decoration: none;
	margin-bottom:   4px;
	transition:      color 180ms var(--bl-ease);
}
.bl-mega-drop__feat-name a:hover { color: var(--bl-accent); }

.bl-mega-drop__feat-desc {
	font-family:   var(--bl-font-sans);
	font-size:     11px;
	color:         var(--bl-text-faint);
	line-height:   1.6;
	margin-bottom: 14px;
}

.bl-mega-drop__feat-cta {
	display:         block;
	width:           100%;
	background:      var(--bl-bold);
	color:           #FDFAF2;
	padding:         9px 0;
	border-radius:   2px;
	font-family:     var(--bl-font-sans);
	font-size:       10px;
	letter-spacing:  .16em;
	text-transform:  uppercase;
	font-weight:     500;
	text-align:      center;
	text-decoration: none;
	transition:      opacity 180ms var(--bl-ease);
}
.bl-mega-drop__feat-cta:hover {
	opacity: .88;
	color:   #FDFAF2;
}


/* ── 7. BOTTOM QUICK-LINKS BAR ─────────────────────────────────────────────── */

.bl-mega-drop__bar {
	background:   var(--bl-bg-alt);
	border-top:   1px solid var(--bl-line);
	padding:      14px var(--bl-padding-x);
}

.bl-mega-drop__bar-inner {
	max-width:       var(--bl-max-width);
	margin:          0 auto;
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             24px;
	flex-wrap:       wrap;
}

.bl-mega-drop__bar-link {
	font-family:     var(--bl-font-sans);
	font-size:       11px;
	letter-spacing:  .10em;
	color:           var(--bl-text-mid);
	text-decoration: none;
	font-weight:     400;
	transition:      color 180ms var(--bl-ease);
	white-space:     nowrap;
}
.bl-mega-drop__bar-link:hover { color: var(--bl-text); }

.bl-mega-drop__bar-link--accent {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	color:          var(--bl-accent);
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: .16em;
}
.bl-mega-drop__bar-link--accent:hover { color: var(--bl-bold); }
.bl-mega-drop__bar-link--accent .bl-icon {
	transition: transform 220ms var(--bl-ease);
}
.bl-mega-drop__bar-link--accent:hover .bl-icon {
	transform: translateX(3px);
}


/* ── 8. RESPONSIVE ─────────────────────────────────────────────────────────── */

/* Tablet: compress inner padding */
@media (max-width: 1200px) {
	.bl-mega-drop__inner {
		padding: 32px var(--bl-padding-x);
	}
	.bl-mega-drop__col {
		padding: 0 18px;
	}
}

/* Mobile / narrow: hide entirely (Blocksy's hamburger menu takes over) */
@media (max-width: 899px) {
	.bl-mega-drop {
		display: none !important;
	}
}