/**
 * "Products" mega menu - a self-contained module, separate from the
 * base dropdown/Reviews-mega-menu rules in main-menu.css so this can
 * be tweaked on its own.
 *
 * Structure: .mega-menu > .sub-menu is a 6-column grid. Category
 * names (Tech, Fashion, ...) take column 1 as a nav rail; clicking one
 * (assets/scripts/menu/mega-menu.js toggles ".is-open") reveals a
 * .mega-menu-flyout spanning columns 2-7 with its own 5-column grid:
 * two link-list columns (1fr + 1fr) and a promo card slider (3fr).
 * See MainMenuHandler::add_product_category_flyout() for the PHP that
 * outputs this markup.
 *
 * ---- Customising ----
 * Most sizing knobs are custom properties below - change a value here
 * rather than hunting through the rules that follow. The grid LINE
 * numbers (grid-column: 2 / 7, 1 / 3, 3 / 6, etc.) stay literal since
 * they encode the 1fr-nav / 1fr-list / 1fr-list / 3fr-promo layout
 * itself - if that split changes, search this file for "grid-column".
 */

/*
 * Every primary-menu item's title (any depth - top-level "Affiliate
 * Products", rail "Electronics", flyout links, etc.) is wrapped in
 * this div by MainMenuHandler::wrap_item_title_for_media() - a
 * uniform "every <li> gets a div block" hook. Flex row so a future
 * icon/badge/thumbnail added as a sibling of the text lines up
 * automatically; a single text node inside a flex container renders
 * identically to plain text, so this is visually a no-op until
 * something is actually added next to a given title.
 */
.mega-menu-item__label {
    display: flex;
    align-items: center;
    gap: 8px;
}

:root {
    --tb-mega-menu-max-width: 1180px;
    /*
     * Original design's fixed panel height - keeps the gradient/
     * balloon rail a full 1180x550 card even when a category rail has
     * only a couple of items in it (e.g. before all 5 categories +
     * sub-categories are filled in), instead of shrinking to fit just
     * those rows.
     */
    --tb-mega-menu-min-height: 550px;
    --tb-mega-menu-gutter: 40px;      /* outer padding + gap between the 6 columns */
    --tb-mega-menu-panel-radius: 10px;
    --tb-mega-menu-panel-shadow: 0 18px 45px rgba(52, 64, 85, 0.18);
    --tb-mega-menu-panel-border: 1px solid rgba(52, 64, 85, 0.12);

    --tb-mega-menu-flyout-padding: 24px;
    --tb-mega-menu-flyout-gap: 24px;

    --tb-mega-menu-promo-aspect: 8 / 5;
    --tb-mega-menu-promo-radius: 10px;
    --tb-mega-menu-promo-card-width: 400px;
    --tb-mega-menu-promo-card-gap: 12px;

    /* Panel background - warm gold fading into the brand teal/green */
    --tb-mega-menu-panel-bg-1: #fff2b8;
    --tb-mega-menu-panel-bg-2: #d8ecb0;
    --tb-mega-menu-panel-bg-3: var(--tb-secondary, #185fa5);
    --tb-mega-menu-panel-glow: rgba(255, 255, 255, 0.55);
}

.primary-menu > .mega-menu {
    position: static;
}


/* =========================================================
   LEVEL 1 - the dropdown panel + category nav rail
   ========================================================= */

.primary-menu > .mega-menu > .sub-menu {
    left: 50%;
    /*
     * total width = 6 columns + 7 gutters (padding counts as a
     * gutter on each end too). With the defaults above that's
     * 6 x 150px + 7 x 40px = 1180px - drop the gutter var and the
     * columns resize themselves since they're 1fr.
     */
    width: min(var(--tb-mega-menu-max-width), calc(100vw - 40px));
    min-height: var(--tb-mega-menu-min-height);
    padding: var(--tb-mega-menu-gutter);
    transform: translate(-50%, 10px);

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* Category rail sits in row 1 of column 1 by default; align it (and
       any short rail) to the top rather than letting it center/stretch
       across the fixed min-height above. */
    align-content: start;
    column-gap: var(--tb-mega-menu-gutter);

    /*
     * A slowly-drifting gold-to-green gradient, on brand (teal is
     * "the green" here) but livelier than flat white - meant to catch
     * the eye and invite exploring, not to fight for attention once
     * you're actually reading the flyout (which sits in its own solid
     * white card on top of this).
     */
    background-image:
        radial-gradient(circle at 15% 15%, var(--tb-mega-menu-panel-glow) 0%, transparent 45%),
        linear-gradient(
            120deg,
            var(--tb-mega-menu-panel-bg-1),
            var(--tb-mega-menu-panel-bg-2),
            var(--tb-mega-menu-panel-bg-3),
            var(--tb-mega-menu-panel-bg-2),
            var(--tb-mega-menu-panel-bg-1)
        );
    background-size: 100% 100%, 300% 300%;
    animation: tbMegaMenuGradientDrift 10s ease-in-out infinite;
}

.primary-menu > .mega-menu:hover > .sub-menu,
.primary-menu > .mega-menu:focus-within > .sub-menu {
    transform: translate(-50%, 0);
}

@keyframes tbMegaMenuGradientDrift {
    0% {
        background-position: 0% 0%, 0% 50%;
    }

    50% {
        background-position: 0% 0%, 100% 50%;
    }

    100% {
        background-position: 0% 0%, 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-menu > .mega-menu > .sub-menu {
        animation: none;
    }
}

/*
 * The flyout now relies on spacing, background and shadow for visual
 * separation. Remove box borders from structural menu/list elements;
 * interactive controls keep their own focus and arrow/button borders.
 */
.primary-menu .mega-menu ul,
.primary-menu .mega-menu ol,
.primary-menu .mega-menu li,
.primary-menu .mega-menu div {
    border: 0 !important;
}

/*
 * Decorative floating balloons over the gradient - purely for fun /
 * catching the eye, swap the palette in mega-menu.js's BALLOON_COLORS
 * for a seasonal event (e.g. orange/black for Halloween, red/gold for
 * a holiday sale). Generated by assets/scripts/menu/mega-menu.js so
 * each one gets an organic, non-repeating position/speed.
 */
.mega-menu-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.mega-menu-decor__balloon {
    position: absolute;
    bottom: -60px;
    width: 24px;
    height: 30px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
    animation-name: tbMegaMenuBalloonFloat;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.mega-menu-decor__balloon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 16px;
    background: rgba(52, 64, 85, 0.35);
}

@keyframes tbMegaMenuBalloonFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(-4deg);
        opacity: 0;
    }

    12% {
        opacity: 0.6;
    }

    50% {
        transform: translateY(-150px) translateX(12px) rotate(4deg);
    }

    88% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-300px) translateX(-8px) rotate(-4deg);
        opacity: 0;
    }
}

/* Trigger links + the flyout card always paint above the balloons */
.mega-menu > .sub-menu > li > a {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mega-menu-decor {
        display: none;
    }
}

/*
 * Unwrap each <li> on desktop so its trigger link AND its
 * .mega-menu-flyout become direct grid items, placed on the same
 * two column ranges (1, and 2/7) regardless of which category they
 * belong to - that's what lets every flyout land in the identical
 * spot instead of trailing the row it was clicked from. Mobile keeps
 * the <li> as a normal box (see the max-width:900px block below)
 * since there's no room for a two-pane layout there.
 */
@media (min-width: 901px) {
    .mega-menu > .sub-menu > li {
        display: contents;
    }
}

.mega-menu > .sub-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    padding: 11px 12px;
    color: var(--tb-dark, #344055);
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-bottom: 0;
    border-radius: 6px;
}

.mega-menu-category-heading {
    cursor: pointer;
    user-select: none;
}

.mega-menu > .sub-menu > li > a:hover,
.mega-menu > .sub-menu > li.is-open > a {
    color: var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
    background-color: color-mix(in srgb, var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44)) 10%, transparent);
}

/*
 * Per-category "mood" colors - each maps to a global palette entry
 * in style.css's :root. Add a line here (and a matching
 * --tb-category-{slug} in style.css) for any new top-level category;
 * others fall back to --tb-primary via the var()s above.
 */
.mega-menu-category--tech {
    --tb-mega-menu-accent: var(--tb-category-tech, #3b5bfd);
}

.mega-menu-category--fashion {
    --tb-mega-menu-accent: var(--tb-category-fashion, #d85a30);
}

.mega-menu-category--home-and-garden {
    --tb-mega-menu-accent: var(--tb-category-home-and-garden, #1d9e75);
}

.mega-menu-category--outdoor {
    --tb-mega-menu-accent: var(--tb-category-outdoor, #5dcaa5);
}

.mega-menu-category--automotive {
    --tb-mega-menu-accent: var(--tb-category-automotive, #6b7280);
}

.mega-menu > .sub-menu > li > .sub-menu a {
    padding: 8px 0;
    font-size: 14px;
}

/*
 * The plain WordPress-rendered <ul class="sub-menu"> of children is
 * superseded, at every width, by the custom .mega-menu-flyout panel
 * built in MainMenuHandler::add_product_category_flyout() - kept in
 * the DOM (harmless, no layout impact) as a no-JS/no-CSS fallback.
 */
.mega-menu > .sub-menu > li > .sub-menu {
    display: none;
}


/* =========================================================
   LEVEL 2 - the category flyout (link columns + promo card)
   ========================================================= */

.mega-menu-flyout {
    display: none;
    /*
     * position:absolute + grid-column together: the browser uses the
     * parent grid's column LINES to place this box, but (being
     * absolutely positioned) it's excluded from the grid's own row
     * sizing - so its content's height never stretches the 5
     * one-line-tall nav rows above/beside it. top:0 lines it up with
     * row 1 (the first category), grid-column:2/7 fills the remaining
     * 5fr next to the 1fr nav rail.
     */
    position: absolute;
    z-index: 5;
    top: 0;
    grid-column: 2 / 7;
    /*
     * The real cause of the per-category width/height flicker (not
     * just the min-width:auto issue fixed below): an absolutely
     * positioned box with only grid-column lines set (no left/right/
     * width) is shrink-to-fit sized in CSS, like an inline-block - it
     * does NOT stretch to fill its grid area by default. So a
     * category with shorter link labels (e.g. Outdoor) shrink-wrapped
     * narrower than one with longer labels (e.g. Tech), instead of
     * every flyout filling the same 2/7 grid area. width:100%
     * resolves against that grid area (the containing block grid
     * placement establishes) and forces every flyout to the same
     * width regardless of its content.
     */
    width: 100%;
    padding: var(--tb-mega-menu-flyout-padding);
    background-color: #ffffff;
    border: var(--tb-mega-menu-panel-border);
    border-top: 4px solid var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
    border-radius: var(--tb-mega-menu-panel-radius);
    box-shadow: var(--tb-mega-menu-panel-shadow);

    /* 1fr + 1fr link columns, 3fr promo card - 5 parts across the 5fr this pane occupies */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /*
     * Explicit rows, not left implicit/auto: .mega-menu-flyout__promo
     * (below) spans grid-row:1/3 (both rows) at its own natural height
     * (up to ~480px, a Banner card). With both rows left as plain
     * "auto", the browser's default track-sizing algorithm splits that
     * needed height roughly evenly across BOTH spanned rows to satisfy
     * the promo's size - even though row 1 (the header) only has a
     * one-line title in it - leaving a large dead gap between the
     * title and row 2's link columns. Making row 2 the flexible (1fr)
     * track means any extra height the promo needs gets pulled from
     * there instead, so row 1 stays sized to its own short content and
     * the link list starts immediately under it.
     */
    grid-template-rows: auto 1fr;
    gap: 8px var(--tb-mega-menu-flyout-gap);
}

.mega-menu > .sub-menu > li.is-open > .mega-menu-flyout {
    display: grid;
}

.mega-menu-flyout__header {
    /*
     * Grid items default to min-width:auto, i.e. their content's
     * min-content size becomes a hard floor - a long unbroken word
     * here could silently steal width from the (also 1fr) promo
     * column on the right, making the promo a different size on
     * every category depending on its longest link label. min-width:0
     * lets these columns actually shrink to their declared 1fr share
     * and wrap instead.
     *
     * Title and the optional tagline both live inside this single
     * grid item (rather than each being its own grid item) so adding
     * a tagline doesn't introduce a new grid row - .mega-menu-flyout__
     * promo's grid-row:1/3 below assumes exactly 2 rows (this header,
     * then .mega-menu-flyout__list) and would need to change too
     * otherwise.
     */
    grid-column: 1 / 3;
    min-width: 0;
}

.mega-menu-flyout__title {
    /*
     * Hidden - the category name is already the rail link you just
     * hovered/tapped to open this flyout, so repeating it as a title
     * up here was redundant. Still rendered in the markup (see
     * MainMenuHandler::build_flyout_html()), just not shown, so
     * nothing downstream (or a future design that wants it back) has
     * to change - only this one rule does.
     */
    display: none;
    margin-bottom: 10px;
    color: var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.mega-menu-flyout__tagline {
    margin: 8px 0 0;
    color: var(--tb-text-muted, #5a6472);
    font-size: 13px;
    line-height: 1.4;
}

/*
 * ONE real <ul>/<li> list (see MainMenuHandler::add_product_category_
 * flyout()) - the old version PHP-split children into two separate
 * <div>-wrapped <ul>s (ceil(count/2) math kept in sync by hand). This
 * is the actual <ul>/<li>-based mega menu structure: a single list,
 * with CSS multi-column layout (not CSS Grid) doing the 2-column
 * balancing on its own - column-count fills column 1 top-to-bottom
 * then flows into column 2, self-adjusting to any number of <li>s
 * with no PHP math to keep in sync and no risk of an empty second
 * column for a short list.
 */
.mega-menu-flyout__list {
    grid-column: 1 / 3;
    /* Same min-width:0 fix as .mega-menu-flyout__title above - this
     * pane is itself a 1fr sibling of the promo column, so it needs
     * the same escape from min-width:auto's content-based floor. */
    min-width: 0;
    /*
     * Grid items stretch to fill their row's height by default -
     * this row is 1fr (see .mega-menu-flyout's grid-template-rows),
     * sized to match the promo card beside it, so without this the
     * list's own box stretches to that full height even when it only
     * has one or two short items, leaving a large empty gap below
     * them. align-self:start keeps the list sized to its own content
     * instead.
     */
    align-self: start;
    column-count: 2;
    column-gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mega-menu-flyout__item {
    /*
     * Multi-column layout can otherwise split one <li>'s content
     * across the column break (its top half in column 1, bottom half
     * in column 2) - break-inside:avoid keeps each item whole,
     * pushing it into the next column entirely if it doesn't fit.
     */
    break-inside: avoid;
}

/*
 * The actual per-item box: flexbox row (not the <li> or <a> directly)
 * so a future icon/thumbnail/badge can be added as a sibling of the
 * <a> right here - one small PHP change to the sprintf() in
 * add_product_category_flyout(), no markup restructure, and it lines
 * up automatically via this existing flex row.
 */
.mega-menu-flyout__item-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
}

/*
 * Per-item pluggable media slot - same "container always present,
 * content optional" pattern as .mega-menu-flyout__promo at the
 * category level, just one level deeper (per link, not per category).
 * Empty by default, so it takes up no visible space and the link list
 * looks/behaves exactly as before until something's actually dropped
 * in here - flex-shrink:0 only matters once it holds a fixed-size
 * icon/thumbnail, so the link text can't squeeze it.
 */
.mega-menu-flyout__item-media {
    flex-shrink: 0;
    order: -1;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 139, 132, 0.08);
}

.mega-menu-flyout__item-media:empty {
    display: none;
}

.mega-menu-flyout__item-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-menu-flyout__item-inner a {
    color: var(--tb-dark, #344055);
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
}

.mega-menu-flyout__item-inner:hover a,
.mega-menu-flyout__item-inner:focus-within a {
    color: var(--tb-primary, #0a1f44);
}


/*
 * Promo slider - landscape image/video cards (by convention, see
 * MainMenuHandler::get_product_category_promo_media()) and/or
 * hand-written raw-HTML "sale cards" (Appearance > Sale Cards),
 * merged into one row by
 * MainMenuHandler::get_product_category_promo_html(). This same
 * .mega-menu-promo-slider component is reused, unpositioned, inside
 * the "Products" landing pane below (.mega-menu-landing__panel) - see
 * MainMenuHandler::get_promo_slider_html().
 *
 * Cards are a fixed width (--tb-mega-menu-promo-card-width) and the
 * visible window is exactly one card wide, so only one shows at a
 * time - like the single-product gallery's main image. Clicking an
 * arrow scrolls the (hidden-overflow) track by exactly one card-width
 * to reveal the next/previous one; touch swipe works too since it's
 * a real scroll container, just with no visible scrollbar.
 */

.mega-menu-flyout__promo {
    grid-row: 1 / 3;
    grid-column: 3 / 6;
    align-self: end;
}

/*
 * Per-item product cards (add_product_category_flyout()) share the
 * same grid cell as the default promo above, stacked on top of it.
 * Hidden by default - not wired up yet, kept inert until the hover
 * behavior and card styling are confirmed - see mega-menu.js.
 */
.mega-menu-flyout__promo--items {
    display: none;
}

.mega-menu-product-card {
    display: none;
}

.mega-menu-promo-slider {
    position: relative;
    width: var(--tb-mega-menu-promo-card-width);
    /* Never lets a fixed card width push the slider wider than
       whatever column it's sitting in (e.g. the 320px cap the mobile
       .mega-menu-flyout__promo rule below applies) - it'll just
       shrink to fit instead of overflowing/squeezing its contents. */
    max-width: 100%;
    /* Centered in its column rather than hugging the left edge - same
       component, same centering, in both the category flyout and the
       landing pane. */
    margin-left: auto;
    margin-right: auto;
}

.mega-menu-promo-slider__track {
    display: flex;
    /*
     * Not the flex default (stretch): a plain image/video card
     * (~8:5, fairly short) and a hand-written sale card (image +
     * badge + headline + description + button + expiry, stacked -
     * often much taller) can sit in the same track. Stretch would
     * force the short card up to the tall one's height, leaving a
     * big blank gap under its image with the "Shop X" pill stranded
     * at the bottom. flex-start lets each card size to its own
     * content instead.
     */
    align-items: flex-start;
    gap: var(--tb-mega-menu-promo-card-gap);
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mega-menu-promo-slider__track::-webkit-scrollbar {
    display: none;
}

.mega-menu-promo-slider__card {
    position: relative;
    flex: 0 0 auto;
    width: var(--tb-mega-menu-promo-card-width);
    display: block;
    overflow: hidden;
    background-color: var(--tb-background-soft, #f5f6f8);
    border: var(--tb-mega-menu-panel-border);
    border-radius: var(--tb-mega-menu-promo-radius);
    text-decoration: none;
    scroll-snap-align: start;
}

.mega-menu-promo-slider__media {
    display: block;
    width: 100%;
    aspect-ratio: var(--tb-mega-menu-promo-aspect);
    object-fit: cover;
    background-color: var(--tb-background-soft, #f5f6f8);
}

/* "Shop now"-style pill, overlaid on the media like a storefront banner */

.mega-menu-promo-slider__cta {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 12px;
    color: var(--tb-white, #ffffff);
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    /* Matches this category's accent (see .mega-menu-category--* below) */
    background-color: var(--tb-mega-menu-accent, var(--tb-dark, #344055));
    border-radius: 999px;
    transition: background-color var(--tb-transition, 0.2s ease);
}

.mega-menu-promo-slider__card:hover .mega-menu-promo-slider__cta,
.mega-menu-promo-slider__card:focus-visible .mega-menu-promo-slider__cta {
    background-color: var(--tb-dark, #344055);
}

/*
 * Prev/next arrows - same visual language as the single-product
 * gallery's .affiprod-product__nav-arrow (plugins/TPAM): a small
 * white circle overlaid on the row, filling with the category's
 * accent color on hover/focus. Rendered in the markup whenever there
 * are 2+ cards, then hidden by mega-menu.js at runtime if the row
 * turns out to fit without scrolling (see initPromoSlider()).
 */
.mega-menu-promo-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    /*
     * Idle: outlined in this category's accent (--tb-mega-menu-accent,
     * set on the category <li> - see .mega-menu-category--* below -
     * and inherited down; falls back to --tb-primary in the landing
     * pane, which isn't scoped to one category). Hover/focus inverts
     * to a solid fill for contrast, same accent either way.
     */
    color: var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        color var(--tb-transition, 0.2s ease),
        background-color var(--tb-transition, 0.2s ease),
        border-color var(--tb-transition, 0.2s ease);
}

.mega-menu-promo-slider__arrow--prev {
    left: 8px;
}

.mega-menu-promo-slider__arrow--next {
    right: 8px;
}

.mega-menu-promo-slider__arrow:hover,
.mega-menu-promo-slider__arrow:focus-visible {
    color: var(--tb-white, #ffffff);
    background-color: var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
    border-color: var(--tb-mega-menu-accent, var(--tb-primary, #0a1f44));
}

.mega-menu-promo-slider__arrow.is-hidden {
    display: none;
}

/*
 * Base "polish" (shadow, hover lift) for a hand-written raw HTML sale
 * card (Appearance > Sale Cards) - the card's own inline styles (from
 * the admin screen's copyable template) handle its internal layout
 * (badge, headline, button, ...) and already set height:100% to fill
 * this wrapper; the wrapper (.mega-menu-promo-slider__card--custom)
 * handles how it sits in the row.
 */
.mega-menu-sale-card {
    display: block;
    height: 100%;
}

/*
 * Bare-image variant: a sale card that's just a single <img
 * class="mega-menu-sale-card">, no <a> wrapper, no badge/headline/
 * button markup. Gives it the same sizing the plain image/video promo
 * cards get (.mega-menu-promo-slider__media) so editors don't have to
 * hand-write width/aspect-ratio/object-fit inline every time - just
 * drop the class on the tag. Scoped to the img tag specifically so it
 * doesn't affect the full <a class="mega-menu-sale-card"> card, whose
 * height:100% + content-driven sizing above still applies as-is.
 */
img.mega-menu-sale-card {
    width: 100%;
    height: auto;
    aspect-ratio: var(--tb-mega-menu-promo-aspect);
    object-fit: cover;
}

.mega-menu-promo-slider__card--custom {
    background-color: var(--tb-white, #ffffff);
}

.mega-menu-promo-slider__card--custom:hover,
.mega-menu-promo-slider__card--custom:focus-within {
    box-shadow: 0 10px 24px rgba(52, 64, 85, 0.18);
}


/* =========================================================
   "Products" landing pane - sale cards shown next to the
   category rail before a category is picked (see
   MainMenuHandler::add_products_landing_pane()). Sibling of
   .sub-menu, not a child of it, so it gets its own copy of the
   same show/hide + positioning rules rather than relying on the
   grid .sub-menu establishes.
   ========================================================= */

.mega-menu-landing {
    position: absolute;
    /*
     * Must render IN FRONT of the nav-rail panel (.mega-menu > .sub-menu,
     * z-index:1000 via main-menu.css's generic .sub-menu rule), not
     * behind it. Both boxes are absolutely positioned at the identical
     * top:100%/left:50% spot (same containing block - see the
     * position:static override on .mega-menu above), but the nav rail
     * panel's height is fixed by its 5 category links while this
     * pane's height varies with whatever promo card is configured. At
     * z-index:4 (below the rail panel) a promo card taller than the
     * rail got its top hidden behind the shorter panel while its
     * bottom stuck out past the panel's edge, unclipped, over the
     * plain page background - a "hanging" stray-looking fragment.
     * Sitting in front instead means the whole card always renders as
     * one complete, self-contained box (it already has its own
     * background/border/radius - see .mega-menu-promo-slider__card),
     * regardless of height. Still safely hidden by .is-covered
     * (opacity/visibility/pointer-events, not z-index) once a category
     * flyout is open.
     */
    z-index: 1001;
    top: 100%;
    left: 50%;
    width: min(var(--tb-mega-menu-max-width), calc(100vw - 40px));
    padding: var(--tb-mega-menu-gutter);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--tb-mega-menu-gutter);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0);
    transition: opacity 180ms ease;
}

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .primary-menu li:hover > .mega-menu-landing,
    .primary-menu li:has(a:focus-visible) > .mega-menu-landing {
        visibility: visible;
        opacity: 1;
        /*
         * pointer-events stays "none" here (not "auto") even while
         * visible - this wrapper spans the FULL 6-column width (same grid
         * as the nav rail beside it), but its promo content only actually
         * occupies columns 2/7 (see .mega-menu-landing__panel below,
         * which opts back into pointer-events:auto for itself). Column 1
         * - where the Tech/Fashion/... category links live underneath -
         * has no visible content here, but without this it was still a
         * real (if invisible) part of this box, at a z-index above the
         * nav rail, silently swallowing every click/hover meant for those
         * links. Left as "auto" here, the whole category rail became
         * unclickable except for a beeline through wherever the promo
         * card itself happened to sit.
         */
        transform: translate(-50%, 0);
    }

    /*
     * Suppressed once a category flyout is open on top of this same
     * area - assets/scripts/menu/mega-menu.js toggles this class, since
     * a plain CSS sibling selector can't reach "backwards" to an element
     * that renders before .sub-menu in the markup.
     */
    .primary-menu li:hover > .mega-menu-landing.is-covered,
    .primary-menu li:has(a:focus-visible) > .mega-menu-landing.is-covered {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

.mega-menu-landing__panel {
    grid-column: 2 / 7;
    margin-left: auto;
    /*
     * The rail column (Tech/Fashion/.../Automotive links) is taller
     * than a typical landing promo card, so the implicit grid row
     * ends up as tall as the rail - centers the panel (and whatever
     * promo card is configured inside it) in that extra vertical
     * space instead of leaving it pinned to the top with blank space
     * underneath.
     */
    align-self: center;
    /*
     * Opts back into being clickable/hoverable - .mega-menu-landing
     * (its parent) is pointer-events:none precisely so this is the
     * ONLY interactive region of that full-width wrapper; see the
     * comment on the li:hover > .mega-menu-landing rule above.
     */
    pointer-events: auto;
    /*
     * Wide banner treatment rather than a portrait card: this pane
     * has the whole of columns 2/7 (~850-900px at desktop widths, see
     * .mega-menu-landing above) to itself with nothing beside it, so
     * a landing card can use it for a wide side-by-side layout (e.g.
     * headline+copy on the left, a few product tiles on the right) -
     * see .mega-menu-promo-slider above for how this var is consumed.
     * Purely a container size; whether anything's actually configured
     * here at all is up to Appearance > Sale Cards ("Products
     * landing" category) - empty is empty either way. 700px max
     * (desktop) to match Sale_Card_Repository::render_banner_html()'s
     * own 480px min-height for the Banner card type.
     *
     * This var alone isn't enough, though - see the explicit `width`
     * declaration below. A CSS custom property is only ever a value
     * substitution; the actual `width: var(--tb-mega-menu-promo-card-
     * width)` living on .mega-menu-promo-slider (a DESCENDANT of this
     * panel) is what tries to consume it, and that rule's own
     * `min(700px, 100%)` needs *this* element's width to already be
     * resolved for the "100%" part to mean anything. But this panel
     * itself has no explicit width - combined with `margin-left: auto`
     * above (which only does anything on a box that ISN'T stretching
     * to fill its grid area), it ends up shrink-to-fit sized instead,
     * around its own max-content estimate before the descendant's
     * request is even factored in. The two width declarations fighting
     * over an undefined containing block resolved to a random-looking
     * ~354px in testing - nowhere near the intended size.
     */
    --tb-mega-menu-promo-card-width: min(700px, 100%);
    width: min(700px, 100%);
}

/* Polished editorial treatment shared by landing banners and flyout cards. */
.mega-menu-promo-slider__card {
    overflow: hidden;
    border: 1px solid rgba(16, 42, 67, .1);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(16, 42, 67, .16);
    transition: box-shadow 180ms ease;
}

.mega-menu-promo-slider__card:hover,
.mega-menu-promo-slider__card:focus-within {
    box-shadow: 0 18px 42px rgba(16, 42, 67, .22);
}

.mega-menu-flyout {
    border: 1px solid rgba(16, 42, 67, .1);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f6fafc 100%);
    box-shadow: 0 24px 55px rgba(16, 42, 67, .18);
}

.mega-menu-flyout__title {
    color: #102a43;
    letter-spacing: -.02em;
}

.mega-menu-flyout__item-inner a {
    border-radius: 8px;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.mega-menu-flyout__item-inner a:hover,
.mega-menu-flyout__item-inner a:focus-visible {
    padding-left: 8px;
    background: rgba(8, 127, 120, .08);
    color: #087f78;
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .mega-menu-promo-slider__card,
    .mega-menu-flyout__item-inner a {
        transition: none;
    }
}


/* =========================================================
   MOBILE - same component, reflowed and stacked
   ========================================================= */

@media (max-width: 960px) {
    /*
     * Reset the desktop panel centering transform. The plugin stylesheet
     * loads after the theme's mobile menu stylesheet, so the desktop
     * translate(-50%) otherwise wins in the cascade and moves every
     * flyout link off the left edge of the screen.
     */
    .site-header .primary-menu > .mega-menu > .sub-menu,
    .site-header .primary-menu > .mega-menu:hover > .sub-menu,
    .site-header .primary-menu > .mega-menu:focus-within > .sub-menu {
        position: static;
        left: auto;
        width: 100%;
        max-width: none;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
        box-sizing: border-box;
        transform: none;
    }

    .mega-menu > .sub-menu > li {
        margin-bottom: 4px;
    }

    /*
     * The same .mega-menu-flyout component used on desktop is reused
     * here too, just reflowed as a normal stacked accordion panel.
     * Desktop's absolute/grid placement is deliberately removed so
     * promo media, including videos, stays inside the opened category
     * instead of becoming its own layout row in the mobile menu.
     */
    .mega-menu-flyout {
        display: none;
        position: static;
        width: 100%;
        margin: 6px auto 0;
        padding: 14px;
        border: 0;
        border-radius: 8px;
        box-shadow: none;
        background-color: var(--tb-background-soft, #f5f6f8);
        box-sizing: border-box;
    }

    .mega-menu > .sub-menu > li.is-open > .mega-menu-flyout {
        display: block;
    }

    .mega-menu-flyout__header,
    .mega-menu-flyout__list,
    .mega-menu-flyout__promo {
        width: 100%;
        max-width: 100%;
    }

    .mega-menu-flyout__list {
        column-count: 1;
        column-gap: 0;
    }

    .mega-menu-flyout__promo {
        margin: 8px 0 0;
    }

    .mega-menu-flyout__promo .mega-menu-promo-slider,
    .mega-menu-flyout__promo .mega-menu-promo-slider__card {
        width: 100%;
    }

    .mega-menu-flyout__promo .mega-menu-promo-slider__track {
        overflow-x: hidden;
    }

    .mega-menu-flyout__promo img.mega-menu-sale-card,
    .mega-menu-flyout__promo video.mega-menu-sale-card,
    .mega-menu-flyout__promo .mega-menu-promo-slider__media {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: var(--tb-mega-menu-promo-aspect);
        object-fit: cover;
    }

    /*
     * The landing pane is a desktop hover affordance. On mobile it has
     * no natural trigger, so showing it in-flow makes its video behave
     * like a separate menu item and pushes the category rail down.
     * Mobile keeps promo media inside opened category flyouts only.
     */
    .mega-menu-landing {
        display: none;
    }

    .mega-menu-landing__panel {
        max-width: none;
        margin-left: 0;
    }
}