/* ==========================================================================
   KADENCE BLOCKS ⇄ THIẾT KẾ NHÃ PHƯỢNG (Compat layer)
   --------------------------------------------------------------------------
   Các layout được nhập bằng "Nhập bố cục Kadence" dùng:
     - Kadence Row Layout  (.np-kb-row)      = <section> gốc
     - Kadence Section     (kadence/column)  = <div class="np-..."> gốc
   Kadence luôn chèn thêm wrapper (.kt-row-column-wrap, .kt-inside-inner-col).
   File này "làm phẳng" các wrapper đó (display: contents) để toàn bộ CSS
   trong main.css áp dụng y như template PHP cũ.
   ========================================================================== */

/* 1. Làm phẳng wrapper của Kadence ------------------------------------- */
/* KHÔNG tắt ::before/::after của .np-kb-row: nhiều section trong thiết kế dùng
   chính hai lớp giả này để vẽ gradient phủ (.np-hero-v2, .np-cafe-hero-sec,
   .np-prod-hero-sec, .np-coop-steps-bg...). Tắt đi là mất lớp phủ. */
.np-kb-row > .kt-row-column-wrap {
    display: contents !important;
}

.wp-block-kadence-column.np-kb-flat {
    display: contents !important;
}

.wp-block-kadence-column[class*="np-"] > .kt-inside-inner-col {
    display: contents !important;
}

/* Section vốn là thẻ div thường (block) trong thiết kế gốc */
.wp-block-kadence-column.np-kb-block {
    display: block;
}

/* 1b. Bố cục dựng bằng core/group -------------------------------------- */
/* core/group sinh đúng 1 thẻ <div class="wp-block-group np-...">, không wrapper,
   không ép display => main.css áp dụng y như template PHP. Chỉ cần dọn phần
   WordPress tự thêm (xem nhaphuong_strip_group_layout_classes trong functions.php). */

/* core/image luôn bọc ảnh trong <figure class="wp-block-image">, trong khi thiết kế
   gốc dùng thẻ <img> trần. "display: contents" làm <figure> biến mất khỏi bố cục,
   <img> trở thành con trực tiếp của khối cha => kích thước y hệt template PHP. */
.np-kb-page .wp-block-image,
.np-kb-row .wp-block-image {
    display: contents;
}

/* Ảnh core/image có link: thẻ <a> phải phủ kín khung ảnh nền */
.np-kb-cover .wp-block-image a,
.np-kb-cover figure > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Lớp phủ của thẻ video nằm trên ảnh => cho click xuyên xuống link của ảnh */
.np-about-video-card__overlay {
    pointer-events: none;
}

/* Trình soạn thảo: group trang trí (lớp phủ, đường kẻ, chấm mốc) không có block con
   nên Gutenberg chèn bảng "Chọn một bố cục" đè lên thiết kế. Ẩn bảng đó đi —
   các block này đã bị khoá, người dùng không thao tác được gì trên chúng.
   (.wp-block-group__placeholder chỉ tồn tại trong editor, frontend không có) */
/* Chỉ gỡ chiều cao tối thiểu của placeholder và ẩn giao diện chọn bố cục.
   KHÔNG đụng tới background/border/padding — đó là phần thiết kế thật của
   lớp phủ, đường kẻ, chấm mốc. */
.wp-block-group__placeholder[class*="np-"] {
    min-height: 0 !important;
}

.wp-block-group__placeholder[class*="np-"] > * {
    display: none !important;
}

/* 2. Ảnh nền dạng "cover" (thay cho background-image cũ) ---------------- */
.np-kb-cover .wp-block-image,
.np-kb-cover figure {
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.np-kb-cover .wp-block-image img,
.np-kb-cover figure img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.np-about-hero__bg .wp-block-image img {
    object-position: right center;
}

.np-about-journey__bg .wp-block-image img {
    object-position: center 30%;
}

@media (max-width: 768px) {
    .np-about-hero__bg .wp-block-image img {
        object-position: center 30%;
    }
}

/* Ảnh thường trong layout Kadence */
.np-kb-page .wp-block-image {
    margin: 0;
}

.np-cert-card__frame .wp-block-image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.np-about-network__map-img img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 3. Kadence Icon ------------------------------------------------------ */
.np-kb-page .wp-block-kadence-icon .kb-svg-icon-wrap,
.np-kb-page .wp-block-kadence-icon .kt-svg-icon-wrap {
    padding: 0;
}

.np-kb-page .np-about-stats__icon.wp-block-kadence-icon,
.np-kb-page .np-about-mv__icon.wp-block-kadence-icon {
    justify-content: flex-start;
}

.np-kb-page .np-about-cap__icon.wp-block-kadence-icon {
    justify-content: flex-end;
}

/* 4. Kadence Button ---------------------------------------------------- */
.np-kb-page .wp-block-kadence-advancedbtn.kb-buttons-wrap {
    justify-content: flex-start;
}

.np-kb-page .kb-button.kb-btn-global-inherit {
    text-decoration: none;
    overflow: visible;
}

.np-kb-page .kb-button .kb-svg-icon-wrap svg {
    width: 1em;
    height: 1em;
}

/* 5. Kadence Advanced Heading - không thêm margin lạ ------------------- */
.np-kb-page .wp-block-kadence-advancedheading mark {
    background: transparent;
    color: inherit;
}

/* Kadence in CSS riêng cho từng block: ".wp-block-kadence-advancedheading.kt-adv-heading-xxx
   { display: block }" với độ ưu tiên (0,2,0), đè mất "display: inline-block" của
   thiết kế (vd .np-tag-red). Với các đoạn vốn là thẻ <span>, trả lại inline-block
   để dòng chữ chiếm đúng chiều cao như template PHP.
   Kadence dùng tới 2 bộ chọn, bộ thứ hai kèm [data-kb-block] nên có độ ưu tiên
   (0,3,0); phải thêm [class*="kt-adv-heading"] để vượt qua. */
.np-kb-page span.wp-block-kadence-advancedheading[class*="kt-adv-heading"],
.np-kb-row span.wp-block-kadence-advancedheading[class*="kt-adv-heading"] {
    display: inline-block;
}

/* 6. Trình soạn thảo (Block Editor) - xem trước gần giống frontend ---- */
/* CHÚ Ý: các bố cục mới dựng bằng core/group, trong editor chính thẻ <div class="np-...">
   cũng mang thêm .block-editor-block-list__layout. Vì vậy TUYỆT ĐỐI không đặt
   "display: contents" cho .block-editor-block-list__layout — làm vậy sẽ xoá sạch
   display:grid/flex của thiết kế và trang xem trước bị dàn hàng dọc.
   Chỉ làm phẳng đúng các wrapper của Kadence (những trang cũ còn dùng kadence/column). */
.editor-styles-wrapper .np-kb-row > .kt-row-column-wrap,
.editor-styles-wrapper .wp-block-kadence-column[class*="np-"] > .kt-inside-inner-col {
    display: contents !important;
}

.editor-styles-wrapper .np-kb-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Khoảng cách block mặc định của WordPress trong editor được xử lý bằng JS
   (assets/js/editor-layout-fix.js) — gỡ thẳng class is-layout-* giống frontend.
   KHÔNG dùng CSS cho việc này: Gutenberg bọc CSS theme trong :where() nên muốn
   đè luật toàn cục thì sẽ đè luôn margin của chính thiết kế. */

/* Kadence Advanced Heading trong trình soạn thảo:
   frontend đặt class thiết kế thẳng lên <h2>, nhưng trong editor class đó nằm ở
   DIV BỌC NGOÀI, còn <h2> bên trong lấy cỡ chữ mặc định (57px thay vì 38px).
   Cho thẻ bên trong kế thừa lại kiểu chữ của khối bọc => xem trước đúng như frontend. */
.editor-styles-wrapper .np-kb-row .kadence-advancedheading-text {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    color: inherit;
    margin: 0;
}

/* Nút "+" thêm block trong các khối đã khoá chỉ làm vỡ bố cục xem trước */
.editor-styles-wrapper .np-kb-row .block-list-appender:not(:has(.np-list-appender)),
.editor-styles-wrapper .wp-block-kadence-column[class*="np-"] .block-list-appender:not(:has(.np-list-appender)) {
    display: none;
}

/* ...trừ ô "+ Thêm thẻ" của danh sách (block-box.js) */
.block-list-appender:has(.np-list-appender) {
    display: flex !important;
    position: static !important;
    margin: 0 !important;
    max-width: none !important;
}

/* 7. Lớp ảnh nền / lớp phủ luôn nằm tuyệt đối (editor gán position:relative cho mọi block) */
.np-kb-row .np-about-hero__bg,
.np-kb-row .np-about-hero__overlay,
.np-kb-row .np-about-journey__bg,
.np-kb-row .np-about-journey__overlay,
.np-kb-row .np-about-journey__line,
.np-kb-row .np-about-mv__bg,
.np-kb-row .np-about-mv__overlay,
.np-kb-row .np-about-cta__bg,
.np-kb-row .np-about-cta__overlay,
.np-kb-row .np-about-video-card__img,
.np-kb-row .np-about-video-card__overlay {
    position: absolute !important;
    margin: 0 !important;
    max-width: none !important;
}

.np-kb-row .np-about-hero__inner,
.np-kb-row .np-about-journey__inner,
.np-kb-row .np-about-cta__inner,
.np-kb-row .np-about-mv__content {
    position: relative !important;
    z-index: 2 !important;
}

/* Editor: section tràn hết chiều ngang khung soạn thảo */
.editor-styles-wrapper .is-root-container > .np-kb-row,
.editor-styles-wrapper .is-root-container > [data-type="kadence/rowlayout"] {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.editor-styles-wrapper .np-kb-cover .wp-block-image,
.editor-styles-wrapper .np-kb-cover .components-resizable-box__container {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.editor-styles-wrapper .np-kb-cover .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Trình soạn thảo: Kadence Advanced Heading đặt class thiết kế (np-...) ở DIV BỌC,
   còn <h1>/<h2> bên trong nhận cỡ chữ mặc định của WordPress (vd 74px thay vì 42px)
   => chữ to, chồng dòng, khác hẳn frontend. Cho thẻ bên trong kế thừa kiểu chữ của
   khối bọc ở MỌI trang (trước chỉ áp cho .np-kb-row nên trang Legend Café bị sót).
   .kadence-advancedheading-text chỉ có trong editor => không ảnh hưởng frontend. */
.wp-block-kadence-advancedheading[class*="np-"] > .kadence-advancedheading-text {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    color: inherit;
    margin: 0;
}

/* 8. Trình soạn thảo: Gutenberg gán position:relative cho MỌI khối => các lớp ảnh nền /
   lớp phủ (vốn position:absolute ngoài website) co về cao 0px và "mất ảnh".
   Danh sách lấy tự động từ các phần tử position:absolute trên website (quét 12/10/2026).
   Bộ chọn có .block-editor-block-list__block nên CHỈ áp trong editor. */
.block-editor-block-list__layout .block-editor-block-list__block.np-about-cta__bg,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-cta__overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-hero__bg,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-hero__overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-journey__bg,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-journey__line,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-journey__overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-map__island,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-map__labels,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-map__label,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-mv__bg,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-mv__overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-v2-bg-left,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-v2-gradient,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-video-card__img,
.block-editor-block-list__layout .block-editor-block-list__block.np-about-video-card__overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-cafe-handwriting-script,
.block-editor-block-list__layout .block-editor-block-list__block.np-cafe-v2-dark-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-cafe-zoom-hint,
.block-editor-block-list__layout .block-editor-block-list__block.np-career-cta-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-career-hero-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-contact-cta-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-contact-hero-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-coop-hero-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-coop-partners-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-coop-steps-bg,
.block-editor-block-list__layout .block-editor-block-list__block.np-feat-nav-wrap,
.block-editor-block-list__layout .block-editor-block-list__block.np-join-v2-bg-right,
.block-editor-block-list__layout .block-editor-block-list__block.np-join-v2-gradient,
.block-editor-block-list__layout .block-editor-block-list__block.np-map-pin-badge,
.block-editor-block-list__layout .block-editor-block-list__block.np-moment-caption,
.block-editor-block-list__layout .block-editor-block-list__block.np-news-cta-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-news-date-badge,
.block-editor-block-list__layout .block-editor-block-list__block.np-news-featured-fade,
.block-editor-block-list__layout .block-editor-block-list__block.np-news-hero-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-prod-group-fade,
.block-editor-block-list__layout .block-editor-block-list__block.np-prod-group-media,
.block-editor-block-list__layout .block-editor-block-list__block.np-products-v2-light-overlay,
.block-editor-block-list__layout .block-editor-block-list__block.np-select-arrow {
    position: absolute;
}
/* 9. Trình soạn thảo: ô "+ Thêm thẻ" ở cuối mỗi danh sách (assets/js/block-box.js) */
.np-list-appender {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    min-height: 72px;
    align-self: stretch;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 2px dashed rgba(183, 0, 0, 0.45) !important;
    border-radius: 10px !important;
    background: rgba(183, 0, 0, 0.04) !important;
    color: #B70000 !important;
    font: 600 14px/1.2 'Roboto', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.np-list-appender:hover {
    background: rgba(183, 0, 0, 0.1) !important;
    border-color: #B70000 !important;
}
.np-list-appender span {
    font-size: 20px;
    line-height: 1;
}
.np-list-appender {
    flex-direction: column;
}
.np-list-appender small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: #757575;
    text-align: center;
}
.np-list-appender.is-over {
    border-color: #DB8A00 !important;
    background: rgba(219, 138, 0, 0.06) !important;
}
.np-list-appender.is-over small {
    color: #A86A00;
}
/* 9. Trình soạn thảo — Kadence Row có ảnh nền do theme vẽ (gradient + --np-row-bg) ------
   (a) Trong editor Kadence vẽ ảnh nền của Row vào lớp con .kt-row-layout-background
       (ngoài website không có lớp này), phủ kín gradient đỏ của theme => chữ nằm trên ảnh thô.
       Ẩn lớp đó; ảnh đang chọn vẫn hiện qua biến --np-row-bg (block-box.js: withRowBgVar).
   (b) Trong editor class của section nằm ngay trên .kt-row-column-wrap, nội dung nằm trong
       .innerblocks-wrap (giới hạn 1280px) nên luật ".np-prod-...-sec .kt-row-column-wrap"
       (khung 1340px, đệm 24px) không áp vào => nội dung lệch, thẻ hẹp lại. Chép lại cho editor. */
.editor-styles-wrapper .np-prod-hero-sec > .kt-row-layout-background,
.editor-styles-wrapper .np-prod-hero-sec > .kt-row-layout-overlay,
.editor-styles-wrapper .np-prod-cta-sec > .kt-row-layout-background,
.editor-styles-wrapper .np-prod-cta-sec > .kt-row-layout-overlay,
.editor-styles-wrapper .np-cafe-hero-sec > .kt-row-layout-background,
.editor-styles-wrapper .np-cafe-hero-sec > .kt-row-layout-overlay,
.editor-styles-wrapper .np-cafe-cta-sec > .kt-row-layout-background,
.editor-styles-wrapper .np-cafe-cta-sec > .kt-row-layout-overlay {
    display: none !important;
}

.editor-styles-wrapper .np-prod-hero-sec > .innerblocks-wrap,
.editor-styles-wrapper .np-prod-groups-sec > .innerblocks-wrap,
.editor-styles-wrapper .np-prod-brands-sec > .innerblocks-wrap,
.editor-styles-wrapper .np-prod-catalog-sec > .innerblocks-wrap,
.editor-styles-wrapper .np-prod-cta-sec > .innerblocks-wrap {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1340px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

.editor-styles-wrapper .np-prod-hero-sec > .innerblocks-wrap {
    padding-top: 28px !important;
    padding-bottom: 30px !important;
}

.editor-styles-wrapper .np-prod-cta-sec > .innerblocks-wrap {
    padding-top: 28px !important;
    padding-bottom: 9px !important;
}

/* Icon Font Awesome trong chữ (mũi tên, dấu ›): đăng ký là "đối tượng" của RichText
   (block-box.js — registerFormatType nhaphuong/fa-*) nên hiện được trong editor; giữ
   khoảng cách như ngoài website, không cho đặt con trỏ vào giữa icon. */
.editor-styles-wrapper .kadence-advancedheading-text i[class*="fa-"] {
    display: inline-block;
    font-style: normal;
}

/* Tay kéo đệm trên/dưới của Kadence Row (chỉ có trong editor, cao 36px mỗi cái) làm section
   cao hơn website. Đệm của các section thiết kế do theme cố định (!important) nên kéo cũng
   không có tác dụng => ẩn. */
.editor-styles-wrapper .kt-row-column-wrap[class*="np-"] > .kt-top-padding-resize,
.editor-styles-wrapper .kt-row-column-wrap[class*="np-"] > .kt-bottom-padding-resize {
    display: none !important;
}

/* Ô "+ Thêm thẻ" trong các dải nhỏ trên hero: gọn bằng chiều cao một mục, không đẩy cao cả hàng */
.np-prod-3highlights > .block-list-appender,
.np-cafe-3highlights > .block-list-appender,
.np-hero-v2-features-inner > .block-list-appender,
.np-contact-hero-needs > .block-list-appender {
    flex: 0 0 auto !important;
    align-self: center !important;
}
.np-prod-3highlights > .block-list-appender .np-list-appender,
.np-cafe-3highlights > .block-list-appender .np-list-appender,
.np-hero-v2-features-inner > .block-list-appender .np-list-appender,
.np-contact-hero-needs > .block-list-appender .np-list-appender {
    min-height: 0 !important;
    padding: 6px 12px !important;
    flex-direction: row !important;
    gap: 6px;
}
.np-prod-3highlights > .block-list-appender .np-list-appender small,
.np-cafe-3highlights > .block-list-appender .np-list-appender small,
.np-hero-v2-features-inner > .block-list-appender .np-list-appender small,
.np-contact-hero-needs > .block-list-appender .np-list-appender small {
    display: none;
}
/* Danh sách dòng <ul>/<ol> (vd. các dòng ✓ trong thẻ Hợp tác): nút "+ Thêm dòng" nhỏ gọn */
.np-list-appender.np-list-appender--line {
    min-height: 0 !important;
    width: auto !important;
    padding: 2px 10px !important;
    flex-direction: row !important;
    gap: 6px;
    font-size: 12px !important;
}
.np-list-appender.np-list-appender--line span {
    font-size: 14px;
}
.np-list-appender.np-list-appender--line small {
    display: none;
}

/* Xem trước shortcode của theme trong editor (block-box.js: withShortcodePreview) */
.np-sc-preview {
    position: relative;
}
.np-sc-preview__body {
    pointer-events: none;
}
.np-sc-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 6px 12px;
    font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #50575e;
    background: #f6f7f7;
    border: 1px dashed #c3c4c7;
    border-radius: 4px;
}
.np-sc-preview__bar a {
    color: #B70000;
    font-weight: 600;
    text-decoration: none;
}

/* 10. Trang Legend Café dựng bằng block (thay cho khối HTML tùy chỉnh) ------------------
   Ảnh là core/image (<figure class="wp-block-image"><img></figure>) nằm trong khung của
   thiết kế => figure lấp đầy khung, <img> nhận đúng kiểu của ảnh gốc. */
.np-cafe-badge .wp-block-image,
.np-cafe-intro-card .wp-block-image,
.np-cafe-building-photo .wp-block-image {
    margin: 0 !important;
    max-width: none !important;
}
.np-cafe-badge .wp-block-image img {
    width: 280px !important;
    height: auto !important;
    max-height: 125px !important;
    display: block !important;
    margin: 0 !important;
}
@media (max-width: 768px) {
    .np-cafe-badge .wp-block-image img {
        width: 220px !important;
        max-width: none !important;
        max-height: none !important;
        margin-bottom: 12px !important;
    }
}
.np-cafe-intro-card .wp-block-image,
.np-cafe-intro-card .wp-block-image .components-resizable-box__container,
.np-cafe-building-photo .wp-block-image,
.np-cafe-building-photo .wp-block-image .components-resizable-box__container {
    width: 100% !important;
    height: 100% !important;
}
.np-cafe-intro-card .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
/* Dòng chữ viết tay nằm đè lên ảnh: trong editor vẫn bấm vào sửa được */
.editor-styles-wrapper .np-cafe-handwriting-script {
    pointer-events: auto !important;
    z-index: 2;
}
/* "Địa chỉ / Giờ mở cửa / Điện thoại": trong editor chữ nằm trong 1 thẻ con của Kadence */
.editor-styles-wrapper .np-cafe-info-list-text strong {
    display: block;
    margin-bottom: 3px;
}

/* Trình soạn thảo trang Café: khung nội dung từng section giống website
   (số đo lấy từ .kt-row-column-wrap ngoài website ở màn 1440px). */
.editor-styles-wrapper [class*="np-cafe-"] > .innerblocks-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.editor-styles-wrapper .np-cafe-hero-sec > .innerblocks-wrap,
.editor-styles-wrapper .np-cafe-cta-sec > .innerblocks-wrap {
    max-width: 1340px !important;
    padding: 50px 24px !important;
}
.editor-styles-wrapper .np-cafe-cta-sec > .innerblocks-wrap {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 32px !important;
}
.editor-styles-wrapper .np-cafe-intro-sec > .innerblocks-wrap {
    max-width: 1280px !important;
    padding: 70px 15px !important;
    column-gap: 48px !important;
    grid-template-columns: 576fr 626fr !important;
}
.editor-styles-wrapper .np-cafe-space-sec > .innerblocks-wrap {
    max-width: 1264px !important;
    padding: 56px 0 98px !important;
}
.editor-styles-wrapper .np-cafe-overlap-row > .innerblocks-wrap {
    max-width: 1286px !important;
    padding: 0 0 30px !important;
    column-gap: 14px !important;
}
.editor-styles-wrapper .np-cafe-menu-sec > .innerblocks-wrap {
    max-width: 1280px !important;
    padding: 40px 15px 70px !important;
    column-gap: 36px !important;
    grid-template-columns: 520px 1fr !important;
}
.editor-styles-wrapper .np-cafe-find-sec > .innerblocks-wrap {
    max-width: 1280px !important;
    padding: 70px 15px !important;
    column-gap: 28px !important;
    grid-template-columns: 418fr 398fr 378fr !important;
}