/* ═══════════════════════════════════════════════
   My List — Public CSS  v2.0.0
   ═══════════════════════════════════════════════ */

/* ── CSS Variables ───────────────────────────── */
:root {
    --ml-primary:    #1a1a2e;
    --ml-secondary:  #16213e;
    --ml-accent:     #0f3460;
    --ml-gold:       #e94560;
    --ml-text:       #1e293b;
    --ml-gray-50:    #f8fafc;
    --ml-gray-100:   #f1f5f9;
    --ml-gray-200:   #e2e8f0;
    --ml-gray-300:   #cbd5e1;
    --ml-gray-400:   #94a3b8;
    --ml-gray-500:   #64748b;
    --ml-gray-600:   #475569;
    --ml-gray-800:   #1e293b;
    --ml-white:      #ffffff;
    --ml-radius:     12px;
    --ml-radius-sm:  6px;
    --ml-shadow:     0 4px 24px rgba(0,0,0,.08);
    --ml-shadow-sm:  0 1px 6px rgba(0,0,0,.06);
    --ml-transition: .2s ease;

    /* ── Appearance / Color Customization vars (overridable via admin) ── */
    --ml-bg-page:            #f8fafc;
    --ml-card-bg:            #ffffff;
    --ml-border-color:       #e2e8f0;
    --ml-btn-bg:             #000000;
    --ml-btn-hover:          #222222;
    --ml-btn-text:           #ffffff;
    --ml-btn-border:         #000000;   /* matches bg by default */
    --ml-btn-hover-text:     #ffffff;
    --ml-btn-hover-border:   #222222;   /* matches hover bg by default */
    --ml-btn-radius:         50px;
    --ml-btn-font-size:      0.9rem;
    --ml-btn-font-weight:    600;
    --ml-btn-shadow:         none;
    /* ── Button Style Controls (v3.0.0+) ── */
    --ml-btn-border-width:   1px;
    --ml-btn-padding-y:      10px;
    --ml-btn-padding-x:      22px;
    --ml-btn-hover-shadow:   none;
    --ml-btn-active-bg:      #000000;
    --ml-btn-active-text:    #ffffff;
    --ml-btn-active-border:  #000000;
    --ml-btn-disabled-bg:    #e2e8f0;
    --ml-btn-disabled-text:  #94a3b8;
    --ml-btn-disabled-border:#e2e8f0;
    --ml-heading:            #1a1a2e;
    --ml-body-text:          #1e293b;
    --ml-link:               #0f3460;
    --ml-link-hover:         #1a1a2e;
    --ml-fav-color:          #94a3b8;
    --ml-fav-active:         #e94560;
    --ml-qr-card-bg:         #ffffff;
    --ml-qr-border:          #e2e8f0;
    --ml-qr-heading:         #1a1a2e;
    --ml-qr-desc:            #555a68;
    --ml-search-bg:          #ffffff;
    --ml-search-border:      #cbd5e1;
    --ml-table-header:       #f1f5f9;
    --ml-table-border:       #e2e8f0;
    --ml-membership-card:    #1a1a2e;
    --ml-membership-border:  #e2e8f0;
    --ml-membership-price:   #1a1a2e;
    --ml-membership-duration:#64748b;
    --ml-banner-overlay:     rgba(0,0,0,0);

    /* ── Social Media Per-Platform Colors ── */
    --ml-social-fb-bg:       #1877f2;
    --ml-social-fb-hover:    #166fe5;
    --ml-social-fb-icon:     #ffffff;
    --ml-social-ig-bg:       #e1306c;
    --ml-social-ig-hover:    #c13584;
    --ml-social-ig-icon:     #ffffff;
    --ml-social-tw-bg:       #000000;
    --ml-social-tw-hover:    #333333;
    --ml-social-tw-icon:     #ffffff;
    --ml-social-yt-bg:       #ff0000;
    --ml-social-yt-hover:    #cc0000;
    --ml-social-yt-icon:     #ffffff;
    --ml-social-li-bg:       #0077b5;
    --ml-social-li-hover:    #005f91;
    --ml-social-li-icon:     #ffffff;
    --ml-social-tg-bg:       #0088cc;
    --ml-social-tg-hover:    #006aad;
    --ml-social-tg-icon:     #ffffff;
    --ml-social-wa-bg:       #25d366;
    --ml-social-wa-hover:    #128c7e;
    --ml-social-wa-icon:     #ffffff;
    --ml-social-ws-bg:       #0f3460;
    --ml-social-ws-hover:    #0a2550;
    --ml-social-ws-icon:     #ffffff;
}

/* ── Full-Page Body Reset ────────────────────── */
/*
 * Applied only on the Public My List page (standalone HTML, no theme shell).
 * Resets every common theme/browser margin so the profile fills the viewport.
 */
html.ml-fullpage-body,
body.ml-fullpage-body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ml-gray-50) !important;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* Strip any stray wrappers injected by plugins via wp_head/wp_footer */
body.ml-fullpage-body > *:not(.ml-profile-page):not(script):not(style):not(link) {
    display: none !important;
}

/* ── Full-Width Page ─────────────────────────── */
.ml-profile-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-template-default .entry-content > .ml-profile-page,
body.woocommerce-page    .entry-content > .ml-profile-page {
    max-width: none;
    padding: 0;
}

.site-content .col-full,
.site-content .entry-content,
.site-main .entry-content {
    padding-left: 0;
    padding-right: 0;
}

/* ═══════════════════════════════════════════════
   PROFILE HERO — Two-Column Desktop Layout
   Left: Banner   |   Right: Info Panel
   ═══════════════════════════════════════════════ */

.ml-profile-hero {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 360px;
    background: var(--ml-white);
    border-bottom: 2px solid var(--ml-gray-200);
    box-sizing: border-box;
}

/* ── Left Column: Banner ─────────────────────── */
.ml-profile-hero__banner {
    flex: 1 1 55%;
    min-width: 0;
    background: var(--ml-secondary);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.ml-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* full banner visible — no cropping */
    object-position: center;
    background: var(--ml-secondary);
}

.ml-banner-default {
    width: 100%;
    min-height: 360px;
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
}

/* ── Right Column: Info Panel ────────────────── */
.ml-profile-hero__panel {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 36px;
    box-sizing: border-box;
    background: var(--ml-white);
    overflow-y: auto;
}

/* ── Avatar ──────────────────────────────────── */
.ml-profile-avatar-wrap {
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: 50%;
    padding: 4px;
    background: var(--ml-white);
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}

.ml-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Profile Text ────────────────────────────── */
.ml-profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.ml-profile-name {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: var(--ml-primary);
    margin: 0;
    line-height: 1.2;
}

.ml-profile-list-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ml-accent);
    margin: 0;
}

.ml-profile-username {
    font-size: .875rem;
    color: var(--ml-gray-400);
    margin: 0;
}

.ml-profile-desc {
    font-size: .9rem;
    color: var(--ml-gray-600);
    line-height: 1.65;
}

.ml-profile-desc p { margin: 0 0 8px; }
.ml-profile-desc a { color: var(--ml-accent); }

/* ── Membership Badge ────────────────────────── */
.ml-membership-badge {
    display: inline-block;
    color: var(--ml-white);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.ml-membership-badge--inline {
    font-size: .7rem;
    padding: 3px 10px;
    vertical-align: middle;
}

/* ── Social Links ────────────────────────────── */
.ml-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 4px 0;
}

@media (max-width: 480px) {
    .ml-social-links {
        gap: 10px;
    }
    .ml-social-link {
        padding: 6px 10px;
        font-size: .72rem;
    }
}

.ml-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--ml-transition), transform var(--ml-transition);
    color: var(--ml-white);
}

.ml-social-link:hover { opacity: .85; transform: translateY(-1px); }
.ml-social-link svg { flex-shrink: 0; }

.ml-social-link--facebook  { background: var(--ml-social-fb-bg, #1877f2);  color: var(--ml-social-fb-icon, #fff); }
.ml-social-link--facebook:hover  { background: var(--ml-social-fb-hover, #166fe5); color: var(--ml-social-fb-icon, #fff); opacity: 1; }
.ml-social-link--instagram { background: var(--ml-social-ig-bg, #e1306c);  color: var(--ml-social-ig-icon, #fff); }
.ml-social-link--instagram:hover { background: var(--ml-social-ig-hover, #c13584); color: var(--ml-social-ig-icon, #fff); opacity: 1; }
.ml-social-link--twitter   { background: var(--ml-social-tw-bg, #000000);  color: var(--ml-social-tw-icon, #fff); }
.ml-social-link--twitter:hover   { background: var(--ml-social-tw-hover, #333333); color: var(--ml-social-tw-icon, #fff); opacity: 1; }
.ml-social-link--youtube   { background: var(--ml-social-yt-bg, #ff0000);  color: var(--ml-social-yt-icon, #fff); }
.ml-social-link--youtube:hover   { background: var(--ml-social-yt-hover, #cc0000); color: var(--ml-social-yt-icon, #fff); opacity: 1; }
.ml-social-link--linkedin  { background: var(--ml-social-li-bg, #0077b5);  color: var(--ml-social-li-icon, #fff); }
.ml-social-link--linkedin:hover  { background: var(--ml-social-li-hover, #005f91); color: var(--ml-social-li-icon, #fff); opacity: 1; }
.ml-social-link--telegram  { background: var(--ml-social-tg-bg, #0088cc);  color: var(--ml-social-tg-icon, #fff); }
.ml-social-link--telegram:hover  { background: var(--ml-social-tg-hover, #006aad); color: var(--ml-social-tg-icon, #fff); opacity: 1; }
.ml-social-link--whatsapp  { background: var(--ml-social-wa-bg, #25d366);  color: var(--ml-social-wa-icon, #fff); }
.ml-social-link--whatsapp:hover  { background: var(--ml-social-wa-hover, #128c7e); color: var(--ml-social-wa-icon, #fff); opacity: 1; }
/* WhatsApp Channel — same brand color as WhatsApp (v3.4.26) */
.ml-social-link--whatsapp_channel { background: var(--ml-social-wa-bg, #25d366); color: var(--ml-social-wa-icon, #fff); }
.ml-social-link--whatsapp_channel:hover { background: var(--ml-social-wa-hover, #128c7e); color: var(--ml-social-wa-icon, #fff); opacity: 1; }
/* Threads — Meta brand black (v3.4.33) */
.ml-social-link--threads  { background: #000000; color: #ffffff; }
.ml-social-link--threads:hover  { background: #222222; color: #ffffff; opacity: 1; }
.ml-social-link--tiktok    { background: #000000; }

/* ── WhatsApp row in contact cards (v3.4.33) ──────────────────── */
.ml-mc-row--whatsapp .ml-mc-icon-wrap {
    background: color-mix(in srgb, #25d366 15%, transparent);
    color: #128c7e;
}
.ml-mc-whatsapp {
    color: #128c7e;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}
.ml-mc-whatsapp:hover,
.ml-mc-whatsapp:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #075e54;
}
.ml-mc-whatsapp:focus-visible {
    outline: 2px solid #25d366;
    outline-offset: 3px;
    border-radius: 4px;
}
.ml-social-link--website   { background: var(--ml-social-ws-bg, #0f3460);  color: var(--ml-social-ws-icon, #fff); }
.ml-social-link--website:hover   { background: var(--ml-social-ws-hover, #0a2550); color: var(--ml-social-ws-icon, #fff); opacity: 1; }

/* ── Contact Info ────────────────────────────── */
.ml-contact-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ml-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--ml-gray-600);
    text-decoration: none;
}

.ml-contact-item svg { flex-shrink: 0; color: var(--ml-accent); }
.ml-contact-item:hover { color: var(--ml-primary); }
.ml-contact-item--static { cursor: default; }

/* ── Actions Row ─────────────────────────────── */
.ml-profile-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ml-gray-200);
    margin-top: 4px;
}

.ml-qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ml-qr-img {
    width: 90px;
    height: 90px;
    border-radius: var(--ml-radius-sm);
    border: 1px solid var(--ml-gray-200);
}

.ml-qr-download-link {
    font-size: .72rem;
    color: var(--ml-accent);
    text-decoration: underline;
    text-align: center;
}

/* ── Buttons ─────────────────────────────────── */
.ml-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ml-btn-padding-y, 10px) var(--ml-btn-padding-x, 22px);
    background: var(--ml-btn-bg, #000000);
    color: var(--ml-btn-text, #ffffff);
    border: var(--ml-btn-border-width, 1px) solid var(--ml-btn-border, #000000);
    border-radius: var(--ml-btn-radius, 50px);
    font-weight: var(--ml-btn-font-weight, 600);
    font-size: var(--ml-btn-font-size, .9rem);
    cursor: pointer;
    transition: background var(--ml-transition), color var(--ml-transition),
                border-color var(--ml-transition), box-shadow var(--ml-transition);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--ml-btn-shadow, none);
    line-height: 1.4;
}
.ml-btn:hover,
.ml-btn:focus-visible {
    background: var(--ml-btn-hover, #222222);
    color: var(--ml-btn-hover-text, #ffffff);
    border-color: var(--ml-btn-hover-border, #222222);
    box-shadow: var(--ml-btn-hover-shadow, none);
    text-decoration: none;
}
.ml-btn:active,
.ml-btn.is-pressed {
    background: var(--ml-btn-active-bg, #000000);
    color: var(--ml-btn-active-text, #ffffff);
    border-color: var(--ml-btn-active-border, #000000);
}
.ml-btn:disabled,
.ml-btn[disabled],
.ml-btn.is-disabled {
    background: var(--ml-btn-disabled-bg, #e2e8f0) !important;
    color: var(--ml-btn-disabled-text, #94a3b8) !important;
    border-color: var(--ml-btn-disabled-border, #e2e8f0) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    opacity: 0.75;
    pointer-events: none;
}

/* Large, easy-to-tap buttons on touch/mobile screens */
@media (max-width: 640px) {
    .ml-btn {
        min-height: 46px;
        padding: max(var(--ml-btn-padding-y, 10px), 12px) var(--ml-btn-padding-x, 22px);
        font-size: .9rem;
    }
}

/* ── Variant overrides (these win over base .ml-btn due to cascade order) ── */

.ml-btn--primary {
    background: var(--ml-btn-bg, #000000);
    color: var(--ml-btn-text, #ffffff);
    border-color: var(--ml-btn-border, #000000);
}
.ml-btn--primary:hover {
    background: var(--ml-btn-hover, #222222);
    color: var(--ml-btn-hover-text, #ffffff);
    border-color: var(--ml-btn-hover-border, #222222);
}

.ml-btn--outline {
    background: var(--ml-btn-bg, #000000);
    border-color: var(--ml-btn-border, #000000);
    color: var(--ml-btn-text, #ffffff);
}
.ml-btn--outline:hover {
    background: var(--ml-btn-hover, #222222);
    color: var(--ml-btn-hover-text, #ffffff);
    border-color: var(--ml-btn-hover-border, #222222);
}

.ml-btn--danger {
    background: #dc2626;
    color: var(--ml-white);
    border-color: #dc2626;
}
.ml-btn--danger:hover { background: #b91c1c; color: var(--ml-white); border-color: #b91c1c; }
.ml-btn--danger:active { background: #991b1b; border-color: #991b1b; }

.ml-btn--sm { padding: 7px 16px; font-size: .8rem; }

.ml-btn--copy-link { background: var(--ml-gray-100); color: var(--ml-primary); border-color: var(--ml-gray-300); }
.ml-btn--copy-link:hover { background: var(--ml-gray-200); color: var(--ml-primary); border-color: var(--ml-gray-300); }

.ml-btn--upgrade { padding: 12px 28px; font-size: 1rem; }

.ml-btn--search {
    background: var(--ml-btn-bg, #000000);
    color: var(--ml-btn-text, #ffffff);
    border-color: var(--ml-btn-border, #000000);
}
.ml-btn--search:hover {
    background: var(--ml-btn-hover, #222222);
    color: var(--ml-btn-hover-text, #ffffff);
}

.ml-btn--add {
    background: var(--ml-btn-bg, #000000);
    color: var(--ml-btn-text, #ffffff);
    border: var(--ml-btn-border-width, 1px) solid var(--ml-btn-border, #000000);
    border-radius: var(--ml-btn-radius, 50px);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ml-transition), color var(--ml-transition), border-color var(--ml-transition);
}
.ml-btn--add:hover {
    background: var(--ml-btn-hover, #222222);
    color: var(--ml-btn-hover-text, #ffffff);
}
.ml-btn--in-list { background: var(--ml-accent); color: var(--ml-white); border-color: var(--ml-accent); }
.ml-btn--loop { padding: 5px 12px; font-size: .75rem; margin-top: 6px; display: block; width: 100%; }

/* ═══════════════════════════════════════════════
   MOBILE LAYOUT  (≤ 900px stack)
   Banner → Avatar → Name → Title → Desc →
   Contact → Social → Actions → Products
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
    .ml-profile-hero {
        flex-direction: column;
        min-height: auto;
    }

    .ml-profile-hero__banner {
        flex: none;
        width: 100%;
        min-height: 220px;
    }

    .ml-banner-img {
        width: 100%;
        height: auto;
        max-height: 320px;
        object-fit: contain;
    }

    .ml-banner-default {
        min-height: 220px;
    }

    .ml-profile-hero__panel {
        flex: none;
        max-width: 100%;
        width: 100%;
        padding: 20px 18px 24px;
        gap: 12px;
    }

    .ml-profile-avatar {
        width: 80px;
        height: 80px;
    }

    .ml-contact-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .ml-profile-hero__panel { padding: 16px 14px 20px; }
    .ml-profile-avatar { width: 68px; height: 68px; }
    .ml-profile-name { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════
   PRODUCTS SECTION
   4 cols desktop / 2 cols tablet / 1 col mobile
   Larger images — full card width, correct ratio
   ═══════════════════════════════════════════════ */

.ml-products-section {
    padding: 36px 32px;
    background: var(--ml-gray-50);
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 680px) {
    .ml-products-section { padding: 24px 16px; }
}

.ml-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.ml-search-form {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.ml-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px 16px;
    border: 1.5px solid var(--ml-gray-300);
    border-radius: 50px;
    font-size: .9rem;
    font-family: inherit;
    color: var(--ml-text);
    background: var(--ml-white);
    outline: none;
    transition: border-color var(--ml-transition);
}
.ml-search-input:focus { border-color: var(--ml-accent); }

@media (max-width: 680px) {
    .ml-search-form {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .ml-search-form {
        flex-direction: column;
        gap: 10px;
    }
    .ml-search-form .ml-btn--search {
        width: 100%;
    }
}

/* WooCommerce product grid container */
.ml-wc-loop ul.products {
    margin: 0 !important;
    padding: 0 !important;
}

.ml-products-grid {
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* Desktop: 4 per row */
.ml-products-grid.products.columns-4 li.product {
    width: calc(25% - 15px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Tablet: 2 per row */
@media (max-width: 900px) {
    .ml-products-grid.products.columns-4 li.product {
        width: calc(50% - 10px) !important;
    }
}

/* Mobile: 1 per row */
@media (max-width: 600px) {
    .ml-products-grid.products.columns-4 li.product {
        width: 100% !important;
    }
    .ml-products-grid {
        gap: 12px !important;
    }
}

/*
 * Larger product images — fill full card width, correct aspect ratio,
 * no stretching, no cropping. Works with any WooCommerce theme.
 */
.ml-products-grid li.product .woocommerce-loop-product__link img,
.ml-products-grid li.product a > img,
.ml-products-grid li.product img.attachment-woocommerce_thumbnail {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--ml-gray-50) !important;
    border-radius: var(--ml-radius-sm) !important;
}

/*
 * ── Mobile image overrides (≤ 600px) ────────────────────────────────
 * Force the anchor wrapper to fill the card width, then let the image
 * fill that wrapper. WooCommerce themes often render the product link
 * as `display: inline-block`, which prevents the img from stretching
 * to 100% of the card. These rules fix that and increase the visible
 * image size while maintaining correct aspect ratio.
 */
@media (max-width: 600px) {

    /* Force the product card to have minimal side padding */
    .ml-products-grid li.product {
        padding: 0 !important;
    }

    /* Make the link wrapper block-level so it fills the full card width */
    .ml-products-grid li.product .woocommerce-loop-product__link,
    .ml-products-grid li.product a.woocommerce-loop-product__link {
        display: block !important;
        width: 100% !important;
    }

    /* Larger image: fill card width, 4:3 landscape ratio for bigger feel */
    .ml-products-grid li.product .woocommerce-loop-product__link img,
    .ml-products-grid li.product a > img,
    .ml-products-grid li.product img.attachment-woocommerce_thumbnail,
    .ml-products-grid li.product img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        object-position: center !important;
        background: var(--ml-gray-50) !important;
        border-radius: var(--ml-radius-sm) var(--ml-radius-sm) 0 0 !important;
        margin: 0 !important;
    }

    /* Ensure product title / price area sits cleanly beneath the image */
    .ml-products-grid li.product .woocommerce-loop-product__title,
    .ml-products-grid li.product h2 {
        font-size: 1rem !important;
        padding: 10px 12px 4px !important;
        margin: 0 !important;
    }

    .ml-products-grid li.product .price {
        padding: 0 12px 10px !important;
        display: block !important;
    }
}

/* ── Very small screens (≤ 420px) ───────────────────────────────────
   Switch to 1:1 square images; slightly smaller screens benefit from
   the full-card square rather than 4:3 landscape.               */
@media (max-width: 420px) {
    .ml-products-grid li.product .woocommerce-loop-product__link img,
    .ml-products-grid li.product a > img,
    .ml-products-grid li.product img.attachment-woocommerce_thumbnail,
    .ml-products-grid li.product img {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
}

.ml-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--ml-gray-400);
}
.ml-empty-state__icon { font-size: 3rem; margin-bottom: 12px; }

/* ═══════════════════════════════════════════════
   MY ACCOUNT UI  (unchanged)
   ═══════════════════════════════════════════════ */

.ml-my-account { max-width: 100%; }
.ml-my-account__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.ml-my-account__header h2 { margin: 0; font-size: 1.4rem; color: var(--ml-primary); }

/* ═══════════════════════════════════════════════
   MY ACCOUNT — CARD-BASED DASHBOARD
   ═══════════════════════════════════════════════ */

.ml-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.ml-cards-grid--nested { gap: 24px; }
.ml-card--full { grid-column: 1 / -1; }

.ml-card {
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ml-transition), transform var(--ml-transition), border-color var(--ml-transition);
    height: 100%;
}
.ml-card:hover {
    box-shadow: var(--ml-shadow);
    border-color: var(--ml-gray-300);
    transform: translateY(-2px);
}

.ml-card__header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ml-gray-100);
    background: var(--ml-gray-50);
}
.ml-card__header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ml-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ml-card__header .ml-count { font-size: .78rem; font-weight: 500; color: var(--ml-gray-500); }

.ml-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ml-card__body--center { align-items: center; text-align: center; }
.ml-card__body--center .ml-form-group,
.ml-card__body--center .ml-upload-form { width: 100%; text-align: left; }

.ml-card__identity { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ml-gray-800); }
.ml-card__empty { margin: 0; font-size: .875rem; color: var(--ml-gray-500); }

.ml-card__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.ml-card__banner-preview {
    width: 100%;
    border-radius: var(--ml-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ml-gray-200);
    background: var(--ml-gray-100);
}
.ml-card__banner-preview .ml-banner-preview { margin: 0; border: none; }
.ml-card__banner-empty {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ml-gray-400);
    font-size: .85rem;
    background: linear-gradient(135deg, var(--ml-gray-100) 0%, var(--ml-gray-50) 100%);
}

.ml-def-list { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ml-def-list__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--ml-gray-100); font-size: .82rem; }
.ml-def-list__row:last-child { border-bottom: none; }
.ml-def-list__row dt { color: var(--ml-gray-500); font-weight: 600; margin: 0; }
.ml-def-list__row dd { color: var(--ml-gray-800); margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 900px) {
    .ml-cards-grid { grid-template-columns: 1fr; }
    .ml-card:hover { transform: none; }
}

@media (max-width: 640px) {
    .ml-card__header { padding: 14px 16px; }
    .ml-card__body { padding: 16px; }
    .ml-card__actions .ml-btn,
    .ml-card__actions a.ml-btn { flex: 1; min-width: 140px; justify-content: center; min-height: 46px; }
}

.ml-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 50px;
    border: 1px solid transparent;
}
.ml-status--active    { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ml-status--expired   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ml-status--pending   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ml-status--cancelled { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.ml-status--inactive  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

@media (max-width: 640px) {
    .ml-dashboard__banner { height: 110px; }
    .ml-dashboard__identity { margin-top: -38px; }
    .ml-dashboard__avatar { width: 72px; height: 72px; }
    .ml-dashboard__welcome { padding-top: 38px; }
    .ml-dashboard__public-link { margin-top: 10px; width: 100%; text-align: center; justify-content: center; }
    .ml-dashboard__body { padding: 0 16px 20px; }
}

.ml-product-limit-bar { background: var(--ml-gray-100); border-radius: var(--ml-radius-sm); padding: 10px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--ml-gray-600); }
.ml-limit-progress { height: 6px; background: var(--ml-gray-200); border-radius: 50px; overflow: hidden; }
.ml-limit-progress__fill { height: 100%; background: var(--ml-accent); border-radius: 50px; transition: width .4s ease; }
.ml-limit-progress__fill--full { background: #dc2626; }

.ml-form-group { margin-bottom: 20px; }
.ml-form-group label { display: block; font-weight: 600; font-size: .875rem; color: var(--ml-gray-800); margin-bottom: 6px; }
.ml-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--ml-gray-300);
    border-radius: var(--ml-radius-sm);
    font-size: .9rem;
    color: var(--ml-text);
    transition: border-color var(--ml-transition);
    box-sizing: border-box;
}
.ml-input:focus { outline: none; border-color: var(--ml-accent); }
.ml-select { padding: 10px 14px; border: 1.5px solid var(--ml-gray-300); border-radius: var(--ml-radius-sm); font-size: .9rem; }
.ml-input-group { display: flex; align-items: stretch; }
.ml-input-prefix { background: var(--ml-gray-100); padding: 10px 12px; border: 1.5px solid var(--ml-gray-300); border-right: none; border-radius: var(--ml-radius-sm) 0 0 var(--ml-radius-sm); font-size: .75rem; color: var(--ml-gray-500); white-space: nowrap; display: flex; align-items: center; }
.ml-input-group .ml-input { border-radius: 0 var(--ml-radius-sm) var(--ml-radius-sm) 0; }

.ml-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ml-form-grid { grid-template-columns: 1fr; } }
.ml-form-group--full { grid-column: 1 / -1; }
.ml-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.ml-product-category-field { max-width: 100%; }
.ml-product-category-field .select2-container,
.ml-product-category-field .selectWoo-container {
    width: 100% !important;
    max-width: 100%;
}
.ml-product-category-select,
.ml-product-category-search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ml-product-category-search {
    margin-bottom: 8px;
}
.ml-product-category-meta {
    margin: -4px 0 14px;
    color: var(--ml-gray-600, #64748b);
    font-size: .9rem;
    line-height: 1.4;
}
.ml-product-category-meta__label {
    font-weight: 600;
    color: var(--ml-gray-700, #334155);
}
.ml-product-category-meta__link {
    color: var(--ml-accent, #2563eb);
    text-decoration: none;
}
.ml-product-category-meta__link:hover,
.ml-product-category-meta__link:focus {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .ml-product-category-select,
    .ml-product-category-search {
        min-height: 46px;
        font-size: 1rem;
    }
}

/* Product Image Upload — 50 KB to 200 KB guidance + validation feedback */
.ml-product-image-field { display: flex; flex-direction: column; gap: 6px; }
.ml-product-image-note {
    display: block;
    margin: 4px 0 8px;
    padding: 10px 12px;
    background: #f5f8ff;
    border: 1px solid #d5e0f5;
    border-radius: 8px;
    color: #1f3a68;
    font-size: .8125rem;
    line-height: 1.45;
    font-weight: 500;
}
.ml-product-image-note strong { color: #123058; }
.ml-product-image-error {
    display: none;
    margin-top: 6px;
    color: #b0201a;
    font-size: .8125rem;
    font-weight: 600;
}
.ml-product-image-error.is-visible { display: block; }
.ml-input--invalid { border-color: #b0201a !important; box-shadow: 0 0 0 2px rgba(176,32,26,.15); }
@media (max-width: 640px) {
    .ml-product-image-note { font-size: .78125rem; }
}

/* Optional price-range field affordance */
.ml-field-optional {
    display: inline-block;
    margin-left: 4px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ml-gray-600, #6b7280);
    text-transform: none;
}
.ml-price-range-error {
    display: none;
    grid-column: 1 / -1;
    margin: -6px 0 4px;
    color: #b0201a;
    font-size: .8125rem;
    font-weight: 600;
}
.ml-price-range-error.is-visible { display: block; }

/* Shared image-upload size guidance + error (Place banner, My List banner + profile image) */
.ml-image-size-note {
    display: block;
    margin: 4px 0 10px;
    padding: 10px 12px;
    background: #f5f8ff;
    border: 1px solid #d5e0f5;
    border-radius: 8px;
    color: #1f3a68;
    font-size: .8125rem;
    line-height: 1.45;
    font-weight: 500;
}
.ml-image-size-note strong { color: #123058; }
.ml-image-size-error {
    display: none;
    margin-top: 6px;
    color: #b0201a;
    font-size: .8125rem;
    font-weight: 600;
}
.ml-image-size-error.is-visible { display: block; }
.ml-image-upload-field { display: block; }
@media (max-width: 640px) {
    .ml-image-size-note { font-size: .78125rem; }
}

/* My Account — Add New Place */
.ml-place-account-form { display: flex; flex-direction: column; gap: 18px; }
.ml-place-account-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed var(--ml-gray-300);
    border-radius: var(--ml-radius-sm);
    background: var(--ml-gray-50);
}
.ml-place-account-preview { margin-bottom: 10px; max-width: 520px; }
.ml-place-account-repeater { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.ml-place-account-row {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius-sm);
    background: var(--ml-gray-50);
}
.ml-place-account-row--inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; }
.ml-place-account-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.ml-place-account-gallery__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius-sm);
    background: #fff;
    font-size: .8rem;
}
.ml-place-account-gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}
.ml-place-dashboard-list { display: flex; flex-direction: column; gap: 14px; }
.ml-place-dashboard-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    background: var(--ml-gray-50);
}
.ml-place-dashboard-card > img {
    width: 120px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--ml-gray-100);
}
.ml-place-dashboard-card h4 { margin: 0 0 4px; color: var(--ml-primary); }
.ml-place-dashboard-card p { margin: 0 0 8px; color: var(--ml-gray-500); }
@media (max-width: 760px) {
    .ml-place-account-row--inline,
    .ml-place-dashboard-card { grid-template-columns: 1fr; }
    .ml-place-dashboard-card > img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

.ml-editor-toolbar { display: flex; gap: 4px; margin-bottom: 4px; }
.ml-editor-toolbar button { padding: 4px 10px; border: 1px solid var(--ml-gray-300); border-radius: 3px; background: var(--ml-white); cursor: pointer; font-size: .85rem; }
.ml-editor { min-height: 120px; padding: 10px 14px; border: 1.5px solid var(--ml-gray-300); border-radius: var(--ml-radius-sm); font-size: .9rem; line-height: 1.6; }
.ml-editor:focus { outline: none; border-color: var(--ml-accent); }
.ml-char-count { font-size: .75rem; color: var(--ml-gray-400); }

.ml-search-add { position: relative; margin-bottom: 20px; }
.ml-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--ml-white); border: 1px solid var(--ml-gray-200); border-radius: var(--ml-radius-sm); box-shadow: var(--ml-shadow); z-index: 100; max-height: 320px; overflow-y: auto; }
.ml-search-result { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--ml-gray-100); }
.ml-search-result:hover { background: var(--ml-gray-50); }
.ml-search-result:last-child { border-bottom: none; }
.ml-search-result img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.ml-search-result-info { flex: 1; min-width: 0; }
.ml-search-result-name { font-size: .85rem; font-weight: 600; color: var(--ml-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-search-result-price { font-size: .75rem; color: var(--ml-gray-500); }
.ml-search-result-add { flex-shrink: 0; font-size: .75rem; background: var(--ml-primary); color: var(--ml-white); border: none; padding: 5px 12px; border-radius: 50px; cursor: pointer; }

.ml-sortable-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ml-sortable-item { display: flex; align-items: center; gap: 12px; background: var(--ml-white); border: 1.5px solid var(--ml-gray-200); border-radius: var(--ml-radius-sm); padding: 10px 14px; }
.ml-sortable-item:hover { border-color: var(--ml-gray-300); box-shadow: var(--ml-shadow-sm); }
.ml-sort-handle { cursor: grab; color: var(--ml-gray-400); font-size: 1.2rem; line-height: 1; }
.ml-sort-handle:active { cursor: grabbing; }
.ml-sortable-img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.ml-sortable-info { flex: 1; min-width: 0; }
.ml-sortable-info a { font-size: .875rem; font-weight: 600; color: var(--ml-primary); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-sortable-price { font-size: .75rem; color: var(--ml-gray-500); }
.ml-remove-product { background: none; border: none; color: var(--ml-gray-400); cursor: pointer; font-size: 1.1rem; padding: 4px; border-radius: 4px; transition: color var(--ml-transition); }
.ml-remove-product:hover { color: #dc2626; }

/* ── Multiple mobile contacts in My Account ─────────────────── */
.ml-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ml-contact-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border: 1.5px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    background: var(--ml-gray-50);
}
.ml-contact-entry__handle {
    cursor: grab;
    color: var(--ml-gray-400);
    font-size: 1.25rem;
    line-height: 2.3;
}
.ml-contact-entry__grid {
    width: 100%;
}
@media (max-width: 640px) {
    .ml-contact-entry {
        grid-template-columns: 1fr;
    }
    .ml-contact-entry__handle {
        display: none;
    }
    .ml-remove-contact-entry {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .ml-sortable-item { padding: 12px; gap: 10px; }
    .ml-sortable-img { width: 44px; height: 44px; }
    .ml-remove-product { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
    .ml-search-result { padding: 12px 14px; }
    .ml-search-result-add { padding: 8px 14px; min-height: 32px; }
}

.ml-file-input { display: none; }
.ml-file-label { display: inline-block; padding: 9px 18px; background: var(--ml-gray-100); border: 1.5px solid var(--ml-gray-300); border-radius: 50px; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--ml-gray-600); transition: all var(--ml-transition); }
.ml-file-label:hover { background: var(--ml-gray-200); }
.ml-upload-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ml-image-preview { margin-bottom: 12px; }
.ml-banner-preview { width: 100%; max-width: 480px; aspect-ratio: 16/9; object-fit: contain; border-radius: var(--ml-radius-sm); border: 1px solid var(--ml-gray-200); display: block; background: var(--ml-gray-100); }
.ml-avatar-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ml-gray-200); display: block; }

.ml-share-url-box { display: flex; gap: 8px; margin-bottom: 16px; }
.ml-share-url { font-size: .8rem; background: var(--ml-gray-50); }
.ml-share-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ml-share-platform { display: inline-block; padding: 8px 18px; border-radius: 50px; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--ml-white); transition: opacity var(--ml-transition); }
.ml-share-platform:hover { opacity: .85; color: var(--ml-white); }
.ml-share-platform--whatsapp { background: #25d366; }
.ml-share-platform--facebook { background: #1877f2; }
.ml-share-platform--twitter  { background: #000; }
.ml-share-platform--telegram { background: #0088cc; }
.ml-share-platform--email    { background: var(--ml-gray-600); }

@media (max-width: 640px) {
    .ml-share-url-box { flex-direction: column; }
    .ml-share-url-box .ml-btn { width: 100%; justify-content: center; }
    .ml-share-platform { flex: 1 1 calc(50% - 8px); text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

.ml-qr-section, .ml-pdf-section { margin-bottom: 28px; }
.ml-qr-large { border: 1px solid var(--ml-gray-200); border-radius: var(--ml-radius-sm); display: block; margin-bottom: 12px; }
.ml-qr-section h3, .ml-pdf-section h3 { font-size: 1rem; color: var(--ml-primary); margin: 0 0 12px; }

/* ── QR Code Card (modern, centered) ─────────────── */
.ml-qr-card {
    max-width: 380px;
    margin: 0 auto 28px;
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.ml-qr-card__heading { font-size: 1.1rem; font-weight: 700; color: var(--ml-primary); margin: 0; }
.ml-qr-card__desc { font-size: .85rem; color: var(--ml-gray-500); line-height: 1.5; margin: 0; }
.ml-qr-card__frame {
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius-sm);
    padding: 14px;
    display: inline-flex;
}
.ml-qr-card__frame .ml-qr-large { border: none; margin-bottom: 0; width: 190px; height: 190px; max-width: 100%; }
.ml-qr-card__btn { width: 100%; justify-content: center; margin-top: 4px; }
.ml-qr-card__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
@media (max-width: 480px) {
    .ml-qr-card { max-width: 100%; padding: 22px 16px; }
    .ml-qr-card__frame .ml-qr-large { width: 160px; height: 160px; }
}

.ml-notice { padding: 12px 16px; border-radius: var(--ml-radius-sm); margin-bottom: 16px; font-size: .875rem; }
.ml-notice--success { background: #f0fdf4; border: 1px solid #22c55e; color: #166534; }
.ml-notice--error   { background: #fef2f2; border: 1px solid #f87171; color: #991b1b; }
.ml-notice--warning { background: #fefce8; border: 1px solid #facc15; color: #713f12; }
.ml-notice--info    { background: #eff6ff; border: 1px solid #60a5fa; color: #1e40af; }

.ml-restricted-notice { text-align: center; padding: 48px 24px; max-width: 600px; margin: 0 auto; }
.ml-restricted-notice__icon { font-size: 3rem; margin-bottom: 16px; }
.ml-restricted-notice h2 { font-size: 1.3rem; color: var(--ml-primary); margin-bottom: 12px; }
.ml-upgrade-plans { margin: 20px 0; }
.ml-upgrade-plans__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; text-align: left; }
.ml-upgrade-plan-card { background: var(--ml-gray-50); border: 1px solid var(--ml-gray-200); border-radius: var(--ml-radius); padding: 16px; }
.ml-plan-features { list-style: none; padding: 0; margin: 8px 0 0; font-size: .8rem; color: var(--ml-gray-600); }
.ml-plan-features li { margin-bottom: 4px; }

/* Stat pill (kept for any template still using it) */
.ml-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--ml-gray-100);
    border-radius: var(--ml-radius-sm);
    padding: 8px 18px;
    line-height: 1.2;
}
.ml-stat-pill strong { font-size: 1.4rem; color: var(--ml-primary); }
.ml-stat-pill span   { font-size: .7rem; color: var(--ml-gray-500); text-transform: uppercase; }

/* ── Public location directory and full-width My List cards ─── */
.ml-location-page {
    background: var(--ml-bg-page, var(--ml-gray-50));
    min-height: 100vh;
}
.ml-location-hero {
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
    color: var(--ml-white);
    padding: 54px 32px;
    text-align: center;
}
.ml-location-hero__inner {
    max-width: 980px;
    margin: 0 auto;
}
.ml-location-hero h1 {
    color: var(--ml-white);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    margin: 0 0 10px;
    line-height: 1.2;
}
.ml-location-hero p {
    margin: 0;
    color: rgba(255,255,255,.82);
}
.ml-location-hero__banner {
    max-width: 980px;
    margin: 0 auto 22px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0,0,0,.22);
}
.ml-location-hero__banner img {
    display: block;
    width: 100%;
    aspect-ratio: 16/5;
    object-fit: cover;
}
.ml-location-content {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 48px;
}
.ml-location-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}
.ml-location-category-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ml-card-bg, var(--ml-white));
    border: 1px solid var(--ml-border-color, var(--ml-gray-200));
    border-radius: 18px;
    box-shadow: var(--ml-shadow-sm);
    text-decoration: none;
    color: var(--ml-heading, var(--ml-primary));
    transition: transform var(--ml-transition), box-shadow var(--ml-transition), border-color var(--ml-transition);
}
.ml-location-category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ml-shadow);
    border-color: var(--ml-gray-300);
    color: var(--ml-heading, var(--ml-primary));
}
.ml-location-category-card__banner,
.ml-location-category-card__default {
    width: 100%;
    aspect-ratio: 16/7;
    object-fit: cover;
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
}
.ml-location-category-card__body {
    padding: 18px 20px;
}
.ml-location-category-card__title {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 0;
}
.ml-location-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.ml-location-subnav a {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    color: var(--ml-accent);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}
.ml-public-list-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ml-public-list-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 32%) 1fr;
    gap: 0;
    overflow: hidden;
    background: var(--ml-card-bg, var(--ml-white));
    border: 1px solid var(--ml-border-color, var(--ml-gray-200));
    border-radius: 18px;
    box-shadow: var(--ml-shadow-sm);
    transition: transform var(--ml-transition), box-shadow var(--ml-transition), border-color var(--ml-transition);
}
.ml-public-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ml-shadow);
    border-color: var(--ml-gray-300);
}
.ml-public-list-card__media {
    min-height: 210px;
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
}
.ml-public-list-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
}
.ml-public-list-card__body {
    padding: clamp(20px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ml-public-list-card__title {
    color: var(--ml-heading, var(--ml-primary));
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}
.ml-public-list-card__owner {
    color: var(--ml-gray-500);
    font-size: .9rem;
    margin: 0;
}
.ml-public-list-card__desc {
    color: var(--ml-body-text, var(--ml-gray-600));
    line-height: 1.65;
    margin: 0;
}
.ml-public-list-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}
.ml-public-list-card__meta span,
.ml-profile-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--ml-gray-100);
    color: var(--ml-gray-600);
    font-size: .8rem;
    font-weight: 700;
}
.ml-public-list-card__actions {
    display: flex;
    margin-top: 8px;
}
.ml-profile-stats-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.ml-mobile-contacts-public {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.ml-mobile-contact-public {
    padding: 12px 14px;
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius-sm);
    background: var(--ml-gray-50);
}
.ml-mobile-contact-public__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ml-primary);
}
.ml-mobile-contact-public__head a {
    color: var(--ml-accent);
    text-decoration: none;
}
.ml-mobile-contact-public__desc {
    margin: 8px 0 0;
    color: var(--ml-gray-600);
    font-size: .86rem;
    line-height: 1.6;
    white-space: pre-wrap;
}
@media (max-width: 760px) {
    .ml-location-content { width: min(100% - 28px, 1180px); padding-top: 24px; }
    .ml-location-hero { padding: 38px 18px; }
    .ml-public-list-card { grid-template-columns: 1fr; }
    .ml-public-list-card__media,
    .ml-public-list-card__media img { min-height: 180px; }
}

/* ── Favorites: heart toggle (product loop cards) ────────────── */
.ml-favorite-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ml-gray-200);
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ml-gray-500);
    box-shadow: var(--ml-shadow-sm);
    transition: transform var(--ml-transition), color var(--ml-transition), background var(--ml-transition);
}
.ml-favorite-heart:hover { transform: scale(1.08); color: var(--ml-gold); }
.ml-favorite-heart--active { color: var(--ml-gold); }
ul.products li.product { position: relative; }

/* ── Favorites: single product page button ───────────────────── */
.ml-btn--favorite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-300);
    color: var(--ml-gray-600);
}
.ml-btn--favorite:hover { border-color: var(--ml-gold); color: var(--ml-gold); }
.ml-btn--favorite-active,
.ml-btn--favorite.ml-btn--favorite-active {
    background: var(--ml-gold);
    border-color: var(--ml-gold);
    color: var(--ml-white);
}

/* ── Favorites: navigation bar (below banner, above products) ── */
.ml-favorites-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    padding: 14px 20px;
    margin: 16px 0 24px;
}
.ml-favorites-bar__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--ml-primary);
}
.ml-favorites-bar__count {
    background: var(--ml-gray-100);
    color: var(--ml-gray-600);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .8rem;
    font-weight: 700;
}
.ml-favorites-bar .ml-btn { white-space: nowrap; }

/* ── Dedicated /my-favorites/ page ────────────────────────────── */
.ml-favorites-page .ml-empty-state { padding: 64px 24px; }

/* ── Profile-level Favorite button (on the My List profile page) ─ */
.ml-profile-fav-btn {
    background: var(--ml-white);
    border: 1.5px solid var(--ml-gray-300);
    color: var(--ml-gray-600);
    border-radius: var(--ml-radius-sm);
    font-weight: 600;
    transition: background var(--ml-transition), border-color var(--ml-transition), color var(--ml-transition), transform var(--ml-transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    cursor: pointer;
}
.ml-profile-fav-btn:hover {
    border-color: #e94560;
    color: #e94560;
    background: #fff5f7;
    transform: translateY(-1px);
}
.ml-profile-fav-btn--active {
    background: #fff0f3;
    border-color: #e94560;
    color: #e94560;
}
.ml-profile-fav-btn--active:hover {
    background: #fde8ec;
}

/* ── Favorite My Lists page hero ─────────────────────────────── */
.ml-fav-lists-page { background: var(--ml-gray-50); }
.ml-fav-lists-hero {
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
    padding: 48px 32px;
    text-align: center;
}
.ml-fav-lists-hero__inner { max-width: 640px; margin: 0 auto; }
.ml-fav-lists-hero__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--ml-white);
    margin: 0 0 10px;
}
.ml-fav-lists-hero__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.8);
    margin: 0;
}
.ml-fav-lists-hero__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.2);
    border-radius: 99px;
    padding: 2px 10px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ml-white);
    margin-left: 6px;
}

/* ── Favorite Lists card grid ────────────────────────────────── */
.ml-fav-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 8px;
}
@media (max-width: 1024px) {
    .ml-fav-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ml-fav-list-grid { grid-template-columns: 1fr; gap: 20px; }
}

.ml-fav-list-card {
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ml-transition), transform var(--ml-transition);
    position: relative;
}
.ml-fav-list-card:hover {
    box-shadow: var(--ml-shadow);
    transform: translateY(-3px);
}

/* Banner – full image always visible, no cropping */
.ml-fav-list-card__banner-link { display: block; }
.ml-fav-list-card__banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center center;
    background: #f8fafc;
    display: block;
}
.ml-fav-list-card__banner--default {
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
    aspect-ratio: 16 / 9;
}

/* Avatar below banner — no overlap, no negative margin */
.ml-fav-list-card__avatar-wrap {
    position: static;
    margin: 16px 0 0 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--ml-white);
    box-shadow: var(--ml-shadow-sm);
    overflow: hidden;
    background: var(--ml-gray-100);
    flex-shrink: 0;
}
.ml-fav-list-card__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body */
.ml-fav-list-card__body {
    padding: 14px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.ml-fav-list-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--ml-primary);
}
.ml-fav-list-card__name a { color: inherit; text-decoration: none; }
.ml-fav-list-card__name a:hover { color: var(--ml-accent); }

.ml-fav-list-card__list-title {
    font-size: .88rem;
    color: var(--ml-gray-500);
    margin: 0;
    font-style: italic;
}
.ml-fav-list-card__desc {
    font-size: .88rem;
    color: var(--ml-gray-600);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.ml-fav-list-card__meta {
    font-size: .82rem;
    color: var(--ml-gray-500);
    border-top: 1px solid var(--ml-gray-100);
    padding-top: 8px;
    margin-top: auto;
}

/* Actions */
.ml-fav-list-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ml-fav-list-card__view-btn { flex: 1 1 auto; text-align: center; }
.ml-fav-list-card__remove-btn {
    font-size: .82rem;
    white-space: nowrap;
    color: var(--ml-gray-500);
    border-color: transparent;
}
.ml-fav-list-card__remove-btn:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff5f5;
}

/* ── Favorites card grid ─────────────────────────────────────── */
.ml-fav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 8px;
}
@media (max-width: 1024px) {
    .ml-fav-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ml-fav-grid { grid-template-columns: 1fr; gap: 16px; }
}

.ml-fav-card {
    background: var(--ml-white);
    border: 1px solid var(--ml-gray-200);
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ml-transition), transform var(--ml-transition);
}
.ml-fav-card:hover {
    box-shadow: var(--ml-shadow);
    transform: translateY(-2px);
}

/* Image area */
.ml-fav-card__image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--ml-gray-100);
}
.ml-fav-card__image-link { display: block; width: 100%; height: 100%; }
.ml-fav-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ml-fav-card:hover .ml-fav-card__image { transform: scale(1.04); }

/* Heart button overlay on image */
.ml-fav-card__image-wrap .ml-favorite-heart {
    top: 10px;
    right: 10px;
}

/* Body */
.ml-fav-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ml-fav-card__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--ml-primary);
}
.ml-fav-card__name a {
    color: inherit;
    text-decoration: none;
}
.ml-fav-card__name a:hover { color: var(--ml-accent); }

.ml-fav-card__price {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ml-accent);
}
.ml-fav-card__price ins { text-decoration: none; }

.ml-fav-card__rating {
    font-size: .85rem;
}
.ml-fav-card__rating .star-rating { margin: 0; }

/* Actions row */
.ml-fav-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--ml-gray-100);
}
.ml-fav-card__actions .button,
.ml-fav-card__actions .add_to_cart_button {
    flex: 1 1 auto;
    font-size: .85rem;
    padding: 8px 12px;
    border-radius: var(--ml-radius-sm);
    text-align: center;
    white-space: nowrap;
}
.ml-fav-card__view-btn {
    font-size: .82rem;
    padding: 7px 12px;
    white-space: nowrap;
}
.ml-fav-card__remove-btn {
    font-size: .82rem;
    padding: 7px 10px;
    white-space: nowrap;
    color: var(--ml-gray-500);
    border-color: transparent;
}
.ml-fav-card__remove-btn:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff5f5;
}

/* Ghost button variant */
.ml-btn--ghost {
    background: transparent;
    border: 1px solid var(--ml-gray-200);
    color: var(--ml-gray-600);
}
.ml-btn--ghost:hover {
    background: var(--ml-gray-100);
    border-color: var(--ml-gray-300);
}

/* ── Pagination ──────────────────────────────────────────────── */
.ml-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}
.ml-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--ml-radius-sm);
    border: 1px solid var(--ml-gray-200);
    color: var(--ml-gray-600);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ml-transition), color var(--ml-transition), border-color var(--ml-transition);
}
.ml-pagination__link:hover { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-pagination__link--active {
    background: var(--ml-accent);
    border-color: var(--ml-accent);
    color: var(--ml-white);
}

/* ═══════════════════════════════════════════════
   APPEARANCE / COLOR CUSTOMIZATION OVERRIDES
   These rules apply the admin-customizable CSS
   vars to the specific elements they control.
   ═══════════════════════════════════════════════ */

/* Page background */
.ml-fullpage-body { background: var(--ml-bg-page) !important; }
.ml-products-section,
.ml-fav-lists-page { background: var(--ml-bg-page); }

/* Card backgrounds */
.ml-card,
.ml-fav-list-card,
.ml-profile-hero__panel,
.ml-qr-card,
.ml-sortable-item,
.ml-search-results { background: var(--ml-card-bg); }

/* Border colors */
.ml-profile-hero,
.ml-card,
.ml-fav-list-card,
.ml-qr-card,
.ml-search-results,
.ml-sortable-item,
.ml-favorites-bar { border-color: var(--ml-border-color); }

/* ── Button Radius & Shadow (applied to the base class) ───────────── */
.ml-btn { border-radius: var(--ml-btn-radius); box-shadow: var(--ml-btn-shadow); }
/* .ml-btn--add had border-radius hardcoded, so override explicitly */
.ml-btn--add { border-radius: var(--ml-btn-radius); box-shadow: var(--ml-btn-shadow); }

/* ── Primary / filled buttons ─────────────────────────────────────── */
.ml-btn--primary,
.ml-btn--add,
.ml-btn--in-list,
.ml-btn--search,
.ml-btn--upgrade {
    background:   var(--ml-btn-bg);
    color:        var(--ml-btn-text);
    border-color: var(--ml-btn-border);
}
.ml-btn--primary:hover,
.ml-btn--add:hover,
.ml-btn--in-list:hover,
.ml-btn--search:hover,
.ml-btn--upgrade:hover {
    background:   var(--ml-btn-hover);
    color:        var(--ml-btn-hover-text);
    border-color: var(--ml-btn-hover-border);
}

/* ── Outline buttons (View Public Page, Copy QR, etc.) ───────────── */
.ml-btn--outline {
    background:   var(--ml-btn-bg);
    border-color: var(--ml-btn-border);
    color:        var(--ml-btn-text);
}
.ml-btn--outline:hover {
    background:   var(--ml-btn-hover);
    color:        var(--ml-btn-hover-text);
    border-color: var(--ml-btn-hover-border);
}

/* ── Copy-link button (secondary/tonal style) ────────────────────── */
.ml-btn--copy-link        { color: var(--ml-btn-bg); }
.ml-btn--copy-link:hover  { color: var(--ml-btn-hover); }

/* ── Ghost button ────────────────────────────────────────────────── */
.ml-btn--ghost:hover { border-color: var(--ml-btn-hover); color: var(--ml-btn-hover); }

/* ── Pagination: active page & hover state ───────────────────────── */
.ml-pagination__link--active {
    background:   var(--ml-btn-bg);
    border-color: var(--ml-btn-bg);
    color:        var(--ml-btn-text);
}
.ml-pagination__link:hover {
    border-color: var(--ml-btn-hover);
    color:        var(--ml-btn-hover);
}

/* Headings */
.ml-profile-name,
.ml-fav-lists-hero__title,
.ml-card__header h3,
.ml-fav-list-card__name a,
.ml-qr-card__heading { color: var(--ml-heading); }

/* Body text */
.ml-profile-desc,
.ml-profile-username,
.ml-contact-item,
.ml-fav-list-card__desc { color: var(--ml-body-text); }

/* Links */
.ml-profile-desc a,
.ml-contact-item { color: var(--ml-link); }
.ml-profile-desc a:hover,
.ml-contact-item:hover { color: var(--ml-link-hover); }

/* Favorite button — outline (not yet favorited) */
.ml-profile-fav-btn {
    color: var(--ml-fav-color);
    border-color: var(--ml-fav-color);
}
.ml-profile-fav-btn:hover {
    border-color: var(--ml-fav-active);
    color: var(--ml-fav-active);
    background: color-mix(in srgb, var(--ml-fav-active) 8%, white);
}

/* Favorite button — active (favorited) */
.ml-profile-fav-btn--active {
    background: color-mix(in srgb, var(--ml-fav-active) 10%, white);
    border-color: var(--ml-fav-active);
    color: var(--ml-fav-active);
}
.ml-profile-fav-btn--active:hover {
    background: color-mix(in srgb, var(--ml-fav-active) 18%, white);
}

/* Product-card heart */
.ml-favorite-heart { color: var(--ml-fav-color); }
.ml-favorite-heart:hover,
.ml-favorite-heart--active { color: var(--ml-fav-active); }

/* QR Code card */
.ml-qr-card { background: var(--ml-qr-card-bg); border-color: var(--ml-qr-border); }
.ml-qr-card__frame { border-color: var(--ml-qr-border); }
.ml-qr-large,
.ml-qr-img { border-color: var(--ml-qr-border); }
.ml-qr-card__heading { color: var(--ml-qr-heading); }
.ml-qr-card__desc    { color: var(--ml-qr-desc); }

/* Search bar */
.ml-search-input {
    background: var(--ml-search-bg);
    border-color: var(--ml-search-border);
}
.ml-search-input:focus { border-color: var(--ml-link); }

/* Tables / My Account product list */
.ml-sortable-item { border-color: var(--ml-table-border); }
.ml-products-table thead th,
.ml-account-table thead th,
.ml-sortable-header,
.ml-table-header-row { background: var(--ml-table-header); color: var(--ml-heading); }
.ml-products-table td,
.ml-products-table th,
.ml-account-table td,
.ml-account-table th { border-color: var(--ml-table-border); }

/* Membership card / badge */
.ml-membership-badge { background: var(--ml-membership-card); }
.ml-fav-lists-hero {
    background: linear-gradient(135deg, var(--ml-membership-card) 0%, var(--ml-btn-hover) 100%);
}
.ml-fav-list-card__banner--default {
    background: linear-gradient(135deg, var(--ml-membership-card) 0%, var(--ml-btn-hover) 100%);
}
/* Membership card border */
.ml-card .ml-membership-badge { border: 1px solid var(--ml-membership-border); }
/* Membership price & duration in account cards */
.ml-membership-price,
.ml-def-list .ml-price   { color: var(--ml-membership-price); }
.ml-membership-duration,
.ml-def-list .ml-duration { color: var(--ml-membership-duration); }

/* Banner overlay disabled — no overlay, gradient, or dimming on banner */
.ml-profile-hero__banner { position: static; }
.ml-profile-hero__banner::after { display: none !important; content: none !important; }

/* ═══════════════════════════════════════════════
   Public My List + Location UI improvements
   Scoped to public profile/location pages only.
   ═══════════════════════════════════════════════ */

.ml-public-profile-page {
    background: var(--ml-bg-page, var(--ml-gray-50));
}

.ml-public-profile-page .ml-profile-hero {
    display: block;
    width: 100%;
    min-height: 0;
    background: transparent;
    border: 0;
}

/* Banner: full-width on top, complete image visible, no content over it */
.ml-public-profile-page .ml-profile-hero__banner {
    display: block;
    position: static; /* ensure nothing overlays it */
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f8fafc;
}

/* Remove any pseudo-element overlay on the banner */
.ml-public-profile-page .ml-profile-hero__banner::before,
.ml-public-profile-page .ml-profile-hero__banner::after {
    display: none !important;
    content: none !important;
}

.ml-public-profile-page .ml-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8fafc;
}

.ml-public-profile-page .ml-banner-default {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

/* Content panel: below the banner, white card, shadow, centered */
.ml-public-profile-page .ml-profile-hero__panel {
    display: block;
    position: static;
    width: min(1120px, calc(100% - 40px));
    max-width: none;
    margin: 24px auto 0;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.09);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    overflow: visible;
    box-sizing: border-box;
}

.ml-public-profile-page .ml-profile-name-row {
    justify-content: center;
    width: 100%;
}

.ml-public-profile-page .ml-profile-name {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    text-align: center;
}

.ml-public-profile-page .ml-profile-desc {
    width: min(920px, 100%);
    margin: 0 auto;
    color: var(--ml-body-text, var(--ml-gray-600));
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.75;
    text-align: center;
}

.ml-public-profile-page .ml-profile-name-row + .ml-profile-desc {
    margin-top: -2px;
}

.ml-public-profile-page .ml-profile-owner-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.ml-public-profile-page .ml-profile-avatar-wrap {
    align-self: center;
    padding: 3px;
    box-shadow: var(--ml-shadow-sm);
}

.ml-public-profile-page .ml-profile-avatar {
    width: 72px;
    height: 72px;
}

.ml-public-profile-page .ml-profile-owner-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.ml-public-profile-page .ml-profile-list-title,
.ml-public-profile-page .ml-profile-username {
    margin: 0;
}

.ml-public-profile-page .ml-profile-stats-section,
.ml-public-profile-page .ml-contact-info,
.ml-public-profile-page .ml-social-links,
.ml-public-profile-page .ml-profile-actions-row {
    justify-content: center;
}

.ml-public-profile-page .ml-contact-info,
.ml-public-profile-page .ml-social-links {
    width: min(920px, 100%);
}

.ml-public-profile-page .ml-mobile-contacts-public {
    width: min(720px, 100%);
}

.ml-public-profile-page .ml-mobile-contact-public__head {
    justify-content: center;
}

.ml-public-profile-page .ml-products-section {
    padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 32px);
}

.ml-public-profile-page .ml-wc-loop {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.ml-public-profile-page .ml-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: stretch !important;
}

.ml-public-profile-page .ml-products-grid.products.columns-4 li.product {
    width: auto !important;
    margin: 0 !important;
    padding: clamp(12px, 1.5vw, 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--ml-card-bg, var(--ml-white)) !important;
    border: 1px solid var(--ml-border-color, var(--ml-gray-200)) !important;
    border-radius: 18px !important;
    box-shadow: var(--ml-shadow-sm) !important;
    overflow: hidden !important;
}

.ml-public-profile-page .ml-products-grid li.product .woocommerce-loop-product__link,
.ml-public-profile-page .ml-products-grid li.product a.woocommerce-loop-product__link {
    display: block !important;
    width: 100% !important;
}

.ml-public-profile-page .ml-products-grid li.product .woocommerce-loop-product__link img,
.ml-public-profile-page .ml-products-grid li.product a > img,
.ml-public-profile-page .ml-products-grid li.product img.attachment-woocommerce_thumbnail,
.ml-public-profile-page .ml-products-grid li.product img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--ml-gray-50) !important;
    border-radius: 14px !important;
    margin: 0 0 12px !important;
}

@media (max-width: 900px) {
    .ml-public-profile-page .ml-profile-hero__panel {
        width: min(100% - 32px, 920px);
    }

    .ml-public-profile-page .ml-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ml-public-profile-page .ml-profile-hero__panel {
        width: min(100% - 28px, 920px);
        padding-top: 24px;
    }

    .ml-public-profile-page .ml-profile-owner-copy {
        width: 100%;
        text-align: center;
    }

    .ml-public-profile-page .ml-products-grid {
        grid-template-columns: 1fr;
    }
}

.ml-location-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.ml-location-category-card {
    height: 100%;
}

.ml-location-category-card__banner,
.ml-location-category-card__default {
    display: block;
    aspect-ratio: 16 / 9;
}

.ml-location-category-card__body {
    flex: 1;
    display: flex;
    align-items: center;
}

@media (max-width: 960px) {
    .ml-location-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ml-location-category-grid {
        grid-template-columns: 1fr;
    }
}

.ml-location-page .ml-public-list-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.ml-location-page .ml-public-list-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
}

.ml-location-page .ml-public-list-card__media {
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ml-location-page .ml-public-list-card__media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.ml-location-page .ml-public-list-card__body {
    flex: 1;
    padding: clamp(18px, 2.5vw, 24px);
}

.ml-location-page .ml-public-list-card__actions {
    margin-top: auto;
}

@media (max-width: 960px) {
    .ml-location-page .ml-public-list-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ml-location-page .ml-public-list-stack {
        grid-template-columns: 1fr;
    }
}

/* ── v3.1.1 targeted layout hardening: full-width public/location pages ── */
.ml-fullpage-body {
    overflow-x: hidden;
}

@supports selector(body:has(.ml-public-profile-page)) {
    body:has(.ml-public-profile-page),
    body:has(.ml-location-page) {
        overflow-x: hidden;
    }
}

.ml-public-profile-page,
.ml-location-page {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    width: 100dvw;
    max-width: 100vw;
    max-width: 100dvw;
    margin-left: -50vw !important;
    margin-left: -50dvw !important;
    margin-right: -50vw !important;
    margin-right: -50dvw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

@supports selector(.entry-content:has(> .ml-public-profile-page)) {
    .entry-content:has(> .ml-public-profile-page),
    .entry-content:has(> .ml-location-page),
    .site-main:has(.ml-public-profile-page),
    .site-main:has(.ml-location-page),
    .content-area:has(.ml-public-profile-page),
    .content-area:has(.ml-location-page) {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.ml-public-profile-page *,
.ml-public-profile-page *::before,
.ml-public-profile-page *::after,
.ml-location-page *,
.ml-location-page *::before,
.ml-location-page *::after {
    box-sizing: border-box;
}

.ml-public-profile-page .ml-profile-hero__banner {
    width: 100%;
    max-width: none;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.ml-public-profile-page .ml-profile-hero__banner,
.ml-public-profile-page .ml-banner-default {
    aspect-ratio: 16 / 9;
}

.ml-public-profile-page .ml-banner-img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    object-position: center center !important;
    image-rendering: auto;
}

.ml-public-profile-page .ml-profile-hero__panel,
.ml-public-profile-page .ml-products-section,
.ml-public-profile-page .ml-wc-loop,
.ml-location-hero,
.ml-location-hero__inner,
.ml-location-hero__banner,
.ml-location-content {
    width: 100%;
    max-width: none;
}

.ml-location-hero {
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

.ml-location-hero__inner {
    margin-left: 0;
    margin-right: 0;
}

.ml-location-hero__banner {
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    box-shadow: none;
    background: var(--ml-secondary);
}

.ml-location-hero__banner img,
.ml-location-page .ml-public-list-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center center;
    background: var(--ml-secondary);
    image-rendering: auto;
}

.ml-location-category-card__banner {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center center;
    background: var(--ml-secondary);
    image-rendering: auto;
}

.ml-public-profile-page .ml-profile-hero__panel {
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

.ml-public-profile-page .ml-products-section,
.ml-location-content {
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

.ml-public-profile-page .ml-products-grid.products.columns-4 li.product {
    height: 100%;
}

.ml-public-profile-page .ml-products-grid li.product .ml-product-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--ml-gray-50);
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 12px;
}

.ml-public-profile-page .ml-products-grid li.product .ml-product-image-frame img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.ml-location-category-grid {
    width: 100%;
}

.ml-location-category-card {
    min-height: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   v3.1.2 — CRITICAL FULL-WIDTH LAYOUT AND BANNER RENDERING FIX
   Applies to: .ml-public-profile-page (Public My List Page)
                .ml-location-page      (Location Pages)
   Goals:
     1. Both pages ALWAYS render at 100% browser width.
     2. No boxed container, no max-width, no side padding from theme.
     3. Banners preserve original aspect ratio, are NEVER cropped or
        stretched, and the WHOLE image stays visible on every device.
     4. Works across theme wrappers (Astra, Astra Pro, Elementor,
        Block/Classic themes, WooCommerce templates) without editing
        any theme file globally.
   ══════════════════════════════════════════════════════════════════ */

/* 1. Remove theme boxed layout for these two pages only.
   We target common wrappers (Astra, Elementor, Twenty*, generic WP)
   without changing the theme globally — only when one of our pages
   is present inside the wrapper. Uses :has() where supported and
   falls back to a viewport-width bleed technique below.            */
@supports selector(:has(.ml-public-profile-page)) {
    /* Astra */
    .ast-container:has(.ml-public-profile-page),
    .ast-container:has(.ml-location-page),
    .ast-container-fluid:has(.ml-public-profile-page),
    .ast-container-fluid:has(.ml-location-page),
    .site-content .ast-container:has(.ml-public-profile-page),
    .site-content .ast-container:has(.ml-location-page),
    /* Elementor */
    .elementor-section:has(.ml-public-profile-page),
    .elementor-section:has(.ml-location-page),
    .elementor-container:has(.ml-public-profile-page),
    .elementor-container:has(.ml-location-page),
    .elementor-widget-wrap:has(.ml-public-profile-page),
    .elementor-widget-wrap:has(.ml-location-page),
    /* Block / classic themes */
    .wp-site-blocks:has(.ml-public-profile-page),
    .wp-site-blocks:has(.ml-location-page),
    .is-layout-constrained:has(.ml-public-profile-page),
    .is-layout-constrained:has(.ml-location-page),
    /* WooCommerce */
    .woocommerce:has(.ml-public-profile-page),
    .woocommerce:has(.ml-location-page),
    .woocommerce-page:has(.ml-public-profile-page),
    .woocommerce-page:has(.ml-location-page) {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 2. Full-width bleed — works in every browser regardless of :has()
   support. Extends the page across the whole viewport even when the
   theme has wrapped it inside a boxed container.                    */
.ml-public-profile-page,
.ml-location-page {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    background: var(--ml-bg-page, var(--ml-gray-50));
}

/* Prevent horizontal scroll from the negative-margin bleed. */
html:has(.ml-public-profile-page),
html:has(.ml-location-page),
body:has(.ml-public-profile-page),
body:has(.ml-location-page) {
    overflow-x: hidden;
}

/* 3. Remove every inner max-width restriction on our sections so that
   headings, banners, and product rows stretch to the full page width. */
.ml-public-profile-page,
.ml-public-profile-page .ml-profile-hero,
.ml-public-profile-page .ml-profile-hero__banner,
.ml-public-profile-page .ml-profile-hero__panel,
.ml-public-profile-page .ml-products-section,
.ml-public-profile-page .ml-wc-loop,
.ml-public-profile-page .ml-products-grid,
.ml-location-page,
.ml-location-page .ml-location-hero,
.ml-location-page .ml-location-hero__inner,
.ml-location-page .ml-location-hero__banner,
.ml-location-page .ml-location-content,
.ml-location-page .ml-location-category-grid,
.ml-location-page .ml-public-list-stack {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep readable side padding for text/content sections while the
   banner itself stays edge-to-edge. */
.ml-public-profile-page .ml-profile-hero__panel,
.ml-public-profile-page .ml-products-section,
.ml-location-page .ml-location-content,
.ml-location-page .ml-location-hero {
    padding-left: clamp(16px, 4vw, 64px) !important;
    padding-right: clamp(16px, 4vw, 64px) !important;
}

/* 4. Banner rendering — Public My List page.
   Preserve the FULL uploaded image (recommended 1280 × 720, 16:9).
   NEVER crop, cut, stretch, zoom, or hide any portion of the image.
   Banner is ALWAYS on top; all content is ALWAYS below it. */
.ml-public-profile-page .ml-profile-hero {
    display: block !important;
}

.ml-public-profile-page .ml-profile-hero__banner {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--ml-secondary, #16213e);
}

.ml-public-profile-page .ml-banner-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    /* CRITICAL: contain — never cover — so the whole banner is visible. */
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--ml-secondary, #16213e);
    image-rendering: auto;
}

.ml-public-profile-page .ml-banner-default {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
}

/* 5. Banner rendering — Location page hero banner.
   Same rules as the public page banner. */
.ml-location-page .ml-location-hero__banner {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 0 22px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--ml-secondary, #16213e);
}

.ml-location-page .ml-location-hero__banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--ml-secondary, #16213e);
    image-rendering: auto;
}

/* 6. Location category card banner — keep 16:9 and stay visible in full. */
.ml-location-page .ml-location-category-card__banner,
.ml-location-page .ml-location-category-card__default {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--ml-secondary, #16213e);
}

/* 7. Location list card media — preserve aspect ratio, no zoom/crop. */
.ml-location-page .ml-public-list-card {
    grid-template-columns: 1fr;
}

.ml-location-page .ml-public-list-card__media {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    background: var(--ml-secondary, #16213e);
}

.ml-location-page .ml-public-list-card__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--ml-secondary, #16213e);
}

/* 8. Responsive rules — banners stay fully visible on every viewport. */
@media (max-width: 1200px) {
    .ml-public-profile-page .ml-profile-hero__panel,
    .ml-public-profile-page .ml-products-section,
    .ml-location-page .ml-location-content,
    .ml-location-page .ml-location-hero {
        padding-left: clamp(14px, 3vw, 40px) !important;
        padding-right: clamp(14px, 3vw, 40px) !important;
    }
}

@media (max-width: 900px) {
    /* Hero is already display:block — banner on top, panel below at all viewports. */
    .ml-public-profile-page .ml-profile-hero__banner,
    .ml-public-profile-page .ml-profile-hero__panel {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 600px) {
    .ml-public-profile-page .ml-profile-hero__panel,
    .ml-public-profile-page .ml-products-section,
    .ml-location-page .ml-location-content,
    .ml-location-page .ml-location-hero {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* Aspect ratio unchanged so the entire 16:9 banner stays visible. */
    .ml-public-profile-page .ml-profile-hero__banner,
    .ml-public-profile-page .ml-banner-img,
    .ml-public-profile-page .ml-banner-default,
    .ml-location-page .ml-location-hero__banner,
    .ml-location-page .ml-location-hero__banner img,
    .ml-location-page .ml-public-list-card__media,
    .ml-location-page .ml-public-list-card__media img,
    .ml-location-page .ml-location-category-card__banner,
    .ml-location-page .ml-location-category-card__default {
        aspect-ratio: 16 / 9 !important;
        object-fit: contain !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   v3.1.3 — CRITICAL RESPONSIVE LAYOUT & BANNER HARDENING
   Guarantees, without touching any theme file globally:
     • Public My List page and Location page render at 100vw on every
       desktop width (small monitors, laptops, large screens, 4K, ultra-
       wide) — no boxed layout, no max-width, no wrapper side padding.
     • Banner (recommended 1280×720, 16:9) is always fully visible on
       Desktop / Laptop / Tablet / Mobile — never cropped, cut, stretched,
       distorted, zoomed, or overflowed.
     • Title and Description below the banner are centered with proper
       spacing and responsive typography.
   ══════════════════════════════════════════════════════════════════ */

/* 1. Force full-viewport bleed with the highest specificity so no
      theme wrapper (Astra site-container, Elementor sections, block
      themes, WooCommerce templates) can constrain the width. */
html body .ml-public-profile-page,
html body .ml-location-page,
html body.ast-separate-container .ml-public-profile-page,
html body.ast-separate-container .ml-location-page,
html body.ast-page-builder-template .ml-public-profile-page,
html body.ast-page-builder-template .ml-location-page,
html body.ast-plain-container .ml-public-profile-page,
html body.ast-plain-container .ml-location-page,
html body.astra-theme .ml-public-profile-page,
html body.astra-theme .ml-location-page,
html body.woocommerce .ml-public-profile-page,
html body.woocommerce .ml-location-page,
html body.woocommerce-page .ml-public-profile-page,
html body.woocommerce-page .ml-location-page {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}

/* 2. Neutralize Astra site-container / entry-content max-widths for the
      only two pages where our layout is active. Uses the parent-having
      :has() so we never affect any other page on the site. */
@supports selector(:has(.ml-public-profile-page)) {
    .site-content:has(.ml-public-profile-page),
    .site-content:has(.ml-location-page),
    .ast-container:has(.ml-public-profile-page),
    .ast-container:has(.ml-location-page),
    .ast-container-fluid:has(.ml-public-profile-page),
    .ast-container-fluid:has(.ml-location-page),
    #primary:has(.ml-public-profile-page),
    #primary:has(.ml-location-page),
    #content:has(.ml-public-profile-page),
    #content:has(.ml-location-page),
    #main:has(.ml-public-profile-page),
    #main:has(.ml-location-page),
    main:has(.ml-public-profile-page),
    main:has(.ml-location-page),
    article:has(.ml-public-profile-page),
    article:has(.ml-location-page),
    .entry-content:has(.ml-public-profile-page),
    .entry-content:has(.ml-location-page),
    .entry-content > *:has(.ml-public-profile-page),
    .entry-content > *:has(.ml-location-page),
    .site-main:has(.ml-public-profile-page),
    .site-main:has(.ml-location-page),
    .content-area:has(.ml-public-profile-page),
    .content-area:has(.ml-location-page) {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 3. Prevent horizontal scroll caused by the negative-margin bleed. */
html:has(.ml-public-profile-page),
html:has(.ml-location-page) {
    overflow-x: hidden;
}

/* 4. BANNER — Public My List Page.
      Recommended 1280×720 (16:9). Always fully visible, centered,
      never cropped, never stretched, never zoomed.
      Banner is ALWAYS on top. All content is ALWAYS below it. */
.ml-public-profile-page .ml-profile-hero {
    display: block !important;              /* single column: banner then panel */
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.ml-public-profile-page .ml-profile-hero__banner {
    position: static !important;           /* nothing can overlay the banner */
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    flex: none !important;
}

/* Disable any pseudo-element overlay on the banner */
.ml-public-profile-page .ml-profile-hero__banner::before,
.ml-public-profile-page .ml-profile-hero__banner::after {
    display: none !important;
    content: none !important;
}

.ml-public-profile-page .ml-banner-img,
.ml-public-profile-page .ml-profile-hero__banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;         /* whole image always visible */
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #f8fafc !important;
    image-rendering: auto;
}

.ml-public-profile-page .ml-banner-default {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    background: linear-gradient(135deg, var(--ml-primary) 0%, var(--ml-accent) 100%);
}

/* Content panel sits below banner in its own white card */
.ml-public-profile-page .ml-profile-hero__panel {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(1120px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin: 24px auto 0 !important;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.09) !important;
    gap: 16px !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex: none !important;
}

/* 5. BANNER — Location page hero. Same rules. */
.ml-location-page .ml-location-hero {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: center !important;
    background: var(--ml-white);
    color: var(--ml-heading, var(--ml-primary));
}

.ml-location-page .ml-location-hero__banner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: var(--ml-secondary, #16213e);
}

.ml-location-page .ml-location-hero__banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    background: var(--ml-secondary, #16213e);
}

/* 6. TITLE + DESCRIPTION below the banner — centered, responsive. */
.ml-public-profile-page .ml-profile-hero__panel {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: clamp(20px, 3vw, 40px) !important;
    padding-bottom: clamp(20px, 3vw, 40px) !important;
    padding-left: clamp(16px, 4vw, 64px) !important;
    padding-right: clamp(16px, 4vw, 64px) !important;
    gap: clamp(10px, 1.5vw, 18px);
}

.ml-public-profile-page .ml-profile-name-row,
.ml-public-profile-page .ml-profile-owner-row,
.ml-public-profile-page .ml-profile-stats-section,
.ml-public-profile-page .ml-contact-info,
.ml-public-profile-page .ml-social-links,
.ml-public-profile-page .ml-profile-actions-row,
.ml-public-profile-page .ml-mobile-contacts-public {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ml-public-profile-page .ml-profile-name {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.ml-public-profile-page .ml-profile-desc {
    max-width: 780px;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(0.9rem, 1.1vw, 1rem) !important;
    line-height: 1.65 !important;
    color: var(--ml-body-text, var(--ml-gray-600));
}

.ml-public-profile-page .ml-profile-owner-row {
    flex-direction: column !important;
    gap: 8px;
}

.ml-location-page .ml-location-hero__inner {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 64px) !important;
    text-align: center !important;
}

.ml-location-page .ml-location-hero h1 {
    text-align: center !important;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
    line-height: 1.2 !important;
    margin: 0 auto 10px !important;
    color: var(--ml-heading, var(--ml-primary)) !important;
}

.ml-location-page .ml-location-hero p {
    text-align: center !important;
    max-width: 720px;
    margin: 0 auto !important;
    color: var(--ml-body-text, var(--ml-gray-600)) !important;
    font-size: clamp(0.9rem, 1.1vw, 1rem) !important;
    line-height: 1.65 !important;
}

/* 7. RESPONSIVE — tablet & mobile.
      Aspect ratio is preserved on every breakpoint so the whole
      banner stays visible regardless of viewport width. */
@media (max-width: 1024px) {
    .ml-public-profile-page .ml-profile-hero__banner,
    .ml-public-profile-page .ml-banner-img,
    .ml-public-profile-page .ml-banner-default,
    .ml-location-page .ml-location-hero__banner,
    .ml-location-page .ml-location-hero__banner img {
        aspect-ratio: 16 / 9 !important;
        object-fit: contain !important;
    }
}

@media (max-width: 768px) {
    .ml-public-profile-page .ml-profile-hero__panel,
    .ml-location-page .ml-location-content,
    .ml-location-page .ml-location-hero__inner {
        padding-left: clamp(14px, 4vw, 28px) !important;
        padding-right: clamp(14px, 4vw, 28px) !important;
    }
    .ml-public-profile-page .ml-profile-name,
    .ml-location-page .ml-location-hero h1 {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
    }
}

@media (max-width: 480px) {
    .ml-public-profile-page .ml-profile-hero__panel,
    .ml-location-page .ml-location-content,
    .ml-location-page .ml-location-hero__inner {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .ml-public-profile-page .ml-profile-hero__banner,
    .ml-public-profile-page .ml-banner-img,
    .ml-public-profile-page .ml-banner-default,
    .ml-location-page .ml-location-hero__banner,
    .ml-location-page .ml-location-hero__banner img {
        aspect-ratio: 16 / 9 !important;
        object-fit: contain !important;
        width: 100% !important;
    }
    .ml-public-profile-page .ml-profile-name {
        font-size: 1.25rem !important;
    }
    .ml-public-profile-page .ml-profile-desc {
        font-size: 0.92rem !important;
    }
}

/* 8. Prevent any child element from overflowing horizontally
      (defensive rule — long links, wide product tables, etc.). */
.ml-public-profile-page,
.ml-public-profile-page * ,
.ml-location-page,
.ml-location-page * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* But keep the two page containers themselves full-viewport-wide. */
.ml-public-profile-page,
.ml-location-page {
    max-width: 100vw !important;
}

/* Allow banner elements to fill 100% of the container, no cap. */
.ml-public-profile-page .ml-profile-hero,
.ml-public-profile-page .ml-profile-hero__banner,
.ml-public-profile-page .ml-profile-hero__panel,
.ml-public-profile-page .ml-products-section,
.ml-public-profile-page .ml-wc-loop,
.ml-location-page .ml-location-hero,
.ml-location-page .ml-location-hero__banner,
.ml-location-page .ml-location-content,
.ml-location-page .ml-location-category-grid,
.ml-location-page .ml-public-list-stack {
    max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   v3.1.5 — Mobile Contact Numbers card redesign
   Applies to the "Mobile Contacts" section rendered on the Public
   My List page. Fully responsive, tap-friendly, uses appearance
   variables so admin color settings continue to apply.
   Legacy .ml-mobile-contact-public__head / __desc rules above still
   exist and remain compatible with older markup.
   ══════════════════════════════════════════════════════════════════ */

.ml-mobile-contacts-public {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: 8px;
}

.ml-mc-card {
    /* Modern card: subtle elevation, soft border, hover lift on desktop. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: var(--ml-card-bg, var(--ml-white, #ffffff));
    border: 1px solid var(--ml-border-color, var(--ml-gray-200, #e2e8f0));
    border-radius: 14px;
    box-shadow: var(--ml-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ml-mc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ml-shadow, 0 8px 24px rgba(15, 23, 42, 0.08));
    border-color: var(--ml-gray-300, #cbd5e1);
}

.ml-mc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    line-height: 1.35;
}

.ml-mc-icon-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ml-gray-100, #f1f5f9);
    color: var(--ml-primary, #1a1a2e);
}

.ml-mc-row--phone .ml-mc-icon-wrap {
    background: color-mix(in srgb, var(--ml-accent, #0f3460) 12%, transparent);
    color: var(--ml-accent, #0f3460);
}

.ml-mc-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.ml-mc-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1px;
}

.ml-mc-name {
    color: var(--ml-heading, var(--ml-primary, #1a1a2e));
}

.ml-mc-phone {
    color: var(--ml-accent, var(--ml-link, #0f3460));
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    /* Slightly larger for prominence + easier tap target on mobile. */
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

.ml-mc-phone:hover,
.ml-mc-phone:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ml-link-hover, var(--ml-primary, #1a1a2e));
}

.ml-mc-phone:focus-visible {
    outline: 2px solid var(--ml-accent, #0f3460);
    outline-offset: 3px;
    border-radius: 4px;
}

.ml-mc-desc {
    margin: 4px 0 0;
    padding-left: 44px; /* aligns with the text column, past the icon */
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ml-body-text, var(--ml-gray-600, #475569));
}

/* Public-page context centers headings/body; keep contact cards
   left-aligned so long names/numbers read naturally. */
.ml-public-profile-page .ml-mobile-contacts-public {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    text-align: left;
}

.ml-public-profile-page .ml-mc-card {
    text-align: left;
}

/* ── Responsive tuning ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .ml-mc-card {
        padding: 14px 16px;
    }
    .ml-mc-text {
        font-size: 1rem;
    }
    .ml-mc-phone {
        font-size: 1.05rem;
    }
}

@media (max-width: 600px) {
    .ml-mobile-contacts-public {
        gap: 12px;
    }
    .ml-mc-card {
        padding: 14px 14px;
        border-radius: 12px;
    }
    .ml-mc-row {
        gap: 10px;
    }
    .ml-mc-icon-wrap {
        width: 32px;
        height: 32px;
    }
    .ml-mc-icon {
        width: 16px;
        height: 16px;
    }
    .ml-mc-text {
        font-size: 0.98rem;
    }
    .ml-mc-phone {
        /* Bigger tap target — meets ~44px minimum touch target when
           combined with padding-block from parent row. */
        font-size: 1.05rem;
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
    .ml-mc-desc {
        padding-left: 42px;
        font-size: 0.88rem;
    }
}

@media (max-width: 380px) {
    .ml-mc-desc {
        /* Wrap under the icon column on very narrow screens to avoid
           excessive left indent eating the readable width. */
        padding-left: 0;
    }
}

/* Reduce motion for users who prefer it. */
@media (prefers-reduced-motion: reduce) {
    .ml-mc-card {
        transition: none;
    }
    .ml-mc-card:hover {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   v3.1.5 — Astra Mobile Menu modern full-width card redesign
   Mobile-only visual layer. Desktop navigation, menu structure,
   WordPress hooks, and Astra/WooCommerce functionality are untouched.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 921px) {
    body.ast-header-break-point {
        overflow-x: hidden;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer,
    body.ast-header-break-point .ast-mobile-popup-drawer.active,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-inner {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
        background:
            radial-gradient(circle at top left, rgba(15, 52, 96, 0.08), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        transition: transform 240ms ease, opacity 220ms ease, visibility 220ms ease;
        overflow-x: hidden;
    }

    body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 14px 14px max(18px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 64px;
        padding: max(14px, env(safe-area-inset-top)) 16px 12px !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.32);
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(14px);
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-content,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-builder-menu-mobile,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-navigation,
    body.ast-header-break-point .ast-mobile-header-content .ast-builder-menu-mobile,
    body.ast-header-break-point .ast-mobile-header-content .main-navigation {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-content {
        min-height: calc(100vh - 64px);
        padding: 16px 14px max(22px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu,
    body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        list-style: none;
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item {
        position: relative;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(203, 213, 225, 0.92) !important;
        border-radius: 16px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
        overflow: hidden;
        box-sizing: border-box;
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item:hover,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item:hover,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item:hover,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item:focus-within,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item:focus-within,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item:focus-within {
        transform: translateY(-1px);
        border-color: var(--ml-primary, #1a1a2e) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .current-menu-item,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .current_page_item,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .current-menu-ancestor,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .current-menu-item,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .current_page_item,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .current-menu-ancestor {
        border-color: var(--ml-primary, #1a1a2e) !important;
        box-shadow: inset 4px 0 0 var(--ml-primary, #1a1a2e), 0 12px 30px rgba(15, 23, 42, 0.10);
        background: #ffffff !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > a,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > a,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item > a {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        min-height: 54px;
        padding: 15px 17px !important;
        color: var(--ml-heading, #1a1a2e) !important;
        font-size: clamp(0.98rem, 3.2vw, 1.06rem) !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: -0.01em;
        text-decoration: none !important;
        background: transparent !important;
        border: 0 !important;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        transition: color 180ms ease, background 180ms ease;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .menu-item-has-children > .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .menu-item-has-children > .menu-link,
    body.ast-header-break-point .ast-builder-menu-mobile .menu-item-has-children > .menu-link {
        padding-right: 58px !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link:hover,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > a:hover,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link:hover,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > a:hover,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link:focus-visible,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link:focus-visible {
        color: var(--ml-link-hover, #0f3460) !important;
        background: rgba(15, 52, 96, 0.05) !important;
        outline: none;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .current-menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .current_page_item > .menu-link,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .current-menu-ancestor > .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .current-menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .current_page_item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .current-menu-ancestor > .menu-link {
        color: var(--ml-primary, #1a1a2e) !important;
        background: rgba(15, 52, 96, 0.06) !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-menu-toggle,
    body.ast-header-break-point .ast-mobile-header-content .ast-menu-toggle,
    body.ast-header-break-point .ast-builder-menu-mobile .ast-menu-toggle {
        position: absolute !important;
        top: 7px !important;
        right: 8px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border: 1px solid rgba(203, 213, 225, 0.92) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        color: var(--ml-primary, #1a1a2e) !important;
        box-shadow: none !important;
        transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-menu-toggle:hover,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-menu-toggle:focus-visible,
    body.ast-header-break-point .ast-mobile-header-content .ast-menu-toggle:hover,
    body.ast-header-break-point .ast-mobile-header-content .ast-menu-toggle:focus-visible {
        background: #eef2f7 !important;
        border-color: var(--ml-primary, #1a1a2e) !important;
        outline: none;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .ast-menu-toggle[aria-expanded="true"],
    body.ast-header-break-point .ast-mobile-header-content .ast-menu-toggle[aria-expanded="true"] {
        background: var(--ml-primary, #1a1a2e) !important;
        border-color: var(--ml-primary, #1a1a2e) !important;
        color: #ffffff !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .sub-menu,
    body.ast-header-break-point .ast-mobile-header-content .sub-menu,
    body.ast-header-break-point .ast-builder-menu-mobile .sub-menu {
        width: auto !important;
        margin: 0 10px 12px !important;
        padding: 8px !important;
        background: #f8fafc !important;
        border: 1px solid rgba(226, 232, 240, 0.96) !important;
        border-radius: 14px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .sub-menu .menu-item,
    body.ast-header-break-point .ast-mobile-header-content .sub-menu .menu-item,
    body.ast-header-break-point .ast-builder-menu-mobile .sub-menu .menu-item {
        margin: 0 0 8px !important;
        border: 1px solid rgba(226, 232, 240, 0.96) !important;
        border-radius: 12px;
        background: #ffffff !important;
        box-shadow: none;
        overflow: hidden;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .sub-menu .menu-item:last-child,
    body.ast-header-break-point .ast-mobile-header-content .sub-menu .menu-item:last-child,
    body.ast-header-break-point .ast-builder-menu-mobile .sub-menu .menu-item:last-child {
        margin-bottom: 0 !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .sub-menu .menu-link,
    body.ast-header-break-point .ast-mobile-popup-drawer .sub-menu a,
    body.ast-header-break-point .ast-mobile-header-content .sub-menu .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .sub-menu a,
    body.ast-header-break-point .ast-builder-menu-mobile .sub-menu .menu-link,
    body.ast-header-break-point .ast-builder-menu-mobile .sub-menu a {
        min-height: 46px;
        padding: 12px 14px !important;
        color: var(--ml-body-text, #1e293b) !important;
        font-size: 0.94rem !important;
        font-weight: 650 !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
        background: transparent !important;
        box-sizing: border-box;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .menu-toggle-close,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-drawer-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(203, 213, 225, 0.92) !important;
        background: #ffffff !important;
        color: var(--ml-primary, #1a1a2e) !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
        transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .menu-toggle-close:hover,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-drawer-close:hover,
    body.ast-header-break-point .ast-mobile-popup-drawer .menu-toggle-close:focus-visible,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-drawer-close:focus-visible {
        transform: scale(1.03);
        background: #f8fafc !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
        outline: none;
    }
}

@media (max-width: 420px) {
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-content,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu,
    body.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu {
        gap: 8px;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item {
        border-radius: 14px;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item > a,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item > a {
        min-height: 52px;
        padding: 14px 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content,
    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item,
    body.ast-header-break-point .ast-mobile-popup-drawer .ast-menu-toggle,
    body.ast-header-break-point .ast-mobile-header-content .ast-menu-toggle {
        transition: none !important;
    }

    body.ast-header-break-point .ast-mobile-popup-drawer .main-header-menu > .menu-item:hover,
    body.ast-header-break-point .ast-mobile-header-content .main-header-menu > .menu-item:hover,
    body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu > .menu-item:hover {
        transform: none;
    }
}

/* My Profile banner standard: 1280x720 (16:9).
 * Any uploaded banner ratio is scaled proportionally to fit this frame; never crop or stretch. */
.ml-profile-hero__banner {
    width: 100%;
    aspect-ratio: 1280 / 720;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}
.ml-profile-hero__banner .ml-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Vendor expansion v3.2.0 */
.ml-fullpage-body .ml-profile-page,
.ml-vendor-registration,
.ml-vendor-dashboard {
    width: 100%;
    max-width: none;
}
.ml-profile-hero__banner,
.ml-card__banner-preview,
.ml-fav-list-card__banner-link {
    aspect-ratio: 16 / 9;
    background: #eef2f7;
}
.ml-profile-hero__banner img,
.ml-banner-img,
.ml-banner-preview,
.ml-fav-list-card__banner {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
    background: #f8fafc;
}
.ml-profile-business-name {
    margin: -8px 0 14px;
    color: var(--ml-secondary, #16213e);
    font-weight: 700;
    letter-spacing: .02em;
}
.ml-profile-category {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: -4px 0 14px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, .1);
    color: var(--ml-primary, #3b82f6);
    font-size: .875rem;
    font-weight: 700;
}
.ml-cat-search-wrap {
    position: relative;
    max-width: 420px;
}
.ml-cat-search-input {
    width: 100%;
}
.ml-cat-search-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: min(260px, 50vh);
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--ml-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.ml-cat-search-dropdown.is-open {
    display: block;
}
.ml-cat-search-option,
.ml-cat-search-no-results {
    padding: 9px 14px;
    font-size: .875rem;
    color: var(--ml-text, #111827);
}
.ml-cat-search-option {
    cursor: pointer;
}
.ml-cat-search-option:hover,
.ml-cat-search-option.is-focused {
    background: rgba(59, 130, 246, .1);
    color: var(--ml-primary, #3b82f6);
}
.ml-cat-search-option.is-selected {
    font-weight: 700;
    color: var(--ml-primary, #3b82f6);
}
.ml-cat-search-option.is-hidden,
.ml-cat-search-no-results.is-hidden {
    display: none;
}
.ml-cat-search-no-results {
    color: var(--ml-gray-500, #6b7280);
}
.ml-profile-qr-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin: 8px 0 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.ml-profile-qr-inline img { width: 120px; height: 120px; border-radius: 12px; }
.ml-mc-title { margin: 0 0 8px; font-weight: 800; color: var(--ml-heading, #1a1a2e); }
.ml-vendor-dashboard__hero,
.ml-vendor-registration__card {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: clamp(22px, 4vw, 42px);
    border-radius: 28px;
    background: radial-gradient(circle at top left, rgba(15,52,96,.14), transparent 36%), linear-gradient(135deg,#ffffff,#f5f8fc);
    box-shadow: 0 22px 70px rgba(15,23,42,.10);
    border: 1px solid rgba(15,23,42,.08);
    margin-bottom: 24px;
}
.ml-vendor-registration { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #f6f8fb; }
.ml-vendor-registration__card { display: block; width: min(560px, 100%); }
.ml-vendor-registration__form { display: grid; gap: 16px; margin-top: 20px; }
.ml-eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .78rem; color: var(--ml-secondary,#16213e); }
.ml-vendor-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.ml-vendor-tab { padding: 10px 15px; border-radius: 999px; background: #fff; border: 1px solid rgba(15,23,42,.10); text-decoration: none; color: var(--ml-body-text,#1e293b); font-weight: 700; }
.ml-vendor-tab.is-active { background: var(--ml-primary,#1a1a2e); color: #fff; }
.ml-dashboard-number { font-size: clamp(2rem, 6vw, 4rem); line-height: 1; margin: 8px 0 18px; font-weight: 900; color: var(--ml-heading,#1a1a2e); }
.ml-vendor-product-grid,
.ml-vendor-location-grid,
.ml-vendor-media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ml-vendor-product-card,
.ml-vendor-media-card,
.ml-vendor-location-card { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 22px; padding: 16px; box-shadow: 0 12px 36px rgba(15,23,42,.08); }
.ml-vendor-product-card img,
.ml-vendor-media-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; background: #f1f5f9; }
.ml-vendor-product-card h3,
.ml-vendor-product-card h4,
.ml-vendor-location-card h3 { margin: 12px 0 8px; }
.ml-vendor-public-locations,
.ml-favorites-section { margin: 28px auto; width: min(1180px, calc(100% - 32px)); }
.ml-demo-price__label,
.ml-price-range__label { font-weight: 800; color: var(--ml-heading,#1a1a2e); }
.ml-price-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
    color: var(--ml-body-text,#1e293b);
}
.ml-listing-view-details {
    text-align: center;
}

/* Favorite My Lists page: full-width, responsive card layout with no boxed shell. */
.ml-fav-lists-page {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
}
@supports selector(body:has(.ml-fav-lists-page)) {
    body:has(.ml-fav-lists-page) #page,
    body:has(.ml-fav-lists-page) .site,
    body:has(.ml-fav-lists-page) .site-content,
    body:has(.ml-fav-lists-page) #content,
    body:has(.ml-fav-lists-page) #primary,
    body:has(.ml-fav-lists-page) main,
    body:has(.ml-fav-lists-page) article,
    body:has(.ml-fav-lists-page) .entry-content,
    body:has(.ml-fav-lists-page) .content-area,
    body:has(.ml-fav-lists-page) .ast-container,
    body:has(.ml-fav-lists-page) .ast-container-fluid {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
}
.ml-fav-lists-page .ml-fav-lists-hero,
.ml-fav-lists-page .ml-products-section {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.ml-fav-lists-page .ml-products-section {
    padding: clamp(20px, 3vw, 44px);
}
.ml-fav-lists-page .ml-favorites-section {
    width: 100%;
    max-width: none;
    margin: 0;
}
.ml-fav-lists-page .ml-fav-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(16px, 2vw, 28px);
    width: 100%;
    margin: 0;
}
@media (max-width: 1024px) {
    .ml-vendor-product-grid,
    .ml-vendor-location-grid,
    .ml-vendor-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ml-vendor-dashboard__hero { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
    .ml-vendor-product-grid,
    .ml-vendor-location-grid,
    .ml-vendor-media-grid { grid-template-columns: 1fr; }
    .ml-profile-qr-inline { width: 100%; justify-content: center; flex-direction: column; }
    .ml-vendor-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .ml-vendor-tab { white-space: nowrap; }
    .ml-vendor-dashboard__hero,
    .ml-vendor-registration__card { border-radius: 20px; padding: 20px; }
}
.ml-wc-loop ul.products.ml-products-grid,
ul.products.columns-4.ml-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}
.ml-wc-loop ul.products.ml-products-grid::before,
.ml-wc-loop ul.products.ml-products-grid::after { display: none !important; }
.ml-wc-loop ul.products.ml-products-grid li.product { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 1024px) {
    .ml-wc-loop ul.products.ml-products-grid,
    ul.products.columns-4.ml-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    .ml-wc-loop ul.products.ml-products-grid,
    ul.products.columns-4.ml-products-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────
   v3.3.0 — Public My List Page responsive improvements
   Additive-only. Uses existing --ml-* variables where possible.
   ───────────────────────────────────────────────────────────── */

/* Global fluid container behavior for the profile page */
.ml-profile-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
.ml-profile-page * { box-sizing: border-box; }
.ml-profile-page img,
.ml-profile-page video,
.ml-profile-page iframe {
    max-width: 100%;
    height: auto;
}

/* Fluid typography for the profile page and place page */
.ml-profile-page,
.ml-place-page {
    font-size: clamp(15px, 0.95vw + 12px, 17px);
    line-height: 1.6;
}
.ml-profile-page h1,
.ml-place-page h1 { font-size: clamp(1.8rem, 2.6vw + 0.5rem, 3rem); line-height: 1.15; }
.ml-profile-page h2,
.ml-place-page h2 { font-size: clamp(1.4rem, 1.4vw + 0.8rem, 2.1rem); line-height: 1.25; }
.ml-profile-page h3,
.ml-place-page h3 { font-size: clamp(1.15rem, 0.6vw + 0.9rem, 1.4rem); }

/* Ensure hero and cards flow correctly on all sizes */
@media (min-width: 1440px) {
    .ml-profile-hero,
    .ml-profile-page .ml-container { max-width: min(1400px, 96vw); }
    .ml-place-container { max-width: none; }
}
@media (max-width: 1024px) {
    .ml-profile-hero { flex-direction: column; }
    .ml-profile-hero > * { width: 100%; }
    .ml-cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (max-width: 768px) {
    .ml-profile-page .ml-container { padding-left: 14px; padding-right: 14px; }
    .ml-profile-hero { padding: 16px; border-radius: 16px; }
    .ml-cards-grid { grid-template-columns: 1fr; gap: 14px; }
    .ml-table-responsive { overflow-x: auto; }
    .ml-profile-header,
    .ml-profile-header * { text-align: center !important; }
}
@media (max-width: 480px) {
    .ml-profile-page { font-size: 15px; }
    .ml-btn { padding: 10px 14px; font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   Places module
   ───────────────────────────────────────────────────────────── */

.ml-fullpage-body.ml-place-page,
.ml-place-page {
    background: var(--ml-bg-page, #f6f7fb);
    color: var(--ml-text, #1a1a2e);
    min-height: 100vh;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 0 clamp(32px, 5vw, 80px) 0;
    overflow-x: hidden;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    left: auto;
    right: auto;
}
.ml-place-page *,
.ml-place-page *::before,
.ml-place-page *::after {
    box-sizing: border-box;
}
.ml-place-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(14px, 4vw, 72px);
    padding-right: clamp(14px, 4vw, 72px);
    text-align: center;
}

@supports selector(body:has(.ml-place-page)) {
    body:has(.ml-place-page) {
        overflow-x: hidden;
    }
}

.ml-place-page :where(h1, h2, h3, h4, p, a, span, div) {
    text-align: center;
}

/* Banner: full-width, screen-fit, never crop/stretch */
.ml-place-banner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ml-place-banner img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;   /* never crop */
    object-position: center;
}

/* Admin Edit Place button (visible only to administrators) */
.ml-place-admin-actions {
    width: 100%;
    padding: 16px 0;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    text-align: center;
}

.ml-place-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ml-place-edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Place page quick navigation shortcut buttons */
.ml-place-quick-nav {
    width: 100%;
    padding: clamp(14px, 2vw, 24px) 0;
    background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.96) 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
/* v3.4.27: strict 3-col desktop / 2-col tablet / 1-col mobile grid */
.ml-place-quick-nav__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.4vw, 16px);
    width: min(100%, 1180px);
    margin: 0 auto;
    align-items: stretch;
    /* CSS counter: auto-numbers only the rendered (visible) buttons */
    counter-reset: ml-nav-counter;
}
.ml-place-quick-nav__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 80px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: var(--ml-primary, #1a1a2e);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
    counter-increment: ml-nav-counter;
    position: relative;
}
/* Auto-numbering badge */
.ml-place-quick-nav__button::before {
    content: counter(ml-nav-counter);
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(15, 23, 42, 0.35);
    letter-spacing: 0.02em;
}
.ml-place-quick-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    flex-shrink: 0;
}
.ml-place-quick-nav__label {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}
.ml-place-quick-nav__button:hover,
.ml-place-quick-nav__button:focus {
    transform: translateY(-2px);
    border-color: rgba(15, 52, 96, 0.28);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.13);
    color: var(--ml-link-hover, #1a1a2e);
    outline: none;
}
.ml-place-quick-nav__button:focus-visible {
    outline: 3px solid rgba(15, 52, 96, 0.28);
    outline-offset: 3px;
}
.ml-place-section--highlight {
    animation: ml-place-section-highlight 1200ms ease;
}
@keyframes ml-place-section-highlight {
    0% { background-color: transparent; }
    20% { background-color: rgba(233, 69, 96, 0.08); }
    100% { background-color: transparent; }
}
/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .ml-place-quick-nav__list {
        grid-template-columns: repeat(2, 1fr);
        width: min(100%, 860px);
    }
}
/* Mobile: 1 column */
@media (max-width: 640px) {
    .ml-place-quick-nav {
        padding: 12px 0;
    }
    .ml-place-quick-nav__list {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }
    .ml-place-quick-nav__button {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 56px;
        padding: 12px 16px 12px 36px;
        border-radius: 14px;
        gap: 12px;
    }
    .ml-place-quick-nav__button::before {
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
    }
}

/* Active state for quick nav buttons */
.ml-place-quick-nav__button--active {
    background: var(--ml-primary, #1a1a2e);
    color: #ffffff;
    border-color: var(--ml-primary, #1a1a2e);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}
.ml-place-quick-nav__button--active .ml-place-quick-nav__icon {
    color: #ffffff;
}
.ml-place-quick-nav__button--active::before {
    color: rgba(255, 255, 255, 0.55);
}
.ml-place-quick-nav__button--active:hover,
.ml-place-quick-nav__button--active:focus {
    background: var(--ml-link-hover, #1a1a2e);
    color: #ffffff;
    border-color: var(--ml-link-hover, #1a1a2e);
}

/* Address textarea — public My Account form (v3.7.3) */
.ml-address-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    line-height: 1.7;
}

/* Hero title + description blocks */
.ml-place-hero {
    padding: clamp(28px, 5vw, 64px) 0 clamp(16px, 3vw, 32px);
    text-align: center;
}
.ml-place-name {
    margin: 0 0 clamp(14px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ml-primary, #1a1a2e);
}
.ml-place-blocks {
    display: grid;
    gap: clamp(20px, 2.5vw, 36px);
    width: 100%;
    max-width: none;
    margin: 0;
    justify-items: center;
}
.ml-place-block {
    width: 100%;
    text-align: center;
}
.ml-place-block__title {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--ml-primary, #1a1a2e);
}
.ml-place-block__desc {
    color: var(--ml-text-muted, #4b5563);
    line-height: 1.7;
}
.ml-place-block__desc p { margin: 0 0 10px; }

.ml-place-section {
    padding: clamp(28px, 4vw, 56px) 0;
    width: 100%;
    text-align: center;
}
.ml-place-section__title,
.ml-place-workers__title {
    /* Modern bordered section header (v3.8.4) */
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0 0 20px;
    padding: 16px 18px;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 10px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: #000000;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* Optional accent — subtle centered underline below the title text */
.ml-place-section__title::after,
.ml-place-workers__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: #000000;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Tablet */
@media (max-width: 1024px) {
    .ml-place-section__title,
    .ml-place-workers__title {
        font-size: 22px;
        padding: 15px 16px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .ml-place-section__title,
    .ml-place-workers__title {
        font-size: 20px;
        padding: 14px 14px;
        margin-bottom: 18px;
        border-radius: 10px;
    }
    .ml-place-section__title::after,
    .ml-place-workers__title::after {
        width: 40px;
        margin-top: 8px;
    }
}

/* ── Video Banner Grid (v3.4.31) ─────────────────────────────────────────── */
.ml-place-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(16px, 2.5vw, 28px);
    justify-content: center;
    align-items: start;
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Outer wrap (flex column so actions sit below card) */
.ml-place-video-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}

/* Card shell */
.ml-place-video-banner-card {
    display: flex;
    flex-direction: column;
    background: var(--ml-card-bg, #ffffff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease;
    flex: 1 1 auto;
}
.ml-place-video-banner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

/* — Thumbnail / Banner — */
.ml-place-video-banner__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    overflow: hidden;
    cursor: pointer;
    display: block;
}

.ml-place-video-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 260ms ease, filter 260ms ease;
}
.ml-place-video-banner__thumb:hover .ml-place-video-banner__img,
.ml-place-video-banner__thumb:focus .ml-place-video-banner__img {
    transform: scale(1.03);
    filter: brightness(0.75);
}

/* Semi-transparent dark overlay */
.ml-place-video-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    transition: background 220ms ease;
    pointer-events: none;
}
.ml-place-video-banner__thumb:hover .ml-place-video-banner__overlay,
.ml-place-video-banner__thumb:focus .ml-place-video-banner__overlay {
    background: rgba(0, 0, 0, 0.50);
}

/* Large circular play button centred on thumbnail */
.ml-place-video-banner__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease;
    opacity: 0.92;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}
.ml-place-video-banner__thumb:hover .ml-place-video-banner__play-btn,
.ml-place-video-banner__thumb:focus .ml-place-video-banner__play-btn {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
}

/* — Embedded Player (injected by JS on click) — */
.ml-place-video-banner__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.ml-place-video-banner__player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* — Title — */
.ml-place-video-banner__title {
    padding: 13px 16px 10px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ml-primary, #1a1a2e);
    line-height: 1.45;
    text-align: center;
}

/* — Watch on YouTube button (centered, black bg, white text) — */
.ml-place-video-banner__actions {
    display: flex;
    justify-content: center;
    padding: 0 16px 18px;
}

.ml-place-video-banner__yt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #000000;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 11px 26px;
    border-radius: 50px;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 200ms ease, transform 180ms ease, box-shadow 200ms ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    cursor: pointer;
    border: none;
}
.ml-place-video-banner__yt-btn:hover,
.ml-place-video-banner__yt-btn:focus-visible {
    background: #222222;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}
.ml-place-video-banner__yt-btn:active {
    background: #111111;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

/* — Error fallback — */
.ml-place-video-banner__error {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ml-gray-100, #f1f5f9);
    padding: 20px;
}
.ml-place-video-banner__error p {
    margin: 0;
    color: var(--ml-gray-500, #64748b);
    font-size: 0.875rem;
    text-align: center;
}

/* — Responsive — */
@media (max-width: 1024px) {
    .ml-place-video-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
}

@media (max-width: 600px) {
    .ml-place-video-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .ml-place-video-banner__yt-btn {
        font-size: 0.82rem;
        padding: 10px 20px;
    }
    .ml-place-video-banner__title {
        font-size: 0.875rem;
    }
}

/* Place gallery */
.ml-place-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(12px, 2vw, 22px);
    width: 100%;
    margin: 0;
}
.ml-place-gallery-card {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.ml-place-gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* QR code section */
.ml-place-qr__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
}
.ml-place-qr__box {
    background: #fff;
    padding: clamp(16px, 2vw, 24px);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: inline-block;
}
.ml-place-qr__img {
    display: block;
    width: clamp(220px, 30vw, 320px);
    height: auto;
    background: #fff;
}
.ml-place-qr__download {
    text-decoration: none;
}

/* Businesses assigned to the current Place/Area */
.ml-place-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
}
.ml-place-user-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 100%;
    text-align: center;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.ml-place-user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.ml-place-user-card__banner {
    aspect-ratio: 16 / 9;
    /* neutral bg fills letterbox space so no gradient shows through the image */
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-place-user-card__banner img {
    width: 100%;
    height: 100%;
    /* contain: full banner visible, original aspect ratio preserved, no crop */
    object-fit: contain;
    object-position: center center;
    background: #f8fafc;
    display: block;
}
.ml-place-user-card__body {
    padding: clamp(14px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    flex: 1;
    min-height: 260px;
}
.ml-place-user-card__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    /* No negative margin — avatar sits below the banner, not on top of it */
    margin-top: 0;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.ml-place-user-card__name {
    margin: 6px 0 2px;
    font-weight: 700;
    color: var(--ml-primary, #1a1a2e);
    text-align: center;
}
.ml-place-user-card__desc {
    color: var(--ml-text-muted, #4b5563);
    margin: 0;
    flex: 1;
    line-height: 1.55;
    text-align: center;
}
.ml-place-user-card__btn {
    margin-top: 10px;
    align-self: center;
}

/* Fallback shared button skins in case the theme lacks them */
.ml-place-page .ml-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.2;
    border: 2px solid transparent;
    cursor: pointer;
    transition: filter 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
    text-decoration: none;
}
.ml-place-page .ml-btn--primary {
    background: var(--ml-btn-bg, #000000);
    color: var(--ml-btn-text, #fff);
}
.ml-place-page .ml-btn--primary:hover { filter: brightness(1.06); }
.ml-place-page .ml-btn--outline {
    background: var(--ml-btn-bg, #000000);
    color: var(--ml-btn-text, #fff);
    border-color: var(--ml-btn-border, #000000);
}
.ml-place-page .ml-btn--outline:hover {
    background: var(--ml-btn-hover, #222222);
    color: #fff;
}

/* Small-screen adjustments */
@media (max-width: 640px) {
    .ml-place-user-card__avatar { width: 60px; height: 60px; margin-top: 0; }
    .ml-place-name { letter-spacing: -0.005em; }
    .ml-place-container { padding-left: 12px; padding-right: 12px; }
    .ml-place-admin-actions { padding: 12px 0; }
    .ml-place-edit-btn { padding: 9px 20px; font-size: 0.85rem; }
    .ml-place-banner img { width: 100%; height: auto; max-height: none; }
}

/* ─────────────────────────────────────────────────────────────
   Places module — Full-width theme-container override (v3.3.0)
   ─────────────────────────────────────────────────────────────
   Purpose: On Place pages the active theme (Astra or any other)
   normally wraps content in a boxed container (max-width ~1240px)
   which leaves large blank margins on the left and right.
   The overrides below neutralize every known wrapper so that the
   Place page fills 100% of the browser width on every monitor.
   These rules are scoped strictly to `body.ml-place-fullwidth-body`
   so they never affect any other page. */

html.ml-place-fullwidth-html,
body.ml-place-fullwidth-body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--ml-bg-page, #f6f7fb);
}

/* Neutralize every common theme / builder wrapper on Place pages.
   These selectors intentionally cover Astra, Astra Pro, GeneratePress,
   Kadence, OceanWP, Storefront, Twenty* themes, Elementor, Beaver Builder,
   and generic layout wrappers. */
body.ml-place-fullwidth-body #page,
body.ml-place-fullwidth-body .site,
body.ml-place-fullwidth-body #wrapper,
body.ml-place-fullwidth-body .site-content,
body.ml-place-fullwidth-body #content,
body.ml-place-fullwidth-body #primary,
body.ml-place-fullwidth-body .content-area,
body.ml-place-fullwidth-body .site-main,
body.ml-place-fullwidth-body #main,
body.ml-place-fullwidth-body main,
body.ml-place-fullwidth-body main#main,
body.ml-place-fullwidth-body .main-container,
body.ml-place-fullwidth-body .entry-content,
body.ml-place-fullwidth-body .entry,
body.ml-place-fullwidth-body article,
body.ml-place-fullwidth-body .post,
body.ml-place-fullwidth-body .page,
body.ml-place-fullwidth-body .hentry,
body.ml-place-fullwidth-body .ast-container,
body.ml-place-fullwidth-body .ast-container-fluid,
body.ml-place-fullwidth-body .ast-row,
body.ml-place-fullwidth-body .ast-full-width-layout,
body.ml-place-fullwidth-body .ast-plain-container,
body.ml-place-fullwidth-body .ast-page-builder-template,
body.ml-place-fullwidth-body .ast-no-sidebar,
body.ml-place-fullwidth-body .site-content > .ast-container,
body.ml-place-fullwidth-body .inside-article,
body.ml-place-fullwidth-body .inside-content,
body.ml-place-fullwidth-body .grid-container,
body.ml-place-fullwidth-body .content-container,
body.ml-place-fullwidth-body .container,
body.ml-place-fullwidth-body .container-fluid,
body.ml-place-fullwidth-body .wrap,
body.ml-place-fullwidth-body .site-wrap,
body.ml-place-fullwidth-body .page-wrap,
body.ml-place-fullwidth-body .content-wrap,
body.ml-place-fullwidth-body .inner-wrap,
body.ml-place-fullwidth-body .inner-container,
body.ml-place-fullwidth-body .site-container,
body.ml-place-fullwidth-body .boxed-layout,
body.ml-place-fullwidth-body .single-content,
body.ml-place-fullwidth-body .single .entry-content,
body.ml-place-fullwidth-body .elementor-section-boxed,
body.ml-place-fullwidth-body .elementor-container,
body.ml-place-fullwidth-body .fl-page,
body.ml-place-fullwidth-body .fl-content,
body.ml-place-fullwidth-body .fl-post-content,
body.ml-place-fullwidth-body .kadence-container,
body.ml-place-fullwidth-body .kt-inside-inner-col,
body.ml-place-fullwidth-body .site-content-contain,
body.ml-place-fullwidth-body .ocean-container,
body.ml-place-fullwidth-body .oceanwp-row,
body.ml-place-fullwidth-body .site-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Astra Pro sometimes forces a fixed content width via CSS custom prop;
   reset it. */
body.ml-place-fullwidth-body {
    --ast-container-default-xlg-width: 100%;
    --ast-container-default-lg-width: 100%;
    --ast-container-default-md-width: 100%;
    --ast-container-default-sm-width: 100%;
    --ast-container-default-xs-width: 100%;
    --content-width: 100%;
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
}

/* Remove sidebars on Place pages. */
body.ml-place-fullwidth-body #secondary,
body.ml-place-fullwidth-body .sidebar,
body.ml-place-fullwidth-body .widget-area,
body.ml-place-fullwidth-body aside.widget-area {
    display: none !important;
}

/* Ensure the Place page root itself always spans the viewport. */
body.ml-place-fullwidth-body .ml-place-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Banner fills the entire viewport width without ever cropping or
   distorting the 16:9 (1280×720) source image. */
body.ml-place-fullwidth-body .ml-place-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}
body.ml-place-fullwidth-body .ml-place-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;   /* never crop, never stretch, never distort */
    object-position: center center;
    margin: 0 auto;
}

/* Inner sections stay centered even though the page is full width.
   The .ml-place-container caps line-length for readable text while
   the outer sections remain 100 % wide. */
body.ml-place-fullwidth-body .ml-place-section,
body.ml-place-fullwidth-body .ml-place-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.ml-place-fullwidth-body .ml-place-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(14px, 3vw, 64px);
    padding-right: clamp(14px, 3vw, 64px);
    text-align: center;
}

/* Responsive fine-tuning across common monitor breakpoints. */
@media (min-width: 1366px) {
    body.ml-place-fullwidth-body .ml-place-container { padding-left: clamp(20px, 3vw, 56px); padding-right: clamp(20px, 3vw, 56px); }
}
@media (min-width: 1600px) {
    body.ml-place-fullwidth-body .ml-place-container { padding-left: clamp(24px, 3vw, 72px); padding-right: clamp(24px, 3vw, 72px); }
}
@media (min-width: 1920px) {
    body.ml-place-fullwidth-body .ml-place-container { padding-left: clamp(28px, 3vw, 96px); padding-right: clamp(28px, 3vw, 96px); }
}
@media (min-width: 2560px) {
    body.ml-place-fullwidth-body .ml-place-container { padding-left: clamp(32px, 3vw, 128px); padding-right: clamp(32px, 3vw, 128px); }
}
@media (max-width: 1024px) {
    body.ml-place-fullwidth-body .ml-place-container { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
    body.ml-place-fullwidth-body .ml-place-container { padding-left: 12px; padding-right: 12px; }
    body.ml-place-fullwidth-body .ml-place-banner img { aspect-ratio: 16 / 9; }
}

/* ─────────────────────────────────────────────────────────────
   Place QR Code Card (v3.3.1)
   ─────────────────────────────────────────────────────────────
   Additive-only styling for the Place page QR Code Card.
   All existing .ml-place-qr__* selectors are preserved (the
   markup keeps both the old and new classes), so nothing that
   already depended on those hooks changes. The rules below only
   layer a modern, A4-print-friendly card on top. */

.ml-place-qrcard {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 3.2vw, 40px);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
    box-sizing: border-box;
    color: var(--ml-text, #1a1a2e);
}

.ml-place-qrcard__heading {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ml-primary, #1a1a2e);
    font-size: clamp(1.4rem, 1.4vw + 0.9rem, 2rem);
    line-height: 1.2;
    text-align: center;
}

.ml-place-qrcard__box {
    background: #ffffff;
    padding: clamp(14px, 2vw, 22px);
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.ml-place-qrcard__img {
    display: block;
    width: clamp(220px, 30vw, 320px);
    height: auto;
    max-width: 100%;
    background: #ffffff;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.ml-place-qrcard__desc {
    margin: 0;
    font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
    line-height: 1.55;
    color: var(--ml-text, #1a1a2e);
    max-width: 46ch;
    text-align: center;
}

.ml-place-qrcard__desc--hi {
    color: var(--ml-secondary, #16213e);
    font-size: clamp(0.9rem, 0.3vw + 0.8rem, 1rem);
    margin-top: -4px;
}

.ml-place-qrcard__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.ml-place-qrcard__download.ml-btn {
    text-decoration: none;
    min-width: min(280px, 100%);
    justify-content: center;
    text-align: center;
}

.ml-location-selector {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    padding: 18px;
    margin-top: 8px;
}

.ml-location-selector__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ml-location-selector__summary strong,
.ml-location-selector__summary span {
    display: block;
}

.ml-location-selector__summary strong {
    color: var(--ml-gray-800, #1f2937);
    font-size: 0.92rem;
    margin-bottom: 3px;
}

.ml-location-selector__summary span {
    color: var(--ml-gray-600, #4b5563);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ml-location-status {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.ml-location-selector__toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ml-location-selector__panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ml-location-selector__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.ml-location-selector__field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ml-gray-800, #1f2937);
    font-size: 0.82rem;
    font-weight: 700;
}

.ml-location-selector__field .ml-select {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    background: #fff;
}

/* Responsive tuning */
@media (max-width: 640px) {
    .ml-place-qrcard {
        max-width: 100%;
        padding: 22px 16px;
        border-radius: 16px;
    }
    .ml-place-qrcard__img {
        width: min(78vw, 300px);
    }
    .ml-place-qrcard__download.ml-btn {
        width: 100%;
        min-width: 0;
    }
    .ml-location-selector { padding: 14px; border-radius: 16px; }
    .ml-location-selector__summary { align-items: stretch; flex-direction: column; }
    .ml-location-selector__toggle { width: 100%; justify-content: center; }
    .ml-location-selector__grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .ml-location-selector__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A4 print-friendly rules — used when the user prints or saves
   the Place page as PDF from the browser. Only the QR card is
   printed; everything else on the Place page is hidden so the
   downloaded artifact stays clean and centered. */
@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #ffffff !important; }
    .ml-place-page > *:not(.ml-place-qr),
    .ml-place-banner,
    .ml-place-quick-nav,
    .ml-place-hero,
    .ml-place-videos,
    .ml-place-users,
    .ml-place-section:not(.ml-place-qr),
    .site-header, header.site-header, #masthead,
    .site-footer, footer.site-footer, #colophon,
    .ml-place-qrcard__actions {
        display: none !important;
    }
    .ml-place-qr,
    .ml-place-qr__inner,
    .ml-place-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    .ml-place-qrcard {
        box-shadow: none !important;
        border: 1px solid #dcdce3 !important;
        page-break-inside: avoid;
        margin: 0 auto !important;
    }
    .ml-place-qrcard__img {
        width: 260px !important;
        height: 260px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   v3.4.2 — Place Favorites Integration
   Additive-only. Reuses .ml-fav-list-card visuals. Backward
   compatible with existing themed color variables.
   ─────────────────────────────────────────────────────────── */

/* Place page — Favorite button placed under the title, near the top. */
.ml-place-hero {
    text-align: center;
}
.ml-place-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    flex-wrap: wrap;
}
.ml-place-fav-btn {
    min-width: 140px;
    letter-spacing: 0.2px;
}

/* My Favorite Lists — section headings between the two grids. */
.ml-fav-lists-section__title {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 700;
    color: var(--ml-heading, #1a1a2e);
    margin: 24px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ml-fav-lists-section__title:first-of-type {
    margin-top: 4px;
}
.ml-fav-lists-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 8px;
    background: var(--ml-gray-100, #f1f5f9);
    color: var(--ml-gray-600, #475569);
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Places grid — reuse ml-fav-list-card so cards look identical. */
.ml-fav-place-card .ml-fav-list-card__body {
    padding: 18px 20px 20px;
}

/*
 * Force the "My Favorite Lists" heading to White (#FFFFFF) on all viewports.
 * Overrides any themed --ml-heading token so contrast against the gradient
 * hero background is preserved on Desktop, Tablet, and Mobile.
 */
.ml-fav-lists-page .ml-fav-lists-hero__title,
.ml-fav-lists-page .ml-fav-lists-hero .ml-fav-lists-hero__title {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ml-fav-lists-page .ml-fav-lists-hero__sub {
    color: rgba(255, 255, 255, 0.92);
}
.ml-fav-lists-page .ml-fav-lists-hero__count {
    color: #FFFFFF;
}

/* Responsive tuning — Place Favorite button. */
@media (max-width: 640px) {
    .ml-place-actions {
        margin: 12px 0 2px;
    }
    .ml-place-fav-btn {
        width: 100%;
        max-width: 260px;
    }
}

/* ───────────────────────────────────────────────────────────────
   Nearby Places — Place page (v3.4.3)
   Modern responsive card grid:
     • Desktop: 3 cards per row
     • Tablet : 2 cards per row
     • Mobile : 1 card  per row
   Cards are equal-height thanks to flex column layout on the card
   and grid-template-rows on the grid.
   ─────────────────────────────────────────────────────────────── */
.ml-place-nearby {
    width: 100%;
}
.ml-place-nearby__title {
    text-align: center;
    margin-bottom: clamp(16px, 2vw, 28px);
}
.ml-place-nearby-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}
.ml-place-nearby-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 100%;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.ml-place-nearby-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.ml-place-nearby-card__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f1f5f9;
    overflow: hidden;
    text-decoration: none;
}
.ml-place-nearby-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 220ms ease;
}
.ml-place-nearby-card:hover .ml-place-nearby-card__media img {
    transform: scale(1.03);
}
.ml-place-nearby-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}
.ml-place-nearby-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
    flex: 1 1 auto;
    text-align: center;
}
.ml-place-nearby-card__title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
    color: #0f172a;
    font-weight: 700;
    word-break: break-word;
}
.ml-place-nearby-card__title a {
    color: inherit;
    text-decoration: none;
}
.ml-place-nearby-card__title a:hover {
    text-decoration: underline;
}
.ml-place-nearby-card__desc {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
    flex: 1 1 auto;
}
.ml-place-nearby-card__actions {
    margin-top: auto;
    display: flex;
    justify-content: center;
}
.ml-place-nearby-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

/* Tablet — two cards per row */
@media (max-width: 1024px) {
    .ml-place-nearby-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile — single card per row */
@media (max-width: 640px) {
    .ml-place-nearby-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .ml-place-nearby-card__body {
        padding: 16px 16px 18px;
    }
    .ml-place-nearby-card__title {
        font-size: 1.05rem;
    }
}

/* ── All Places Directory (/places/) ───────────────────────────── */
.ml-places-directory {
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    background:
        radial-gradient(circle at top left, rgba(15, 52, 96, 0.10), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
    color: var(--ml-text);
    overflow-x: hidden;
}

.ml-places-directory__hero {
    padding: clamp(48px, 7vw, 92px) 0 clamp(32px, 5vw, 64px);
    background: linear-gradient(135deg, #111827 0%, #16213e 48%, #0f3460 100%);
    color: #fff;
    position: relative;
    isolation: isolate;
}

.ml-places-directory__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 20%, rgba(255,255,255,.18), transparent 28%);
    z-index: -1;
}

.ml-places-directory__hero-inner { max-width: 1180px; }
.ml-places-directory__eyebrow {
    margin: 0 0 12px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
}

.ml-places-directory__hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.1rem, 4vw, 4.25rem);
    line-height: 1.03;
    letter-spacing: -.04em;
}

.ml-places-directory__hero p:not(.ml-places-directory__eyebrow) {
    max-width: 760px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(1rem, 1vw + .75rem, 1.22rem);
    line-height: 1.7;
}

.ml-places-directory__content {
    max-width: 1180px;
    padding-top: clamp(18px, 3vw, 36px);
    padding-bottom: clamp(48px, 7vw, 88px);
}

/* Search & Filter bar removed (v3.5.2) — rules kept as no-ops to avoid
   layout regressions on any cached/third-party references to these classes */
.ml-places-directory__filters,
.ml-places-directory__filter-field,
.ml-places-directory__filter-actions {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ml-places-directory__summary {
    margin: 0 0 18px;
    color: var(--ml-gray-600);
    font-weight: 700;
}

.ml-places-directory__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
    align-items: stretch;
}

.ml-places-directory-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 24px;
    box-shadow: 0 14px 42px rgba(15, 23, 42, .08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ml-places-directory-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 52, 96, .24);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .14);
}

.ml-places-directory-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #16213e, #0f3460);
}

.ml-places-directory-card__media img,
.ml-places-directory-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.ml-places-directory-card__media img {
    object-fit: cover;
    transform: scale(1.001);
    transition: transform .28s ease;
}

.ml-places-directory-card:hover .ml-places-directory-card__media img { transform: scale(1.045); }

.ml-places-directory-card__placeholder {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(135deg, #16213e, #0f3460 58%, #e94560);
}

.ml-places-directory-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 13px;
    padding: clamp(18px, 2vw, 24px);
}

.ml-places-directory-card__title {
    margin: 0;
    font-size: clamp(1.18rem, .7vw + 1rem, 1.45rem);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.ml-places-directory-card__title a {
    color: var(--ml-heading);
    text-decoration: none;
}

.ml-places-directory-card__title a:hover { color: var(--ml-link); }
.ml-places-directory-card__desc {
    margin: 0;
    color: var(--ml-gray-600);
    line-height: 1.65;
    font-size: .98rem;
}

.ml-places-directory-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.ml-places-directory-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
}

.ml-places-directory-card__actions {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ml-places-directory-card__actions .ml-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}
.ml-places-directory-card__actions .ml-btn--edit-place {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ml-places-directory__empty {
    padding: clamp(28px, 4vw, 48px);
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 12px 38px rgba(15, 23, 42, .07);
}

.ml-places-directory__empty h2 { margin: 0 0 8px; }
.ml-places-directory__empty p { margin: 0; color: var(--ml-gray-600); }

.ml-places-directory__pagination {
    margin-top: clamp(24px, 4vw, 40px);
}

.ml-places-directory__pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ml-places-directory__pagination .page-numbers a,
.ml-places-directory__pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #fff;
    color: var(--ml-heading);
    font-weight: 800;
    text-decoration: none;
}

.ml-places-directory__pagination .page-numbers .current,
.ml-places-directory__pagination .page-numbers a:hover {
    border-color: var(--ml-btn-bg);
    background: var(--ml-btn-bg);
    color: var(--ml-btn-text);
}

.ml-places-infinite-status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 56px;
    margin-top: clamp(24px, 4vw, 40px);
    padding: 14px 18px;
    text-align: center;
    color: var(--ml-gray-600);
    font-weight: 800;
}

.ml-places-infinite-status[hidden],
.ml-places-infinite-retry[hidden],
.ml-places-infinite-sentinel[hidden] {
    display: none !important;
}

.ml-places-infinite-spinner {
    display: none;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(15, 52, 96, .18);
    border-top-color: var(--ml-btn-bg);
    border-radius: 50%;
    animation: mlPlacesSpin .8s linear infinite;
}

.ml-places-infinite-status--loading.ml-places-infinite-status--indicator-spinner .ml-places-infinite-spinner {
    display: inline-block;
}

.ml-places-infinite-skeletons {
    display: none;
    width: 100%;
    max-width: 760px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
}

.ml-places-infinite-status--loading.ml-places-infinite-status--indicator-skeleton .ml-places-infinite-skeletons {
    display: grid;
}

.ml-places-infinite-skeleton {
    min-height: 112px;
    border-radius: 18px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 42%, #eef2f7 84%);
    background-size: 220% 100%;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .24);
    animation: mlPlacesSkeleton 1.15s ease-in-out infinite;
}

.ml-places-infinite-status--error {
    color: #991b1b;
}

.ml-places-infinite-status--end {
    color: var(--ml-gray-500);
}

.ml-places-infinite-sentinel {
    width: 100%;
    height: 1px;
}

@keyframes mlPlacesSpin {
    to { transform: rotate(360deg); }
}

@keyframes mlPlacesSkeleton {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@media (max-width: 1024px) {
    .ml-places-directory__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ml-places-directory__filter-field--search { grid-column: 1 / -1; }
    .ml-places-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ml-places-directory__content { padding-left: 14px; padding-right: 14px; }
    .ml-places-directory__filters {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }
    .ml-places-directory__filter-actions,
    .ml-places-directory__filter-actions .ml-btn { width: 100%; }
    .ml-places-directory__grid { grid-template-columns: 1fr; }
    .ml-places-infinite-skeletons { grid-template-columns: 1fr; }
    .ml-places-directory-card { border-radius: 20px; }
}

/* Product & Service Videos */
.ml-product-videos-editor {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 10px;
    padding: 16px;
    border: 1px solid var(--ml-gray-200, #e2e8f0);
    border-radius: var(--ml-radius-sm, 8px);
    background: var(--ml-gray-50, #f8fafc);
    box-sizing: border-box;
}
.ml-product-videos-editor__header h4 { margin: 0 0 6px; color: var(--ml-heading, #1a1a2e); }
.ml-product-videos-editor__header p { margin: 0 0 12px; color: var(--ml-gray-600, #475569); font-size: .875rem; }
.ml-product-video-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ml-product-video-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ml-gray-200, #e2e8f0);
    border-radius: var(--ml-radius-sm, 8px);
    background: var(--ml-white, #fff);
    box-sizing: border-box;
}
.ml-product-video-row.is-editing { border-color: var(--ml-primary, #1a1a2e); box-shadow: 0 0 0 2px rgba(26, 26, 46, .08); }
.ml-product-video-handle {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    border: 1px solid var(--ml-gray-200, #e2e8f0);
    border-radius: 8px;
    background: var(--ml-gray-50, #f8fafc);
    color: var(--ml-gray-600, #475569);
    cursor: grab;
    touch-action: none;
}
.ml-product-video-fields {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 110px;
    gap: 10px;
}
.ml-product-video-fields label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--ml-gray-700, #334155); }
.ml-product-video-fields input { width: 100%; max-width: 100%; box-sizing: border-box; }
.ml-product-video-preview-wrap {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ml-product-video-preview-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ml-gray-700, #334155);
}
.ml-product-video-preview {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed var(--ml-gray-300, #cbd5e1);
    border-radius: 10px;
    background: var(--ml-gray-50, #f8fafc);
    color: var(--ml-gray-500, #64748b);
    font-size: .85rem;
    text-align: center;
    box-sizing: border-box;
}
.ml-product-video-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.ml-product-video-error {
    display: none;
    margin: 0;
    color: #b91c1c;
    font-size: .82rem;
    font-weight: 600;
}
.ml-product-video-error.is-visible { display: block; }
.ml-product-video-row.has-video-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, .08);
}
.ml-product-video-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.ml-product-videos-card-form { width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ml-gray-200, #e2e8f0); }
.ml-product-videos-card-form .ml-product-videos-editor { padding: 12px; }
.ml-product-videos {
    width: 100%;
    max-width: 100%;
    clear: both;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}
.ml-product-video { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; }
.ml-product-video__embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}
.ml-product-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
    z-index: 2;
}
.ml-product-video__embed iframe[data-ml-youtube-lazy][data-src]:not([src]):not([data-ml-youtube-loaded="1"]) {
    opacity: 0;
    pointer-events: none;
}
.ml-product-video__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--ml-gray-500, #64748b);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    box-sizing: border-box;
}
.ml-product-video.is-video-loaded .ml-product-video__placeholder {
    opacity: 0;
    visibility: hidden;
}
.ml-product-video__title {
    margin: 6px 0 0;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--ml-heading, #1a1a2e);
}
@supports not (aspect-ratio: 16 / 9) {
    .ml-product-video__embed { height: 0; padding-top: 56.25%; }
}

/* ─── YouTube Shorts: Portrait-Friendly Layout ─────── */
.ml-product-video--shorts .ml-product-video__embed {
    aspect-ratio: 9 / 16;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
@supports not (aspect-ratio: 9 / 16) {
    .ml-product-video--shorts .ml-product-video__embed { height: 0; padding-top: 177.78%; }
}

/* ─── Shorts badge in editor ─────── */
.ml-video-type-badge--shorts {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: #e11d48;
    border-radius: 4px;
}

/* ─── Shorts preview in editor ─────── */
.ml-product-video-preview--shorts {
    aspect-ratio: 9 / 16;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
@supports not (aspect-ratio: 9 / 16) {
    .ml-product-video-preview--shorts { height: 0; padding-top: 177.78%; }
}


/* ─── Public WooCommerce Single Product: Product & Service Videos ─────── */
.woocommerce div.product .ml-product-videos-section,
.ml-product-videos-section {
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 32px 0 28px;
    padding: 0;
    box-sizing: border-box;
}
.ml-product-videos-section__inner {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    border: 1px solid var(--ml-gray-200, #e2e8f0);
    border-radius: 20px;
    background: var(--ml-white, #fff);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    box-sizing: border-box;
    overflow: hidden;
}
.ml-product-videos-section__title {
    margin: 0 0 18px;
    color: var(--ml-heading, #1a1a2e);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
}
.ml-product-videos--single {
    gap: 22px;
    margin: 0;
}
.ml-product-videos--single .ml-product-video {
    padding: 18px;
    border: 1px solid var(--ml-gray-200, #e2e8f0);
    border-radius: 18px;
    background: var(--ml-gray-50, #f8fafc);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    overflow: hidden;
}
.ml-product-videos--single .ml-product-video__title {
    margin: 0 0 12px;
    color: var(--ml-heading, #1a1a2e);
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
}
.ml-product-videos--single .ml-product-video__embed {
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 8px 20px rgba(15, 23, 42, .08);
}
.ml-product-videos--single .ml-product-video--shorts .ml-product-video__embed {
    max-width: min(100%, 420px);
}

/* ─── Desktop: video layout in WooCommerce product loop ─────── */
li.product .ml-product-videos {
    margin: 10px 0 6px;
    gap: 10px;
}
li.product .ml-product-video__embed {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
li.product .woocommerce-LoopProduct-link,
li.product .ml-product-videos,
li.product .ml-inquiry-info {
    clear: both;
    width: 100%;
}

/* ─── Vendor Dashboard: Product Card Action Buttons ─────── */
.ml-vendor-product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    align-items: center;
}
.ml-vendor-product-card__actions .ml-btn {
    flex: 0 0 auto;
}
.ml-vendor-product-delete-form {
    display: inline-flex;
    margin: 0;
}

/* ─── Vendor Dashboard: Edit Product Card Header ─────── */
.ml-vendor-product-card .ml-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Responsive: Tablet ─────── */
@media (max-width: 782px) {
    .ml-product-video-row { flex-wrap: wrap; }
    .ml-product-video-fields { grid-template-columns: 1fr; flex-basis: calc(100% - 46px); }
    .ml-product-video-preview { width: 100%; }
    .ml-product-video-actions { flex-direction: row; flex-wrap: wrap; width: 100%; padding-left: 46px; }
    .ml-product-videos { gap: 10px; margin: 8px 0 4px; }
    .ml-product-video__embed { border-radius: 8px; }
    .ml-product-video--shorts .ml-product-video__embed { max-width: 260px; }
    .ml-product-video-preview--shorts { max-width: 200px; }
    .ml-product-videos-section { margin: 26px 0 24px; }
    .ml-product-videos-section__inner { padding: 18px; border-radius: 16px; }
    .ml-product-videos--single { gap: 16px; }
    .ml-product-videos--single .ml-product-video { padding: 14px; border-radius: 14px; }
    .ml-product-videos--single .ml-product-video--shorts .ml-product-video__embed { max-width: min(100%, 360px); }
    .ml-vendor-product-card__actions { gap: 6px; }
    .ml-vendor-product-card__actions .ml-btn { font-size: .8rem; padding: 6px 10px; }
}

/* ─── Responsive: Mobile ─────── */
@media (max-width: 480px) {
    .ml-product-videos-editor { padding: 12px; }
    .ml-product-video-row { gap: 8px; padding: 10px; }
    .ml-product-video-fields { flex-basis: 100%; }
    .ml-product-video-actions { padding-left: 0; }
    .ml-product-video-actions .ml-btn { width: 100%; justify-content: center; }
    .ml-product-videos { gap: 8px; margin: 6px 0 4px; }
    .ml-product-video__embed { border-radius: 6px; }
    .ml-product-video--shorts .ml-product-video__embed { max-width: 220px; }
    .ml-product-video-preview--shorts { max-width: 180px; }
    .ml-product-videos-section { margin: 22px 0 20px; }
    .ml-product-videos-section__inner { padding: 14px; border-radius: 14px; box-shadow: 0 8px 20px rgba(15, 23, 42, .06); }
    .ml-product-videos-section__title { margin-bottom: 14px; }
    .ml-product-videos--single { gap: 14px; }
    .ml-product-videos--single .ml-product-video { padding: 12px; border-radius: 12px; }
    .ml-product-videos--single .ml-product-video--shorts .ml-product-video__embed { max-width: 100%; }
    .ml-vendor-product-card__actions { flex-direction: row; flex-wrap: wrap; gap: 6px; width: 100%; }
    .ml-vendor-product-card__actions .ml-btn { flex: 1 1 auto; text-align: center; justify-content: center; font-size: .78rem; padding: 6px 8px; }
    .ml-vendor-product-delete-form { flex: 1 1 auto; }
    .ml-vendor-product-delete-form .ml-btn { width: 100%; }
}

/* ─── Product Inquiry Mode — Public My List Page ─────────────── */
.ml-inquiry-info {
    width: 100%;
    margin: 6px 0 4px;
    padding: 0;
    box-sizing: border-box;
}
.ml-inquiry-info__price {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ml-heading, #1a1a2e);
    margin-bottom: 6px;
    line-height: 1.4;
}
.ml-inquiry-info__price .ml-price-range__label {
    font-weight: 700;
    margin-right: 4px;
}
.ml-inquiry-info__custom {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ml-gray-600, #475569);
    white-space: pre-line;
    word-break: break-word;
    margin: 0;
    padding: 8px 10px;
    background: rgba(26, 26, 46, .03);
    border-left: 3px solid var(--ml-primary, #1a1a2e);
    border-radius: 0 6px 6px 0;
}

/* Inquiry badge in vendor dashboard */
.ml-inquiry-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--ml-primary, #1a1a2e);
    border-radius: 4px;
    margin-bottom: 6px;
}
.ml-field-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ml-gray-700, #334155);
    margin-bottom: 4px;
}
.ml-inquiry-info-form {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ml-gray-200, #e2e8f0);
}

/* ─── Quill Lightweight Rich Description Editor ─────────────── */
.ml-rich-editor-wrap {
    display: block;
}
.ml-rich-editor-wrap .ml-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: .9rem;
    color: var(--ml-heading, #1a1a2e);
}
.ml-rich-editor {
    width: 100%;
    border: 1px solid var(--ml-gray-300, #cbd5e1);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    box-sizing: border-box;
}

/* Toolbar */
.ml-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--ml-gray-50, #f8fafc);
    border-bottom: 1px solid var(--ml-gray-200, #e2e8f0);
    box-sizing: border-box;
}
.ml-rich-toolbar .ql-formats {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-right: 1px solid var(--ml-gray-200, #e2e8f0);
    margin-right: 2px;
}
.ml-rich-toolbar .ql-formats:last-child {
    border-right: none;
    margin-right: 0;
}

/* Quill button and select resets for our toolbar */
.ml-rich-toolbar .ql-bold,
.ml-rich-toolbar .ql-italic,
.ml-rich-toolbar .ql-underline,
.ml-rich-toolbar .ql-strike,
.ml-rich-toolbar .ql-list,
.ml-rich-toolbar .ql-blockquote,
.ml-rich-toolbar .ql-align,
.ml-rich-toolbar .ql-clean,
.ml-rich-toolbar .ql-undo,
.ml-rich-toolbar .ql-redo {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ml-gray-700, #334155);
    transition: background .15s, border-color .15s;
    font-size: .85rem;
}
.ml-rich-toolbar button:hover,
.ml-rich-toolbar button.ql-active {
    background: var(--ml-gray-200, #e2e8f0);
    border-color: var(--ml-gray-300, #cbd5e1);
}
.ml-rich-toolbar .ql-undo,
.ml-rich-toolbar .ql-redo {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}
.ml-rich-toolbar select.ql-header,
.ml-rich-toolbar select.ql-size {
    min-width: 72px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--ml-gray-300, #cbd5e1);
    background: #fff;
    font-size: .78rem;
    padding: 2px 6px;
    color: var(--ml-gray-700, #334155);
    cursor: pointer;
}
.ml-rich-toolbar .ql-color,
.ml-rich-toolbar .ql-background {
    min-width: 28px;
    height: 28px;
}

/* Editor surface */
.ml-rich-surface {
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ml-body-text, #1e293b);
    box-sizing: border-box;
}
.ml-rich-surface:focus {
    outline: 2px solid var(--ml-primary, #1a1a2e);
    outline-offset: -2px;
}

/* Quill's internal .ql-editor class needs these to render inside our surface */
.ml-rich-surface.ql-editor {
    font-family: inherit;
}
.ml-rich-surface .ql-size-10px { font-size: 10px; }
.ml-rich-surface .ql-size-12px { font-size: 12px; }
.ml-rich-surface .ql-size-14px { font-size: 14px; }
.ml-rich-surface .ql-size-18px { font-size: 18px; }
.ml-rich-surface .ql-size-24px { font-size: 24px; }
.ml-rich-surface .ql-size-32px { font-size: 32px; }

/* Tablet */
@media (max-width: 782px) {
    .ml-rich-toolbar {
        padding: 5px 6px;
        gap: 3px;
    }
    .ml-rich-toolbar .ql-formats {
        padding: 1px 3px;
        gap: 1px;
    }
    .ml-rich-toolbar .ql-bold,
    .ml-rich-toolbar .ql-italic,
    .ml-rich-toolbar .ql-underline,
    .ml-rich-toolbar .ql-strike,
    .ml-rich-toolbar .ql-list,
    .ml-rich-toolbar .ql-blockquote,
    .ml-rich-toolbar .ql-align,
    .ml-rich-toolbar .ql-clean,
    .ml-rich-toolbar .ql-undo,
    .ml-rich-toolbar .ql-redo {
        width: 26px;
        height: 26px;
        font-size: .82rem;
    }
    .ml-rich-toolbar select.ql-header,
    .ml-rich-toolbar select.ql-size {
        min-width: 60px;
        height: 26px;
        font-size: .74rem;
    }
    .ml-rich-surface {
        min-height: 160px;
        padding: 12px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ml-rich-editor {
        border-radius: 8px;
    }
    .ml-rich-toolbar {
        padding: 4px 4px;
        gap: 2px;
    }
    .ml-rich-toolbar .ql-formats {
        padding: 1px 2px;
        border-right: none;
        margin-right: 0;
        gap: 1px;
    }
    .ml-rich-toolbar .ql-bold,
    .ml-rich-toolbar .ql-italic,
    .ml-rich-toolbar .ql-underline,
    .ml-rich-toolbar .ql-strike,
    .ml-rich-toolbar .ql-list,
    .ml-rich-toolbar .ql-blockquote,
    .ml-rich-toolbar .ql-align,
    .ml-rich-toolbar .ql-clean,
    .ml-rich-toolbar .ql-undo,
    .ml-rich-toolbar .ql-redo {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }
    .ml-rich-toolbar select.ql-header,
    .ml-rich-toolbar select.ql-size {
        min-width: 54px;
        height: 30px;
        font-size: .72rem;
        padding: 2px 4px;
    }
    .ml-rich-toolbar .ql-color,
    .ml-rich-toolbar .ql-background {
        width: 30px;
        height: 30px;
    }
    .ml-rich-surface {
        min-height: 140px;
        max-height: 360px;
        padding: 10px;
        font-size: .9rem;
    }
}

/* Simplified Advanced Editor for Product Long Description */
.ml-rich-editor-wrap[data-ml-rich-editor] .ml-rich-editor {
    display: block;
}
.ml-rich-editor-wrap[data-ml-rich-editor] .ml-rich-input-fallback,
.ml-rich-editor-wrap.ml-rich-editor-ready .ml-rich-input-fallback {
    display: none !important;
}
.ml-rich-editor .ql-toolbar.ql-snow,
.ml-rich-editor .ql-container.ql-snow {
    border: 0;
    font-family: inherit;
}
.ml-rich-toolbar.ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 0;
    border-bottom: 1px solid var(--ml-gray-200, #e2e8f0);
    box-sizing: border-box;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-formats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 8px 0 0;
    border-right: 1px solid var(--ml-gray-200, #e2e8f0);
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-formats:last-child {
    border-right: 0;
    padding-right: 0;
}
.ml-rich-toolbar.ql-toolbar.ql-snow button,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-label {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #000;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.ml-rich-toolbar.ql-toolbar.ql-snow button:hover,
.ml-rich-toolbar.ql-toolbar.ql-snow button:focus,
.ml-rich-toolbar.ql-toolbar.ql-snow button.ql-active,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-label:hover,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-label:focus,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #000;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.ml-rich-toolbar.ql-toolbar.ql-snow button.ql-active {
    background: #e0e7ff;
    border-color: #a5b4fc;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-stroke {
    stroke: #000;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-fill {
    fill: #000;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker {
    color: #000;
    font-size: 14px;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-header {
    width: 112px;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-header .ql-picker-label {
    width: 112px;
    justify-content: flex-start;
    padding: 0 28px 0 10px;
    box-sizing: border-box;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-options {
    border: 1px solid var(--ml-gray-200, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
    padding: 6px;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-item {
    color: #000;
    border-radius: 6px;
    padding: 5px 8px;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-item:hover,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    background: #eef2ff;
    color: #000;
}
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-link,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-image,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-video,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-code-block,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-script,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-blockquote,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-strike,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-color,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-background,
.ml-rich-toolbar.ql-toolbar.ql-snow .ql-size {
    display: none !important;
}
.ml-rich-surface.ql-container.ql-snow {
    min-height: 210px;
    max-height: 520px;
    overflow-y: auto;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--ml-body-text, #1e293b);
}
.ml-rich-surface.ql-container.ql-snow .ql-editor {
    min-height: 210px;
    padding: 16px;
    font-family: inherit;
    line-height: 1.65;
}
.ml-rich-surface.ql-container.ql-snow .ql-editor:focus {
    outline: 2px solid var(--ml-primary, #1a1a2e);
    outline-offset: -2px;
}
.ql-align-left { text-align: left; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }

@media (max-width: 782px) {
    .ml-rich-toolbar.ql-toolbar.ql-snow {
        gap: 6px;
        padding: 8px;
    }
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-formats {
        gap: 5px;
        padding-right: 6px;
    }
    .ml-rich-toolbar.ql-toolbar.ql-snow button,
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-label {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-header,
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-header .ql-picker-label {
        width: 96px;
    }
    .ml-rich-surface.ql-container.ql-snow,
    .ml-rich-surface.ql-container.ql-snow .ql-editor {
        min-height: 170px;
    }
}

@media (max-width: 480px) {
    .ml-rich-toolbar.ql-toolbar.ql-snow {
        gap: 5px;
        padding: 7px;
    }
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-formats {
        gap: 4px;
        padding-right: 0;
        border-right: 0;
    }
    .ml-rich-toolbar.ql-toolbar.ql-snow button,
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-picker-label {
        width: 36px;
        height: 36px;
    }
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-header,
    .ml-rich-toolbar.ql-toolbar.ql-snow .ql-header .ql-picker-label {
        width: 90px;
    }
    .ml-rich-surface.ql-container.ql-snow,
    .ml-rich-surface.ql-container.ql-snow .ql-editor {
        min-height: 150px;
        max-height: 380px;
    }
    .ml-rich-surface.ql-container.ql-snow .ql-editor {
        padding: 12px;
    }
}
.ml-rich-surface.ql-container.ql-snow {
    padding: 0;
    box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════
   Product Share Message — My Account (edit textarea row)
   ══════════════════════════════════════════════════════════════════ */

.ml-share-msg-row {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.ml-share-msg-textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    font-size: 13px;
    line-height: 1.5;
}

.ml-share-msg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ml-share-msg-count {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}

/* Full-width layout for the sortable item when a textarea is present */
.ml-sortable-item {
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════
   Product Share Message — Public My List page (display card)
   ══════════════════════════════════════════════════════════════════ */

/* Elevated specificity (li.product wrapper + scoped class, repeated
   selector) so Astra/Astra Pro/Elementor global typography and
   WooCommerce loop-item styles cannot silently override this card.
   !important is used only on the properties those themes are known to
   set globally (font, color, box-sizing, border, text-align, display). */
.ml-products-grid li.product .ml-product-share-message,
.ml-product-share-message.ml-product-share-message {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 14px auto !important;
    padding: 16px 20px !important;
    background: #f8f9ff !important;
    border: 1.5px solid rgba(79, 70, 229, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    color: #1a1a2e !important;
    text-align: center !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box !important;
    letter-spacing: 0.01em;
    float: none !important;
}

/* Decorative underline below the message text, always centered and
   contained within the card. */
.ml-products-grid li.product .ml-product-share-message::after,
.ml-product-share-message.ml-product-share-message::after {
    content: '' !important;
    display: block !important;
    width: 90px;
    max-width: 60%;
    height: 2px !important;
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.15), rgba(79, 70, 229, 0.65), rgba(79, 70, 229, 0.15)) !important;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Tablet */
@media (max-width: 768px) {
    .ml-products-grid li.product .ml-product-share-message,
    .ml-product-share-message.ml-product-share-message {
        font-size: 15px !important;
        margin: 12px auto !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }

    .ml-products-grid li.product .ml-product-share-message::after,
    .ml-product-share-message.ml-product-share-message::after {
        width: 75px;
        margin-top: 9px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ml-products-grid li.product .ml-product-share-message,
    .ml-product-share-message.ml-product-share-message {
        font-size: 14px !important;
        width: 100% !important;
        margin: 10px auto !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .ml-products-grid li.product .ml-product-share-message::after,
    .ml-product-share-message.ml-product-share-message::after {
        width: 60px;
        margin-top: 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Report My List — Button, Modal & Form (v3.4.10)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Report Button ─────────────────────────────────────────────────── */
.ml-btn--report {
    background: transparent;
    color: var(--ml-gray-500, #64748b);
    border: 1px solid var(--ml-gray-300, #cbd5e1);
    transition: all var(--ml-transition, .2s ease);
    font-size: 0.8rem;
}
.ml-btn--report:hover,
.ml-btn--report:focus {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* ── Report Modal Overlay ──────────────────────────────────────────── */
.ml-report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: mlReportFadeIn 0.2s ease;
}

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

/* ── Report Modal Card ─────────────────────────────────────────────── */
.ml-report-modal {
    background: var(--ml-card-bg, #ffffff);
    border-radius: var(--ml-radius, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 28px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: mlReportSlideIn 0.25s ease;
}

@keyframes mlReportSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.ml-report-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--ml-gray-400, #94a3b8);
    transition: color var(--ml-transition, .2s ease);
    padding: 4px;
}
.ml-report-modal__close:hover,
.ml-report-modal__close:focus {
    color: var(--ml-text, #1e293b);
}

.ml-report-modal__title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ml-heading, #1a1a2e);
}

.ml-report-modal__desc {
    margin: 0 0 20px;
    font-size: 0.875rem;
    color: var(--ml-gray-500, #64748b);
    line-height: 1.5;
}

/* ── Report Form ───────────────────────────────────────────────────── */
.ml-report-form-group {
    margin-bottom: 16px;
}
.ml-report-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ml-gray-600, #475569);
    margin-bottom: 6px;
}
.ml-report-form-group .required {
    color: #dc2626;
}
.ml-report-form-group select,
.ml-report-form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ── Report Notices ────────────────────────────────────────────────── */
#ml-report-modal-notices .ml-notice {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
}
#ml-report-modal-notices .ml-notice--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
#ml-report-modal-notices .ml-notice--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Report Modal Actions ──────────────────────────────────────────── */
.ml-report-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.ml-report-modal__actions .ml-btn {
    flex: 1;
}
.ml-btn--report-submit {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.ml-btn--report-submit:hover,
.ml-btn--report-submit:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}
.ml-btn--report-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ml-report-modal {
        padding: 20px;
        border-radius: 10px;
        max-height: 85vh;
    }
    .ml-report-modal__title {
        font-size: 1.05rem;
    }
    .ml-report-modal__actions {
        flex-direction: column;
    }
    .ml-report-modal__actions .ml-btn {
        width: 100%;
    }
}

/* ── Videos — Public Profile Display ───────────── */
.ml-yt-section {
    max-width: 1200px;
    margin: 32px auto;
    padding: 0 20px;
}

.ml-yt-section .ml-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ml-heading, #1a1a2e);
    margin-bottom: 20px;
    text-align: center;
}

.ml-yt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ml-yt-card {
    background: var(--ml-card-bg, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ml-yt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ml-yt-card__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.ml-yt-card__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ml-yt-card__title {
    padding: 12px 14px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ml-body-text, #1e293b);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ml-yt-card__actions {
    padding: 0 14px 14px;
    display: flex;
    justify-content: center;
}

.ml-btn--yt-watch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff0000;
    color: #ffffff;
    border: 1px solid #ff0000;
    border-radius: var(--ml-btn-radius, 50px);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 7px 18px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.4;
}

.ml-btn--yt-watch:hover,
.ml-btn--yt-watch:focus-visible {
    background: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}

.ml-btn--yt-watch:active {
    background: #aa0000;
    border-color: #aa0000;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .ml-yt-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ml-yt-grid {
        grid-template-columns: 1fr;
    }

    .ml-yt-section {
        padding: 0 12px;
    }
}

/* ── View Public Page Button – Force White Text Everywhere ───────── */
.ml-view-public-page-btn,
.ml-view-public-page-btn:link,
.ml-view-public-page-btn:visited {
    color: #ffffff !important;
}

.ml-view-public-page-btn:hover,
.ml-view-public-page-btn:focus,
.ml-view-public-page-btn:focus-visible,
.ml-view-public-page-btn:active {
    color: #ffffff !important;
}

.ml-view-public-page-btn:disabled,
.ml-view-public-page-btn[disabled],
.ml-view-public-page-btn.is-disabled {
    color: #ffffff !important;
}

.ml-view-public-page-btn.ml-btn--primary,
.ml-view-public-page-btn.ml-btn--primary:hover,
.ml-view-public-page-btn.ml-btn--primary:focus,
.ml-view-public-page-btn.ml-btn--primary:focus-visible,
.ml-view-public-page-btn.ml-btn--primary:active,
.ml-view-public-page-btn.ml-btn--primary:visited {
    color: #ffffff !important;
}

.ml-view-public-page-btn.ml-btn--outline,
.ml-view-public-page-btn.ml-btn--outline:hover,
.ml-view-public-page-btn.ml-btn--outline:focus,
.ml-view-public-page-btn.ml-btn--outline:focus-visible,
.ml-view-public-page-btn.ml-btn--outline:active,
.ml-view-public-page-btn.ml-btn--outline:visited {
    color: #ffffff !important;
}

/* ── Tourist Places & Markets Sections (v3.4.16, layout v3.4.27) ────── */
/* Desktop: 3 columns | Tablet (≤900px): 2 columns | Mobile (≤600px): 1 column */
.ml-place-tourist-grid,
.ml-place-markets-grid,
.ml-place-emergency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
    align-items: stretch;
}

.ml-place-tourist-card,
.ml-place-market-card,
.ml-place-emergency-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ml-place-tourist-card:hover,
.ml-place-market-card:hover,
.ml-place-emergency-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.ml-place-tourist-card__image,
.ml-place-market-card__image,
.ml-place-emergency-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}

.ml-place-tourist-card__image img,
.ml-place-market-card__image img,
.ml-place-emergency-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body flex-grows so all cards in a row reach equal height */
.ml-place-tourist-card__body,
.ml-place-market-card__body,
.ml-place-emergency-card__body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ml-place-tourist-card__title,
.ml-place-market-card__title,
.ml-place-emergency-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px;
    line-height: 1.3;
}

.ml-place-tourist-card__desc,
.ml-place-market-card__desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 16px;
}

.ml-place-tourist-card__location,
.ml-place-market-card__location,
.ml-place-emergency-card__location {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ml-place-tourist-card__location::before,
.ml-place-market-card__location::before,
.ml-place-emergency-card__location::before {
    content: '\1F4CD';
    font-size: 0.75rem;
}

/* Push action button to the bottom of every card */
.ml-place-tourist-card__actions,
.ml-place-market-card__actions,
.ml-place-emergency-card__actions {
    margin-top: auto;
    padding-top: 16px;
}

.ml-place-tourist-card__btn,
.ml-place-market-card__btn,
.ml-place-emergency-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
    .ml-place-tourist-grid,
    .ml-place-markets-grid,
    .ml-place-emergency-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ml-place-tourist-card__body,
    .ml-place-market-card__body,
    .ml-place-emergency-card__body {
        padding: 16px;
    }

    .ml-place-tourist-card__title,
    .ml-place-market-card__title,
    .ml-place-emergency-card__title {
        font-size: 1.05rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
    .ml-place-tourist-grid,
    .ml-place-markets-grid,
    .ml-place-emergency-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ml-place-tourist-card__body,
    .ml-place-market-card__body,
    .ml-place-emergency-card__body {
        padding: 14px;
    }

    .ml-place-tourist-card__title,
    .ml-place-market-card__title,
    .ml-place-emergency-card__title {
        font-size: 1rem;
    }

    .ml-place-tourist-card__desc,
    .ml-place-market-card__desc {
        font-size: 0.85rem;
    }
}

/* ── Place Hierarchy — Breadcrumb, Parent Place, Sub Places (v3.4.30) ── */

.ml-place-breadcrumb {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 0;
    font-size: 13px;
}
.ml-place-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.ml-place-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ml-place-breadcrumb__sep {
    color: #adb5bd;
    font-size: 12px;
    line-height: 1;
}
.ml-place-breadcrumb__link {
    color: #495057;
    text-decoration: none;
    transition: color 0.15s;
}
.ml-place-breadcrumb__link:hover,
.ml-place-breadcrumb__link:focus {
    color: #0d6efd;
    text-decoration: underline;
}
.ml-place-breadcrumb__current {
    color: #6c757d;
    font-weight: 500;
}

/* Parent Place & Sub Places sections removed from UI (v3.5.3) */
.ml-place-parent-place,
.ml-place-parent-card-wrap,
.ml-place-parent-card,
.ml-place-sub-places {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive tweaks */
@media (max-width: 600px) {
    .ml-place-breadcrumb {
        font-size: 12px;
        padding: 8px 0;
    }
    .ml-place-parent-card-wrap {
        max-width: 100%;
    }
}

/* ── Legacy video wrap/actions rules removed in v3.4.31 (replaced by banner layout) ── */

/* ═══════════════════════════════════════════════════════════════════════════
   Search Location Selector  (v3.5.4)
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-location-search-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* Search wrap */
.ml-location-search-wrap {
    position: relative;
}
.ml-location-search-input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
    overflow: hidden;
}
.ml-location-search-input-wrap:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.ml-location-search-input-wrap__icon {
    padding: 0 10px 0 12px;
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    flex-shrink: 0;
}
.ml-location-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 10px 12px 10px 0;
    font-size: 0.95rem;
    background: transparent;
    min-width: 0;
}
.ml-location-search-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #dee2e6;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: ml-spin 0.7s linear infinite;
    margin-right: 10px;
    flex-shrink: 0;
}
@keyframes ml-spin { to { transform: rotate(360deg); } }

/* Dropdown */
.ml-location-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}
.ml-location-search-dropdown[hidden] { display: none; }
.ml-location-search-dropdown__item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.12s;
}
.ml-location-search-dropdown__item:hover,
.ml-location-search-dropdown__item[aria-selected="true"],
.ml-location-search-dropdown__item.ml-active {
    background: #e9f0ff;
}
.ml-location-search-dropdown__item:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}
.ml-location-search-dropdown__name {
    font-weight: 500;
    font-size: 0.92rem;
    color: #1a1a2e;
}
.ml-location-search-dropdown__breadcrumb {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.3;
}
.ml-location-search-dropdown__empty,
.ml-location-search-dropdown__loading,
.ml-location-search-dropdown__load-more {
    padding: 10px 14px;
    color: #6c757d;
    font-size: 0.88rem;
    text-align: center;
}
.ml-location-search-dropdown__load-more {
    cursor: pointer;
    color: #0d6efd;
    font-weight: 500;
}
.ml-location-search-dropdown__load-more:hover { text-decoration: underline; }

/* Selected card */
.ml-location-search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f0f7ff;
    border: 1.5px solid #b6d4fe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.ml-location-search-card--empty { display: none; }
.ml-location-search-card__info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.ml-location-search-card__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.ml-location-search-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ml-location-search-card__name {
    font-weight: 600;
    font-size: 0.93rem;
    color: #0a3d80;
    word-break: break-word;
}
.ml-location-status {
    font-size: 0.75rem;
    font-style: normal;
    padding: 1px 7px;
    border-radius: 20px;
    display: inline-block;
}
.ml-location-status--pending  { background: #fff3cd; color: #856404; }
.ml-location-status--approved { background: #d1e7dd; color: #0f5132; }
.ml-location-search-card__remove {
    flex-shrink: 0;
    background: none;
    border: 1.5px solid #dc3545;
    color: #dc3545;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ml-location-search-card__remove:hover {
    background: #dc3545;
    color: #fff;
}

.ml-location-search-hint {
    margin-top: 6px;
    font-size: 0.82rem;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 480px) {
    .ml-location-search-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .ml-location-search-card__remove { align-self: flex-end; }
    .ml-location-search-dropdown { max-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Correction Request Form  (v3.4.31)
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-place-correction-request .ml-cr-intro {
    color: #6b7280;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Card wrapper */
.ml-cr-form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Row layouts */
.ml-cr-form__row { display: flex; gap: 20px; }
.ml-cr-form__row--2col > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) {
    .ml-cr-form__row--2col { flex-direction: column; gap: 0; }
}

/* Form groups */
.ml-cr-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.ml-cr-form__group label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.ml-cr-required { color: #dc2626; margin-left: 2px; }
.ml-cr-optional { font-size: 12px; font-weight: 400; color: #9ca3af; }

/* Inputs */
.ml-cr-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    color: #111827;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    box-sizing: border-box;
}
.ml-cr-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.ml-cr-input.ml-cr-input--error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.ml-cr-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 36px; }
.ml-cr-textarea { resize: vertical; min-height: 110px; }

/* File drop zones */
.ml-cr-file-drop {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: #f9fafb;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ml-cr-file-drop:hover,
.ml-cr-file-drop.ml-cr-file-drop--over { border-color: #3b82f6; background: #eff6ff; }
.ml-cr-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.ml-cr-file-drop__ui { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.ml-cr-file-drop__ui svg { color: #9ca3af; }
.ml-cr-file-drop__ui span { font-size: 13px; color: #374151; font-weight: 500; }
.ml-cr-file-drop__ui small { font-size: 11px; color: #9ca3af; }

/* File preview thumbnails */
.ml-cr-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
    width: 100%;
}
.ml-cr-file-preview__item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid #e5e7eb;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #6b7280;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    word-break: break-all;
}
.ml-cr-file-preview__item img { width: 100%; height: 100%; object-fit: cover; }
.ml-cr-file-preview__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notice bar */
.ml-cr-form__notice {
    padding: 11px 16px;
    border-radius: 7px;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.ml-cr-form__notice--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ml-cr-form__notice--success  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Actions row */
.ml-cr-form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ml-cr-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    justify-content: center;
}
.ml-cr-submit-btn:disabled { opacity: .65; cursor: not-allowed; }
.ml-cr-cancel-btn { color: #6b7280; border-color: #d1d5db; }
.ml-cr-cancel-btn:hover { color: #374151; border-color: #9ca3af; }

/* Spinner animation */
.ml-cr-spinner {
    animation: ml-cr-spin .8s linear infinite;
}
@keyframes ml-cr-spin { to { transform: rotate(360deg); } }

/* Success state */
.ml-cr-success {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ml-cr-success h3 { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.ml-cr-success p  { font-size: 15px; color: #6b7280; margin: 0; max-width: 480px; line-height: 1.6; }

/* ── Guest login/register card ────────────────────────────────────────── */
.ml-cr-auth-card {
    background: #111827;
    color: #fff;
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}
.ml-cr-auth-card__icon { color: #9ca3af; }
.ml-cr-auth-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.ml-cr-auth-card__msg {
    font-size: 15px;
    color: #d1d5db;
    margin: 0;
    line-height: 1.6;
    max-width: 360px;
}
.ml-cr-auth-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.ml-cr-auth-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
}
.ml-cr-auth-btn:hover { opacity: .88; transform: translateY(-1px); }
.ml-cr-auth-btn--login {
    background: #fff;
    color: #111827;
}
.ml-cr-auth-btn--register {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.45);
}
.ml-cr-auth-btn--register:hover { border-color: #fff; }
@media (max-width: 480px) {
    .ml-cr-auth-card { padding: 36px 20px; }
    .ml-cr-auth-btn  { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Business Timing — Public Page Card  (v3.4.32)
   ═══════════════════════════════════════════════════════════════════ */

/* Outer wrapper — centres the card within the profile page */
.ml-bt-public-section {
    display: flex;
    justify-content: center;
    padding: 32px 20px 8px;
}

/* The premium card itself */
.ml-bt-public-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    padding: 32px 36px 28px;
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.ml-bt-public-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
    letter-spacing: -.01em;
}

/* Open / Closed status badge */
.ml-bt-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.ml-bt-status--open   { background: #dcfce7; color: #15803d; }
.ml-bt-status--closed { background: #fee2e2; color: #b91c1c; }
.ml-bt-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: ml-bt-pulse 2s infinite;
}
.ml-bt-status__dot--open   { background: #22c55e; }
.ml-bt-status__dot--closed { background: #ef4444; animation: none; }
@keyframes ml-bt-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .4; }
}

/* Schedule rows */
.ml-bt-public-schedule {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.ml-bt-public-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    font-size: .92rem;
    color: #374151;
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}
.ml-bt-public-row:last-child { border-bottom: none; }
.ml-bt-public-row--today {
    background: #f0fdf4;
    font-weight: 700;
    color: #15803d;
}
.ml-bt-public-day   { font-weight: 600; min-width: 100px; text-align: left; }
.ml-bt-public-hours { color: #4b5563; }
.ml-bt-public-row--today .ml-bt-public-hours { color: #15803d; }
.ml-bt-public-dash  { margin: 0 6px; color: #9ca3af; }
.ml-bt-public-closed { color: #9ca3af; font-style: italic; }
.ml-bt-public-card__empty { color: #9ca3af; font-size: .9rem; margin: 8px 0 0; }

/* Mobile */
@media (max-width: 480px) {
    .ml-bt-public-card      { padding: 24px 16px 20px; border-radius: 12px; }
    .ml-bt-public-row       { padding: 10px 14px; font-size: .88rem; }
    .ml-bt-public-day       { min-width: 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Place Timing Section (v3.7.5)
   ═══════════════════════════════════════════════════════════════════════════════ */
.ml-place-timing-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ml-place-timing-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 10px;
    color: #0284c7;
}
.ml-place-timing-card__body {
    flex: 1;
    min-width: 0;
}

/* 24x7 display */
.ml-place-timing-24x7 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.ml-place-timing-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    width: fit-content;
}
.ml-place-timing-badge--open {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
}
.ml-place-timing-note {
    font-size: 0.88rem;
    color: #6b7280;
}

/* Day-by-day timing list */
.ml-place-timing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ml-place-timing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
}
.ml-place-timing-item:last-child {
    border-bottom: none;
}
.ml-place-timing-item--closed {
    color: #9ca3af;
}
.ml-place-timing-day {
    font-weight: 600;
    color: #1f2937;
    min-width: 110px;
}
.ml-place-timing-item--closed .ml-place-timing-day {
    color: #9ca3af;
}
.ml-place-timing-hours {
    color: #4b5563;
    text-align: right;
}
.ml-place-timing-item--closed .ml-place-timing-hours {
    font-style: italic;
    color: #9ca3af;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .ml-place-timing-card {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .ml-place-timing-card__icon {
        width: 44px;
        height: 44px;
    }
    .ml-place-timing-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }
    .ml-place-timing-day {
        min-width: auto;
        font-size: 0.9rem;
    }
    .ml-place-timing-hours {
        text-align: left;
        font-size: 0.9rem;
    }
}

/* ── Entry Fees Section (v3.7.6) ──────────────────────────────────────── */
.ml-place-entry-fees-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.ml-place-entry-fees-card__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: #f0fdf4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
}
.ml-place-entry-fees-card__body {
    flex: 1;
    min-width: 0;
}
/* Fee rows list */
.ml-place-entry-fees-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}
.ml-place-entry-fees-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.ml-place-entry-fees-item:last-child {
    border-bottom: none;
}
.ml-place-entry-fees-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.95rem;
    min-width: 140px;
}
.ml-place-entry-fees-value {
    color: #1d4ed8;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: right;
}
/* Additional notes */
.ml-place-entry-fees-notes {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border-left: 3px solid #16a34a;
    border-radius: 0 8px 8px 0;
}
.ml-place-entry-fees-notes__heading {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin: 0 0 6px;
}
.ml-place-entry-fees-notes__text {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}
/* Mobile responsive */
@media (max-width: 640px) {
    .ml-place-entry-fees-card {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .ml-place-entry-fees-card__icon {
        width: 44px;
        height: 44px;
    }
    .ml-place-entry-fees-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0;
    }
    .ml-place-entry-fees-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    .ml-place-entry-fees-value {
        text-align: left;
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Advanced Timing Card – Public (v3.7.7)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Open Now / Closed Now status pill */
.ml-adv-timing-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}
.ml-adv-timing-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ml-adv-timing-status--open {
    background: #dcfce7;
    color: #15803d;
}
.ml-adv-timing-status--open .ml-adv-timing-status__dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.2);
    animation: ml-pulse-green 2s infinite;
}
.ml-adv-timing-status--closed {
    background: #fee2e2;
    color: #b91c1c;
}
.ml-adv-timing-status--closed .ml-adv-timing-status__dot {
    background: #dc2626;
}
.ml-adv-timing-status--unknown {
    background: #f1f5f9;
    color: #64748b;
}
.ml-adv-timing-status--unknown .ml-adv-timing-status__dot {
    background: #94a3b8;
}
@keyframes ml-pulse-green {
    0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(22,163,74,0.08); }
}

/* Advanced timing card wrapper */
.ml-adv-timing-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Weekly schedule list */
.ml-adv-timing-week {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ml-adv-timing-day {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
    gap: 12px;
}
.ml-adv-timing-day:last-child { border-bottom: none; }
.ml-adv-timing-day--today {
    background: linear-gradient(90deg,#f0f9ff 0%,transparent 100%);
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 -10px;
}
.ml-adv-timing-day--closed { color: #9ca3af; }
.ml-adv-timing-day__name {
    font-weight: 700;
    color: #1f2937;
    min-width: 110px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ml-adv-timing-day--closed .ml-adv-timing-day__name { color: #9ca3af; }
.ml-adv-timing-today-badge {
    background: #0ea5e9;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ml-adv-timing-day__hours {
    color: #374151;
    text-align: right;
    flex: 1;
}
.ml-adv-timing-slots {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.ml-adv-timing-slot {
    display: block;
    font-variant-numeric: tabular-nums;
}
.ml-adv-timing-closed-badge {
    display: inline-block;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}
.ml-adv-timing-unknown { color: #9ca3af; }

/* Holiday section */
.ml-adv-timing-holidays {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed #e2e8f0;
}
.ml-adv-timing-holidays__title {
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 12px;
}
.ml-adv-timing-holidays__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ml-adv-timing-holiday-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    flex-wrap: wrap;
}
.ml-adv-timing-holiday-item--closed { background: #fff5f5; border-color: #fecaca; }
.ml-adv-timing-holiday-item__name { font-weight: 700; color: #1f2937; }
.ml-adv-timing-holiday-item__date { color: #64748b; font-size: 0.85rem; }
.ml-adv-timing-holiday-item__hours { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Responsive */
@media (max-width: 640px) {
    .ml-adv-timing-card { padding: 16px 14px; }
    .ml-adv-timing-day { flex-direction: column; gap: 4px; }
    .ml-adv-timing-day__hours { text-align: left; }
    .ml-adv-timing-slots { align-items: flex-start; }
    .ml-adv-timing-day__name { min-width: unset; }
    .ml-adv-timing-holiday-item { flex-direction: column; align-items: flex-start; }
    .ml-adv-timing-holiday-item__hours { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Add New Place — Timing Form Card  (v3.7.7)
   ═══════════════════════════════════════════════════════════════════ */
.ml-timing-form-card,
.ml-entry-fees-form-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    overflow: hidden;
    margin-top: 6px;
}

.ml-timing-form-card__header,
.ml-entry-fees-form-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ml-timing-form-card__icon svg,
.ml-entry-fees-form-card__icon svg {
    display: block;
    color: #0f3460;
}

.ml-timing-form-card__title,
.ml-entry-fees-form-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.ml-timing-form-card__body,
.ml-entry-fees-form-card__body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 24×7 checkbox */
.ml-timing-form-24x7 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #334155;
    font-size: .9rem;
    cursor: pointer;
}
.ml-timing-form-24x7 input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Day rows */
.ml-timing-form-days {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: opacity .2s, pointer-events .2s;
}

.ml-timing-day-row {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}
.ml-timing-day-row:last-child { border-bottom: none; }
.ml-timing-day-row:nth-child(even) { background: #f8fafc; }

.ml-timing-day-row__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.ml-timing-day-row__name {
    font-weight: 700;
    font-size: .88rem;
    color: #1a1a2e;
    min-width: 100px;
}

.ml-timing-day-row__status-wrap {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ml-timing-status-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    cursor: pointer;
    color: #475569;
    background: #fff;
    transition: background .15s, color .15s, border-color .15s;
}
.ml-timing-status-option:has(input:checked) {
    background: #0f3460;
    color: #fff;
    border-color: #0f3460;
}
.ml-timing-status-option input[type="radio"] {
    display: none;
}

/* Time slot rows */
.ml-timing-day-row__slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ml-timing-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ml-timing-time-input {
    width: 130px !important;
    min-width: 0;
    padding: 6px 10px !important;
    font-size: .88rem !important;
}

.ml-timing-slot-sep {
    color: #94a3b8;
    font-weight: 700;
    font-size: .95rem;
}

.ml-timing-add-slot {
    font-size: .8rem !important;
    padding: 4px 12px !important;
    align-self: flex-start;
}

/* Entry Fees grid */
.ml-entry-fees-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 16px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ml-timing-day-row__head { flex-direction: column; align-items: flex-start; }
    .ml-timing-time-input { width: 110px !important; }
    .ml-entry-fees-form-grid { grid-template-columns: 1fr; }
}

/* ── Section empty-state message ────────────────────────────────── */
.ml-place-section__empty {
    color: #64748b;
    font-style: italic;
    font-size: .95rem;
    padding: 12px 0;
    margin: 0;
}

/* ── Entry Fees — ₹ prefix input group (My Account form) ────────── */
.ml-fee-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ml-fee-currency-prefix {
    position: absolute;
    left: 10px;
    font-weight: 700;
    font-size: .95rem;
    color: #334155;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
.ml-fee-input {
    padding-left: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Modern Timing Table  (v3.7.8)
   ═══════════════════════════════════════════════════════════════════ */
.ml-timing-table-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 24px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.ml-timing-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}
.ml-timing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    text-align: left;
}
.ml-timing-table thead tr {
    background: #f1f5f9;
}
.ml-timing-table thead th {
    padding: 11px 16px;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.ml-timing-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}
.ml-timing-table tbody tr:last-child { border-bottom: none; }
.ml-timing-table tbody tr:hover { background: #f8fafc; }
.ml-timing-table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: #334155;
}
.ml-timing-table__day {
    font-weight: 600;
    white-space: nowrap;
    min-width: 110px;
}
.ml-timing-table__row--today td { background: #eff6ff; }
.ml-timing-table__row--today .ml-timing-table__day { color: #2563eb; }
.ml-timing-table__row--closed td { color: #9ca3af; }
/* Today pill */
.ml-timing-today-pill {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: .03em;
}
/* Status pills */
.ml-timing-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.ml-timing-status-pill--open   { background: #dcfce7; color: #15803d; }
.ml-timing-status-pill--closed { background: #fee2e2; color: #b91c1c; }
.ml-timing-status-pill--24h    { background: #dbeafe; color: #1d4ed8; }
/* Inline badges (cell content) */
.ml-timing-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
}
.ml-timing-badge--closed { background: #fee2e2; color: #b91c1c; }
.ml-timing-badge--24h    { background: #dbeafe; color: #1d4ed8; }
.ml-timing-cell--dash    { color: #cbd5e1; }

/* ── Responsive: stack table rows on mobile ─── */
@media (max-width: 600px) {
    .ml-timing-table-card { padding: 16px 12px; }
    .ml-timing-table thead { display: none; }
    .ml-timing-table,
    .ml-timing-table tbody,
    .ml-timing-table tr,
    .ml-timing-table td { display: block; width: 100%; }
    .ml-timing-table tr {
        margin-bottom: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        padding: 4px 0;
    }
    .ml-timing-table tr:last-child { margin-bottom: 0; }
    .ml-timing-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
        border-bottom: 1px solid #f1f5f9;
        font-size: .88rem;
    }
    .ml-timing-table td:last-child { border-bottom: none; }
    .ml-timing-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-right: 10px;
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Modern Entry Fees Table  (v3.7.8)
   ═══════════════════════════════════════════════════════════════════ */
.ml-fees-table-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 24px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.ml-fees-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}
.ml-fees-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.ml-fees-table thead tr {
    background: #f1f5f9;
}
.ml-fees-table thead th {
    padding: 11px 16px;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}
.ml-fees-table thead th.ml-fees-table__amount,
.ml-fees-table td.ml-fees-table__amount {
    text-align: right;
    white-space: nowrap;
}
.ml-fees-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}
.ml-fees-table tbody tr:last-child { border-bottom: none; }
.ml-fees-table tbody tr:hover { background: #f8fafc; }
.ml-fees-table td {
    padding: 12px 16px;
    vertical-align: middle;
    color: #334155;
}
.ml-fees-table td.ml-fees-table__amount {
    font-weight: 700;
    color: #0f172a;
    font-size: 1rem;
}
/* Additional notes below table */
.ml-fees-table-notes {
    margin-top: 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border-left: 3px solid #2563eb;
    border-radius: 0 8px 8px 0;
}
.ml-fees-table-notes__heading {
    font-weight: 700;
    font-size: .88rem;
    color: #1e40af;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ml-fees-table-notes__text {
    color: #475569;
    font-size: .9rem;
    margin: 0;
    line-height: 1.6;
}
/* ── Responsive: stack fee rows on mobile ─── */
@media (max-width: 600px) {
    .ml-fees-table-card { padding: 16px 12px; }
    .ml-fees-table thead { display: none; }
    .ml-fees-table,
    .ml-fees-table tbody,
    .ml-fees-table tr,
    .ml-fees-table td { display: block; width: 100%; }
    .ml-fees-table tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        border-bottom: 1px solid #f1f5f9;
    }
    .ml-fees-table tr:last-child { border-bottom: none; }
    .ml-fees-table td { padding: 0; border: none; }
    .ml-fees-table td.ml-fees-table__amount { font-size: .95rem; }
}

/* ── Multi-Address Table — Modern Responsive Design (v3.8.0) ───────────── */

/* Outer wrapper — full width, no overflow clip so sticky header works */
.ml-addr-wrap {
  width: 100%;
}

/* Card container — rounded corners, soft shadow, white background */
.ml-addr-table-card {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Inner scroll container — allows horizontal scroll on very narrow screens
   without clipping the card shadow */
.ml-addr-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table base */
.ml-addr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  line-height: 1.55;
  min-width: 520px;
}

/* Sticky header */
.ml-addr-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.ml-addr-table thead tr {
  background: #1a1a1a;
}
.ml-addr-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: none;
}

/* Body rows */
.ml-addr-table td {
  padding: 14px 20px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}
.ml-addr-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra striping */
.ml-addr-table tbody tr:nth-child(odd) {
  background: #fafafa;
}
.ml-addr-table tbody tr:nth-child(even) {
  background: #fff;
}

/* Row hover */
.ml-addr-table tbody tr:hover {
  background: #f3f4f6;
  transition: background .15s;
}

/* Address Title cell — bold */
.ml-addr-title-text {
  font-weight: 600;
  color: #111;
}

/* Contact number */
.ml-addr-contact-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Em-dash placeholder */
.ml-addr-empty {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1;
}

/* View Map button — black bg, white text, rounded, icon + label */
.ml-addr-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  background: #000;
  color: #fff !important;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.ml-addr-map-btn__icon {
  flex-shrink: 0;
}
.ml-addr-map-btn:hover,
.ml-addr-map-btn:focus {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  text-decoration: none !important;
  color: #fff !important;
}
.ml-addr-map-btn:active {
  transform: translateY(0);
}

/* Mobile stacked cards — hidden on desktop */
.ml-addr-cards {
  display: none;
}

/* ── Mobile (≤ 640 px) ── */
@media (max-width: 640px) {
  .ml-addr-table-card { display: none; }
  .ml-addr-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ml-addr-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
    padding: 18px 16px;
    overflow: hidden;
  }
  .ml-addr-card__title {
    font-weight: 700;
    font-size: 1rem;
    color: #111;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  .ml-addr-card__address {
    color: #444;
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  .ml-addr-card__row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: .88rem;
    color: #555;
    margin-bottom: 8px;
  }
  .ml-addr-card__label {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
  }
  .ml-addr-card__value {
    font-variant-numeric: tabular-nums;
  }
  .ml-addr-card__actions {
    margin-top: 10px;
  }
  .ml-addr-map-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: .9rem;
  }
}

/* ── Tablet (641 px – 1024 px) ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .ml-addr-table th,
  .ml-addr-table td {
    padding: 12px 14px;
  }
}

/* ── Section Dividers (v3.8.3) ── */
.ml-section-divider {
  width: 100%;
  margin: 35px 0;
  position: relative;
}

.ml-section-divider__line {
  width: 100%;
  height: 2px;
  background: #000000;
  border-radius: 2px;
}

/* Mobile: responsive margins */
@media (max-width: 640px) {
  .ml-section-divider {
    margin: 30px 0;
  }
}

/* Tablet: consistent spacing */
@media (min-width: 641px) and (max-width: 1024px) {
  .ml-section-divider {
    margin: 35px 0;
  }
}


/* ── Multiple Directory selection (v4.1.7) ─────────────────────────────── */
.ml-directory-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.ml-directory-selection__item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}
.ml-directory-selection__item input {
    margin: 0;
    flex: 0 0 auto;
}