/* ==================================================
   DailyBeautyJewel Responsive CSS
   Mobile Phase 1A Panel / Search / Bottom Tuning / 2026-08-26

   Breakpoints
   - Desktop: >= 1000px (legacy Desktop UI remains authoritative)
   - Tablet: 768px - 999px
   - Phone: <= 767px
   - Small Phone: <= 420px

   Maintenance rule
   - Keep new responsive rules scoped inside breakpoints.
   - Do not migrate/remove legacy style.css @media rules until final RWD QA.
   ================================================== */

/* ==================================================
   01. Global / Layout
   ================================================== */
@media screen and (max-width: 999px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body.dbj-mobile-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    /* Fully take ownership of the mobile header shell. Legacy style.css still
       carries <=480px height/padding rules for .header-style-1. */
    .header-style-1.type-3 {
        right: 0;
        left: 0;
        height: 108px;
        min-height: 108px;
        padding: 0;
        background: #fff;
    }

    /* Legacy FLORIS mobile cart shortcut is replaced by the DBJ mobile shell. */
    .header-style-1.type-3 > .menu-icon.dark-layer {
        display: none;
    }

    /* Search is still the existing form/logic; only its mobile presentation changes. */
    .header-style-1.type-3 .search-block {
        position: fixed;
        top: 108px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        min-height: 0;
        padding: 12px;
        border: 1px solid var(--dbj-color-search-panel-border, #e5e5e5);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
        z-index: 1200;
        visibility: visible;
        opacity: 1;
    }

    .header-style-1.type-3 .search-block .custom-search-input {
        min-height: 44px;
        padding: 8px 14px;
    }

    .header-style-1.type-3 .search-block .custom-search-input input {
        min-width: 0;
        font-size: 17px;
    }
}

/* ==================================================
   02. Mobile Header
   ================================================== */
@media screen and (max-width: 999px) {
    .dbj-mobile-header {
        position: relative;
        z-index: 1100;
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr) 70px;
        align-items: center;
        width: 100%;
        height: 108px;
        padding: 0 18px;
        background: #fff;
        border-bottom: 1px solid var(--dbj-color-section-line, #e5e5e5);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04);
    }

    .dbj-mobile-menu-toggle,
    .dbj-mobile-header-cart,
    .dbj-mobile-menu-close {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        outline: 0;
        box-shadow: none;
        background: transparent;
        color: #222;
        cursor: pointer;
        padding: 0;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .dbj-mobile-logo,
    .dbj-mobile-menu-logo,
    .dbj-mobile-menu-direct,
    .dbj-mobile-menu-accordion,
    .dbj-mobile-menu-panel a,
    .dbj-mobile-menu-language a,
    .dbj-mobile-bottom-item {
        outline: 0;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .dbj-mobile-menu-toggle:focus,
    .dbj-mobile-menu-toggle:focus-visible,
    .dbj-mobile-menu-toggle:active,
    .dbj-mobile-logo:focus,
    .dbj-mobile-logo:focus-visible,
    .dbj-mobile-logo:active,
    .dbj-mobile-header-cart:focus,
    .dbj-mobile-header-cart:focus-visible,
    .dbj-mobile-header-cart:active,
    .dbj-mobile-menu-close:focus,
    .dbj-mobile-menu-close:focus-visible,
    .dbj-mobile-menu-close:active {
        border: 0;
        outline: 0;
        box-shadow: none;
        background: transparent;
    }

    .dbj-mobile-menu-logo:focus,
    .dbj-mobile-menu-logo:focus-visible,
    .dbj-mobile-menu-logo:active,
    .dbj-mobile-menu-direct:focus,
    .dbj-mobile-menu-direct:focus-visible,
    .dbj-mobile-menu-direct:active,
    .dbj-mobile-menu-accordion:focus,
    .dbj-mobile-menu-accordion:focus-visible,
    .dbj-mobile-menu-accordion:active,
    .dbj-mobile-menu-panel a:focus,
    .dbj-mobile-menu-panel a:focus-visible,
    .dbj-mobile-menu-panel a:active,
    .dbj-mobile-menu-language a:focus,
    .dbj-mobile-menu-language a:focus-visible,
    .dbj-mobile-menu-language a:active,
    .dbj-mobile-bottom-item:focus,
    .dbj-mobile-bottom-item:focus-visible,
    .dbj-mobile-bottom-item:active {
        border: 0;
        outline: 0;
        box-shadow: none;
        background: transparent;
    }

    .dbj-mobile-menu-toggle,
    .dbj-mobile-header-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 62px;
    }

    .dbj-mobile-menu-toggle {
        justify-self: start;
    }

    .dbj-mobile-header-cart {
        justify-self: end;
    }

    .dbj-mobile-menu-toggle svg,
    .dbj-mobile-header-cart svg {
        display: block;
        width: 42px;
        height: 42px;
        fill: currentColor;
    }

    .dbj-mobile-header-cart-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
    }

    .dbj-mobile-cart-badge {
        position: absolute;
        top: -6px;
        right: -9px;
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 2px solid #fff;
        border-radius: 9px;
        background: var(--dbj-color-danger, #f13232);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .dbj-mobile-cart-badge.is-visible {
        display: flex;
    }

    .dbj-mobile-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        height: 108px;
        justify-self: center;
    }

    .dbj-mobile-logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 210px;
        max-height: 82px;
    }
}

@media screen and (min-width: 1000px) {
    .dbj-mobile-header,
    .dbj-mobile-menu-overlay,
    .dbj-mobile-menu,
    .dbj-mobile-bottom-nav {
        display: none;
    }
}

/* ==================================================
   03. Mobile Navigation
   ================================================== */
@media screen and (max-width: 999px) {
    .dbj-mobile-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 1390;
        display: block;
        background: rgba(0, 0, 0, 0.38);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .dbj-mobile-menu-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dbj-mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1400;
        display: flex;
        flex-direction: column;
        width: min(64vw, 540px);
        height: 100vh;
        height: 100dvh;
        background: #fff;
        box-shadow: 10px 0 32px rgba(0, 0, 0, 0.14);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform 0.26s ease, visibility 0.26s ease;
        overflow: hidden;
    }

    .dbj-mobile-menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .dbj-mobile-menu-head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 132px;
        padding: 0 26px 0 34px;
        border-bottom: 1px solid var(--dbj-color-section-line, #e5e5e5);
    }

    .dbj-mobile-menu-logo {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .dbj-mobile-menu-logo img {
        display: block;
        width: auto;
        max-width: 260px;
        max-height: 112px;
    }

    .dbj-mobile-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .dbj-mobile-menu-close svg {
        display: block;
        width: 34px;
        height: 34px;
        fill: currentColor;
    }

    .dbj-mobile-menu-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 18px 34px 38px;
    }

    .dbj-mobile-menu-direct,
    .dbj-mobile-menu-accordion {
        width: 100%;
        min-height: 94px;
        display: flex;
        align-items: center;
        color: #202020;
        font-size: 25px;
        font-weight: 550;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-align: left;
        text-decoration: none;
        border: 0;
        border-bottom: 1px solid #eeeeee;
        background: transparent;
        padding: 0 2px;
        margin: 0;
    }

    .dbj-mobile-menu-direct {
        position: relative;
    }

    .dbj-mobile-menu-direct:hover,
    .dbj-mobile-menu-direct:focus,
    .dbj-mobile-menu-direct:focus-visible,
    .dbj-mobile-menu-accordion:hover,
    .dbj-mobile-menu-accordion:focus,
    .dbj-mobile-menu-accordion:focus-visible {
        color: var(--dbj-color-header-icon-hover, #000);
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }

    .dbj-mobile-menu-accordion {
        appearance: none;
        -webkit-appearance: none;
        justify-content: space-between;
        cursor: pointer;
    }

    .dbj-mobile-menu-chevron {
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
        margin-left: 12px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.2s ease;
    }

    .dbj-mobile-menu-group.is-open .dbj-mobile-menu-chevron {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    .dbj-mobile-menu-panel {
        display: none;
        padding: 12px 0 20px;
        border-bottom: 1px solid #eeeeee;
    }

    .dbj-mobile-menu-group.is-open .dbj-mobile-menu-panel {
        display: block;
    }

    .dbj-mobile-menu-panel a {
        display: block;
        padding: 17px 0 17px 58px;
        color: #666666;
        font-size: 22px;
        line-height: 1.45;
        text-align: left;
        text-decoration: none;
    }

    .dbj-mobile-menu-panel a:hover,
    .dbj-mobile-menu-panel a:focus {
        color: #111;
        text-decoration: none;
    }

    .dbj-mobile-menu-language {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
        margin: 0;
        padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--dbj-color-section-line, #e5e5e5);
        background: #fff;
    }

    .dbj-mobile-menu-language a,
    .dbj-mobile-menu-language .lang-divider {
        font-size: 17px;
        line-height: 1;
    }
}

/* Tablet keeps the Mobile Header / Drawer but not the Phone bottom bar.
   Phone-specific compatibility media below comes later and can opt a tall touch phone back in. */
@media screen and (min-width: 768px) and (max-width: 999px) {
    .dbj-mobile-bottom-nav {
        display: none;
    }
}

/* Phone bottom navigation.
   Compatibility arm: some Android browsers can expose a 768-999 CSS viewport
   while still being a narrow/tall touch phone. Keep 4:3-ish tablets excluded. */
@media screen and (max-width: 767px),
       screen and (min-width: 768px) and (max-width: 999px) and (max-device-width: 767px),
       screen and (min-width: 768px) and (max-width: 999px) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 2/3) {
    :root {
        --dbj-mobile-bottom-nav-height: 132px;
    }

    .dbj-mobile-menu {
        width: 64vw;
        max-width: 540px;
    }

    /* Phone Search Dock: reuse the verified legacy searchForm, but present it
       directly above the Bottom Navigation instead of under the Header. */
    .header-style-1.type-3 .search-block {
        top: auto;
        right: 0;
        bottom: calc(var(--dbj-mobile-bottom-nav-height) + env(safe-area-inset-bottom));
        left: 0;
        width: auto;
        max-width: 100vw;
        min-height: 0;
        box-sizing: border-box;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.98);
        border: 0;
        border-top: 1px solid var(--dbj-color-search-panel-border, #e5e5e5);
        border-bottom: 1px solid var(--dbj-color-search-panel-border, #e5e5e5);
        border-radius: 0;
        box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.08);
        z-index: 1200;
    }

    .header-style-1.type-3 .search-block form,
    .header-style-1.type-3 .search-block .custom-search-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .header-style-1.type-3 .search-block .custom-search-input {
        min-height: 60px;
        padding: 12px 18px;
        margin: 0;
    }

    .header-style-1.type-3 .search-block .custom-search-input input {
        height: 32px;
        font-size: 17px;
        line-height: 32px;
    }

    .header-style-1.type-3 .search-block .custom-search-input .search-btn svg {
        width: 24px;
        height: 24px;
    }

    .dbj-mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: repeat(5, 68px);
        justify-content: space-evenly;
        align-items: stretch;
        box-sizing: border-box;
        height: calc(var(--dbj-mobile-bottom-nav-height) + env(safe-area-inset-bottom));
        min-height: 0;
        padding: 3px 0 calc(3px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid #dedede;
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.06);
    }

    .dbj-mobile-bottom-item {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        min-width: 0;
        min-height: 124px;
        border: 0;
        background: transparent;
        color: #333;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.05;
        text-align: center;
        text-decoration: none;
        padding: 1px 0;
        margin: 0;
        cursor: pointer;
    }

    .dbj-mobile-bottom-item:hover,
    .dbj-mobile-bottom-item:focus,
    .dbj-mobile-bottom-item:focus-visible,
    .dbj-mobile-bottom-item:active {
        color: #111;
        text-decoration: none;
        border: 0;
        outline: 0;
        box-shadow: none;
        background: transparent;
    }

    .dbj-mobile-bottom-shop {
        font-weight: 700;
        color: #111;
    }

    .dbj-mobile-bottom-item > svg,
    .dbj-mobile-bottom-icon-wrap > svg {
        display: block;
        width: 62px;
        height: 62px;
        fill: currentColor;
    }

    .dbj-mobile-bottom-item.dbj-mobile-bottom-shop > svg {
        width: 66px;
        height: 66px;
    }

    .dbj-mobile-bottom-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
    }

    .dbj-mobile-bottom-item > span:last-child {
        display: block;
        width: auto;
        max-width: none;
        overflow: visible;
        white-space: nowrap;
        text-overflow: clip;
    }

    .dbj-mobile-bottom-notice {
        top: -1px;
        right: -3px;
    }


    /* Existing footer remains untouched; reserve room so the fixed nav never covers its last row. */
    #footer,
    .copyRight {
        scroll-margin-bottom: calc(var(--dbj-mobile-bottom-nav-height) + 12px + env(safe-area-inset-bottom));
    }

    body.dbj-has-mobile-bottom-nav {
        padding-bottom: calc(var(--dbj-mobile-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    /* Side cart / modal must stay visually above the bottom navigation. */
    .check-out.popup.mark-popup-2,
    .popup.active {
        z-index: 2000;
    }
}

@media screen and (max-width: 420px) {
    /* Keep the compact-phone shell visually substantial; do not shrink it back
       to the legacy tiny-header / tiny-label proportions. */
    .dbj-mobile-header {
        grid-template-columns: 64px minmax(0, 1fr) 64px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .dbj-mobile-menu-toggle,
    .dbj-mobile-header-cart {
        width: 58px;
        height: 58px;
    }

    .dbj-mobile-menu-toggle svg,
    .dbj-mobile-header-cart svg {
        width: 40px;
        height: 40px;
    }

    .dbj-mobile-logo img {
        max-width: 190px;
        max-height: 78px;
    }

    .dbj-mobile-bottom-item {
        font-size: 16px;
    }
}

/* ==================================================
   04. Footer
   Phase 1A: phone footer is stacked into readable full-width sections.
   ================================================== */
@media screen and (max-width: 767px),
       screen and (min-width: 768px) and (max-width: 999px) and (max-device-width: 767px),
       screen and (min-width: 768px) and (max-width: 999px) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 2/3) {
    #footer .footer-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 36px 24px 26px;
    }

    #footer .footer-container .footer-column,
    #footer .footer-container .footer-column.footer-categories,
    #footer .footer-container .footer-column.footer-collections,
    #footer .footer-container .footer-column.footer-support {
        flex: none;
        width: 100%;
        gap: 14px;
    }

    #footer .footer-container .footer-column h4 {
        font-size: 17px;
        line-height: 1.25;
    }

    #footer .footer-container .footer-column .footer-list {
        gap: 10px;
    }

    #footer .footer-container .footer-column.footer-categories .footer-list {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    #footer .footer-container .footer-column.footer-categories .footer-item {
        flex: 0 0 auto;
    }

    #footer .footer-container .footer-column .footer-list .footer-item a,
    #footer .footer-container .footer-column .footer-list .footer-item .footer-text {
        font-size: 12px;
        line-height: 1.45;
    }

    #footer .footer-container .footer-column .footer-listBox {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 24px;
        width: 100%;
    }

    #footer .footer-social {
        gap: 18px;
    }

    .copyRight {
        flex-direction: column-reverse;
        justify-content: center;
        gap: 18px;
        padding: 0 28px 34px;
        text-align: center;
    }

    .copyRight .text {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .copyRight .imgBox img {
        width: 145px;
        height: auto;
    }
}

@media screen and (max-width: 420px) {
    #footer .footer-container {
        padding-right: 18px;
        padding-left: 18px;
    }

    #footer .footer-container .footer-column.footer-categories .footer-list {
        gap: 6px;
    }

    #footer .footer-container .footer-column.footer-categories .footer-list .footer-item a {
        font-size: 11px;
    }

}

/* ==================================================
   05. Home
   Reserved for Mobile Phase 2.
   ================================================== */

/* ==================================================
   06. Product List
   Reserved for Mobile Phase 1B.
   ================================================== */

/* ==================================================
   07. Product Detail
   Reserved for Mobile Phase 2.
   ================================================== */

/* ==================================================
   08. Wishlist
   Reserved for Mobile Phase 2.
   ================================================== */

/* ==================================================
   09. Side Cart
   Phase 1A: keep existing cart logic, present the legacy panel as a right drawer.
   Panel width is edited at the existing style.css <=992px rule to avoid forced overrides.
   ================================================== */
@media screen and (max-width: 999px) {
    .check-out.popup.mark-popup-2 .check-wrap {
        padding: 34px 28px 0;
    }

    .check-out.popup.mark-popup-2 .check-item-wrap {
        padding-bottom: 470px;
    }

    .check-out.popup.mark-popup-2 .check-wrap .title {
        padding-bottom: 38px;
        font-size: 27px;
        line-height: 1.3;
    }

    .check-out.popup.mark-popup-2 .check-wrap .title span {
        padding-left: 12px;
        font-size: 21px;
        line-height: 1.3;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .check-pay {
        padding: 44px 30px 42px;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .price-total {
        float: none;
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 8px;
        align-items: baseline;
        width: 100%;
        margin-bottom: 28px;
        line-height: 1.35;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .price-total .side-cart-subtotal-label {
        grid-column: 1;
        grid-row: 1;
        padding: 0;
        font-size: 28px;
        line-height: 1.3;
        color: var(--dbj-color-product-title, #333333);
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .price-total #show_top_total_price_USD {
        grid-column: 2;
        grid-row: 1;
        display: block;
        margin: 0;
        padding: 0;
        font-size: 33px;
        line-height: 1.2;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .price-total #show_top_total_price {
        grid-column: 2;
        grid-row: 2;
        display: block;
        margin: 0;
        padding: 0;
        font-size: 26px;
        line-height: 1.25;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .check-pay p {
        max-width: none;
        margin: 0 0 34px;
        font-size: 18px;
        line-height: 1.55;
        overflow-wrap: break-word;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .check-pay .button-style.braun {
        float: none;
        display: flex;
        width: 88%;
        min-height: 64px;
        margin: 14px auto 0;
        padding: 0 16px;
    }

    .check-out.popup.mark-popup-2 .check-pay-wrap .check-pay .button-style.braun span {
        font-size: 22px;
        line-height: 1.15;
    }
}

/* ==================================================
   10. Cart Review
   Reserved for Mobile Phase 3.
   ================================================== */

/* ==================================================
   11. Checkout
   Reserved for Mobile Phase 3. Bottom Navigation is excluded in include_top.tpl.
   ================================================== */

/* ==================================================
   12. Login / Register
   Reserved for Mobile Phase 4.
   ================================================== */

/* ==================================================
   13. Member Dashboard
   Reserved for Mobile Phase 4.
   ================================================== */

/* ==================================================
   14. Rewards / Coupon
   Reserved for Mobile Phase 5.
   ================================================== */

/* ==================================================
   15. Orders
   Reserved for Mobile Phase 5.
   ================================================== */

/* ==================================================
   16. Return / Refund
   Reserved for Mobile Phase 6.
   ================================================== */

/* ==================================================
   17. FAQ / Contact / Legal
   Reserved for Mobile Phase 7.
   ================================================== */