/* ============================================================
 * Mega Menu — frontend region scaffolding + block styling.
 *
 * Scope: only the markup emitted by Ellisons_Mega_Menu_Walker
 * (see wp-content/themes/ellisons/modules/mega-menu/render-blocks.php).
 *
 * Existing classes from assets/css/header.css are NOT touched here.
 * .header__mega-menu, .mega-menu__list, .mega-menu__item,
 * .mega-menu__item--title, .mega-menu__link continue to be owned by
 * header.css. This file adds:
 *   - Sections / columns    .mega-menu__section, .mega-menu__column,
 *                           .mega-menu__column--{stack,inline}
 *   - Block-type wrappers   .mega-menu__block--{banner,product_grid,...}
 *   - Empty-state           .mega-menu__section--empty / .mega-menu__empty
 *   - Width modifier         .mega-menu--full
 *   - Per-block visual      banner overlay + hover zoom, product card, etc.
 * ============================================================ */

/* ── Layout modifiers ─────────────────────────────────────── */

.header__mega-menu.mega-menu--full {
	left: 0;
	right: 0;
	width: 100%;
}

.header__mega-menu.mega-menu--full > .container-fluid {
	max-width: none;
	padding-left: clamp(20px, 4vw, 60px);
	padding-right: clamp(20px, 4vw, 60px);
}

/* Thin, unobtrusive scrollbar for when the panel scrolls (max-height kicks
   in on tall menus — see .header__mega-menu in header.css). Tuned for the
   dark panel background. */
.header__mega-menu { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.header__mega-menu::-webkit-scrollbar { width: 8px; }
.header__mega-menu::-webkit-scrollbar-track { background: transparent; }
.header__mega-menu::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}
.header__mega-menu::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* ── Sections (rows) & columns ───────────────────────────────
 *  A panel is an ordered list of sections; each section is a Bootstrap
 *  `.row` of `.col-lg-{span}` columns. Sections have NO separator border
 *  (only vertical spacing between them). Columns get a light vertical
 *  divider between them — desktop only (on mobile columns stack to
 *  full width, where a left border would look wrong). */

.mega-menu__section + .mega-menu__section {
	margin-top: 24px;
}

.mega-menu__column {
	min-width: 0;          /* let long content shrink instead of overflowing */
}

/* Light vertical separator between columns (lg+ only). Sits on the
   column's border-box edge = centred in Bootstrap's gutter. The panel
   background is dark (--offblack-1c), so a faint white line reads as the
   "light" divider rather than a harsh grey. */
@media (min-width: 992px) {
	.mega-menu__section > .mega-menu__column:not(:first-child) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* Block arrangement within a column.
 *   --stack  → blocks flow vertically (default), evenly spaced.
 *   --inline → blocks sit side-by-side, sharing the column width. */
.mega-menu__column--stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mega-menu__column--inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

.mega-menu__column--inline > .mega-menu__block {
	flex: 1 1 0;
	min-width: 0;
}

/* ── Empty placeholder ──────────────────────────────────────── */

.mega-menu__section--empty {
	padding: 24px 12px;
}

.mega-menu__empty {
	margin: 0;
	color: #777;
	font-style: italic;
	text-align: center;
}

/* ── Banner block ───────────────────────────────────────────── */

.mega-menu__block--banner {
	position: relative;
	overflow: hidden;   /* clips the hover zoom */
}

.mega-menu__banner-link,
.mega-menu__banner-static {
	display: block;
	position: relative;
	line-height: 0;
}

/* Fill the column width so a banner narrower than its slot doesn't leave
   a gap. height:auto keeps the image's own aspect ratio. */
.mega-menu__banner-link img,
.mega-menu__banner-static img {
	display: block;
	width: 100%;
	height: auto;
	/* Hongo-style hover zoom: a noticeable, smooth scale that eases out
	   (quick to start, slow to settle) — the ThemeZaa banner feel. */
	transform: scale(1);
	transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1);
	will-change: transform;
}

.mega-menu__block--banner:hover img {
	-webkit-transform: scale(0.95);
	-ms-transform: scale(0.95);
	transform: scale(0.95);
	opacity: .5
}

.mega-menu__banner-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 6px;
	padding: 20px;
	line-height: 1.4;
	color: #fff;
	background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.mega-menu__banner-heading {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.mega-menu__banner-sub {
	margin: 0;
	font-size: 13px;
	opacity: .92;
}

.mega-menu__banner-cta {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: #fff;
	color: #111;
	border-radius: 2px;
}

/* ── "New" badge for highlighted link-column rows ───────────── */
/*
 * The static HTML (HTML/index.html lines 171, 253) marks a highlighted
 * row with `<li class="mega-menu__item mega-menu__item--new">` but
 * never shipped CSS for the modifier — declared but unstyled. This
 * pseudo-element paints the badge so the admin's "Mark as new"
 * checkbox now has visible output without touching header.css.
 *
 * Pseudo-element approach (not <span>) keeps the rendered HTML
 * byte-identical to the static reference — only the appearance
 * changes.
 */
.mega-menu__item--new > .mega-menu__link::after {
	content: "NEW";
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	background: var(--c-primary, #b58a4f);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: middle;
}

/* ── Standalone heading wrapper used by banner / product_grid / html.
 *    The inner <li.mega-menu__item--title> already carries
 *    `margin-bottom: 10px` from header.css, which defines the gap to
 *    whatever follows. No extra bottom margin on the wrapper <ul> —
 *    that would stack with the title's own bottom margin and create
 *    a larger gap than the equivalent link_list / term_grid columns.
 */
.mega-menu__list--heading-only {
	margin: 0;
	padding: 0;
}

/* ── Per-link image (term_grid + any future link types with thumbnails) ──
 *    A round 32 × 32 thumbnail rendered inline before the label text.
 *
 *    Layout strategy — `.mega-menu__link` is `display: block` with
 *    `line-height: 22px` by default (header.css). At 32 px tall, the
 *    image would expand the line-box and eat into the heading's
 *    `margin-bottom: 10px`. To prevent that, the rule below switches
 *    the link into flex layout *only* when it contains an image (via
 *    `:has()`), so the link's height grows to match the image and the
 *    surrounding margins are preserved cleanly.
 *
 *    Browsers without `:has()` support (≤ Safari 15.3, ≤ Firefox 120)
 *    fall back to the inline-block + vertical-align: middle layout —
 *    visually correct, just with slightly tighter heading spacing.
 */
.mega-menu__link-image {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 10px;
	object-fit: cover;
	vertical-align: middle;
	border-radius: 50%;
	background: #f6f7f7;
	flex: 0 0 32px;        /* keeps size fixed in flex mode (next rule) */
}

/* Switch the link to flex when it has an image — image height doesn't
 * expand a line-box in flex containers, so the heading's bottom margin
 * is preserved at 10 px regardless of image size. */
.mega-menu__link:has(.mega-menu__link-image) {
	display: flex;
	align-items: center;
}

/* Items that carry an image want more breathing room — the default
 * 5 px from header.css feels cramped with 32 px thumbnails. */
.mega-menu__list > li.mega-menu__item:has(.mega-menu__link-image) {
	margin-bottom: 10px;
}

/* ── Per-link FA icon (link_list) ──────────────────────────── */
.mega-menu__link-icon {
	display: inline-block;
	width: 16px;
	margin-right: 8px;
	text-align: center;
	color: var(--c-primary, #b58a4f);
	font-size: 13px;
}

/* ── Product grid block — Hongo "Featured products" layout ──────────
 *  Each card is a self-contained panel with its own subtle dark-on-dark
 *  background, padding, and a light image square on the left. Matches
 *  the Sale-menu featured-products pattern from the Hongo reference.
 *
 *  Single-column variant (default): horizontal card — image left, body
 *  right, centered.
 *  Multi-column variants: vertical card — image on top, body below.
 *
 *  Colours target the dark mega-menu background:
 *    title       → white, bold-ish
 *    rating      → gold (#ffb800)
 *    old price   → muted grey, strikethrough
 *    sale price  → white, semibold
 *    hover title → brand gold
 */

.mega-menu__product-grid {
	display: grid;
	gap: 12px;
}
.mega-menu__product-grid--cols-1 { grid-template-columns: 1fr; }
.mega-menu__product-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-menu__product-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-menu__product-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mega-menu__product-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.04);
	text-decoration: none;
	color: inherit;
	transition: background 200ms ease-out;
}
.mega-menu__product-card:hover {
	background: rgba(255, 255, 255, 0.07);
}

/* Single-column = horizontal card (Hongo Featured products). */
.mega-menu__product-grid--cols-1 .mega-menu__product-card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.mega-menu__product-img {
	display: block;
	max-width: 100%;
	height: auto;
	background: #fff;
}

.mega-menu__product-grid--cols-1 .mega-menu__product-img {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.mega-menu__product-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.mega-menu__product-title {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--white, #fff);
	/* Clamp to two lines so long product names don't blow out the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mega-menu__product-card:hover .mega-menu__product-title {
	color: var(--c-primary, #b58a4f);
}

.mega-menu__product-rating {
	font-size: 12px;
	line-height: 1;
	color: #ffb800;
}
.mega-menu__product-rating .star-rating {
	display: inline-block;
	color: #ffb800;
	font-size: 12px;
}

.mega-menu__product-price {
	font-size: 13px;
	line-height: 1.3;
	color: var(--white, #fff);
}
.mega-menu__product-price del {
	text-decoration: line-through;
	color: var(--text-muted-8d8d8d, #8d8d8d);
	opacity: .8;
	margin-right: 6px;
	font-weight: 400;
}
.mega-menu__product-price ins {
	text-decoration: none;
	color: var(--white, #fff);
	font-weight: 600;
}

/* term_grid has no block-specific CSS — it emits the same
 * `<ul class="mega-menu__list">/<li class="mega-menu__item">/<a class="mega-menu__link">`
 * structure as link_list and inherits all typography / spacing / hover
 * styles from assets/css/header.css. The optional term thumbnail uses
 * the `.mega-menu__link-image` rule defined further up in this file.
 */

/* ── Raw HTML block ─────────────────────────────────────────── */

.mega-menu__html { font-size: 13px; line-height: 1.5; }
.mega-menu__html p:last-child { margin-bottom: 0; }

/* ── Responsive: collapse columns on narrow viewports ──────── */

@media (max-width: 991.98px) {
	/* Columns become full-width (col-12) via Bootstrap; the vertical
	   divider is desktop-only (see the min-width rule above), so just
	   add breathing room between stacked columns. */
	.mega-menu__section > .mega-menu__column + .mega-menu__column {
		margin-top: 16px;
	}
}