/* Responsive Desktop & Mobile Styling for Yabai Web App */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;700&family=Playfair+Display:ital,wght@0,700;0,900;1,400&display=swap");

body {
    background-color: #f6e8eb !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Elementor Native Responsive Hiding Rules */
@media (max-width: 1023px) {
    .elementor-hidden-mobile,
    .elementor-element.elementor-hidden-mobile,
    [data-settings*='"hide_mobile":"yes"'] {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .elementor-hidden-desktop,
    .elementor-element.elementor-hidden-desktop,
    [data-settings*='"hide_desktop":"yes"'] {
        display: none !important;
    }
}

/* Fix Elementor Lightbox / Modal position alignment */
.elementor-lightbox,
.dialog-widget,
.dialog-lightbox-widget,
#elementor-lightbox-slideshow {
    zoom: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}

/* Native Image Widget Icon Sizes */
.yabai-pay-icon-img img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
}

.yabai-feat-icon-img img {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
}

.yabai-shop-icon-img img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Strict Color & Alignment Rules for Payment Card & 4 Features Row */
.yabai-payment-card,
.elementor-element.elementor-element-footer_sec_payment {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 28px 36px !important;
    border: 1px solid #fce8eb !important;
    box-shadow: 0 6px 20px rgba(235, 104, 126, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-element-pay_heading .elementor-heading-title,
.yabai-payment-card h3,
.yabai-payment-card .elementor-heading-title {
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
    width: 100% !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #222222 !important;
}

.yabai-payment-body {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.yabai-pay-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.yabai-pay-title .elementor-heading-title,
.yabai-pay-title h4,
.yabai-pay-item h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    margin: 0 !important;
}

.yabai-pay-desc p,
.yabai-pay-desc div,
.yabai-pay-desc {
    margin: 0 !important;
    font-size: 15px !important;
    color: #333333 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* 2. 4 Features Row */
.yabai-features-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

.yabai-feature-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    background: transparent !important;
    padding: 10px 8px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.yabai-feature-content-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.yabai-feat-title .elementor-heading-title,
.yabai-feat-title h4,
.yabai-feature-item h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #e6526e !important;
    margin: 0 !important;
}

.yabai-feat-desc p,
.yabai-feat-desc div,
.yabai-feat-desc {
    font-size: 13px !important;
    color: #333333 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Exact Brand & Location Box Styling */
.yabai-footer-info-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 10px !important;
}

.yabai-brand-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.yabai-brand-title .elementor-heading-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    color: #e6526e !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

.yabai-brand-tagline .elementor-heading-title {
    font-family: "Dancing Script", cursive !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #e6526e !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.2 !important;
}

.yabai-shop-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px 36px !important;
    border: 1px solid #fce8eb !important;
    box-shadow: 0 6px 20px rgba(235, 104, 126, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 360px !important;
    box-sizing: border-box !important;
}

.yabai-shop-line-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

.yabai-shop-title-pink .elementor-heading-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #e6526e !important;
    margin: 0 !important;
}

.yabai-shop-text-dark-heading .elementor-heading-title,
.yabai-shop-text-dark p {
    font-size: 15px !important;
    color: #333333 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.yabai-shop-text-bold .elementor-heading-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 !important;
}

/* Flawless Desktop Layout (>= 1024px) */
@media (min-width: 1024px) {
    .elementor-element.elementor-element-master_v4_container,
    .yabai-v4-master-canvas {
        width: 100% !important;
        max-width: 1280px !important;
        margin: 40px auto !important;
        border-radius: 28px !important;
        box-shadow: 0 20px 60px rgba(235, 104, 126, 0.16), 0 6px 24px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        background-color: #fdf5f6 !important;
    }

    /* Hero Banner */
    .elementor-element-sec_hero,
    .elementor-element-hero_img_widget {
        width: 100% !important;
    }

    .elementor-element-hero_img_widget img {
        width: 100% !important;
        max-height: 640px !important;
        object-fit: cover !important;
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
    }

    /* Section Booking */
    .elementor-element-sec_booking {
        padding: 60px 60px !important;
    }

    .elementor-element-book_head .elementor-heading-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        margin-bottom: 12px !important;
    }

    .elementor-element-book_sub p {
        font-size: 20px !important;
        margin-bottom: 28px !important;
    }

    .elementor-element-booking_btns_row {
        display: flex !important;
        flex-direction: row !important;
        gap: 32px !important;
        justify-content: center !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 36px 0 !important;
    }

    .elementor-element-btn_hp_box,
    .elementor-element-btn_na_box {
        flex: 1 !important;
        width: 100% !important;
        max-width: 560px !important;
        padding: 36px 30px !important;
        border-radius: 20px !important;
        box-shadow: 0 6px 20px rgba(235, 104, 126, 0.15) !important;
        box-sizing: border-box !important;
    }

    .elementor-element-btn_hp_img_w img,
    .elementor-element-btn_na_img_w img {
        max-height: 60px !important;
        width: auto !important;
        margin-bottom: 18px !important;
    }

    .elementor-element-btn_hp_action .elementor-button,
    .elementor-element-btn_na_action .elementor-button {
        font-size: 18px !important;
        font-weight: 700 !important;
        padding: 16px 36px !important;
        border-radius: 35px !important;
        width: 100% !important;
        display: block !important;
    }

    .elementor-element-book_note p,
    .elementor-element-book_note {
        font-size: 16px !important;
        margin-top: 18px !important;
    }

    /* Section Kodawari: 4 equal-width full cards across 1280px */
    .elementor-element-sec_kodawari {
        padding: 70px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-element-kodawari_head .elementor-heading-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        margin-bottom: 12px !important;
    }

    .elementor-element-kodawari_grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 24px !important;
        width: 100% !important;
        margin-top: 40px !important;
        box-sizing: border-box !important;
    }

    .elementor-element-k_col_1,
    .elementor-element-k_col_2,
    .elementor-element-k_col_3,
    .elementor-element-k_col_4 {
        flex: 1 1 0% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        background: #ffffff !important;
        padding: 36px 24px !important;
        border-radius: 20px !important;
        border: 1px solid #fce8eb !important;
        box-shadow: 0 6px 24px rgba(235, 104, 126, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        box-sizing: border-box !important;
        writing-mode: horizontal-tb !important;
    }

    .elementor-element-k_icon_1,
    .elementor-element-k_icon_2,
    .elementor-element-k_icon_3,
    .elementor-element-k_icon_4 {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .elementor-element-k_icon_1 img,
    .elementor-element-k_icon_2 img,
    .elementor-element-k_icon_3 img,
    .elementor-element-k_icon_4 img {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 20px !important;
    }

    .elementor-element-k_head_1,
    .elementor-element-k_head_2,
    .elementor-element-k_head_3,
    .elementor-element-k_head_4 {
        width: 100% !important;
        writing-mode: horizontal-tb !important;
    }

    .elementor-element-k_head_1 .elementor-heading-title,
    .elementor-element-k_head_2 .elementor-heading-title,
    .elementor-element-k_head_3 .elementor-heading-title,
    .elementor-element-k_head_4 .elementor-heading-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #222222 !important;
        margin-bottom: 12px !important;
        writing-mode: horizontal-tb !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .elementor-element-k_desc_1,
    .elementor-element-k_desc_2,
    .elementor-element-k_desc_3,
    .elementor-element-k_desc_4 {
        width: 100% !important;
        writing-mode: horizontal-tb !important;
    }

    .elementor-element-k_desc_1 p,
    .elementor-element-k_desc_2 p,
    .elementor-element-k_desc_3 p,
    .elementor-element-k_desc_4 p {
        font-size: 16px !important;
        color: #555555 !important;
        line-height: 1.6 !important;
        writing-mode: horizontal-tb !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Section Gallery: Enlarged 4 Photo Cards */
    .elementor-element-sec_gallery {
        padding: 80px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-element-gallery_head .elementor-heading-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        margin-bottom: 12px !important;
    }

    .elementor-element-gallery_sub p {
        font-size: 20px !important;
        margin-bottom: 28px !important;
    }

    .elementor-element-gallery_grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 28px !important;
        width: 100% !important;
        margin-top: 40px !important;
        box-sizing: border-box !important;
    }

    .elementor-element-g_img_1,
    .elementor-element-g_img_2,
    .elementor-element-g_img_3,
    .elementor-element-g_img_4 {
        flex: 1 1 0% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-element-g_img_1 img,
    .elementor-element-g_img_2 img,
    .elementor-element-g_img_3 img,
    .elementor-element-g_img_4 img {
        width: 100% !important;
        height: 400px !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(235, 104, 126, 0.12) !important;
    }

    /* Section Trend: Enlarged Photo Cards */
    .elementor-element-sec_trend {
        padding: 80px 60px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .elementor-element-trend_head .elementor-heading-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        margin-bottom: 12px !important;
    }

    .elementor-element-trend_sub p {
        font-size: 20px !important;
        margin-bottom: 28px !important;
    }

    .elementor-element-trend_grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 24px !important;
        width: 100% !important;
        margin-top: 40px !important;
        box-sizing: border-box !important;
    }

    .elementor-element-t_img_1,
    .elementor-element-t_img_2,
    .elementor-element-t_img_3,
    .elementor-element-t_img_4,
    .elementor-element-t_img_5 {
        flex: 1 1 0% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-element-t_img_1 img,
    .elementor-element-t_img_2 img,
    .elementor-element-t_img_3 img,
    .elementor-element-t_img_4 img,
    .elementor-element-t_img_5 img {
        width: 100% !important;
        height: 350px !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(235, 104, 126, 0.12) !important;
    }

    .elementor-element-trend_note p,
    .elementor-element-trend_note {
        font-size: 16px !important;
        margin-top: 24px !important;
    }

    /* Footer Section Wrapper */
    .elementor-element-sec_footer {
        width: 100% !important;
        padding: 40px 60px !important;
    }
}

/* ================================================================
   MOBILE LAYOUT — 100% IDENTICAL TO PC REFERENCE IMAGE (≤ 1023px)
   ================================================================ */
@media (max-width: 1023px) {

    /* ---- Global Mobile Reset ---- */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* ---- Master Container ---- */
    .elementor-30 .elementor-element.elementor-element-master_v4_container,
    .elementor-element.elementor-element-master_v4_container,
    .yabai-v4-master-canvas {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background-color: #fdf5f6 !important;
        border: none !important;
    }

    /* ---- Hero Section ----
       PC shows a single full-width hero image.
       On mobile we keep the same: full-width image widget, no background-image split. */
    .elementor-30 .elementor-element.elementor-element-sec_hero,
    .elementor-element-sec_hero {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .elementor-30 .elementor-element.elementor-element-hero_img_widget,
    .elementor-element-hero_img_widget {
        width: 100% !important;
        text-align: center !important;
    }

    .elementor-element-hero_img_widget img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
    }

    /* ---- Booking Section ----
       PC: 2 booking boxes side-by-side in a row. Identical on mobile. */
    .elementor-30 .elementor-element.elementor-element-sec_booking,
    .elementor-element-sec_booking {
        padding: 20px 16px 15px 16px !important;
        background-color: #fdf5f6 !important;
    }

    .elementor-30 .elementor-element.elementor-element-book_head .elementor-heading-title,
    .elementor-element-book_head .elementor-heading-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #eb687e !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }

    .elementor-element-book_sub p {
        font-size: 12px !important;
        color: #666666 !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    /* Booking buttons row — FORCE horizontal */
    .elementor-30 .elementor-element.elementor-element-booking_btns_row,
    .elementor-30 .elementor-element.elementor-element-booking_btns_row.e-con,
    .elementor-element-booking_btns_row,
    [data-id="booking_btns_row"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .elementor-30 .elementor-element.elementor-element-btn_hp_box,
    .elementor-30 .elementor-element.elementor-element-btn_na_box,
    .elementor-30 .elementor-element.elementor-element-btn_hp_box.e-con,
    .elementor-30 .elementor-element.elementor-element-btn_na_box.e-con,
    .elementor-element-btn_hp_box,
    .elementor-element-btn_na_box {
        flex: 1 1 0% !important;
        width: 50% !important;
        min-width: 0 !important;
        padding: 12px 10px 10px 10px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .elementor-element-btn_hp_img_w img,
    .elementor-element-btn_na_img_w img {
        max-height: 36px !important;
        width: auto !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .elementor-element-btn_hp_action .elementor-button,
    .elementor-element-btn_na_action .elementor-button {
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 8px 14px !important;
        border-radius: 15px !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .elementor-element-book_note p,
    .elementor-element-book_note {
        font-size: 11px !important;
        color: #eb687e !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    /* ---- Kodawari Section ----
       PC: 4 equal columns in a row with icon + title + desc. Same on mobile. */
    .elementor-30 .elementor-element.elementor-element-sec_kodawari,
    .elementor-element-sec_kodawari {
        padding: 20px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #fff8f9 !important;
    }

    .elementor-30 .elementor-element.elementor-element-kodawari_head .elementor-heading-title,
    .elementor-element-kodawari_head .elementor-heading-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #eb687e !important;
        text-align: center !important;
        margin-bottom: 14px !important;
    }

    /* Kodawari grid — FORCE 4-column row */
    .elementor-30 .elementor-element.elementor-element-kodawari_grid,
    .elementor-30 .elementor-element.elementor-element-kodawari_grid.e-con,
    .elementor-element-kodawari_grid,
    [data-id="kodawari_grid"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: stretch !important;
    }

    .elementor-30 .elementor-element.elementor-element-k_col_1,
    .elementor-30 .elementor-element.elementor-element-k_col_2,
    .elementor-30 .elementor-element.elementor-element-k_col_3,
    .elementor-30 .elementor-element.elementor-element-k_col_4,
    .elementor-30 .elementor-element.elementor-element-k_col_1.e-con,
    .elementor-30 .elementor-element.elementor-element-k_col_2.e-con,
    .elementor-30 .elementor-element.elementor-element-k_col_3.e-con,
    .elementor-30 .elementor-element.elementor-element-k_col_4.e-con,
    .elementor-element-k_col_1,
    .elementor-element-k_col_2,
    .elementor-element-k_col_3,
    .elementor-element-k_col_4 {
        flex: 1 1 0% !important;
        width: 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
        padding: 12px 6px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        writing-mode: horizontal-tb !important;
        box-sizing: border-box !important;
    }

    .elementor-element-k_col_1 *,
    .elementor-element-k_col_2 *,
    .elementor-element-k_col_3 *,
    .elementor-element-k_col_4 * {
        writing-mode: horizontal-tb !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .elementor-element-k_icon_1 img,
    .elementor-element-k_icon_2 img,
    .elementor-element-k_icon_3 img,
    .elementor-element-k_icon_4 img {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto 6px auto !important;
        display: block !important;
    }

    .elementor-element-k_head_1 .elementor-heading-title,
    .elementor-element-k_head_2 .elementor-heading-title,
    .elementor-element-k_head_3 .elementor-heading-title,
    .elementor-element-k_head_4 .elementor-heading-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #222222 !important;
        margin-bottom: 4px !important;
        writing-mode: horizontal-tb !important;
        text-align: center !important;
    }

    .elementor-element-k_desc_1 p,
    .elementor-element-k_desc_2 p,
    .elementor-element-k_desc_3 p,
    .elementor-element-k_desc_4 p {
        font-size: 10px !important;
        color: #666666 !important;
        line-height: 1.5 !important;
        writing-mode: horizontal-tb !important;
        text-align: center !important;
    }

    /* ---- Gallery Section ----
       PC: 4 photos in a horizontal row, equal width, tall/portrait. Same on mobile. */
    .elementor-30 .elementor-element.elementor-element-sec_gallery,
    .elementor-element-sec_gallery {
        padding: 20px 12px 15px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #fdf5f6 !important;
    }

    .elementor-30 .elementor-element.elementor-element-gallery_head .elementor-heading-title,
    .elementor-element-gallery_head .elementor-heading-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #eb687e !important;
        text-align: center !important;
        margin-bottom: 3px !important;
    }

    .elementor-element-gallery_sub p {
        font-size: 11px !important;
        color: #666666 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    /* Gallery grid — FORCE 4-photo row */
    .elementor-30 .elementor-element.elementor-element-gallery_grid,
    .elementor-30 .elementor-element.elementor-element-gallery_grid.e-con,
    .elementor-element-gallery_grid,
    [data-id="gallery_grid"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: stretch !important;
    }

    .elementor-30 .elementor-element.elementor-element-g_img_1,
    .elementor-30 .elementor-element.elementor-element-g_img_2,
    .elementor-30 .elementor-element.elementor-element-g_img_3,
    .elementor-30 .elementor-element.elementor-element-g_img_4,
    .elementor-30 .elementor-element.elementor-element-g_img_1.e-con,
    .elementor-30 .elementor-element.elementor-element-g_img_2.e-con,
    .elementor-30 .elementor-element.elementor-element-g_img_3.e-con,
    .elementor-30 .elementor-element.elementor-element-g_img_4.e-con,
    .elementor-element-g_img_1,
    .elementor-element-g_img_2,
    .elementor-element-g_img_3,
    .elementor-element-g_img_4 {
        flex: 1 1 0% !important;
        width: 25% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .elementor-element-g_img_1 img,
    .elementor-element-g_img_2 img,
    .elementor-element-g_img_3 img,
    .elementor-element-g_img_4 img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    /* ---- Trend Section ----
       PC: 5 photos in a horizontal row. Same on mobile. */
    .elementor-30 .elementor-element.elementor-element-sec_trend,
    .elementor-element-sec_trend {
        padding: 15px 12px 20px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #fdf5f6 !important;
    }

    .elementor-30 .elementor-element.elementor-element-trend_head .elementor-heading-title,
    .elementor-element-trend_head .elementor-heading-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #eb687e !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }

    .elementor-element-trend_sub p {
        font-size: 11px !important;
        color: #666666 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    /* Trend grid — FORCE 5-photo row */
    .elementor-30 .elementor-element.elementor-element-trend_grid,
    .elementor-30 .elementor-element.elementor-element-trend_grid.e-con,
    .elementor-element-trend_grid,
    [data-id="trend_grid"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100% !important;
        justify-content: space-between !important;
        align-items: stretch !important;
    }

    .elementor-30 .elementor-element.elementor-element-t_img_1,
    .elementor-30 .elementor-element.elementor-element-t_img_2,
    .elementor-30 .elementor-element.elementor-element-t_img_3,
    .elementor-30 .elementor-element.elementor-element-t_img_4,
    .elementor-30 .elementor-element.elementor-element-t_img_5,
    .elementor-30 .elementor-element.elementor-element-t_img_1.e-con,
    .elementor-30 .elementor-element.elementor-element-t_img_2.e-con,
    .elementor-30 .elementor-element.elementor-element-t_img_3.e-con,
    .elementor-30 .elementor-element.elementor-element-t_img_4.e-con,
    .elementor-30 .elementor-element.elementor-element-t_img_5.e-con,
    .elementor-element-t_img_1,
    .elementor-element-t_img_2,
    .elementor-element-t_img_3,
    .elementor-element-t_img_4,
    .elementor-element-t_img_5 {
        flex: 1 1 0% !important;
        width: 20% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .elementor-element-t_img_1 img,
    .elementor-element-t_img_2 img,
    .elementor-element-t_img_3 img,
    .elementor-element-t_img_4 img,
    .elementor-element-t_img_5 img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .elementor-element-trend_note p,
    .elementor-element-trend_note {
        font-size: 11px !important;
        color: #eb687e !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    /* ---- Footer Section ----
       PC: Payment card, features row, brand+shop info. Same structure on mobile. */
    .elementor-30 .elementor-element.elementor-element-sec_footer,
    .elementor-element-sec_footer {
        padding: 20px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 14px !important;
        background-color: #fdf5f6 !important;
    }

    /* Kill all default Elementor container padding inside footer */
    .elementor-element-sec_footer .e-con,
    .elementor-element-sec_footer .e-con-inner,
    .elementor-element-sec_footer .elementor-element[data-element_type="container"] {
        padding: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    /* 1. Payment Card */
    .elementor-30 .elementor-element.elementor-element-footer_sec_payment,
    .elementor-30 .elementor-element.elementor-element-footer_sec_payment.e-con,
    .elementor-element-footer_sec_payment,
    .yabai-payment-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid #fce8eb !important;
        box-shadow: 0 4px 16px rgba(235, 104, 126, 0.06) !important;
    }

    .elementor-element-pay_heading .elementor-heading-title {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #222222 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    /* Payment methods row — FORCE horizontal */
    .elementor-30 .elementor-element.elementor-element-pay_methods_row,
    .elementor-30 .elementor-element.elementor-element-pay_methods_row.e-con,
    .elementor-element.elementor-element-pay_methods_row,
    [data-id="pay_methods_row"],
    .yabai-payment-body {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .elementor-30 .elementor-element.elementor-element-pay_cash_box,
    .elementor-30 .elementor-element.elementor-element-pay_paypay_box,
    .elementor-30 .elementor-element.elementor-element-pay_cash_box.e-con,
    .elementor-30 .elementor-element.elementor-element-pay_paypay_box.e-con,
    .elementor-element.elementor-element-pay_cash_box,
    .elementor-element.elementor-element-pay_paypay_box,
    [data-id="pay_cash_box"],
    [data-id="pay_paypay_box"],
    .yabai-pay-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .yabai-pay-icon-img img {
        height: 24px !important;
        width: auto !important;
    }

    .elementor-element-pay_cash_text .elementor-heading-title,
    .elementor-element-pay_paypay_text .elementor-heading-title,
    .yabai-pay-title .elementor-heading-title,
    .yabai-pay-title h4 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #222222 !important;
    }

    .yabai-pay-desc p,
    .elementor-element-pay_desc_text p {
        font-size: 11px !important;
        color: #333333 !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin-top: 6px !important;
    }

    /* 2. Features — FORCE 4-column row */
    .elementor-30 .elementor-element.elementor-element-footer_sec_features,
    .elementor-30 .elementor-element.elementor-element-footer_sec_features.e-con,
    .elementor-element.elementor-element-footer_sec_features,
    [data-id="footer_sec_features"],
    .yabai-features-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    .elementor-30 .elementor-element.elementor-element-feat_col_1,
    .elementor-30 .elementor-element.elementor-element-feat_col_2,
    .elementor-30 .elementor-element.elementor-element-feat_col_3,
    .elementor-30 .elementor-element.elementor-element-feat_col_4,
    .elementor-30 .elementor-element.elementor-element-feat_col_1.e-con,
    .elementor-30 .elementor-element.elementor-element-feat_col_2.e-con,
    .elementor-30 .elementor-element.elementor-element-feat_col_3.e-con,
    .elementor-30 .elementor-element.elementor-element-feat_col_4.e-con,
    .elementor-element.elementor-element-feat_col_1,
    .elementor-element.elementor-element-feat_col_2,
    .elementor-element.elementor-element-feat_col_3,
    .elementor-element.elementor-element-feat_col_4,
    [data-id="feat_col_1"],
    [data-id="feat_col_2"],
    [data-id="feat_col_3"],
    [data-id="feat_col_4"],
    .yabai-feature-item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        padding: 4px 2px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }

    .elementor-30 .elementor-element.elementor-element-feat_1_content_box,
    .elementor-30 .elementor-element.elementor-element-feat_2_content_box,
    .elementor-30 .elementor-element.elementor-element-feat_3_content_box,
    .elementor-30 .elementor-element.elementor-element-feat_4_content_box,
    .elementor-30 .elementor-element.elementor-element-feat_1_content_box.e-con,
    .elementor-30 .elementor-element.elementor-element-feat_2_content_box.e-con,
    .elementor-30 .elementor-element.elementor-element-feat_3_content_box.e-con,
    .elementor-30 .elementor-element.elementor-element-feat_4_content_box.e-con,
    [data-id="feat_1_content_box"],
    [data-id="feat_2_content_box"],
    [data-id="feat_3_content_box"],
    [data-id="feat_4_content_box"],
    .yabai-feature-content-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    .yabai-feat-icon-img img {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    .yabai-feat-title .elementor-heading-title {
        font-size: 8px !important;
        font-weight: 700 !important;
        color: #e6526e !important;
    }

    .yabai-feat-desc p {
        font-size: 7px !important;
        line-height: 1.3 !important;
        color: #333333 !important;
    }

    /* 3. Footer Info Row — brand + shop card side-by-side */
    .elementor-30 .elementor-element.elementor-element-footer_sec_info,
    .elementor-30 .elementor-element.elementor-element-footer_sec_info.e-con,
    .elementor-element.elementor-element-footer_sec_info.e-con,
    .elementor-element.elementor-element-footer_sec_info,
    .e-con.elementor-element-footer_sec_info,
    [data-id="footer_sec_info"],
    .yabai-footer-info-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    .elementor-30 .elementor-element.elementor-element-info_brand_col,
    .elementor-30 .elementor-element.elementor-element-info_brand_col.e-con,
    .elementor-element.elementor-element-info_brand_col.e-con,
    .elementor-element.elementor-element-info_brand_col,
    [data-id="info_brand_col"],
    .yabai-brand-col {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .yabai-brand-title .elementor-heading-title {
        font-size: 22px !important;
        text-align: left !important;
    }

    .yabai-brand-tagline .elementor-heading-title {
        font-size: 14px !important;
        text-align: left !important;
    }

    .elementor-30 .elementor-element.elementor-element-info_shop_card,
    .elementor-30 .elementor-element.elementor-element-info_shop_card.e-con,
    .elementor-element.elementor-element-info_shop_card.e-con,
    .elementor-element.elementor-element-info_shop_card,
    [data-id="info_shop_card"],
    .yabai-shop-card {
        min-width: 0 !important;
        width: auto !important;
        flex: 1 1 0% !important;
        padding: 14px 16px !important;
        border-radius: 14px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid #fce8eb !important;
        box-shadow: 0 4px 16px rgba(235, 104, 126, 0.06) !important;
    }

    .elementor-30 .elementor-element.elementor-element-shop_row_1,
    .elementor-30 .elementor-element.elementor-element-shop_row_2,
    .elementor-30 .elementor-element.elementor-element-shop_row_3,
    .elementor-30 .elementor-element.elementor-element-shop_row_4,
    .elementor-30 .elementor-element.elementor-element-shop_row_1.e-con,
    .elementor-30 .elementor-element.elementor-element-shop_row_2.e-con,
    .elementor-30 .elementor-element.elementor-element-shop_row_3.e-con,
    .elementor-30 .elementor-element.elementor-element-shop_row_4.e-con,
    [data-id="shop_row_1"],
    [data-id="shop_row_2"],
    [data-id="shop_row_3"],
    [data-id="shop_row_4"],
    .yabai-shop-line-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .yabai-shop-icon-img img {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .yabai-shop-title-pink .elementor-heading-title {
        font-size: 11px !important;
        color: #e6526e !important;
        font-weight: 800 !important;
    }

    .yabai-shop-text-dark-heading .elementor-heading-title,
    .yabai-shop-text-dark p,
    .yabai-shop-text-bold .elementor-heading-title {
        font-size: 10px !important;
        color: #333333 !important;
    }

    /* ---- Global Elementor e-con override inside footer ----
       Force all e-con containers inside footer to respect row direction */
    .elementor-element-sec_footer .e-con {
        flex-wrap: nowrap !important;
    }

    .elementor-element-sec_footer [data-id="footer_sec_info"] > .e-con,
    .elementor-element-sec_footer [data-id="footer_sec_features"] > .e-con,
    .elementor-element-sec_footer [data-id="pay_methods_row"] > .e-con {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}