/* =========================================================================
   Page Designer — Navbar Block Styles
   CSS Namespace: pd-blk-nav-*
   ========================================================================= */

/* Setting group labels + dividers (dedicated to navbar block) */
.pd-blk-nav-group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--at-color-card-foreground);
    margin: 6px 0 10px 0;
    padding: 0;
}
.pd-blk-nav-group-label:first-child {
    margin-top: 0;
}
.pd-blk-nav-group-divider {
    border: 0;
    border-top: 2px solid var(--at-color-input, #11111b);
    margin: 18px 0 14px 0;
    padding: 0;
    background: transparent;
    height: 0;
}

/* Items header — Sync + Add buttons */
.pd-blk-nav-items-header {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.pd-blk-nav-action-btn {
    flex: 1;
    background: var(--at-color-secondary, #313244);
    border: 1px solid var(--at-color-border, #45475a);
    color: var(--at-color-card-foreground);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.pd-blk-nav-action-btn:hover {
    background: var(--at-color-muted, #45475a);
    border-color: var(--at-color-primary, #89b4fa);
}
.pd-blk-nav-action-btn .fa {
    margin-right: 4px;
}
.pd-blk-nav-add-btn {
    border-color: var(--at-color-border, #89b4fa);
    color: var(--at-color-link);
}
.pd-blk-nav-add-btn:hover {
    background: color-mix(in srgb, var(--at-color-primary, #89b4fa) 15%, transparent);
}

/* Item list */
.pd-blk-nav-items-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pd-blk-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--at-color-secondary, #313244);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.pd-blk-nav-item:hover {
    background: var(--at-color-muted, #45475a);
}
.pd-blk-nav-item-drag {
    color: var(--at-color-card-foreground);
    cursor: grab;
    font-size: 10px;
    letter-spacing: -2px;
    width: 12px;
    flex-shrink: 0;
    user-select: none;
}
.pd-blk-nav-item:hover .pd-blk-nav-item-drag {
    color: var(--at-color-link);
}
.pd-blk-nav-item-type {
    font-size: 11px;
    color: var(--at-color-link);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.pd-blk-nav-item-label {
    flex: 1;
    font-size: 12px;
    color: var(--at-color-card-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-blk-nav-item-edit,
.pd-blk-nav-item-sethome,
.pd-blk-nav-item-delete {
    background: none;
    border: none;
    color: var(--at-color-link);
    cursor: pointer;
    padding: 3px 5px;
    font-size: 11px;
    border-radius: 3px;
    transition: all 0.15s;
    opacity: 0;
}
.pd-blk-nav-item:hover .pd-blk-nav-item-edit,
.pd-blk-nav-item:hover .pd-blk-nav-item-sethome,
.pd-blk-nav-item:hover .pd-blk-nav-item-delete {
    opacity: 1;
}
/* Says what the pencil does — the pages list is the only route to a page's
   SEO settings, so the icon needs a label. */
.pd-blk-nav-seo-hint {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--at-color-muted-foreground);
}
.pd-blk-nav-seo-hint .fa { margin-right: 4px; }

/* Placeholder standing in for the absent "set as homepage" button so the
   trailing icons line up across every row. Mirrors that button's box exactly —
   only the paint is removed. */
.pd-blk-nav-item-slot {
    padding: 3px 5px;
    font-size: 11px;
    visibility: hidden;
    pointer-events: none;
}
.pd-blk-nav-item-sethome { color: var(--at-color-muted-foreground); }
.pd-blk-nav-item-sethome:hover { color: var(--at-color-link); }
/* "editing" marker — says which page you have open WITHOUT borrowing the home
   icon, which is what made About look like the homepage. */
.pd-blk-nav-item-editing {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 1px 5px;
    margin-right: 2px;
    border-radius: 999px;
    color: var(--at-color-muted-foreground);
    background: var(--at-color-secondary);
    border: 1px solid var(--at-color-border);
}
.pd-blk-nav-item-edit:hover { color: color-mix(in srgb, var(--at-color-primary, #89b4fa) 85%, var(--at-color-foreground, #cdd6f4)); }
.pd-blk-nav-item-delete:hover { color: var(--at-color-status-danger-ink, var(--at-color-destructive-ink)); }

.pd-blk-nav-empty {
    padding: 20px 12px;
    font-size: 12px;
    color: var(--at-color-card-foreground);
    text-align: center;
    background: var(--at-color-secondary, #313244);
    border-radius: 6px;
}

/* Drag states */
.pd-blk-nav-dragging { opacity: 0.4; }
.pd-blk-nav-drag-over { outline: 2px solid var(--at-color-primary, #89b4fa); outline-offset: -2px; }

/* Edit item — back button */
.pd-blk-nav-edit-back {
    background: none;
    border: none;
    color: var(--at-color-link);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}
.pd-blk-nav-edit-back:hover {
    background: color-mix(in srgb, var(--at-color-primary, #89b4fa) 10%, transparent);
}
.pd-blk-nav-edit-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--at-color-border, #313244);
}

/* Pages list */
.pd-blk-nav-pages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pd-blk-nav-page-row {
    padding: 7px 10px;
}
.pd-blk-nav-page-active {
    border-left: 2px solid var(--at-color-primary, #89b4fa);
}
.pd-blk-nav-page-nav,
.pd-blk-nav-page-rename,
.pd-blk-nav-page-delete {
    background: none;
    border: none;
    color: var(--at-color-link);
    cursor: pointer;
    padding: 3px 5px;
    font-size: 11px;
    border-radius: 3px;
    transition: all 0.15s;
    opacity: 0;
    flex-shrink: 0;
}
.pd-blk-nav-page-row:hover .pd-blk-nav-page-nav,
.pd-blk-nav-page-row:hover .pd-blk-nav-page-rename,
.pd-blk-nav-page-row:hover .pd-blk-nav-page-delete {
    opacity: 1;
}
.pd-blk-nav-page-nav:hover { color: color-mix(in srgb, var(--at-color-primary, #89b4fa) 85%, var(--at-color-foreground, #cdd6f4)); }
.pd-blk-nav-page-rename:hover { color: color-mix(in srgb, var(--at-color-primary, #89b4fa) 85%, var(--at-color-foreground, #cdd6f4)); }
.pd-blk-nav-page-delete:hover { color: var(--at-color-status-danger-ink, var(--at-color-destructive-ink)); }

/* Divider for unlinked pages */
.pd-blk-nav-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
    font-size: 10px;
    color: var(--at-color-card-foreground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pd-blk-nav-divider::before,
.pd-blk-nav-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--at-color-secondary, #313244);
}
.pd-blk-nav-unlinked {
    opacity: 0.7;
    border: 1px dashed var(--at-color-border, #45475a);
    cursor: pointer;
}
.pd-blk-nav-unlinked:hover {
    opacity: 1;
    border-color: var(--at-color-status-success, #a6e3a1);
    background: var(--at-color-card);
}

/* Toggle checkbox labels */
.pd-blk-nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--at-color-card-foreground);
    cursor: pointer;
}
.pd-blk-nav-toggle input[type="checkbox"] {
    accent-color: var(--at-color-primary, #89b4fa);
    width: 14px;
    height: 14px;
}

/* "Show company name beside logo" switch in Navbar Settings > Brand / Logo.
   Its own classes (pd-blk-nav-bn-*); it sits on the settings panel, a card,
   so its words take the card's own label. */
.pd-blk-nav-bn-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--at-color-card-foreground);
    cursor: pointer;
}
.pd-blk-nav-bn-toggle input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}
.pd-blk-nav-bn-toggle:has(input:disabled) {
    cursor: default;
}
.pd-blk-nav-bn-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--at-color-card-foreground);
}

/* A logo in the bar keeps its own shape. Its height is the Logo Size setting;
   its width must follow from that. The editor records a picture's full pixel
   size on the tag (to stop the page jumping while it loads), and with only a
   height set here the logo kept that full width and was drawn stretched right
   across the bar (owner, 13 Oct 2026: a 733 x 600px logo at 40px tall). A
   width the owner sets by hand on the picture still wins. */
.pd-nav-brand > img {
    width: auto;
    max-width: 320px;
    /* In a tight bar the logo gives way a little and keeps its shape; it is
       never squeezed out of sight. (No percentage limit here: inside a link
       that sizes itself to its logo, a percentage can work out as nothing.) */
    flex: 0 1 auto;
    min-width: 24px;
    object-fit: contain;
}
/* How big a logo may get in the bar (owner, 13 Oct 2026; checked against
   current guides the same day: a header logo is commonly 40 to 100px tall and
   250 to 400px wide on a desktop, about 40 to 60px tall and 150 to 200px wide
   on a phone; Shopify's own example is 400 x 100px and 160 x 40px). The Logo
   Size setting stays the height, up to its 80px; these are the outer limits,
   and the logo always keeps its shape inside them. */
@media (max-width: 767px) {
    .pd-nav-brand > img {
        max-height: 48px;
        max-width: 200px;
    }
}

/* The company name printed beside a logo in the bar (the switch above, and
   the wizard for a logo that is a symbol only). The home link is already a
   centred row, so the name only needs its space from the logo. It takes the
   link's own colour and font, and wraps rather than running off a phone. */
.pd-nav-brand > img + .pd-nav-brand-name {
    margin-left: 0.5em;
}
.pd-nav-brand-name {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pd-nav-brand > img:has(+ .pd-nav-brand-name) {
    flex: 0 0 auto;
}

/* =============================================================================
   Frontend rendering — navigation links must never show an underline,
   even on hover/focus. The default browser anchor :hover decoration leaks
   through unless explicitly suppressed.
   ============================================================================= */
.navbar-menu-link,
.navbar-menu-link:link,
.navbar-menu-link:visited,
.navbar-menu-link:hover,
.navbar-menu-link:focus,
.navbar-menu-link:active,
.navbar-brand,
.navbar-brand:link,
.navbar-brand:visited,
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active {
    text-decoration: none;
}

/* =============================================================================
   Vertically centre the brand text within the navbar bar.
   Targets .pd-nav-brand — a DEDICATED class added to every brand element
   by navbar.js (both fresh navbars and existing ones, backfilled on
   selection). Using our own namespace means we never collide with the
   grapesjs-navbar plugin's .navbar-brand defaults, and !important pins
   the win regardless of source order vs the saved css_content blob.
   ============================================================================= */
.pd-nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    line-height: 1 !important;
    align-self: center !important;
}

/* =============================================================================
   Brand Text must NEVER inherit hover behaviour from the global Theme>Links
   rules (a:hover { color/text-decoration }). The brand is a navbar identity
   element, not a navigational link — it has its own dedicated Brand Color
   setting and stays static on hover.
   ============================================================================= */
.pd-nav-brand,
.pd-nav-brand:hover,
.pd-nav-brand:focus,
.pd-nav-brand:active,
.pd-nav-brand:visited {
    color: inherit;
    text-decoration: none !important;
}
.pd-nav-brand:hover {
    /* Lock the hover color to whatever the brand currently is — wins over
       the global a:hover rule because of the dedicated class + !important. */
    color: var(--pd-nav-brand-color, inherit) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.6.15: Dedicated panel chrome — migrated off shared pd-dsp-*.
 * Duplicated from editor.css:1074-1395 on 2026-04-09, renamed to
 * pd-blk-nav-pnl-*. Includes the image upload chrome (used only by
 * the navbar logo upload UI). Intentional fork — do NOT keep in sync.
 * ────────────────────────────────────────────────────────────────────── */
.pd-blk-nav-pnl {
    position: fixed; top: 50px; right: -300px; width: 300px;
    height: calc(100vh - 50px); background: var(--at-color-background, #1e1e2e);
    border-left: 1px solid var(--at-color-border, #313244); z-index: 9000;
    display: flex; flex-direction: column;
    transition: right 0.25s ease; overflow: hidden;
}
.pd-blk-nav-pnl-visible { right: 0; }
.pd-blk-nav-pnl-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--at-color-border, #313244);
    background: var(--at-color-card, #181825); flex-shrink: 0;
}
.pd-blk-nav-pnl-title { font-size: 14px; font-weight: 700; color: var(--at-color-heading, #cdd6f4); }
.pd-blk-nav-pnl-title .fa { color: var(--at-color-link, #89b4fa); margin-right: 6px; }
.pd-blk-nav-pnl-close {
    background: none; border: none; color: var(--at-color-muted-foreground, #6c7086);
    cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 4px;
}
.pd-blk-nav-pnl-close:hover { color: var(--at-color-status-danger-ink, var(--at-color-destructive-ink)); background: color-mix(in srgb, var(--at-color-status-danger-ink, var(--at-color-destructive-ink)) 10%, transparent); }
.pd-blk-nav-pnl-body { flex: 1; overflow-y: auto; padding: 0; }
.pd-blk-nav-pnl-body::-webkit-scrollbar { width: 5px; }
.pd-blk-nav-pnl-body::-webkit-scrollbar-track { background: var(--at-color-background, #1e1e2e); }
.pd-blk-nav-pnl-body::-webkit-scrollbar-thumb { background: var(--at-color-muted, #45475a); border-radius: 3px; }
.pd-blk-nav-pnl-comp-label,
.pd-blk-nav-pnl-comp-type { display: none !important; }
.pd-blk-nav-pnl-section { border-bottom: 1px solid var(--at-color-border, #313244); }
.pd-blk-nav-pnl-section-header {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    color: var(--at-color-card-foreground); font-size: 13px; font-weight: 600;
    cursor: pointer; user-select: none; transition: background 0.15s;
}
.pd-blk-nav-pnl-section-header:hover { background: color-mix(in srgb, var(--at-color-foreground, #cdd6f4) 3%, transparent); }
.pd-blk-nav-pnl-section-icon { color: var(--at-color-link, #89b4fa); width: 16px; text-align: center; font-size: 12px; }
.pd-blk-nav-pnl-section-arrow {
    margin-left: auto; font-size: 10px; color: var(--at-color-muted-foreground, #6c7086);
    transition: transform 0.25s ease;
}
.pd-blk-nav-pnl-open > .pd-blk-nav-pnl-section-header .pd-blk-nav-pnl-section-arrow {
    transform: rotate(180deg);
}
.pd-blk-nav-pnl-section-body { padding: 4px 16px 16px; }
.pd-blk-nav-pnl-field { margin-bottom: 12px; }
.pd-blk-nav-pnl-field-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--at-color-card-foreground); margin-bottom: 4px;
}
.pd-blk-nav-pnl-input {
    width: 100%; background: var(--at-color-secondary, #313244); border: 1px solid var(--at-color-border, #45475a);
    color: var(--at-color-card-foreground); padding: 8px 10px; border-radius: 6px;
    font-size: 13px; outline: none; transition: border-color 0.15s;
    box-sizing: border-box;
}
.pd-blk-nav-pnl-input:focus { border-color: var(--at-color-primary, #89b4fa); }
.pd-blk-nav-pnl-select { cursor: pointer; -webkit-appearance: auto; appearance: auto; }
.pd-blk-nav-pnl-select option { background: var(--at-color-secondary, #313244); color: var(--at-color-foreground, #cdd6f4); }
.pd-blk-nav-pnl-color {
    width: 100%; height: 36px; border: 1px solid var(--at-color-border, #45475a);
    border-radius: 6px; cursor: pointer; padding: 0; background: var(--at-color-secondary, #313244);
}
.pd-blk-nav-pnl-color:hover { border-color: var(--at-color-primary, #89b4fa); }
.pd-blk-nav-pnl-slider-field {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.pd-blk-nav-pnl-slider-field:last-child { margin-bottom: 0; }
.pd-blk-nav-pnl-slider {
    flex: 1; height: 6px; cursor: pointer; accent-color: var(--at-color-primary, #89b4fa);
    background: var(--at-color-secondary, #313244); border-radius: 3px;
    -webkit-appearance: auto; appearance: auto;
}
.pd-blk-nav-pnl-slider-val {
    font-size: 12px; font-weight: 600; color: var(--at-color-foreground, #cdd6f4);
    min-width: 24px; text-align: right;
}
.pd-blk-nav-pnl-slider-unit { font-size: 10px; color: var(--at-color-muted-foreground, #6c7086); }
/* Image upload field (logo upload only) */
.pd-blk-nav-pnl-img-upload {
    display: flex; flex-direction: column; gap: 6px;
}
.pd-blk-nav-pnl-img-preview {
    display: none; width: 100%; height: 80px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--at-color-border, #45475a); background: var(--at-color-input, #11111b);
}
.pd-blk-nav-pnl-img-preview img {
    width: 100%; height: 100%; object-fit: cover;
}
.pd-blk-nav-pnl-img-input-wrap { display: flex; gap: 0; }
.pd-blk-nav-pnl-img-input-wrap .pd-blk-nav-pnl-input {
    border-radius: 6px 0 0 6px; border-right: none;
}
.pd-blk-nav-pnl-img-upload-btn {
    background: var(--at-color-primary, #89b4fa); border: 1px solid var(--at-color-border, #89b4fa); color: var(--at-color-background, #1e1e2e);
    padding: 0 12px; border-radius: 0 6px 6px 0;
    cursor: pointer; font-size: 13px; transition: all 0.15s;
    flex-shrink: 0;
}
.pd-blk-nav-pnl-img-upload-btn:hover {
    background: color-mix(in srgb, var(--at-color-primary, #89b4fa) 85%, var(--at-color-foreground, #cdd6f4)); border-color: var(--at-color-primary, #89b4fa); color: var(--at-color-background, #1e1e2e);
}

/* =============================================================================
   Wizard-generated site navigation
   -----------------------------------------------------------------------------
   The step wizard builds every page with a navbar (helpers/pd_wizard_nav_helper.php)
   and tags it data-pd-nav-uid="wznav{website_id}". These rules give that navbar
   its brand skin from the page's own --pd-* theme tokens, so a generated site's
   nav re-colours with the rest of the page instead of staying vendor grey.

   They live HERE, in the navbar block's own stylesheet, rather than in the page's
   saved css_content, because:
     * both the published page (pd_brh_block_css_links) and the editor canvas
       (views/_pd_editor_config_common.php) auto-load this file — one source, two
       surfaces, no shared-file wiring;
     * css_content is regenerated from editor.getCss() on every save, so anything
       written there at build time would vanish the first time the user saves.

   Scoped to the wznav* instance prefix, so a hand-built navbar is never touched.
   Every value falls back to `inherit`/the vendor default when a token is absent.
   Specificity ties with the per-instance rules navbar.js writes into css_content,
   and css_content is emitted after this file, so a user's own edits still win.
   ============================================================================= */
.navbar[data-pd-nav-uid^="wznav"] {
    background: var(--pd-color-section, #111827);
    border-bottom: 1px solid color-mix(in srgb, var(--pd-general-color, #888888) 22%, transparent);
    width: 100%;
    min-height: 64px;
    margin-bottom: 0;
    box-sizing: border-box;
}
/* THE NAME LINES UP WITH THE PAGE (owner, 8 Oct 2026). The bar, its inner
   row and the name each added their own side padding (20 + 20 + 15), so the
   name began 55px in while the page's own words begin 28px in: it looked
   pushed towards the middle, on the left and on the right alike. The bar
   itself now has no side padding and its inner row 13px, which with the
   name's own fixed 15px makes 28px, so the name's first letter (or its last,
   on the right) sits on the same line as the page's content edge. */
.navbar.pd-nav-display-panel[data-pd-nav-uid^="wznav"] {
    padding-left: 0;
    padding-right: 0;
}
.navbar.pd-nav-display-panel[data-pd-nav-uid^="wznav"] > .navbar-container {
    /* 13px here + the name's own fixed 15px = 28px: the page's content edge. */
    padding-left: 13px;
    padding-right: 13px;
}
[data-pd-nav-uid^="wznav"] .navbar-container {
    display: flex;
    align-items: center;
    /* As tall as the bar itself, so what is in it sits in the MIDDLE of the
       bar. Without this the row was only as tall as the name: on a single
       page (no menu button to make it taller) the name sat 8px from the top
       of a 64px bar with 32px under it (owner, 8 Oct 2026). */
    min-height: 64px;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
[data-pd-nav-uid^="wznav"] .navbar-brand {
    color: var(--pd-header-color, inherit);
    font-family: var(--pd-header-font, inherit);
    font-weight: 700;
    font-size: 20px;
    min-width: 0;
    min-height: 0;
    text-decoration: none;
    /* A name too long for its room WRAPS; it is never drawn over the menu
       button or off the screen (owner, 8 Oct 2026). It was `nowrap`, so a
       long company name spilled out of its own box on a phone. It may shrink
       (flex 0 1), and only a single word too long for the bar is broken. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    flex: 0 1 auto;
}
/* WHERE THE NAME SITS: the Navbar block's own Brand Position setting
   (data-pd-nav-brand-pos), with the same values its panel writes for a
   hand-built bar. A website's bar is always "left" (catalogue
   rules.company_name); a single page's name-only bar may be any of the three. */
[data-pd-nav-uid^="wznav"][data-pd-nav-brand-pos="left"] .pd-nav-brand   { order: -1; margin-left: 0;    margin-right: auto; text-align: left; }
[data-pd-nav-uid^="wznav"][data-pd-nav-brand-pos="center"] .pd-nav-brand { order: 0;  margin-left: auto; margin-right: auto; text-align: center; }
[data-pd-nav-uid^="wznav"][data-pd-nav-brand-pos="right"] .pd-nav-brand  { order: 99; margin-left: auto; margin-right: 0;    text-align: right; }
/* A single page's bar holds the name alone: no menu, so no menu button. */
[data-pd-nav-uid^="wznav"].pd-nav-brand-only .navbar-items-c,
[data-pd-nav-uid^="wznav"].pd-nav-brand-only .navbar-burger { display: none; }
[data-pd-nav-uid^="wznav"] .navbar-items-c {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}
[data-pd-nav-uid^="wznav"] .navbar-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}
[data-pd-nav-uid^="wznav"] .navbar-menu-link {
    color: var(--pd-general-color, inherit);
    font-family: var(--pd-general-font, inherit);
    font-size: 15px;
    padding: 10px 14px;
    text-decoration: none;
    border-radius: var(--pd-btn-radius, 4px);
    transition: color .15s, background .15s;
}
[data-pd-nav-uid^="wznav"] .navbar-menu-link:hover,
[data-pd-nav-uid^="wznav"] .navbar-menu-link:focus {
    color: var(--pd-link-color, inherit);
}
[data-pd-nav-uid^="wznav"] .navbar-menu-link-active,
[data-pd-nav-uid^="wznav"] .navbar-menu-link[aria-current="page"],
[data-pd-nav-uid^="wznav"] .navbar-menu-link-active:hover,
[data-pd-nav-uid^="wznav"] .navbar-menu-link-active:focus {
    /* Owner, 14 Oct 2026: the current page has a selected background, from
       the theme's own selected-item pair (the Tabs "Active" fill and the text
       colour worked out to read on it), so it follows the site's theme. */
    background: var(--pd-tabw-active-bg, color-mix(in srgb, currentColor 12%, transparent));
    color: var(--pd-tabw-active-text, var(--pd-label-color, var(--pd-link-color, inherit)));
    /* Emphasis WITHOUT changing the text's width.
       font-weight:600 made the current page's link wider than the others, so
       every link after it slid along — and since a different page is current on
       each page, the whole menu appeared to shift as you clicked around the
       site. Painting the glyphs a fraction thicker gives the same emphasis with
       identical metrics, so nothing reflows. */
    text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}
[data-pd-nav-uid^="wznav"] .navbar-burger {
    width: 44px;
    padding: 5px 10px;
    margin: 10px 0;
    cursor: pointer;
    display: none;
}
/* WHERE THE MENU BUTTON SITS IN A GENERATED BAR (owner, 8 Oct 2026).
   The bar's "Burger position" is kept in two places: the pd-burger-pos-{x}
   class on the bar, which navbar.js calls the authoritative record, and
   order / margin styles on the button itself, which the editor only writes
   when someone changes the setting. The wizard ships the class and no styles,
   so the button sat straight after the company name with the rest of the bar
   empty beside it (measured: 448px spare on a tablet). The class now places
   the button by itself: right = pushed to the far end, company name left.
   An owner's own choice in the panel is written on the button's own rule and
   still wins. Beats the plain button rule above on specificity: no !important. */
[data-pd-nav-uid^="wznav"].pd-burger-pos-right .navbar-burger {
    order: 99;
    margin-left: auto;
    margin-right: 0;
}
[data-pd-nav-uid^="wznav"].pd-burger-pos-left .navbar-burger {
    order: -1;
    margin-left: 0;
    margin-right: auto;
}
[data-pd-nav-uid^="wznav"].pd-burger-pos-center .navbar-burger {
    margin-left: auto;
    margin-right: auto;
}
[data-pd-nav-uid^="wznav"] .navbar-burger-line {
    padding: 1px;
    margin: 5px 0;
    background: var(--pd-general-color, #cccccc);
}
/* WHEN A GENERATED MENU FOLDS AWAY BEHIND THE MENU BUTTON.
   Two things were wrong here, both found on 6 Oct 2026 by measuring a built
   site at tablet width:

   1. The fold was written for EVERY generated menu at 768px, whatever its
      "Collapse at" setting said. So choosing Mobile (576px) in the panel did
      nothing between 577 and 768 — these rules still hid the links. Each rule
      now names the setting it is the default for, so the moment the owner
      picks another, these stand aside and the panel's own rule decides.

   2. A menu with a button at its end (the wizard's "Customer login") no
      longer fits one row on an upright tablet: at 820px it wrapped onto a
      second row. Newly built sites therefore fold at Laptop (992px), the
      setting the panel already offers, so a tablet held upright gets the menu
      button and the links come back from 993px. Sites built before this keep
      folding at 768px exactly as they did — their menu still says 768.

   The menu button is laid out as a column so its three bars sit in the middle
   of the 44px thumb target given to it further down. */
@media (max-width: 768px) {
    [data-pd-nav-uid^="wznav"][data-pd-nav-breakpoint="768"] .navbar-items-c { display: none; }
    [data-pd-nav-uid^="wznav"][data-pd-nav-breakpoint="768"] .navbar-burger  { display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 992px) {
    [data-pd-nav-uid^="wznav"][data-pd-nav-breakpoint="992"] .navbar-items-c { display: none; }
    [data-pd-nav-uid^="wznav"][data-pd-nav-breakpoint="992"] .navbar-burger  { display: flex; flex-direction: column; justify-content: center; }
}

/* ==========================================================================
 * Container Width — where the logo and links sit inside the bar
 *
 * Keyed off the attribute the panel already stores, so it applies the moment a
 * navbar exists: no waiting for the vendor plugin to finish building children,
 * and no per-component styles to race with.
 *
 *   Full Width            — bar spans the viewport, CONTENTS line up with the
 *                           page's own content column so the logo sits directly
 *                           above the copy below it. Follows the page's Content
 *                           Width setting, so changing that moves the nav too.
 *   Full Width (extended) — bar AND contents edge to edge: logo hard left,
 *                           menu hard right.
 *
 * A capped width (Wide/Standard/Narrow/Blog) puts the cap on the BAR, so the
 * container just fills it — no rule needed here.
 * ========================================================================== */
.navbar[data-pd-custom-width="100%"] > .navbar-container {
    max-width: var(--pd-container-width, 1400px);
    margin-left: auto;
    margin-right: auto;
}
.navbar[data-pd-custom-width="100%-ext"] > .navbar-container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* "Use this header on every page" — the header is site chrome, so it is shared
   deliberately rather than page by page. Own pd-blk-nav-sync-* names. */
.pd-blk-nav-sync-field { margin-top: 10px; }
.pd-blk-nav-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    background: var(--at-color-secondary);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.pd-blk-nav-sync-btn:hover { background: var(--at-color-muted); }
.pd-blk-nav-sync-btn[disabled] { cursor: default; opacity: 0.7; }
.pd-blk-nav-sync-hint {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: var(--at-color-muted-foreground);
}

/* ── Menu button: a real thumb target on tablet and phone ─────────────────
   The button measured 44 wide by 36 tall, so it missed the 44x44 minimum on
   its short side. Height is added with padding rather than by growing the
   three bars, so the button LOOKS exactly as it did - only the tappable area
   changes. Scoped to the same selector the sizing rule above uses, and to the
   widths where the burger is actually shown, so nothing else is touched and
   no !important is needed.

   ⚠ Corrected 6 Oct 2026: this rule also said `display: flex`, and it runs up
   to 991px while the button was only meant to show up to 768px — so between
   769 and 991 it SWITCHED THE BUTTON ON beside the full row of links, and a
   tablet held upright showed both. Whether the button shows is decided by the
   fold rules above and by the panel's own rule; this one only sizes it. */
@media (max-width: 992px) {
    [data-pd-nav-uid^="wznav"] .navbar-burger {
        min-height: 44px;
        /* ...and on its narrow side too: on a phone the bar squeezed the
           button to 38px wide (measured at 360px). It may not shrink. */
        min-width: 44px;
        flex-shrink: 0;
        padding-top: 9px;
        padding-bottom: 9px;
        box-sizing: border-box;
    }
}


/* =============================================================================
   One menu link shown as a button
   -----------------------------------------------------------------------------
   Menu → an item → "Show as a button" puts .navbar-menu-link-btn on that one
   link (navbar.js). Colour, font and size are otherwise set for every menu
   link together, so this is the way to make ONE stand out — the wizard uses it
   for "Customer login".

   The button takes the THEME's own Buttons label (Theme → Buttons): its fill,
   its writing colour, its hover pair, its corners and its UPPERCASE setting.
   Change that label and every such link follows; no colour is written here.
   Font and font size are deliberately left to the menu, so the button sits on
   the same line as the links beside it whatever size the menu is set to.

   Where the page has no Buttons label at all (a hand-built page with no theme)
   it falls back to a tint of the menu's own writing colour — still a visible
   button, still no stated colour.

   Scoped to a link INSIDE a navbar's menu: the burger slide-out lists the same
   links under its own names and shows this one as an ordinary row.

   Weight 0,4,0 — above the menu's own link rules (0,2,0), its hover (0,3,0),
   its current-page rule (0,2,0) and the per-menu rules the panel saves with
   the page (0,2,0, loaded later). Nothing here is marked important.
   ============================================================================= */
.navbar .navbar-menu .navbar-menu-link.navbar-menu-link-btn {
    background: var(--pd-btn-bg, color-mix(in srgb, currentColor 14%, transparent));
    color: var(--pd-btn-color, inherit);
    border-radius: var(--pd-btn-radius, 6px);
    text-transform: var(--pd-btn-transform, none);
    font-weight: 600;
    padding: 8px 18px;
    margin-left: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.navbar .navbar-menu .navbar-menu-link.navbar-menu-link-btn:hover,
.navbar .navbar-menu .navbar-menu-link.navbar-menu-link-btn:focus {
    background: var(--pd-btn-hover-bg, var(--pd-btn-bg, color-mix(in srgb, currentColor 22%, transparent)));
    color: var(--pd-btn-hover-color, var(--pd-btn-color, inherit));
    text-decoration: none;
}
/* The current-page mark is an underline drawn for plain links; a button that
   is the current page keeps its button look instead. */
.navbar .navbar-menu .navbar-menu-link.navbar-menu-link-btn.navbar-menu-link-active,
.navbar .navbar-menu .navbar-menu-link.navbar-menu-link-btn[aria-current="page"] {
    color: var(--pd-btn-color, inherit);
}

/* The burger menu's slide-out panel (slideout.js copies the links into it and
   marks the current page). Owner, 14 Oct 2026: the open menu showed no sign
   of the page you are on. Same selected-item pair as the in-bar menu, so it
   follows the site's theme; a theme without it gets a soft tint of the
   menu's own text colour. Written here because slideout.css is read-only. */
.pd-nav-slideout .pd-nav-slideout-link.pd-nav-slideout-link-active,
.pd-nav-slideout .pd-nav-slideout-link.pd-nav-slideout-link-active:hover,
.pd-nav-slideout .pd-nav-slideout-link.pd-nav-slideout-link-active:focus {
    background: var(--pd-tabw-active-bg, color-mix(in srgb, currentColor 12%, transparent));
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit));
}