/* =====================================================
   XPENG GURU – Additional CSS
   Last updated: 2026-06-05
   Stack: Blocksy Pro + Kadence Blocks + Gutenberg

   Sections:
   0. Custom palette extensions (Color 10+)
   1. Header background fix
   1b. Header menu link contrast (dropdown + inactive)
   1c. Header search modal (Blocksy)
   2. Complianz cookie banner overrides
   3. Mobile: Hide TOC column (< 768px)
   4. Image classes (xg-mobile-screenshot, xg-screenshot-pair)
   5. 404 page fix (safety net – Content Block handles primary styling)
   6. Article layout helpers (xg-muted-panel)
   7. Callouts (xg-callout-tip, xg-callout-warning, xg-callout-note)
   8. Sticky Desktop TOC
   9. Global Link Styles (No Underlines)
   ===================================================== */


/* ==============================================
   0. CUSTOM PALETTE EXTENSIONS
   Colors 1–9 follow Blocksy's default conventions.
   Colors 10+ are custom brand additions not covered
   by Blocksy's 9-slot palette.
   Ref: https://creativethemes.com/blocksy/docs/general-options/colors/
   ============================================== */
:root {
    --theme-palette-color-10: #ff6900; /* Orange CTA – brand highlight */
}


/* ==============================================
   1. HEADER BACKGROUND FIX
   With the palette now correctly aligned, Color 8 is
   the "lighter alternative" header background – a subtle
   shade close to Color 7. The Blocksy Header Builder row
   has been set to Color 7 (site background) in the UI.
   This CSS rule is a safety net in case Blocksy's
   global.css overrides the header row background.
   ============================================== */
.ct-header,
.ct-header [data-row],
[data-header*="type-1"] .ct-header [data-row*="middle"] {
    background-color: var(--theme-palette-color-7) !important;
}


/* ==============================================
   1b. HEADER MENU - link contrast (light + dark)
   Blocksy dropdowns inherit muted Color 9 on a pale panel -
   unreadable in light mode. Use heading/body palette slots instead.
   ============================================== */

/* Top-level header links */
.ct-header [data-id="menu"] > ul > li > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li > .ct-sub-menu-parent > .ct-menu-link {
    color: var(--theme-palette-color-4) !important;
}

.ct-header [data-id="menu"] > ul > li > .ct-menu-link:hover,
.ct-header [data-id="menu"] > ul > li > .ct-sub-menu-parent > .ct-menu-link:hover,
.ct-header [data-id="menu"] > ul > li.current-menu-item > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link {
    color: var(--theme-palette-color-1) !important;
}

/* Dropdown panels */
.ct-header [data-id="menu"] .sub-menu {
    background-color: var(--theme-palette-color-8) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
}

/* Dropdown links (inactive) - Color 4, not muted Color 9 */
.ct-header [data-id="menu"] .sub-menu .ct-menu-link {
    color: var(--theme-palette-color-4) !important;
}

.ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover,
.ct-header [data-id="menu"] .sub-menu .current-menu-item > .ct-menu-link,
.ct-header [data-id="menu"] .sub-menu .current-menu-ancestor > .ct-menu-link {
    color: var(--theme-palette-color-1) !important;
}

/* Mobile off-canvas menu (same palette rules) */
#offcanvas .ct-menu-link {
    color: var(--theme-palette-color-4) !important;
}

#offcanvas .ct-menu-link:hover,
#offcanvas .current-menu-item > .ct-menu-link,
#offcanvas .current-menu-ancestor > .ct-menu-link {
    color: var(--theme-palette-color-1) !important;
}


/* ==============================================
   1c. HEADER SEARCH MODAL (Blocksy)
   Default modal field is transparent — page cards show through the
   input. Solid surface + dimmed scrim; palette tokens only.
   ============================================== */
/* Full-viewport scrim — solid enough that cards no longer show through the field */
#search-modal.ct-panel.active {
    background-color: rgba(0, 0, 0, 0.62) !important;
}
[data-color-mode="light"] #search-modal.ct-panel.active {
    background-color: rgba(246, 247, 248, 0.82) !important;
}
#search-modal.ct-panel::before {
    background: transparent !important;
}

#search-modal .ct-panel-content {
    max-width: min(720px, calc(100vw - 2rem)) !important;
    width: 100% !important;
    margin-inline: auto !important;
}

#search-modal .ct-search-form-inner.ct-pseudo-input,
#search-modal .ct-search-form-inner {
    background-color: var(--theme-palette-color-7) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
    border-radius: 4px !important;
}

#search-modal .ct-search-form .modal-field,
#search-modal input.modal-field[type="search"] {
    background-color: transparent !important;
    color: var(--theme-palette-color-4) !important;
    caret-color: var(--theme-palette-color-1) !important;
}

#search-modal .ct-search-form .modal-field::placeholder,
#search-modal input.modal-field[type="search"]::placeholder {
    color: var(--theme-palette-color-9) !important;
    opacity: 1 !important;
}

#search-modal .ct-search-form .wp-element-button {
    background-color: var(--theme-palette-color-1) !important;
    border-color: var(--theme-palette-color-1) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

#search-modal .ct-search-form .wp-element-button:hover {
    background-color: var(--theme-palette-color-2) !important;
    border-color: var(--theme-palette-color-2) !important;
}

#search-modal .ct-search-form .wp-element-button .ct-icon,
#search-modal .ct-search-form .wp-element-button svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

#search-modal .ct-toggle-close {
    color: var(--theme-palette-color-4) !important;
}
#search-modal .ct-toggle-close .ct-icon,
#search-modal .ct-toggle-close svg,
#search-modal .ct-toggle-close path {
    fill: var(--theme-palette-color-4) !important;
    color: var(--theme-palette-color-4) !important;
}
#search-modal .ct-toggle-close:hover {
    color: var(--theme-palette-color-1) !important;
}
#search-modal .ct-toggle-close:hover .ct-icon,
#search-modal .ct-toggle-close:hover svg,
#search-modal .ct-toggle-close:hover path {
    fill: var(--theme-palette-color-1) !important;
}

/* Live-results dropdown under the field — single-column list, aligned thumbs */
#search-modal [class*="ct-search-results"],
#search-modal .ct-search-results {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    margin-top: 0.65rem !important;
    padding: 0.35rem 0 !important;
    max-height: min(70vh, 480px) !important;
    overflow-y: auto !important;
    background-color: var(--theme-palette-color-7) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
    border-radius: 4px !important;
    color: var(--theme-palette-color-3) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-palette-color-5) transparent;
}

#search-modal .ct-search-results::-webkit-scrollbar {
    width: 6px;
}
#search-modal .ct-search-results::-webkit-scrollbar-thumb {
    background-color: var(--theme-palette-color-5);
    border-radius: 4px;
}
#search-modal .ct-search-results::-webkit-scrollbar-track {
    background: transparent;
}

#search-modal .ct-search-results .ct-search-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.7rem 1rem !important;
    margin: 0 !important;
    color: var(--theme-palette-color-4) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--theme-palette-color-5) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#search-modal .ct-search-results .ct-search-item:last-of-type {
    border-bottom: none !important;
}

#search-modal .ct-search-results .ct-search-item:hover,
#search-modal .ct-search-results .ct-search-item:focus {
    background-color: var(--theme-palette-color-6) !important;
    color: var(--theme-palette-color-1) !important;
}

/* Fixed thumb slot so titles align when some items have no image */
#search-modal .ct-search-results .ct-search-item .ct-media-container {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background-color: var(--theme-palette-color-6) !important;
}

#search-modal .ct-search-results .ct-search-item .ct-media-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

#search-modal .ct-search-results .ct-search-item > span:not(.ct-media-container) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

/* Placeholder square when Blocksy omits the media container (no usable image) */
#search-modal .ct-search-results .ct-search-item:not(:has(.ct-media-container))::before {
    content: "" !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 4px !important;
    background-color: var(--theme-palette-color-6) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A979E' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='M3 16l5-4 4 3 4-5 5 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}

#search-modal .ct-search-results .ct-search-more {
    display: block !important;
    text-align: center !important;
    padding: 0.75rem 1rem 0.55rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--theme-palette-color-5) !important;
    color: var(--theme-palette-color-9) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#search-modal .ct-search-results .ct-search-more:hover,
#search-modal .ct-search-results .ct-search-more:focus {
    color: var(--theme-palette-color-1) !important;
}

/* ==============================================
   1d. SEARCH ARCHIVE CARDS (/?s= …)
   Align Blocksy search cards with hub 16:9 standard.
   ============================================== */
.search .entries[data-layout] {
    gap: 1.5rem !important;
}
.search .entries .entry-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    background-color: var(--theme-palette-color-6) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
[data-color-mode="dark"] .search .entries .entry-card {
    background-color: var(--theme-palette-color-5) !important;
    border-color: var(--theme-palette-color-6) !important;
}

/* Hub-standard 16:9 media frame (beats Blocksy inline aspect-ratio).
   Inset + radius on all four corners. Blocksy `.boundless-image` zeros the
   bottom radii and pulls the thumb edge-to-edge — override both. */
.search .entries .entry-card > .ct-media-container,
.search .entries .entry-card > .ct-media-container.boundless-image {
    display: block !important;
    width: calc(100% - 1.5rem) !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    margin: 0.75rem 0.75rem 0 !important;
    margin-inline: 0.75rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    border-start-start-radius: 6px !important;
    border-start-end-radius: 6px !important;
    border-end-start-radius: 6px !important;
    border-end-end-radius: 6px !important;
    background-color: var(--theme-palette-color-5) !important;
}
.search .entries .entry-card > .ct-media-container img,
.search .entries .entry-card > .ct-media-container.boundless-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 6px !important;
}

/* Release notes without a thumb: skip empty 16:9 slot (hub art is assigned via API). */
.search .entries .entry-card.type-release_note:not(.has-post-thumbnail)::before {
    display: none !important;
}

/* Reserve 16:9 slot when there is no featured image.
   Avoid :has() — WP Customizer CSS sanitizer strips it.
   Contrast vs card fill: light cards use color-5; dark cards are color-5 so
   use color-6 there (same-on-same was invisible). */
.search .entries .entry-card:not(.has-post-thumbnail)::before {
    content: "" !important;
    display: block !important;
    width: calc(100% - 1.5rem) !important;
    aspect-ratio: 16 / 9 !important;
    flex-shrink: 0 !important;
    margin: 0.75rem 0.75rem 0 !important;
    border-radius: 6px !important;
    background-color: var(--theme-palette-color-5) !important;
    background-image: linear-gradient(
        135deg,
        var(--theme-palette-color-5) 0%,
        var(--theme-palette-color-6) 100%
    ) !important;
}
[data-color-mode="dark"] .search .entries .entry-card:not(.has-post-thumbnail)::before {
    background-color: var(--theme-palette-color-6) !important;
    background-image: linear-gradient(
        135deg,
        var(--theme-palette-color-6) 0%,
        var(--theme-palette-color-5) 100%
    ) !important;
}

/* Search-again form on pages with hits (empty search already has Blocksy’s form). */
.search .xg-search-again {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto 1.75rem !important;
}
.search .xg-search-again .ct-search-form,
.search .xg-search-again .search-form,
.search .xg-search-again form {
    width: 100% !important;
}
.search .xg-search-again input[type="search"],
.search .xg-search-again .ct-search-form input[type="search"] {
    min-height: 52px !important;
    font-size: 1.05rem !important;
}

.search .entries .entry-card .entry-meta {
    display: none !important;
}
.search .entries .entry-card .entry-title {
    padding: 16px 20px 0 !important;
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
}
.search .entries .entry-card .entry-title a {
    color: var(--theme-palette-color-4) !important;
    text-decoration: none !important;
}
.search .entries .entry-card .entry-title a:hover {
    color: var(--theme-palette-color-1) !important;
}
.search .entries .entry-card .entry-excerpt {
    padding: 8px 20px 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    color: var(--theme-palette-color-3) !important;
}
.search .entries .entry-card .entry-excerpt p {
    margin: 0 !important;
}
/* Relevanssi wraps hits in <mark> — make them readable on dark/light cards */
.search .entries .entry-card mark {
    color: var(--theme-palette-color-10) !important;
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--theme-palette-color-10) 16%, transparent) !important;
    padding: 0 0.15em !important;
    border-radius: 2px !important;
}
.search .entries .entry-card .entry-title mark {
    color: var(--theme-palette-color-10) !important;
    font-weight: 700 !important;
    background: transparent !important;
}
.search .entries .entry-card .entry-button {
    margin: 16px 20px 20px !important;
}


/* ==============================================
   2. COMPLIANZ COOKIE BANNER
   Color 9 (muted/secondary text) is used for banner text
   since cookie consent is a secondary UI element.
   ============================================== */

/* 2a. Consent Banner */
.cmplz-cookiebanner {
    background-color: var(--theme-palette-color-7) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}
.cmplz-cookiebanner .cmplz-title {
    color: var(--theme-palette-color-4) !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p {
    color: var(--theme-palette-color-3) !important;
}

/* Accept button – text is #ffffff by design: green bg (Color 1) never changes in dark/light mode */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background-color: var(--theme-palette-color-1) !important;
    border-color: var(--theme-palette-color-1) !important;
    color: #ffffff !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
    background-color: var(--theme-palette-color-2) !important;
    border-color: var(--theme-palette-color-2) !important;
}

/* Secondary buttons (Deny, Preferences, Save) */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
    background-color: transparent !important;
    border-color: var(--theme-palette-color-5) !important;
    color: var(--theme-palette-color-3) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
    background-color: transparent !important;
    border-color: var(--theme-palette-color-1) !important;
    color: var(--theme-palette-color-1) !important;
}

.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-link {
    color: var(--theme-palette-color-1) !important;
}
.cmplz-cookiebanner .cmplz-close svg,
.cmplz-cookiebanner .cmplz-close path {
    fill: var(--theme-palette-color-9) !important;
}

/* 2b. Floating Manage Consent Button — colors + kill Complianz slide animations.
   mc_slideIn/Out (0.5s) on hover/focus moves the control under the cursor and
   Edge often toggles the dialog open/closed several times per click. Same peek
   offset; snap instantly instead of animating. */
#cmplz-manage-consent .cmplz-manage-consent {
    background-color: var(--theme-palette-color-7) !important;
    color: var(--theme-palette-color-3) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    animation: none !important;
    transition: none !important;
    bottom: var(--cmplz-manage-consent-offset, -35px) !important;
}
#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible,
#cmplz-manage-consent .cmplz-manage-consent:active {
    border-color: var(--theme-palette-color-1) !important;
    color: var(--theme-palette-color-1) !important;
    animation: none !important;
    transition: none !important;
    bottom: 0 !important;
}
/* Edge: Complianz leaves .cmplz-hidden (display:none !important) when cached
   banner CSS skips onload. Beat that so show/dismiss classes actually paint. */
.cmplz-cookiebanner.cmplz-show {
    display: grid !important;
}
#cmplz-manage-consent .cmplz-manage-consent.cmplz-show {
    display: block !important;
}
/* 2c. Preferences Modal */
#cmplz-manage-consent-container.cmplz-manage-consent-container {
    background-color: var(--theme-palette-color-7) !important;
    color: var(--theme-palette-color-3) !important;
}

/* Remove grey background from category rows – make transparent */
.cmplz-cookiebanner .cmplz-categories .cmplz-category,
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header,
#cmplz-manage-consent-container .cmplz-categories .cmplz-category,
#cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header,
#cmplz-cookies-overview .cmplz-dropdown summary,
#cmplz-document .cmplz-dropdown summary {
    background-color: transparent !important;
    color: var(--theme-palette-color-3) !important;
}

/* Separator lines between transparent category rows */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
    border-bottom: 1px solid var(--theme-palette-color-5) !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
    color: var(--theme-palette-color-1) !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
    background: transparent !important;
    color: var(--theme-palette-color-3) !important;
}
.cmplz-category-title {
    color: var(--theme-palette-color-4) !important;
}

/* 2d. Cookie Policy Page */
#cmplz-document,
#cmplz-document p,
#cmplz-document span,
#cmplz-document li {
    color: var(--theme-palette-color-3) !important;
}
#cmplz-document a         { color: var(--theme-palette-color-1) !important; }
#cmplz-document a:visited { color: var(--theme-palette-color-2) !important; }

#cmplz-cookies-overview .cmplz-dropdown,
#cmplz-document .cmplz-dropdown,
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div,
#cmplz-document .cmplz-dropdown .cookies-per-purpose div,
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose,
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
    background-color: unset !important;
}
#cmplz-cookies-overview .cmplz-dropdown summary p,
#cmplz-document .cmplz-dropdown summary p {
    color: var(--theme-palette-color-3) !important;
    font-weight: 500;
}

/* 2e. Focus Ring Fix */
.cmplz-cookiebanner,
#cmplz-manage-consent-container,
.cmplz-manage-consent {
    --theme-form-focus-color: transparent !important;
    --theme-palette-color-focus: transparent !important;
}
.cmplz-cookiebanner *,
#cmplz-manage-consent-container * {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Remove checkbox focus/active box-shadow */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before,
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:active + .cmplz-label:before,
input[type="checkbox"]:focus + .cmplz-label:before,
input[type="checkbox"]:active + .cmplz-label:before {
    box-shadow: none !important;
}


/* ==============================================
   3. MOBILE: Hide TOC column below 768px
   ============================================== */
@media (max-width: 767px) {

    /* Hide TOC block */
    .wp-block-kadence-tableofcontents {
        display: none !important;
    }

    /* Hide the entire TOC column so it doesn't leave empty space.
       NOTE: .kadence-column992_fbda9d-5b is an auto-generated Kadence
       class tied to Article Master (post ID 992). If the template is
       ever regenerated or rebuilt, this class name may change. */
    .kadence-column992_fbda9d-5b {
        display: none !important;
    }

    /* Stack screenshot pairs on mobile */
    .xg-screenshot-pair {
        grid-template-columns: 1fr;
    }

}


/* ==============================================
   4. IMAGE CLASSES
   ============================================== */

/* Mobile app screenshot: narrow and centered */
.xg-mobile-screenshot {
    display: flex;
    justify-content: center;
}
.xg-mobile-screenshot img,
.xg-mobile-screenshot figure {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
}

/* Two screenshots side by side (stacks on mobile via section 3) */
.xg-screenshot-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.xg-screenshot-pair img,
.xg-screenshot-pair figure {
    width: 100% !important;
    height: auto !important;
}

/* Visiting HQ - three photos in one row (matches legacy Kadence 3-column rows) */
.entry-content .wp-block-group.xg-article-media-trio,
.entry-content .xg-article-media-trio.wp-block-group,
.entry-content .xg-article-media-trio {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: min(60%, 720px);
    width: 100%;
    margin-inline: auto;
}
.entry-content .xg-article-media-trio__cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.entry-content .xg-article-media-trio .wp-block-image,
.entry-content .xg-article-media-trio > figure.wp-block-image,
.entry-content .xg-article-media-trio .wp-block-image.xg-article-image,
.entry-content .xg-article-media-trio__cell .wp-block-image,
.entry-content .xg-article-media-trio__cell > figure.wp-block-image {
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    display: block !important;
    float: none !important;
}
.entry-content .xg-article-media-trio .wp-block-image img,
.entry-content .xg-article-media-trio__cell .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    cursor: zoom-in;
}
.entry-content .xg-article-media-trio__credit {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--theme-palette-color-3);
}
@media (max-width: 781px) {
    /* Legacy Kadence rows stayed 3-up on mobile (kt-mobile-layout-row) */
    .entry-content .wp-block-group.xg-article-media-trio,
    .entry-content .xg-article-media-trio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        max-width: 92%;
    }
}

/* Article / page content images - inset (~60%), click for full-size lightbox (JS: .xg-article-image) */
.entry-content .wp-block-image.xg-article-image {
    max-width: min(60%, 720px);
    width: 100%;
    margin-inline: auto;
}
.entry-content .wp-block-image.xg-article-image.alignwide,
.entry-content .wp-block-image.xg-article-image.alignfull,
.entry-content .wp-block-image.xg-article-image.size-large {
    max-width: min(60%, 720px);
}
.entry-content .wp-block-image.xg-article-image.alignleft,
.entry-content .wp-block-image.xg-article-image.alignright {
    max-width: min(45%, 480px);
}
.entry-content .wp-block-image.xg-article-image img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 8px;
}
/* Uniform 3:2 crop for inset travel photos (legacy Kadence land32); lightbox shows full image */
.entry-content .wp-block-image.xg-article-image-crop,
.entry-content .xg-article-media-trio__cell > .wp-block-image,
.entry-content .xg-article-media-trio__cell > figure.wp-block-image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: block;
    border-radius: 8px;
}
.entry-content .xg-article-media-trio__cell > .wp-block-image,
.entry-content .xg-article-media-trio__cell > figure.wp-block-image {
    border-radius: 6px;
}
.entry-content .wp-block-image.xg-article-image-crop img,
.entry-content .xg-article-media-trio__cell .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 0;
}
/* Portrait sources in 3:2 boxes - keep subjects centered (not dead air above heads) */
.entry-content .wp-block-image.xg-article-image-crop-tall img,
.entry-content .wp-block-image.xg-article-image-crop img[src*="guangzhou_2025_069.jpeg"] {
    object-position: 50% 68%;
}
/* Composite / grid art - show full frame (Visiting HQ Super XPENGer portrait grid) */
.entry-content .wp-block-image.xg-article-image-no-crop {
    aspect-ratio: auto;
    overflow: visible;
}
.entry-content .wp-block-image.xg-article-image-no-crop img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
}
.entry-content .wp-block-image.xg-article-image figcaption {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    color: var(--theme-palette-color-3);
}
@media (max-width: 781px) {
    .entry-content .wp-block-image.xg-article-image,
    .entry-content .wp-block-image.xg-article-image.alignleft,
    .entry-content .wp-block-image.xg-article-image.alignright {
        max-width: 92%;
        float: none;
        margin-inline: auto;
    }
}

/* Credit line under inset image/video - same width box, left edge matches media */
.entry-content .wp-block-image.xg-article-image + p:has(> em),
.entry-content .wp-block-video.xg-article-video + p:has(> em) {
    max-width: min(60%, 720px);
    width: 100%;
    margin-inline: auto;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--theme-palette-color-3);
}
@media (max-width: 781px) {
    .entry-content .wp-block-image.xg-article-image + p:has(> em),
    .entry-content .wp-block-video.xg-article-video + p:has(> em) {
        max-width: 92%;
    }
}

/* Promo / hero media - smaller inset than travel photos (Visiting HQ intro blocks) */
.entry-content .wp-block-image.xg-article-media-compact,
.entry-content .wp-block-video.xg-article-media-compact,
.entry-content .wp-block-image.xg-article-media-compact.size-large,
.entry-content .wp-block-image.xg-article-media-compact.aligncenter {
    max-width: min(42%, 440px);
    width: 100%;
    margin-inline: auto;
}
/* Portrait promo (invitation poster) - cap width + height so tall art does not dominate */
.entry-content .wp-block-image.xg-article-media-portrait,
.entry-content .wp-block-image.xg-article-media-portrait.size-large,
.entry-content .wp-block-image.xg-article-media-portrait.aligncenter {
    max-width: min(32%, 320px) !important;
    width: 100%;
}
.entry-content .wp-block-image.xg-article-media-portrait img {
    max-height: min(58vh, 480px);
    width: 100%;
    height: auto;
    object-fit: contain;
}
.entry-content .wp-block-image.xg-article-media-compact img,
.entry-content .wp-block-video.xg-article-media-compact video {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 8px;
}
.entry-content .wp-block-image.xg-article-media-compact + p:has(> em),
.entry-content .wp-block-video.xg-article-media-compact + p:has(> em) {
    max-width: min(42%, 440px);
}
.entry-content .wp-block-image.xg-article-media-portrait + p:has(> em) {
    max-width: min(32%, 320px);
}
@media (max-width: 781px) {
    .entry-content .wp-block-image.xg-article-media-compact,
    .entry-content .wp-block-video.xg-article-media-compact,
    .entry-content .wp-block-image.xg-article-media-compact + p:has(> em),
    .entry-content .wp-block-video.xg-article-media-compact + p:has(> em) {
        max-width: 88%;
    }
    .entry-content .wp-block-image.xg-article-media-portrait,
    .entry-content .wp-block-image.xg-article-media-portrait + p:has(> em) {
        max-width: 55%;
    }
}

/* Article / page content video - same inset + modal (JS: .xg-article-video) */
.entry-content .wp-block-video.xg-article-video {
    max-width: min(60%, 720px);
    width: 100%;
    margin-inline: auto;
}
.entry-content .wp-block-video.xg-article-video video {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 8px;
    vertical-align: middle;
}
@media (max-width: 781px) {
    .entry-content .wp-block-video.xg-article-video {
        max-width: 92%;
    }
}

/* Brand / partner logos - theme-colored mask (transparent PNG silhouette) */
.entry-content .xg-brand-logo,
.entry-content .wp-block-image.xg-brand-logo,
.entry-content .wp-block-image.xg-brand-logo.size-medium,
.entry-content .wp-block-image.xg-brand-logo.aligncenter {
    max-width: min(44%, 360px) !important;
    width: 100%;
    margin-inline: auto;
}
.entry-content .xg-brand-logo .xg-brand-logo__mark {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--theme-palette-color-4);
    mask-image: url(https://xpeng.guru/wp-content/uploads/XEUG_logo_transparent.png);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(https://xpeng.guru/wp-content/uploads/XEUG_logo_transparent.png);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
@media (max-width: 781px) {
    .entry-content .xg-brand-logo,
    .entry-content .wp-block-image.xg-brand-logo {
        max-width: min(80%, 320px) !important;
    }
}

/* Compact promo video - must follow .xg-article-video so it wins the cascade */
.entry-content .wp-block-video.xg-article-video.xg-article-media-compact {
    max-width: min(36%, 380px);
}
.entry-content .wp-block-video.xg-article-video.xg-article-media-compact + p:has(> em) {
    max-width: min(36%, 380px);
}
/* HQ flythrough + AI Day promo - smaller than default compact video */
.entry-content .wp-block-video.xg-article-media-video-hq,
.entry-content .wp-block-video.xg-article-video.xg-article-media-video-hq,
.entry-content .wp-block-video.xg-article-media-video-aiday,
.entry-content .wp-block-video.xg-article-video.xg-article-media-video-aiday {
    max-width: min(32%, 340px) !important;
    width: 100%;
}
.entry-content .wp-block-video.xg-article-media-video-hq + p:has(> em),
.entry-content .wp-block-video.xg-article-video.xg-article-media-video-hq + p:has(> em),
.entry-content .wp-block-video.xg-article-media-video-aiday + p:has(> em),
.entry-content .wp-block-video.xg-article-video.xg-article-media-video-aiday + p:has(> em) {
    max-width: min(32%, 340px);
}
@media (max-width: 781px) {
    .entry-content .wp-block-video.xg-article-video.xg-article-media-compact,
    .entry-content .wp-block-video.xg-article-video.xg-article-media-compact + p:has(> em),
    .entry-content .wp-block-video.xg-article-video.xg-article-media-video-hq,
    .entry-content .wp-block-video.xg-article-video.xg-article-media-video-hq + p:has(> em),
    .entry-content .wp-block-video.xg-article-video.xg-article-media-video-aiday,
    .entry-content .wp-block-video.xg-article-video.xg-article-media-video-aiday + p:has(> em) {
        max-width: 88%;
    }
}

/* Visiting HQ - invitation + AI Day video share one width (portrait promo pair) */
.entry-content .wp-block-image.xg-article-media-promo-vertical,
.entry-content .wp-block-video.xg-article-media-promo-vertical,
.entry-content .wp-block-image.xg-article-media-promo-vertical.size-large,
.entry-content .wp-block-image.xg-article-media-promo-vertical.aligncenter,
.entry-content .wp-block-video.xg-article-video.xg-article-media-promo-vertical {
    max-width: min(32%, 340px) !important;
    width: 100%;
    margin-inline: auto;
}
.entry-content .wp-block-image.xg-article-media-promo-vertical img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 8px;
}
.entry-content .wp-block-video.xg-article-media-promo-vertical video {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 8px;
}
.entry-content .wp-block-video.xg-article-media-promo-vertical + p:has(> em) {
    max-width: min(32%, 340px);
}
@media (max-width: 781px) {
    .entry-content .wp-block-image.xg-article-media-promo-vertical,
    .entry-content .wp-block-video.xg-article-media-promo-vertical,
    .entry-content .wp-block-video.xg-article-media-promo-vertical + p:has(> em) {
        max-width: 88% !important;
    }
}


/* ==============================================
   5. 404 PAGE FIX (safety net)
   Primary styling is handled by the "Page Not Found"
   Content Block (Blocksy 404 Template).
   This rule is a fallback for any 404 page context
   where the Content Block may not fully override defaults.
   ============================================== */

/* Title – Color 4 = headings (Blocksy convention) */
body.error404 h1,
body.error404 h2,
body.error404 .entry-title,
body.error404 .page-title {
    color: var(--theme-palette-color-4) !important;
}

/* Body text – Color 3 = paragraph text (Blocksy convention) */
body.error404 p {
    color: var(--theme-palette-color-3) !important;
}

/* Links within 404 content */
body.error404 .page-content a {
    color: var(--theme-palette-color-1) !important;
}

/* Search bar: constrain width and center */
body.error404 .wp-block-search,
body.error404 .wp-block-kadence-advancedsearch {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-self: center !important;  /* Handles flex parents */
    justify-self: center !important; /* Handles grid parents */
}

/* Ensure inner contents align properly inside the centered block */
body.error404 .wp-block-search .wp-block-search__inside-wrapper {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Button: spacing below search bar */
body.error404 .wp-block-buttons {
    margin-top: 32px !important;
}


/* ==============================================
   6. ARTICLE LAYOUT HELPERS
   Subtle section panels for long guides (step lists,
   OEM notes). Uses palette Color 6 only - no hex.
   Apply: Group block → Advanced → Additional CSS class:
   xg-muted-panel
   ============================================== */

.xg-muted-panel {
    background-color: var(--theme-palette-color-6);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--theme-palette-color-5);
}

.xg-muted-panel .wp-block-list {
    margin-bottom: 0;
}

.xg-muted-panel .wp-block-list:last-child {
    margin-bottom: 0;
}

/* ==============================================
   6b. History reference pages (BL16–BL18)
   Secondary hub child pages - prose + tables/lists.
   No Gutenberg zebra striping (breaks dark mode).
   ============================================== */

.xg-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.xg-history-entry {
    background-color: var(--theme-palette-color-6);
    border: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 55%, transparent);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
}

.xg-history-entry-meta {
    margin: 0 0 0.35rem !important;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--theme-palette-color-3);
}

.xg-history-entry-meta strong {
    color: var(--theme-palette-color-1);
}

.xg-history-entry > p:not(.xg-history-entry-meta) {
    margin: 0;
    color: var(--theme-palette-color-3);
}

/* Compact reference tables - card shell, panel header row, no zebra striping */
.wp-block-table.xg-ref-table {
    margin-bottom: 1.5rem;
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 8px;
    overflow: hidden;
    background-color: transparent;
}

.wp-block-table.xg-ref-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.wp-block-table.xg-ref-table th,
.wp-block-table.xg-ref-table td {
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 55%, transparent);
    padding: 0.65rem 0.9rem;
    vertical-align: top;
    color: var(--theme-palette-color-3);
    text-align: left;
}

.wp-block-table.xg-ref-table thead th {
    background-color: var(--theme-palette-color-6);
    color: var(--theme-palette-color-9);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--theme-palette-color-5);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.wp-block-table.xg-ref-table tbody tr:last-child td {
    border-bottom: none;
}

.wp-block-table.xg-ref-table tbody tr,
.wp-block-table.xg-ref-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: transparent !important;
}

.wp-block-table.xg-ref-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--theme-palette-color-6) 45%, transparent);
}

/* Model launch timeline (BL16+) */
.wp-block-table.xg-launches-table {
    overflow-x: auto;
}

.wp-block-table.xg-launches-table table {
    min-width: 22rem;
    table-layout: fixed;
    width: 100%;
}

.wp-block-table.xg-launches-table th:nth-child(1),
.wp-block-table.xg-launches-table td:nth-child(1) {
    width: 8.5rem;
    max-width: 8.5rem;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 0.85rem;
}

.wp-block-table.xg-launches-table th:nth-child(2),
.wp-block-table.xg-launches-table td:nth-child(2) {
    width: 5.5rem;
    max-width: 5.5rem;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.65rem;
    padding-right: 1.15rem;
}

.wp-block-table.xg-launches-table th:nth-child(3),
.wp-block-table.xg-launches-table td:nth-child(3) {
    width: auto;
}

/* Current Danish lineup - same idea as legacy da./biler/ gold rows, Guru green */
.wp-block-table.xg-launches-table tbody tr.xg-launches-active td {
    background-color: color-mix(in srgb, var(--theme-palette-color-1) 7%, transparent);
}

.wp-block-table.xg-launches-table tbody tr.xg-launches-active td:first-child {
    box-shadow: inset 3px 0 0 var(--theme-palette-color-1);
    color: var(--theme-palette-color-1);
    font-weight: 600;
}

.wp-block-table.xg-launches-table tbody tr.xg-launches-active td:nth-child(2) {
    color: var(--theme-palette-color-1);
    font-weight: 700;
}

.wp-block-table.xg-launches-table tbody tr.xg-launches-active:hover td {
    background-color: color-mix(in srgb, var(--theme-palette-color-1) 12%, transparent);
}

/* Internal code lookup table */
.wp-block-table.xg-codes-table table {
    table-layout: fixed;
}

.wp-block-table.xg-codes-table th:nth-child(1),
.wp-block-table.xg-codes-table td:nth-child(1) {
    width: 14%;
    max-width: 5rem;
    font-weight: 600;
    white-space: nowrap;
}

.wp-block-table.xg-codes-table th:nth-child(2),
.wp-block-table.xg-codes-table td:nth-child(2) {
    width: 38%;
}

.wp-block-table.xg-codes-table th:nth-child(3),
.wp-block-table.xg-codes-table td:nth-child(3) {
    width: 48%;
}

.xg-china-only {
    color: var(--theme-palette-color-10);
    font-weight: 700;
}

/* XOS version ladder (BL17) */
.wp-block-table.xg-xos-versions-table th:nth-child(1),
.wp-block-table.xg-xos-versions-table td:nth-child(1) {
    width: 16%;
    max-width: 6.5rem;
    font-weight: 600;
    white-space: nowrap;
}

.wp-block-table.xg-xos-versions-table th:nth-child(2),
.wp-block-table.xg-xos-versions-table td:nth-child(2) {
    width: 10%;
    max-width: 4rem;
}

.wp-block-table.xg-xos-versions-table th:nth-child(3),
.wp-block-table.xg-xos-versions-table td:nth-child(3) {
    width: 18%;
}

.wp-block-table.xg-xos-versions-table th:nth-child(4),
.wp-block-table.xg-xos-versions-table td:nth-child(4) {
    width: 56%;
}

.wp-block-table.xg-app-versions-table th:nth-child(1),
.wp-block-table.xg-app-versions-table td:nth-child(1) {
    width: 14%;
    white-space: nowrap;
}

.wp-block-table.xg-app-versions-table th:nth-child(2),
.wp-block-table.xg-app-versions-table td:nth-child(2) {
    width: 16%;
}

.wp-block-table.xg-app-versions-table th:nth-child(3),
.wp-block-table.xg-app-versions-table td:nth-child(3) {
    width: 70%;
}

/* Home v2 - combined intro + start-here panel */
.xg-home-intro-panel__cols {
    gap: 1.5rem;
    margin-bottom: 0;
}
.xg-home-intro-panel__cols > .wp-block-column > .wp-block-heading {
    margin-top: 0;
}
.xg-home-intro-panel__cols > .wp-block-column > .wp-block-heading + .wp-block-paragraph,
.xg-home-intro-panel__cols > .wp-block-column > .wp-block-heading + .wp-block-list {
    margin-top: 0.5rem;
}
@media (max-width: 781px) {
    .xg-home-intro-panel__cols > .wp-block-column:not(:first-child) {
        margin-top: 0.25rem;
    }
}

/* Archetype 1 hub card grids - site-wide 16:9 standard (static .xg-hub-cards + query .xg-hub-query-cards) */
.kb-row-layout-wrap.xg-hub-cards .kt-row-column-wrap {
    align-items: stretch !important;
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-kadence-column > .kt-inside-inner-col {
    background: var(--theme-palette-color-6) !important;
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-image.xg-hub-card-image {
    margin: 0;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    background-color: var(--theme-palette-color-5);
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-image.xg-hub-card-image a {
    display: block;
    height: 100%;
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-image.xg-hub-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-image.xg-hub-card-image--contain img {
    object-fit: contain;
    background-color: var(--theme-palette-color-6);
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-image.xg-hub-card-image figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.3;
    background: color-mix(in srgb, var(--theme-palette-color-7) 80%, transparent);
    color: var(--theme-palette-color-9) !important;
}
.kb-row-layout-wrap.xg-hub-cards .wp-block-buttons {
    margin-top: auto;
}

/* Archetype 1 Level-2 hub query loops - match .xg-hub-cards (Software hub reference) */
.wp-block-kadence-posts.xg-hub-query-cards .kb-post-list-item {
    height: 100%;
}
/* Kadence boxed loops put .content-bg on the article - beat global-palette9 with background shorthand */
.wp-block-kadence-posts.xg-hub-query-cards article.loop-entry.content-bg {
    background: var(--theme-palette-color-6) !important;
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 8px;
    box-shadow: none !important;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Dark mode: color-6 on color-7 page bg vanishes behind dark hero art - lift all hub cards together */
[data-color-mode="dark"] .kb-row-layout-wrap.xg-hub-cards .wp-block-kadence-column > .kt-inside-inner-col,
[data-color-mode="dark"] .wp-block-kadence-posts.xg-hub-query-cards article.loop-entry.content-bg {
    background: var(--theme-palette-color-5) !important;
    border-color: var(--theme-palette-color-6) !important;
}
[data-color-mode="dark"] .kb-row-layout-wrap.xg-hub-cards .wp-block-image.xg-hub-card-image--contain img {
    background-color: var(--theme-palette-color-5) !important;
}
.wp-block-kadence-posts.xg-hub-query-cards .post-thumbnail {
    margin: 0;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background-color: var(--theme-palette-color-5);
}
/* Force 16:9 on hub query thumbnails - aspect-ratio beats Kadence padding-bottom hacks */
.wp-block-kadence-posts.xg-hub-query-cards a.post-thumbnail[class*="kadence-thumbnail-ratio"]:not(.kadence-thumbnail-ratio-inherit) {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}
.wp-block-kadence-posts.xg-hub-query-cards a.post-thumbnail[class*="kadence-thumbnail-ratio"]:not(.kadence-thumbnail-ratio-inherit) .post-thumbnail-inner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}
.wp-block-kadence-posts.xg-hub-query-cards .post-thumbnail-inner,
.wp-block-kadence-posts.xg-hub-query-cards .post-thumbnail a {
    display: block;
    height: 100%;
}
.wp-block-kadence-posts.xg-hub-query-cards .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-content-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-bottom: 8px;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-header {
    padding: 16px 20px 0;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-title {
    margin: 0;
    font-size: inherit;
    line-height: 1.3;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-title a {
    color: var(--theme-palette-color-4) !important;
    text-decoration: none !important;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-title a:hover {
    color: var(--theme-palette-color-1) !important;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-meta {
    display: none !important;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-summary {
    padding: 8px 20px 0;
    margin: 0;
    flex: 1 1 auto;
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-summary p {
    margin: 0;
    color: var(--theme-palette-color-3);
}
.wp-block-kadence-posts.xg-hub-query-cards .entry-footer {
    margin-top: auto;
    padding: 16px 20px 8px;
}
.wp-block-kadence-posts.xg-hub-query-cards .more-link-wrap {
    margin: 0;
}
.wp-block-kadence-posts.xg-hub-query-cards .post-more-link {
    display: inline-block;
    padding: 0.55em 1.1em;
    border: 2px solid var(--theme-palette-color-1);
    border-radius: 3px;
    background: transparent !important;
    color: var(--theme-palette-color-1) !important;
    font-size: 0.95em;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.wp-block-kadence-posts.xg-hub-query-cards .post-more-link:hover {
    color: var(--theme-palette-color-2) !important;
    border-color: var(--theme-palette-color-2) !important;
}
.wp-block-kadence-posts.xg-hub-query-cards .post-more-link .kadence-svg-iconset {
    display: none;
}

/* Lineup "More to come" - ghost placeholder card injected as the last p22_lineup_posts item
   (functions.php: xpeng_lineup_more_to_come_card). Auto-hides once 3+ models fill the row. */
.wp-block-kadence-posts.xg-hub-query-cards article.loop-entry.content-bg.xg-lineup-soon,
[data-color-mode="dark"] .wp-block-kadence-posts.xg-hub-query-cards article.loop-entry.content-bg.xg-lineup-soon {
    background: transparent !important;
    border-style: dashed;
}
.xg-lineup-soon__thumb {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--theme-palette-color-5) 35%, transparent);
    border-bottom: 1px dashed var(--theme-palette-color-5);
}
.xg-lineup-soon__plus {
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--theme-palette-color-1);
}
.xg-lineup-soon .entry-title,
.xg-lineup-soon .entry-summary p {
    color: var(--theme-palette-color-9);
}

/* Lineup deep-link anchors inside peek-accordion panes (no visible heading). */
.entry-content .xg-section-anchor {
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Lineup hub - Future Release stamp on confirmed-but-not-yet-on-sale models */
.wp-block-kadence-posts.xg-hub-query-cards article.xg-lineup-future .post-thumbnail {
    position: relative;
}
.wp-block-kadence-posts.xg-hub-query-cards article.xg-lineup-future .post-thumbnail::after {
    content: "Future Release";
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--theme-palette-color-4);
    background: var(--theme-palette-color-1);
    pointer-events: none;
}
html[lang^="da"] .wp-block-kadence-posts.xg-hub-query-cards article.xg-lineup-future .post-thumbnail::after {
    content: "Kommende lancering";
}

/* Software hub - wide reference cards: 2-up row, 16:9 image left, title + blurb + CTA right */
.wp-block-kadence-posts.xg-hub-ref-cards-wide article.loop-entry.content-bg {
    flex-direction: row;
    align-items: stretch;
}
.wp-block-kadence-posts.xg-hub-ref-cards-wide .post-thumbnail {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.wp-block-kadence-posts.xg-hub-ref-cards-wide a.post-thumbnail[class*="kadence-thumbnail-ratio"]:not(.kadence-thumbnail-ratio-inherit) {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100%;
}
.wp-block-kadence-posts.xg-hub-ref-cards-wide .entry-content-wrap {
    flex: 1 1 50%;
    justify-content: center;
    padding: 16px 20px;
    min-width: 0;
}
.wp-block-kadence-posts.xg-hub-ref-cards-wide .entry-header {
    padding: 0;
}
.wp-block-kadence-posts.xg-hub-ref-cards-wide .entry-summary {
    padding: 0;
}
.wp-block-kadence-posts.xg-hub-ref-cards-wide .entry-footer {
    padding: 12px 0 0;
}
@media (max-width: 781px) {
    .wp-block-kadence-posts.xg-hub-ref-cards-wide article.loop-entry.content-bg {
        flex-direction: column;
    }
    .wp-block-kadence-posts.xg-hub-ref-cards-wide .post-thumbnail {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
    .wp-block-kadence-posts.xg-hub-ref-cards-wide .entry-content-wrap {
        padding: 16px 20px 8px;
    }
}

/* About hub - single wide reference card (Collaboration only) */
.wp-block-kadence-posts.xg-hub-ref-card-solo .kb-post-list-content,
.kb-row-layout-wrap.xg-hub-ref-card-solo {
    max-width: min(100%, 880px);
    margin-inline: auto;
}

/* Static hub cards - wide 2-up row (image left, copy + CTA right); matches .xg-hub-ref-cards-wide query layout */
.kb-row-layout-wrap.xg-hub-cards-wide .wp-block-kadence-column > .kt-inside-inner-col {
    flex-direction: row;
    align-items: stretch;
}
.kb-row-layout-wrap.xg-hub-cards-wide .wp-block-image.xg-hub-card-image {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kb-row-layout-wrap.xg-hub-cards-wide .wp-block-image.xg-hub-card-image a {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.kb-row-layout-wrap.xg-hub-cards-wide .wp-block-image.xg-hub-card-image img {
    width: 100%;
    height: 100%;
}
.kb-row-layout-wrap.xg-hub-cards-wide .xg-hub-card-wide-body {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 16px 20px;
}
.kb-row-layout-wrap.xg-hub-cards-wide .xg-hub-card-wide-body .wp-block-heading {
    margin: 0 0 0.5rem;
    padding: 0;
}
.kb-row-layout-wrap.xg-hub-cards-wide .xg-hub-card-wide-body p {
    margin: 0;
    padding: 0;
}
.kb-row-layout-wrap.xg-hub-cards-wide .xg-hub-card-wide-body .wp-block-buttons {
    margin-top: 0;
    padding: 12px 0 0;
}
@media (max-width: 781px) {
    .kb-row-layout-wrap.xg-hub-cards-wide .wp-block-kadence-column > .kt-inside-inner-col {
        flex-direction: column;
    }
    .kb-row-layout-wrap.xg-hub-cards-wide .wp-block-image.xg-hub-card-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        align-self: auto;
    }
    .kb-row-layout-wrap.xg-hub-cards-wide .xg-hub-card-wide-body {
        padding: 16px 20px 8px;
    }
}

/* Level-2 hub subsection intro - breathing room between H2 and query grid */
.xg-hub-section-intro {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    color: var(--theme-palette-color-3);
}

/* XPENG App hub - official store badges (SVG, fixed height, grouped left) */
.xg-app-store-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
    align-items: center;
    justify-content: flex-start;
}
.xg-app-store-badges > .wp-block-column {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
}
.xg-app-store-badges .wp-block-image {
    margin: 0;
}
.xg-app-store-badges .wp-block-image img {
    height: 48px;
    width: auto;
    max-width: none;
    display: block;
}

/* XPENG App hub - store badges under intro (no panel, no extra label) */
.xg-app-get-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0.75rem 0 0.25rem;
}
.xg-app-get-badges .wp-block-image {
    margin: 0;
    line-height: 0;
}
.xg-app-get-badges .wp-block-image img {
    height: 36px;
    width: auto;
    display: block;
}

/* Release-note hub index (XOS software hub) - layout C: version + Released | Region columns */
.wp-block-kadence-posts.xg-rn-index-cards .kb-post-list-item {
    width: 100%;
    min-width: 0;
}
/* Beat .xg-hub-query-cards thumbnail display:block - only 4.4.1 had featured_media, so it alone broke */
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .post-thumbnail,
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards a.post-thumbnail[class*="kadence-thumbnail-ratio"] {
    display: none !important;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-meta {
    display: none !important;
}
/* Release-note index - layout C; title + meta block centred as one unit in the card */
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry.content-bg {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    height: 6rem;
    min-height: 6rem;
    max-height: 6rem;
    padding: 0 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Whole card is one tap target - stretched link on the title anchor */
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-title a {
    position: static;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry.content-bg:hover {
    border-color: var(--theme-palette-color-1);
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry.content-bg:has(.entry-title a:focus-visible) {
    border-color: var(--theme-palette-color-1);
    outline: 2px solid var(--theme-palette-color-1);
    outline-offset: 2px;
}
/* Dark hub cards set border with !important - match light-mode green hover ring */
[data-color-mode="dark"] .wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry.content-bg:hover,
[data-color-mode="dark"] .wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry.content-bg:has(.entry-title a:focus-visible) {
    border-color: var(--theme-palette-color-1) !important;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-content-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    flex: 0 0 auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 0 !important;
    box-sizing: border-box;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-header {
    grid-column: 1;
    grid-row: 1;
    padding: 0 !important;
    margin: 0;
    width: 100%;
    min-height: 1.2em;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-title {
    line-height: 1.2;
    margin: 0;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-summary {
    grid-column: 1;
    grid-row: 2;
    padding: 0 !important;
    margin: 0;
    width: 100%;
    flex: 0 0 auto !important;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-summary p {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .xg-rn-meta-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    min-height: calc(0.72em * 1.2 + 1px + 0.88em * 1.2);
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .xg-rn-meta-col--region {
    border-left: 1px solid var(--theme-palette-color-5);
    padding-left: 10px;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .xg-rn-meta-label {
    font-size: 0.72em;
    line-height: 1.2;
    color: var(--theme-palette-color-9);
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .xg-rn-meta-value {
    font-size: 0.88em;
    line-height: 1.2;
    color: var(--theme-palette-color-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-color-mode="dark"] .wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .xg-rn-meta-value {
    color: var(--theme-palette-color-9);
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-footer {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    position: static !important;
    top: auto;
    right: auto;
    margin: 0 !important;
    padding: 0 !important;
    transform: none;
    transition: transform 0.15s ease;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .entry-actions,
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .more-link-wrap {
    margin: 0;
    padding: 0;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards .post-more-link {
    font-size: 0;
    line-height: 0;
    padding: 0.15em;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: relative;
    z-index: 2;
}
.wp-block-kadence-posts.xg-rn-index-cards .post-more-link .kadence-svg-iconset {
    display: none !important;
}
.wp-block-kadence-posts.xg-rn-index-cards .post-more-link::after {
    content: "›";
    font-size: 2rem;
    font-weight: 200;
    line-height: 1;
    color: var(--theme-palette-color-9);
    display: block;
    transition: color 0.15s ease;
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry:hover .entry-footer {
    transform: translateX(3px);
}
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry:hover .post-more-link::after,
.wp-block-kadence-posts.xg-hub-query-cards.xg-rn-index-cards article.loop-entry:has(.entry-title a:focus-visible) .post-more-link::after {
    color: var(--theme-palette-color-1);
}

/* CPT archive /releasenote/ — same layout-C cards as XOS hub, 3-col grid */
.xg-rn-archive .xg-rn-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.xg-rn-archive .kb-post-list-item {
    width: 100%;
    min-width: 0;
    height: 100%;
}
.xg-rn-archive-page .xg-hub-section-intro {
    margin: 0 0 1.25rem;
}
@media (max-width: 1024px) {
    .xg-rn-archive .xg-rn-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .xg-rn-archive .xg-rn-archive-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==============================================
   18b2. HOME XOS RELEASES - [xpeng_home_xos_releases]
   Latest Europe public + beta (home-v2)
   ============================================== */

.xg-home-xos-releases {
    margin: 0 0 1.5rem;
}
.xg-home-xos-releases__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.xg-home-xos-releases__label {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-palette-color-9);
}
.xg-home-xos-releases__slot {
    min-width: 0;
}
.xg-home-xos-releases__empty {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.xg-home-xos-releases__empty:hover {
    border-color: var(--theme-palette-color-5) !important;
}
[data-color-mode="dark"] .xg-home-xos-releases__empty:hover {
    border-color: var(--theme-palette-color-6) !important;
}
.xg-home-xos-releases .xg-home-xos-releases__empty-text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--theme-palette-color-10) !important;
    text-align: center;
}
@media (max-width: 781px) {
    .xg-home-xos-releases__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hub header/logo alignment - custom shell pages only (Lineup + Software hubs).
   Symptom + new-page checklist: mg2c_review_log.md → Hub header/logo alignment.
   Do not zero --has-transparent-header: 0 on hub bodies.
   Blocksy sticky header uses right: calc(... + var(--scrollbar-width)) - when
   scrollbar-gutter is stable, zero --scrollbar-width here so space is not reserved twice
   (double reservation → black right strip on hubs). */
/* Prevent horizontal overflow + right-side black gutter on hub/subpages */
html,
body {
    overflow-x: clip;
}
html {
    scrollbar-gutter: stable;
    --scrollbar-width: 0px !important;
}
#main-container,
#footer.ct-footer,
#footer.ct-footer [data-row] {
    max-width: 100%;
}
#footer.ct-footer,
#footer.ct-footer [data-row] {
    width: 100%;
}

/* Overlay-header hubs (Software + About) - lineup_archive uses in-flow header; see below */
body.page-id-1770 [data-header*="type-1"],
body.page-id-1772 [data-header*="type-1"],
body.page-id-1766 [data-header*="type-1"],
body.page-id-1774 [data-header*="type-1"],
body.page-id-1781 [data-header*="type-1"],
body.page-id-1589 [data-header*="type-1"],
body.page-id-1783 [data-header*="type-1"],
body.page-id-1785 [data-header*="type-1"],
body.page-id-2278 [data-header*="type-1"],
body.page-id-2662 [data-header*="type-1"],
body.page-id-2684 [data-header*="type-1"],
body.page-id-2688 [data-header*="type-1"] {
    --has-transparent-header: 1 !important;
}

/* Sticky/transparent header sits over content - keep site header above hero */
[data-header*="type-1"] {
    z-index: 50;
}
#header.ct-header [data-row*="middle"] {
    background-color: var(--theme-palette-color-7) !important;
}
@media (min-width: 1000px) {
    #header.ct-header [data-row*="middle"] {
        min-height: var(--header-sticky-height, 72px);
        align-items: center;
    }
}

/* Theme hero (.page-title) - offset for overlay (transparent) header on custom shells + singles */
main .hero-section.is-width-constrained[data-type="type-1"] {
    padding-top: calc(var(--header-sticky-height, 72px) + 1.25rem);
}
/* Lineup archive - in-flow header (no overlay). Match Software hub gap below nav only - not +72px */
body.post-type-archive-lineup main .hero-section.is-width-constrained[data-type="type-1"] {
    padding-top: 1.25rem;
}

/* Localized home pages (e.g. /da/home/, page-id 2955) - hide the Blocksy page-title
   hero ("Hjem") so they match the EN front page, which renders no hero at all.
   Scope to main .hero-section only — a bare .entry-header rule also hid the title
   (and stretched-link) inside [xpeng_home_xos_releases] cards, so clicks did nothing.
   Add each localized home's page-id here when new languages are launched. */
body.page-id-2955 main .hero-section {
    display: none !important;
}

/* Hub hero titles - one explicit size shared by Lineup archive + Software hubs.
   (Blocksy forces 30px on single_page; lineup_archive has no rule. Pin both to the
   same xx-large hero token so the L1 heading is identical across hubs.) */
body.post-type-archive-lineup .entry-header .page-title,
body.page-id-1770 .entry-header .page-title,
body.page-id-1772 .entry-header .page-title,
body.page-id-1766 .entry-header .page-title,
body.page-id-1774 .entry-header .page-title,
body.page-id-1781 .entry-header .page-title,
body.page-id-1589 .entry-header .page-title,
body.page-id-1783 .entry-header .page-title,
body.page-id-1785 .entry-header .page-title,
body.page-id-2278 .entry-header .page-title,
body.page-id-2662 .entry-header .page-title,
body.page-id-2684 .entry-header .page-title,
body.page-id-2688 .entry-header .page-title {
    --theme-font-size: clamp(45px, 2.813rem + ((1vw - 3.2px) * 2.734), 80px) !important;
}


/* ==============================================
   7. CALLOUTS / INFO BOXES (Layer 2)
   Use a Group block → Advanced → Additional CSS class:
   one of xg-callout-tip | xg-callout-warning | xg-callout-note

   Inside: optional H4 title (💡 Tip / ⚠️ Warning / 📌 Note) + paragraph(s).
   Palette only - Color 1 green, Color 10 orange CTA, Color 5/6/9 neutrals.
   ============================================== */

.xg-callout-tip,
.xg-callout-warning,
.xg-callout-note {
    background-color: var(--theme-palette-color-6);
    border-radius: 8px;
    padding: 1rem 1.25rem 1.1rem;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--theme-palette-color-5);
    border-left-width: 4px;
    border-left-style: solid;
}

.xg-callout-tip {
    border-left-color: var(--theme-palette-color-1);
}

.xg-callout-warning {
    border-left-color: var(--theme-palette-color-10);
}

.xg-callout-note {
    border-left-color: var(--theme-palette-color-9);
}

/* Title: use Heading H4 inside the Group (💡 Tip / ⚠️ Warning / 📌 Note).
   If the table of contents lists H4, restrict the ToC block to H2–H3 only. */
.xg-callout-tip h4 {
    color: var(--theme-palette-color-1);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.xg-callout-warning h4 {
    color: var(--theme-palette-color-10);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.xg-callout-note h4 {
    color: var(--theme-palette-color-9);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.xg-callout-tip p:last-child,
.xg-callout-warning p:last-child,
.xg-callout-note p:last-child,
.xg-callout-tip .wp-block-list:last-child,
.xg-callout-warning .wp-block-list:last-child,
.xg-callout-note .wp-block-list:last-child {
    margin-bottom: 0;
}

.xg-callout-tip a,
.xg-callout-warning a,
.xg-callout-note a {
    color: var(--theme-palette-color-1);
}

/* Anchor scroll offset for sticky header (Article Master TOC + in-content links).
   Header sticky zone is ~120px; add buffer so H2 titles are not clipped on TOC jump. */
html {
    scroll-padding-top: 140px;
}
body.single-article,
body.single-release_note {
    scroll-padding-top: 140px;
}
body.single-article .entry-content h2[id],
body.single-release_note .entry-content h2[id],
body.single-article .wp-block-post-content h2[id],
body.single-release_note .wp-block-post-content h2[id] {
    scroll-margin-top: 140px;
}

/* ==============================================
   8. STICKY TABLE OF CONTENTS (Desktop)
   Forces the TOC widget to scroll down alongside the reader
   so they never lose their place in the guide.
   ============================================== */
@media (min-width: 768px) {
    /* Target the column containing the TOC, force it to not stretch its height,
       and make it sticky. (Fixes flexbox default equal-heights breaking sticky) */
    .kadence-column992_fbda9d-5b {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 140px !important;
        align-self: flex-start !important;
    }
}


/* ==============================================
   9. GLOBAL LINK STYLES
   Removes "old-school" underlines from all links natively,
   including the Kadence Table of Contents. Links rely solely
   on brand color and hover states for distinction.
   ============================================== */
a, 
a:hover, 
a:focus, 
.entry-content a, 
.wp-block-kadence-tableofcontents a {
    text-decoration: none !important;
}

/* ==============================================
   10. RELEASE NOTES: TIMELINE MENU UX
   Targets the Gutenberg Navigation block with CSS class: xg-timeline
   The Nav block outputs wp-block-navigation-item elements (NOT ul.menu > li).
   Structure: nav.xg-timeline > ul.wp-block-navigation__container > li.wp-block-navigation-item
   ============================================== */

/* Reset default Navigation block gaps/padding that interfere with timeline layout */
.xg-timeline.wp-block-navigation,
.xg-timeline .wp-block-navigation__container {
    gap: 0 !important;
    row-gap: 0 !important;
}

.xg-timeline.wp-block-navigation .wp-block-navigation-item__content {
    padding: 0 !important;
}

/* The vertical timeline bar */
nav.xg-timeline.wp-block-navigation .wp-block-navigation__container {
    display: flex !important;          /* override Navigation block default */
    flex-direction: column !important; /* force vertical - block defaults to horizontal */
    align-items: flex-start !important; /* prevent items centering on cross-axis */
    border-left: 2px solid var(--theme-palette-color-5);
    padding-left: 0;
    margin-left: 10px;
    list-style: none;
}

/* Ensure items are left-aligned */
nav.xg-timeline .wp-block-navigation-item,
nav.xg-timeline .wp-block-navigation-item__content {
    text-align: left !important;
    width: 100%;
}

/* Each top-level item - extra padding keeps labels clear of the rail + dot */
nav.xg-timeline .wp-block-navigation__container > .wp-block-navigation-item {
    position: relative;
    padding-left: 28px;
    margin-bottom: 24px;
}

/* Base dot - filled grey for GA releases (class set by master-block JS) */
nav.xg-timeline .wp-block-navigation__container > .wp-block-navigation-item::before {
    content: "" !important;
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--theme-palette-color-5);
    border: 2px solid var(--theme-palette-color-5);
    z-index: 2;
    transition: all 0.3s ease;
}

/* Hollow dot - beta releases + unpublished placeholders (no :has - WP strips it) */
nav.xg-timeline .wp-block-navigation__container > .wp-block-navigation-item.xg-timeline-beta::before,
nav.xg-timeline .wp-block-navigation__container > .wp-block-navigation-item.xg-timeline-placeholder::before {
    background-color: var(--theme-palette-color-7);
    border-color: var(--theme-palette-color-5);
}

/* Links inside the timeline */
nav.xg-timeline .wp-block-navigation-item__content {
    color: var(--theme-palette-color-3) !important;
    font-size: 16px;
    font-weight: 500;
}
nav.xg-timeline .wp-block-navigation-item__content:hover {
    color: var(--theme-palette-color-1) !important;
}
/* Placeholder links - not clickable */
nav.xg-timeline .wp-block-navigation-item__content[href="#"] {
    cursor: default;
    pointer-events: none;
    opacity: 0.6;
}

/* Active State Dot (swells, turns XPENG Green) */
nav.xg-timeline .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item::before {
    background-color: var(--theme-palette-color-1) !important;
    border-color: var(--theme-palette-color-1) !important;
    box-shadow: 0 0 8px 3px rgba(0, 255, 136, 0.25);
    transform: scale(1.1);
}

/* Active State Text (bold, bright white) */
nav.xg-timeline .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    font-weight: 700 !important;
    color: var(--theme-palette-color-4) !important;
}

/* Sub-items (e.g. Beta releases indented under major version) */
.xg-timeline .wp-block-navigation__submenu-container {
    margin-top: 14px;
    padding-left: 10px;
    border-left: 1px dashed var(--theme-palette-color-5);
}
.xg-timeline .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}
.xg-timeline .wp-block-navigation__submenu-container > .wp-block-navigation-item::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--theme-palette-color-5);
}
.xg-timeline .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--theme-palette-color-9) !important;
    font-size: 14px;
}
.xg-timeline .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__content {
    color: var(--theme-palette-color-4) !important;
    font-weight: 600 !important;
}
.xg-timeline .wp-block-navigation__submenu-container .current-menu-item::before {
    background-color: var(--theme-palette-color-1);
}


/* ==============================================
   11. METADATA PILL BADGES
   Turns any text into a subtle, rounded pill badge.
   Add 'xg-badge' to Advanced CSS Class of a paragraph.
   ============================================== */
.xg-badge {
    display: inline-block;
    background-color: var(--theme-palette-color-6);
    color: var(--theme-palette-color-9);
    padding: 6px 14px;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600;
    margin-right: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--theme-palette-color-5);
}


/* ==============================================
   12. RELEASE NOTES: KADENCE TABS STYLING
   Uses maximum specificity to beat Kadence's scoped
   per-block inline/head CSS (which uses .wp-block-kadence-tabs.kt-tabs-id_XXX).
   Also nuke the outer wrap border (Kadence 3px teal is set inline on .kt-tabs-wrap). */

/* Nuke the outer wrap border set by Kadence block settings */
.wp-block-kadence-tabs .kt-tabs-wrap {
    border: none !important;
    box-shadow: none !important;
}


/* Tab nav bar - grey line using box-shadow so green can overlay it exactly */
.wp-block-kadence-tabs .kt-tabs-wrap .kt-tabs-title-list {
    border-bottom: none !important;
    box-shadow: 0 3px 0 0 var(--theme-palette-color-5) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

/* Individual tab buttons */
.wp-block-kadence-tabs .kt-tabs-wrap .kt-title-item .kt-tab-title {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    margin-bottom: 0 !important;
    color: var(--theme-palette-color-9) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* Active tab - green box-shadow at same offset as grey, paints on top */
.wp-block-kadence-tabs .kt-tabs-wrap .kt-tab-title-active .kt-tab-title {
    color: var(--theme-palette-color-1) !important;
    box-shadow: 0 3px 0 0 var(--theme-palette-color-1) !important;
    background: transparent !important;
    background-color: transparent !important;
    font-weight: 700 !important;
}

/* Hover */
.wp-block-kadence-tabs .kt-tabs-wrap .kt-title-item .kt-tab-title:hover {
    color: var(--theme-palette-color-1) !important;
    background: transparent !important;
    background-color: transparent !important;
}


/* --- BACKGROUND NUKING ---
   Target every element in the tab content chain.
   Kadence scopes its generated CSS to .wp-block-kadence-tabs.kt-tabs-id_XYZ
   which has specificity (0,0,3,0). We match or exceed with !important.
   .kt-tabs-wrap is where the Content Background + Border actually lives. */

/* Outer inner-wrap - this is where Kadence applies Content Background + Border */
.wp-block-kadence-tabs .ktab-inner-wrap,
.wp-block-kadence-tabs .kt-tabs-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Content wrap */
.wp-block-kadence-tabs .kt-tabs-wrap .kt-tabs-content-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 0 0 0 !important;
}

/* Individual panes */
.wp-block-kadence-tabs .kt-tabs-wrap .kt-tabs-content-pane,
.wp-block-kadence-tabs .kt-tabs-wrap .kt-tab-panel-active,
.wp-block-kadence-tabs .kt-tabs-wrap [class*="kt-tab-panel"],
.wp-block-kadence-tabs .kt-tabs-wrap [class*="kt-tabs-content"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Kadence plugin default (style-blocks-tabs.css) adds border: 1px solid #dee2e6
   and padding: 20px to .wp-block-kadence-tab - override it globally */
.wp-block-kadence-tabs .kt-tabs-wrap .wp-block-kadence-tab {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}




/* ==============================================
   13. RELEASE NOTES: TITLE OFFSET FIX
   Broad selectors in case Content Block changes body classes.
   Targets margin-top and overflow on title and containers.
   ============================================== */
.single-release_note .wp-block-post-title,
.post-type-release_note .wp-block-post-title,
body.release_note .wp-block-post-title {
    margin-top: 0 !important;
}

/* Also ensure Kadence row containers don't clip the title */
.single-release_note .kt-row-layout-inner,
.single-release_note .kt-inside-inner-col,
.post-type-release_note .kt-row-layout-inner,
.post-type-release_note .kt-inside-inner-col {
    overflow: visible !important;
}


/* ==============================================
   14. RELEASE NOTES: PILLS ROW LAYOUT
   ============================================== */
.single-release_note .wp-block-group:has(.xg-badge),
.post-type-release_note .wp-block-group:has(.xg-badge) {
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}


/* ==============================================
   14b. RELEASE NOTES: OFFICIAL TAB - vendor hierarchy
   Maps XPENG app/in-car changelog levels to Guru typography.
   Scoped to Kadence tab 2 (Official Release Note) in Release Note Tabs pattern.
   Markup: h3.xg-rn-vendor-l1 (major) · h4.xg-rn-vendor-l2 (sub-group) · ul li (items)
   No ::before bullets - Blocksy/Gutenberg heading stacks broke pseudo-elements on live.
   ============================================== */

.single-release_note .kt-inner-tab-2 .xg-callout-note {
    margin-bottom: 1.25rem;
}

.single-release_note .kt-inner-tab-2 h2.wp-block-heading {
    margin-bottom: 0.75rem;
    color: var(--theme-palette-color-4) !important;
}

/* Catch untransformed official headings (no vendor class yet) */
.single-release_note .kt-inner-tab-2 h3.wp-block-heading,
.single-release_note .kt-inner-tab-2 h4.wp-block-heading {
    color: var(--theme-palette-color-4) !important;
}

.single-release_note .kt-inner-tab-2 h3.xg-rn-vendor-l1 {
    display: block;
    font-size: 1.125rem !important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--theme-palette-color-4) !important;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--theme-palette-color-1, #00ba5d);
}

.single-release_note .kt-inner-tab-2 h3.xg-rn-vendor-l1:first-of-type {
    margin-top: 0.5rem;
}

.single-release_note .kt-inner-tab-2 h4.xg-rn-vendor-l2 {
    display: block;
    font-size: 1.05rem !important;
    font-weight: 600;
    line-height: 1.35;
    color: var(--theme-palette-color-4) !important;
    margin-top: 1.1rem;
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

.single-release_note .kt-inner-tab-2 .wp-block-list {
    margin-top: 0.15rem;
    margin-bottom: 0.65rem;
    padding-left: 1.25rem;
}

.single-release_note .kt-inner-tab-2 .wp-block-list li {
    color: var(--theme-palette-color-3, #d5d5d5);
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

.single-release_note .kt-inner-tab-2 .wp-block-list li strong {
    color: var(--theme-palette-color-4);
    font-weight: 600;
}

/* Legacy official notes: p>strong subsections until batch migration */
.single-release_note .kt-inner-tab-2 p:has(> strong:only-child) {
    display: block;
    font-size: 1.05rem !important;
    font-weight: 600;
    line-height: 1.35;
    color: var(--theme-palette-color-4) !important;
    margin-top: 1.1rem;
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

.single-release_note .kt-inner-tab-2 p:has(> strong:only-child) strong {
    font-weight: 600;
    color: inherit;
}


/* ==============================================
   14c. RELEASE NOTES: GURU TAB - availability card set (vertical 4:5)
   Built as 2-up wp:columns rows (not a wp:gallery) so the portrait cards
   render at natural size - the core gallery flex layout clips tall images
   via an ID-specificity `:not(#individual-image)` rule. Equal column widths
   + same 4:5 ratio keep every card uniform; images are never cropped.
   ============================================== */

.single-release_note .xg-rn-availability-gallery.wp-block-columns {
    gap: 16px;
    margin: 0 0 1rem;
    align-items: start;
}

/* Opt these cards out of the site-wide 3:2 image crop (figure.wp-block-image
   carries aspect-ratio:3/2 + overflow:hidden + img object-fit:cover globally),
   so the full 4:5 card shows uncropped. !important beats the global rule.
   The explicit 4:5 ratio also reserves correct space before the (lazy-loaded)
   image decodes - the hand-written <img> has no width/height attrs, so without
   this the browser/LiteSpeed placeholder blows the card height up. */
.single-release_note .xg-rn-availability-card.wp-block-image {
    aspect-ratio: 4 / 5 !important;
    overflow: visible !important;
}

.single-release_note .xg-rn-availability-card.wp-block-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: contain !important;
    border-radius: 10px;
}


/* ==============================================
   15. RELEASE NOTES: TITLE ROW FIX
   Target by Kadence uniqueID (xrn_master_header).
   Reliable since it lives in the fixed Content Block.
   ============================================== */

/* Header row - no extra padding needed; Kadence row handles 60px top (same as Article) */
.kt-layout-id-xrn_master_header .kt-inside-inner-col {
    overflow: visible !important;
}

/* ==============================================
   15. RELEASE NOTES: INNER POST BODY ROW CLEANUP
   Individual posts still contain the old xrn_master_body Kadence row
   (with a hidden nav column and a tabs content column).
   The Content Block template now provides the outer layout, so:
   - Hide the inner nav column (redundant with the template nav)
   - Collapse its grid track so the tabs fill full width
   - Reset inner row padding (outer template row handles spacing)
   ============================================== */

/* Hide the redundant nav column inside individual posts */
.kadence-columnxrn_master_timeline {
    display: none !important;
}

/* Collapse the inner grid when the nav column is hidden */
.kt-row-column-wrap:has(> .kadence-columnxrn_master_timeline) {

    grid-template-columns: 1fr !important;
}

/* Inner content column fills full width */
.kadence-columnxrn_master_content {
    max-width: 100% !important;
    width: 100% !important;
    grid-column: 1 !important;
}

/* Remove padding from the inner body row */
.kt-layout-id-xrn_master_body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



/* ==============================================
   16. RELEASE NOTES: MOBILE AND TABLET LAYOUT
   The Content Block template body row (xrn_master_body_tpl) stacks
   on mobile/tablet: content first, timeline below as a horizontal scroll strip.
   ============================================== */
@media (max-width: 1024px) {

    /* Stack the template body row into a single column via Grid */
    .kt-row-column-wrap:has(> .kadence-columnxrn_tpl_nav) {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* Content column: appears first */
    .kadence-columnxrn_tpl_content {
        order: 1 !important;
    }

    /* Nav column: appears second with a separator */
    .kadence-columnxrn_tpl_nav {
        order: 2 !important;
        border-top: 1px solid var(--theme-palette-color-5) !important;
        padding-top: 24px !important;
        margin-top: 40px !important;
    }

    /* Transform the vertical timeline into a horizontal scrollable PILL strip */
    nav.xg-timeline.wp-block-navigation > .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        border: none !important; /* Remove desktop vertical line */
        margin: 0 !important;
        padding: 10px 16px 20px 16px !important; /* Screen edge buffer for first/last items */
        align-items: center !important;
        gap: 12px !important; /* Add clean gap between pills */
        scrollbar-width: none !important;
    }
    nav.xg-timeline.wp-block-navigation > .wp-block-navigation__container::-webkit-scrollbar {
        display: none !important;
    }

    /* Cancel global 100% item width */
    nav.xg-timeline.wp-block-navigation .wp-block-navigation-item {
        width: auto !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Turn the link text into a modern standalone Pill - HIGH SPECIFICITY */
    nav.xg-timeline.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item__content {
        padding: 12px 30px !important; /* Made wider horizontally and vertically */
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 30px !important;
        background-color: var(--theme-palette-color-6) !important;
        color: var(--theme-palette-color-9) !important;
        border: 1px solid var(--theme-palette-color-5) !important;
        display: block !important;
        width: auto !important;
    }

    /* Hide items without a actual link (placeholder links) on mobile entirely */
    nav.xg-timeline.wp-block-navigation .wp-block-navigation-item.xg-timeline-placeholder {
        display: none !important;
    }

    /* Active Item Pill - High contrast XPENG Green - HIGH SPECIFICITY */
    nav.xg-timeline.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
        background-color: var(--theme-palette-color-1) !important;
        color: var(--theme-palette-color-4) !important;
        border-color: var(--theme-palette-color-1) !important;
        font-weight: 700 !important;
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.15) !important;
    }

    /* Hide ALL dots and circles on mobile - the Pill handles active states */
    nav.xg-timeline.wp-block-navigation .wp-block-navigation-item::before,
    nav.xg-timeline.wp-block-navigation .wp-block-navigation-item__content::before {
        display: none !important;
    }
}


/* ==============================================
   17. HOMEPAGE: TITLE CLIPPING FIX
   Custom display fonts (Babylon) with large ascenders can clip
   their bounding box rendering inside flex cols. 
   Adding slight padding guarantees they render cleanly.
   ============================================== */
.home h1,
.home h2,
.home .wp-block-post-title,
.home .wp-block-heading,
.home .wp-block-kadence-advancedheading,
.home .wp-block-kadence-advancedheading h1,
.home .wp-block-kadence-advancedheading h2,
.xg-home-v2 h1,
.xg-home-v2 h2,
.xg-home-v2 .wp-block-post-title,
.xg-home-v2 .wp-block-heading,
.xg-home-v2 .wp-block-kadence-advancedheading,
.xg-home-v2 .wp-block-kadence-advancedheading h1,
.xg-home-v2 .wp-block-kadence-advancedheading h2 {
    padding-top: 20px !important;
    overflow: visible !important;
    line-height: 1.3 !important;
}


/* ==============================================
   18. FRONTPAGE PREMIUM HERO STYLING
   ============================================== */

/* Primary Button Hover Glow */
.xg-btn-hero-primary .wp-element-button {
    transition: all 0.3s ease !important;
}
.xg-btn-hero-primary .wp-element-button:hover {
    box-shadow: 0px 8px 30px rgba(0, 255, 136, 0.5) !important;
    transform: translateY(-2px) !important;
    background-color: var(--theme-palette-color-2) !important;
}

/* Secondary Button Hover Fill */
.xg-btn-hero-secondary .wp-element-button {
    transition: all 0.3s ease !important;
}
.xg-btn-hero-secondary .wp-element-button:hover {
    background-color: var(--theme-palette-color-5) !important;
    color: var(--theme-palette-color-1) !important;
    transform: translateY(-2px) !important;
}

/* Mascot Floating Animation */
.xg-mascot-hero {
    animation: floatingMascot 4s ease-in-out infinite;
}

@keyframes floatingMascot {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}


/* ==============================================
   18b. HOME PULSE - merged sticky footer (home-v2)
   Shortcode [xpeng_home_pulse] - stocks + theme copyright in one bar
   ============================================== */

.xg-home-pulse {
    margin: 0;
    padding: 0;
}
.xg-home-pulse__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.75rem 0 0.35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.xg-home-pulse__badge {
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-palette-color-4);
    background: var(--theme-palette-color-1);
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    line-height: 1;
}
.xg-home-pulse__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-9);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.2;
    transition: border-color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.xg-home-pulse__chip:hover,
.xg-home-pulse__chip:focus-visible {
    border-color: var(--theme-palette-color-1);
    background: var(--theme-palette-color-5);
}
.xg-home-pulse__sym {
    font-weight: 700;
    color: var(--theme-palette-color-4);
}
.xg-home-pulse__val {
    font-weight: 600;
}
.xg-home-pulse__chg {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.xg-home-pulse__chip--up .xg-home-pulse__chg {
    color: var(--theme-palette-color-1);
}
.xg-home-pulse__chip--down .xg-home-pulse__chg {
    color: var(--theme-palette-color-10);
}
.xg-home-pulse__ex {
    font-size: 0.7rem;
    color: var(--theme-palette-color-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.xg-home-pulse__chip--xos .xg-home-pulse__sym,
.xg-home-pulse__chip--markets .xg-home-pulse__sym {
    color: var(--theme-palette-color-1);
}
.xg-home-pulse__fine {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--theme-palette-color-3);
}

[data-color-mode="dark"] .xg-home-pulse__chip {
    background: var(--theme-palette-color-5);
    border-color: var(--theme-palette-color-6);
}
[data-color-mode="dark"] .xg-home-pulse__chip:hover,
[data-color-mode="dark"] .xg-home-pulse__chip:focus-visible {
    background: var(--theme-palette-color-6);
}

/* Merged sticky footer - reuse Blocksy ct-footer DOM; stocks in ghost column (home-v2) */
.xg-home-pulse--dock-tr.ct-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 89;
    width: 100%;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: none;
    overflow-x: clip;
}
.xg-home-pulse--dock-tr.ct-footer [data-row="bottom"],
.xg-home-pulse--dock-tr.ct-footer .ct-container {
    pointer-events: auto;
}
/* Theme hides ghost column; home uses it for live stocks (right column). */
.xg-home-pulse--dock-tr.ct-footer [data-column="ghost"].xg-home-pulse__stocks-col {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    --horizontal-alignment: flex-end;
}
.xg-home-pulse--dock-tr .xg-home-pulse__stocks {
    margin: 0;
    padding: 0;
}
.xg-home-pulse--dock-tr .xg-home-pulse__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    gap: 0.5rem 0.85rem;
    overflow-x: hidden;
}
.xg-home-pulse--dock-tr .xg-home-pulse__badge {
    background: transparent;
    color: var(--theme-palette-color-1);
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}
.xg-home-pulse--dock-tr .xg-home-pulse__chip {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    line-height: inherit;
    color: var(--theme-text-color);
    gap: 0.35rem;
}
.xg-home-pulse--dock-tr .xg-home-pulse__chip:hover,
.xg-home-pulse--dock-tr .xg-home-pulse__chip:focus-visible {
    background: transparent;
    color: var(--theme-palette-color-1);
}
.xg-home-pulse--dock-tr .xg-home-pulse__sym {
    color: var(--theme-palette-color-9);
    font-weight: 600;
}
.xg-home-pulse--dock-tr .xg-home-pulse__val {
    color: var(--theme-palette-color-3);
    font-weight: 500;
}
.xg-home-pulse--dock-tr .xg-home-pulse__ex {
    font-size: 0.7rem;
    color: var(--theme-palette-color-9);
}
.xg-home-pulse--dock-tr .xg-home-pulse__fine {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Reserve room for the fixed dock: © + tagline + legal links row (2026-07-20). */
body.home,
body.page-id-2037,
body.xg-home-v2 {
    padding-bottom: calc(30px + 5.5rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 781px) {
    .xg-home-pulse--dock-tr.ct-footer [data-row="bottom"] > .ct-container {
        grid-template-columns: 1fr !important;
    }
    .xg-home-pulse--dock-tr.ct-footer [data-column="ghost"].xg-home-pulse__stocks-col {
        justify-content: flex-start;
        --horizontal-alignment: flex-start;
    }
    .xg-home-pulse--dock-tr .xg-home-pulse__track {
        justify-content: flex-start;
    }
    .xg-home-pulse--dock-tr .xg-home-pulse__ex {
        display: none;
    }
    /* Mobile: pulse bar scrolls with the page instead of eating viewport (owner 2026-07-20). */
    .xg-home-pulse--dock-tr.ct-footer {
        position: static;
        pointer-events: auto;
        padding-bottom: 0;
    }
    body.home,
    body.page-id-2037,
    body.xg-home-v2 {
        padding-bottom: 0;
    }
}
/* Live front + mockup - merged sticky footer replaces Blocksy copyright band */
body.home #footer.ct-footer,
body.page-id-2037 #footer.ct-footer,
body.xg-home-v2 #footer.ct-footer {
    display: none !important;
}

/* ==============================================
   18c. ABOUT - STOCK PAGE (P2.29)
   Shortcode [xpeng_stock_panel] on /about/stock/
   ============================================== */

.xg-stock-panel {
    margin: 1.5rem 0 2rem;
}
.xg-stock-panel__fine,
.xg-stock-panel__unavailable {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: var(--theme-palette-color-9);
    line-height: 1.45;
}
.xg-stock-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.xg-stock-panel__card {
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 12px;
    background: var(--theme-palette-color-6);
    scroll-margin-top: 140px;
}
.xg-stock-panel__card--up {
    border-left: 3px solid var(--theme-palette-color-1);
}
.xg-stock-panel__card--down {
    border-left: 3px solid var(--theme-palette-color-10);
}
.xg-stock-panel__meta {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-palette-color-9);
}
.xg-stock-panel__sym {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--theme-palette-color-4);
    line-height: 1.2;
}
.xg-stock-panel__price {
    margin: 0 0 0.15rem;
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--theme-palette-color-4);
    line-height: 1.15;
}
.xg-stock-panel__chg {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.xg-stock-panel__card--up .xg-stock-panel__chg {
    color: var(--theme-palette-color-1);
}
.xg-stock-panel__card--down .xg-stock-panel__chg {
    color: var(--theme-palette-color-10);
}
.xg-stock-panel__links {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--theme-palette-color-9);
}
.xg-stock-panel__links a {
    color: var(--theme-palette-color-1);
}
@media (max-width: 781px) {
    .xg-stock-panel__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Live front + mockup - Gutenberg hero is the real H1; hide theme page-title band */
body.home main .hero-section,
body.page-id-2037 main .hero-section {
    display: none !important;
}

/* ==============================================
   18c. YOUTUBE FEED - [xpeng_youtube_feed] link roundup
   ============================================== */

.xg-youtube-feed {
    margin: 2.5rem 0 2rem;
}
.xg-youtube-feed__intro {
    margin: 0 0 1rem;
    color: var(--theme-palette-color-3);
    font-size: 0.95rem;
}
.xg-youtube-feed__list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.xg-youtube-feed__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem 1rem;
    align-items: baseline;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-9);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.xg-youtube-feed__item:hover,
.xg-youtube-feed__item:focus-visible {
    border-color: var(--theme-palette-color-1);
    background: var(--theme-palette-color-5);
}
.xg-youtube-feed__channel {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-palette-color-1);
    white-space: nowrap;
}
.xg-youtube-feed__title {
    font-weight: 600;
    color: var(--theme-palette-color-4);
    line-height: 1.35;
}
.xg-youtube-feed__when {
    font-size: 0.8rem;
    color: var(--theme-palette-color-3);
    white-space: nowrap;
}
.xg-youtube-feed__fine {
    margin: 0.65rem 0 0;
    font-size: 0.72rem;
    color: var(--theme-palette-color-3);
}
@media (max-width: 640px) {
    .xg-youtube-feed__item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}
[data-color-mode="dark"] .xg-youtube-feed__item {
    background: var(--theme-palette-color-5);
    border-color: var(--theme-palette-color-6);
}


/* ==============================================
   18d. YOUTUBE INDEX - sidebar filters + card grid
   ============================================== */

.xg-youtube-index {
    margin: 1.5rem 0 2.5rem;
}
.xg-youtube-index__layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 1.75rem;
    align-items: start;
}
.xg-youtube-index__sidebar {
    grid-column: 1;
    grid-row: 3;
    position: sticky;
    top: 1.25rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
}
.xg-youtube-index__sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.xg-youtube-index__sidebar-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-palette-color-4);
}
.xg-youtube-index__sidebar-close {
    display: none;
    border: 0;
    background: transparent;
    color: var(--theme-palette-color-4);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}
.xg-youtube-index__section {
    border-top: 1px solid var(--theme-palette-color-5);
    padding: 0.65rem 0;
}
.xg-youtube-index__section:first-of-type {
    border-top: 0;
}
.xg-youtube-index__section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-palette-color-3);
    cursor: pointer;
    list-style: none;
}
.xg-youtube-index__section-title::-webkit-details-marker {
    display: none;
}
.xg-youtube-index__option-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.55rem;
}
.xg-youtube-index__option {
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--theme-palette-color-4);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.xg-youtube-index__option:hover,
.xg-youtube-index__option:focus-visible {
    border-color: var(--theme-palette-color-5);
}
.xg-youtube-index__option.is-active {
    color: var(--theme-palette-color-1);
    border-color: var(--theme-palette-color-1);
}
.xg-youtube-index__filter-search {
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-4);
    font-size: 0.85rem;
}
.xg-youtube-index__checklist {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.5rem;
    max-height: 11rem;
    overflow-y: auto;
}
.xg-youtube-index__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0.15rem;
    font-size: 0.84rem;
    color: var(--theme-palette-color-4);
    cursor: pointer;
}
.xg-youtube-index__check[hidden] {
    display: none;
}
.xg-youtube-index__check input {
    margin-top: 0.15rem;
    accent-color: var(--theme-palette-color-1);
}
.xg-youtube-index__check:has(input:checked) span {
    color: var(--theme-palette-color-1);
    font-weight: 600;
}
.xg-youtube-index__sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--theme-palette-color-5);
}
.xg-youtube-index__reset,
.xg-youtube-index__apply {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.xg-youtube-index__reset {
    border: 1px solid var(--theme-palette-color-5);
    background: transparent;
    color: var(--theme-palette-color-3);
}
.xg-youtube-index__reset:hover,
.xg-youtube-index__reset:focus-visible {
    border-color: var(--theme-palette-color-1);
    color: var(--theme-palette-color-1);
}
.xg-youtube-index__apply {
    display: none;
    border: 1px solid var(--theme-palette-color-1);
    background: var(--theme-palette-color-1);
    color: var(--theme-palette-color-9);
}
.xg-youtube-index__chips-row {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}
.xg-youtube-index__toolbar {
    grid-column: 2;
    grid-row: 2;
}
.xg-youtube-index__main {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
}
.xg-youtube-index__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    margin: 0;
    min-width: 0;
}
.xg-youtube-index__open-filters {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-4);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.xg-youtube-index__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--theme-palette-color-1);
    color: var(--theme-palette-color-9);
    font-size: 0.72rem;
    font-weight: 700;
}
.xg-youtube-index__filter-badge[hidden] {
    display: none;
}
.xg-youtube-index__count {
    margin: 0;
    font-size: 0.85rem;
    color: var(--theme-palette-color-3);
    flex: 1;
}
.xg-youtube-index__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    margin: 0;
}
.xg-youtube-index__chips[hidden] {
    display: none;
}
.xg-youtube-index__reset--chips-row {
    flex-shrink: 0;
    margin-left: auto;
}
.xg-youtube-index__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--theme-palette-color-1);
    background: transparent;
    color: var(--theme-palette-color-1);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.xg-youtube-index__chip:hover,
.xg-youtube-index__chip:focus-visible {
    background: var(--theme-palette-color-1);
    color: var(--theme-palette-color-9);
}
.xg-youtube-index__chip-x {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.85;
}
.xg-youtube-index__backdrop {
    display: none;
}
.xg-youtube-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.xg-youtube-index__card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-9);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.xg-youtube-index__card:hover,
.xg-youtube-index__card:focus-visible {
    border-color: var(--theme-palette-color-1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.xg-youtube-index__card[hidden] {
    display: none;
}
.xg-youtube-index__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--theme-palette-color-5);
}
.xg-youtube-index__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xg-youtube-index__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1rem 1rem;
    flex: 1;
}
.xg-youtube-index__channel {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-palette-color-1);
}
.xg-youtube-index__title {
    font-weight: 600;
    color: var(--theme-palette-color-4);
    line-height: 1.35;
    font-size: 0.95rem;
}
.xg-youtube-index__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--theme-palette-color-3);
}
.xg-youtube-index__fine {
    margin: 1rem 0 0;
    font-size: 0.72rem;
    color: var(--theme-palette-color-3);
}
.xg-youtube-index__empty {
    color: var(--theme-palette-color-3);
}
[data-color-mode="dark"] .xg-youtube-index__card,
[data-color-mode="dark"] .xg-youtube-index__sidebar,
[data-color-mode="dark"] .xg-youtube-index__open-filters {
    background: var(--theme-palette-color-5);
    border-color: var(--theme-palette-color-6);
}
[data-color-mode="dark"] .xg-youtube-index__filter-search {
    background: var(--theme-palette-color-5);
    border-color: var(--theme-palette-color-6);
    color-scheme: dark;
}
body.xg-yt-filters-modal-open {
    overflow: hidden;
}
@media (max-width: 900px) {
    .xg-youtube-index__layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .xg-youtube-index__chips-row {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0.75rem;
    }
    .xg-youtube-index__reset--chips-row {
        display: none;
    }
    .xg-youtube-index__toolbar {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0.75rem;
    }
    .xg-youtube-index__main {
        grid-column: 1;
        grid-row: 3;
    }
    .xg-youtube-index__open-filters {
        display: inline-flex;
    }
    .xg-youtube-index__sidebar {
        grid-column: auto;
        grid-row: auto;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 100001;
        width: min(92vw, 360px);
        max-height: none;
        border-radius: 0;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
    }
    .xg-youtube-index.is-filters-open .xg-youtube-index__sidebar {
        transform: translateX(0);
    }
    .xg-youtube-index__sidebar-close {
        display: block;
    }
    .xg-youtube-index__apply {
        display: block;
    }
    .xg-youtube-index__backdrop {
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(0, 0, 0, 0.55);
    }
    .xg-youtube-index.is-filters-open .xg-youtube-index__backdrop {
        display: block;
    }
}
@media (min-width: 901px) {
    .xg-youtube-index__sidebar-foot .xg-youtube-index__apply {
        display: none;
    }
}

/* Registrations dashboard — show full Year/Model lists; exclusive accordions */
.xg-registrations-dashboard .xg-youtube-index__sidebar {
    max-height: none;
    overflow-y: visible;
}
.xg-registrations-dashboard .xg-youtube-index__checklist {
    max-height: none;
    overflow: visible;
}
.xg-registrations-dashboard .xg-youtube-index__section-title::after {
    content: "+";
    float: right;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--theme-palette-color-9);
}
.xg-registrations-dashboard .xg-youtube-index__section[open] > .xg-youtube-index__section-title::after {
    content: "−";
}


/* ==============================================
   18e. YOUTUBE HOME TEASER - [xpeng_youtube_home_teaser]
   ============================================== */

.xg-youtube-home__intro {
    margin: 0 0 1rem;
    color: var(--theme-palette-color-3);
}
.xg-youtube-home__hint {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--theme-palette-color-3);
}
.xg-youtube-home__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
    .xg-youtube-home__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
.xg-youtube-home__card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-9);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
    box-shadow: none;
}
.xg-youtube-home__card:hover,
.xg-youtube-home__card:focus-visible {
    border-color: var(--theme-palette-color-1);
    transform: translateY(-2px);
}
.xg-youtube-home__card[hidden] {
    display: none;
}
.xg-youtube-home__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--theme-palette-color-5);
}
.xg-youtube-home__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xg-youtube-home__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.7rem 0.75rem;
}
.xg-youtube-home__channel {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-palette-color-1);
}
.xg-youtube-home__title {
    font-weight: 600;
    color: var(--theme-palette-color-4);
    line-height: 1.3;
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xg-youtube-home__empty {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--theme-palette-color-3);
}
.xg-youtube-home__actions {
    margin: 0;
}
[data-color-mode="dark"] .xg-youtube-home__card {
    background: var(--theme-palette-color-5);
    border-color: var(--theme-palette-color-6);
    box-shadow: none;
}


/* ==============================================
   18f. HOME V2 - section rhythm (live / + /home-v2/)
   .xg-home-v2 body class covers translated fronts (e.g. /da/) where `.home` is absent.
   ============================================== */

body.home .xg-home-v2-section-head,
body.page-id-2037 .xg-home-v2-section-head,
body.xg-home-v2 .xg-home-v2-section-head {
    padding-top: 2rem !important;
    padding-bottom: 0.5rem !important;
}
body.home .xg-home-v2-section-head .wp-block-heading,
body.page-id-2037 .xg-home-v2-section-head .wp-block-heading,
body.xg-home-v2 .xg-home-v2-section-head .wp-block-heading {
    margin-top: 0;
    margin-bottom: 0.35rem;
}
body.home .xg-home-v2-section-head .wp-block-paragraph,
body.page-id-2037 .xg-home-v2-section-head .wp-block-paragraph,
body.xg-home-v2 .xg-home-v2-section-head .wp-block-paragraph {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--theme-palette-color-3);
}
body.home .xg-home-xos-releases,
body.home .xg-youtube-home,
body.home .wp-block-kadence-posts.xg-hub-query-cards,
body.page-id-2037 .xg-home-xos-releases,
body.page-id-2037 .xg-youtube-home,
body.page-id-2037 .wp-block-kadence-posts.xg-hub-query-cards,
body.xg-home-v2 .xg-home-xos-releases,
body.xg-home-v2 .xg-youtube-home,
body.xg-home-v2 .wp-block-kadence-posts.xg-hub-query-cards {
    margin-top: 0;
    margin-bottom: 2rem;
}
body.home .xg-youtube-home__actions,
body.page-id-2037 .xg-youtube-home__actions,
body.xg-home-v2 .xg-youtube-home__actions {
    margin-top: 0;
}


/* ==============================================
   19. ARCHETYPE 4: COMPARISON ACCORDION STYLING
   Forces native Kadence Accordions to match the dark theme and look premium.
   Targets .wp-block-kadence-accordion
   ============================================== */

/* Outer wrap and padding cleanup (comparison accordions only - not peek/XOS menu) */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-wrap {
    gap: 8px !important; /* Space between panes */
    display: flex !important;
    flex-direction: column !important;
}

/* Individual Accordion Pane */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-pane {
    background-color: var(--theme-palette-color-6) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    border-radius: 8px !important;
    overflow: hidden !important; /* Keep rounded corners when open */
    margin-bottom: 0 !important;
}

/* Accordion Header (The clickable bar) */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-header-wrap {
    background-color: transparent !important;
    padding: 16px 20px !important;
    border: none !important;
}

/* Accordion Title Text */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-blocks-accordion-title {
    color: var(--theme-palette-color-4) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* Accordion Open State - Highlight Title Green */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-pane.kt-active .kt-blocks-accordion-title,
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-pane.kt-active .kt-accordion-icon {
    color: var(--theme-palette-color-1) !important;
}

/* Accordion Content Area */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-panel-inner {
    background-color: var(--theme-palette-color-7) !important; /* Sink into background */
    border-top: 1px solid var(--theme-palette-color-5) !important;
    padding: 20px !important;
    color: var(--theme-palette-color-3) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Fix any weird margins on lists/paragraphs inside the accordion */
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-panel-inner p:last-child,
.wp-block-kadence-accordion:not(.xg-peek-accordion) .kt-accordion-panel-inner .wp-block-list:last-child {
    margin-bottom: 0 !important;
}


/* ==============================================
   20. ARCHETYPE 4: INTERACTIVE MARKETS MAP
   Styles the SVG paths and the floating data modal.
   ============================================== */

/* The Map Wrapper */
.xg-map-container {
    position: relative;
    width: 100%;
    margin: 2rem 0;
    background-color: var(--theme-palette-color-7);
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 12px;
    padding: 2rem;
    overflow: hidden;
}

/* The SVG */
.xg-interactive-map {
    width: 100%;
    height: auto;
}

/* Base Paths (Inactive) */
.xg-interactive-map .xg-market-base {
    fill: var(--theme-palette-color-5);
}

/* Active Market Paths */
.xg-interactive-map path.xg-market-active {
    fill: var(--theme-palette-color-6);
    transition: all 0.3s ease;
    cursor: pointer;
}
.xg-interactive-map path.xg-market-selected {
    fill: var(--theme-palette-color-2) !important;
}

/* Active Market Pins (when we add class later) */
.xg-interactive-map circle.xg-map-pin {
    fill: var(--theme-palette-color-1);
    transition: all 0.3s ease;
    pointer-events: none; /* Let the path underneath handle clicks/hover bounding boxes if needed */
}

/* Hover States */
.xg-interactive-map path.xg-market-active:hover,
.xg-interactive-map path.xg-market-active.is-selected {
    fill: var(--theme-palette-color-2);
}

/* We will handle pin scaling via JS if hovering a country, or natively if the pin itself receives the .is-selected class */
.xg-interactive-map circle.xg-map-pin.is-selected {
    fill: #ffffff;
    r: 8;
}

/* The Modal Container */
.xg-map-modal {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through when hidden */
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.xg-map-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* The Modal Box (Reuses .xg-muted-panel sizing) */
.xg-map-modal-inner {
    width: 320px;
    max-width: 100%;
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    transform: translateX(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.xg-map-modal.is-visible .xg-map-modal-inner {
    transform: translateX(0);
}

/* Modal Close Button */
.xg-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: var(--theme-palette-color-4);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.xg-modal-close:hover {
    color: var(--theme-palette-color-1);
}

/* Modal Typography overrides */
.xg-map-modal-inner h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 24px;
    color: var(--theme-palette-color-4);
}
.xg-map-modal-inner .xg-modal-date {
    font-size: 14px;
    color: var(--theme-palette-color-3);
    margin-bottom: 15px;
}
.xg-map-modal-inner .xg-modal-info {
    font-size: 15px;
    color: var(--theme-palette-color-9);
    line-height: 1.6;
    margin-bottom: 0;
}
/* Mobile adaptation */
@media (max-width: 768px) {
    .xg-map-container { padding: 1rem; }
    .xg-map-modal {
        padding: 1rem;
        align-items: flex-end;
        justify-content: center;
    }
    .xg-map-modal-inner {
        width: 100%;
        transform: translateY(20px);
    }
    .xg-map-modal.is-visible .xg-map-modal-inner {
        transform: translateY(0);
    }
}

/* ==============================================
   18. PEEK-CARD PATTERN (Collapsible Step Cards)
   Transforms a native Kadence Accordion block into a sleek 
   dark-mode step card.
   Apply 'xg-peek-accordion' to the Kadence Accordion block.
   ============================================== */

/* Container overrides: reset Kadence default box styles */
.xg-peek-accordion .kt-accordion-pane {
    background-color: var(--theme-palette-color-8) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    /* Pane must snap with panel - never animate card height (Customizer transition:all) */
    transition: none !important;
}

/* Header / Title area */
.xg-peek-accordion .kt-accordion-wrap,
.xg-peek-accordion .kt-accordion-inner-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.xg-peek-accordion .kt-accordion-header-wrap,
.xg-peek-accordion .kt-blocks-accordion-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: border-left-color 0.2s ease !important;
}
.xg-peek-accordion .kt-accordion-header-wrap {
    padding: 18px 24px !important;
    border-left: 4px solid var(--theme-palette-color-1);
}

/* Title text and Icon - Kadence uses .kt-blocks-accordion-title on the span */
.xg-peek-accordion .kt-blocks-accordion-title,
.xg-peek-accordion .kt-accordion-title {
    color: var(--theme-palette-color-1);
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.xg-peek-accordion .kt-blocks-accordion-icon-trigger::before,
.xg-peek-accordion .kt-blocks-accordion-icon-trigger::after {
    background: var(--theme-palette-color-1) !important;
    background-color: var(--theme-palette-color-1) !important;
    transition-property: background-color, transform !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

/* Hover State */
.xg-peek-accordion .kt-accordion-header-wrap:hover .kt-blocks-accordion-title,
.xg-peek-accordion .kt-accordion-header-wrap:hover .kt-accordion-title {
    color: var(--theme-palette-color-2);
}
.xg-peek-accordion .kt-accordion-header-wrap:hover .kt-blocks-accordion-icon-trigger::after,
.xg-peek-accordion .kt-accordion-header-wrap:hover .kt-blocks-accordion-icon-trigger::before {
    background-color: var(--theme-palette-color-2) !important;
}
.xg-peek-accordion .kt-accordion-header-wrap:hover {
    border-left-color: var(--theme-palette-color-2);
}

/* Open State Header - keep same card surface as collapsed (pane color-8 shows through).
   Do not use color-7 (page bg) - that reads as white/black strip above the content. */
.xg-peek-accordion .kt-accordion-header-wrap:has(.kt-blocks-accordion-header.kt-accordion-panel-active) {
    background-color: transparent !important;
    border-left-color: var(--theme-palette-color-1);
    box-shadow: none !important;
}
.xg-peek-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-title,
.xg-peek-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-accordion-title {
    color: var(--theme-palette-color-1);
}

/* Content Area - height transitions only while Kadence collapsing/expanding */
.xg-peek-accordion .kt-accordion-panel {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    overflow: hidden !important;
}

.xg-peek-accordion .kt-accordion-panel.kt-panel-is-collapsing {
    transition: height 0.34s ease-in !important;
    height: 0 !important;
}

.xg-peek-accordion .kt-accordion-panel.kt-panel-is-expanding {
    transition: height 0.38s ease-out !important;
}

.xg-peek-accordion .kt-accordion-panel-inner {
    background: transparent !important;
    background-color: transparent !important;
    padding: 24px !important;
    border: none !important;
}

/* Screen-reader / TOC-only anchors inside accordion panes (XOS Settings) */
.xg-toc-anchor {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.xg-peek-accordion .kt-accordion-panel-inner {
    position: relative;
}

/* TOC jump: align accordion pane title below sticky header (not hidden in-pane H2). */
.xg-toc-accordion-sections .wp-block-kadence-pane,
.xg-toc-accordion-sections .kt-accordion-header-wrap {
    scroll-margin-top: 140px;
}

/* No-TOC articles (accordion pane titles are the menu nav) - body.xg-no-toc added
   server-side (snippet body_class filter), so CSS never hardcodes a post ID.
   Article Master row 992_65b1ad-98 is grid 1fr + 2fr; hiding the TOC column
   leaves the body in the narrow left track unless the row collapses to one col. */
.xg-no-toc .kb-row-layout-id992_65b1ad-98 > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
}

.xg-no-toc .kadence-column992_fbda9d-5b {
    display: none !important;
}

.xg-no-toc .kadence-column992_9d8da7-34 {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* No-TOC menu accordions: don't let scroll anchoring yank the viewport when a pane above collapses */
.xg-no-toc .xg-peek-accordion,
.xg-no-toc .xg-peek-accordion .kt-accordion-inner-wrap,
.xg-no-toc .xg-peek-accordion .kt-accordion-pane {
    overflow-anchor: none;
}

/* XOS Settings - community pick highlight (brand green; beat accordion panel text color) */
.wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-panel-inner span.xg-settings-pick,
.wp-block-kadence-accordion .kt-accordion-panel-inner .xg-settings-pick,
.xg-peek-accordion .xg-settings-pick,
.entry-content .xg-settings-pick {
    color: var(--theme-palette-color-1, #00ba5d) !important;
    font-weight: 600;
}

.xg-peek-accordion .wp-block-list .wp-block-list {
    margin-top: 0.35em;
    margin-bottom: 0.5em;
    padding-left: 1.25em;
}

/* ==============================================
   18b. PEEK ACCORDION MOTION - footer override (snippet)
   Customizer may still ship transition:all on panes; these rules load
   in wp_footer with higher specificity so Kadence height animation stays smooth.
   ============================================== */
body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-pane,
body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-wrap,
body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-inner-wrap {
    transition: none !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-header-wrap {
    transition: border-left-color 0.2s ease !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-header {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-panel {
    overflow: hidden !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-panel.kt-panel-is-collapsing {
    transition: height 0.34s ease-in !important;
    height: 0 !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-panel.kt-panel-is-expanding {
    transition: height 0.38s ease-out !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-icon-trigger::before,
body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-icon-trigger::after {
    transition-property: background-color, transform !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

/* Open-state indicator - correct Kadence class (.kt-accordion-panel-active on the
   header button). Lives here too so it works against stale Customizer §18. */
body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-header-wrap:has(.kt-blocks-accordion-header.kt-accordion-panel-active) {
    background-color: transparent !important;
    border-left-color: var(--theme-palette-color-1) !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-header.kt-accordion-panel-active {
    background-color: transparent !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-title,
body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-title {
    color: var(--theme-palette-color-1, #00ba5d) !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-header-wrap:hover .kt-blocks-accordion-title,
body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-header-wrap:hover .kt-accordion-title {
    color: var(--theme-palette-color-2, #00d66c) !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-title,
body .wp-block-kadence-accordion.xg-peek-accordion .kt-blocks-accordion-header.kt-accordion-panel-active .kt-accordion-title {
    color: var(--theme-palette-color-1, #00ba5d) !important;
}

body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-pane {
    background-color: var(--theme-palette-color-8) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
}

@media (prefers-reduced-motion: reduce) {
    body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-panel.kt-panel-is-collapsing,
    body .wp-block-kadence-accordion.xg-peek-accordion .kt-accordion-panel.kt-panel-is-expanding {
        transition-duration: 0.01ms !important;
    }
}


/* ==============================================
   19. PHONE FRAME UTILITY
   Automatically draws a premium smartphone bezel 
   around a mobile screenshot.
   Apply 'xg-phone-frame' to a Group wrapping the image.
   ============================================== */

.xg-phone-frame {
    display: table; /* Shrink-wraps to image geometry */
    margin: 10px auto 20px auto;
    max-width: 300px; /* Safe mobile height limit */
    width: 100%;
    border-radius: 36px;
    background-color: #000000; /* Pure black bezel */
    padding: 8px; /* Hardware bezel thickness */
    box-shadow: 
        inset 0 0 0 2px #333333,       /* Inner metallic rim */
        0 12px 30px rgba(0,0,0,0.6),   /* Deep drop shadow */
        0 0 0 1px rgba(255,255,255,0.05); /* Outer edge highlight */
    position: relative;
}

/* The actual image inside the frame */
.xg-phone-frame img,
.xg-phone-frame figure {
    border-radius: 28px !important; /* Inner screen curvature */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* Simulate the top sensor notch / dynamic island */
.xg-phone-frame::after {
    content: '';
    position: absolute;
    top: 14px; /* Sits exactly at the top of the 'screen' */
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background-color: #000000;
    border-radius: 12px;
    z-index: 2; /* Sits on top of the image */
}

/* ==============================================
   20. OPEN DECK HOVER EFFECTS (.xg-hover-deck)
   Used for Archetype 2 Interactive Guides
   ============================================== */

.xg-hover-deck {
    transition: all 0.3s ease !important;
    border: 1px solid var(--theme-palette-color-5) !important;
    background-color: var(--theme-palette-color-6) !important;
    padding: 24px;
    border-radius: 24px;
    margin-bottom: 80px !important;
}

.xg-hover-deck:hover {
    background-color: var(--theme-palette-color-6) !important;
    border-color: var(--theme-palette-color-1) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.xg-hover-deck:hover .xg-phone-frame {
    box-shadow: 
        0 18px 40px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.05); /* Highlight phone bezel */
}

/* Apple Watch device mockup - mirrors xg-phone-frame, no Dynamic Island */
.xg-watch-frame {
    display: table;
    position: relative;
    margin: 10px auto 20px auto;
    max-width: 190px;
    width: 100%;
    padding: 10px;
    border-radius: 38px;
    background: linear-gradient(160deg, #3d3d3d 0%, #141414 42%, #050505 100%);
    box-shadow:
        inset 0 0 0 2px #4a4a4a,
        inset 0 0 0 4px #111111,
        0 14px 34px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.xg-watch-frame a {
    display: block;
    text-decoration: none;
}

.xg-watch-frame img {
    border-radius: 28px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    cursor: zoom-in;
    aspect-ratio: 396 / 484;
    object-fit: cover;
    object-position: top center;
}

.xg-watch-face-deck {
    text-align: center;
}

.xg-watch-face-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.xg-watch-face-item {
    flex: 0 0 170px;
    max-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xg-watch-face-row .xg-watch-frame {
    flex: 0 0 auto;
    max-width: 170px;
    width: 100%;
}

.xg-watch-face-caption {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--theme-palette-color-3, #c6c6c6);
    text-align: center;
}

.xg-hover-deck .wp-block-column .xg-watch-frame {
    margin: 0 auto;
}

.xg-hover-deck:hover .xg-watch-frame {
    box-shadow:
        inset 0 0 0 2px #4a4a4a,
        inset 0 0 0 4px #111111,
        0 20px 44px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ==============================================
   21. PHONE FRAME MODAL INTERACTION
   Lightbox modal layer for App V3 images
   ============================================== */

#xpeng-phone-modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#xpeng-phone-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal variant of the phone frame */
#xpeng-phone-modal .xg-phone-frame {
    margin: 0;
    cursor: default;
    max-width: none !important; /* Free from original 300px limit */
    width: auto !important; /* Shrink-wrap to the image */
    display: inline-block !important; /* ensures tight wrapping */
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 
        inset 0 0 0 2px #333333,
        0 25px 60px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.05);
}

#xpeng-phone-modal.is-active .xg-phone-frame,
#xpeng-phone-modal.is-active .xg-watch-frame {
    transform: scale(1) translateY(0);
}

#xpeng-phone-modal .xg-watch-frame {
    margin: 0;
    cursor: zoom-out;
    max-width: none !important;
    width: auto !important;
    display: inline-block !important;
    padding: 14px;
    border-radius: 48px;
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        inset 0 0 0 2px #4a4a4a,
        inset 0 0 0 4px #111111,
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

#xpeng-phone-modal .xg-phone-frame {
    cursor: zoom-out;
}

#xpeng-phone-modal-img {
    height: 85vh; /* This drives the entire size of the frame */
    max-height: 800px; /* Optional safety limit */
    width: auto !important;
    max-width: 85vw; /* Keeps it contained on mobile screens */
    margin: 0 !important;
    display: block !important;
    cursor: zoom-out;
    pointer-events: auto;
}

#xpeng-phone-modal.is-watch #xpeng-phone-modal-img {
    height: auto !important;
    max-height: 72vh;
    max-width: min(340px, 72vw);
    width: auto !important;
    aspect-ratio: 396 / 484;
    object-fit: cover;
    border-radius: 36px !important;
}

/* ==============================================
   21b. ARTICLE MEDIA LIGHTBOX
   Full-size view for .xg-article-image / .xg-article-video (see functions.php)
   ============================================== */

#xg-image-lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999998;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
#xg-image-lightbox.is-active {
    opacity: 1;
    pointer-events: auto;
}
body.xg-image-lightbox-open {
    overflow: hidden;
}
#xg-image-lightbox .xg-image-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    opacity: 0.85;
}
#xg-image-lightbox .xg-image-lightbox__close:hover {
    opacity: 1;
}
#xg-image-lightbox .xg-image-lightbox__nav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0 0 4px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 2.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease;
}
#xg-image-lightbox.has-nav:not(.is-video) .xg-image-lightbox__nav {
    display: flex;
}
#xg-image-lightbox .xg-image-lightbox__nav:hover,
#xg-image-lightbox .xg-image-lightbox__nav:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
}
#xg-image-lightbox .xg-image-lightbox__nav--prev {
    left: 14px;
}
#xg-image-lightbox .xg-image-lightbox__nav--next {
    right: 14px;
}
@media (max-width: 600px) {
    #xg-image-lightbox .xg-image-lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }
    #xg-image-lightbox .xg-image-lightbox__nav--prev {
        left: 4px;
    }
    #xg-image-lightbox .xg-image-lightbox__nav--next {
        right: 4px;
    }
}
#xg-image-lightbox .xg-image-lightbox__figure {
    margin: 0;
    max-width: min(96vw, 1400px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}
#xg-image-lightbox .xg-image-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 2.5rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    cursor: zoom-out;
}
#xg-image-lightbox .xg-image-lightbox__video {
    display: none;
    max-width: 100%;
    max-height: calc(92vh - 2.5rem);
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    cursor: default;
    background: #000;
}
#xg-image-lightbox.is-video .xg-image-lightbox__img {
    display: none;
}
#xg-image-lightbox.is-video .xg-image-lightbox__video {
    display: block;
}
#xg-image-lightbox .xg-image-lightbox__caption {
    margin: 12px 0 0;
    max-width: 60ch;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
}
#xg-image-lightbox .xg-image-lightbox__caption:empty {
    display: none;
}

/* ==============================================
   10. INTERACTIVE MARKETS MAP
   ============================================== */
.xg-market-base {
    fill: var(--theme-palette-color-6, #333333);
    stroke: var(--theme-palette-color-3, #888888);
    stroke-width: 0.3px;
    transition: fill 0.3s ease;
}
.xg-market-active {
    fill: var(--theme-palette-color-1, #a5c349) !important;
    cursor: pointer;
}
.xg-market-active:hover {
    fill: var(--theme-palette-color-3, #ffffff) !important;
}

/* Modal */
.xg-arch4-modal {
    display: none;
    position: absolute;
    top: auto !important;
    bottom: 24px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
    z-index: 2000;
}
.xg-arch4-modal.show {
    display: block;
    animation: modalFadeIn 0.3s ease forwards;
}
.xg-arch4-modal-inner {
    background: var(--theme-palette-color-5);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--theme-palette-color-3, #e0e0e0);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
    text-align: left;
}
.xg-arch4-modal-inner > p,
.xg-arch4-modal-inner p:empty,
.xg-arch4-modal-inner br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}
.xg-arch4-modal-inner > div,
.xg-arch4-modal-inner > span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Hover Lift */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Map Containers */
.xg-map-controls-row {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.xg-map-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    gap: 24px;
}
p.xg-badge.xg-map-pill {
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0 !important;
}
p.xg-badge.xg-active {
    background-color: var(--theme-palette-color-1) !important;
    border-color: var(--theme-palette-color-1) !important;
    color: var(--theme-palette-color-8) !important;
    font-weight: bold;
    box-shadow: 0 0 10px color-mix(in srgb, var(--theme-palette-color-1) 20%, transparent);
}
.xg-map-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 !important;
    background: var(--theme-palette-color-5);
    border-radius: 12px;
    border: 1px solid var(--theme-palette-color-3, #e0e0e0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.xg-map-container > p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
.xg-interactive-map {
    transition: all 0.5s ease;
    width: 100%;
    height: auto;
    display: block;
}

/* Grids & Cards */
.xg-offices-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
    justify-content: center;
    gap: 45px;
    align-content: start;
    max-width: 1040px;
    margin: 0 auto;
}
.xg-office-region {
    min-width: 0;
}
.xg-office-region > h4 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--theme-palette-color-1);
    padding-bottom: 5px;
    color: var(--theme-palette-color-4) !important;
}
.xg-office-card {
    display: grid;
    grid-template-columns: 105px 1fr;
    align-items: baseline;
    border-bottom: 1px solid var(--theme-palette-color-5);
    padding-bottom: 12px;
    margin-bottom: 12px;
    gap: 15px;
}
.xg-office-card .xg-city-name {
    font-weight: 700;
    color: var(--theme-palette-color-4) !important;
}
.xg-office-card:last-child {
    border-bottom: none;
}
.xg-office-card > p,
.xg-office-card p:empty,
.xg-office-card br {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
}
.xg-office-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    width: 100%;
}
.xg-office-card-badges .xg-badge {
    flex-shrink: 0;
}

.xg-market-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.xg-market-card {
    cursor: pointer;
    background: var(--theme-palette-color-6);
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--theme-palette-color-5);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
}
.xg-market-card:hover {
    border-color: var(--theme-palette-color-1);
}
.xg-market-card-header {
    display: contents;
}
.xg-market-card-title {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    color: var(--theme-palette-color-4) !important;
}
.xg-market-card-start {
    font-size: 13px;
    color: var(--theme-palette-color-3);
    grid-column: span 2;
    margin-top: 4px;
}
.xg-market-card-info {
    font-size: 13px;
    line-height: 1.4;
    color: var(--theme-palette-color-9);
    grid-column: span 2;
    margin-top: 2px;
}

/* Reset badge styles specifically for grids so they don't use full padding */
.xg-office-card-badges .xg-badge,
.xg-market-card-header .xg-badge {
    margin: 0 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
}

/* Explicit colors for directory badges */
.xg-badge-primary {
    background: var(--theme-palette-color-1) !important;
    color: #fff !important;
    border: none !important;
}
.xg-badge-secondary {
    background: transparent !important;
    color: var(--theme-palette-color-3) !important;
    border: 1px solid var(--theme-palette-color-5) !important;
}

/* 13. WP Core Bugfixes */
/* Hide Created Date if Modified Date exists next to it */
.wp-block-post-date__created-date:has(+ .wp-block-post-date__modified-date) {
    display: none;
}

/* ==============================================
   L03 LAUNCH BANNER - countdown -> "launched"
   Rendered by [xpeng_l03_launch_banner]. The .is-launched state is set by PHP on
   page load and by JS the moment the clock hits zero, so the front page never shows
   a dead countdown.
   ============================================== */

.xg-launch-banner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: stretch;
    gap: 0;
    margin: 0 0 2.5rem;
    border: 1px solid var(--theme-palette-color-1);
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 85% -20%, color-mix(in srgb, var(--theme-palette-color-1) 12%, transparent), transparent 60%),
        var(--theme-palette-color-6);
    box-shadow: 0 0 28px color-mix(in srgb, var(--theme-palette-color-1) 15%, transparent);
}
.xg-launch-banner__media {
    position: relative;
    min-height: 210px;
    overflow: hidden;
}
.xg-launch-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Favor the lower part of the frame: keeps the car whole, trims sky instead */
    object-position: center 75%;
    display: block;
    transition: transform 5s ease;
}
.xg-launch-banner:hover .xg-launch-banner__img {
    transform: scale(1.06);
}
/* Fade the photo into the panel so there is no hard seam between image and copy */
.xg-launch-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, var(--theme-palette-color-6) 98%);
    pointer-events: none;
}
.xg-launch-banner__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1.75rem;
}
.xg-launch-banner__kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-palette-color-1);
}
.xg-launch-banner__kicker::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-palette-color-1);
    animation: xg-launch-pulse 2s ease-out infinite;
}
.xg-launch-banner.is-launched .xg-launch-banner__kicker::before {
    animation: none;
}
@keyframes xg-launch-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-palette-color-1) 55%, transparent); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.xg-launch-banner__title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--theme-palette-color-9);
}
/* Static date is the no-JS fallback; the script replaces it with one __seg box per unit */
.xg-launch-banner__clock {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.45rem 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--theme-palette-color-9);
}
.xg-launch-banner__seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 3.2rem;
    padding: 0.5rem 0.55rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--theme-palette-color-1) 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-palette-color-1) 8%, transparent);
}
.xg-launch-banner__num {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-palette-color-4);
}
.xg-launch-banner__unit {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-palette-color-9);
}
.xg-launch-banner.is-launched .xg-launch-banner__clock {
    font-size: 1rem;
    font-weight: 400;
    color: var(--theme-palette-color-3);
}
.xg-launch-banner__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.9rem 0 0;
}
.xg-launch-banner__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--theme-palette-color-5);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--theme-palette-color-9);
    transition: all 0.2s ease;
}
.xg-launch-banner__btn:hover {
    border-color: var(--theme-palette-color-1);
    color: var(--theme-palette-color-1);
}
.xg-launch-banner__btn--primary {
    background: var(--theme-palette-color-1);
    border-color: var(--theme-palette-color-1);
    color: var(--theme-palette-color-4);
    box-shadow: 0 0 14px color-mix(in srgb, var(--theme-palette-color-1) 35%, transparent);
}
.xg-launch-banner__btn--primary:hover {
    background: var(--theme-palette-color-2);
    border-color: var(--theme-palette-color-2);
    color: var(--theme-palette-color-4);
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .xg-launch-banner {
        grid-template-columns: 1fr;
    }
    .xg-launch-banner__media {
        min-height: 180px;
    }
    .xg-launch-banner__media::after {
        background: linear-gradient(to bottom, transparent 55%, var(--theme-palette-color-6) 98%);
    }
    .xg-launch-banner__body {
        padding: 1.25rem;
    }
    .xg-launch-banner__clock {
        font-size: 1.35rem;
        gap: 0.4rem;
    }
    .xg-launch-banner__seg {
        min-width: 2.8rem;
        padding: 0.4rem 0.45rem 0.3rem;
    }
    .xg-launch-banner__num {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xg-launch-banner__kicker::before {
        animation: none;
    }
    .xg-launch-banner__img {
        transition: none;
    }
}

/* ==============================================
   PLATE GRID + PHOTO ROW - uniform image presentation (L03 and future model pages)
   Flex with centered wrapping: every card the same width, and partial last rows
   (5 plates = 3+2) center instead of hugging the left edge. Plates are XPENG's 3:4
   marketing cards; photo rows are real photography at 3:2 cover. Figures carry
   xg-article-image-no-crop so the site-wide crop script skips them; the lightbox
   still makes every card click-to-enlarge.
   ============================================== */

.entry-content .wp-block-group.xg-plate-grid,
.entry-content .wp-block-group.xg-photo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0 0 1.75rem;
}
.entry-content .xg-plate-grid figure.wp-block-image,
.entry-content .xg-photo-row figure.wp-block-image {
    margin: 0;
    max-width: none !important;
    flex: 0 1 calc((100% - 32px) / 3);
}
.entry-content .xg-photo-row:not(.xg-photo-row--3) figure.wp-block-image {
    flex-basis: calc((100% - 16px) / 2);
}
.entry-content .xg-plate-grid figure.wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}
.entry-content .xg-photo-row figure.wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

@media (max-width: 767px) {
    .entry-content .xg-plate-grid figure.wp-block-image {
        flex-basis: calc((100% - 16px) / 2);
    }
    .entry-content .xg-photo-row figure.wp-block-image,
    .entry-content .xg-photo-row:not(.xg-photo-row--3) figure.wp-block-image {
        flex-basis: 100%;
    }
}

/* Colour chips — same round swatches as Compare specs */
.entry-content .xg-colour-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0.5rem 0 1rem;
    padding: 0;
    list-style: none;
}
.entry-content .xg-colour-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 10.5rem;
}
.entry-content .xg-colour-chip__swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: block;
}
.entry-content .xg-colour-chip__label {
    font-size: 0.95rem;
    line-height: 1.3;
}
.entry-content .xg-colour-chip__meta {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
}

/* Offcanvas (burger) logo: panel only carries the black logo variant, so the
   white "XPENG" half vanishes on the dark drawer - swap to the white SVG. */
[data-color-mode="dark"] .ct-panel-content img[src*="xpeng_guru_logo_black"] {
    content: url("https://xpeng.guru/wp-content/uploads/2026/03/xpeng_guru_logo_white.svg");
}

/* Contact form (shortcode xpeng_contact_form) */
.xg-contact-form {
    max-width: 560px;
}
.xg-contact-form label {
    font-weight: 600;
}
.xg-contact-form input[type="text"],
.xg-contact-form input[type="email"],
.xg-contact-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.2));
    border-radius: 6px;
    font: inherit;
    background: var(--theme-palette-color-8);
    color: var(--theme-palette-color-3);
}
/* CF Turnstile paints an uneven 1px iframe border (often 3 sides). Wrapper
   draws a clean 4-sided border; clip kills CF's own edge. */
.xg-contact-form .xg-contact-turnstile {
    margin: 1rem 0;
    width: fit-content;
    line-height: 0;
    border: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.2));
    border-radius: 6px;
    overflow: hidden;
}
.xg-contact-form .xg-contact-turnstile .cf-turnstile {
    margin: 0;
    clip-path: inset(1px round 2px);
}
.xg-contact-form .xg-contact-submit {
    background: var(--theme-palette-color-1);
    color: #ffffff; /* white on brand green by design, like cookie Accept */
    border: none;
    border-radius: 6px;
    padding: 0.7rem 1.6rem;
    font-weight: 600;
    cursor: pointer;
}
.xg-contact-form .xg-contact-submit:hover {
    opacity: 0.9;
}
/* Honeypot: visually gone, still fillable by naive bots */
.xg-contact-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.xg-contact-notice {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--theme-palette-color-1);
}
.xg-contact-error {
    border-color: var(--theme-palette-color-10);
}

/* ==============================================
   MOBILE REVIEW FIXES (owner feedback 2026-07-20)
   ============================================== */

/* Light/dark switch: html default (white) can flash behind the repaint -
   keep the root canvas on the theme background in both modes. */
html {
    background-color: var(--theme-palette-color-7);
}

/* B: no active xpeng.guru profiles on social platforms - hide the dead
   icons in the offcanvas (burger) panel until real profiles exist. */
.ct-panel-content .ct-header-socials {
    display: none;
}

/* D: legal links appended under the footer copyright (functions.php). */
.ct-footer .xg-footer-legal {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: inherit;
    gap: 0.35rem 1.1rem;
    font-size: 0.8rem;
}
.ct-footer .xg-footer-legal a {
    color: var(--theme-palette-color-9);
}
.ct-footer .xg-footer-legal a:hover {
    color: var(--theme-palette-color-1);
}

/* A: language links in the offcanvas (desktop header row is display:none on
   mobile; functions.php copies the WPML switcher links in). */
.ct-panel-content .xg-panel-lang {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--theme-palette-color-5) 60%, transparent);
}
.ct-panel-content .xg-panel-lang a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-color);
}
.ct-panel-content .xg-panel-lang a:hover {
    color: var(--theme-palette-color-1);
}

@media (max-width: 689.98px) {
    /* Hero titles set in the wide display font ("SOFTWARE") must fit one line. */
    .hero-section .page-title {
        font-size: clamp(1.6rem, 8.8vw, 2.9rem);
    }

    /* Fixed-layout reference tables (codes / app / XOS ladders) overlap at
       390px - let them keep their designed widths and scroll sideways. */
    .wp-block-table.xg-ref-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wp-block-table.xg-codes-table table,
    .wp-block-table.xg-app-versions-table table,
    .wp-block-table.xg-xos-versions-table table {
        min-width: 34rem;
    }
    /* Combined releases ("3.2.0 / 3.2.1") are wider than the version column. */
    .wp-block-table.xg-app-versions-table th:nth-child(1),
    .wp-block-table.xg-app-versions-table td:nth-child(1),
    .wp-block-table.xg-xos-versions-table th:nth-child(1),
    .wp-block-table.xg-xos-versions-table td:nth-child(1) {
        white-space: normal;
    }

    /* Registrations data table: compact cells so all model columns fit. */
    .xg-registrations-table th,
    .xg-registrations-table td {
        padding: 0.45rem 0.35rem !important;
        font-size: 0.85rem;
    }
    .xg-registrations-table th:first-child,
    .xg-registrations-table td:first-child {
        white-space: nowrap;
    }
    .xg-registrations-table-container {
        padding: 1rem !important;
    }

    /* Release-note tabs (Guru optimized / Official) side by side on mobile -
       same selector as the desktop tab restyle above so it wins the cascade. */
    .wp-block-kadence-tabs .kt-tabs-wrap .kt-title-item .kt-tab-title {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}