/**
 * Qing Elementor Header widget styles.
 * Layout inspired by the Hitched "layoutHeader" pattern.
 */

/* ProximaNova — same webfont Hitched uses for its header menu. */
@font-face {
    font-family: "ProximaNova";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Proxima Nova Regular"), local("ProximaNova-regular"),
        url("../../Pg_www.hitched.co.uk/static/font/ProximaNova-regular.woff2") format("woff2"),
        url("../../Pg_www.hitched.co.uk/static/font/ProximaNova-regular.woff") format("woff"),
        url("../../Pg_www.hitched.co.uk/static/font/ProximaNova-regular.ttf") format("truetype");
}

@font-face {
    font-family: "ProximaNova";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local("Proxima Nova Semibold"), local("ProximaNova-semibold"),
        url("../../Pg_www.hitched.co.uk/static/font/ProximaNova-semibold.woff2") format("woff2"),
        url("../../Pg_www.hitched.co.uk/static/font/ProximaNova-semibold.woff") format("woff"),
        url("../../Pg_www.hitched.co.uk/static/font/ProximaNova-semibold.ttf") format("truetype");
}

.qing-elementor-header {
    --qing-header-accent: #b3946f;
    --qing-header-text: #2f2b28;
    --qing-header-border: #eae5df;
    --qing-header-max-width: 1200px;
    --qing-header-pad-b: 12px; /* inner bottom padding, used to place the nav underline on the border */
    background: #fff;
    border-bottom: 1px solid var(--qing-header-border);
    position: relative;
    font-family: "ProximaNova", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    /* Never let the header push the page wider than the screen. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

/* ============================================================
 * Sticky header
 *
 * WHY THE STICKY ELEMENT IS NOT THE <header> ITSELF
 *
 * Elementor renders the widget four levels deep:
 *
 *   header.elementor-location-header      <- the template root
 *     div.e-con.e-parent                  <- Elementor Container
 *       div.elementor-widget
 *         div.elementor-widget-container
 *           header.qing-elementor-header   <- this widget
 *
 * position: sticky pins an element inside its PARENT box. Every wrapper
 * above is exactly as tall as the header, so a sticky header has zero room
 * to travel in and never appears to move -- which is why setting it on the
 * widget did nothing at all.
 *
 * The pinned element therefore has to be the outermost wrapper, whose parent
 * is the page. :has() is used so this only applies when the header inside is
 * one of ours and is not switched off; a plain rule would pin every Elementor
 * header on the site, including ones the widget has nothing to do with.
 *
 * Sticky rather than fixed on purpose: a fixed box is positioned against the
 * nearest ancestor carrying transform / filter / contain / will-change, and
 * Elementor puts those on containers routinely, at which point a fixed header
 * silently scrolls away with the page.
 * ============================================================ */
.elementor-location-header:has(.qing-elementor-header--sticky) {
    position: sticky;
    top: 0;
    /* Above Elementor's own stacking contexts and the page content. */
    z-index: 999;
}

/* The wrappers between the pinned element and the bar must not clip, or the
   mega panel is cut off at the header's bottom edge once it opens. */
.elementor-location-header:has(.qing-elementor-header--sticky) > .e-con,
.elementor-location-header:has(.qing-elementor-header--sticky) .elementor-widget-qing_header,
.elementor-location-header:has(.qing-elementor-header--sticky) .elementor-widget-container {
    overflow: visible;
}

/* The bar keeps its own background: the pinned wrapper is transparent, and
   without this the page would show through the header while scrolling. */
.qing-elementor-header--sticky {
    background: #fff;
}

/* ---- Pinned state ----
   The script adds --stuck to the bar once it has actually reached the top.
   It carries appearance only; the positioning is done above. */
.qing-elementor-header--stuck {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.28s ease;
}

/* Slides down as it pins, so the bar drops into place rather than blinking. */
.qing-elementor-header--sticky.qing-elementor-header--stuck {
    animation: qingHeaderDrop 0.3s ease;
}

@keyframes qingHeaderDrop {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ---- Hidden while scrolling down (opt-in) ----
   Applied to the pinned wrapper, not the bar: the bar is not the element
   being positioned, so translating it would leave the wrapper's height
   behind as a gap. translateY rather than top because it is composited. */
.elementor-location-header:has(.qing-elementor-header--hidden) {
    transform: translateY(-100%);
    transition: transform 0.28s ease;
}

.elementor-location-header:has(.qing-elementor-header--sticky) {
    transition: transform 0.28s ease;
}

.qing-elementor-header--hidden {
    box-shadow: none;
}

/* The slide is decorative -- the pinning is not. */
@media (prefers-reduced-motion: reduce) {

    .elementor-location-header:has(.qing-elementor-header--sticky),
    .qing-elementor-header--sticky.qing-elementor-header--stuck {
        animation: none;
        transition: none;
    }
}

/* Constrained content row */
.qing-elementor-header .layoutHeader__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: var(--qing-header-max-width);
    margin: 0 auto;
    padding: 12px 24px;
    box-sizing: border-box;
}

/* ---------- Left / Right clusters ---------- */
.layoutHeader__left,
.layoutHeader__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0; /* allows children to shrink instead of overflowing */
}

.layoutHeader__right {
    justify-content: flex-end;
}

/* ---------- Icon buttons ---------- */
.layoutHeader__iconBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--qing-header-text);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
    text-decoration: none;
}

.layoutHeader__iconBtn:hover,
.layoutHeader__iconBtn:focus {
    background: rgba(179, 148, 111, 0.12);
    color: var(--qing-header-accent);
}

.layoutHeader__iconBtn svg {
    display: block;
}

/* The hamburger is a <span role="button">; reset anything inherited and
   keep it non-selectable so tapping never highlights text. */
.layoutHeader__hamburger {
    display: none; /* mobile only; enabled in the 1024px breakpoint */
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
}

/* ---------- Account area ---------- */
.layoutHeader__authArea {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Icon only: the "Log out" wording is hidden on every breakpoint.
   Toggle it back on from the widget (Account -> Show Log Out Text). */
.layoutHeader__logout {
    display: none;
}

.qing-header-account--with-text .layoutHeader__logout {
    display: inline-block;
    white-space: nowrap;
}

/* ---------- Cart ---------- */
.layoutHeader__cart {
    position: relative;
}

.layoutHeader__cartCount {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--qing-header-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: none;
}

.layoutHeader__cartCount.is-visible {
    display: block;
}

/* ---------- Logo ---------- */
.layoutHeader__logoAnchor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.layoutHeader__logoImg {
    max-height: 40px;
    width: auto;
    display: block;
}

.layoutHeader__logoText {
    font-family: Georgia, "Songti SC", serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--qing-header-text);
}

/* ---------- Navigation ---------- */
.layoutHeader__nav {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
}

/* Top-level menu list: works for .layoutNavMenu, a plain <ul>, or the
   page-list fallback, so the menu is always horizontal. */
.layoutHeader__nav > ul {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.layoutHeader__nav > ul > li {
    position: relative;
    list-style: none;
    margin: 0;
    height: 100%;
}

.layoutHeader__nav li {
    position: relative;
    list-style: none;
}

.layoutHeader__nav > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 12px;
    color: var(--qing-header-text);
    font-family: "ProximaNova", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Hover underline: full-width bar that scales from the centre outward,
   sitting exactly on the header's bottom border. */
.layoutHeader__nav > ul > li > a::after {
    content: "";
    position: absolute;
    /* Inset by the anchor's own horizontal padding so the bar matches the
       text width rather than the full click target. */
    left: var(--qing-header-nav-gap, 12px);
    right: var(--qing-header-nav-gap, 12px);
    /* drop the bar down past the anchor by the inner bottom padding so it
       lands on the header's bottom border line. */
    bottom: calc(-1 * var(--qing-header-pad-b, 12px));
    height: 2px;
    background: var(--qing-header-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.layoutHeader__nav > ul > li > a:hover,
.layoutHeader__nav > ul > li > a:focus {
    color: var(--qing-header-accent);
    background: transparent;
    text-decoration: none;
}

.layoutHeader__nav > ul > li > a:hover::after,
.layoutHeader__nav > ul > li > a:focus::after {
    transform: scaleX(1);
}

/* Dropdown caret icon for items that have a sub-menu. */
.layoutHeader__nav li.menu-item-has-children > a::before,
.layoutHeader__nav li.page_item_has_children > a::before,
.layoutHeader__nav li.qing-hasMega > a::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-left: 2px;
    order: 2;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
}

.layoutHeader__nav li.menu-item-has-children:hover > a::before,
.layoutHeader__nav li.page_item_has_children:hover > a::before,
.layoutHeader__nav li.qing-hasMega:hover > a::before,
.layoutHeader__nav li.qing-hasMega:focus-within > a::before {
    transform: rotate(180deg);
}

/* Sub-menus (desktop dropdown) */
.layoutHeader__nav ul.sub-menu,
.layoutHeader__nav .children {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--qing-header-border);
    border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);
    padding: 8px;
    margin: 0;
    z-index: 30;
    list-style: none;
}

.layoutHeader__nav ul.sub-menu li,
.layoutHeader__nav .children li {
    width: 100%;
}

.layoutHeader__nav ul.sub-menu a,
.layoutHeader__nav .children a {
    display: block;
    padding: 8px 12px;
    color: var(--qing-header-text);
    font-size: 14px;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.layoutHeader__nav ul.sub-menu a:hover,
.layoutHeader__nav .children a:hover {
    color: var(--qing-header-accent);
    background: rgba(179, 148, 111, 0.1);
}

.layoutHeader__nav li:hover > ul.sub-menu,
.layoutHeader__nav li:focus-within > ul.sub-menu,
.layoutHeader__nav li:hover > .children,
.layoutHeader__nav li:focus-within > .children {
    display: flex;
}

/* Nav header (used on mobile) */
.layoutNavMenu__header {
    display: none;
}

/* Overlay behind the mobile drawer */
.qing-header-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
}

.qing-header-overlay.is-visible {
    display: block;
}

/* ---------- Account / logout ---------- */
.layoutHeader__authArea {
    display: flex;
    align-items: center;
    gap: 8px;
}

.layoutHeader__logout {
    font-size: 13px;
    color: var(--qing-header-text);
    text-decoration: none;
    white-space: nowrap;
}

.layoutHeader__logout:hover {
    color: var(--qing-header-accent);
}

/* ---------- Language switcher ---------- */
.layoutHeader__lang {
    position: relative;
}

/* Language toggle must stay auto-width even when the icon-button size
   control sets a fixed width/height on .layoutHeader__iconBtn. */
.qing-elementor-header .qing-lang-toggle {
    width: auto !important;
    min-width: 42px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 21px;
}

/* Keep the globe and caret from being squashed. */
.qing-lang-toggle > svg,
.qing-lang-caret,
.qing-lang-caret svg {
    flex-shrink: 0;
}

.qing-lang-flag {
    display: block;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.qing-lang-current-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.qing-lang-caret {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.qing-header-lang.is-open .qing-lang-caret {
    transform: rotate(180deg);
}

/* ---------- Dropdown ----------

   Right-aligned to the toggle. The panel is deliberately plain: 4px
   corners and a hairline border to match the header and the rest of the
   theme, rather than the pill radius and heavy drop shadow it had.
   ---------- */
.qing-lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    /* No flags now, so the panel only has to fit the longest name. */
    min-width: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--qing-header-border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(35, 32, 29, 0.08);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/* Hover and focus open it as well as the click, so a pointer user never
   has to click. focus-within covers keyboard tabbing into the list. */
.layoutHeader__lang:hover .qing-lang-dropdown,
.layoutHeader__lang:focus-within .qing-lang-dropdown,
.qing-header-lang.is-open .qing-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.layoutHeader__lang:hover .qing-lang-caret,
.layoutHeader__lang:focus-within .qing-lang-caret {
    transform: rotate(180deg);
}

/* Bridges the gap between trigger and panel. Without it the pointer
   crosses dead space on the way down and the panel closes. */
.qing-lang-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px;
}

/* ---------- Items ---------- */
.qing-lang-item {
    margin: 0;
}

.qing-lang-link {
    display: block;
    padding: 8px 15px;
    border-radius: 0;
    text-align: center;
    color: var(--qing-header-text);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.qing-lang-link:hover,
.qing-lang-link:focus-visible {
    background: rgba(179, 148, 111, 0.1);
    color: var(--qing-header-accent);
    text-decoration: none;
}

/* The language already being viewed. Marked but still a link, so it can be
   used to reload the page in place. */
.qing-lang-item.is-current .qing-lang-link {
    color: var(--qing-header-accent);
    font-weight: 600;
}

.qing-lang-name {
    white-space: nowrap;
}

/* =========================================================
   Login / Register modal
   ========================================================= */
.qing-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qing-modal[hidden] {
    display: none;
}

.qing-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 26, 22, 0.55);
    backdrop-filter: blur(2px);
    animation: qingFade 0.2s ease;
}

.qing-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    padding: 32px;
    animation: qingPop 0.25s ease;
    z-index: 1;
    max-height: 92vh;
    overflow-y: auto;
}

@keyframes qingFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes qingPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qing-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #7a736c;
    border-radius: 50%;
    cursor: pointer;
}

.qing-modal__close:hover {
    background: #f2ede7;
    color: #2f2b28;
}

.qing-modal__tabs {
    display: flex;
    gap: 4px;
    background: #f5f0ea;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.qing-modal__tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #7a736c;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.qing-modal__tab.is-active {
    background: #fff;
    color: var(--qing-header-accent, #b3946f);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.qing-modal__title {
    font-family: Georgia, "Songti SC", serif;
    font-size: 22px;
    margin: 0 0 20px;
    color: #2f2b28;
}

/* Forms inside modal */
.qing-auth-form {
    display: none;
}

.qing-auth-form.is-active {
    display: block;
}

.qing-field {
    margin-bottom: 16px;
}

.qing-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #5c554e;
    margin-bottom: 6px;
}

.qing-field input[type="text"],
.qing-field input[type="email"],
.qing-field input[type="password"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #e0dad3;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.qing-field input:focus {
    outline: none;
    border-color: var(--qing-header-accent, #b3946f);
}

.qing-field--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qing-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #5c554e;
    cursor: pointer;
    margin: 0;
}

.qing-checkbox input {
    width: auto;
    margin: 0;
}

.qing-auth-forgot {
    font-size: 13px;
    color: var(--qing-header-accent, #b3946f);
    text-decoration: none;
}

.qing-auth-forgot:hover {
    text-decoration: underline;
}

.qing-auth-submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--qing-header-accent, #b3946f);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.qing-auth-submit:hover {
    background: #96774f;
}

.qing-auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.qing-auth-message {
    min-height: 0;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 7px;
}

.qing-auth-message.is-error {
    padding: 9px 12px;
    background: #fdecea;
    color: #b3261e;
}

.qing-auth-message.is-success {
    padding: 9px 12px;
    background: #e8f5e9;
    color: #1b7e2d;
}

.qing-auth-switch {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
    color: #7a736c;
}

.qing-auth-switch-btn {
    border: none;
    background: none;
    color: var(--qing-header-accent, #b3946f);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 2px;
}

.qing-auth-switch-btn:hover {
    text-decoration: underline;
}

body.qing-modal-open {
    overflow: hidden;
}

/* =========================================================
   Responsive: mobile drawer navigation
   ========================================================= */
@media (max-width: 1024px) {

    /* The nav is a fixed drawer at this breakpoint, so it leaves the flex
       row and can no longer stretch to push this cluster over. Without the
       auto margin the icons bunch up against the logo instead of sitting at
       the right edge. justify-content on this element does not help: that
       lays out its own children, not its position in the parent row. */
    .layoutHeader__right {
        margin-left: auto;
    }
    .layoutHeader__hamburger {
        display: inline-flex;
    }

    .layoutHeader__nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 340px;
        background: #fff;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        display: block;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        padding: 0;
    }

    .layoutHeader__nav.is-open {
        transform: translateX(0);
    }

    /* The drawer is a vertical list. display:flex has to be restated: the
       desktop rule set it to a row and only changing direction would leave
       the row behaviour in place on some browsers. */
    .layoutHeader__nav > ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        height: auto;
        padding: 12px;
    }

    /* Full-width rows, and auto height -- the desktop 100% height made every
       item as tall as the drawer. */
    .layoutHeader__nav > ul > li {
        position: relative;
        width: 100%;
        height: auto;
    }

    .layoutHeader__nav > ul > li > a,
    .layoutHeader__nav a {
        justify-content: flex-start;
        height: auto;
        padding: 12px 14px;
        border-radius: 8px;
    }

    /* Sub-menus collapse into the flow instead of floating. They stay
       closed until the item is opened: the previous rule set display:flex
       here, which left every sub-menu permanently expanded. */
    .layoutHeader__nav ul.sub-menu,
    .layoutHeader__nav .children {
        display: none;
        position: static;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 4px 14px;
        background: transparent;
    }

    /* Hover must not open anything on a touch screen -- the tap that opens
       a sub-menu also counts as a hover, so the two fight each other. */
    .layoutHeader__nav li:hover > ul.sub-menu,
    .layoutHeader__nav li:focus-within > ul.sub-menu,
    .layoutHeader__nav li:hover > .children,
    .layoutHeader__nav li:focus-within > .children {
        display: none;
    }

    /* Opened by the script via a class instead. */
    .layoutHeader__nav li.is-subOpen > ul.sub-menu,
    .layoutHeader__nav li.is-subOpen > .children {
        display: block;
    }

    .layoutHeader__nav ul.sub-menu a,
    .layoutHeader__nav .children a {
        white-space: normal;
    }

    /* Scrim behind the drawer. The markup was always output but had no
       rules at all, so there was nothing to dim the page or catch the
       outside tap that should close the menu. */
    .layoutHeader__overlay {
        position: fixed;
        inset: 0;
        z-index: 998;
        background: rgba(35, 32, 29, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .layoutHeader__overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* Two-list mode: the desktop list steps aside for the mobile one. Only
       applies when a separate Mobile Menu is set -- with one list the markup
       carries neither class and both rules sit idle. */
    .layoutHeader__nav > ul.qing-header-list--desktop {
        display: none;
    }

    .layoutHeader__nav > ul.qing-header-list--mobile {
        display: block;
    }

    /* Caret toggle injected next to a parent link so a sub-menu can be
       opened without following the link. */
    .qing-subToggle {
        position: absolute;
        top: 4px;
        right: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .qing-subToggle svg {
        width: 16px;
        height: 16px;
        transition: transform 0.2s ease;
    }

    .is-subOpen > .qing-subToggle svg {
        transform: rotate(180deg);
    }

    /* Room for the caret so a long label does not run under it. */
    .layoutHeader__nav li.menu-item-has-children > a,
    .layoutHeader__nav li.page_item_has_children > a,
    .layoutHeader__nav li.qing-hasMega > a {
        padding-right: 52px;
    }

    /* The desktop caret pseudo-element is replaced by the real toggle. */
    .layoutHeader__nav li.menu-item-has-children > a::before,
    .layoutHeader__nav li.page_item_has_children > a::before,
    .layoutHeader__nav li.qing-hasMega > a::before {
        display: none;
    }

    /* Mega panels do not overlay on mobile: the drawer is narrow, so the
       template is shown inline as part of the list instead. */
    .qing-megaPanel {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        border-top: 0;
        box-shadow: none;
    }

    .qing-hasMega.is-subOpen > .qing-megaPanel {
        display: block;
    }

    .qing-megaPanel__inner {
        max-width: none;
        padding: 4px 0 8px 14px;
    }

    /* Hover must not reveal the panel on touch. */
    .qing-hasMega:hover > .qing-megaPanel,
    .qing-hasMega:focus-within > .qing-megaPanel {
        display: none;
    }

    .qing-hasMega.is-subOpen:hover > .qing-megaPanel,
    .qing-hasMega.is-subOpen:focus-within > .qing-megaPanel {
        display: block;
    }
}

@media (max-width: 480px) {
    /* No hard-coded padding here: it stacked on top of .layoutHeader__inner's
       own padding (causing the overflow) and overrode the widget's
       "Header Padding" control. Spacing is set from the widget only. */
    .layoutHeader__iconBtn {
        width: 38px;
        height: 38px;
    }

    .qing-modal__dialog {
        padding: 24px 20px;
    }
}

/* ============================================================
 * Mega menu
 *
 * A menu item becomes a mega panel when its Description field (Appearance
 * -> Menus, "Description" on the item) holds a shortcode -- typically
 * [elementor-template id="123"]. The widget renders the shortcode into a
 * panel and drops the normal sub-menu for that item.
 *
 * The panel is positioned against .qing-elementor-header rather than the
 * <li>, which is what lets it span the full header width instead of
 * hanging off the menu item.
 * ============================================================ */

/* Desktop only, and scoped in a media query on purpose.
 *
 * These rules sit further down the file than the 1024px block above, so
 * without a query of their own they would win there too -- media queries add
 * no specificity, and the later rule takes an equal-specificity tie. That
 * left the drawer broken in two ways: the panel kept opacity:0/visibility:
 * hidden from here and so never appeared however far the item was opened, and
 * .qing-hasMega was forced back to position:static, which sent the caret
 * button (absolute, top:4px right:4px) off to some further ancestor. */
@media (min-width: 1025px) {

    .qing-elementor-header .qing-hasMega {
        /* static so the absolute panel below resolves against the header. */
        position: static;
    }

    .qing-megaPanel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 40;
        display: block;
        background: #fff;
        border-top: 1px solid var(--qing-header-border);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

        /* Hidden without display:none, so the Elementor template inside keeps
           its layout measured and does not reflow on first open. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    }

    .qing-hasMega:hover > .qing-megaPanel,
    .qing-hasMega:focus-within > .qing-megaPanel,
    .qing-hasMega.is-megaOpen > .qing-megaPanel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Inner width. Boxed follows the header max-width; full-width mode lets
       the template run edge to edge. */
    .qing-megaPanel__inner {
        width: 100%;
        max-width: var(--qing-header-max-width);
        margin-inline: auto;
        padding: 28px 24px;
    }

    .qing-megaPanel--full .qing-megaPanel__inner {
        max-width: none;
        padding-inline: 0;
    }

    /* "Fit the template" width mode, set per item in Appearance -> Menus. The
       panel still spans the header (it is positioned left:0/right:0), but the
       inner box shrinks to what the template needs and stays centred. */
    .qing-megaPanel--auto .qing-megaPanel__inner {
        width: -moz-fit-content;
        width: fit-content;
        max-width: var(--qing-header-max-width);
    }

    /* The script injects this caret toggle for every parent item and every
       mega item, but it is only ever styled in the mobile block below. Left
       visible here it paints as a bare UA <button> -- the stray filled box
       under the nav. Desktop already shows a caret through the ::before on
       the parent link, so nothing is lost by hiding it. */
    .qing-subToggle {
        display: none;
    }

    /* Two-list mode, used when a separate Mobile Menu is chosen. Both lists
       are rendered server-side and CSS picks one per breakpoint: choosing in
       JS would need the viewport width, which is not known until after first
       paint, so the wrong menu would flash first. */
    .layoutHeader__nav > ul.qing-header-list--mobile {
        display: none;
    }
}

/* A mega item never shows the plain dropdown as well. */
.qing-hasMega > ul.sub-menu,
.qing-hasMega > .children {
    display: none !important;
}

/* Page scroll lock while the mobile drawer is open. Set on <html> by the
   script; without it the page behind scrolls under the drawer. */
html.qing-header-navOpen,
html.qing-header-navOpen body {
    overflow: hidden;
}