/**
 * Nexus Builder — frontend base styles.
 *
 * Lightweight, prefixed (`nx-` / `nxel-`) styles for builder pages and
 * global templates. Palette: zinc neutrals + emerald accent (#10b981).
 * Layout width for .nx-page / .nx-main is injected inline per site.
 */

/* ----------------------------------------------------------------
 * Reset-lite
 * ------------------------------------------------------------- */
.nx-page,
.nx-main,
.nx-template-header,
.nx-template-footer,
.nx-page *,
.nx-main *,
.nx-template-header *,
.nx-template-footer * {
        box-sizing: border-box;
}

.nx-page *,
.nx-main *,
.nx-template-header *,
.nx-template-footer * {
        margin: 0;
        padding: 0;
}

body.nx-canvas {
        margin: 0;
        background: #fafafa;
        color: #18181b;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe {
        max-width: 100%;
}

img, video {
        height: auto;
        display: block;
}

a {
        color: #059669;
        text-decoration: none;
}

a:hover {
        color: #047857;
        text-decoration: underline;
}

/* Heading element: the text renders inside an anchor, so it must follow the
   heading's own color (Style → Color) and never underline on hover. */
.nx-heading a,
a.nx-heading {
        color: inherit;
        text-decoration: none;
}

.nx-heading a:hover {
        color: inherit;
        text-decoration: none;
}

ul, ol {
        padding-left: 1.4em;
}

/* ----------------------------------------------------------------
 * Page + main layout
 * ------------------------------------------------------------- */
.nx-page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
}

.nx-main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 24px;
        width: 100%;
}

.nx-template-header,
.nx-template-footer {
        width: 100%;
        padding: 0 24px;
}

.nxel {
        min-width: 0;
}

/* Base typography for canvas content. :where() keeps these at element-level
   specificity so per-element builder rules (.nxel-{id}) always override them
   — without this, Style controls (color, font size…) on headings/text could
   never win against these defaults. */
:where(.nx-page, .nx-main) h1 { font-size: 2.25rem; line-height: 1.2; font-weight: 700; color: #18181b; }
:where(.nx-page, .nx-main) h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 700; color: #18181b; }
:where(.nx-page, .nx-main) h3 { font-size: 1.35rem; line-height: 1.3; font-weight: 600; color: #18181b; }
:where(.nx-page, .nx-main) h4 { font-size: 1.1rem; font-weight: 600; color: #27272a; }
:where(.nx-page, .nx-main) h5 { font-size: 1rem; font-weight: 600; color: #27272a; }
:where(.nx-page, .nx-main) h6 { font-size: .875rem; font-weight: 600; color: #3f3f46; }
:where(.nx-page, .nx-main) p { color: #3f3f46; margin: 0 0 1em; }
:where(.nx-page, .nx-main) p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------- */
.nx-btn {
        display: inline-block;
        padding: 12px 24px;
        border: 0;
        border-radius: 10px;
        background: #10b981;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        font-family: inherit;
        text-align: center;
        cursor: pointer;
        transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.nx-btn:hover {
        background: #059669;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(16, 185, 129, .25);
}

.nx-btn-outline {
        background: transparent;
        color: #18181b;
        box-shadow: inset 0 0 0 2px #e4e4e7;
}

.nx-btn-outline:hover {
        background: #f4f4f5;
        color: #18181b;
        box-shadow: inset 0 0 0 2px #d4d4d8;
}

/* Button ELEMENT defaults (v1.2.1): compact 15px/8px padding and the button
   hugs its content — it must not stretch across the whole column when
   dropped into a flex column or grid cell (flex/grid self-alignment).
   Style the element's own root (.nxel-button) so other .nx-btn uses
   (pricing, CTA, forms) keep their original sizing.
   v1.2.3: always hug — no flex growing, no stretched grid cell width. */
.nxel-button {
        display: inline-block;
        width: auto;
        align-self: flex-start;
        justify-self: start;
        flex: 0 0 auto;
        padding: 15px 8px;
}

/* ----------------------------------------------------------------
 * Cards (posts, pricing, generic)
 * ------------------------------------------------------------- */
.nx-card {
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s ease, border-color .2s ease;
}

.nx-card:hover {
        border-color: #d4d4d8;
        box-shadow: 0 8px 24px rgba(24, 24, 27, .08);
}

.nx-card-media {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #f4f4f5;
}

.nx-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.nx-card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1 1 auto;
}

.nx-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #18181b;
}

.nx-card-title a {
        color: inherit;
        text-decoration: none;
}

.nx-card-title a:hover {
        color: #059669;
}

.nx-card-excerpt {
        font-size: .925rem;
        color: #52525b;
        flex: 1 1 auto;
}

.nx-card-meta {
        font-size: .8125rem;
        color: #71717a;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
}

.nx-card-meta-sep::before {
        content: "·";
        margin: 0 2px;
}

.nx-card-readmore {
        font-size: .875rem;
        font-weight: 600;
        color: #059669;
}

.nx-card-readmore:hover {
        text-decoration: underline;
}

.nx-posts-empty {
        padding: 24px;
        text-align: center;
        color: #71717a;
        background: #fafafa;
        border: 1px dashed #d4d4d8;
        border-radius: 12px;
}

/* ----------------------------------------------------------------
 * Product Grid / Product List (WooCommerce, v1.2.2)
 * ------------------------------------------------------------- */
.nx-products-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
}

.nx-products-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
}

.nx-product-card {
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s ease, border-color .2s ease;
}

.nx-product-card:hover {
        border-color: #d4d4d8;
        box-shadow: 0 8px 24px rgba(24, 24, 27, .08);
}

.nx-product-media {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #f4f4f5;
}

.nx-product-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.nx-product-body {
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 1 auto;
}

.nx-product-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #18181b;
}

.nx-product-title a {
        color: inherit;
        text-decoration: none;
}

.nx-product-title a:hover {
        color: #059669;
}

.nx-product-price {
        font-size: .975rem;
        font-weight: 700;
        color: #059669;
}

.nx-product-price del {
        color: #a1a1aa;
        font-weight: 500;
        margin-right: 4px;
}

.nx-product-btn {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 16px;
        border-radius: 8px;
        background: #18181b;
        color: #fff;
        font-size: .85rem;
        font-weight: 600;
        text-decoration: none;
}

.nx-product-btn:hover {
        background: #059669;
        color: #fff;
}

/* List layout: one product per row, media on the left. */
.nx-products-list .nx-product-card {
        flex-direction: row;
        align-items: stretch;
}

.nx-products-list .nx-product-media {
        flex: 0 0 200px;
        aspect-ratio: auto;
        min-height: 140px;
}

.nx-products-list .nx-product-media img {
        height: 100%;
}

/* ----------------------------------------------------------------
 * Single Product + Archive elements (v1.2.3)
 * ------------------------------------------------------------- */

/* Price (element + archive cards share .nx-product-price). */
.nxel-product_price .nx-product-price {
        font-size: 20px;
        font-weight: 700;
        color: #059669;
}

/* Add to cart / Buy now buttons. */
.nx-cart-wrap {
        display: block;
}

.nx-cart-btn {
        display: inline-block;
        padding: 12px 22px;
        border: 0;
        border-radius: 10px;
        background: #10b981;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        font-family: inherit;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: background-color .2s ease;
}

.nx-cart-btn:hover {
        background: #059669;
        color: #fff;
}

.nx-cart-buy {
        background: #18181b;
}

.nx-cart-buy:hover {
        background: #059669;
}

/* Product reviews. */
.nx-product-reviews {
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.nx-reviews-summary {
        display: flex;
        align-items: center;
        gap: 10px;
}

.nx-reviews-count {
        font-size: 14px;
        color: #71717a;
}

.nx-review-stars {
        display: inline-flex;
        gap: 2px;
        font-size: 16px;
        line-height: 1;
        color: #f59e0b;
}

.nx-star-full { color: #f59e0b; }
.nx-star-half {
        color: #f59e0b;
        opacity: .45;
}
.nx-star-empty { color: #d4d4d8; }

.nx-review {
        border-top: 1px solid #f4f4f5;
        padding-top: 12px;
}

.nx-review-head {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
}

.nx-review-meta {
        font-size: 13px;
        color: #71717a;
}

.nx-review-text {
        margin-top: 6px;
        font-size: 14px;
        color: #52525b;
}

.nx-review-empty {
        color: #71717a;
        font-size: 14px;
}

/* Product categories (archive). */
.nx-product-cats {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
}

.nx-product-cats.nx-cats-vertical {
        flex-direction: column;
        align-items: flex-start;
}

.nx-cat-item a {
        color: #18181b;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
}

.nx-cat-item a:hover {
        color: #059669;
}

.nx-cat-count {
        color: #71717a;
        font-size: 13px;
}

/* Archive pagination (products + posts). */
.nx-archive-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
}

.nx-page-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid #e4e4e7;
        border-radius: 8px;
        background: #fff;
        color: #3f3f46;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

a.nx-page-btn:hover {
        border-color: #10b981;
        color: #059669;
}

.nx-page-current {
        background: #10b981;
        border-color: #10b981;
        color: #fff;
        font-weight: 600;
}

/* ----------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------- */
.nx-form {
        width: 100%;
}

.nx-form-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
}

.nx-form-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
}

.nx-col-100 { flex: 1 1 100%; }
.nx-col-50  { flex: 1 1 calc(50% - 8px); }
.nx-col-33  { flex: 1 1 calc(33.333% - 11px); }
.nx-col-25  { flex: 1 1 calc(25% - 12px); }

.nx-form-label {
        font-size: .875rem;
        font-weight: 600;
        color: #27272a;
}

.nx-required {
        color: #ef4444;
}

.nx-input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #d4d4d8;
        border-radius: 8px;
        background: #fff;
        color: #18181b;
        font-size: .925rem;
        font-family: inherit;
        transition: border-color .2s ease, box-shadow .2s ease;
}

.nx-input:focus {
        outline: 0;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

textarea.nx-input {
        resize: vertical;
        min-height: 120px;
}

select.nx-input {
        appearance: auto;
}

/* Honeypot — invisible to humans, tempting for bots. */
.nx-hp-wrap,
.nx-hp-field,
.nx-hp-label {
        position: absolute !important;
        left: -9999px !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
}

.nx-form-msg {
        margin-top: 14px;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: .925rem;
}

.nx-form-success {
        background: #d1fae5;
        color: #065f46;
}

.nx-form-error {
        background: #fee2e2;
        color: #991b1b;
}

.nx-form-submit {
        margin-top: 4px;
}

.nx-form-submit[disabled] {
        opacity: .6;
        cursor: wait;
}

/* ----------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------- */
[data-nx-tabs] .nx-tabs-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        border-bottom: 1px solid #e4e4e7;
        padding-bottom: 10px;
        margin-bottom: 16px;
}

[data-nx-tabs] .nx-tabs-nav button {
        padding: 8px 16px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: #52525b;
        font-size: .9rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
}

[data-nx-tabs] .nx-tabs-nav button:hover {
        color: #18181b;
        background: #f4f4f5;
}

[data-nx-tabs] .nx-tabs-nav button.active {
        background: #18181b;
        color: #fff;
}

.nx-tab-panel[hidden],
.nx-tab-panel.hidden {
        display: none;
}

.nx-tab-panel.active {
        display: block;
        animation: nx-fade .25s ease;
}

/* ----------------------------------------------------------------
 * Accordion
 * ------------------------------------------------------------- */
[data-nx-accordion] .nx-acc-item {
        border: 1px solid #e4e4e7;
        border-radius: 10px;
        background: #fff;
        margin-bottom: 10px;
        overflow: hidden;
}

.nx-acc-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        background: transparent;
        border: 0;
        color: #18181b;
        font-size: 1rem;
        font-weight: 600;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
}

.nx-acc-header:hover {
        background: #fafafa;
}

.nx-acc-header::after {
        content: "+";
        font-size: 1.1rem;
        color: #71717a;
        line-height: 1;
}

.nx-acc-item.open .nx-acc-header::after {
        content: "–";
}

.nx-acc-body {
        display: none;
        padding: 0 18px 16px;
        color: #52525b;
}

.nx-acc-item.open .nx-acc-body,
.nx-acc-body.open {
        display: block;
}

/* ----------------------------------------------------------------
 * Carousel
 * ------------------------------------------------------------- */
.nx-carousel {
        position: relative;
}

.nx-carousel-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
}

.nx-carousel-item {
        flex: 0 0 auto;
        width: 300px;
        scroll-snap-align: start;
}

.nx-carousel-item.nx-col-100 { width: 100%; }

.nx-carousel-btn,
.nx-carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid #e4e4e7;
        background: #fff;
        color: #18181b;
        font-size: 18px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(24, 24, 27, .12);
        transition: background-color .2s ease, color .2s ease;
}

.nx-carousel-btn:hover,
.nx-carousel-nav:hover {
        background: #10b981;
        color: #fff;
}

.nx-carousel-prev { left: -8px; }
.nx-carousel-next { right: -8px; }

/* ----------------------------------------------------------------
 * Gallery + lightbox
 * ------------------------------------------------------------- */
[data-nx-gallery],
.nx-gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
}

[data-nx-gallery] img,
.nx-gallery-grid img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
        cursor: zoom-in;
        transition: transform .25s ease;
}

[data-nx-gallery] img:hover {
        transform: scale(1.02);
}

.nx-lightbox {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(24, 24, 27, .88);
}

.nx-lightbox.open {
        display: flex;
}

.nx-lightbox img {
        max-width: min(1100px, 92vw);
        max-height: 86vh;
        width: auto;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.nx-lightbox button,
.nx-lightbox-close {
        position: absolute;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 0;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
}

.nx-lightbox button:hover {
        background: #10b981;
}

.nx-lightbox-close { top: 20px; right: 20px; }
.nx-lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.nx-lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* ----------------------------------------------------------------
 * Flip box
 * ------------------------------------------------------------- */
.nx-flip-box,
.nx-flip {
        perspective: 1200px;
}

.nx-flip-inner {
        position: relative;
        width: 100%;
        height: 260px;
        transition: transform .6s ease;
        transform-style: preserve-3d;
}

.nx-flip-box:hover .nx-flip-inner,
.nx-flip:hover .nx-flip-inner {
        transform: rotateY(180deg);
}

.nx-flip-front,
.nx-flip-back {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px;
        border-radius: 12px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        text-align: center;
}

.nx-flip-front {
        background: #fafafa;
        border: 1px solid #e4e4e7;
        color: #18181b;
}

.nx-flip-back {
        background: #18181b;
        color: #fafafa;
        transform: rotateY(180deg);
}

/* v1.1.11: default typography for the flip box parts (the template no longer
   carries inline styles — the Style tab controls override these). */
.nx-flip-icon {
        font-size: 2rem;
        line-height: 1;
}

.nx-flip-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
}

.nx-flip-text {
        font-size: 0.95rem;
        opacity: 0.85;
        margin: 0;
        line-height: 1.55;
}

.nx-flip-box .nx-btn,
.nx-flip .nx-btn {
        margin-top: 6px;
}

/* ----------------------------------------------------------------
 * Countdown
 * ------------------------------------------------------------- */
[data-nx-countdown],
.nx-count {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
}

.nx-count-box,
[data-nx-countdown] .nx-count-box {
        flex: 0 0 auto;
        min-width: 84px;
        padding: 16px 12px;
        background: #18181b;
        color: #fff;
        border-radius: 12px;
        text-align: center;
}

.nx-count-number,
[data-nx-countdown] .nx-count-number {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
}

.nx-count-label,
[data-nx-countdown] .nx-count-label {
        display: block;
        margin-top: 4px;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #a1a1aa;
}

/* ----------------------------------------------------------------
 * Scroll progress bar
 * ------------------------------------------------------------- */
[data-nx-progress] {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99998;
        width: 0;
        height: 3px;
        background: #10b981;
        transition: width .1s linear;
}

/* ----------------------------------------------------------------
 * Off-canvas
 * ------------------------------------------------------------- */
.nx-offcanvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99997;
        width: min(360px, 86vw);
        height: 100vh;
        height: 100%;
        background: #fff;
        box-shadow: 0 0 40px rgba(24, 24, 27, .25);
        padding: 28px 24px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .3s ease, visibility 0s linear .3s;
        /* Fully hidden while closed: a translateX off-screen panel still paints
           its 40px box-shadow INTO the viewport edge — the shadow had to be
           invisible while the panel is closed and must not cover the panel
           once it opens. */
        visibility: hidden;
}

.nx-offcanvas.open {
        transform: translateX(0);
        transition: transform .3s ease;
        visibility: visible;
}

.nx-offcanvas-overlay {
        position: fixed;
        inset: 0;
        z-index: 99996;
        background: rgba(24, 24, 27, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
}

.nx-offcanvas-overlay.open {
        opacity: 1;
        pointer-events: auto;
}

.nx-offcanvas-close {
        position: absolute;
        top: 14px;
        right: 14px;
        border: 0;
        background: #f4f4f5;
        color: #18181b;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
}

/* ----------------------------------------------------------------
 * Video playlist + embeds
 * ------------------------------------------------------------- */
.nx-video-embed {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #18181b;
        border-radius: 12px;
        overflow: hidden;
}

.nx-video-embed iframe,
.nx-video-embed video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
}

.nx-playlist {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
        gap: 16px;
}

.nx-playlist-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 420px;
        overflow-y: auto;
}

.nx-playlist-item {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        border: 1px solid #e4e4e7;
        border-radius: 10px;
        background: #fff;
        color: #18181b;
        font-size: .9rem;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
}

.nx-playlist-item:hover {
        border-color: #10b981;
}

.nx-playlist-item.active {
        border-color: #10b981;
        background: #ecfdf5;
        font-weight: 600;
}

/* ----------------------------------------------------------------
 * Table of contents
 * ------------------------------------------------------------- */
.nx-toc {
        background: #fafafa;
        border: 1px solid #e4e4e7;
        border-radius: 12px;
        padding: 18px 20px;
}

.nx-toc-title {
        font-size: .8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #71717a;
        margin-bottom: 10px;
}

.nx-toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
}

.nx-toc-item {
        padding: 4px 0;
        border-bottom: 1px solid #f4f4f5;
}

.nx-toc-item:last-child {
        border-bottom: 0;
}

.nx-toc-item a {
        color: #3f3f46;
        text-decoration: none;
}

.nx-toc-item a:hover {
        color: #059669;
}

.nx-toc-item.active > a {
        color: #18181b;
        font-weight: 700;
}

.nx-toc-h3 { padding-left: 14px; }
.nx-toc-h4 { padding-left: 28px; }

/* ----------------------------------------------------------------
 * Pricing table / list
 * ------------------------------------------------------------- */
.nx-price-table {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        align-items: stretch;
}

.nx-price-item,
.nx-price-card {
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 14px;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.nx-price-item.featured,
.nx-price-card.featured {
        border-color: #10b981;
        box-shadow: 0 10px 30px rgba(16, 185, 129, .14);
}

.nx-price-title {
        font-size: 1rem;
        font-weight: 700;
        color: #18181b;
}

.nx-price-amount {
        font-size: 2.25rem;
        font-weight: 800;
        color: #18181b;
        line-height: 1;
}

.nx-price-amount small,
.nx-price-period {
        font-size: .85rem;
        font-weight: 500;
        color: #71717a;
}

.nx-price-features {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: #52525b;
        font-size: .925rem;
}

.nx-price-features li::before {
        content: "✓";
        color: #10b981;
        font-weight: 700;
        margin-right: 8px;
}

/* ----------------------------------------------------------------
 * Testimonials / reviews / ratings / share
 * ------------------------------------------------------------- */
.nx-testimonial,
.nx-review {
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 14px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.nx-testimonial-text,
.nx-review-text {
        color: #3f3f46;
        font-size: 1rem;
}

.nx-testimonial-author,
.nx-review-author {
        display: flex;
        align-items: center;
        gap: 12px;
}

.nx-testimonial-author img,
.nx-review-author img,
.nx-testimonial-avatar,
.nx-review-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        object-fit: cover;
}

.nx-testimonial-name,
.nx-review-name {
        font-weight: 600;
        color: #18181b;
        font-size: .925rem;
}

.nx-testimonial-role,
.nx-review-role {
        font-size: .8125rem;
        color: #71717a;
}

.nx-rating,
.nx-stars {
        display: inline-flex;
        gap: 2px;
        color: #f59e0b;
        font-size: 1rem;
        letter-spacing: 2px;
}

.nx-star {
        color: #f59e0b;
}

.nx-star.empty,
.nx-rating .empty {
        color: #d4d4d8;
}

.nx-share {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
}

.nx-share-btn,
.nx-share a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f4f4f5;
        border: 1px solid #e4e4e7;
        color: #3f3f46;
        font-size: .8125rem;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nx-share-btn:hover,
.nx-share a:hover {
        background: #10b981;
        border-color: #10b981;
        color: #fff;
        text-decoration: none;
}

/* ----------------------------------------------------------------
 * Code, blockquote, maps
 * ------------------------------------------------------------- */
.nx-code pre,
[data-nx-code] pre,
.nxel-code pre {
        background: #18181b;
        color: #e4e4e7;
        border-radius: 12px;
        padding: 18px 20px;
        overflow-x: auto;
        font-size: .85rem;
        line-height: 1.6;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        tab-size: 4;
}

.nx-code code,
[data-nx-code] code,
.nxel-code code {
        background: transparent;
        color: inherit;
        padding: 0;
        font-size: inherit;
}

.nx-blockquote {
        border-left: 4px solid #10b981;
        background: #fafafa;
        border-radius: 0 12px 12px 0;
        padding: 18px 22px;
        color: #3f3f46;
        font-size: 1.05rem;
        font-style: italic;
        margin: 0;
}

.nx-blockquote footer,
.nx-blockquote cite {
        display: block;
        margin-top: 10px;
        font-size: .85rem;
        font-style: normal;
        color: #71717a;
}

.nx-map,
.nxel-map iframe {
        border: 0;
        width: 100%;
        display: block;
        border-radius: 12px;
}

.nx-map iframe {
        min-height: 320px;
}

/* ----------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------- */
.nx-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 36px 32px;
        background: #18181b;
        border-radius: 16px;
        color: #fafafa;
}

.nx-cta-title,
.nx-cta h2,
.nx-cta h3 {
        color: #fafafa;
        margin: 0 0 6px;
}

.nx-cta-text,
.nx-cta p {
        color: #a1a1aa;
        margin: 0;
}

.nx-cta .nx-btn {
        flex: 0 0 auto;
}

/* ----------------------------------------------------------------
 * Single post content pieces
 * ------------------------------------------------------------- */
.nx-author-box {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        background: #fafafa;
        border: 1px solid #e4e4e7;
        border-radius: 14px;
        padding: 22px;
        margin: 28px 0;
}

.nx-author-avatar img,
.nx-author-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        flex: 0 0 auto;
}

.nx-author-body {
        flex: 1 1 auto;
        min-width: 0;
}

.nx-author-name {
        font-weight: 700;
        color: #18181b;
        margin-bottom: 4px;
}

.nx-author-bio {
        color: #52525b;
        font-size: .925rem;
}

.nx-post-navigation {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin: 32px 0;
        padding-top: 20px;
        border-top: 1px solid #e4e4e7;
}

.nx-nav-prev,
.nx-nav-next {
        max-width: 48%;
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.nx-nav-next {
        margin-left: auto;
        text-align: right;
}

.nx-nav-label {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #71717a;
}

.nx-nav-title {
        color: #18181b;
        font-weight: 600;
}

.nx-nav-title:hover {
        color: #059669;
}

.nx-post-info {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 16px;
}

.nx-info-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        background: #f4f4f5;
        border-radius: 999px;
        font-size: .8125rem;
        color: #3f3f46;
}

.nx-info-chip a {
        color: inherit;
}

.nx-info-chip a:hover {
        color: #059669;
}

.nx-filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 18px;
        padding: 0;
        list-style: none;
}

.nx-filter-item a {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 999px;
        border: 1px solid #e4e4e7;
        background: #fff;
        color: #3f3f46;
        font-size: .85rem;
        text-decoration: none;
}

.nx-filter-item a:hover,
.nx-filter-item.active a {
        border-color: #10b981;
        color: #059669;
}

.nx-site-logo img {
        max-height: 44px;
        width: auto;
}

.nx-site-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #18181b;
        text-decoration: none;
}

.nx-site-title:hover {
        text-decoration: none;
        color: #059669;
}

.nx-site-tagline {
        font-size: .8125rem;
        color: #71717a;
}

.nx-page-title,
.nx-post-title {
        margin-bottom: 8px;
}

.nx-post-excerpt {
        color: #52525b;
}

.nx-post-content {
        color: #3f3f46;
}

.nx-post-content h2 { margin: 1.4em 0 .6em; }
.nx-post-content h3 { margin: 1.2em 0 .5em; }

.nx-sidebar > * + * {
        margin-top: 20px;
}

/* ----------------------------------------------------------------
 * Animations + responsive
 * ------------------------------------------------------------- */
@keyframes nx-fade {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: none; }
}

@media (max-width: 782px) {
        .nx-page,
        .nx-main {
                padding: 20px 16px;
        }

        .nx-col-50,
        .nx-col-33,
        .nx-col-25 {
                flex: 1 1 100%;
        }

        .nx-carousel-item {
                width: 240px;
        }

        .nx-carousel-prev { left: 4px; }
        .nx-carousel-next { right: 4px; }

        .nx-playlist {
                grid-template-columns: 1fr;
        }

        .nx-cta {
                flex-direction: column;
                align-items: flex-start;
                padding: 28px 22px;
        }

        .nx-author-box {
                flex-direction: column;
        }

        .nx-post-navigation {
                flex-direction: column;
        }

        .nx-nav-next {
                margin-left: 0;
                text-align: left;
        }

        .nx-nav-prev,
        .nx-nav-next {
                max-width: 100%;
        }
}

/* ----------------------------------------------------------------
 * v1.1.6 — Off-canvas sides + hidden trigger
 * ------------------------------------------------------------- */
.nx-offcanvas.nx-side-right {
        left: auto;
        right: 0;
        transform: translateX(100%);
}

.nx-offcanvas.nx-side-right.open {
        transform: translateX(0);
}

.nx-offcanvas-trigger-hidden {
        display: none;
}

/* ----------------------------------------------------------------
 * v1.1.10 — Icon box + image box base styles
 * ------------------------------------------------------------- */
.nx-icon-box-icon {
        display: inline-block;
        line-height: 1;
}

.nx-icon-box-title {
        margin: 10px 0 6px;
}

.nx-icon-box-title a {
        color: inherit;
        text-decoration: none;
}

.nx-icon-box-desc {
        margin: 0;
        line-height: 1.6;
}

.nx-image-box-media img {
        max-width: 100%;
        height: auto;
        display: block;
}

.nx-image-box-title {
        margin: 10px 0 6px;
}

.nx-image-box-title a {
        color: inherit;
        text-decoration: none;
}

.nx-image-box-desc {
        margin: 0;
        line-height: 1.6;
}

/* ----------------------------------------------------------------
 * v1.1.6 — Nexus menu
 * ------------------------------------------------------------- */
.nx-nav {
        position: relative;
}

.nx-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 22px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.nx-menu-vertical .nx-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
}

.nx-menu-item {
        position: relative;
}

.nx-menu-item a {
        display: block;
        color: #18181b;
        text-decoration: none;
        font-size: 15px;
        line-height: 1.4;
        padding: 6px 2px;
        transition: color .15s ease, background-color .15s ease;
}

.nx-menu-toggle {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 42px;
        height: 36px;
        padding: 8px 10px;
        background: transparent;
        border: 1px solid #e4e4e7;
        border-radius: 8px;
        cursor: pointer;
}

.nx-menu-toggle-bar {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: #18181b;
}

/* wp_page_menu fallback (menu element when the WP menu does not resolve):
   the wrapper is a div.nx-menu, so the inner list needs the same shaping. */
.nx-menu-fallback ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 22px;
}

.nx-menu-vertical .nx-menu-fallback ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
}

.nx-menu-fallback ul li a {
        display: block;
        color: #18181b;
        text-decoration: none;
        font-size: 15px;
        line-height: 1.4;
        padding: 6px 2px;
}

/* ----------------------------------------------------------------
 * v1.1.6 — Contact form: choice fields (checkbox / radio)
 * ------------------------------------------------------------- */
.nx-form-choices {
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.nx-form-choice {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .9rem;
        color: #3f3f46;
        cursor: pointer;
}

.nx-form-choice input[type="checkbox"],
.nx-form-choice input[type="radio"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #10b981;
}

/* ----------------------------------------------------------------
 * v1.1.6 — Post comments preview markup
 * ------------------------------------------------------------- */
.nx-comments-title {
        font-size: 1.1rem;
        margin: 0 0 14px;
}

.nx-comment-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.nx-comment {
        display: flex;
        gap: 12px;
        padding: 14px;
        border: 1px solid #e4e4e7;
        border-radius: 10px;
        background: #fff;
}

.nx-comment-avatar img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: block;
}

.nx-comment-body {
        flex: 1;
        min-width: 0;
}

.nx-comment-meta {
        display: flex;
        gap: 10px;
        align-items: baseline;
        flex-wrap: wrap;
}

.nx-comment-author {
        font-weight: 600;
        font-size: .9rem;
        color: #18181b;
}

.nx-comment-date {
        color: #a1a1aa;
        font-size: .78rem;
}

.nx-comment-text {
        margin: 4px 0 0;
        color: #3f3f46;
        font-size: .92rem;
}

.nx-featured-empty {
        border: 1px dashed #d4d4d8;
        border-radius: 10px;
        padding: 40px 16px;
        text-align: center;
        color: #a1a1aa;
        font-size: .9rem;
}

/* ----------------------------------------------------------------
 * v1.1.6 — Motion effects (entrance animations, Advanced → Motion)
 * ------------------------------------------------------------- */
.nx-anim {
        opacity: 0;
}

.nx-anim.nx-anim-in {
        opacity: 1;
}

@keyframes nx-anim-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
}

@keyframes nx-anim-fade-up {
        from { opacity: 0; transform: translateY(26px); }
        to   { opacity: 1; transform: none; }
}

@keyframes nx-anim-fade-down {
        from { opacity: 0; transform: translateY(-26px); }
        to   { opacity: 1; transform: none; }
}

@keyframes nx-anim-fade-left {
        from { opacity: 0; transform: translateX(26px); }
        to   { opacity: 1; transform: none; }
}

@keyframes nx-anim-fade-right {
        from { opacity: 0; transform: translateX(-26px); }
        to   { opacity: 1; transform: none; }
}

@keyframes nx-anim-zoom-in {
        from { opacity: 0; transform: scale(.92); }
        to   { opacity: 1; transform: none; }
}

@keyframes nx-anim-zoom-out {
        from { opacity: 0; transform: scale(1.08); }
        to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
        .nx-anim {
                opacity: 1 !important;
                animation: none !important;
        }
}

/* ----------------------------------------------------------------
 * Image element (v1.1.11: div.nx-image wrapper so builder badges
 * can render on the selected element; the img fills the wrapper)
 * ------------------------------------------------------------- */
.nx-image {
        display: block;
        line-height: 0;
}

.nx-image img {
        max-width: 100%;
        height: auto;
        display: inline-block;
}