/* =====================================================================
 * NGS Product Spec — Frontend Styles
 *
 * CUSTOMIZE: every visible style is driven by CSS variables defined at
 * the top. To override, paste a `:root { --ngst-...: value; }` block
 * into your theme's "Additional CSS" (Appearance → Customize) or your
 * child theme stylesheet. Full reference at Trims → Help.
 * ===================================================================== */

:root {
    /* === Brand palette — EXACTLY two colors, used sparingly (<1% of UI).
     *   --ngst-brand:     primary CTA backgrounds, tiny accents (active dot, plank underline, focus rings).
     *   --ngst-brand-alt: hover state for the primary CTA.
     * Everything else is neutral. */
    --ngst-brand:        #00b5bd;
    --ngst-brand-alt:    #0076bd;

    /* Backward-compat aliases — still resolve to neutrals or the brand pair. */
    --ngst-primary:           var(--ngst-text-color);   /* was deep teal — now neutral dark */
    --ngst-primary-container: var(--ngst-brand);        /* CTA bg only */
    --ngst-brand-color:       var(--ngst-brand);
    --ngst-brand-hover:       var(--ngst-brand-alt);

    /* === Neutrals === */
    --ngst-text-color:   #1a1c1e;
    --ngst-text-muted:   #42474e;
    --ngst-text-subtle:  #72777f;
    --ngst-border-soft:  rgba(26, 28, 30, 0.08);
    --ngst-surface-low:  #f6f7f8;       /* card image bg */
    --ngst-surface:      #ffffff;

    /* === Typography pairing === */
    --ngst-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --ngst-font-interface: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ngst-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ngst-font-mono: "SF Mono", Consolas, Menlo, monospace;

    /* === Premium shadows === */
    --ngst-shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    --ngst-shadow-card-hover: 0 20px 50px -12px rgba(0, 0, 0, 0.12);

    /* === Radii (Stitch scale) === */
    --ngst-radius-card: 24px;     /* rounded-3xl */
    --ngst-radius-image: 16px;    /* rounded-2xl */

    /* === Trim card sizing & image === */
    /* All trim images are square 1:1 by default — render as big squares. */
    --ngst-card-image-aspect: 1 / 1;
    --ngst-card-image-fit: cover;
    --ngst-card-image-bg: var(--ngst-surface-low);
    --ngst-card-bg: #ffffff;
    --ngst-card-border: 0;
    --ngst-card-radius: var(--ngst-radius-card);   /* 24px */
    --ngst-card-padding: 16px;                     /* p-4 outer */

    /* === Trim card text === */
    --ngst-card-title-color: var(--ngst-text-color);
    /* Title font-size matches SKU font-size so the card name and SKU read at
     * the same scale — title differentiated by weight/case only. */
    --ngst-card-title-size: 11px;
    --ngst-card-title-weight: 600;
    --ngst-card-type-color: var(--ngst-text-muted);
    --ngst-card-type-size: 11px;
    --ngst-card-sku-color: var(--ngst-text-subtle);
    --ngst-card-sku-size: 11px;

    /* === Trim card hover (premium lift) === */
    --ngst-card-hover-lift: 4px;
    --ngst-card-hover-shadow: var(--ngst-shadow-card-hover);

    /* === Slider === */
    --ngst-slider-padding-y: 16px;
    --ngst-slider-skeleton-min-width: 240px;

    /* === Lightbox ===
     * Image is 2× the card image — wider modal + image-heavy grid. Square
     * 1:1, object-fit cover, white background (no gray letterbox bars). */
    --ngst-lightbox-bg: #ffffff;
    --ngst-lightbox-radius: 6px;
    --ngst-lightbox-max-width: 1200px;
    --ngst-lightbox-padding: 32px;
    --ngst-lightbox-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
    --ngst-lightbox-image-fit: cover;
    --ngst-lightbox-image-bg: #ffffff;

    /* === View Item button === */
    --ngst-cta-bg: var(--ngst-brand-color);
    --ngst-cta-bg-hover: var(--ngst-brand-hover);
    --ngst-cta-color: #ffffff;
    --ngst-cta-radius: 2px;
    --ngst-cta-padding: 14px 26px;

    /* === Animation === */
    --ngst-modal-fade: 0.2s;
}

/* ===== Slider — anti-flicker: hide cards until Swiper finishes init ===== */
.ngt-slider {
    position: relative;
    padding: var(--ngst-slider-padding-y) 0;
    font-family: var(--ngst-font-body);
}
.ngt-slider .swiper-wrapper { align-items: stretch; }

.ngt-slider:not(.swiper-initialized) .swiper-slide {
    max-width: var(--ngst-slider-skeleton-min-width);
}
.ngt-slider:not(.swiper-initialized) .trim-card { opacity: 0; }
.ngt-slider .trim-card { opacity: 1; transition: opacity 0.3s ease; }

/* ===== Trim card =====
 * Flat, no hover animation. Sharp corners, no drop shadow. */
.trim-card {
    display: flex; flex-direction: column;
    background: var(--ngst-card-bg);
    border-radius: 0;
    padding: var(--ngst-card-padding);
    overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: none;
    height: auto;
}

.trim-card__image {
    aspect-ratio: var(--ngst-card-image-aspect);
    overflow: hidden;
    background: var(--ngst-card-image-bg);
    border-radius: 0;
    margin-bottom: 24px;
}
.trim-card__image img {
    width: 100%; height: 100%;
    object-fit: var(--ngst-card-image-fit);
    object-position: center;
    display: block;
}

.trim-card__body {
    padding: 0 8px 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.trim-card__type {
    display: inline-block;
    font-family: var(--ngst-font-interface);
    font-size: var(--ngst-card-type-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ngst-text-subtle);
    margin: 0 0 4px;
}
.trim-card__title {
    margin: 0 0 4px;
    font-family: var(--ngst-font-interface);
    font-size: var(--ngst-card-title-size);
    font-weight: var(--ngst-card-title-weight);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--ngst-card-title-color);
}
.trim-card__sku {
    display: block;
    font-family: var(--ngst-font-interface);
    font-size: var(--ngst-card-sku-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ngst-card-sku-color);
    margin-bottom: 24px;
}
.trim-card__cta {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ngst-text-color);
    font-family: var(--ngst-font-interface);
    font-weight: 600;
    font-size: 14px;
    margin-top: auto;
}
.trim-card__cta::after {
    content: "→";
    display: inline-block;
    font-size: 16px;
}

/* Trim section header (title left + circular nav right) */
.ngt-trim-section-header {
    display: flex; flex-direction: column; gap: 24px;
    margin-bottom: 48px;
}
@media (min-width: 768px) {
    .ngt-trim-section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}
/* "Coordinating Trims" — matches the [ngs_planks] "Size Details" heading
 * style exactly (Montserrat 22px / 500 / uppercase / 0.02em tracking). */
.ngt-trim-section-header__title {
    margin: 0 0 8px;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 22px; font-weight: 500;
    line-height: 1.2; letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ngst-text-color);
}
/* "Precision-matched accessories for a seamless finish." — ALL CAPS. */
.ngt-trim-section-header__sub {
    margin: 0;
    color: var(--ngst-text-muted);
    font-family: var(--ngst-font-body);
    font-size: 12px; font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.ngt-trim-section-header__nav { display: flex; gap: 8px; }
.ngt-trim-section-header__nav button {
    width: 48px; height: 48px;
    background: transparent;
    border: 1px solid var(--ngst-border-soft);
    border-radius: 999px;
    color: var(--ngst-text-color);
    cursor: pointer;
    font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.ngt-trim-section-header__nav button:hover {
    background: var(--ngst-surface-low);
    border-color: var(--ngst-text-color);
}
.ngt-trim-section-header__nav button:active { transform: scale(0.92); }

.ngt-slider .swiper-button-prev,
.ngt-slider .swiper-button-next { color: var(--ngst-text-color); }

/* Mobile grid override. Columns are admin-configurable via the inline
   --ngst-mobile-cols variable on .ngt-slider (defaults to 2). */
@media (max-width: 768px) {
    .ngt-slider .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(var(--ngst-mobile-cols, 2), 1fr);
        gap: 15px;
        transform: none !important;
    }
    .ngt-slider:not(.swiper-initialized) .swiper-slide { max-width: none; }
    .ngt-slider .swiper-button-prev,
    .ngt-slider .swiper-button-next { display: none; }
}

/* ===== Lightbox =====
 * Image column gets 2× the info column so the trim photo lands at roughly
 * twice the card image size. Stacks on small screens. */
.ngt-lightbox {
    position: relative;
    background: var(--ngst-lightbox-bg);
    max-width: var(--ngst-lightbox-max-width);
    margin: 32px auto;
    padding: var(--ngst-lightbox-padding);
    border-radius: var(--ngst-lightbox-radius);
    display: grid; grid-template-columns: 2fr 1fr; gap: 36px;
    box-shadow: var(--ngst-lightbox-shadow);
    font-family: var(--ngst-font-body);
    color: var(--ngst-text-color);
}
@media (max-width: 768px) {
    .ngt-lightbox { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}
.ngt-lightbox__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px; height: 36px;
    background: transparent; border: 0; padding: 0;
    color: var(--ngst-text-color);
    font-size: 32px; line-height: 1; font-weight: 300;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 2;
}
.ngt-lightbox__close:hover { opacity: 0.55; }
.ngt-lightbox__close:focus { outline: 2px solid var(--ngst-brand-color); outline-offset: 2px; }

.ngt-lightbox__image {
    /* Square always — trim images are 1:1; cover guarantees no letterbox bars. */
    aspect-ratio: 1 / 1;
    background: var(--ngst-lightbox-image-bg);
    overflow: hidden;
    border-radius: 0;
    align-self: start;
    width: 100%;
}
.ngt-lightbox__image img {
    width: 100%; height: 100%;
    object-fit: var(--ngst-lightbox-image-fit);
    object-position: center;
    display: block;
}

.ngt-lightbox__info {
    display: flex; flex-direction: column; min-width: 0;
    /* Reserve top space so the X never collides with the type label or title. */
    padding-top: 28px;
}
.ngt-lightbox__type {
    display: inline-block;
    font-family: var(--ngst-font-body);
    font-size: 11px; font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ngst-text-muted);
    margin-bottom: 12px;
}
.ngt-lightbox__title {
    margin: 0 0 8px;
    
    font-size: 22px; font-weight: 400;
    line-height: 1.15; letter-spacing: -0.015em;
    color: var(--ngst-text-color);
}
.ngt-lightbox__sku {
    margin: 0 0 18px;
    font-family: var(--ngst-font-mono);
    font-size: 12px; color: var(--ngst-text-muted);
    letter-spacing: 0.04em;
}

.ngt-lightbox__desc {
    margin: 0 0 20px;
    color: #3a3a3a; font-size: 14.5px; line-height: 1.6;
    max-height: 240px; overflow-y: auto;
}
.ngt-lightbox__desc p { margin: 0 0 10px; }
.ngt-lightbox__desc p:last-child { margin-bottom: 0; }

.ngt-spec-table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 13.5px;
}
.ngt-spec-table th,
.ngt-spec-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--ngst-border-soft);
    text-align: left;
}
.ngt-spec-table th {
    color: var(--ngst-text-muted);
    font-weight: 500;
    width: 38%;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}
.ngt-spec-table td { color: var(--ngst-text-color); }
.ngt-spec-table tr:last-child th,
.ngt-spec-table tr:last-child td { border-bottom: 0; }

.ngt-lightbox__cta { margin: auto 0 0; padding-top: 8px; }
.ngt-lightbox__view-item {
    display: inline-flex; align-items: center; gap: 10px;
    padding: var(--ngst-cta-padding);
    background: var(--ngst-cta-bg);
    color: var(--ngst-cta-color) !important;
    text-decoration: none;
    border-radius: var(--ngst-cta-radius);
    font-family: var(--ngst-font-body);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: background 0.2s ease, gap 0.2s ease;
}
.ngt-lightbox__view-item .ngt-arrow {
    display: inline-block; transition: transform 0.2s ease;
    font-weight: 400;
}
.ngt-lightbox__view-item:hover {
    background: var(--ngst-cta-bg-hover);
    color: var(--ngst-cta-color) !important;
    gap: 14px;
}
.ngt-lightbox__view-item:hover .ngt-arrow { transform: translateX(3px); }
.ngt-lightbox__view-item:focus {
    outline: 2px solid var(--ngst-brand-color);
    outline-offset: 3px;
    color: var(--ngst-cta-color) !important;
}

/* Hide Magnific Popup's default close button — we render our own inside. */
.ngt-mfp .mfp-close { display: none !important; }

/* ===== Modal fade animation (0.2s in / 0.2s out) ===== */
.mfp-fade.mfp-bg {
    opacity: 0;
    transition: opacity var(--ngst-modal-fade) ease-out;
}
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.78; }
.mfp-fade.mfp-bg.mfp-removing { opacity: 0; }

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--ngst-modal-fade) ease-out,
                transform var(--ngst-modal-fade) ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
    transform: translateY(0);
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
    transform: translateY(8px);
}

@media (max-width: 600px) {
    .ngt-lightbox {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 18px;
        margin: 24px auto;
    }
    .ngt-lightbox__close {
        top: 8px; right: 10px;
        width: 40px; height: 40px;
        font-size: 32px;
    }
    .ngt-lightbox__info { padding-top: 12px; }
    .ngt-lightbox__title { font-size: 24px; }
}

/* ===== Frontend search ===== */
.ngst-search {
    margin: 16px 0; max-width: 820px;
    font-family: var(--ngst-font-body);
}
.ngst-search__bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: #fafafa; border: 1px solid var(--ngst-border-soft); border-radius: 6px;
}
.ngst-search__input {
    flex: 1; padding: 10px 12px;
    border: 1px solid #d0d0d0; border-radius: 4px;
    font-size: 14px; font-family: var(--ngst-font-body);
}
.ngst-search__input:focus {
    outline: 2px solid var(--ngst-brand-color);
    outline-offset: 1px; border-color: var(--ngst-brand-color);
}
.ngst-search__hint { color: var(--ngst-text-muted); font-size: 12px; white-space: nowrap; }
.ngst-search__results { margin-top: 16px; }
.ngst-search__empty { color: var(--ngst-text-muted); padding: 16px; text-align: center; }
.ngst-search__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ngst-search__grid .trim-card { height: auto; opacity: 1; }
@media (max-width: 600px) {
    .ngst-search__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* =====================================================================
 * Plank Images — [ngs_planks] shortcode
 *
 * Simple stacked layout per plank:
 *   "Size Details" heading
 *   ─────────────────────────────────
 *   PLANK SIZE: <value>
 *   ITEM ID:    <value>
 *   UPC CODE:   <value>
 *
 *   <plank image, 635px wide on desktop/tablet, 100% on mobile>
 *
 * If the product has multiple plank entries, each gets its own block,
 * stacked vertically with extra spacing between.
 * ===================================================================== */
.ngst-planks {
    margin: 32px 0;
    font-family: var(--ngst-font-body);
    color: var(--ngst-text-color);
}
.ngst-plank {
    margin: 0 0 40px;
}
.ngst-plank:last-child { margin-bottom: 0; }

.ngst-plank__heading {
    margin: 0 0 14px;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 22px; font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ngst-text-color);
    line-height: 1.2;
}
.ngst-plank__rule {
    border: 0;
    border-top: 1px solid #d0cdc6;
    margin: 0 0 18px;
}
.ngst-plank__lines {
    margin: 0 0 22px;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ngst-text-color);
}
.ngst-plank__line { /* one row per spec */ }
.ngst-plank__label { font-weight: 400; margin-right: 6px; }
.ngst-plank__value { font-weight: 700; }

/* Image: locked to 635px on desktop/tablet (matches the reference layout),
   full-width on mobile. Aspect ratio is preserved by the source image. */
.ngst-plank__image { margin: 0; }
.ngst-plank__image img {
    display: block;
    width: 635px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .ngst-plank__image img { width: 100%; }
}

/* =====================================================================
 * Live Installed Samples Gallery — [ngs_live_gallery]
 *
 * Fixed 3-2-2 grid layout (same on desktop and mobile):
 *   Row 1: image · AR icon · image     (3 cells, each 2/6 cols)
 *   Row 2: image · image                (2 cells, each 3/6 cols)
 *   Row 3: image · image                (2 cells, each 3/6 cols)
 * = 6 images + AR icon = 7 cards.
 *
 * Constrained max-width so the desktop view looks identical to the
 * mobile reference (rather than stretching across the page).
 * ===================================================================== */
.ngst-live-gallery {
    margin: 28px auto;
    max-width: 600px;       /* compact, centered — same on desktop and mobile */
    padding: 0;
    font-family: var(--ngst-font-body);
    color: var(--ngst-text-color);
}
/* Centered section header — Stitch "Inspiration Gallery" pattern. */
.ngst-live-gallery h5.ngst-live-gallery__title,
.ngst-live-gallery .ngst-live-gallery__title {
    margin: 0 auto 16px !important;
    padding: 0 !important;
    font-family: var(--ngst-font-interface) !important;
    font-size: 32px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    text-align: center !important;
    color: var(--ngst-text-color) !important;
}
.ngst-live-gallery__subtitle {
    max-width: 640px;
    margin: 0 auto 64px;
    text-align: center;
    color: var(--ngst-text-muted);
    font-family: var(--ngst-font-body);
    font-size: 16px;
    line-height: 1.6;
}
/* 3-2-2 square grid (the layout we had before the bento experiment):
 *   Row 1 — Image, AR icon (center), Image     (3 cells, each 2/6 col wide)
 *   Row 2 — Image, Image                        (2 cells, each 3/6 col wide)
 *   Row 3 — Image, Image                        (2 cells, each 3/6 col wide)
 *
 * Cards render in source order: image1, AR, image2, image3, image4, image5, image6.
 * No `order` reshuffle — the AR card sits exactly in slot 2 of the top row
 * (the "middle of top row" the user asked for).
 */
.ngst-live-gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: #d4d4d4;       /* shows through the 1px gaps as hairlines */
    overflow: visible;
    padding: 0;
}
/* Row 1 — first 3 cards each span 2 columns. */
.ngst-live-gallery__grid > .ngst-ci-card:nth-child(-n+3) {
    grid-column: span 2;
}
/* Row 2+ — 2 cards per row, each spanning 3 columns. */
.ngst-live-gallery__grid > .ngst-ci-card:nth-child(n+4) {
    grid-column: span 3;
}

.ngst-live-gallery__more {
    margin-top: 12px;
    font-size: 12px;
    color: var(--ngst-text-muted);
    text-align: center;
    letter-spacing: 0.04em;
}

.ngst-ci-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;                /* fill grid cell — no theme-injected baseline gap */
    padding: 0 !important;
    margin: 0 !important;
    background: var(--ngst-card-bg);
    border: 0 !important;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 0;              /* kill stray button/span baseline space */
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
    color: inherit;
}
.ngst-ci-card:hover { transform: none; }

.ngst-ci-card__image {
    display: block;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    background: var(--ngst-card-image-bg);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}
.ngst-ci-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    max-width: 100% !important;
}

/* Default caption: overlays the image bottom with a soft cream gradient
 * + dark text. Blonde / bougy aesthetic — warm white champagne tones
 * fading up from the bottom of the image. */
.ngst-ci-card__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 36px 14px 12px;
    background: linear-gradient(
        to bottom,
        rgba(250, 248, 243, 0)    0%,
        rgba(250, 248, 243, 0.78) 55%,
        rgba(250, 248, 243, 0.96) 100%
    );
    color: #1a1a1a;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

/* AR card — large hero. The whole card triggers [roomvo_button]; JS
 * delegates the click to the inner anchor/button so RoomVo's own handler runs.
 * Fills its 2x2 cell with a soft surface bg, shows a hover overlay with
 * a "Visualizer" pill button.
 */
/* AR card — full-bleed image (admin-supplied seeinroom.webp). Whole card
 * is the click target; JS delegates to the inner [roomvo_button]. */
.ngst-ci-card--ar {
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background: #f7f7f6;
    overflow: hidden;
    padding: 0;
    display: block;
    position: relative;
}
.ngst-ci-card__ar-image {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* The inner [roomvo_button] is hidden visually — the whole card already
 * triggers it via the JS click delegate. We only keep it in the DOM for
 * that delegate to find. */
.ngst-ci-card__ar-cta {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    pointer-events: none;
}
.ngst-ci-card__ar-cta {
    display: block;
    margin-top: 8px;
}

/* Mobile tweaks: smaller caption + tighter padding inside cards.
 * The 3-2-2 grid layout is the same as desktop. */
@media (max-width: 600px) {
    .ngst-live-gallery {
        margin: 20px 0;
        max-width: none;
    }
    .ngst-ci-card__caption {
        font-size: 12px !important;
        padding: 22px 8px 6px !important;
        letter-spacing: 0 !important;
    }
    .ngst-ci-card__caption--ar strong { font-size: 10px !important; }
    .ngst-ci-card__caption--ar small  { font-size: 9px  !important; }
}

/* =====================================================================
 * Live Gallery Modal
 * ===================================================================== */
body.ngst-ci-modal-open { overflow: hidden; }

.ngst-ci-modal {
    position: fixed; inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--ngst-modal-fade) ease-out;
    font-family: var(--ngst-font-body);
}
.ngst-ci-modal.is-open { opacity: 1; }
.ngst-ci-modal.is-closing { opacity: 0; }

.ngst-ci-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.ngst-ci-modal__panel {
    position: relative;
    width: min(1100px, 92vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: 3fr 2fr;  /* matches Stitch md:w-3/5 + md:w-2/5 */
    overflow: hidden;
    transform: translateY(8px);
    transition: transform var(--ngst-modal-fade) ease-out;
}
.ngst-ci-modal.is-open .ngst-ci-modal__panel { transform: translateY(0); }

.ngst-ci-modal__close {
    position: absolute; top: 24px; right: 24px;
    width: 36px; height: 36px;
    background: transparent; border: 0; padding: 0;
    color: var(--ngst-text-muted);
    cursor: pointer;
    z-index: 50;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.15s;
}
.ngst-ci-modal__close:hover { color: var(--ngst-text-color); }
.ngst-ci-modal__close svg { display: block; }

.ngst-ci-modal__media {
    position: relative;
    background: #f3f3f1;
    min-height: 480px;
    overflow: hidden;
}
.ngst-ci-modal__image {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    transition: opacity 0.25s ease;
}

/* Image overlay arrow nav (white circles, soft shadow). */
.ngst-ci-modal__arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ngst-text-color);
    border: 0; padding: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 5;
    transition: background 0.2s, transform 0.2s;
}
.ngst-ci-modal__arrow:hover { background: #fff; }
.ngst-ci-modal__arrow:active { transform: translateY(-50%) scale(0.92); }
.ngst-ci-modal__arrow--prev { left: 16px; }
.ngst-ci-modal__arrow--next { right: 16px; }
.ngst-ci-modal__arrow svg { display: block; }

/* Pagination dots — active one is a wider brand pill, others are thin white. */
.ngst-ci-modal__dots {
    position: absolute;
    bottom: 24px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 5;
}
.ngst-ci-modal__dot {
    width: 8px; height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.ngst-ci-modal__dot.is-active {
    width: 24px;
    background: var(--ngst-brand);   /* small brand accent */
}
.ngst-ci-modal__dot:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.85);
}
.ngst-ci-modal__loader {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 70%)
        rgba(243, 243, 241, 1);
    background-size: 200% 100%;
    background-position: 100% 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.ngst-ci-modal.is-loading .ngst-ci-modal__loader {
    opacity: 1;
    animation: ngst-ci-shimmer 1.2s linear infinite;
}
@keyframes ngst-ci-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

.ngst-ci-modal__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    overflow-y: auto;
    font-family: var(--ngst-font-interface);
}
.ngst-ci-modal__info-inner { flex: 1; }
.ngst-ci-modal__eyebrow {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ngst-text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ngst-ci-modal__label {
    margin: 0 0 8px;
    font-family: var(--ngst-font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ngst-text-color);
}

/* Caption title — the customer image post title shown under the product label,
 * before the description. Subtle, sans, slightly muted. */
.ngst-ci-modal__caption-title {
    margin: 0 0 24px;
    font-family: var(--ngst-font-interface);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--ngst-text-muted);
}

/* Description styled as a testimonial — italic Playfair quote mark behind, italic body text. */
.ngst-ci-modal__quote {
    position: relative;
    padding-left: 28px;
    margin-bottom: 32px;
}
.ngst-ci-modal__quote-mark {
    position: absolute;
    left: 0; top: -8px;
    color: var(--ngst-brand);
    opacity: 0.20;
    font-family: var(--ngst-font-display);
    font-size: 64px;
    line-height: 1;
}
.ngst-ci-modal__desc {
    color: var(--ngst-text-muted);
    font-size: 15px;
    line-height: 1.65;
    font-style: italic;
    font-family: var(--ngst-font-interface);
    max-height: 240px;
    overflow-y: auto;
}
.ngst-ci-modal__desc p { margin: 0 0 10px; }
.ngst-ci-modal__desc p:last-child { margin-bottom: 0; }

.ngst-ci-modal__cta {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: auto;
    padding-top: 32px;
}
/* The shortcodes themselves render the actual buttons; we force a
   consistent block-level treatment with !important so host themes /
   shortcode CSS can't make our copies invisible. */
/* Tall, full-width icon buttons (Stitch h-14 spec). The shortcode-rendered
 * inner <a>/<button> from [roomvo_button] / [ngai_quote_button] gets
 * forced into this look so themes can't break the visual rhythm. */
.ngst-ci-modal__cta-btn,
.ngst-ci-modal__cta-btn-fallback { width: 100%; }
.ngst-ci-modal__cta-btn a,
.ngst-ci-modal__cta-btn button,
.ngst-ci-modal__cta-btn-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 56px !important;          /* h-14 */
    padding: 0 24px !important;
    background: var(--ngst-brand) !important;
    color: #fff !important;
    text-align: center !important;
    font-family: var(--ngst-font-interface) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 12px !important;   /* rounded-xl */
    font-size: 15px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.ngst-ci-modal__cta-btn a:hover,
.ngst-ci-modal__cta-btn button:hover {
    background: var(--ngst-brand-alt) !important;  /* the second brand color */
    color: #fff !important;
}
.ngst-ci-modal__cta-btn a:active,
.ngst-ci-modal__cta-btn button:active {
    transform: scale(0.98) !important;
}

/* Get a Quote — black, hover to deeper black. */
.ngst-ci-modal__cta-btn--quote a,
.ngst-ci-modal__cta-btn--quote button,
.ngst-ci-modal__cta-btn-fallback.ngst-ci-modal__cta-btn--quote {
    background: var(--ngst-text-color) !important;
    color: #ffffff !important;
}
.ngst-ci-modal__cta-btn--quote a:hover,
.ngst-ci-modal__cta-btn--quote button:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Promo text link under the CTA stack — small, light gray, centered. */
.ngst-ci-modal__textlink {
    display: block;
    margin: 12px auto 0;
    text-align: center;
    color: var(--ngst-text-subtle);
    font-family: var(--ngst-font-interface);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}
.ngst-ci-modal__textlink:hover {
    color: var(--ngst-text-color);
}

.ngst-ci-modal__copyright {
    margin: 32px 0 0;
    font-size: 9px;
    font-weight: 700;
    color: var(--ngst-text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
}
.ngst-ci-modal__copyright a {
    color: var(--ngst-text-muted);
    text-decoration: none;
    font-weight: 700;
}
.ngst-ci-modal__copyright a:hover { color: var(--ngst-text-color); }

/* Mobile-only "Close" pill at the bottom of the modal info column.
   The top-right ✕ stays available too; this is an additional, easier-to-tap
   target for thumbs on phones. */
.ngst-ci-modal__close-pill {
    display: none;
}
@media (max-width: 768px) {
    .ngst-ci-modal__close-pill {
        display: block;
        margin: 18px auto 4px;
        padding: 10px 28px;
        background: #000000;
        color: #ffffff;
        border: 0;
        border-radius: 999px;
        font-family: "Montserrat", var(--ngst-font-body);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.15s, transform 0.15s;
    }
    .ngst-ci-modal__close-pill:hover { background: #222; }
    .ngst-ci-modal__close-pill:active { transform: scale(0.97); }
}

@media (max-width: 768px) {
    .ngst-ci-modal__panel {
        grid-template-columns: 1fr;
        max-height: 95vh;
        width: 95vw;
        overflow-y: auto;
    }
    .ngst-ci-modal__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
        order: 1;
    }
    .ngst-ci-modal__info {
        order: 2;
        padding: 24px 22px 20px;
    }
    .ngst-ci-modal__label { font-size: 28px; }
    .ngst-ci-modal__copyright { text-align: center; }
}

/* =====================================================================
 * Product Overview / Feature Blocks — [ngs_features] shortcode
 *
 * Layout:
 *   ≥1024px  → 3-col bento grid with thin borders
 *   ≥768px   → 2-col bento grid
 *   <768px   → native <details> accordion (icon + title visible, tap to open)
 * ===================================================================== */
.ngst-features {
    margin: 48px auto;
    max-width: 1280px;
    padding: 0 24px;
    font-family: var(--ngst-font-body);
    color: var(--ngst-text-color);
}

/* Bento grid (tablet + desktop) ------------------------------------ */
.ngst-features__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--ngst-border-soft);
    border-left: 1px solid var(--ngst-border-soft);
}
@media (min-width: 1024px) {
    .ngst-features__grid { grid-template-columns: repeat(3, 1fr); }
}

.ngst-feature {
    padding: 28px 26px;
    border-right: 1px solid var(--ngst-border-soft);
    border-bottom: 1px solid var(--ngst-border-soft);
    background: #ffffff;
}

/* Title row: uniform-size icon + post title side-by-side. */
.ngst-feature__head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 12px;
}
.ngst-feature__icon-img {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    object-fit: contain;
    display: block;
}
.ngst-feature__title {
    margin: 0;
    flex: 1; min-width: 0;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 17px; font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--ngst-text-color);
}

.ngst-feature__sub {
    margin: 0 0 6px;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 14px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ngst-text-color);
    line-height: 1.3;
}
.ngst-feature__desc {
    color: var(--ngst-text-muted);
    font-size: 14px;
    line-height: 1.55;
}
.ngst-feature__desc p { margin: 0 0 8px; }
.ngst-feature__desc p:last-child { margin-bottom: 0; }

/* Mobile accordion ------------------------------------------------- */
.ngst-features__accordion { display: none; }

@media (max-width: 767px) {
    .ngst-features__grid { display: none; }
    .ngst-features__accordion {
        display: block;
        border-top: 1px solid var(--ngst-border-soft);
    }
}

.ngst-feature-acc {
    border-bottom: 1px solid var(--ngst-border-soft);
    background: #ffffff;
}
.ngst-feature-acc__summary {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ngst-feature-acc__summary::-webkit-details-marker { display: none; }
.ngst-feature-acc__icon-img {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
.ngst-feature-acc__title {
    flex: 1;
    margin: 0;
    font-family: "Montserrat", var(--ngst-font-body);
    font-size: 14px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--ngst-text-color);
}
.ngst-feature-acc__toggle {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ngst-text-color);
    border-radius: 999px;
    font-size: 16px; font-weight: 600; line-height: 1;
    color: var(--ngst-text-color);
    transition: transform 0.2s, background 0.2s, color 0.2s;
}
.ngst-feature-acc[open] .ngst-feature-acc__toggle {
    background: var(--ngst-text-color);
    color: #ffffff;
    transform: rotate(45deg);  /* + becomes × */
}
.ngst-feature-acc__body {
    padding: 0 20px 18px 64px; /* indent under the icon */
}
.ngst-feature-acc__body .ngst-feature__sub {
    font-size: 12px;
    margin-bottom: 6px;
}
.ngst-feature-acc__body .ngst-feature__desc {
    font-size: 13.5px;
    line-height: 1.55;
}

/* =====================================================================
 * Admin: term-edit assignment UI for [ngs_features]
 * ===================================================================== */
.ngst-feat-term { max-width: 760px; }
.ngst-feat-term ul {
    list-style: none; margin: 0; padding: 0;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}
.ngst-feat-term__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f1;
}
.ngst-feat-term__row:last-child { border-bottom: 0; }
.ngst-feat-term__handle {
    cursor: move;
    color: #999;
    font-size: 18px !important;
}
.ngst-feat-term__num {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #1a1c1e;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    color: #1a1c1e;
    flex: 0 0 auto;
}
.ngst-feat-term__icon-img {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    object-fit: contain;
    display: block;
}
.ngst-feat-term__icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ngst-feat-term__icon--empty {
    border: 1px dashed #ccc;
    border-radius: 4px;
    color: #ccc;
    font-size: 14px;
}

/* Feature Block icon-image picker (metabox) */
.ngst-feat-img-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ngst-feat-img-field__preview {
    width: 72px; height: 72px;
    background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ngst-feat-img-field__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ngst-feat-img-field__placeholder { color: #aaa; font-size: 18px; }
.ngst-feat-term__body {
    flex: 1; min-width: 0;
    line-height: 1.3;
}
.ngst-feat-term__body strong { display: block; font-size: 13px; }
.ngst-feat-term__body small { display: block; color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.ngst-feat-term__remove {
    background: transparent; border: 0; padding: 0;
    width: 24px; height: 24px;
    font-size: 20px; line-height: 1; color: #b32d2e;
    cursor: pointer; flex: 0 0 auto;
}
.ngst-feat-term__remove:hover { color: #000; }
.ngst-feat-term__add {
    background: #00b5bd; color: #fff;
    border: 0; border-radius: 4px;
    width: 28px; height: 28px;
    font-size: 18px; font-weight: 700; line-height: 1;
    cursor: pointer; flex: 0 0 auto;
}
.ngst-feat-term__add:hover { background: #0076bd; }
.ngst-feat-term__empty { padding: 14px; color: #777; font-style: italic; text-align: center; }
.ngst-feat-term__row.ui-sortable-helper {
    background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ngst-icon-row { display: flex; align-items: center; gap: 16px; }
.ngst-icon-preview {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

/* =====================================================================
   Product FAQs accordion ([ngs_faqs])
   Outer wrapper closed by default; click title or +/− to reveal questions.
   Each question is a nested <details> with its own +/−.
   ===================================================================== */

.ngst-faqs {
    font-family: var(--ngst-font-body, "Inter", system-ui, -apple-system, sans-serif);
    margin: 32px 0;
    background: transparent;
}
.ngst-faqs[open] { /* keep visual neutral when open */ }
.ngst-faqs > summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e5e2db;
    color: #1a1a1a;
}
.ngst-faqs > summary::-webkit-details-marker { display: none; }
.ngst-faqs__title {
    font-family: var(--ngst-font-body, "Inter", system-ui, sans-serif);
    font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.ngst-faqs__actions { display: flex; align-items: center; gap: 18px; }
.ngst-faqs__toggle-all {
    background: transparent; border: 0;
    cursor: pointer;
    font: inherit; font-size: 13px; color: #555;
    padding: 4px 0;
    text-decoration: underline; text-underline-offset: 3px;
}
.ngst-faqs__toggle-all:hover { color: #1a1a1a; }
.ngst-faqs__icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #555;
    position: relative;
}
.ngst-faqs__icon::before, .ngst-faqs__icon::after {
    content: ""; position: absolute; background: currentColor;
}
.ngst-faqs__icon::before { width: 14px; height: 1.5px; }
.ngst-faqs__icon::after  { width: 1.5px; height: 14px; }
.ngst-faqs[open] > summary .ngst-faqs__icon::after { display: none; }

.ngst-faqs__list { padding: 0; }
.ngst-faq {
    border-bottom: 1px solid #e5e2db;
}
.ngst-faq:last-child { border-bottom: 0; }
.ngst-faq > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #1a1a1a;
}
.ngst-faq > summary::-webkit-details-marker { display: none; }
.ngst-faq__text {
    font-size: 15px; line-height: 1.5;
    font-weight: 400;
}
.ngst-faq__icon {
    width: 20px; height: 20px;
    flex: 0 0 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #555;
    position: relative;
}
.ngst-faq__icon::before, .ngst-faq__icon::after {
    content: ""; position: absolute; background: currentColor;
}
.ngst-faq__icon::before { width: 12px; height: 1.5px; }
.ngst-faq__icon::after  { width: 1.5px; height: 12px; }
.ngst-faq[open] > summary .ngst-faq__icon::after { display: none; }

.ngst-faq__a {
    padding: 0 4px 22px;
    color: #4a4a4a;
    font-size: 14.5px;
    line-height: 1.65;
}
.ngst-faq__a p:first-child { margin-top: 0; }
.ngst-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .ngst-faqs__title { font-size: 18px; }
    .ngst-faqs__actions { gap: 12px; }
    .ngst-faqs__toggle-all { font-size: 12px; }
    .ngst-faq > summary { padding: 16px 4px; gap: 16px; }
    .ngst-faq__text { font-size: 14px; }
}