/* ============================================================
   NORTHPOINT SHOWROOM ONLY
   This file only affects northpoint.html
   ============================================================ */

:root {
    --np-dark: #111;
    --np-card: #151515;
    --np-purple: #4B0082;
    --np-purple-light: #b88cff;
    --np-gold: #c4a15c;
    --np-white: #ffffff;
    --np-light: #f8f8f8;
    --np-text: #ddd;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.section {
    position: relative;
    padding: 70px 40px;
}

.section:nth-of-type(even) {
    background: #fafafa;
}

.section:nth-of-type(odd) {
    background: #ffffff;
}

.np-dark-section {
    background: #0f0f0f !important;
    color: #fff;
}

.section h2 {
    font-size: 2.4rem;
    margin-bottom: 18px;
    letter-spacing: .5px;
    color: var(--np-purple-light);
    text-align: center;
    position: relative;
}

.section h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 18px auto 0;
    background: var(--np-purple-light);
    border-radius: 20px;
}

.section > p,
.section-intro {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    text-align: center;
    color: #444;
}

.np-dark-section .section-intro,
.np-dark-section > p {
    color: #ddd;
}

.button {
    transition: .3s ease;
}

.button:hover {
    transform: translateY(-3px);
}

/* =========================
   HERO
========================= */

.northpoint-hero {
    min-height: 460px;
    padding: 90px 20px;
    background-image:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.70)),
        url("images/northpoint/display/kitchens/Maui White_kitchen.jpg");
    background-size: cover;
    background-position: center;
}

.northpoint-hero .hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 38px 28px;
    background: rgba(0, 0, 0, 0.66);
    border: 2px solid var(--np-purple);
    border-radius: 14px;
    box-shadow: 0 0 26px rgba(75,0,130,0.75);
}

.hero-badge {
    display: inline-block;
    padding: 12px 22px;
    margin-bottom: 22px;
    border: 2px solid var(--np-purple);
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 18px rgba(75,0,130,.65);
}

.np-hero-buttons {
    margin-top: 25px;
}

.np-hero-buttons .button {
    margin: 8px;
}

/* =========================
   INTRO
========================= */

.np-intro {
    text-align: center;
    background: var(--np-white);
    padding-bottom: 55px;
}

.np-logo {
    max-width: 210px;
    width: 100%;
    margin: 20px auto 26px;
    display: block;
}

.np-intro p {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    color: #333;
}

/* =========================
   SHOWROOM NAV
========================= */

.np-showroom-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: #111;
    border-top: 1px solid rgba(184,140,255,.35);
    border-bottom: 1px solid rgba(184,140,255,.35);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.np-showroom-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(184,140,255,.45);
    transition: .25s ease;
}

.np-showroom-nav a:hover {
    background: var(--np-purple-light);
    color: #fff;
    transform: translateY(-2px);
}

/* =========================
   DOOR STYLES
========================= */

#door-styles {
    text-align: center;
    background: var(--np-light);
}

.np-style-showcase {
    display: flex;
    flex-direction: column;
    gap: 45px;
    margin-top: 40px;
}

.np-style-block {
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 42px;
    align-items: center;
    background: var(--np-card);
    border: 1px solid rgba(184,140,255,.30);
    border-radius: 18px;
    padding: 28px;
    text-align: left;
    transition: .35s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    overflow: hidden;
}

.np-style-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 55px rgba(75,0,130,.35);
    border-color: var(--np-purple-light);
}

.np-style-block img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    transition: .45s ease;
    box-shadow: 0 0 18px rgba(0,0,0,0.5);
}

.np-style-block:hover img {
    transform: scale(1.02);
}

.np-style-block h3 {
    font-size: 42px;
    color: var(--np-purple-light);
    margin: 0 0 10px;
}

.np-style-block p {
    line-height: 1.8;
    color: var(--np-text);
}

.np-door-meta {
    color: var(--np-purple-light);
    font-weight: bold;
    margin-bottom: 18px;
}

.np-image-link {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

/* =========================
   FINISH PILLS
========================= */

.np-finish-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
}

.np-finish-pills span {
    background: #222;
    border: 1px solid var(--np-purple);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    transition: .25s ease;
    cursor: default;
}

.np-finish-pills span:hover {
    background: var(--np-purple-light);
    color: white;
    transform: translateY(-2px);
}

/* =========================
   FINISH GALLERY
========================= */

#finishes {
    background: #ffffff;
}

.np-finish-gallery {
    max-width: 1180px;
    margin: 40px auto 0;
    display: grid;
    gap: 36px;
}

.np-finish-group {
    background: var(--np-card);
    border: 1px solid rgba(184,140,255,.30);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.np-finish-group h3 {
    color: var(--np-purple-light);
    margin: 0 0 22px;
    text-align: center;
    font-size: 1.55rem;
}

.np-finish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 18px;
}

.np-finish-grid-small {
    max-width: 430px;
    margin: 0 auto;
}

.np-finish-grid a,
.np-quality-grid a {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #222;
    text-align: center;
    border: 1px solid rgba(184,140,255,.25);
    transition: .3s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.np-finish-grid a:hover,
.np-quality-grid a:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 36px rgba(75,0,130,.32);
    border-color: var(--np-purple-light);
}

.np-finish-grid img {
    width: 100%;
    height: 145px;
    object-fit: cover;
    display: block;
}

.np-finish-grid span,
.np-quality-grid span {
    display: block;
    padding: 12px 10px;
    font-weight: bold;
    background: #fff;
}

/* =========================
   GRIDS / CARDS
========================= */

.np-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin-top: 30px;
}

.np-icon-card,
.np-info-panel {
    background: var(--np-card);
    border: 1px solid rgba(184,140,255,.25);
    border-radius: 14px;
    padding: 30px 24px;
    transition: .35s ease;
    box-shadow: 0 12px 35px rgba(0,0,0,.28);
}

.np-icon-card {
    text-align: center;
}

.np-icon-card:hover,
.np-info-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(75,0,130,.35);
    border-color: var(--np-purple-light);
}

.np-icon-card i {
    color: var(--np-purple-light);
    font-size: 34px;
    margin-bottom: 12px;
}

.np-icon-card h3,
.np-info-panel h3 {
    color: var(--np-purple-light);
    margin-top: 0;
}

.np-icon-card p,
.np-info-panel p,
.np-info-panel ul {
    color: var(--np-text);
    line-height: 1.75;
}

.np-info-panel ul {
    padding-left: 20px;
}

.np-info-panel li {
    margin-bottom: 8px;
}

.np-two-column {
    max-width: 1100px;
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* =========================
   PHOTO GALLERIES
========================= */

.np-gallery-category {
    max-width: 1180px;
    margin: 45px auto 0;
}

.np-gallery-category h3 {
    color: var(--np-purple);
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 22px;
}

.np-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.np-photo-grid-wide {
    max-width: 1180px;
    margin: 35px auto 0;
}

.np-photo-grid a,
.np-mini-gallery a,
.np-feature-panel a {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(184,140,255,.25);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    background: #111;
}

.np-photo-grid img,
.np-mini-gallery img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
    transition: .35s ease;
}

.np-photo-grid a:hover img,
.np-mini-gallery a:hover img {
    transform: scale(1.05);
}

.np-accent-columns {
    max-width: 1180px;
}

.np-accent-panel h3 {
    text-align: center;
}

.np-mini-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.np-mini-gallery img {
    height: 170px;
}

.np-feature-columns {
    max-width: 1180px;
}

.np-feature-panel {
    text-align: center;
}

.np-feature-panel img {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    display: block;
    background: #fff;
}

/* =========================
   QUALITY
========================= */

.np-quality-grid {
    max-width: 1180px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

.np-quality-grid img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

/* =========================
   FINAL CTA
========================= */

.np-final-cta {
    min-height: 360px;
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.70)),
       url("../images/northpoint/display/kitchens/maui-white-kitchen.jpg");
    background-size: cover;
    background-position: center;
    margin-top: 0;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
}

.np-final-cta::after {
    display: none;
}

.np-final-overlay {
    color: #111;
    text-align: center;
    padding: 55px 40px;
}

.np-final-overlay h2 {
    colorcolor: #111;
    font-size: 2.4rem;
    margin-bottom: 20px;
}

.np-final-overlay h2::after {
    background: var(--np-gold);
}

.np-final-overlay p {
    max-width: 760px;
    margin: 0 auto 35px;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {
    .np-style-block {
        grid-template-columns: 1fr;
    }

    .np-style-block h3 {
        font-size: 34px;
    }

    .np-mini-gallery {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 55px 18px;
    }

    .section h2 {
        font-size: 2rem;
    }

    .northpoint-hero {
        min-height: 340px;
        padding: 60px 15px;
    }

    .northpoint-hero .hero-content {
        padding: 28px 20px;
    }

    .np-hero-buttons .button {
        display: block;
        margin: 10px auto;
        max-width: 280px;
    }

    .np-showroom-nav {
        position: relative;
        top: auto;
    }

    .np-style-block,
    .np-finish-group {
        padding: 20px;
    }

    .np-style-block img {
        max-height: 260px;
    }

    .np-finish-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    .np-finish-grid img {
        height: 120px;
    }

    .np-photo-grid {
        grid-template-columns: 1fr;
    }

    .np-photo-grid img {
        height: 240px;
    }

    .np-final-overlay {
        padding: 70px 22px;
    }
}
/* ===== NORTHPOINT PERFORMANCE FIX ===== */

.np-style-block,
.np-gallery-card,
.np-quality-card,
.np-feature-card,
.np-accent-card,
.np-info-panel,
.np-icon-card {
    transition: none !important;
}

.np-style-block:hover,
.np-gallery-card:hover,
.np-quality-card:hover,
.np-feature-card:hover,
.np-accent-card:hover,
.np-info-panel:hover,
.np-icon-card:hover {
    transform: none !important;
}

.np-style-block:hover img,
.np-gallery-card:hover img,
.np-quality-card:hover img,
.np-feature-card:hover img,
.np-accent-card:hover img {
    transform: none !important;
}

/* ============================================================
   NORTHPOINT INTERACTIVE SHOWROOM V2
   ============================================================ */

.np-showroom-v2 { background: #f8f8f8; }

.np-collection-heading {
    max-width: 1180px;
    margin: 35px auto 12px;
    color: var(--np-purple);
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.np-essentials-heading { margin-top: 18px; }

.np-door-selector {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.np-door-tab {
    min-width: 220px;
    padding: 18px 22px;
    border: 1px solid rgba(75,0,130,.35);
    border-radius: 14px;
    background: #fff;
    color: #111;
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.np-door-tab span {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #555;
}

.np-door-tab.active {
    background: #111;
    color: #fff;
    border-color: var(--np-purple-light);
    box-shadow: 0 0 24px rgba(75,0,130,.35);
}

.np-door-tab.active span { color: #ddd; }

.np-showroom-stage {
    max-width: 1220px;
    margin: 38px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 28px;
    align-items: stretch;
    background: #111;
    border: 1px solid rgba(184,140,255,.35);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 18px 45px rgba(0,0,0,.30);
}

.np-preview-open {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.np-main-preview img {
    width: 100%;
    height: 520px;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    background: #fff;
}

.np-preview-caption {
    margin-top: 10px;
    padding: 10px 12px;
    color: #fff;
    background: rgba(0,0,0,.55);
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
}

.np-showroom-controls {
    padding: 8px 4px;
    color: #fff;
}

.np-showroom-controls h3 {
    margin: 0 0 12px;
    color: var(--np-purple-light);
    font-size: 2.4rem;
}

.np-showroom-controls h4 {
    margin: 24px 0 12px;
    color: #fff;
}

.np-showroom-controls p { color: #ddd; line-height: 1.7; }

.np-color-chips,
.np-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.np-color-chip,
.np-filter-buttons button {
    border: 1px solid var(--np-purple);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
}

.np-color-chip {
    background: var(--chip-color);
    color: var(--chip-text);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

.np-color-chip.active,
.np-filter-buttons button.active {
    outline: 3px solid var(--np-purple-light);
    outline-offset: 2px;
}

.np-filter-buttons {
    justify-content: center;
    margin: 30px auto;
}

.np-filter-buttons button {
    background: #111;
    color: #fff;
}

.np-thumb-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 10px;
    max-height: 310px;
    overflow: auto;
    padding-right: 4px;
}

.np-thumb,
.np-gallery-tile,
.np-finish-sample-btn,
.np-quality-btn,
.np-lightbox-btn {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.np-thumb {
    border: 1px solid rgba(184,140,255,.35);
    border-radius: 10px;
    overflow: hidden;
    background: #222;
    color: #fff;
}

.np-thumb.active { border-color: var(--np-purple-light); }

.np-thumb img {
    width: 100%;
    height: 82px;
    object-fit: cover;
    display: block;
}

.np-thumb span {
    display: block;
    padding: 7px;
    font-size: .72rem;
    line-height: 1.25;
}

.np-helper-note {
    font-size: .88rem;
    color: #aaa !important;
}

.np-compare-wrap {
    max-width: 1180px;
    margin: 35px auto 0;
    overflow-x: auto;
}

.np-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    color: #222;
    border-radius: 14px;
    overflow: hidden;
}

.np-compare-table th,
.np-compare-table td {
    padding: 16px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.np-compare-table th {
    background: #1a1a1a;
    color: #fff;
}

.np-project-grid button,
.np-quality-grid button,
.np-finish-grid button {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    border: 1px solid rgba(184,140,255,.25);
    background: #fff;
    color: #222;
}

.np-gallery-tile img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.np-gallery-tile span,
.np-finish-sample-btn span,
.np-quality-btn span {
    display: block;
    padding: 12px;
    font-weight: 800;
    text-align: center;
}

.np-finish-sample-btn img {
    width: 100%;
    height: 145px;
    object-fit: cover;
    display: block;
}

.np-quality-btn img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.np-resource-grid {
    max-width: 1180px;
    margin: 35px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.np-resource-card {
    display: block;
    padding: 28px 22px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(75,0,130,.25);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    color: #222;
    text-decoration: none;
    text-align: center;
}

.np-resource-card i {
    color: var(--np-purple);
    font-size: 2rem;
    margin-bottom: 12px;
}

.np-resource-card h3 { color: var(--np-purple); }
.np-resource-card span { font-weight: 800; color: var(--np-purple); }
.np-resource-cta { background: #111; color: #fff; }
.np-resource-cta h3, .np-resource-cta span, .np-resource-cta i { color: var(--np-purple-light); }

.np-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0,0,0,.88);
}

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

.np-lightbox img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
}

.np-lightbox p {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 18px;
    color: #fff;
    text-align: center;
    font-weight: 800;
}

.np-lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.np-missing-image {
    object-fit: contain !important;
    background: repeating-linear-gradient(45deg, #eee, #eee 10px, #ddd 10px, #ddd 20px) !important;
}

@media (max-width: 900px) {
    .np-showroom-stage { grid-template-columns: 1fr; }
    .np-main-preview img { height: 340px; }
}

@media (max-width: 600px) {
    .np-door-tab { min-width: 100%; }
    .np-main-preview img { height: 260px; }
    .np-thumb-strip { grid-template-columns: repeat(2, 1fr); }
}


/* ===== FINISH SAMPLE CONSISTENCY FIX =====
   Uses the official finish-sample images for Maui and Hatteras, and keeps
   every sample centered inside the same card size so none of the images stretch.
   Catalina Sage Green and Nautical Blue use official NorthPoint cabinet finish
   views because those two accent colors were not included as door/drawer sample
   files in the finish-samples folder shown. */
.np-finish-grid {
    align-items: stretch;
}

.np-finish-sample-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    background: #fff !important;
}

.np-finish-sample-btn img {
    height: 210px !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 10px;
    background: #fff;
    box-sizing: border-box;
}

.np-finish-sample-btn span {
    min-height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.pdf-meta {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #777;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 52px;
    height: 52px;
    background: #5b00a5;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 28px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,.35);
    z-index: 9999;
    transition: all .3s ease;
}

.back-to-top:hover {
    background: #7a2be2;
    transform: translateY(-3px);
}

/* ===== NORTHPOINT ACCENT COLOR CLARIFICATION ===== */
.np-accent-controls {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid rgba(184,140,255,.45);
    border-radius: 14px;
    background: rgba(184,140,255,.08);
}

.np-accent-controls h4 {
    margin-top: 0;
    color: var(--np-purple-light);
}

.np-accent-color-chips {
    margin-bottom: 14px;
}

.np-accent-chip {
    position: relative;
}

.np-accent-chip::after {
    content: "Accent";
    margin-left: 7px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    color: #222;
    font-size: .65rem;
    vertical-align: middle;
}

.np-accent-availability,
.np-accent-selection-note,
.np-finish-group-note {
    line-height: 1.6;
}

.np-accent-availability {
    margin: 0;
    color: #ddd !important;
    font-size: .92rem;
}

.np-accent-selection-note {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-left: 4px solid var(--np-purple-light);
    border-radius: 8px;
    background: rgba(184,140,255,.12);
    color: #fff !important;
}

.np-finish-group-note {
    max-width: 760px;
    margin: -8px auto 22px;
    color: #ddd;
    text-align: center;
}

/* ===== MOBILE FINISH CARD STACKING FIX =====
   Keeps Catalina, Maui, and Hatteras finish cards consistent on phones. */
@media (max-width: 650px) {
    #np-finish-gallery .np-finish-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    #np-finish-gallery .np-finish-sample-btn {
        width: 100% !important;
        max-width: none !important;
    }
}